/* =========================================================================
   FormsByAir 2026 Refresh — public form theme
   -------------------------------------------------------------------------
   Additive layer over the "FormsByAir Classic" stack (bootstrap ->
   bootstrap-nav-wizard.css -> formsbyair.css -> form.css). Everything is
   scoped to #formApp so it wins on specificity without touching the classic
   files; !important only where a Bootstrap utility or inline style forces it.

   Scope of this theme (deliberately narrow):
     1. same font (Open Sans), one size (17px) on desktop AND mobile
     2. a little more breathing room between questions / groups
     3. wider, taller buttons — easier to click / tap
     4. white form canvas; groups shown as a light tinted panel
        (set --fba-group-bg / --fba-group-border to transparent for a
        "vertical gap only" look instead)
     5. subtle banding of repeating-group instances
     6. new segmented step/progress bar

   Tokens live on #formApp — a client (or a future theme picker) can retune
   the whole thing with a few overrides, e.g.
       #formApp { --fba-font-size: 17px; --fba-group-bg: transparent; }
   ========================================================================= */

#formApp {
    /* type */
    --fba-font-size: 17px;              /* body/label/control size — classic desktop size, now on mobile too (classic mobile 16) */
    --fba-font-size-sm: 15px;           /* mobile step labels */
    --fba-h3: 28px;                     /* form title (modal header)      (classic 24) */
    --fba-h3-group: 24px;               /* section / group headings       (classic 24) */
    --fba-h4: 20px;                     /* repeater / nested headings     (classic 19) */

    /* rhythm */
    --fba-space: 22px;                  /* gap between questions          (classic 16 = mb-3) */
    --fba-space-group: 8px;             /* extra gap between top-level groups (on top of the classic spacer rows) */

    /* controls */
    --fba-control-h: 48px;              /* inputs / selects / buttons min height */
    --fba-radius: 6px;
    --fba-border: #C9CDD4;              /* control border (classic #ced4da) */
    --fba-focus: rgba(13, 110, 253, .22);

    /* buttons */
    --fba-btn-min-w: 150px;             /* action + repeater-add buttons */
    --fba-btn-pad-x: 28px;

    /* groups */
    --fba-group-bg: #F6F7F9;
    --fba-group-border: #E4E7EC;
    --fba-group-radius: 10px;

    /* repeater banding */
    --fba-band: rgba(18, 20, 26, .04);  /* alternate instances: light grey, a shade darker than the group panel */
    --fba-band-radius: 8px;

    /* progress */
    --fba-step-track: #E1E4EA;
    --fba-step-done: var(--bs-primary, #0d6efd);
    --fba-step-active: var(--bs-primary, #0d6efd);
    --fba-step-done-soft: #E3EDFF;

    /* notes / hints */
    --fba-note-bg: transparent;         /* notes are plain muted text — no box (classic had a grey box) */
    --fba-note-border: transparent;
    --fba-note-color: inherit;          /* regular body text colour */

    /* text */
    --fba-ink: #2B2F36;                 /* labels, headings (classic #555 stays for body) */
    --fba-muted: #6B7280;
}

/* mobile: same type sizes as desktop (classic dropped to 16px here); only the rhythm tightens */
@media only screen and (max-width: 767px) {
    #formApp {
        --fba-space: 20px;
    }
}

/* ---------- 1. type: same font, same size everywhere ---------------------- */

#formApp label,
#formApp .col-form-label,
#formApp .form-control,
#formApp .form-select,
#formApp td,
#formApp th,
#formApp .alert,
#formApp p,
#formApp a,
#formApp .btn,
#formApp .help-block,
#formApp li,
#formApp .signature-tools,
#formApp .notes {
    font-size: var(--fba-font-size);
    line-height: 1.5;
}

#formApp .modal-header h3.modal-title {
    font-size: var(--fba-h3);
    line-height: 1.25;
}

#formApp .modal-header h4.modal-title {
    font-size: var(--fba-h4);
    font-weight: 600;
    color: var(--fba-muted);
    margin-top: 2px;
}

