/* /Pages/Register.razor.rz.scp.css */
/* ==========================================================================
   Registration form -- "אונטערן פארדאכט" production palette
   Primary #174156 (deep teal) / Secondary #987132 (bronze)

   Contrast notes, since the bronze is the awkward one:
     #987132 on white ....... 4.4:1  -> large/bold text, accents, rules only
     #987132 on #174156 ..... 2.5:1  -> NEVER text; too dark on the teal
     #d8b878 on #174156 ..... 5.8:1  -> the on-dark bronze for text
     #174156 on #f7f0e2 .... 14:1   -> teal text on soft bronze fills
     white on #174156 ...... 10:1
   ========================================================================== */

.reg-page[b-nqnpep6p90] {
    --primary: #174156;
    --primary-dark: #0f2d3c;
    --primary-soft: #eef4f7;
    --primary-line: #c6d8e1;

    --secondary: #987132;
    --secondary-light: #d8b878;   /* bronze that survives on the dark teal */
    --secondary-soft: #f7f0e2;
    --secondary-line: #e2cfa8;

    --ink: #16272f;
    --muted: #5c6f79;
    --line: #d9e2e7;
    --page: #f7fafb;
    --danger: #b3261e;

    --radius: 14px;
    --radius-sm: 9px;

    /* The blocked-state notice and its title are held to one width so they line
       up as a single centred block, rather than each finding its own edge. */
    --notice-width: 46rem;

    /* Arial is the reliable cross-platform Hebrew fallback; Segoe UI covers
       Windows, Arial Hebrew covers Apple. */
    --font-heb: 'Segoe UI', 'Arial Hebrew', Arial, sans-serif;

    color: var(--ink);
    background: var(--page);
    min-height: 100vh;
}

/* ---- Logo bar (white -- the purple HCS mark needs a light backing) ---- */

.reg-topbar[b-nqnpep6p90] {
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.reg-topbar-inner[b-nqnpep6p90] {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0.85rem 1.25rem;
}

/* The asset is 442x182 with the tagline baked in, so the tagline is only ever
   a decorative detail at header sizes -- the alt text carries it for real. */
.reg-logo[b-nqnpep6p90] {
    height: 60px;
    width: auto;
    display: block;
}

/* ---- Production hero ---- */

.reg-hero[b-nqnpep6p90] {
    background: var(--primary);
    border-bottom: 4px solid var(--secondary);
    text-align: center;
}

.reg-hero-inner[b-nqnpep6p90] {
    max-width: 1080px;
    margin: 0 auto;
    padding: 1.9rem 1.25rem 2rem;
}

.reg-presents[b-nqnpep6p90] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--secondary-light);
    margin: 0 0 0.6rem;
}

.reg-production[b-nqnpep6p90] {
    font-family: var(--font-heb);
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    margin: 0 0 0.9rem;
}

.reg-when[b-nqnpep6p90] {
    display: inline-block;
    font-family: var(--font-heb);
    font-size: 1.02rem;
    line-height: 1.5;
    color: var(--secondary-light);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(216, 184, 120, 0.45);
    border-radius: 999px;
    padding: 0.35rem 1.05rem;
    margin: 0;
}

/* ---- Page shell ---- */

.reg-main[b-nqnpep6p90] {
    max-width: 1080px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

.reg-titleblock[b-nqnpep6p90] {
    margin-bottom: 1.5rem;
}

.reg-formtitle[b-nqnpep6p90] {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 0.4rem;
}

.reg-lede[b-nqnpep6p90] {
    color: var(--muted);
    margin: 0;
    max-width: 52ch;
}

/* ---- Cards ---- */

.reg-card[b-nqnpep6p90] {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(22, 39, 47, 0.04), 0 8px 24px rgba(22, 39, 47, 0.05);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.reg-card-head[b-nqnpep6p90] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--primary-soft);
    border-bottom: 1px solid var(--line);
    padding: 0.9rem 1.25rem 0.9rem 1.1rem;
    /* bronze accent bar on the leading edge */
    box-shadow: inset 4px 0 0 var(--secondary);
}

.reg-card-head h3[b-nqnpep6p90] {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--primary);
    margin: 0;
}

