/* =========================================================================
   RTW Canada — site.css
   Custom UI framework. Hand-authored, no Bootstrap.

   Rule: every component rule below reads tokens via var(--…). No literal
   hex / rgb / px-radius values outside the :root block. This is what
   makes theme.css customization actually work.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */

:root {
    /* ---- Public theming surface ---- */
    /* Brand */
    --brand: #0f1d3b;
    --accent: rgb(40,108,172);
    --accent-strong: #1f5688;
    --accent-ink: #ffffff;

    /* Navigation — matches the dark navy .card--brand surface; gold accent */
    --nav-bg: var(--bg-brand);
    --nav-ink: var(--ink-on-brand);
    --gold: #c8a24a;
    --gold-ink: #3a2c05;

    /* Dark navy "brand" card surface (informational left-hand cards) and the
       light-on-navy text / line tokens that its contents read. */
    --bg-brand: #11243f;
    --ink-on-brand: #dde5f1;
    --ink-on-brand-strong: #ffffff;
    --ink-on-brand-muted: #9fb0cc;
    --accent-on-brand: #8fb4e6;
    --rule-on-brand: rgba(255, 255, 255, .09);
    --fill-on-brand: rgba(255, 255, 255, .10);

    /* Surfaces */
    --bg: #eceff4;
    --bg-card: #ffffff;
    --bg-info: #eaf2fb;

    /* Text */
    --ink: #0f1d3b;
    --ink-muted: #54607a;
    --ink-info: #1d3a66;

    /* Lines & feedback */
    --rule: #d8dee7;
    --danger: #b3261e;
    --success: #1f7a4d;

    /* Type family — GT Eesti Display is used site-wide. --font-serif is kept as a
       distinct token for the display headlines but now resolves to the same face. */
    --font-serif: "GT Eesti Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-sans: "GT Eesti Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Shape */
    --radius: 8px;
    --radius-sm: 6px;
    --radius-pill: 999px;

    /* Elevation */
    --shadow-card: 0 1px 2px rgba(15, 29, 59, .04), 0 8px 24px rgba(15, 29, 59, .06);

    /* ---- Internal scale (do not override in theme.css) ---- */
    --fs-display: 3rem;
    --fs-h1: 2.25rem;
    --fs-h2: 1.5rem;
    --fs-h3: 1.125rem;
    --fs-body: 1rem;
    --fs-small: .875rem;
    --fs-eyebrow: .75rem;

    --container: 78rem;
    --gap: 1.5rem;
    --gap-sm: .75rem;
    --gap-lg: 2.5rem;
}

/* -------------------------------------------------------------------------
   2. @font-face (self-hosted under /fonts; falls back to system if absent)
   ------------------------------------------------------------------------- */

@font-face {
    font-family: "GT Eesti Display";
    src: url("/fonts/GT-Eesti-Display-Regular.otf") format("opentype");
    font-weight: 400 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "GT Eesti Display";
    src: url("/fonts/GT-Eesti-Display-Bold.otf") format("opentype");
    font-weight: 600 700;
    font-style: normal;
    font-display: swap;
}

/* -------------------------------------------------------------------------
   3. Reset
   ------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { min-height: 100vh; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* -------------------------------------------------------------------------
   4. Base typography
   ------------------------------------------------------------------------- */

html { font-size: 16px; }

body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
    font-family: var(--font-serif);
    color: var(--brand);
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-family: var(--font-sans); font-weight: 600; }

.display {
    font-family: var(--font-serif);
    font-size: var(--fs-display);
    line-height: 1.05;
    color: var(--brand);
    letter-spacing: -0.02em;
    font-weight: 500;
}

.lead {
    color: var(--ink-muted);
    font-size: 1.0625rem;
    line-height: 1.55;
    max-width: 36ch;
}

.small { font-size: var(--fs-small); color: var(--ink-muted); }

a {
    color: var(--accent-strong);
    text-decoration: none;
}
a:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------
   5. Layout primitives
   ------------------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.page { padding-block: 3rem 4rem; }

.split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-lg);
    align-items: start;
}
@media (min-width: 880px) {
    .split { grid-template-columns: 2fr 3fr; gap: 3.5rem; }
}

/* Two equal columns on wide viewports, stacked on narrow ones. */
.row-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
    align-items: start;
}
@media (min-width: 880px) {
    .row-2 { grid-template-columns: 1fr 1fr; }
}