#formApp .row h3 {
    font-size: var(--fba-h3-group);
    line-height: 1.3;
    color: var(--fba-ink);
}

#formApp h4,
#formApp .row h4 {
    font-size: var(--fba-h4);
    line-height: 1.3;
    color: var(--fba-ink);
}

#formApp .col-form-label,
#formApp .form-label {
    color: var(--fba-ink);
}

/* hint / help text: grey box, body-size type (classic was body size too) */
#formApp .help-text,
#formApp .help-text .notes {
    font-size: var(--fba-font-size);
    line-height: 1.5;
}

#formApp .help-text {
    background: var(--fba-note-bg);
    border: 1px solid var(--fba-note-border);
    border-radius: var(--fba-radius);
    padding: 0;
    color: var(--fba-note-color);
}

    #formApp .help-text .notes {
        color: inherit;
    }

/* validation messages: body size, bold */
#formApp .help-block {
    font-size: var(--fba-font-size);
    font-weight: 600;
    padding-top: 6px;
}

#formApp .required {
    padding-left: 6px;
}

#formApp .terms {
    font-size: 0.85em;
}

/* ---------- 2. rhythm: more space, not too much --------------------------- */

#formApp .row.mb-3 {
    margin-bottom: var(--fba-space) !important;
}

/* label sits a little further from the control on mobile (stacked) */
@media only screen and (max-width: 991px) {
    #formApp .col-form-label {
        padding-bottom: 6px;
    }
}

/* on desktop, label column lines up with the taller control */
@media only screen and (min-width: 992px) {
    #formApp .col-form-label {
        padding-top: 10px;
    }
}

#formApp hr {
    margin-bottom: 12px !important;
    border-top-color: var(--fba-group-border);
}

/* the classic spacer rows between top-level groups get a touch more */
#formApp .row > .col-lg-12.pb-3.page-background {
    padding-bottom: calc(1rem + var(--fba-space-group)) !important;
}

#formApp .modal-body {
    padding-bottom: 28px;
}

/* ---------- 3. controls & buttons ---------------------------------------- */

#formApp .form-control:not(.form-span),
#formApp .form-select {
    min-height: var(--fba-control-h);
    padding: 10px 14px;
    border: 1px solid var(--fba-border);
    border-radius: var(--fba-radius);
}

#formApp .form-select {
    padding-right: 40px;
    background-position: right 14px center;
}

#formApp textarea.form-control {
    min-height: 120px;
}

#formApp .form-control:focus,
#formApp .form-select:focus {
    box-shadow: 0 0 0 4px var(--fba-focus);
}

#formApp .form-span {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* in-control feedback (validation tick, lookup spinner): classic size, but
   vertically centred in the 48px control. The tick carries an inline top in
   the templates, hence !important. */
#formApp .form-control-feedback {
    right: 14px;
}

#formApp .bi-check-circle.form-control-feedback {
    /* inline font-size 1.1em ≈ 18px; line-height 1 makes the box the glyph height */
    line-height: 1;
    top: 15px !important;
}

#formApp .spinner-border.form-control-feedback {
    /* spinner-border-sm = 16px */
    top: 16px;
}

/* input-group addon (date picker button) matches control height */
#formApp .input-group .btn {
    min-height: var(--fba-control-h);
    border-color: var(--fba-border);
}

/* ngb-datepicker popup: its month/year selects and arrow buttons are plain
   .form-select / .btn, so the theme's 48px control sizing hit them and
   clipped the text. Restore ng-bootstrap's own compact sizing, slightly roomier. */
#formApp ngb-datepicker .form-select {
    min-height: 0;
    height: 2.1rem;
    padding: 0 1.5rem 0 .5rem;
    font-size: 15px;
    line-height: 1.2;
    background-position: right .5rem center;
    background-size: 14px 10px;
}

#formApp ngb-datepicker .btn {
    min-height: 0;
    --bs-btn-padding-y: 0;
    --bs-btn-padding-x: .25rem;
    --bs-btn-font-size: 1rem;
    line-height: 1;
}