.reg-count[b-nqnpep6p90] {
    margin-left: auto;
    background: var(--secondary-soft);
    border: 1px solid var(--secondary-line);
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 700;
    min-width: 1.7rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    text-align: center;
}

.reg-card-body[b-nqnpep6p90] {
    padding: 1.25rem;
}

/* ---- Instructions ---- */

/* The default disc and its indent are replaced so the markers line up with the
   card's own padding rather than hanging off it. */
.reg-instructions[b-nqnpep6p90] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.85rem;
    /* Wider than .reg-lede's 52ch: these run to several lines, and a short
       measure would break each one into a narrow column. */
    /*max-width: 68ch;*/
}

.reg-instructions li[b-nqnpep6p90] {
    position: relative;
    padding-left: 1.4rem;
    line-height: 1.6;
    color: var(--ink);
}

/* Bronze dot, to match the accent bar on the card heads. */
.reg-instructions li[b-nqnpep6p90]::before {
    content: "";
    position: absolute;
    left: 0;
    /* Set against the cap height rather than the line box, so it sits with the
       first line of a wrapping item. */
    top: 0.6em;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--secondary);
}

/* The instruction that is about what not to do. Soft bronze rather than red:
   emphatic, but nothing has gone wrong. It carries its own weight, so it drops
   the marker instead of having one float in the padding. */
/* Selected through the li so it outranks the marker rules above, which are
   themselves class-plus-element. */
.reg-instructions li.reg-instructions-note[b-nqnpep6p90] {
    padding: 0.8rem 1rem;
    background: var(--secondary-soft);
    border: 1px solid var(--secondary-line);
    border-radius: var(--radius-sm);
    color: var(--primary);
    font-weight: 600;
}

.reg-instructions li.reg-instructions-note[b-nqnpep6p90]::before {
    content: none;
}

/* ---- "We couldn't open your registration" state ---- */

/* Centred rather than left-aligned: there is nothing else on the page in this
   state, so a notice pinned to the left edge of a 1080px main reads as though
   the rest of the page failed to load. */
.reg-notice[b-nqnpep6p90] {
    max-width: var(--notice-width);
    margin-inline: auto;
}

/* The title belongs to the notice below it, so it travels with it instead of
   spanning the full width and leaving the two misaligned. */
.reg-titleblock-notice[b-nqnpep6p90] {
    max-width: var(--notice-width);
    margin-inline: auto;
}

.reg-notice .reg-card-body[b-nqnpep6p90] {
    /* bronze edge instead of a card header -- there is no section title here */
    box-shadow: inset 4px 0 0 var(--secondary);
    padding: 1.4rem 1.5rem;
}

.reg-notice p[b-nqnpep6p90] {
    margin: 0;
    line-height: 1.6;
}

.reg-notice-help[b-nqnpep6p90] {
    margin-top: 0.9rem !important;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
    font-size: 0.9rem;
    color: var(--muted);
}

/* ---- Loading ---- */

.reg-loading[b-nqnpep6p90] {
    color: var(--muted);
    padding: 2rem 0;
}

/* ---- Read-only summary (already registered / just submitted) ---- */

.reg-summary-list[b-nqnpep6p90] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.reg-summary-list li[b-nqnpep6p90] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.6rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid #eaeff2;
}

.reg-summary-list li:last-child[b-nqnpep6p90] {
    border-bottom: none;
    padding-bottom: 0;
}

.reg-summary-list li:first-child[b-nqnpep6p90] {
    padding-top: 0;
}

.reg-summary-name[b-nqnpep6p90] {
    font-weight: 600;
    color: var(--primary);
}

.reg-summary-meta[b-nqnpep6p90] {
    font-size: 0.88rem;
    color: var(--muted);
}

.reg-summary-flag[b-nqnpep6p90] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--danger);
    background: #fdf0ef;
    border: 1px solid #f2d5d2;
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
}

.reg-summary-list li.is-cancelled .reg-summary-name[b-nqnpep6p90] {
    text-decoration: line-through;
    color: var(--muted);
}

/* Per-participant cancel, pushed to the end of the row. */
.reg-summary-action[b-nqnpep6p90] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    /* The row aligns on the text baseline; a button box wants its own centre. */
    align-self: center;
}

