/*
 * Public self-screening pages (form, pass, verify, officer scan).
 *
 * Colours are the design-system tokens, nothing else:
 *   canvas #f4f3ee · surface #ffffff · ink #141413 · muted #5e5d58
 *   accent #2b6cc4 (press #235aa4, soft #e6eefa) · done #55663f · refused #a8322f
 *
 * Contrast (WCAG 2.x relative luminance), each pair used below:
 *   ink    #141413 on #ffffff 18.4:1   on #f4f3ee 16.6:1
 *   muted  #5e5d58 on #ffffff  6.6:1   on #f4f3ee  5.9:1
 *   accent #2b6cc4 on #ffffff  5.2:1   on #f4f3ee  4.7:1
 *   white  #ffffff on #2b6cc4  5.2:1   on #55663f  6.3:1   on #a8322f  6.6:1
 *   press  #235aa4 on #e6eefa  5.9:1
 * api/tests/Feature/Parity/PublicSelfScreenAccessibilityTest.php recomputes them.
 *
 * Every rule is scoped under .ss-page so it outranks the console theme's
 * single-class utilities without touching the console.
 */
.ss-page {
    /* The theme's HSL channels, re-pointed at the tokens for this subtree. */
    --brand: 214.5 64% 46.9%;        /* #2b6cc4 */
    --brand-soft: 216 66.7% 94.1%;   /* #e6eefa */
    --brand-ink: 214.4 64.8% 39%;    /* #235aa4 */
    background: #f4f3ee;
    background-image: none;
    color: #141413;
}

/* Text */
.ss-page .text-muted-foreground,
.ss-page .card-description,
.ss-page .kpi-label { color: #5e5d58; }
.ss-page .text-brand { color: #2b6cc4; }
.ss-page .ss-meta { font-size: 12.5px; line-height: 16px; color: #5e5d58; }

/* Bands: solid ground, white text at full opacity. */
.ss-page .ss-band,
.ss-page .bg-brand { background-color: #2b6cc4; color: #ffffff; }
.ss-page .ss-band-ok { background-color: #55663f; color: #ffffff; }
.ss-page .ss-band-no { background-color: #a8322f; color: #ffffff; }
.ss-page .ss-band *,
.ss-page .ss-band-ok *,
.ss-page .ss-band-no * { color: #ffffff; opacity: 1; }

/* Status is a word in ink on the white surface, not a tinted badge. */
.ss-page .ss-status { color: #141413; font-weight: 600; background: none; border: 0; padding: 0; }

/* Pass state: always the word, toned by what it means. A pass that can no longer be
   presented is refused-red; an issued pass is accent-tinted, never done-green: these
   public pages clear nobody. */
.ss-page .ss-badge { display: inline-block; border-radius: 8px; padding: 2px 8px; font-size: 12.5px; line-height: 16px; font-weight: 600; }
.ss-page .ss-badge-neutral { background-color: #e6eefa; color: #235aa4; }
.ss-page .ss-badge-warn,
.ss-page .ss-badge-bad { background-color: #a8322f; color: #ffffff; }
.ss-page .ss-verdict-neutral { background-color: #e6eefa; color: #235aa4; }
.ss-page .ss-verdict-warn,
.ss-page .ss-verdict-bad { background-color: #a8322f; color: #ffffff; }
.ss-page .ss-verdict .vdot svg { color: #ffffff; }
.ss-page .ss-verdict-warn .vdot svg,
.ss-page .ss-verdict-bad .vdot svg { color: #a8322f; }
/* The code an officer types when the QR will not scan. */
.ss-page .ss-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere; }

/* Controls: 44px minimum hit area on every pointer. */
.ss-page .input,
.ss-page .select,
.ss-page .btn,
.ss-page .ss-lang,
.ss-page .dropdown-item,
.ss-page .ss-tap {
    min-height: 44px;
}
.ss-page .input,
.ss-page .select { height: 44px; max-width: 100%; min-width: 0; }
.ss-page .btn { height: auto; padding-top: 8px; padding-bottom: 8px; }
.ss-page .btn-brand { background-color: #2b6cc4; color: #ffffff; }
/* The last button carries the longest label of the form: it keeps room for it and drops under Back on a narrow phone. */
.ss-page .ss-actions [data-testid="ss-submit"] { min-width: 13rem; }
.ss-page .btn-brand:hover { background-color: #235aa4; }
.ss-page .ss-tap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding-left: 12px;
    padding-right: 12px;
}
.ss-page input[type="checkbox"] { flex: 0 0 auto; }
.ss-page label.ss-check { min-height: 44px; }

/* The resume banner and an unanswered question, in the tokens. */
.ss-page .alert-info { background-color: #e6eefa; border-color: #2b6cc4; color: #235aa4; }
.ss-page .alert-info * { color: #235aa4; }
.ss-page .alert-info .btn { background-color: #ffffff; }
.ss-page .alert-destructive { background-color: #ffffff; border-color: #a8322f; color: #a8322f; }
.ss-page .alert-destructive .alert-title { color: #a8322f; }
.ss-page .border-critical { border-color: #a8322f; }
.ss-page .ss-err { color: #a8322f; }

/* Honeypot: never seen, never focused, never read out. */
.ss-page .ss-hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; pointer-events: none; }
.ss-page .ss-hp > * { position: absolute; width: 1px; height: 1px; overflow: hidden; }

/* Labels sit on their own line above the field and may wrap. */
.ss-page .label { display: block; line-height: 18px; }

/* The longest translation must wrap, never push the page sideways at 320px. */
.ss-page,
.ss-page .label,
.ss-page .btn,
.ss-page .ss-chip,
.ss-page .ss-seg-btn,
.ss-page .ss-yn-btn,
.ss-page .dropdown-item,
.ss-page p,
.ss-page span { overflow-wrap: anywhere; }
.ss-page .btn,
.ss-page .ss-chip { white-space: normal; text-align: center; }
.ss-page .grid > * { min-width: 0; }
/* The language box shows the whole name of the language. Its label may take up to 55% of the
   header and the title beside it wraps. (The box used to be held to 45% of its own label, a
   share of its own width, which cut "English" to "Englis" on a phone.) */
.ss-page [data-testid="ss-lang-wrap"] { max-width: 55%; min-width: 0; }
.ss-page .ss-lang { max-width: 100%; min-width: 7.5rem; }
.ss-page .ss-qr-box { max-width: 100%; }
.ss-page .ss-qr-box > [role="img"] { max-width: 100%; height: auto !important; aspect-ratio: 1; }

/* Focus: a 2px accent ring. */
.ss-page :focus-visible { outline: 2px solid #2b6cc4; outline-offset: 2px; }

/* The action bar floats over the form only where there is room for both. On a
   narrow or short screen it takes its place at the end of the step, so it never
   covers a field (measured at 320px: Continue sat over the last select). */
@media (max-width: 359px), (max-height: 640px) {
    .ss-page .ss-actions { position: static; }
}

/* A reply box grows with its rows; a file chooser keeps a 44px row and its own button face. */
.ss-page textarea.input { height: auto; min-height: 88px; }
.ss-page .ss-file { height: auto; padding-top: 6px; padding-bottom: 6px; line-height: 30px; }

/* Nothing under the scale's smallest size: the console theme's 11px badge and label are raised here. */
.ss-page .badge,
.ss-page .kpi-label { font-size: 12px; line-height: 16px; }

/* Where the action bar floats over the form, a field given focus (Tab, or the next field on a phone
   keyboard) is scrolled clear of it, not under it. */
@media (min-width: 360px) and (min-height: 641px) {
    html { scroll-padding-bottom: 112px; }
}