/* joined edges inside an input group stay square (the theme's control
   border-radius otherwise outranks Bootstrap's input-group corner rules) */
#formApp .input-group > .form-control:not(:last-child),
#formApp .input-group > .form-select:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#formApp .input-group > .form-control:not(:first-child),
#formApp .input-group > .form-select:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* checkbox / radio: bigger tap target, more room between options */
#formApp .form-check {
    min-height: 32px;
    margin-bottom: 8px;
    padding-left: 2em;
}

#formApp .form-check-input {
    width: 1.3em;
    height: 1.3em;
    margin-top: .16em;
    margin-left: -2em;
    border-color: #ABB0B8;
    cursor: pointer;
}

#formApp .form-check-inline {
    margin-right: 1.5rem;
}

/* boxed options: radio lists (list / lookup / name-value), multi-select Option
   checkboxes AND true/false booleans get a button-style outline box, keeping
   their native circle / tick and left-aligned text (toggle lists remain the
   "filled button" option). Selected = primary border + soft tint; whole box is
   the target. Switches (.form-switch) and option+text (.form-check.col-form-label,
   which sits beside its own text input) are excluded. */
#formApp .form-check:has(> .form-check-input[type="radio"]),
#formApp .form-check:has(> .form-check-input[type="checkbox"]):not(.form-switch):not(.col-form-label) {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--fba-control-h);
    margin: 0 0 8px;
    padding: 12px 16px 12px 14px;
    border: 1px solid var(--fba-border);
    border-radius: var(--fba-radius);
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}

    #formApp .form-check:has(> .form-check-input[type="radio"]):hover,
#formApp .form-check:has(> .form-check-input[type="checkbox"]):not(.form-switch):not(.col-form-label):hover {
        border-color: #ABB0B8;
        background: #FAFBFC;
    }

    #formApp .form-check:has(> .form-check-input[type="radio"]:checked),
    #formApp .form-check:has(> .form-check-input[type="checkbox"]:checked):not(.form-switch):not(.col-form-label) {
        border-color: var(--bs-primary, #0d6efd);
        background: var(--fba-step-done-soft);
    }

    #formApp .form-check:has(> .form-check-input[type="radio"]:focus-visible),
    #formApp .form-check:has(> .form-check-input[type="checkbox"]:focus-visible):not(.form-switch):not(.col-form-label) {
        box-shadow: 0 0 0 4px var(--fba-focus);
    }

    #formApp .form-check:has(> .form-check-input[type="radio"]:disabled),
    #formApp .form-check:has(> .form-check-input[type="checkbox"]:disabled):not(.form-switch):not(.col-form-label) {
        opacity: .65;
        cursor: default;
    }

    #formApp .form-check:has(> .form-check-input[type="radio"]) > .form-check-input,
#formApp .form-check:has(> .form-check-input[type="checkbox"]):not(.form-switch):not(.col-form-label) > .form-check-input {
        flex: none;
        float: none;
        width: 1.3em;
        height: 1.3em;
        margin: 0 12px 0 0;
    }

    #formApp .form-check:has(> .form-check-input[type="radio"]) > .form-check-label,
#formApp .form-check:has(> .form-check-input[type="checkbox"]):not(.form-switch):not(.col-form-label) > .form-check-label {
        flex: 1 1 auto;
        margin: 0;
        padding: 0;
        color: var(--fba-ink);
        cursor: pointer;
    }

        /* whole box clickable: label's ::before covers the box */
        #formApp .form-check:has(> .form-check-input[type="radio"]) > .form-check-label::before,
#formApp .form-check:has(> .form-check-input[type="checkbox"]):not(.form-switch):not(.col-form-label) > .form-check-label::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
        }

        /* ...but help buttons and links inside the label stay clickable above it */
        #formApp .form-check:has(> .form-check-input[type="radio"]) > .form-check-label .help-button,
        #formApp .form-check:has(> .form-check-input[type="radio"]) > .form-check-label a,