.reg-summary-ask[b-nqnpep6p90] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
}

/* ---- Cancel ---- */

.reg-cancelbox[b-nqnpep6p90] {
    margin-top: 0.5rem;
}

.reg-cancel-ask[b-nqnpep6p90] {
    margin: 0 0 0.75rem;
    font-weight: 600;
    color: var(--ink);
}

.reg-cancel-actions[b-nqnpep6p90] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

/*
    A confirm/deny pair reads as one control, so both buttons share every
    measurement and differ only in colour: red for the destructive side, the
    page's teal for the safe one. Bronze is the accent for "add", not for this.

    .reg-keep is deliberately not .reg-add, which carries a margin-top for the
    Add Participant button below the table -- inside a centred flex row that
    margin pushed this button off the other one's line.
*/
.reg-cancel[b-nqnpep6p90],
.reg-keep[b-nqnpep6p90] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.5rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    background: #fff;
    border: 1.5px solid;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.reg-cancel[b-nqnpep6p90] {
    color: var(--danger);
    border-color: #e6bdb9;
}

.reg-cancel:hover:not(:disabled)[b-nqnpep6p90] {
    background: #fdf0ef;
    border-color: var(--danger);
}

.reg-cancel:focus-visible[b-nqnpep6p90] {
    outline: 2px solid var(--danger);
    outline-offset: 2px;
}

.reg-keep[b-nqnpep6p90] {
    color: var(--primary);
    border-color: var(--primary-line);
}

.reg-keep:hover:not(:disabled)[b-nqnpep6p90] {
    background: var(--primary-soft);
    border-color: var(--primary);
}

.reg-keep:focus-visible[b-nqnpep6p90] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Row-sized variant of either button, for the per-participant ask. */
.reg-cancel.is-compact[b-nqnpep6p90],
.reg-keep.is-compact[b-nqnpep6p90] {
    min-height: 34px;
    padding: 0.25rem 0.7rem;
    font-size: 0.8rem;
}

.reg-cancel:disabled[b-nqnpep6p90],
.reg-keep:disabled[b-nqnpep6p90],
.reg-add:disabled[b-nqnpep6p90] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ---- Save / cancel failure ---- */

.reg-error[b-nqnpep6p90] {
    margin: 0 0 1.25rem;
    padding: 0.9rem 1.1rem;
    background: #fdf3f2;
    border: 1px solid #f0cfcb;
    border-left: 4px solid var(--danger);
    border-radius: var(--radius-sm);
    color: var(--ink);
}

/* ---- Family fields ---- */

.reg-fields[b-nqnpep6p90] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
}

.reg-field[b-nqnpep6p90] {
    display: flex;
    flex-direction: column;
}

.reg-field label[b-nqnpep6p90] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 0.35rem;
}

.reg-req[b-nqnpep6p90] {
    color: var(--danger);
    font-weight: 700;
}

.reg-hint[b-nqnpep6p90] {
    font-size: 0.76rem;
    color: var(--muted);
    margin-top: 0.3rem;
}

/* ---- Inputs (rendered by Blazor input components -> ::deep) ---- */

.reg-page[b-nqnpep6p90]  .form-control,
.reg-page[b-nqnpep6p90]  .form-select {
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.7rem;
    font-size: 0.95rem;
    color: var(--ink);
    background-color: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* Bootstrap paints the dropdown arrow as a background image, so a select needs
   room on the right or its text runs underneath it. */
.reg-page[b-nqnpep6p90]  .form-select {
    padding-right: 2.1rem;
}

.reg-page[b-nqnpep6p90]  .form-control::placeholder {
    color: #9aa9b1;
}

.reg-page[b-nqnpep6p90]  .form-control:hover,
.reg-page[b-nqnpep6p90]  .form-select:hover {
    border-color: #b3c4cd;
}

/* Overrides the global blue focus ring in site.css */
.reg-page[b-nqnpep6p90]  .form-control:focus,
.reg-page[b-nqnpep6p90]  .form-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(23, 65, 86, 0.18);
}

.reg-page[b-nqnpep6p90]  .form-control.invalid,
.reg-page[b-nqnpep6p90]  .form-select.invalid {
    border-color: var(--danger);
    outline: none;
}

