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 .lead-note { margin: 0.5rem 0 0.25rem; }
/* Resolved by an agency-account check: distinct from filed (green) and from due. */
ul.obligations li.verified { border-left-color: var(--op-muted); }
ul.obligations .agency-verified { margin: 0.5rem 0 0; }
ul.obligations .agency-verified .no-record { margin: 0 0 0.35rem; }
ul.obligations .verification dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin: 0.6rem 0; }
ul.obligations .verification dt { font-weight: 600; }
ul.obligations .verification dd { margin: 0; }
ul.obligations .verification blockquote { margin: 0; padding: 0.4rem 0.75rem; border-left: 3px solid var(--op-line-strong); }
ul.obligations .v-superseded { border-top: 1px dashed var(--op-line); margin-top: 0.5rem; padding-top: 0.4rem; }
ul.obligations fieldset.treatment { border: 1px solid var(--op-line); border-radius: 6px; padding: 0.6rem 0.9rem; margin: 0 0 0.75rem; }
ul.obligations fieldset.treatment legend { font-weight: 700; padding: 0 0.3rem; }
ul.obligations fieldset.treatment label { display: flex; gap: 0.5rem; align-items: baseline; font-weight: 400; margin: 0.3rem 0; }
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; }
}

/* ===========================================================================
   PRODUCT SHELL
   ---------------------------------------------------------------------------
   The authenticated application, in the same visual language as the sign-in
   screens: one navy accent, quiet neutrals, hairline borders, generous space.

   This replaces the Blazor project template's shell. The template shipped a
   navy-to-purple gradient sidebar, and OwnerPayroll's own .nav rules painted
   the links in dark ink — 1.05:1 against the purple end of that gradient, so
   the navigation was effectively invisible. Every colour pair below is
   measured, not chosen by eye; the ratios are recorded beside them.
   =========================================================================== */

:root {
    --op-shell-bg: #f7f8fa;                  /* the field the content sits on */
    --op-sidebar-bg: #12314e;
    --op-sidebar-active: #1d4a74;
    --op-sidebar-ink: #e8eef4;               /* 11.41:1 on --op-sidebar-bg */
    --op-sidebar-muted: #adc2d6;             /*  7.28:1 */
    --op-sidebar-quiet: #cfdcea;             /*  9.57:1 */
    --op-sidebar-bar: #7fb2e0;               /*  5.93:1 */
    --op-sidebar-line: rgba(255, 255, 255, 0.10);
    --op-sidebar-width: 17rem;
}

/* --- frame ------------------------------------------------------------- */
.app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--op-shell-bg);
}

.app-body { flex: 1; min-width: 0; }

/* Width is decided per page, not once for the whole application: a W-4 form and
   a payroll history table want opposite things. */
.app-content { padding: 2rem 2rem 5rem; }
.wrap { max-width: 64rem; margin: 0 auto; }      /* default: comfortable reading */
.wrap.narrow { max-width: 44rem; }               /* forms — never stretched wide */
.wrap.wide { max-width: 100rem; }                /* tables, history, compliance */
.wrap.full { max-width: none; }

/* --- sidebar ----------------------------------------------------------- */
.app-nav {
    background: var(--op-sidebar-bg);
    color: var(--op-sidebar-ink);
    display: flex;
    flex-direction: column;
}

.app-nav .brand {
    display: block;
    padding: 1.15rem 1.35rem 1rem;
    border-bottom: 1px solid var(--op-sidebar-line);
    text-decoration: none;
    color: var(--op-sidebar-ink);
}
.app-nav .brand .wordmark {
    display: block;
    font-size: 1.15rem;
    font-weight: 640;
    letter-spacing: -0.018em;
    line-height: 1.2;
}
.app-nav .brand .wordmark .tail { color: var(--op-sidebar-bar); }
.app-nav .brand .descriptor {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--op-sidebar-muted);
}

.app-nav .groups { flex: 1; padding: 0.85rem 0.7rem; overflow-y: auto; }

.app-nav .group + .group { margin-top: 1rem; }
.app-nav .group-label {
    margin: 0 0 0.4rem;
    padding: 0 0.65rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--op-sidebar-muted);
}

.app-nav a,
.app-nav .signout button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.4rem 0.65rem;
    margin-bottom: 0.05rem;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 6px;
    background: none;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--op-sidebar-ink);
    text-decoration: none;
    cursor: pointer;
}
.app-nav a:hover,
.app-nav .signout button:hover { background: rgba(255, 255, 255, 0.07); text-decoration: none; }

/* Active state carries a bar and a weight change, not colour alone. */
.app-nav a.active {
    background: var(--op-sidebar-active);
    border-left-color: var(--op-sidebar-bar);
    color: #fff;                              /* 9.19:1 on --op-sidebar-active */
    font-weight: 600;
}

.app-nav :focus-visible { outline: 3px solid var(--op-sidebar-bar); outline-offset: -1px; }

.app-nav .account {
    padding: 0.85rem 0.7rem 1.1rem;
    border-top: 1px solid var(--op-sidebar-line);
}
/* Present, findable, and not competing with the navigation. */
.app-nav .signout button { color: var(--op-sidebar-quiet); font-size: 0.9rem; }
.app-nav .signout { margin: 0; }

/* --- mobile disclosure -------------------------------------------------- */
/* A <details> element: keyboard-operable and screen-reader-announced with no
   JavaScript at all. */
.app-nav .disclosure > summary {
    display: none;
    padding: 0.9rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--op-sidebar-ink);
    cursor: pointer;
    list-style: none;
}
.app-nav .disclosure > summary::-webkit-details-marker { display: none; }
.app-nav .disclosure > summary::after { content: "▾"; float: right; }
.app-nav .disclosure[open] > summary::after { content: "▴"; }