#formApp .form-check:has(> .form-check-input[type="checkbox"]):not(.form-switch):not(.col-form-label) > .form-check-label .help-button,
#formApp .form-check:has(> .form-check-input[type="checkbox"]):not(.form-switch):not(.col-form-label) > .form-check-label a {
            position: relative;
            z-index: 1;
        }

    /* per-option help text wraps to its own line under the option */
    #formApp .form-check:has(> .form-check-input[type="radio"]) > .help-text,
#formApp .form-check:has(> .form-check-input[type="checkbox"]):not(.form-switch):not(.col-form-label) > .help-text {
        flex: 0 0 100%;
        margin: 8px 0 0 !important;
    }

#formApp .form-check:has(> .form-check-input[type="radio"]):has(> .help-text),
#formApp .form-check:has(> .form-check-input[type="checkbox"]):not(.form-switch):not(.col-form-label):has(> .help-text) {
    flex-wrap: wrap;
}

/* radio-inline lists: boxes side by side (form.css stacks them below 576) */
#formApp .form-check-inline:has(> .form-check-input[type="radio"]) {
    display: inline-flex;
    min-width: 120px;
    margin: 0 8px 8px 0;
}

/* Option checkboxes laid out two-up (col-lg-6 float) keep a little gap between columns */
@media only screen and (min-width: 992px) {
    #formApp .col-lg-6.float-lg-start > div > .form-check:has(> .form-check-input[type="checkbox"]) {
        margin-right: 8px;
    }
}

/* buttons: wider + taller, easier to hit */
#formApp .btn {
    --bs-btn-font-size: var(--fba-font-size);
    --bs-btn-padding-y: 10px;
    --bs-btn-padding-x: 20px;
    --bs-btn-border-radius: var(--fba-radius);
    min-height: var(--fba-control-h);
    line-height: 1.5;
}

/* outline buttons (Select File, Add Another, Save & Finish Later, Sign, date
   picker addon...) are white rather than transparent, so they read as buttons
   on the grey group panels and repeater bands. Hover/active fills are unchanged. */
#formApp .btn-outline-primary,
#formApp .btn-outline-secondary {
    --bs-btn-bg: #fff;
}

/* toggle-list options keep their group radius but need the size bump */
#formApp .btn-group .btn,
#formApp .btn-group-vertical .btn {
    min-width: 96px;
}

/* xlarge = the action buttons (Next / Back / Submit / Save) + repeater add */
#formApp .btn-xlarge {
    padding: 11px var(--fba-btn-pad-x);
    font-size: var(--fba-font-size);
    min-width: var(--fba-btn-min-w);
    border-radius: var(--fba-radius);
    font-weight: 600;
}

#formApp .btn-xlarge i {
    vertical-align: -1px;
}

/* a little air between the last repeater instance and the Add button */
#formApp .form-button-repeater-add,
#formApp .form-button-repeater-add-another {
    margin-top: 10px;
}

/* small helper buttons don't inherit the size bump */
#formApp .btn-xs,
#formApp .btn-sm,
#formApp .help-button {
    min-height: 0;
}

/* signature / draw toolbar (Sign, Draw, Clear, Reset, Cancel, OK, tools) and
   file select: same full-size buttons as everything else, with a min width */
#formApp .signature-tools {
    height: auto;
    min-height: 48px;
    margin-bottom: 14px !important;   /* template has mb-2 (8px); more air above the canvas / hint */
}


    #formApp .signature-tools .btn,
    #formApp .form-button-file-select,
    #formApp .form-button-file-cancel {
        min-width: 140px;
        --bs-btn-padding-x: 26px;
    }

    /* icon-only tools dropdown toggle */
    #formApp .signature-tools .btn.dropdown-toggle {
        min-width: 56px;
    }

    #formApp .signature-tools .btn-toolbar {
        gap: 8px 0;
    }

/* phones: toolbar spans the full width and the visible buttons share it
   equally — Sign (or Draw) alone = full width; Clear / Cancel / OK = a third each.
   [hidden] buttons are display:none so they don't take a share. */