.reg-page[b-nqnpep6p90]  .form-control.valid.modified,
.reg-page[b-nqnpep6p90]  .form-select.valid.modified {
    outline: none;
}

.reg-page[b-nqnpep6p90]  .validation-message {
    color: var(--danger);
    font-size: 0.78rem;
    margin-top: 0.3rem;
}

/* ---- Participants table ---- */

.reg-tablewrap[b-nqnpep6p90] {
    overflow-x: auto;
    margin: -0.35rem 0 0;
}

.reg-table[b-nqnpep6p90] {
    width: 100%;
    min-width: 780px;
    border-collapse: separate;
    border-spacing: 0;
    /* Auto layout starves the dropdowns to feed First/Last. Budget the columns
       explicitly instead -- the date input needs the room. */
    table-layout: fixed;
}

/*
    Widths hang off the <colgroup> rather than th:nth-child. Positional rules
    silently reassign themselves when a column is added or removed -- dropping
    Transportation handed its 18% to the remove column, which squeezed every
    input and left a gap before the x. A named <col> cannot drift like that.
    The percentages total 91%; the two fixed columns take the rest.
*/
.reg-col-num[b-nqnpep6p90] { width: 2.75rem; }
.reg-col-name[b-nqnpep6p90] { width: 19%; }
.reg-col-gender[b-nqnpep6p90] { width: 15%; }
.reg-col-dob[b-nqnpep6p90] { width: 19%; }
.reg-col-show[b-nqnpep6p90] { width: 19%; }
.reg-col-action[b-nqnpep6p90] { width: 3.25rem; }

.reg-table th[b-nqnpep6p90] {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
    padding: 0 0.35rem 0.5rem;
    white-space: nowrap;
}

.reg-table td[b-nqnpep6p90] {
    padding: 0.3rem 0.35rem;
    vertical-align: top;
}

.reg-table tbody tr + tr td[b-nqnpep6p90] {
    border-top: 1px solid #eaeff2;
}

.reg-rownum[b-nqnpep6p90] {
    padding-top: 0.85rem !important;
}

.reg-numbadge[b-nqnpep6p90] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    background: var(--primary-soft);
    border: 1px solid var(--primary-line);
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 700;
}

.reg-row-action[b-nqnpep6p90] {
    text-align: right;
    white-space: nowrap;
}

/* ---- Remove button ---- */

.reg-remove[b-nqnpep6p90] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.5rem;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.reg-remove-text[b-nqnpep6p90] {
    display: none;
    font-size: 0.85rem;
    font-weight: 600;
}

.reg-remove:hover:not(:disabled)[b-nqnpep6p90] {
    color: var(--danger);
    background: #fdf0ef;
    border-color: #f2d5d2;
}

