html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* ===========================================================================
   OwnerPayroll — restrained, print-friendly styling for a one-owner tool.
   House rule: large readable type. Base 18px, controls 19.5px.
   =========================================================================== */

:root {
    --op-font-size: 18px;
    --op-font-size-lg: 19.5px;
    --op-ink: #1c1c1e;
    --op-muted: #5b6068;
    --op-line: #d9dce1;
    --op-line-strong: #9aa0a8;
    --op-bg-soft: #f6f7f9;
    --op-good: #14663a;
    --op-attention: #8a5a00;
    --op-bad: #9c1c1c;
    --op-accent: #1c4e80;
}

html { font-size: var(--op-font-size); }

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--op-ink);
    line-height: 1.55;
    background: #fff;
}

main { max-width: 56rem; margin: 0 auto; padding: 0 1.25rem 5rem; }

h1 { font-size: 1.9rem; margin: 1.2rem 0 0.4rem; letter-spacing: -0.01em; }
h2 { font-size: 1.3rem; margin: 2rem 0 0.5rem; }
h3 { font-size: 1.05rem; margin: 1.25rem 0 0.35rem; }
p  { margin: 0.4rem 0 0.8rem; }
.lede { color: var(--op-muted); max-width: 42rem; }

a { color: var(--op-accent); }

/* --- navigation ------------------------------------------------------- */
.nav {
    display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: center;
    padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--op-line);
    max-width: 56rem; margin: 0 auto 0.5rem;
}
.nav a { text-decoration: none; color: var(--op-ink); }
.nav a:hover, .nav a:focus { text-decoration: underline; }
.nav .brand { font-weight: 700; margin-right: 0.5rem; }
.nav .logout { margin-left: auto; }
.nav .logout button { background: none; border: 0; color: var(--op-muted); padding: 0; font-size: 1rem; cursor: pointer; }
.nav .logout button:hover { text-decoration: underline; }