.stack { display: flex; flex-direction: column; gap: var(--gap); }
.stack-sm { display: flex; flex-direction: column; gap: var(--gap-sm); }
.stack-lg { display: flex; flex-direction: column; gap: var(--gap-lg); }

/* App shell (reserves room for future left sidebar) */
.app-shell { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
@media (min-width: 880px) {
    .app-shell { grid-template-columns: 16rem 1fr; }
}

/* -------------------------------------------------------------------------
   6. Navigation
   ------------------------------------------------------------------------- */

.navbar {
    background: var(--nav-bg);
    border-bottom: 3px solid var(--gold);
}

.navbar__inner {
    display: flex;
    align-items: center;
    gap: var(--gap);
    height: 4.5rem;
}

.navbar__brand {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--nav-ink);
    text-decoration: none;
}
.navbar__brand:hover { text-decoration: none; }

.navbar__brand-mark {
    width: 2rem; height: 2rem;
    border-radius: 50%;
    background: var(--gold);
    color: var(--gold-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-links {
    display: none;
    gap: 2rem;
    flex: 1;
    justify-content: center;
}
@media (min-width: 720px) {
    .nav-links { display: flex; }
}

.nav-link {
    color: var(--nav-ink);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--fs-body);
}
.nav-link:hover { color: var(--gold); text-decoration: none; }

.navbar__actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-left: auto;
}

/* Ghost buttons in the navy bar (Sign in / out, greeting) read light. */
.navbar .btn--ghost { color: var(--nav-ink); }
.navbar .btn--ghost:hover { color: var(--gold); }

/* Language switch, beside the sign-in / sign-out actions: a two-up segmented
   control on the navy bar, with the current language chipped in gold to match
   the brand mark. */
.lang-toggle {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid color-mix(in srgb, var(--nav-ink) 35%, transparent);
    border-radius: 999px;
    overflow: hidden;
}
.lang-toggle__option {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--nav-ink);
    font: inherit;
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: .06em;
    padding: .3rem .7rem;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.lang-toggle__option:hover { color: var(--gold); }
.lang-toggle__option:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
}
.lang-toggle__option--active,
.lang-toggle__option--active:hover {
    background: var(--gold);
    color: var(--gold-ink);
    cursor: default;
}

/* -------------------------------------------------------------------------
   7. Buttons
   ------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1.5rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: 1;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
    cursor: pointer;
    border: 1px solid transparent;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent);
}
.btn:disabled, .btn[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
}

.btn--primary {
    background: var(--accent);
    color: var(--accent-ink);
}
.btn--primary:hover { background: var(--accent-strong); color: var(--accent-ink); }

.btn--ghost {
    background: transparent;
    color: var(--ink);
    padding: .5rem .75rem;
}
.btn--ghost:hover { color: var(--accent-strong); }

.btn--link {
    background: none;
    color: var(--accent-strong);
    padding: 0;
    border-radius: 0;
}
.btn--link:hover { text-decoration: underline; }

.btn--block { width: 100%; }
.btn--lg { padding: 1rem 1.5rem; font-size: 1.0625rem; }

/* Pill shape — reserved for the "Get started" CTA in the title bar.
   In-body buttons keep the squarer base radius. */
.btn--pill { border-radius: var(--radius-pill); }

/* Outline button — e.g. the secondary hero CTA on the landing page. */
.btn--outline {
    color: var(--ink);
    border-color: var(--rule);
}
.btn--outline:hover { border-color: var(--accent); color: var(--accent-strong); }

/* -------------------------------------------------------------------------
   8. Cards
   ------------------------------------------------------------------------- */

.card {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 2.5rem;
    /* Query container so multi-column field rows respond to the card's own
       width (not the viewport) and can stack when the card is narrow. */
    container-type: inline-size;
}
@media (max-width: 600px) {
    .card { padding: 1.5rem; border-radius: var(--radius-sm); }
}

.card__title {
    font-family: var(--font-serif);
    font-size: var(--fs-h2);
    color: var(--brand);
    margin-bottom: .25rem;
}
.card__subtitle {
    color: var(--ink-muted);
    margin-bottom: 1.75rem;
}
.card__body > * + * { margin-top: 1.5rem; }