@media (min-width: 60rem) {
    .app { flex-direction: row; }
    .app-nav {
        width: var(--op-sidebar-width);
        flex: 0 0 var(--op-sidebar-width);
        height: 100vh;
        position: sticky;
        top: 0;
    }
    /* Desktop has no toggle: the disclosure disappears and the navigation is simply always there. */
    .app-nav .disclosure { display: none; }
}

@media (max-width: 59.99rem) {
    .app-nav .disclosure > summary { display: block; }
    /* Collapsed by default on a phone, so the page content is the first thing on screen rather than
       a full screen of navigation. Sibling selectors, because the menu is not nested inside. */
    .app-nav .disclosure:not([open]) ~ .groups,
    .app-nav .disclosure:not([open]) ~ .account { display: none; }
    .app-nav .brand { border-bottom: 0; padding-bottom: 0.9rem; }
    .app-nav .groups { padding-top: 0.4rem; }
    .app-content { padding: 1.35rem 1.1rem 4rem; }
}

/* ===========================================================================
   PRODUCT COMPONENTS
   ---------------------------------------------------------------------------
   The vocabulary every authenticated page composes from. Same tokens, same
   radii and the same navy as the sign-in screens, so the two halves of the
   application read as one product.
   =========================================================================== */

/* --- page header -------------------------------------------------------- */
.page-head {
    display: flex; flex-wrap: wrap; gap: 1rem;
    align-items: flex-start; justify-content: space-between;
    margin: 0 0 1.6rem;
}
.page-head .titles { min-width: 0; }
.page-head h1 { font-size: 1.6rem; letter-spacing: -0.016em; margin: 0; }
.page-head .lede { margin: 0.35rem 0 0; color: var(--op-muted); max-width: 46rem; }
.page-head .head-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* --- panels ------------------------------------------------------------- */
.panel {
    background: var(--op-surface);
    border: 1px solid var(--op-line);
    border-radius: var(--op-radius);
    padding: 1.25rem 1.35rem;
    margin-bottom: 1rem;
}
/* A form section is a stack of labelled fields, not a dashboard tile — it wants less air. */
.panel .form { gap: 0.25rem; margin-bottom: 0; }
.panel .form label { margin-top: 0.9rem; }
.panel .form > label:first-of-type { margin-top: 0; }
.panel .form .hint { margin: 0.3rem 0 0; }
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
.panel-head {
    display: flex; flex-wrap: wrap; gap: 0.75rem;
    align-items: baseline; justify-content: space-between;
    margin: 0 0 0.9rem;
}
.panel-head h2 { font-size: 1.05rem; letter-spacing: -0.006em; margin: 0; }
.panel-note { margin: 0 0 1.1rem; color: var(--op-muted); font-size: 0.92rem; }

/* --- status ------------------------------------------------------------- */
/* Never colour alone: each state carries its own glyph and its own words. */
.status {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.15rem 0.6rem 0.18rem;
    border: 1px solid;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}