@media only screen and (max-width: 575px) {
    #formApp .signature-tools .btn-toolbar {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        gap: 8px;
    }

        #formApp .signature-tools .btn-toolbar > .btn {
            flex: 1 1 0;
            min-width: 0;
            margin: 0 !important;
            --bs-btn-padding-x: 8px;
            white-space: nowrap;
        }

        /* diagram tools dropdown keeps its natural (icon) width */
        #formApp .signature-tools .btn-toolbar > div[ngbdropdown] {
            flex: 0 0 auto;
        }

            #formApp .signature-tools .btn-toolbar > div[ngbdropdown] .btn {
                min-width: 56px;
                margin: 0 !important;
            }
}

/* action strip: separate it from the form, room above */
#formApp .form-status > .mt-3 {
    margin-top: 28px !important;
    padding-top: 22px;
    border-top: 1px solid var(--fba-group-border);
}

@media only screen and (max-width: 767px) {
    #formApp .form-status > .mt-3 {
        margin-left: 12px;
        margin-right: 12px;
    }
}

/* phones: stack the actions full width — Next/Submit first, Save last */
@media only screen and (max-width: 575px) {
    #formApp .form-status .d-flex {
        flex-direction: column-reverse;
        gap: 10px;
    }

    #formApp .form-status .form-status-left,
    #formApp .form-status .form-status-right {
        display: flex;
        flex-direction: column-reverse;
        gap: 10px;
    }

    #formApp .form-status .btn {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #formApp .form-status .spinner-container {
        align-self: center;
    }

    /* buttons inside status alerts (Save Changes/Cancel, Submit/Cancel code,
       Copy Link/Share Link/Open Request): stacked full width with the same gap */
    #formApp .form-status .alert .btn {
        display: block;
        width: 100%;
        margin: 0 0 10px !important;
    }

        #formApp .form-status .alert .btn:last-child {
            margin-bottom: 0 !important;
        }

    #formApp .form-button-repeater-add,
    #formApp .form-button-repeater-add-another {
        width: 100%;
    }
}

/* ---------- signature box: taller on phones / tablets ---------------------
   The canvas is sized from its CSS box (offsetWidth x offsetHeight), so the box
   ratio is the saved image ratio. Classic is ~0.28 on phones and ~0.2 on
   tablets vs ~0.375 on desktop; these bring small screens up to the desktop
   ratio, so signatures get more room AND a consistent shape. Diagram /
   portrait boxes are untouched. */
@media only screen and (max-width: 479px) {
    #formApp div.signature,
    #formApp canvas.signature,
    #formApp img.signature {
        height: 140px;          /* classic 100 */
    }
}

@media only screen and (min-width: 480px) and (max-width: 599px) {
    #formApp div.signature,
    #formApp canvas.signature,
    #formApp img.signature {
        height: 190px;          /* classic 110 */
    }
}

@media only screen and (min-width: 600px) and (max-width: 767px) {
    #formApp div.signature,
    #formApp canvas.signature,
    #formApp img.signature {
        height: 240px;          /* classic 145 */
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    #formApp div.signature,
    #formApp canvas.signature,
    #formApp img.signature {
        height: 260px;          /* classic 182; box is full width here (col-lg not active) */
    }
}

/* ---------- slider (ngx-slider): pointer/selection in the button blue ------ */

#formApp .ngx-slider .ngx-slider-pointer {
    background-color: var(--bs-primary, #0d6efd);
}

    #formApp .ngx-slider .ngx-slider-pointer.ngx-slider-active:after {
        background-color: #fff;
    }

#formApp .ngx-slider .ngx-slider-selection {
    background: var(--bs-primary, #0d6efd);
}

/* ---------- popups (alert / confirm) — appended to <body>, outside #formApp */