.reg-remove:focus-visible[b-nqnpep6p90] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.reg-remove:disabled[b-nqnpep6p90] {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ---- Add button ---- */

.reg-add[b-nqnpep6p90] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    min-height: 44px;
    padding: 0.5rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
    background: #fff;
    border: 1.5px dashed var(--secondary-line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.reg-add:hover[b-nqnpep6p90] {
    background: var(--secondary-soft);
    border-color: var(--secondary);
    border-style: solid;
}

.reg-add:focus-visible[b-nqnpep6p90] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ---- Validation summary ---- */

.reg-summary[b-nqnpep6p90]  .validation-errors {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0.9rem 1.1rem;
    background: #fdf3f2;
    border: 1px solid #f0cfcb;
    border-left: 4px solid var(--danger);
    border-radius: var(--radius-sm);
}

.reg-summary[b-nqnpep6p90]  .validation-errors:empty {
    display: none;
}

.reg-summary[b-nqnpep6p90]  .validation-message {
    color: var(--danger);
    font-size: 0.88rem;
    margin: 0.15rem 0;
}

/* ---- Submit ---- */

.reg-submit[b-nqnpep6p90] {
    text-align: center;
}

.reg-submit-btn[b-nqnpep6p90] {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    min-height: 52px;
    padding: 0.75rem 1.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #fff;
    background: var(--primary);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(23, 65, 86, 0.25);
    transition: background-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.reg-submit-btn:hover[b-nqnpep6p90] {
    background: var(--primary-dark);
    box-shadow: 0 4px 14px rgba(23, 65, 86, 0.3);
    transform: translateY(-1px);
}

.reg-submit-btn:active[b-nqnpep6p90] {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(23, 65, 86, 0.25);
}

.reg-submit-btn:focus-visible[b-nqnpep6p90] {
    outline: 3px solid var(--secondary);
    outline-offset: 2px;
}

.reg-submit-btn:disabled[b-nqnpep6p90] {
    background: #6d8894;
    box-shadow: none;
    transform: none;
    cursor: progress;
}

.reg-submit-note[b-nqnpep6p90] {
    font-size: 0.78rem;
    color: var(--muted);
    margin: 0.75rem 0 0;
}

/* ==========================================================================
   Small screens -- participant rows become stacked cards.
   Six inputs cannot share a phone's width, so each row gets its own card with
   the column names as inline labels.
   ========================================================================== */

@media (max-width: 780px) {

    .reg-logo[b-nqnpep6p90] {
        height: 44px;
    }

    .reg-hero-inner[b-nqnpep6p90] {
        padding: 1.4rem 1rem 1.5rem;
    }

    .reg-production[b-nqnpep6p90] {
        font-size: 1.95rem;
    }

    .reg-when[b-nqnpep6p90] {
        font-size: 0.95rem;
    }

    .reg-main[b-nqnpep6p90] {
        padding: 1.25rem 0.9rem 3rem;
    }

    .reg-formtitle[b-nqnpep6p90] {
        font-size: 1.4rem;
    }

    .reg-card-body[b-nqnpep6p90] {
        padding: 1rem;
    }

    .reg-fields[b-nqnpep6p90] {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .reg-tablewrap[b-nqnpep6p90] {
        overflow-x: visible;
        margin: 0;
    }

    .reg-table[b-nqnpep6p90] {
        min-width: 0;
    }

    .reg-table thead[b-nqnpep6p90] {
        display: none;
    }

    .reg-table[b-nqnpep6p90],
    .reg-table tbody[b-nqnpep6p90],
    .reg-table tr[b-nqnpep6p90],
    .reg-table td[b-nqnpep6p90] {
        display: block;
        width: 100%;
    }

    .reg-table tr[b-nqnpep6p90] {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        column-gap: 0.5rem;
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
        padding: 0.4rem 0.85rem 0.9rem;
        margin-bottom: 0.9rem;
        background: #fff;
    }

    .reg-table tbody tr + tr td[b-nqnpep6p90] {
        border-top: none;
    }

    .reg-table td[b-nqnpep6p90] {
        grid-column: 1 / -1;
        padding: 0.4rem 0;
    }

    /* Row header: "Participant N" on the left, remove on the right */
    .reg-rownum[b-nqnpep6p90] {
        grid-column: 1;
        grid-row: 1;
        padding: 0.35rem 0 0.5rem !important;
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--primary);
    }

    .reg-rownum[b-nqnpep6p90]::before {
        content: "Participant " attr(data-num);
    }

    .reg-numbadge[b-nqnpep6p90] {
        display: none;
    }

    .reg-row-action[b-nqnpep6p90] {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
        padding: 0 !important;
    }

    .reg-remove-text[b-nqnpep6p90] {
        display: inline;
    }

    .reg-table td[data-label][b-nqnpep6p90]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--primary);
        margin-bottom: 0.3rem;
    }

    /* Comfortable tap targets on touch devices */
    .reg-page[b-nqnpep6p90]  .form-control,
    .reg-page[b-nqnpep6p90]  .form-select {
        min-height: 46px;
        font-size: 1rem; /* >=16px stops iOS Safari zooming on focus */
    }

    .reg-submit-btn[b-nqnpep6p90] {
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reg-page[b-nqnpep6p90]  .form-control,
    .reg-page[b-nqnpep6p90]  .form-select,
    .reg-remove[b-nqnpep6p90],
    .reg-add[b-nqnpep6p90],
    .reg-cancel[b-nqnpep6p90],
    .reg-keep[b-nqnpep6p90],
    .reg-submit-btn[b-nqnpep6p90] {
        transition: none;
    }

    .reg-submit-btn:hover[b-nqnpep6p90] {
        transform: none;
    }
}