.status::before { font-size: 0.85em; line-height: 1; }
.status.ready     { color: #0f5c33; background: #eef7f1; border-color: #bfdfcd; }
.status.ready::before { content: "\2713"; }                    /* check */
.status.attention { color: #7a4f00; background: #fdf6e9; border-color: #ecd9b0; }
.status.attention::before { content: "\25CF"; }                /* filled dot */
.status.blocked   { color: #7e1717; background: #fdf3f3; border-color: #f0d2d2; }
.status.blocked::before { content: "\2013"; }                  /* dash */
.status.neutral   { color: var(--op-muted); background: var(--op-bg-soft); border-color: var(--op-line); }
.status.neutral::before { content: "\25CB"; }                  /* hollow dot */

/* --- readiness / progress ---------------------------------------------- */
.readiness { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.25rem; }
.readiness .count { font-size: 0.95rem; font-weight: 600; white-space: nowrap; }
.readiness .count .of { color: var(--op-muted); font-weight: 400; }
.progress-track {
    flex: 1 1 14rem;
    height: 0.55rem;
    min-width: 10rem;
    background: var(--op-bg-soft);
    border: 1px solid var(--op-line);
    border-radius: 999px;
    overflow: hidden;
}
.progress-fill { height: 100%; background: var(--op-accent); border-radius: 999px; }
.progress-fill.complete { background: var(--op-good); }

/* --- task grid ---------------------------------------------------------- */
/* Compact panels two-up on a laptop and three-up on a wide desktop, so eight
   setup tasks are one glance rather than eight screens of scrolling. The action
   sits inside its own task, not adrift on the far right of a wide row. */
.tasks {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 0.85rem;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}
.task {
    display: flex; flex-direction: column;
    padding: 1rem 1.1rem 1.05rem;
    background: var(--op-surface);
    border: 1px solid var(--op-line);
    border-left: 3px solid var(--op-line-strong);
    border-radius: var(--op-radius-sm);
}
.task.is-ready { border-left-color: var(--op-good); background: #fcfdfc; }
.task.is-attention { border-left-color: var(--op-attention); }
.task .task-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.task h3 { margin: 0; font-size: 1rem; letter-spacing: -0.004em; }
.task .task-detail {
    margin: 0.45rem 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--op-muted);
    flex: 1;
}
.task .task-action { margin-top: 0.9rem; }

/* --- buttons ------------------------------------------------------------ */
/* One button treatment for the whole product; .primary/.quiet/.danger already
   exist above and keep working. */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 2.4rem;
    padding: 0.45rem 0.95rem;
    font-size: 0.95rem; font-weight: 600; font-family: inherit;
    color: var(--op-accent);
    background: var(--op-surface);
    border: 1px solid var(--op-line-strong);
    border-radius: var(--op-radius-sm);
    text-decoration: none;
    cursor: pointer;
}
/* A button is a label, not a paragraph. Inside a narrow table cell the flex container was free to
   wrap between every character, and "Prepare return" came out one letter per line. */
.btn { white-space: nowrap; }
.btn:hover:not(:disabled) { background: var(--op-bg-soft); text-decoration: none; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn.primary { color: #fff; background: var(--op-accent); border-color: var(--op-accent); }
.btn.primary:hover:not(:disabled) { background: #17436e; border-color: #17436e; }
.btn.small { min-height: 2.05rem; padding: 0.3rem 0.7rem; font-size: 0.88rem; }
.btn.block { display: flex; width: 100%; }

/* --- tables ------------------------------------------------------------- */
.table-panel { padding: 0; overflow-x: auto; }
.table-panel > table { margin: 0; }
table.data {
    width: 100%; border-collapse: collapse; font-size: 0.95rem;
}
table.data th, table.data td {
    padding: 0.6rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid var(--op-line);
    vertical-align: top;
}
table.data thead th {
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--op-muted);
    background: var(--op-bg-soft);
    border-bottom: 1px solid var(--op-line);
    white-space: nowrap;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- empty state -------------------------------------------------------- */
.empty {
    padding: 2.25rem 1.5rem;
    text-align: center;
    color: var(--op-muted);
    background: var(--op-bg-soft);
    border: 1px dashed var(--op-line-strong);
    border-radius: var(--op-radius-sm);
}
.empty h3 { margin: 0 0 0.35rem; font-size: 1rem; color: var(--op-ink); }
.empty p { margin: 0 0 0.9rem; font-size: 0.92rem; }
.empty > :last-child { margin-bottom: 0; }

/* --- sensitive data ----------------------------------------------------- */
/* An SSN or EIN is shown masked; the masking should look deliberate rather
   than like a truncation bug. */
.sensitive {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    padding: 0.05em 0.4em;
    background: var(--op-bg-soft);
    border: 1px solid var(--op-line);
    border-radius: 4px;
}

/* --- help text ---------------------------------------------------------- */
.page-note { color: var(--op-muted); font-size: 0.93rem; max-width: 46rem; margin: 0 0 1.25rem; }

@media (max-width: 45rem) {
    .page-head h1 { font-size: 1.35rem; }
    .tasks { grid-template-columns: 1fr; }
    .panel { padding: 1.1rem 1rem; }
}

/* --- pages not yet using <PageHeader> ----------------------------------- */
/* Every authenticated screen gets the same opening treatment whether or not it
   has been converted to the component, so nothing looks half-finished. */
.app-content h1 {
    font-size: 1.6rem;
    letter-spacing: -0.016em;
    margin: 0 0 0.35rem;
}
.app-content h1 + .lede,
.app-content h1 + .page-note,
.app-content h1 + .scaffold-note { margin-top: 0; }
.app-content .lede,
.app-content .scaffold-note {
    color: var(--op-muted);
    max-width: 46rem;
    margin: 0 0 1.5rem;
}
.app-content .scaffold-note { font-size: 0.93rem; }
.app-content h2 { font-size: 1.15rem; letter-spacing: -0.008em; margin: 1.9rem 0 0.6rem; }
.app-content h3 { font-size: 1rem; margin: 1.35rem 0 0.4rem; }

/* Existing screens use bare <table>; give them the product treatment without
   needing every page edited. */
.app-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    background: var(--op-surface);
    border: 1px solid var(--op-line);
    border-radius: var(--op-radius-sm);
    margin: 0 0 1.35rem;
}
.app-content th, .app-content td {
    padding: 0.55rem 0.85rem;
    text-align: left;
    border-bottom: 1px solid var(--op-line);
    vertical-align: top;
}
.app-content thead th {
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--op-muted);
    background: var(--op-bg-soft);
    white-space: nowrap;
}
.app-content tbody tr:last-child td { border-bottom: 0; }
.app-content td.num, .app-content th.num, .app-content .money { text-align: right; font-variant-numeric: tabular-nums; }

/* The definition lists used for record summaries. */
.app-content dl.facts {
    display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.25rem;
    margin: 0; align-items: baseline;
}
.app-content dl.facts dt { font-weight: 600; color: var(--op-muted); font-size: 0.9rem; }
.app-content dl.facts dd { margin: 0; }

/* Notices keep working, restyled to match the panels around them. */
.app-content .notice {
    border-left-width: 3px;
    border-radius: var(--op-radius-sm);
    border-top: 1px solid var(--op-line);
    border-right: 1px solid var(--op-line);
    border-bottom: 1px solid var(--op-line);
    padding: 0.95rem 1.1rem;
    margin: 0 0 1.25rem;
    background: var(--op-surface);
}
.app-content .notice h3 { margin-top: 0; font-size: 1rem; }
.app-content .notice > :last-child { margin-bottom: 0; }
.app-content .notice.problem { background: #fdf3f3; border-color: #f0d2d2; border-left-color: var(--op-bad); }
.app-content .notice.warn { background: #fdf6e9; border-color: #ecd9b0; border-left-color: var(--op-attention); }
.app-content .notice.ok { background: #f2f9f5; border-color: #cfe6d9; border-left-color: var(--op-good); }

/* Forms inside the product shell: same control metrics as the sign-in screens. */
.app-content .form { max-width: 34rem; }
.app-content .form label { font-size: 0.9rem; }
.app-content input:not([type=checkbox]):not([type=radio]),
.app-content select,
.app-content textarea {
    min-height: 2.6rem;
    padding: 0.5rem 0.7rem;
    font-size: 1rem;
    border-radius: var(--op-radius-sm);
    border: 1px solid var(--op-line-strong);
}
.app-content input:focus, .app-content select:focus, .app-content textarea:focus {
    outline: none;
    border-color: var(--op-accent);
    box-shadow: 0 0 0 3px var(--op-focus);
}

/* --- narrow-screen containment ------------------------------------------ */
/* Measured at 390px: /tax-rules pushed 241px past the viewport on a long source
   reference, /setup/company 102px on a label, and /periods 45px on a table.
   Nothing may scroll the PAGE sideways; a wide table scrolls inside itself. */
.app-content a,
.app-content label,
.app-content code,
.app-content .task-detail { overflow-wrap: anywhere; }

@media (max-width: 45rem) {
    .app-content table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .app-content .form { max-width: 100%; }

    /* .form.grid2 sizes its label column to max-content — stack it instead. */
    .app-content .form.grid2 { grid-template-columns: 1fr; }
    .app-content .form.grid2 label { margin-top: 0.6rem; font-weight: 600; }

    /* A grid item defaults to min-width:auto and so refuses to shrink below its own min-content.
       A <select> whose longest option is "SemiweeklyOrMonthly" therefore set a 472px column that
       every label in it inherited, and the page scrolled sideways. Let items shrink; the select
       scrolls its own text instead of scrolling the page. */
    .app-content .form { min-width: 0; }
    .app-content .form > * { min-width: 0; max-width: 100%; }
    .app-content select, .app-content input, .app-content textarea { max-width: 100%; }
}

/* --- setup progress list ------------------------------------------------ */
/* A finished step must not look like an unfinished one, and the next step must
   be findable without reading all eight. */
.setup-steps { list-style: none; padding: 0; margin: 1.1rem 0 0; }
.setup-steps li {
    display: grid;
    grid-template-columns: 1.5rem 1fr auto auto;
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.55rem 0.6rem;
    border-radius: var(--op-radius-sm);
    border: 1px solid transparent;
}
.setup-steps li + li { margin-top: 0.15rem; }
.setup-steps .marker { font-weight: 700; text-align: center; }
.setup-steps .label { font-weight: 500; }
.setup-steps .state { font-size: 0.85rem; color: var(--op-muted); white-space: nowrap; }
.setup-steps .edit { font-size: 0.88rem; white-space: nowrap; }

.setup-steps .done .marker { color: var(--op-good); }
.setup-steps .done .label { color: var(--op-muted); }

.setup-steps .next {
    background: var(--op-bg-soft);
    border-color: var(--op-line);
}
.setup-steps .next .marker { color: var(--op-accent); }
.setup-steps .next .label { font-weight: 700; }
.setup-steps .next .state { color: var(--op-accent); font-weight: 600; }

.setup-steps .todo .marker { color: var(--op-line-strong); }

@media (max-width: 34rem) {
    .setup-steps li { grid-template-columns: 1.5rem 1fr; row-gap: 0.15rem; }
    .setup-steps .state, .setup-steps .edit { grid-column: 2; }
}

/* The one task to do next, distinguished from the seven that merely remain. */
.task.is-next {
    border-left-color: var(--op-accent);
    box-shadow: 0 0 0 1px var(--op-accent);
}
.task.is-ready .task-detail { color: var(--op-muted); }

/* A blocked step is waiting on something, not wrong. Quiet, never alarming. */
.task.is-blocked { border-left-color: var(--op-line-strong); background: var(--op-bg-soft); }
.task.is-blocked h3 { color: var(--op-muted); }
.task .task-blocked {
    margin: 0.5rem 0 0;
    font-size: 0.87rem;
    color: var(--op-muted);
    padding-left: 0.7rem;
    border-left: 2px solid var(--op-line-strong);
}
.setup-steps .blocked .marker { color: var(--op-line-strong); }
.setup-steps .blocked .label { color: var(--op-muted); }
.setup-steps .blocked .state { font-style: italic; }

/* Required and optional stated on the label, so nobody discovers it at Save. */
.app-content .req { color: var(--op-bad); font-weight: 700; margin-left: 0.15rem; }
.app-content .optional { color: var(--op-muted); font-weight: 400; font-size: 0.88em; }

/* ===========================================================================
   TAX RULES
   ---------------------------------------------------------------------------
   Two audiences, two treatments, one vocabulary.

   The setup screen (/setup/tax-rules) is for the business owner: six cards, the
   figures that matter, and one Review button each. The compliance screen
   (/compliance/rules) is for whoever is checking a form transcription line by
   line, and keeps the record on the page.

   Nothing here is decorative. State is carried by a word and a border, never by
   colour alone, and every long value (a SHA-256, a publication URL) is allowed
   to break so a 390px screen never scrolls sideways.
   =========================================================================== */

/* --- the six cards ------------------------------------------------------ */
.rule-list { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 1rem; }

@media (min-width: 68rem) {
    .rule-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rule-card {
    min-width: 0;
    border: 1px solid var(--op-line);
    border-left: 3px solid var(--op-line-strong);
    border-radius: var(--op-radius-sm);
    background: #fff;
    padding: 1.15rem 1.25rem 1.2rem;
    display: flex;
    flex-direction: column;
}
.rule-card.is-verified   { border-left-color: var(--op-good); background: #fcfdfc; }
.rule-card.is-unverified { border-left-color: var(--op-attention); }

/* Title above, state beneath. Laying them side by side made the badge wrap under
   a long title and sit inline beside a short one, so a row of cards read ragged. */
.rule-card-head { margin-bottom: 0.6rem; }
.rule-card-head h2 { margin: 0 0 0.4rem; font-size: 1.05rem; letter-spacing: -0.006em; }

.rule-purpose { margin: 0 0 0.85rem; color: var(--op-muted); font-size: 0.93rem; line-height: 1.5; }

/* The figures are the point of the card: they read as data, not as prose. */
.rule-figures { list-style: none; padding: 0; margin: 0 0 0.95rem; }
.rule-figures li {
    padding: 0.3rem 0 0.3rem 0.85rem;
    border-left: 2px solid var(--op-line);
    font-size: 0.95rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.rule-figures li + li { margin-top: 0.2rem; }

.rule-source {
    display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 0.9rem;
    margin: 0 0 1rem; font-size: 0.88rem;
}
.rule-source dt { color: var(--op-muted); }
.rule-source dd { margin: 0; overflow-wrap: anywhere; }

.rule-warning {
    margin: 0 0 0.9rem; padding: 0.5rem 0.7rem; font-size: 0.9rem;
    background: #fdf3f3; border-left: 3px solid var(--op-bad); color: #7e1717;
}

/* Actions sit at the bottom of every card, so a row of cards lines up. */
.rule-card-actions {
    margin-top: auto; padding-top: 0.35rem;
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 0.9rem;
}
.rule-verified-note { font-size: 0.85rem; color: var(--op-muted); }

@media (max-width: 40rem) {
    .rule-source { grid-template-columns: 1fr; gap: 0 0; }
    .rule-source dt { margin-top: 0.4rem; }
    .rule-card-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* --- one rule under review ---------------------------------------------- */
/* Grouped the way the publication groups them, so a line can be compared
   against the page it came from without hunting. */
.rule-values + .rule-values { margin-top: 1.4rem; }
.rule-values h3 {
    margin: 0 0 0.5rem; font-size: 0.82rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--op-muted);
}
.rule-values dl {
    display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    gap: 0; margin: 0;
}
.rule-values dt,
.rule-values dd {
    margin: 0; padding: 0.5rem 0; border-top: 1px solid var(--op-line);
    font-size: 0.96rem; line-height: 1.5; overflow-wrap: anywhere;
}
.rule-values dt { color: var(--op-muted); padding-right: 1rem; }
/* Figures line up under one another, which is what makes a column of rates
   checkable against a publication at a glance. */
.rule-values dd { font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 44rem) {
    .rule-values dl { grid-template-columns: 1fr; }
    .rule-values dt { padding-bottom: 0; border-bottom: 0; }
    .rule-values dd { padding-top: 0.15rem; border-top: 0; }
    .rule-values dt { border-top: 1px solid var(--op-line); }
}

/* --- audit record: present, and out of the way --------------------------- */
details.audit {
    margin: 1.5rem 0 0; border: 1px solid var(--op-line);
    border-radius: var(--op-radius-sm); background: var(--op-bg-soft);
}
details.audit > summary {
    cursor: pointer; padding: 0.75rem 1rem; font-size: 0.92rem; font-weight: 600;
    color: var(--op-accent); list-style-position: inside;
}
details.audit > summary:focus-visible { outline: 3px solid var(--op-accent); outline-offset: -3px; }
details.audit > .body { padding: 0 1rem 1rem; }
details.audit > .body > :first-child { margin-top: 0; }

/* --- the technical record (both the audit panel and /compliance/rules) --- */
dl.meta {
    display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    gap: 0; margin: 0 0 1rem; font-size: 0.9rem;
}
dl.meta dt,
dl.meta dd {
    margin: 0; padding: 0.35rem 0; border-top: 1px solid var(--op-line);
    overflow-wrap: anywhere;
}
dl.meta dt { color: var(--op-muted); padding-right: 1rem; }

code.hash {
    font-size: 0.82rem; overflow-wrap: anywhere; word-break: break-all;
    background: none; padding: 0; color: var(--op-ink);
}

table.values { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-size: 0.9rem; }
table.values th,
table.values td {
    text-align: left; vertical-align: top; padding: 0.35rem 0.75rem 0.35rem 0;
    border-bottom: 1px solid var(--op-line); overflow-wrap: anywhere;
}
table.values th { font-weight: 500; color: var(--op-muted); width: 40%; white-space: pre-wrap; }

/* Derivation notes are paragraphs of reasoning; they keep their line breaks. */
.notes {
    white-space: pre-wrap; font-size: 0.9rem; line-height: 1.55;
    color: var(--op-muted); margin: 0 0 1rem;
}

@media (max-width: 44rem) {
    dl.meta { grid-template-columns: 1fr; }
    dl.meta dd { border-top: 0; padding-top: 0; }
    table.values th { width: auto; }
}

/* ===========================================================================
   FEDERAL DEPOSIT SCHEDULE
   ---------------------------------------------------------------------------
   Two shapes this screen needs that nothing else does: a checkbox whose
   consequence has to be explained before it is ticked, and a list of recorded
   assignments that reads as a record rather than as a grid of ids.
   =========================================================================== */

/* --- options that change the calculation -------------------------------- */
/* An unexplained checkbox that silently switches the lookback window is a
   trap. The explanation sits with the control, not in a legend above it. */
.options { border: 0; padding: 0; margin: 1.25rem 0 0; min-width: 0; }
.options legend {
    padding: 0; margin: 0 0 0.6rem; font-size: 0.9rem; font-weight: 600; color: var(--op-ink);
}

.option {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.15rem 0.6rem;
    align-items: start; padding: 0.85rem 0.9rem; margin: 0;
    border: 1px solid var(--op-line); border-radius: var(--op-radius-sm);
    background: var(--op-bg-soft); font-weight: 400; cursor: pointer;
}
.option + .option { margin-top: 0.6rem; }
.option:focus-within { outline: 3px solid var(--op-accent); outline-offset: 1px; }
.option > input[type=checkbox] { margin-top: 0.25rem; }
.option-body { min-width: 0; }
.option-body strong { display: block; font-size: 0.96rem; }
.option-help {
    display: block; margin-top: 0.3rem; font-size: 0.9rem; line-height: 1.5; color: var(--op-muted);
}

/* --- recorded assignments ----------------------------------------------- */
.assignments { list-style: none; padding: 0; margin: 0; }
.assignments > li {
    padding: 1rem 1.1rem; border: 1px solid var(--op-line);
    border-left: 3px solid var(--op-good); border-radius: var(--op-radius-sm); background: #fff;
}
.assignments > li + li { margin-top: 0.7rem; border-left-color: var(--op-line-strong); }

.assignment-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.6rem;
}

/* --- the exception, kept visually apart --------------------------------- */
/* It sits at the very bottom, closed, and does not borrow the accent colour
   the ordinary actions use. Reaching it should feel like leaving the path. */
details.audit.override { margin-top: 2rem; border-color: var(--op-line-strong); }
details.audit.override > summary { color: var(--op-ink); }
details.audit.override .form { max-width: 34rem; }

@media (max-width: 40rem) {
    .assignment-head { align-items: flex-start; }
}

/* --- the lookback entry table -------------------------------------------- */
/* The source box carries a full example ("2024 Q3 Form 941, line 12"), which a
   default-width input chops mid-word. The amount is short and numeric, so the
   room goes to the source. */
table.data.lookback { table-layout: fixed; width: 100%; }
table.data.lookback th:first-child { width: 7.5rem; }
table.data.lookback td:nth-child(2) { width: 11rem; }
table.data.lookback td input { width: 100%; min-width: 0; max-width: none; }

@media (max-width: 44rem) {
    /* Stack each quarter: a three-column grid of inputs cannot survive 390px. */
    table.data.lookback, table.data.lookback tbody, table.data.lookback tr { display: block; }
    table.data.lookback thead { display: none; }
    table.data.lookback tr { padding: 0.85rem 0; border-bottom: 1px solid var(--op-line); }
    table.data.lookback tr:last-child { border-bottom: 0; }
    table.data.lookback th, table.data.lookback td { display: block; border: 0; padding: 0.2rem 0; }
    table.data.lookback th:first-child { width: auto; font-size: 1rem; }
    table.data.lookback td:nth-child(2) { width: auto; }
}


/* ---- filings workspace -------------------------------------------------- */
/* The action column carries a button, so it is given room instead of being the column the browser
   chooses to crush. Dates and money stay on one line for the same reason. */
table.filings td:last-child, table.filings th:last-child { white-space: nowrap; width: 1%; }
table.filings td.due { white-space: nowrap; }
table.filings td .hint { white-space: normal; display: inline-block; max-width: 22rem; }


/* ------------------------------------------------------------------
   Payroll & Compliance report
   ------------------------------------------------------------------ */
.report-controls { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; margin: 0 0 1.25rem; }
.segmented { display: inline-flex; border: 1px solid var(--op-line-strong); border-radius: 8px; overflow: hidden; }
.segmented button { border: 0; border-radius: 0; margin: 0; padding: 0.45rem 0.9rem; background: transparent; }
.segmented button + button { border-left: 1px solid var(--op-line); }
.segmented button.on { background: var(--op-ink, #1f2933); color: #fff; font-weight: 600; }
.report-controls .actions { margin: 0; }
.report-head h2 { margin: 0; }
.report-head .report-title { margin: 0.2rem 0; font-size: 1.1rem; }
.report-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.6rem; margin: 0.8rem 0; }
.report-cards .rcard { border: 1px solid var(--op-line); border-radius: 8px; padding: 0.6rem 0.8rem; display: flex; flex-direction: column; gap: 0.2rem; background: var(--op-bg-soft); }
.report-cards .rcard .label { color: var(--op-muted); font-size: 0.9rem; }
.report-cards .rcard .value { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.report-cards .rcard.strong { border-color: var(--op-line-strong); }
.report-cards.counts .rcard .value { font-size: 1.1rem; }
.report h3 { margin-top: 1.6rem; }
.report .panel { margin-bottom: 0.8rem; }
.report .two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.8rem; }
.report table.kv td:first-child { color: var(--op-muted); width: 45%; }
.report table .num, .report table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.report tr.total td { font-weight: 700; }
.report .settlement { margin: 0.5rem 0 0; }
.report .nowrap { white-space: nowrap; }
.open-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.open-items li { border: 1px solid var(--op-line); border-left-width: 4px; border-radius: 6px; padding: 0.55rem 0.8rem; display: flex; flex-direction: column; gap: 0.2rem; }
.open-items li.action { border-left-color: var(--op-bad); }
.open-items li.waiting { border-left-color: var(--op-attention); }
.open-items li.info { border-left-color: var(--op-line-strong); }
.report-notes summary h3 { display: inline; }
.report details.calc { border: 1px solid var(--op-line); border-radius: 8px; padding: 0.5rem 0.9rem; margin: 0.6rem 0; }
.report details.calc > summary { font-weight: 600; cursor: pointer; }
.report .calc-block { margin: 0.8rem 0; }
.report .calc-block h4, .report .recon h4 { margin: 0.4rem 0; }
.report .calc-block tr.input td:first-child { color: var(--op-muted); }
.report .derivation { font-size: 0.95rem; }

/* ---------------------------------------------------------------- What needs attention (action queue) */
.queue-summary { margin: 0.25rem 0 1.25rem; display: flex; flex-direction: column; gap: 0.15rem; }
.queue-summary strong { font-size: 1.2rem; }
.queue-summary .queue-breakdown { color: var(--op-muted); }
.caught-up { border: 1px solid #bfdfcd; border-left: 6px solid var(--op-good); background: #eef7f1; color: #0f5c33;
    padding: 1.1rem 1.25rem; border-radius: 8px; margin: 0.5rem 0 1.5rem; font-size: 1.1rem; }
ul.attention { list-style: none; padding: 0; margin: 0 0 1.75rem; display: grid; gap: 0.9rem; }
ul.attention li.attn { border: 1px solid var(--op-line); border-left: 5px solid var(--op-line-strong); border-radius: 8px;
    padding: 0.9rem 1.1rem; background: var(--op-bg, #fff); }
ul.attention li.attn.problem { border-left-color: var(--op-bad); }
ul.attention li.attn.warn { border-left-color: var(--op-attention); }
ul.attention li.attn.waiting { border-left-color: var(--op-accent); }
ul.attention li.attn.pending { border-left-color: var(--op-accent); }
ul.attention .attn-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
ul.attention .attn-title { font-size: 1.1rem; }
ul.attention .attn-amount { margin: 0.45rem 0 0; font-weight: 700; }
ul.attention .attn-context { margin: 0.3rem 0 0; }
ul.attention .attn-due { margin: 0.3rem 0 0; color: var(--op-muted); }
ul.attention .actions { margin-top: 0.7rem; }
ul.attention .recheck { margin-top: 0.6rem; }
ul.attention .recheck p { margin: 0 0 0.3rem; }
ul.attention .item-form { margin-top: 0.7rem; border-top: 1px dashed var(--op-line); padding-top: 0.6rem; }
ul.attention .item-form .form-for { margin: 0 0 0.4rem; }
ul.attention details.attn-details { margin-top: 0.6rem; }
ul.attention details.attn-details > summary { cursor: pointer; color: var(--op-accent); }
ul.attention .attn-record { border-top: 1px solid var(--op-line); margin-top: 0.6rem; padding-top: 0.5rem; color: var(--op-muted); }
ul.attention .attn-record p { margin: 0.25rem 0; }
ul.attention .attn-record .attn-record-title { color: inherit; }
ul.attention .attn-record .attn-record-title strong { color: var(--op-ink, inherit); }
details.support { border: 1px solid var(--op-line); border-radius: 8px; margin: 0 0 0.75rem; background: var(--op-bg-soft); }
details.support > summary { cursor: pointer; padding: 0.75rem 1rem; font-weight: 600; }
details.support[open] > summary { border-bottom: 1px solid var(--op-line); }
details.support > ul.obligations, details.support > .hint { margin: 0.75rem 1rem; }
.queue-foot { flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; margin-top: 1.5rem; }
@media print { details.support, ul.attention details.attn-details { display: block; } }
/* Long status sentences ("Resolved by agency evidence — …") wrap inside the card instead of running past it. */
ul.obligations .when .status, ul.attention .status { white-space: normal; max-width: 100%; }
ul.obligations li.info { border-left-color: var(--op-line-strong); }
ul.obligations .carried-amount { margin: 0.4rem 0 0; }
ul.obligations li.info details.attn-details { margin-top: 0.5rem; }
ul.obligations li.info details.attn-details > summary { cursor: pointer; color: var(--op-accent); }
ul.attention .attn-recheck { margin: 0.3rem 0 0; }
button.link { background: none; border: none; padding: 0 0.25rem; min-height: 0; color: var(--op-accent); text-decoration: underline; cursor: pointer; font: inherit; }
ul.attention .attn-recheck { margin: 0.3rem 0 0; }
button.link { background: none; border: none; padding: 0 0.25rem; min-height: 0; color: var(--op-accent); text-decoration: underline; cursor: pointer; font: inherit; }

/* ---------------------------------------------------------------- Home: what do I do next? */
.guided section { margin: 0 0 1.25rem; }
.guided .today { border: 1px solid var(--op-line); border-left: 6px solid var(--op-accent); border-radius: 10px; padding: 1.1rem 1.25rem; background: var(--op-bg, #fff); }
.guided .today.caught-up { border-left-color: var(--op-good); background: #f3faf5; }
.guided .today.blocked, .guided .today.do-now { border-left-color: var(--op-attention); }
.guided .today .kicker { margin: 0; color: var(--op-muted); font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.04em; }
.guided .today h2 { margin: 0.2rem 0 0.4rem; font-size: 1.45rem; }
.guided .today-action { margin-top: 0.4rem; }
.guided .ga-title { margin: 0.2rem 0; font-size: 1.1rem; }
.guided .ga-detail { margin: 0.25rem 0; }
.guided .ga-amount { margin: 0.25rem 0; font-weight: 700; }
.guided .ga-dates { margin: 0.25rem 0 0.6rem; color: var(--op-muted); }
.guided .ga-history { margin: 0.25rem 0; color: var(--op-muted); font-style: italic; }
.guided .also-today { margin: 0.75rem 0 0; padding-left: 1.2rem; }
.guided .next, .guided .also-waiting, .guided .coming-up, .guided .quarter-close { border: 1px solid var(--op-line); border-radius: 10px; padding: 0.9rem 1.25rem; }
.guided h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.guided .also-waiting ul, .guided .coming-up ul { margin: 0; padding-left: 1.2rem; }
.guided .also-waiting li, .guided .coming-up li { margin: 0.3rem 0; }
.guided .qc-steps { list-style: none; margin: 0; padding: 0; }
.guided .qc-steps li.qc { display: grid; grid-template-columns: 1.6rem minmax(10rem, 16rem) 1fr; gap: 0.5rem; padding: 0.3rem 0; border-bottom: 1px solid var(--op-line); align-items: baseline; }
.guided .qc-mark { font-weight: 700; text-align: center; }
.guided li.qc.done .qc-mark { color: var(--op-good); }
.guided li.qc.resolved .qc-mark { color: var(--op-accent); }
.guided li.qc.waitingforagency .qc-mark, .guided li.qc.awaitingclearance .qc-mark { color: var(--op-accent); }
.guided li.qc.todo .qc-mark { color: var(--op-attention); }
.guided li.qc.notyet { color: var(--op-muted); }
.guided .qc-state { color: var(--op-muted); }
.guided .qc-package { margin: 0.6rem 0 0; font-weight: 600; }
.guided .qc-package.ready { color: var(--op-good); }
.guided .guided-links { color: var(--op-muted); }
@media (max-width: 640px) { .guided .qc-steps li.qc { grid-template-columns: 1.6rem 1fr; } .guided .qc-state { grid-column: 2; } }
.show-password { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.45rem; font-weight: 500; cursor: pointer; }
.show-password input { width: auto; min-height: 0; margin: 0; }
.show-password[hidden] { display: none; }
.capslock-warning { margin: 0.35rem 0 0; color: var(--op-attention); font-weight: 600; }
.capslock-warning:empty { display: none; }

/* ---------------------------------------------------------------- Guided task (agency instruction sheet) */
.guided-task section { margin: 0 0 1.25rem; }
.guided-task .gt-status { border: 1px solid var(--op-line); border-left: 6px solid var(--op-accent); border-radius: 10px; padding: 0.9rem 1.25rem; }
.guided-task .gt-status p { margin: 0.25rem 0; }
.guided-task .gt-amount { font-weight: 700; }
.guided-task .gt-dates { color: var(--op-muted); }
.guided-task .gt-done { color: var(--op-good); }
.guided-task .gt-section { border: 1px solid var(--op-line); border-radius: 10px; padding: 0.9rem 1.25rem; }
.guided-task .gt-section h2 { margin: 0 0 0.6rem; font-size: 1.15rem; }
.guided-task dl.gt-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1rem; margin: 0 0 0.8rem; }
.guided-task dl.gt-facts dt { font-weight: 600; }
.guided-task dl.gt-facts dd { margin: 0; }
.guided-task .gt-trust { padding: 0.55rem 0.8rem; border-radius: 6px; border: 1px solid var(--op-line); background: var(--op-bg-soft); }
.guided-task .gt-trust.unverified, .guided-task .gt-trust.needsrecheck { border-color: #ecd9b0; background: #fdf6e9; }
.guided-task .gt-trust.verified { border-color: #bfdfcd; background: #eef7f1; }
.guided-task ol.gt-step-list { padding-left: 1.4rem; }
.guided-task ol.gt-step-list li { margin: 0.7rem 0; padding-bottom: 0.5rem; border-bottom: 1px solid var(--op-line); }
.guided-task ol.gt-step-list li.matched .gt-answer { color: var(--op-good); }
.guided-task ol.gt-step-list li.mismatched .gt-answer { color: var(--op-bad); }
.guided-task .gt-step-text { margin: 0 0 0.2rem; font-weight: 600; }
.guided-task .gt-note { font-style: italic; }
.guided-task .gt-step-actions { margin-top: 0.35rem; }
.guided-task .gt-choices { display: grid; gap: 0.5rem; margin: 0.4rem 0 0.8rem; }
.guided-task .gt-choice { display: flex; gap: 0.6rem; align-items: center; border: 1px solid var(--op-line); border-radius: 8px; padding: 0.6rem 0.8rem; cursor: pointer; font-weight: 500; }
.guided-task .gt-choice input { width: auto; min-height: 0; margin: 0; }
.guided-task .gt-choice.chosen { border-color: var(--op-accent); background: var(--op-bg-soft); }
.guided-task .gt-panel { border-top: 1px dashed var(--op-line); padding-top: 0.7rem; }
.guided-task .gt-lead { margin: 0 0 0.6rem; }
.guided-task .gt-values-table th { text-align: left; font-weight: 500; padding-right: 1rem; }
.guided-task .gt-values-table td.money { text-align: right; padding-right: 1rem; white-space: nowrap; }
.guided-task .gt-employee .gt-emp { display: block; font-weight: 600; }
.guided-task ul.gt-unconfirmed { list-style: none; padding: 0; margin: 0.6rem 0 0; }
.guided-task ul.gt-unconfirmed li { margin: 0.3rem 0; }
.guided-task fieldset.gt-saw { border: 1px solid var(--op-line); border-radius: 6px; padding: 0.5rem 0.8rem; }
.guided-task fieldset.gt-saw label { display: flex; gap: 0.5rem; align-items: baseline; font-weight: 400; }
.guided-task fieldset.gt-saw input[type=checkbox] { width: auto; min-height: 0; }
@media (max-width: 640px) { .guided-task dl.gt-facts { grid-template-columns: 1fr; } }
.guided li.qc.verificationneeded .qc-mark { color: var(--op-attention); }