ngb-modal-window .modal-content {
    border-radius: 10px;
}

    ngb-modal-window .modal-content h4 {
        font-size: 22px;
        font-weight: 700;
    }

    ngb-modal-window .modal-content p {
        font-size: 17px;
        line-height: 1.5;
    }

    ngb-modal-window .modal-content .btn {
        --bs-btn-font-size: 17px;
        --bs-btn-padding-y: 10px;
        --bs-btn-padding-x: 28px;
        --bs-btn-border-radius: 6px;
        --bs-btn-font-weight: 600;
        min-height: 48px;
        min-width: 120px;
        line-height: 1.5;
    }

/* ---------- 4. white canvas + group panels -------------------------------- */

/* the grey classic question canvas becomes white */
#formApp .container.form-background,
#formApp .page-background {
    background-color: #fff;
}

/* a group (non-repeating, non-nested) is a light panel.
   The panel pulls out by the .container gutter (12px) so its edge lines up
   with the rest of the body content (nav, alerts, action strip); the 12px
   side padding puts questions inside back on the same x as questions outside. */
#formApp [element-group],
#formApp [element-collapsed] {
    display: block;
    background: var(--fba-group-bg);
    border: 1px solid var(--fba-group-border);
    border-radius: var(--fba-group-radius);
    padding: 18px 12px 2px;
    margin: 0 -12px 4px;
}

    /* group heading hugs the top of its panel */
    #formApp [element-group] > .row.mb-3:first-child h3.mt-1,
    #formApp [element-collapsed] > .row.mb-3:first-child h3.mt-1 {
        margin-top: 0 !important;
    }

    /* nested groups inside a panel are plain — no panel-in-panel */
    #formApp [element-group] [element-group],
    #formApp [element-group] [element-collapsed],
    #formApp [element-collapsed] [element-group],
    #formApp [element-collapsed] [element-collapsed],
    #formApp [element-repeater] [element-group],
    #formApp [element-repeater] [element-collapsed] {
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 0;
        margin: 0;          /* full reset — the panel's negative side margin must not leak into nested groups */
    }

/* mobile: keep 4px of screen edge showing so the rounded panel doesn't bleed */
@media only screen and (max-width: 767px) {
    #formApp [element-group],
    #formApp [element-collapsed] {
        padding: 14px 8px 2px;
        margin: 0 -8px 4px;
    }
}

/* ---------- 5. repeater banding ------------------------------------------- */

/* each repeater instance is a soft band; every second one is tinted */
#formApp [element-repeater] {
    display: block;
    margin: 0 -12px 12px;    /* pull out by the panel/container padding: band runs edge to edge */
    padding: 18px 12px 4px;  /* bottom: last question row's own margin adds the rest */
    border-radius: var(--fba-band-radius);
}

    #formApp #container > [element-switch]:nth-child(even) > [element-repeater] {
        background: var(--fba-band);
    }

/* instance / collapsible-group heading controls (collapse chevron, remove X):
   40px bordered touch targets instead of bare glyphs. The templates put the
   font-size inline and use pt-1/pb-1 utilities, hence the !importants. */
#formApp [element-repeater] table td:last-child,
#formApp [element-collapsed] table td:last-child {
    width: 136px !important;
    white-space: nowrap;
    text-align: right;
}

    #formApp [element-repeater] table td:last-child > .float-end,
    #formApp [element-collapsed] table td:last-child > .float-end {
        display: inline-flex;          /* still float-end: chevron stays rightmost, X to its left (Classic order) */
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 44px;
        margin-left: 8px;
        padding: 0 !important;
        border: 1px solid var(--fba-border);
        border-radius: var(--fba-radius);
        background: #fff;
        color: var(--fba-ink);
        font-size: 20px !important;
        line-height: 1;
        cursor: pointer;
        vertical-align: middle;
        transition: background-color .15s, border-color .15s, color .15s;
    }

        #formApp [element-repeater] table td:last-child > .float-end:hover,
        #formApp [element-collapsed] table td:last-child > .float-end:hover {
            background: #F0F2F5;
            border-color: #ABB0B8;
        }

        /* the remove control wraps .bi-x plus two &nbsp; — hide the spaces, keep the glyph */
        #formApp [element-repeater] table td:last-child > .float-end .bi-x,
        #formApp [element-collapsed] table td:last-child > .float-end .bi-x {
            font-size: 0;
        }

            #formApp [element-repeater] table td:last-child > .float-end .bi-x::before,
            #formApp [element-collapsed] table td:last-child > .float-end .bi-x::before {
                font-size: 26px;
            }

        #formApp [element-repeater] table td:last-child > .float-end:has(.bi-x):hover {
            color: #C8323C;
            border-color: #C8323C;
        }

    /* heading and controls centre on each other */
    #formApp [element-repeater] table td,
    #formApp [element-collapsed] table td {
        vertical-align: middle;
    }

    #formApp [element-repeater] table h4,
    #formApp [element-collapsed] table h3,
    #formApp [element-collapsed] table h4 {
        margin: 0;
    }

    #formApp [element-repeater] table,
    #formApp [element-collapsed] table {
        margin-bottom: 6px;
    }