/* Dark navy variant — the informational left-hand cards (eligibility preview,
   verification path). Its contents read the light-on-navy --*-on-brand tokens. */
.card--brand {
    background: var(--bg-brand);
    border: 0.5px solid var(--rule-on-brand);
}
.card--brand .card__title { color: var(--ink-on-brand-strong); }
.card--brand .card__subtitle { color: var(--ink-on-brand-muted); }
.card--brand .eyebrow { color: var(--accent-on-brand); }
.card--brand .preview-step { color: var(--ink-on-brand); }
.card--brand .preview-step__num {
    background: var(--fill-on-brand);
    color: var(--ink-on-brand-muted);
}
.card--brand .steps--muted .step__num {
    background: var(--fill-on-brand);
    color: var(--ink-on-brand-muted);
}
.card--brand .step__title { color: var(--ink-on-brand-strong); }
.card--brand .step__body { color: var(--ink-on-brand-muted); }
.card--brand .step__meta { color: var(--accent-on-brand); }
.card--brand .note {
    background: var(--fill-on-brand);
    color: var(--ink-on-brand-muted);
}
.card--brand .note__icon { color: var(--ink-on-brand-muted); }

/* -------------------------------------------------------------------------
   9. Forms
   ------------------------------------------------------------------------- */

.form-group {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.form-label {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--fs-body);
    color: var(--ink);
}
.form-label__optional {
    color: var(--ink-muted);
    font-weight: 400;
    margin-left: .35rem;
}

.form-control {
    width: 100%;
    padding: .75rem .875rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--rule);
    background: var(--bg);
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}
.form-control::placeholder { color: var(--ink-muted); opacity: .65; }
.form-control:disabled { opacity: .6; cursor: not-allowed; }

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%2354607a' stroke-width='2' d='M1 1l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
/* Expand to multiple columns only when the containing card is wide enough.
   Keyed off container width (see .card { container-type }), so the fields
   stack to one column inside a narrow card instead of squishing. Browsers
   without container-query support fall back to the stacked single column. */
@container (min-width: 32rem) {
    .form-row--3 { grid-template-columns: 1fr 1fr 1fr; }
    .form-row--city-prov-pc { grid-template-columns: 1.4fr 1fr 1fr; }
}
@container (min-width: 22rem) {
    .form-row--2 { grid-template-columns: 1fr 1fr; }
}

.form-help {
    color: var(--ink-muted);
    font-size: var(--fs-small);
}

.field-validation-error,
.text-danger {
    color: var(--danger);
    font-size: var(--fs-small);
}
.form-control.input-validation-error {
    border-color: var(--danger);
}

.validation-summary-errors {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    border-radius: var(--radius-sm);
    padding: .75rem 1rem;
    margin-bottom: 1rem;
}
.validation-summary-errors ul { padding-left: 1rem; list-style: disc; }

/* Validation: red highlight on an inset box (checkbox / attestation groups). */
.field-box--error {
    border: 1px solid var(--danger);
    background: color-mix(in srgb, var(--danger) 8%, var(--bg-info));
}
/* Per-field error message stretched across a checkbox row. */
.check > .field-validation-error { grid-column: 1 / -1; }

/* Inline label-row pattern (e.g. section heading with badge) */
.label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Inset box — a bordered group sitting on the page tint inside a card
   (used for the SIN block, consent checkboxes, and attestation). */
.field-box {
    background: var(--bg-info);
    border-radius: var(--radius);
    padding: 1.5rem;
}

/* Checkbox row: box on the left, wrapping label on the right. */
.check {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .85rem;
    align-items: start;
    cursor: pointer;
}
.check__input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .15rem;
    accent-color: var(--accent-strong);
    flex-shrink: 0;
}
.check__label {
    color: var(--ink);
    line-height: 1.5;
}

/* -------------------------------------------------------------------------
   10. Eyebrow / badges
   ------------------------------------------------------------------------- */

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent-strong);
}
.eyebrow::before {
    content: "";
    display: inline-block;
    width: 2rem;
    height: 2px;
    background: var(--accent);
}

.badge {
    display: inline-block;
    font-size: var(--fs-eyebrow);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-weight: 600;
}
.badge--optional { color: var(--ink-muted); }

/* -------------------------------------------------------------------------
   11. Info banner
   ------------------------------------------------------------------------- */