/* --- controls --------------------------------------------------------- */
button, .button {
    font-size: var(--op-font-size-lg); font-family: inherit;
    padding: 0.55rem 1.1rem; border-radius: 6px; border: 1px solid var(--op-line-strong);
    background: #fff; color: var(--op-ink); cursor: pointer;
}
button:hover:not(:disabled) { background: var(--op-bg-soft); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.primary, .button.primary {
    background: var(--op-accent); border-color: var(--op-accent); color: #fff; font-weight: 600;
}
button.primary:hover:not(:disabled) { background: #16406a; }
button.quiet { border-color: transparent; color: var(--op-accent); padding-left: 0; }
button.danger { border-color: var(--op-bad); color: var(--op-bad); }
:focus-visible { outline: 3px solid #1c4e80; outline-offset: 2px; }

input, select, textarea {
    font-size: var(--op-font-size-lg); font-family: inherit;
    padding: 0.45rem 0.55rem; border: 1px solid var(--op-line-strong); border-radius: 5px;
    background: #fff; color: var(--op-ink);
}
.form { display: grid; gap: 0.3rem; max-width: 32rem; margin-bottom: 1.75rem; }
.form label { font-weight: 600; margin-top: 0.8rem; }
.form .hint { font-weight: 400; color: var(--op-muted); font-size: 0.92rem; margin: 0; }
.actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1.25rem 0; align-items: center; }

/* --- status ----------------------------------------------------------- */
.badge {
    display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px;
    font-size: 0.85rem; font-weight: 600; border: 1px solid currentColor;
}
.badge.draft      { color: var(--op-attention); }
.badge.finalized  { color: var(--op-good); }
.badge.voided     { color: var(--op-muted); }
.badge.paid       { color: var(--op-good); }
.badge.unpaid     { color: var(--op-attention); }

/* --- readiness checklist ---------------------------------------------- */
ul.checklist { list-style: none; padding: 0; margin: 1rem 0 1.5rem; }
ul.checklist li {
    display: grid; grid-template-columns: 1.6rem 1fr auto; gap: 0.6rem;
    align-items: baseline; padding: 0.65rem 0; border-bottom: 1px solid var(--op-line);
}
ul.checklist .mark { font-weight: 700; }
ul.checklist .ready .mark { color: var(--op-good); }
ul.checklist .attention .mark { color: var(--op-attention); }
ul.checklist .title { font-weight: 600; }
ul.checklist .detail { display: block; font-weight: 400; color: var(--op-muted); font-size: 0.95rem; }

/* --- tables / money --------------------------------------------------- */
table { border-collapse: collapse; width: 100%; margin-bottom: 1.25rem; }
th, td { padding: 0.45rem 0.6rem; text-align: left; border-bottom: 1px solid var(--op-line); }
td.money, th.money { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.total td, tr.total th { border-top: 2px solid var(--op-line-strong); border-bottom: none; font-weight: 700; }
tr.grand td, tr.grand th { border-top: 3px double var(--op-line-strong); font-size: 1.08rem; font-weight: 700; }
.scroll-x { overflow-x: auto; }

dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 1.5rem; margin: 0.75rem 0 1.5rem; }
dl.facts dt { color: var(--op-muted); }
dl.facts dd { margin: 0; }

/* --- notices ---------------------------------------------------------- */
.notice { border-left: 4px solid; padding: 0.8rem 1rem; margin: 1rem 0; background: var(--op-bg-soft); }
.notice.problem { border-color: var(--op-bad); }
.notice.warn { border-color: var(--op-attention); }
.notice.ok { border-color: var(--op-good); }
.notice h3 { margin-top: 0; }
.notice ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }

details.why { margin: 0.2rem 0 0; }
details.why summary { cursor: pointer; color: var(--op-accent); font-size: 0.92rem; }
details.why .body { padding: 0.5rem 0 0.25rem; color: var(--op-muted); font-size: 0.95rem; }
details.why .source { display: block; margin-top: 0.35rem; font-style: italic; }

.draft-banner {
    border: 1px dashed var(--op-attention); color: var(--op-attention);
    padding: 0.6rem 1rem; margin: 1rem 0; font-weight: 600; border-radius: 6px;
}

/* --- paystub ---------------------------------------------------------- */
.paystub { max-width: 46rem; margin: 0 auto; }
.paystub header { display: flex; justify-content: space-between; gap: 2rem; border-bottom: 2px solid var(--op-ink); padding-bottom: 0.75rem; }
.paystub .parties { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 1.25rem 0; }
.paystub .doc-title { font-size: 1.35rem; font-weight: 700; }
.paystub address { font-style: normal; color: var(--op-ink); }
.paystub .footnote { font-size: 0.85rem; color: var(--op-muted); border-top: 1px solid var(--op-line); padding-top: 0.6rem; margin-top: 1.5rem; }

@media print {
    .nav, .no-print, button, .actions, details.why { display: none !important; }
    body { font-size: 11pt; }
    html { font-size: 11pt; }
    main { max-width: none; padding: 0; }
    .paystub { max-width: none; }
    a { color: #000; text-decoration: none; }
    a[href]::after { content: ""; }          /* never print raw URLs */
    table { page-break-inside: avoid; }
    .paystub .footnote { font-size: 9pt; }
    @page { margin: 0.6in; }
}

@media (max-width: 40rem) {
    ul.checklist li { grid-template-columns: 1.4rem 1fr; }
    ul.checklist li .action { grid-column: 2; }
    .paystub .parties { grid-template-columns: 1fr; }
    dl.facts { grid-template-columns: 1fr; }
    dl.facts dd { margin-bottom: 0.5rem; }
}

/* Visually hidden but available to screen readers. */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- compliance dashboard --------------------------------------------- */
ul.obligations { list-style: none; padding: 0; margin: 0 0 2rem; }
ul.obligations li { border: 1px solid var(--op-line); border-left-width: 4px; border-left-color: var(--op-line-strong);
                    padding: 0.85rem 1rem; margin-bottom: 0.75rem; border-radius: 5px; }
ul.obligations li.problem { border-left-color: var(--op-bad); }
ul.obligations li.warn    { border-left-color: var(--op-attention); }
ul.obligations li.ok      { border-left-color: var(--op-good); }
ul.obligations .head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; flex-wrap: wrap; }
ul.obligations .what { display: flex; flex-direction: column; }
ul.obligations .meta { color: var(--op-muted); font-size: 0.92rem; }
ul.obligations .amount { font-size: 1.15rem; font-weight: 700; }
ul.obligations .amount.muted { font-size: 0.92rem; font-weight: 400; color: var(--op-muted); }
ul.obligations .when { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: 0.35rem; }
ul.obligations .due { font-weight: 600; }
ul.obligations .status { color: var(--op-muted); }
.inline-note { margin: 0.6rem 0 0; padding: 0.5rem 0.75rem; font-size: 0.93rem; }
/* An earned filing date sits beside the statutory one, never in place of it. */
.obligations .extension { margin: 0.5rem 0 0; font-size: 0.95rem; color: var(--op-muted); line-height: 1.5; }


/* ------------------------------------------------------------------
   Filing preparation worksheets.

   These must never be mistaken for an official government form: no IRS
   typography, no form-shaped boxes, and a banner across the top saying what
   this is. It is a worksheet that helps someone fill in the real thing.
   ------------------------------------------------------------------ */
.worksheet-banner {
    margin: 0 0 1rem;
    padding: 0.6rem 0.9rem;
    border-radius: 4px;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    border: 1px solid var(--op-line, #d0d0d0);
}
.worksheet-banner.draft { background: #fff8e5; border-color: #e0c98a; }
.worksheet-banner.filed { background: #eef7ee; border-color: #9ec79e; }
.worksheet-banner strong { margin-right: 0.5rem; }

.status-chip {
    display: inline-block;
    margin-left: 0.6rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.85rem;
    border: 1px solid var(--op-line, #d0d0d0);
}
.status-chip.ok { background: #eef7ee; border-color: #9ec79e; }
.status-chip.warn { background: #fff8e5; border-color: #e0c98a; }

table.worksheet {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0 1.5rem;
    font-size: 0.95rem;
}
table.worksheet th,
table.worksheet td {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--op-line, #e5e5e5);
    text-align: left;
    vertical-align: top;
}
table.worksheet th { font-weight: 600; border-bottom-width: 2px; }
table.worksheet td.line { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
table.worksheet td.num, table.worksheet th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.worksheet tr.muted-row td { color: var(--op-muted); }
table.worksheet tr.problem-row td { background: #fdf0f0; }
table.worksheet tr.ok td { background: #fafdfa; }
table.worksheet tr.problem td { background: #fdf0f0; }
table.worksheet tr.warn td { background: #fffdf5; }
table.worksheet .why-inline { display: block; color: var(--op-muted); font-size: 0.88rem; margin-top: 0.15rem; }
table.worksheet td.problem, .worksheet-diff .problem { color: #a12; font-weight: 600; }

a.prepare { display: inline-block; margin-top: 0.4rem; }

/* Print: the worksheet only, without the app around it. */
@media print {
    .no-print, nav, .sidebar, header, footer, form.inline, .actions { display: none !important; }
    body { background: #fff; }
    table.worksheet { font-size: 10pt; page-break-inside: auto; }
    table.worksheet tr { page-break-inside: avoid; }
    .worksheet-banner { border: 2px solid #000; background: #fff !important; }
    a[href]::after { content: ""; }
}

/* Where a government payment or filing actually goes. OwnerPayroll links; it never logs in. */
.obligations .destination { margin: 0.5rem 0 0; font-size: 0.93rem; line-height: 1.5; }
.obligations .destination .muted { display: block; color: var(--op-muted); margin-top: 0.15rem; }

/* Two-column form for the year-to-date figures, which are numerous and paired. */
.form.grid2 { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1rem; align-items: baseline; }
.form.grid2 label { margin: 0; }

/* Recovery codes: shown exactly once, so they must be easy to read and to print. */
.recovery-codes { list-style: none; padding: 0; margin: 1rem 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.5rem; }
.recovery-codes code { font-size: 1.15rem; letter-spacing: 0.08em; padding: 0.35rem 0.5rem;
    border: 1px solid var(--op-line, #d0d0d0); border-radius: 4px; display: block; text-align: center; }
.setup-key code { font-size: 1.05rem; letter-spacing: 0.12em; word-break: break-all; }
.qr { margin: 1rem 0; }
.qr svg { max-width: 100%; height: auto; }

/* ===========================================================================
   AUTHENTICATION
   ---------------------------------------------------------------------------
   One vocabulary shared by every unauthenticated screen — set up, sign in,
   second factor, enrolment, recovery codes. Adding a screen means composing
   these classes, not writing another stylesheet.

   The tone is deliberately quiet. This is the first thing a person sees before
   trusting the application with a Social Security number, so it aims at calm
   and legible rather than styled: one accent colour, one soft surface, a hair
   of depth, and a lot of whitespace.
   =========================================================================== */

:root {
    --op-auth-bg: #f2f4f7;          /* page field behind the card */
    --op-surface: #ffffff;
    --op-radius: 12px;
    --op-radius-sm: 8px;
    /* Two very shallow layers: a hairline lift and a wide, faint ambient pool.
       Enough to separate the card from the page, not enough to notice. */
    --op-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px -16px rgba(16, 24, 40, 0.18);
    --op-focus: rgba(28, 78, 128, 0.18);
}

/* --- page frame -------------------------------------------------------- */
main.auth-page {
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 2.5rem 1.25rem 3rem;
    background: var(--op-auth-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* Auto margins centre the card when there is room to spare and collapse to nothing when the card is
   taller than the viewport. Flex centring alone would clip its top on a short screen. */
.auth-shell { width: 100%; max-width: 27rem; margin: auto 0; }
.auth-shell.wide { max-width: 34rem; }   /* enrolment and recovery codes need more room */

/* --- product identity -------------------------------------------------- */
.auth-brand { text-align: center; margin-bottom: 1.75rem; }

.auth-wordmark {
    font-size: 1.55rem;
    font-weight: 640;
    letter-spacing: -0.021em;
    color: var(--op-ink);
    margin: 0;
    line-height: 1.2;
}
/* Two tones rather than a logo: the product name reads as a mark without
   inventing one. NOT named ".mark" — Bootstrap owns that class and paints it
   with a highlighter background.
   inventing one. */
.auth-wordmark .tail { color: var(--op-accent); }

.auth-descriptor {
    margin: 0.45rem 0 0;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.075em;
    text-transform: uppercase;
    color: var(--op-muted);
}

/* --- card -------------------------------------------------------------- */
.auth-card {
    background: var(--op-surface);
    border: 1px solid var(--op-line);
    border-radius: var(--op-radius);
    box-shadow: var(--op-shadow);
    padding: 2rem 1.85rem 1.85rem;
}

.auth-eyebrow {
    margin: 0 0 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--op-muted);
}

.auth-card h1 {
    font-size: 1.4rem;
    line-height: 1.3;
    letter-spacing: -0.014em;
    margin: 0 0 0.4rem;
}
.auth-card h2 {
    font-size: 1.02rem;
    letter-spacing: -0.006em;
    margin: 1.75rem 0 0.5rem;
}
.auth-card h2:first-of-type { margin-top: 0; }

.auth-lede {
    margin: 0 0 1.5rem;
    color: var(--op-muted);
    font-size: 0.97rem;
    line-height: 1.55;
}
.auth-lede:last-child { margin-bottom: 0; }

/* --- form -------------------------------------------------------------- */
.auth-form { display: block; margin: 0; max-width: none; }

/* Labels sit ABOVE their control, always. A finance form is scanned down a
   single column; nothing is placed beside anything. */
.auth-field { display: block; margin-bottom: 1.15rem; }
.auth-field > label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--op-ink);
    margin: 0 0 0.4rem;
}

.auth-field input,
.auth-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 2.9rem;                       /* one consistent control height */
    padding: 0.6rem 0.8rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--op-ink);
    background: var(--op-surface);
    border: 1px solid var(--op-line-strong);
    border-radius: var(--op-radius-sm);
}
.auth-field input::placeholder { color: #9aa0a8; }

/* A visible, high-contrast focus state — not a faint tint. */
.auth-field input:focus,
.auth-input:focus,
.auth-field input:focus-visible,
.auth-input:focus-visible {
    outline: none;
    border-color: var(--op-accent);
    box-shadow: 0 0 0 3px var(--op-focus);
}

/* Bootstrap sets inline code to a bright magenta. Inside these screens a path or a key is reference
   material, not an accent. */
.auth-card code {
    color: var(--op-ink);
    background: var(--op-bg-soft);
    border: 1px solid var(--op-line);
    border-radius: 4px;
    padding: 0.05em 0.35em;
    font-size: 0.92em;
    word-break: break-all;
}
.auth-codes code, .auth-setup-key code { border: 0; background: none; padding: 0; }

/* A filesystem path is long and unbreakable at sensible points, so it gets its own line rather than
   fragmenting across two boxed pieces mid-word. */
.auth-card code.auth-path { display: block; width: fit-content; max-width: 100%; margin-top: 0.35rem; }

.auth-hint {
    display: block;
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
    color: var(--op-muted);
}

/* Validation sits with the field it belongs to, never collected at the top. */
.auth-field-error {
    display: block;
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--op-bad);
}
.auth-field.invalid input { border-color: var(--op-bad); }
.auth-field.invalid input:focus { box-shadow: 0 0 0 3px rgba(156, 28, 28, 0.16); }

/* --- verification code ------------------------------------------------- */
/* Six digits, so it is shaped like six digits rather than a text box that
   happens to be short. */
.auth-code {
    width: 100%;
    max-width: 11.5rem;
    margin: 0 auto;
    text-align: center;
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: 0.42em;
    text-indent: 0.42em;                      /* re-centres against the trailing gap */
    font-variant-numeric: tabular-nums;
    padding: 0.6rem 0.5rem;
    min-height: 3.4rem;
}
/* The code box is centred, so its label and help text centre with it rather than hanging off to
   the left of a narrow control. */
.auth-field.code-field > label,
.auth-field.code-field .auth-hint { text-align: center; }

/* A recovery code is typed into the same box, and is not six digits. */
.auth-code.flexible {
    max-width: 100%;
    font-size: 1.15rem;
    letter-spacing: 0.16em;
    text-indent: 0.16em;
}

/* --- actions ----------------------------------------------------------- */
.auth-submit {
    display: block;
    width: 100%;
    min-height: 2.9rem;
    margin-top: 0.35rem;
    padding: 0.65rem 1.1rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: var(--op-accent);
    border: 1px solid var(--op-accent);
    border-radius: var(--op-radius-sm);
    cursor: pointer;
}
.auth-submit:hover:not(:disabled) { background: #17436e; border-color: #17436e; }
.auth-submit:disabled { opacity: 0.55; cursor: not-allowed; }

.auth-secondary {
    margin: 1.35rem 0 0;
    padding-top: 1.15rem;
    border-top: 1px solid var(--op-line);
    text-align: center;
    font-size: 0.92rem;
}
.auth-secondary form { display: inline; }
.auth-linkbutton {
    background: none;
    border: 0;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
    color: var(--op-accent);
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    min-height: 0;
}
.auth-linkbutton:hover { color: #17436e; }

.auth-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.35rem 0 0; }
.auth-actions > * { flex: 1 1 12rem; }

/* --- callouts ---------------------------------------------------------- */
.auth-note {
    margin: 0 0 1.4rem;
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--op-ink);
    background: var(--op-bg-soft);
    border: 1px solid var(--op-line);
    border-left: 3px solid var(--op-line-strong);
    border-radius: var(--op-radius-sm);
}
.auth-note p { margin: 0; }
.auth-note p + p { margin-top: 0.5rem; }
.auth-note.accent { border-left-color: var(--op-accent); }
.auth-note.attention { border-left-color: var(--op-attention); }
.auth-note.ok { border-left-color: var(--op-good); }

.auth-alert {
    margin: 0 0 1.4rem;
    padding: 0.8rem 1rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: #7e1717;
    background: #fdf3f3;
    border: 1px solid #f0d2d2;
    border-left: 3px solid var(--op-bad);
    border-radius: var(--op-radius-sm);
}
.auth-alert.ok {
    color: #12512f;
    background: #f2f9f5;
    border-color: #cfe6d9;
    border-left-color: var(--op-good);
}

/* --- enrolment --------------------------------------------------------- */
.auth-steps { counter-reset: authstep; margin: 0; padding: 0; list-style: none; }
.auth-step { counter-increment: authstep; position: relative; padding-left: 2.35rem; margin-bottom: 1.6rem; }
.auth-step:last-child { margin-bottom: 0; }
.auth-step::before {
    content: counter(authstep);
    position: absolute; left: 0; top: 0.05rem;
    width: 1.6rem; height: 1.6rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.82rem; font-weight: 700;
    color: var(--op-accent);
    background: var(--op-bg-soft);
    border: 1px solid var(--op-line);
    border-radius: 50%;
}
.auth-step h2 { margin: 0 0 0.3rem; font-size: 1rem; }
.auth-step p { margin: 0 0 0.6rem; font-size: 0.92rem; color: var(--op-muted); }

.auth-qr {
    display: flex; justify-content: center;
    padding: 1rem;
    margin: 0 0 0.85rem;
    background: var(--op-surface);
    border: 1px solid var(--op-line);
    border-radius: var(--op-radius-sm);
}
.auth-qr svg { display: block; width: 11rem; height: auto; max-width: 100%; }

.auth-setup-key {
    margin: 0;
    padding: 0.6rem 0.75rem;
    font-size: 0.9rem;
    background: var(--op-bg-soft);
    border: 1px solid var(--op-line);
    border-radius: var(--op-radius-sm);
}
.auth-setup-key .label { display: block; font-size: 0.8rem; color: var(--op-muted); margin-bottom: 0.2rem; }
.auth-setup-key code {
    font-size: 0.95rem; letter-spacing: 0.1em; word-break: break-all; user-select: all;
}

/* --- recovery codes ---------------------------------------------------- */
/* Shown exactly once. Legibility and printability beat everything else here. */
.auth-codes {
    list-style: none; padding: 0;
    margin: 0 0 1.2rem;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.5rem;
}
.auth-codes li {
    padding: 0.5rem 0.4rem;
    text-align: center;
    background: var(--op-bg-soft);
    border: 1px solid var(--op-line);
    border-radius: var(--op-radius-sm);
}
.auth-codes code {
    font-size: 1.02rem; letter-spacing: 0.09em;
    font-variant-numeric: tabular-nums;
    user-select: all;
}

.auth-footnote {
    margin: 1.4rem 0 0;
    text-align: center;
    font-size: 0.84rem;
    color: var(--op-muted);
}
.auth-footnote a { color: var(--op-muted); }

/* --- responsive -------------------------------------------------------- */
@media (max-width: 30rem) {
    main.auth-page { padding: 1.5rem 0.9rem 2rem; justify-content: flex-start; }
    .auth-card { padding: 1.5rem 1.25rem 1.4rem; border-radius: var(--op-radius-sm); }
    .auth-brand { margin-bottom: 1.35rem; }
    .auth-wordmark { font-size: 1.4rem; }
    .auth-card h1 { font-size: 1.25rem; }
    .auth-actions > * { flex-basis: 100%; }
    .auth-codes { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
}

/* --- motion ------------------------------------------------------------ */
/* The only movement anywhere: control state changes. Removed entirely when the
   reader has asked for that. */
@media (prefers-reduced-motion: no-preference) {
    .auth-field input, .auth-input, .auth-submit, .auth-linkbutton {
        transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
    }
}

/* --- print ------------------------------------------------------------- */
/* Recovery codes are the one auth screen anyone prints. */
@media print {
    main.auth-page { background: #fff; min-height: 0; padding: 0; display: block; }
    .auth-shell, .auth-shell.wide { max-width: none; }
    .auth-card { border: 0; box-shadow: none; padding: 0; }
    .auth-secondary, .auth-actions, .auth-footnote { display: none !important; }
    .auth-codes { grid-template-columns: repeat(2, 1fr); }
    .auth-codes li { border: 1px solid #999; }
}