@media only screen and (max-width: 767px) {
    #formApp [element-repeater] {
        margin: 0 -8px 12px;
        padding: 12px 8px 2px;
    }
}

/* inline / table repeaters: same banding as standard repeaters — each
   instance pulls out to the panel edge, alternates get the tint */
#formApp [element-repeater-inline],
#formApp [element-repeater-table] {
    display: block;
    /* 16px band padding; the extra 8px each side comes out of the gap
       between instances, so item-to-item distance is unchanged */
    margin: 0 -12px calc(var(--fba-space) - 16px);
    padding: 16px 12px;
    border-radius: var(--fba-band-radius);
}

    /* the instance row's own bottom margin moves to the host, so the band
       has even padding top and bottom */
    #formApp [element-repeater-inline] > .row.mb-3,
    #formApp [element-repeater-table] > .row.mb-3 {
        margin-bottom: 0 !important;
    }

#formApp #container > [element-switch]:nth-child(even) > [element-repeater-inline],
#formApp #container > [element-switch]:nth-child(even) > [element-repeater-table] {
    background: var(--fba-band);
}

@media only screen and (max-width: 767px) {
    #formApp [element-repeater-inline],
    #formApp [element-repeater-table] {
        margin: 0 -8px calc(var(--fba-space) - 16px);
        padding: 16px 8px;
    }
}

/* inline / table repeaters: their remove X (desktop: td > span[title=Remove]
   beside the last control; mobile: label.float-end[title=Remove] in the header)
   gets the same bordered button treatment. Sized to the 48px control. */
#formApp [element-repeater-inline] [title="Remove"],
#formApp [element-repeater-table] [title="Remove"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: var(--fba-control-h);
    margin: 0 0 0 8px;
    padding: 0 !important;
    border: 1px solid var(--fba-border);
    border-radius: var(--fba-radius);
    background: #fff;
    color: var(--fba-ink);
    font-size: 26px !important;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}

    #formApp [element-repeater-inline] [title="Remove"]:hover,
    #formApp [element-repeater-table] [title="Remove"]:hover {
        background: #F0F2F5;
        border-color: #C8323C;
        color: #C8323C;
    }

    /* mobile header X: no left margin needed, sits at the row's right edge */
    #formApp [element-repeater-inline] label[title="Remove"],
    #formApp [element-repeater-table] label[title="Remove"] {
        margin-left: 0;
    }

/* the desktop X cell shouldn't add its own padding around the button */
#formApp [element-repeater-inline] td.d-lg-block,
#formApp [element-repeater-table] td.d-lg-block {
    padding: 0;
}

/* ---------- 6. progress: segmented step bar ------------------------------- */

#formApp nav.navbar {
    margin-bottom: 20px;
}