.info-banner {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    background: var(--bg-info);
    color: var(--ink-info);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
}
.info-banner__icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 2px solid var(--accent-strong);
    color: var(--accent-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--fs-small);
    flex-shrink: 0;
    margin-top: .1rem;
}
.info-banner__title { font-weight: 700; color: var(--ink-info); }
.info-banner__body { color: var(--ink-info); }

/* -------------------------------------------------------------------------
   12. Verification path stepper
   ------------------------------------------------------------------------- */

.steps {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
}

.step__num {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--brand);
    color: var(--bg-card);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-weight: 600;
}

/* Muted variant — quiet, soft-tint number badges that match the eligibility
   preview list (.preview-steps). Used by the "Your verification path" card. */
.steps--muted .step__num {
    width: 1.85rem;
    height: 1.85rem;
    background: color-mix(in srgb, var(--ink) 8%, transparent);
    color: var(--ink-muted);
    font-size: var(--fs-small);
    flex-shrink: 0;
}

.step__title {
    font-weight: 600;
    color: var(--ink);
    margin-bottom: .15rem;
}

.step__body {
    color: var(--ink-muted);
    font-size: var(--fs-small);
}

.step__meta {
    margin-top: .35rem;
    color: var(--accent-strong);
    font-size: var(--fs-eyebrow);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   13. Trust badge
   ------------------------------------------------------------------------- */

.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    color: var(--ink-muted);
    font-size: var(--fs-small);
}
.trust-badge__icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--accent-strong);
}

/* Row of trust badges (landing hero). */
.trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem 1.5rem;
}

/* -------------------------------------------------------------------------
   13b. Landing page — eligibility preview
   ------------------------------------------------------------------------- */

.preview-steps {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.preview-step {
    display: flex;
    align-items: center;
    gap: .85rem;
    color: var(--ink);
}
.preview-step__num {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ink) 8%, transparent);
    color: var(--ink-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-small);
    font-weight: 600;
    flex-shrink: 0;
}
.preview-step--active .preview-step__num {
    background: var(--accent);
    color: var(--accent-ink);
}

/* Soft footnote box (e.g. the notary off-ramp note on the landing card). */
.note {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .85rem;
    background: var(--bg);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    color: var(--ink-muted);
    font-size: var(--fs-small);
}
.note__icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--ink-muted);
    margin-top: .1rem;
    flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   13c. Identity verification — sample video frame & uploader
   ------------------------------------------------------------------------- */

/* Faux "video" frame wrapping the sample clip: dark device chrome with a
   recording badge and a caption bar under the media. */
.video-frame {
    position: relative;
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--rule);
    background: var(--brand);
}
.video-frame__media {
    display: block;
    width: 100%;
    height: auto;
    background: var(--bg-card);
}
.video-frame__badge {
    position: absolute;
    top: .75rem;
    left: .75rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .2rem .65rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--brand) 78%, transparent);
    color: var(--bg-card);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.video-frame__badge::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--accent);
}
.video-frame__caption {
    padding: .7rem 1rem;
    color: color-mix(in srgb, var(--bg-card) 78%, transparent);
    font-size: var(--fs-small);
    text-align: center;
}

/* Drag-and-drop / click-to-browse upload area. The <label> wraps a visually
   hidden file input, so the whole zone is the control. */
.uploader {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5rem;
    padding: 2.25rem 1.5rem;
    border: 2px dashed var(--rule);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--ink);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.uploader:hover { border-color: var(--accent); }
.uploader:focus-within {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}
.uploader--drag { border-color: var(--accent-strong); background: var(--bg-info); }
.uploader--filled { border-style: solid; border-color: var(--accent-strong); }

.uploader__icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-info);
    color: var(--accent-strong);
}
.uploader__icon svg { width: 1.5rem; height: 1.5rem; }
.uploader__title { font-weight: 600; color: var(--ink); }
.uploader__hint { font-size: var(--fs-small); color: var(--ink-muted); }
.uploader__file {
    margin-top: .35rem;
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--success);
    word-break: break-all;
}
/* While an upload is streaming, the drop zone is inert. */
.uploader--disabled { opacity: .6; pointer-events: none; }


/* Knowledge-based verification (the credit-bureau KYC step): one block per
   question with its multiple-choice answers stacked beneath, separated by a
   rule so a long exam still reads as discrete questions. Each answer reuses
   the .check row so radios match the checkboxes elsewhere in the flow. */