#formApp ul.nav-wizard {
    counter-reset: fba-step;
}

    #formApp ul.nav-wizard li {
        background: transparent;
    }

        #formApp ul.nav-wizard li > button {
            font-size: var(--fba-font-size-sm);
            font-weight: 500;
            color: var(--fba-muted);
        }

            /* step number bubble (✓ when completed) */
            #formApp ul.nav-wizard li > button::before {
                counter-increment: fba-step;
                content: counter(fba-step);
                display: inline-flex;
                align-items: center;
                justify-content: center;
                flex: none;
                width: 26px;
                height: 26px;
                margin-right: 8px;
                border-radius: 50%;
                font-size: 13px;
                font-weight: 700;
                color: var(--fba-muted);
                background: var(--fba-step-track);
                vertical-align: middle;
            }

        #formApp ul.nav-wizard li.completed > button::before {
            content: "\2713";
            color: var(--fba-step-done);
            background: var(--fba-step-done-soft);
        }

        #formApp ul.nav-wizard li.active > button {
            color: var(--fba-ink);
            font-weight: 600;
        }

            #formApp ul.nav-wizard li.active > button::before {
                color: #fff;
                background: var(--fba-step-active);
            }

        #formApp ul.nav-wizard li.disabled > button {
            opacity: .55;
        }

/* desktop / tablet: horizontal, each step has its own track segment on top */
@media only screen and (min-width: 768px) {
    #formApp ul.nav-wizard {
        gap: 8px;
        align-items: stretch;
    }

        #formApp ul.nav-wizard li {
            padding: 0;
            margin: 0;
            flex: 1 1 0 !important;
            min-width: 0;
        }

            #formApp ul.nav-wizard li:last-child {
                padding-right: 0;
            }

            /* kill the classic chevrons */
            #formApp ul.nav-wizard li:not(:last-child)::before,
            #formApp ul.nav-wizard li:not(:last-child)::after {
                display: none;
                content: none;
            }

            #formApp ul.nav-wizard li > button {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                width: 100%;
                padding: 0 4px 6px 0;
                font-size: var(--fba-font-size);   /* section titles at body size on desktop (mobile list keeps 15px) */
                text-align: left;
                white-space: normal;
                overflow: visible;
                text-overflow: clip;
                line-height: 1.3;
                border-radius: 4px;
            }

                /* the track segment (moved above the label with order:-1) */
                #formApp ul.nav-wizard li > button::after {
                    content: "";
                    order: -1;
                    flex: 0 0 100%;
                    height: 6px;
                    margin-bottom: 10px;
                    border-radius: 3px;
                    background: var(--fba-step-track);
                    transition: background-color .2s;
                }

                #formApp ul.nav-wizard li > button:hover::after {
                    background: #CBD0D8;
                }

            #formApp ul.nav-wizard li.completed > button::after {
                background: var(--fba-step-done);
                opacity: .55;
            }

            #formApp ul.nav-wizard li.active > button::after,
            #formApp ul.nav-wizard li.active > button:hover::after {
                background: var(--fba-step-active);
                opacity: 1;
            }

            #formApp ul.nav-wizard li > button:focus-visible {
                outline: 2px solid var(--fba-step-active);
                outline-offset: 2px;
            }
}

/* mobile: collapsed "current step" bar + vertical list when expanded */
@media only screen and (max-width: 767px) {
    #formApp .navbar-header {
        background-color: #F0F2F5;
        border-radius: var(--fba-radius);
        margin-left: 12px;
        margin-right: 12px;
        width: calc(100% - 24px);   /* nav.navbar is a flex row: width:auto would shrink-wrap the label */
        flex: 0 0 auto;
    }

        #formApp .navbar-header .navbar-collapsed-button {
            flex: 1 1 auto;
            text-align: left;
        }

        #formApp .navbar-header .navbar-collapsed-button {
            font-size: var(--fba-font-size);
            font-weight: 600;
            color: var(--fba-ink);
        }

        #formApp .navbar-header .navbar-toggler {
            border: 0;
            color: var(--fba-ink);
        }

    #formApp ul.nav-wizard li {
        border-radius: var(--fba-radius);
        margin-bottom: 2px;
    }

        #formApp ul.nav-wizard li.active {
            background: #F0F2F5;
        }

        #formApp ul.nav-wizard li > button {
            display: flex;
            align-items: center;
            padding: 12px 14px;
        }
}