.kba-question {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.kba-question + .kba-question {
    margin-top: 1.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--rule);
}
.kba-question__text {
    margin: 0;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.5;
}
.kba-answers {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

/* Uploaded-document chips (document-upload step): full-width row with a
   file-type icon, the file name + document type, and a remove button. */
.doc-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.doc-chip {
    display: flex;
    align-items: center;
    gap: .85rem;
    width: 100%;
    padding: .85rem 1rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
}
.doc-chip__icon {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--bg-info);
    color: var(--accent-strong);
}
.doc-chip__icon svg { width: 1.25rem; height: 1.25rem; }
.doc-chip__body { min-width: 0; flex: 1; }
.doc-chip__name { font-weight: 600; color: var(--ink); word-break: break-all; }
.doc-chip__type { font-size: var(--fs-small); color: var(--ink-muted); }
.doc-chip__remove {
    flex-shrink: 0;
    color: var(--ink-muted);
    border-radius: var(--radius-sm);
    padding: .35rem;
    line-height: 0;
}
.doc-chip__remove:hover { color: var(--danger); }
.doc-chip__remove svg { width: 1.1rem; height: 1.1rem; }
.doc-chip__action {
    flex-shrink: 0;
    margin-left: auto;
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--accent-strong);
    white-space: nowrap;
}
.doc-chip__action:hover { text-decoration: underline; }
.doc-chip__action--muted { color: var(--ink-muted); font-weight: 400; }

/* Read-only submission review (Submit step): labelled sections of the
   candidate's data, plus the irreversible-submit warning. */
.review {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}
.review-section {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.review-section__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-eyebrow);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.review-fields {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    margin: 0;
}
.review-field {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: .25rem 1rem;
    align-items: baseline;
}
.review-field dt { margin: 0; color: var(--ink-muted); font-size: var(--fs-small); }
.review-field dd { margin: 0; color: var(--ink); }
.review-empty { color: var(--ink-muted); font-style: italic; }
.review-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--success);
    font-weight: 600;
}
.review-badge svg { width: 1rem; height: 1rem; }

@media (max-width: 600px) {
    .review-field { grid-template-columns: 1fr; gap: .1rem; }
}

.submit-warning {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
    background: color-mix(in srgb, var(--danger) 8%, var(--bg-card));
    color: var(--danger);
    border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
    border-radius: var(--radius);
    padding: 1.1rem 1.35rem;
}
.submit-warning__icon { flex-shrink: 0; line-height: 0; margin-top: .1rem; }
.submit-warning__icon svg { width: 1.35rem; height: 1.35rem; }
.submit-warning p { margin: 0; font-size: var(--fs-small); }

/* Per-session change history (admin candidate page): a collapsible diff of
   every field the candidate changed while on a step. */
.audit {
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: var(--bg);
}
.audit__summary {
    cursor: pointer;
    padding: .65rem .9rem;
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.audit__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    padding: 0 .4rem;
    border-radius: var(--radius-pill);
    background: var(--bg-info);
    color: var(--ink-info);
    font-size: var(--fs-small);
    font-weight: 600;
}
.audit__list {
    list-style: none;
    margin: 0;
    padding: 0 .9rem .65rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.audit__row {
    border-top: 1px solid var(--rule);
    padding-top: .65rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.audit__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
}
.audit__field { font-weight: 600; color: var(--ink); }
.audit__section { font-size: var(--fs-small); color: var(--ink-muted); }
.audit__time {
    margin-left: auto;
    font-size: var(--fs-small);
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}
.audit__diff {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem;
    font-size: var(--fs-small);
}
.audit__old, .audit__new {
    padding: .05rem .4rem;
    border-radius: var(--radius-sm);
    word-break: break-word;
}
.audit__old {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    color: var(--danger);
    text-decoration: line-through;
}
.audit__new {
    background: color-mix(in srgb, var(--success) 12%, transparent);
    color: var(--success);
}
.audit__arrow { color: var(--ink-muted); }

/* -------------------------------------------------------------------------
   13d. Modal overlay & progress bar (e.g. the IDV upload progress dialog)
   ------------------------------------------------------------------------- */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: color-mix(in srgb, var(--brand) 55%, transparent);
}
.modal-overlay[hidden] { display: none; }

.modal {
    width: 100%;
    max-width: 28rem;
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 2rem;
    /* Query container so the field rows inside collapse to one column on a
       narrow screen and split into two once the modal is wide (desktop). */
    container-type: inline-size;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
}
/* Wider variant for multi-field forms; the extra width is what lets the
   two-column field rows engage on desktop. */
.modal--form { max-width: 44rem; }

/* Required-field marker. */
.req {
    color: var(--danger);
    margin-left: .15rem;
    font-weight: 700;
}

.progress {
    height: .65rem;
    border-radius: var(--radius-pill);
    background: var(--bg-info);
    overflow: hidden;
}
.progress__bar {
    height: 100%;
    width: 0;
    background: var(--accent-strong);
    border-radius: var(--radius-pill);
    transition: width .15s ease;
}

/* -------------------------------------------------------------------------
   14. Footer
   ------------------------------------------------------------------------- */

.site-footer {
    border-top: 1px solid var(--rule);
    padding-block: 1.5rem;
    color: var(--ink-muted);
    font-size: var(--fs-small);
}

/* -------------------------------------------------------------------------
   15. Status messages
   ------------------------------------------------------------------------- */

.status {
    border-radius: var(--radius-sm);
    padding: .85rem 1rem;
    font-size: var(--fs-small);
}
.status--success {
    background: color-mix(in srgb, var(--success) 12%, transparent);
    color: var(--success);
}
.status--error {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    color: var(--danger);
}
.status--info {
    background: var(--bg-info);
    color: var(--ink-info);
}

/* -------------------------------------------------------------------------
   15b. Admin — tables, key/value lists, status pills
   ------------------------------------------------------------------------- */

.table {
    width: 100%;
    border-collapse: collapse;
}
.table th,
.table td {
    text-align: left;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}
.table th {
    font-size: var(--fs-eyebrow);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-muted);
    font-weight: 600;
}
.table tbody tr:hover { background: var(--bg); }
.table .actions { text-align: right; white-space: nowrap; }
.table .actions a { margin-left: 1rem; }

/* Table pager (client-side paging controls under a table). */
.pager {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}
.pager[hidden] { display: none; }
.pager__status {
    color: var(--ink-muted);
    font-size: var(--fs-small);
}

/* Read-only value with an adjacent copy button (e.g. the candidate link). */
.copy-row {
    display: flex;
    gap: .5rem;
    align-items: center;
}
.copy-row .form-control { flex: 1; min-width: 0; }
.copy-row .btn { flex: none; }

.datalist {
    display: grid;
    grid-template-columns: minmax(8rem, 14rem) 1fr;
    gap: .55rem 1.5rem;
}
@media (max-width: 600px) {
    .datalist { grid-template-columns: 1fr; gap: .15rem; }
    .datalist dd { margin-bottom: .75rem; }
}
.datalist dt { color: var(--ink-muted); font-size: var(--fs-small); }
.datalist dd { margin: 0; }

.pill {
    display: inline-block;
    padding: .15rem .65rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-small);
    font-weight: 500;
    background: var(--bg-info);
    color: var(--ink-info);
}
.pill--success { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.pill--danger { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.pill--muted { background: var(--bg); color: var(--ink-muted); }

/* -------------------------------------------------------------------------
   16. Utilities (sparing)
   ------------------------------------------------------------------------- */

.text-center { text-align: center; }
.text-muted { color: var(--ink-muted); }
.text-brand { color: var(--brand); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 2.5rem; }
.mt-6 { margin-top: 3rem; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-5 { margin-bottom: 2.5rem; }
.mb-6 { margin-bottom: 3rem; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* -------------------------------------------------------------------------
   17. Demo gallery (only used by /Index — kept small)
   ------------------------------------------------------------------------- */

.toc {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    font-size: var(--fs-small);
}
.toc a { color: var(--ink-muted); }
.toc a:hover { color: var(--accent-strong); }

.swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: 1rem;
}
.swatch__chip {
    width: 100%;
    height: 4rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--rule);
}
.swatch__name {
    margin-top: .35rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--fs-small);
    color: var(--ink-muted);
}

.code-block {
    background: var(--brand);
    color: var(--bg-card);
    padding: 1rem 1.25rem;
    border-radius: var(--radius-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--fs-small);
    white-space: pre;
    overflow-x: auto;
}