/* One stylesheet, no dependencies. Tokens on :root, redefined for dark. */

/* ---------------------------------------------------------------- themes
   DARK IS THE DEFAULT. Pravin, 30 Aug 2026: both themes, a toggle, dark
   selected by default. So the dark palette lives on :root and light is the
   opt-in — the reverse of how this file used to read.

   Deliberately NOT keyed on prefers-color-scheme. A product default a
   viewer's OS can silently overturn is not a default. The toggle is the only
   thing that changes it, and it persists.

   Values are the ones this file already carried; only which is default has
   moved. Type is untouched, per returnready.css: adopting Geist and JetBrains
   Mono is a separate decision with a separate cost.

   Three tokens are vocabulary, not decoration, and both themes keep them
   apart and legible:
       --accent / --good   proved
       --warn              could not be checked  (unrun, NOT wrong)
       --bad               does not tie
   Nothing may borrow one of those roles for emphasis. */

:root {
  --bg: #16171a;
  --surface: #1e2024;
  --surface-2: #24272c;
  --border: #32363c;
  --border-strong: #464b52;
  --ink: #e8e8e4;
  --ink-2: #a8aca8;
  --ink-3: #75797a;
  --accent: #7fc2a0;
  --accent-soft: #1f3229;
  --warn: #d9a75c;
  --warn-soft: #302819;
  --bad: #e08a7d;
  --bad-soft: #331f1c;
  --good: #7fc2a0;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .25);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f7f7f5;
  --surface: #ffffff;
  --surface-2: #f2f2ef;
  --border: #e2e2dd;
  --border-strong: #c9c9c2;
  --ink: #1c1c1a;
  --ink-2: #55554f;
  --ink-3: #8a8a82;
  --accent: #2f6b4f;
  --accent-soft: #e6efe9;
  --warn: #9a6414;
  --warn-soft: #f8efdf;
  --bad: #a3372c;
  --bad-soft: #f8e6e3;
  --good: #2f6b4f;
  --shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 4px 12px rgba(0, 0, 0, .04);
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

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

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px 72px; }
.wrap--wide { max-width: 1280px; }

/* ------------------------------------------------------------------ header */

header.top {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky; top: 0; z-index: 10;
}
header.top .inner {
  max-width: 1280px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 18px; min-height: 58px; flex-wrap: wrap;
}
.brand { font-weight: 620; letter-spacing: -.01em; color: var(--ink); }
.brand small { display: block; font-weight: 400; font-size: 12px; color: var(--ink-3); }
nav.tabs { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; }
nav.tabs a {
  padding: 7px 13px; border-radius: 7px; color: var(--ink-2);
  font-size: 14px; white-space: nowrap;
}
nav.tabs a:hover { background: var(--surface-2); text-decoration: none; }
nav.tabs a.on { background: var(--accent-soft); color: var(--accent); font-weight: 560; }
nav.tabs .count {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 20px;
  background: var(--bad); color: #fff; font-size: 11px; font-weight: 600;
}
nav.tabs a.on .count { background: var(--accent); }

/* ------------------------------------------------------------------ blocks */

h1 { font-size: 25px; letter-spacing: -.02em; margin: 30px 0 6px; font-weight: 640; }
h2 { font-size: 17px; letter-spacing: -.01em; margin: 30px 0 12px; font-weight: 620; }
h3 { font-size: 14px; margin: 0 0 10px; font-weight: 620; color: var(--ink-2); }
.lede { color: var(--ink-2); margin: 0 0 22px; max-width: 68ch; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow);
}
.card + .card { margin-top: 14px; }
.grid { display: grid; gap: 14px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
/* A-96 defect 3. `auto-fit` decides the column count from the container, so four
   stats rendered 3 + 1 and five rendered 3 + 2 at around 1000px — a wrap nobody
   chose, which reads as a bug rather than a layout. Explicit counts, on the same
   breakpoints the marketing site uses, so a 5-stat grid wrapping 4 + 1 is a
   deliberate shape instead of an accident of width. */
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1040px) { .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .grid.four { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------- stats */

.stat { background: var(--surface); border: 1px solid var(--border);
        border-radius: var(--radius); padding: 15px 17px; }
.stat .label { font-size: 12px; color: var(--ink-3); text-transform: uppercase;
               letter-spacing: .06em; font-weight: 600; }
.stat .value { font-size: 26px; font-weight: 620; letter-spacing: -.02em;
               margin-top: 5px; font-variant-numeric: tabular-nums; }
.stat .sub { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.stat.good .value { color: var(--good); }
.stat.bad .value { color: var(--bad); }

/* ------------------------------------------------------------------ tables */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
.scroll { overflow-x: auto; }
th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); font-weight: 620; padding: 8px 10px;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums;
                 font-family: var(--mono); font-size: 13px; white-space: nowrap; }
tr.total td { font-weight: 640; border-top: 1.5px solid var(--border-strong); }
tr.sub td { color: var(--ink-2); }
td.dim, .dim { color: var(--ink-3); }

/* ------------------------------------------------------------------- chips */

.chip {
  display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11.5px;
  font-weight: 600; background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--border);
}
.chip.good { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.chip.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.chip.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }

/* ------------------------------------------------------------------ notice */

.notice {
  border-left: 3px solid var(--border-strong); padding: 11px 14px; border-radius: 6px;
  background: var(--surface-2); margin: 12px 0; font-size: 14px;
}
.notice.warn { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.notice.bad { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
.notice.good { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.notice strong { display: block; margin-bottom: 2px; }

/* ------------------------------------------------------------------ button */

.btn {
  display: inline-block; padding: 9px 16px; border-radius: 8px; border: 1px solid transparent;
  background: var(--accent); color: #fff; font: inherit; font-weight: 560; font-size: 14px;
  cursor: pointer; text-decoration: none;
}
.btn:hover { filter: brightness(1.07); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn.ghost:hover { background: var(--surface-2); filter: none; }
.btn.small { padding: 5px 11px; font-size: 13px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.spacer { flex: 1; }

/* ------------------------------------------------------------------- forms */

label.field { display: block; margin: 0 0 6px; font-weight: 560; font-size: 14.5px; }
.help { color: var(--ink-2); font-size: 13.5px; margin: 0 0 10px; max-width: 62ch; }
input[type=text], input[type=email], input[type=date], input[type=month], input[type=number], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border-strong);
  border-radius: 7px; background: var(--surface); color: var(--ink); font: inherit;
  font-size: 14.5px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent;
}
fieldset { border: none; margin: 0 0 26px; padding: 0; }

.choices { display: grid; gap: 7px; }
.choice {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px;
  border: 1px solid var(--border-strong); border-radius: 8px; cursor: pointer;
  background: var(--surface);
}
.choice:hover { border-color: var(--accent); background: var(--accent-soft); }
.choice input { margin: 2px 0 0; accent-color: var(--accent); }
.choice .label { font-weight: 520; }
.choice .hint { display: block; font-size: 13px; color: var(--ink-3); font-weight: 400; }

.blank-cost {
  font-size: 13px; color: var(--ink-3); margin-top: 8px;
  border-left: 2px solid var(--border-strong); padding-left: 10px;
}

.group-row {
  border: 1px solid var(--border); border-radius: 8px; padding: 13px;
  margin-bottom: 9px; background: var(--surface-2);
}
.group-row .grid { gap: 10px; }

/* ------------------------------------------------------------- progress bar */

.bar { height: 5px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--accent); }

/* ---------------------------------------------------------------- dropzone */

.dropzone {
  border: 2px dashed var(--border-strong); border-radius: 12px; padding: 40px 20px;
  text-align: center; background: var(--surface); transition: .12s;
}
.dropzone.hot { border-color: var(--accent); background: var(--accent-soft); }
.dropzone p { margin: 6px 0; color: var(--ink-2); }
.dropzone .big { font-size: 17px; font-weight: 560; color: var(--ink); }

/* ------------------------------------------------------------------- chart */

.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .axis { stroke: var(--border); stroke-width: 1; }
.chart .grid-line { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 3; }
.chart text { fill: var(--ink-3); font-size: 10px; font-family: var(--sans); }
.chart .bar-in { fill: var(--accent); }
.chart .bar-out { fill: var(--border-strong); }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2;
               stroke-linejoin: round; stroke-linecap: round; }
.legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--ink-2); margin-top: 8px; }
.legend .key { display: inline-block; width: 10px; height: 10px; border-radius: 2px;
               margin-right: 5px; vertical-align: -1px; }

/* ------------------------------------------------------------------ meters */

.meter { height: 6px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--accent); }
.meter.warn > span { background: var(--warn); }

/* ---------------------------------------------------------------- question */

.qcard { border: 1px solid var(--border); border-radius: var(--radius);
         background: var(--surface); padding: 20px; box-shadow: var(--shadow); }
.qcard .prompt { font-size: 18px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 4px; }
.qcard .context { color: var(--ink-2); font-size: 14px; margin: 0 0 16px; }
.qcard .worth { font-size: 12.5px; color: var(--ink-3); margin-bottom: 14px; }
.qbtn {
  display: block; width: 100%; text-align: left; padding: 13px 15px; margin-bottom: 8px;
  border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface);
  color: var(--ink); font: inherit; font-size: 15px; cursor: pointer;
}
.qbtn:hover { border-color: var(--accent); background: var(--accent-soft); }
.qbtn .hint { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.qbtn.escape { border-style: dashed; color: var(--ink-2); }

/* ------------------------------------------------------------------- proof

   These two carried hardcoded hex values inline — `background:#f6e4e0` on the
   failed-check row, light-mode ink on a pale pink panel. An inline style beats
   every token, so in dark mode `--ink` at #e8e8e4 painted onto that panel at
   1.00:1 contrast: identical luminance, an empty box. The sentence that
   vanished is the one this whole product exists to produce — "the page prints
   96,430.08, the rows read come to 91,204.61, out by 5,225.47" — and every
   client whose machine is set to dark saw nothing there.

   A colour written into a template cannot be theme-aware. These belong in the
   stylesheet, in tokens, where both modes are defined. */
.banner-good {
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
}
.banner-good strong { color: var(--accent); }
.why-not > td {
  background: var(--bad-soft);
  color: var(--ink);
}

/* The bank's own words, under the question.

   Three of the question templates name nobody, because they are raised exactly
   when the counterparty could not be worked out. Without this block those cards
   ask about two dozen payments and show none of them. */
.evidence {
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg, transparent); padding: 10px 12px; margin: 0 0 14px;
}
.evidence-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3); margin-bottom: 6px;
}
.evidence table { width: 100%; border-collapse: collapse; }
.evidence td { padding: 3px 0; font-size: 13px; vertical-align: top; }
.evidence td.mono { padding: 3px 10px; word-break: break-word; }
.evidence td.num { text-align: right; font-variant-numeric: tabular-nums; }
.evidence-more { font-size: 12px; color: var(--ink-3); margin-top: 6px; }

/* A question the owner set aside. Present, answerable, and visibly not the
   thing being asked right now — so it reads as a shelf rather than a queue. */
.qcard.quiet { box-shadow: none; background: var(--surface-2, var(--surface)); }
.qcard.quiet + .qcard.quiet { margin-top: 12px; }
.qcard.quiet .prompt { font-size: 16px; }

/* A destructive-ish action inside a table row: worded, not shouted. */
.linkish {
  border: 0; background: none; padding: 0; font: inherit; font-size: 13px;
  color: var(--accent); cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px; white-space: nowrap;
}
.linkish:hover { color: var(--ink); }

.mono { font-family: var(--mono); font-size: 12.5px; }
.muted { color: var(--ink-3); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.empty { text-align: center; padding: 44px 20px; color: var(--ink-3); }
.empty .big { font-size: 17px; color: var(--ink-2); margin-bottom: 6px; }

/* ------------------------------------------------------------- verdict band
   The dashboard's first claim. Its three states are the product's three
   colour roles: proved, could-not-be-checked, does-not-tie. Nothing else on
   the page may borrow them. */
.verdict { border: 1px solid var(--border); border-left: 4px solid var(--ink-3);
  background: var(--surface); border-radius: var(--radius); padding: 16px 18px;
  margin: 18px 0 26px; box-shadow: var(--shadow); }
.verdict--ready   { border-left-color: var(--good); }
.verdict--review  { border-left-color: var(--warn); }
.verdict--blocked { border-left-color: var(--bad); }
/* A-96 defect 1. `align-items: center` with no line-height collides the headline
   with `.verdict__why` the moment the headline wraps — which it does at narrow
   widths on "Readable, and still moving". The dot is nudged down by hand because
   flex-start aligns it to the cap line rather than the middle of the first line. */
.verdict__head { display: flex; align-items: flex-start; gap: 9px; font-size: 17px;
                 line-height: 1.35; }
.verdict__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3);
                flex: none; margin-top: 7px; }
.verdict--ready   .verdict__dot { background: var(--good); }
.verdict--review  .verdict__dot { background: var(--warn); }
.verdict--blocked .verdict__dot { background: var(--bad); }
.verdict__why { margin: 7px 0 0; color: var(--ink-2); max-width: 74ch; line-height: 1.5; }
.verdict__acts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }

/* a figure the book does not support is not shown small — it is not shown */
.stat--withheld { background: var(--surface-2); border-style: dashed; }
.stat--withheld .label { color: var(--ink-3); }
.value--none { color: var(--ink-3); font-weight: 400; }

/* A figure that is shown but is not final. --warn only: the number is not wrong,
   it is unfinished. Never --bad, which means "does not tie", and never --good,
   which means proved. */
.stat--marked { border-color: var(--warn); }
.stat--marked .label { display: flex; align-items: center; gap: 7px; }
.stat--marked .label .chip { text-transform: none; letter-spacing: 0; font-size: 10.5px;
  padding: 1px 6px; }
.reasons { margin: 12px 0 0; color: var(--ink-2); font-size: 13.5px; max-width: 82ch;
  line-height: 1.55; }
.reasons__lead { color: var(--ink-3); }

/* R-028. The account question, asked before the bytes are read. It sits inside
   the upload form and is the most consequential control on the page, so it is
   given the weight of a question rather than the weight of a filter. */
.pick { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); }
.pick__q { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 8px; }
.pick__sel { width: 100%; max-width: 420px; padding: 9px 11px; border-radius: 8px;
  border: 1px solid var(--border-strong); background: var(--surface-2);
  color: var(--ink); font: inherit; font-size: 14px; }
.pick__note { margin: 9px 0 0; font-size: 12.5px; color: var(--ink-3);
  max-width: 72ch; line-height: 1.55; }

/* A held file's selector, one per row. --warn throughout: the file is not wrong,
   it is unplaced, and one answer releases it. */
.held__pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pick__sel--inline { width: auto; min-width: 190px; max-width: 260px; padding: 6px 9px;
  font-size: 13px; }
.held__pre { font-size: 11.5px; color: var(--warn); white-space: nowrap; }
.stat .of { color: var(--ink-3); font-size: .62em; font-weight: 400; }

/* grouped checks: a count first, the paragraph only if asked for */
.count { display: inline-block; min-width: 22px; padding: 1px 7px; border-radius: 20px;
  font-size: 12px; font-weight: 700; vertical-align: 3px; margin-left: 7px; font-family: var(--mono); }
.count--bad  { background: var(--bad-soft);  color: var(--bad); }
.count--warn { background: var(--warn-soft); color: var(--warn); }
.chk { border: 1px solid var(--border); border-left: 3px solid var(--border-strong);
  border-radius: var(--radius); background: var(--surface); margin: 8px 0; }
.chk--bad   { border-left-color: var(--bad); }
.chk--warn  { border-left-color: var(--warn); }
.chk--quiet { border-left-color: var(--border-strong); background: var(--surface-2); }
.chk > summary { cursor: pointer; padding: 11px 14px; list-style: none; }
.chk > summary::-webkit-details-marker { display: none; }
.chk > summary::before { content: "▸"; color: var(--ink-3); margin-right: 9px; font-size: 12px; }
.chk[open] > summary::before { content: "▾"; }
.chk__body { padding: 0 14px 13px 32px; color: var(--ink-2); line-height: 1.55; }
.chk__body p { margin: 0 0 7px; max-width: 84ch; }
.chk__ask { color: var(--ink-3); font-size: 13px; }
.chk__body--scroll { max-height: 320px; overflow-y: auto; }
.chk__line { font-size: 13px; margin: 0 0 4px; }
.small { font-size: 13px; }
@media (max-width: 620px) {
  .verdict__acts .btn { width: 100%; text-align: center; }
}

/* ------------------------------------------------------------ theme toggle
   Two states, named. Not a sun/moon glyph on its own: a control whose only
   label is a picture makes a person click it to find out what it does. */
.theme {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--ink-2); border-radius: 20px; padding: 4px 11px 4px 9px;
  font: inherit; font-size: 12.5px; cursor: pointer; line-height: 1;
}
.theme:hover { border-color: var(--border-strong); color: var(--ink); }
.theme__icon { width: 13px; height: 13px; flex: none; }
.theme__label { letter-spacing: .01em; }
:root[data-theme="light"] .theme__dark { display: none; }
:root:not([data-theme="light"]) .theme__light { display: none; }
@media (max-width: 700px) { .theme__label { display: none; } .theme { padding: 5px 8px; } }

/* what one answer is worth — the most motivating fact on the questions page,
   and it was six words of grey 13px under the prompt. Deliberately NOT --good:
   nothing here is proved yet, it is only worth doing. */
.worth { display: inline-block; margin-left: 10px; font-size: 13.5px; font-weight: 400;
  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 20px; padding: 3px 11px; vertical-align: 3px; }
.worth b { color: var(--ink); font-weight: 640; }
@media (max-width: 700px) { .worth { display: block; margin: 8px 0 0; } }

/* The primary button uses --accent, which is also "proved". Ruled fine by
   Pravin, 30 Aug: a button is chrome, a status indicator is vocabulary, and
   the rule protects the latter. Recorded so it is not relitigated. */

/* R-042 · three grades of evidence on the upload page.
   `--warn` here is used in its one legitimate sense: a month sent on our own
   template has not been checked against anything. It is not wrong, and it must
   never take `--bad`, which means "does not tie". */
.grades { margin-top: 14px; border: 1px solid var(--border); border-radius: 10px;
          padding: 10px 14px; background: var(--surface-2); }
.grades > summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
.grades__list { margin: 10px 0 2px; padding-left: 20px; }
.grades__list > li { margin-bottom: 10px; line-height: 1.5; }
.grades__list code { font-size: .92em; }
.grades__warn { display: block; margin-top: 5px; padding-left: 9px;
                border-left: 3px solid var(--warn); color: var(--ink-2); }

/* ------------------------------------------------------------- register
   A-64. Three rules this file must not break, and each is a ruling:

     --good  proved        --warn  could not be checked (unrun, NOT wrong)
     --bad   does not tie

   `--bad` appears here in EXACTLY ONE place: an account whose period failed
   to reconcile. A withheld row is muted, never --bad: a retracted row does
   not fail to tie, it is no longer claimed.

   And there are no verbs. No checkbox, no Accept, no bulk action. R-049
   abolished the queue and a verb would rebuild it under a new name. */

.reg__h1 { margin: 0 0 .2rem; }
.reg__lede { margin: 0 0 1.4rem; color: var(--ink-2); }

.reg__filters {
  display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: end;
  padding: .9rem 1rem; margin-bottom: 1.5rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.reg__filters label { display: flex; flex-direction: column; gap: .3rem;
  font-size: .78rem; color: var(--ink-2); }
.reg__filters select { min-width: 11rem; }
.reg__toggle { flex-direction: row !important; align-items: center; gap: .45rem !important;
  font-size: .85rem; color: var(--ink); }
.reg__n { background: var(--warn-soft); color: var(--warn); border-radius: 99px;
  padding: 0 .4rem; font-size: .72rem; font-variant-numeric: tabular-nums; }

.reg__account { margin-bottom: 2.2rem; }
.reg__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1rem;
  margin-bottom: .5rem; }
.reg__head h2 { margin: 0; font-size: 1.02rem; }
.reg__facts { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem;
  align-items: center; font-size: .78rem; color: var(--ink-2); }
.reg__closed, .reg__feed { color: var(--ink-3); }
.reg__feed--off { color: var(--ink-3); }

/* R-048. Not a toast, not a dismissible banner: a fact about the books, in
   the one place a book that looks current would be believed. */
.reg__stale {
  margin: 0 0 .7rem; padding: .6rem .8rem;
  background: var(--warn-soft); border-left: 3px solid var(--warn);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink); font-size: .85rem;
}

table.reg { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.reg th {
  text-align: left; font-weight: 500; font-size: .72rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3);
  padding: .4rem .6rem; border-bottom: 1px solid var(--border);
}
table.reg td { padding: .45rem .6rem; border-bottom: 1px solid var(--border);
  vertical-align: top; }
table.reg tr:hover td { background: var(--surface-2); }

.reg__date { white-space: nowrap; color: var(--ink-2); width: 4.5rem; }
.reg__src  { width: 4.5rem; }
.reg__acct { width: 15rem; }
.reg__num  { text-align: right; white-space: nowrap; width: 8rem;
  font-family: var(--mono); font-variant-numeric: tabular-nums; }
.reg__none { color: var(--ink-3); }
.reg__desc .raw { font-family: var(--mono); font-size: .8rem; color: var(--ink); }
.reg__chk { display: block; font-size: .72rem; color: var(--ink-3); }

.src { font-size: .7rem; letter-spacing: .03em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--border); border-radius: 4px;
  padding: .05rem .3rem; }
.src--warn { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }

/* The only place in the product where the engine's reasoning is inspectable
   by a person. Focusable, so it is not hover-only. */
.why { border-bottom: 1px dotted var(--border-strong); cursor: help; }
.why:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

.unplaced { color: var(--warn); text-decoration: none;
  border-bottom: 1px solid var(--warn); }
.unplaced:hover { background: var(--warn-soft); }

.reg__sub td { border-bottom: 1px solid var(--border); padding-top: 0;
  font-size: .78rem; color: var(--ink-3); }
.reg__nopair { color: var(--warn); }

/* Muted, never --bad. A retracted row is no longer claimed; it does not
   fail to tie. */
.reg__row--withheld td { opacity: .55; }
.reg__row--withheld .reg__num { text-decoration: line-through; }
.reg__withheld { color: var(--ink-3); font-style: italic; }

.reg__empty { color: var(--ink-3); font-style: italic; }
.reg__foot { color: var(--ink-3); font-size: .8rem; }

@media (max-width: 760px) {
  .reg__acct, .reg__src { width: auto; }
  table.reg { font-size: .8rem; }
  .reg__num { width: 6.5rem; }
}

/* The account-header status pill. These three classes did not exist; the
   register asked for them and rendered plain text until they did. The roles
   are the product's, not this file's: good = proved, warn = could not be
   checked, bad = does not tie. */
.tag { font-size: .7rem; letter-spacing: .03em; text-transform: uppercase;
  border-radius: 4px; padding: .1rem .4rem; border: 1px solid transparent; }
.tag--good { color: var(--good); background: var(--accent-soft); border-color: var(--good); }
.tag--warn { color: var(--warn); background: var(--warn-soft); border-color: var(--warn); }
.tag--bad  { color: var(--bad);  background: var(--bad-soft);  border-color: var(--bad); }

.reg__nobal { margin: 0 0 .5rem; font-size: .78rem; color: var(--ink-3); }


/* ---------------------------------------------------------------- the public W-9
   A-96 defect 2. This lived in a `<style>` block inside `w9_public.html`. Every
   rule is `.w9`-scoped and every colour is already a token, so it was theme-aware
   where it sat — the reason to move it is the seam, not a bug: one stylesheet is
   where a reviewer looks, and a rule nobody looks at is a rule that drifts. */

.w9 { max-width: 34rem; margin: 0 auto; padding-top: 26px; }
.w9 .asker { font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
             color: var(--ink-3); margin: 0 0 6px; }
.w9 h1 { font-size: 27px; line-height: 1.2; margin: 0 0 14px; }
.w9 .why { background: var(--surface); border: 1px solid var(--border);
           border-radius: var(--radius); padding: 16px 18px; margin-bottom: 22px; }
.w9 .why p { margin: 0 0 10px; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.w9 .why p:last-child { margin-bottom: 0; }
.w9 .q { margin: 0 0 26px; }
.w9 .q > label.field, .w9 .q > .field {
    display: block; font-size: 17px; font-weight: 560; margin-bottom: 6px; }
.w9 .q .help { font-size: 14.5px; line-height: 1.5; max-width: none; margin-bottom: 10px; }
.w9 .q .line { font-size: 12px; color: var(--ink-3); font-weight: 400; }
.w9 input[type=text], .w9 input[type=email] {
    width: 100%; font-size: 17px; padding: 13px 12px; border-radius: 8px;
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); }
.w9 input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.w9 .choice { padding: 13px 14px; font-size: 16px; }
.w9 .choice .hint { font-size: 14px; line-height: 1.45; }
.w9 .bad-field { border-color: var(--bad); }
.w9 .fielderr { color: var(--bad); font-size: 14.5px; line-height: 1.5;
                margin-top: 7px; }
.w9 .sensitive { border-left: 3px solid var(--accent); padding-left: 14px; }
.w9 .cert { border: 1px dashed var(--border-strong); border-radius: var(--radius);
            padding: 16px 18px; margin: 0 0 26px; color: var(--ink-2); font-size: 14.5px; }
/* Item 2, crossed out. The line through it is the whole point: on paper the
   payee strikes it with a pen, and a page that instead prints "item 2 was
   struck" underneath unaltered text is showing them something other than
   what they are signing. */
.w9 .cert-item.struck { text-decoration: line-through;
                        text-decoration-thickness: 2px; opacity: .62; }
.w9 .struck-note { font-size: 13.5px; margin: 5px 0 0; }
.w9 .struck-note[hidden] { display: none; }
.w9 .go { width: 100%; font-size: 18px; padding: 16px; border-radius: 9px; }
.w9 footer { margin-top: 30px; color: var(--ink-3); font-size: 13px; line-height: 1.6; }


/* ------------------------------------------------------------------ sign in
   The seam between the marketing site and the app. It carries both
   vocabularies on purpose — the marketing wordmark above a card built from the
   app's own surfaces — because it is the one page a person crosses on their
   way in and nothing should change underfoot.

   Built to the design handoff's spec. Two departures from it, both deliberate
   and both named:

   1. The wordmark is `Newsreader, Georgia, serif` and NO WEBFONT IS REQUESTED.
      The handoff sets the marketing faces from Google Fonts; the app makes
      zero font requests and that is worth keeping on the one app page a
      stranger can reach, because a font request tells Google the IP address of
      everyone signing in to their own books. Georgia is the handoff's own
      declared fallback. Whether the real face is worth that request on THIS
      page is Pravin's, and it is a one-line change either way.

   2. No "back to the site" link yet. It would point at a marketing site that
      does not exist, and `/` currently redirects here — a link that returns
      you to the page you are on is worse than no link. It arrives with A-97.
*/

.signin {
  max-width: 392px;
  margin: 0 auto;
  padding: 56px 20px;
  position: relative;
}

/* The one motif carried over from the marketing hero, held much fainter. */
.signin__glow {
  position: absolute;
  top: -120px; left: 50%;
  width: 720px; height: 380px;
  margin-left: -360px;
  background: radial-gradient(closest-side, rgba(196, 181, 253, .10), transparent);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}
.signin > *:not(.signin__glow) { position: relative; z-index: 1; }

.signin__mark {
  font-family: Newsreader, Georgia, serif;
  font-weight: 300;
  font-size: 26px;
  letter-spacing: -.02em;
  text-align: center;
  margin: 0 0 22px;
  color: var(--ink);
}

.signin__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 30px;
}
.signin__card h1 { font-size: 22px; font-weight: 640; margin: 0 0 8px; line-height: 1.25; }
.signin__lede { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 0 0 20px; }

.signin__label {
  display: block;
  font-size: 12.5px;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.signin__input {
  width: 100%;
  font-size: 15px;
  padding: 12px 13px;
  border-radius: 9px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--ink);
}
.signin__input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.signin__go { width: 100%; margin-top: 14px; padding: 12px; font-size: 15px; }
.signin__fine { font-size: 12.5px; color: var(--ink-3); margin: 14px 0 0; line-height: 1.5; }

/* The confirmation. `--accent` is `proved` and a delivered link is a fact, so
   this is the one place on the page the role is used as itself. */
.signin__tick {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  margin-bottom: 14px;
}

.signin__note {
  border-left: 2px solid var(--border-strong);
  padding-left: 14px;
  margin-top: 22px;
}
.signin__note p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
}


/* -------------------------------------------------------------------- the mark
   Direction 02, "the double rule" — chosen in `Return Ready - Logo Directions`.

   **A double underline under a figure is bookkeeping's own notation for a final
   total: nothing goes below it.** That is exactly what this product claims,
   said in a convention an accountant reads without thinking and an owner reads
   as emphasis. Two rectangles, one accent, no invented shape.

   Defined here rather than in `marketing.css` because the marketing site and
   the sign-in page both load this file, and a mark defined twice is a mark that
   drifts.

   THE FIVE RULES FROM THE DIRECTIONS FILE, and the first two are enforced here:

   1. **One accent, never two.** `--warn` and `--bad` are reserved vocabulary. A
      mark borrowing them would say "these books do not tie" on every page.
   2. **Newsreader 300, never bolder.** Both films set it there. A heavier cut
      reads as a different company. 400 is the floor concession on light at
      small sizes; 500 never.
   3. **Minimum 16px** — below that the serif detail closes up; use the icon.
   4. **Clear space equals the cap height**, all four sides.
   5. **On light the accent changes** — and it does so by itself, because both
      rules are tokens. `#6D28D9` on paper, `#C4B5FD` in the dark. The mark
      carries no fixed hex, which is the whole reason it is CSS and not an SVG.
*/

/* The lockup is an <a> on the sign-in and sign-up pages, so it inherits the
   global `a:hover { text-decoration: underline }` — which draws a line through
   a wordmark whose own rules are already two lines. `:hover` here beats it on
   specificity (0,2,0 against 0,1,1). The word keeps `var(--ink)` from
   `.rr-lockup__word`, so it never takes the accent link colour either. */
.rr-lockup { display: inline-block; text-align: left; text-decoration: none; }
.rr-lockup:hover, .rr-lockup:focus { text-decoration: none; }
.rr-lockup__word {
  display: block;
  font-family: Newsreader, Georgia, "Times New Roman", serif;
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.04;
  color: var(--ink);
}
.rr-lockup__r1 { display: block; height: 2px; background: var(--border-strong); margin-top: 6px; }
.rr-lockup__r2 { display: block; height: 2px; background: var(--accent); margin-top: 2px; }

/* At 23px and below the rules thin, or they read as a strikethrough. */
.rr-lockup--sm .rr-lockup__r1 { height: 1.5px; margin-top: 5px; }
.rr-lockup--sm .rr-lockup__r2 { height: 1.5px; margin-top: 2px; }

/* A-99. The expired-link line. `--warn` is the whole point: the link timed
   out, which is `could not be checked`, not `does not tie`. Nothing failed. */
.signin__expired {
  background: var(--warn-soft);
  border: 1px solid var(--warn);
  color: var(--warn);
  border-radius: 9px;
  padding: 11px 13px;
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.5;
}


/* ============================================================ mobile, 390 x 844
   The design update's Mobile section, and it exists because of one sentence in
   it: the Questions screen is the one an owner opens **standing up, one-handed**.
   Everything below follows from that rather than from a breakpoint.

   FOUR SCREENS ARE IN SCOPE — Questions, Statements, Books, About you. Proof,
   1099s, Reviewer, Register and the trial balance stay desktop **by decision,
   not by omission**: they are wide tables an accountant reads at a desk, and
   squeezing one onto a phone would make it look usable when it is not.

   The rule that governs the rest: **withholding survives.** A phone is not a
   reason to print a profit the book does not support. An em-dash and its
   reason appear at 390px exactly as they do at 1280px. The four traps do not
   care what device you are on.
*/

@media (max-width: 720px) {

  /* ---- the top bar: 56px, and it names the engagement, nothing else ---- */
  .top .inner { min-height: 56px; padding: 0 14px; gap: 10px; }
  .top .brand { min-width: 0; }
  .top .brand,
  .top .brand small {
    display: block;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .top .brand small { font-size: 11px; }
  /* Seven tabs cannot be a row on a phone, and a horizontal scroller hides
     whichever tab you have not scrolled to. The bottom bar replaces them. */
  .top .tabs { display: none; }
  .theme { width: 40px; height: 40px; padding: 0; justify-content: center; flex: none; }

  /* Clear the bottom bar, plus the home indicator. */
  .wrap { padding-bottom: calc(72px + 16px); }

  /* ------------------------------- the bottom bar ------------------------ */
  .mobnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding-bottom: 16px;               /* the home indicator */
  }
  .mobnav > a, .mobnav__more > summary {
    min-height: 52px;                   /* the floor for a thumb */
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; text-decoration: none;
    color: var(--ink-3); font-size: 11.5px; line-height: 1;
    list-style: none; cursor: pointer;
  }
  .mobnav__more > summary::-webkit-details-marker { display: none; }
  .mobnav > a.on, .mobnav__more > summary.on { color: var(--accent); font-weight: 600; }
  .mobnav > a.on::after, .mobnav__more > summary.on::after {
    content: ""; width: 4px; height: 4px; border-radius: 50%;
    background: var(--accent); margin-top: 3px;
  }
  .mobnav__count {
    font-size: 10px; font-weight: 600; line-height: 1;
    padding: 2px 5px; border-radius: 999px;
    background: var(--surface-2); color: var(--ink-2);
  }
  /* The roles do not relax because the screen got smaller. */
  .mobnav__count--bad  { background: var(--bad-soft);  color: var(--bad); }
  .mobnav__count--warn { background: var(--warn-soft); color: var(--warn); }

  .mobnav__more { position: relative; }
  .mobnav__sheet {
    position: absolute; bottom: 100%; right: 0;
    min-width: 160px; margin-bottom: 8px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: var(--shadow); overflow: hidden;
  }
  .mobnav__sheet a {
    display: block; padding: 14px 16px; min-height: 48px; box-sizing: border-box;
    color: var(--ink); text-decoration: none; font-size: 15px;
  }
  .mobnav__sheet a + a { border-top: 1px solid var(--border); }

  /* ---- one decision per screenful, and a target you can hit standing up ---- */
  .choice { min-height: 56px; display: block; text-align: left; }
  .btn, button, input[type=submit] { min-height: 48px; }
  .choice .hint { font-size: 12.5px; line-height: 1.45; }

  /* ---- tables become stacked rows: nothing scrolls sideways ---- */
  .card.scroll { overflow: visible; }
  .stack-rows thead { display: none; }
  .stack-rows tr {
    display: block; padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }
  .stack-rows td { display: block; padding: 1px 0; border: 0; }
  .stack-rows td.num { text-align: right; white-space: nowrap; margin-top: 4px; }

  /* ---- two-column stat pairs, never four across ---- */
  .grid.four, .grid.three, .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat { padding: 12px 13px; min-width: 0; }
  .stat b, .stat .figure { font-variant-numeric: tabular-nums; }
  .stat .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ---- the banner pattern, one shape for every tone ---- */
  .verdict { padding: 14px 15px; }
  .verdict__head { font-size: 15px; font-weight: 600; }
  .verdict__why { font-size: 13.5px; }
  .verdict .btn { width: 100%; margin-top: 12px; }

  h1 { font-size: 21px; }
  h2 { font-size: 16px; }
}

.signin__back { margin: 18px 0 0; font-size: 13px; }
.signin__back a { color: var(--ink-3); text-decoration: none; }
.signin__back a:hover { color: var(--ink-2); }


/* ----------------------------------------------------------------- sign up
   New in the v4 design, and it reverses the product's posture: until now
   everyone arrived through `auth.invite` and `login.html` said in as many
   words that there was no registration page. That sentence is now false and
   has been changed rather than left to rot.

   Shares the sign-in page's field styles deliberately — `.signin__label`,
   `.signin__input`, `.signin__note`, `.signin__fine`. Two pages that link to
   each other in both directions must not feel like two products, and a second
   set of input rules is how they drift apart. */

.signup { max-width: 960px; margin: 0 auto; padding: 48px 20px; position: relative; }
.signup__glow {
  position: absolute; top: -110px; left: 50%;
  width: 760px; height: 400px; margin-left: -380px; max-width: 92vw;
  background: radial-gradient(closest-side, rgba(196, 181, 253, .10), transparent);
  filter: blur(30px); pointer-events: none; z-index: 0;
}
.signup > *:not(.signup__glow) { position: relative; z-index: 1; }
.signup__mark { text-align: center; margin: 0 0 26px; }

.signup__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 40px; align-items: start;
}
.signup__card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 32px 30px;
}
.signup__card h1 { font-size: 22px; font-weight: 640; margin: 0 0 8px; line-height: 1.25; }
.signup__lede { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 0 0 20px; }
.signup__go { width: 100%; margin-top: 18px; padding: 12px; font-size: 15px; }
.signup__alt { font-size: 13px; color: var(--ink-3); margin: 16px 0 0; }
.signup__alt a { color: var(--accent); text-decoration: none; }

.signup__next { padding-top: 6px; }
.m-eyebrow-ish {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 18px;
}
.signup__steps { list-style: none; padding: 0; margin: 0; }
.signup__steps li { display: flex; align-items: center; gap: 13px; padding: 9px 0; }
.signup__steps b {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
  font-size: 12px; font-weight: 600;
}
.signup__steps span { font-size: 15px; color: var(--ink); }
.signup__note { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; margin: 16px 0 0; }

select.signin__input { appearance: none; }

@media (max-width: 740px) {
  .signup__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}


/* ------------------------------------------------------- the cost of skipping
   v4 design. `--warn`, and only `--warn`: an unanswered question is `could not
   be checked`, not `does not tie`. Nothing has failed — a person moved on, and
   the panel says what that will cost rather than hiding it. `--bad` here would
   tell them they had done something wrong by skipping, which they have not.

   It sits under BOTH buttons rather than under the skip one, because the cost
   is the same whether they skip deliberately or simply leave a field empty. */
.skip-cost {
  border-left: 3px solid var(--warn);
  background: var(--warn-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 13px 16px;
  margin-top: 16px;
  max-width: 74ch;
}
.skip-cost p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.skip-cost strong { color: var(--warn); }
.skip-cost__quiet { margin-top: 7px !important; color: var(--ink-3); font-size: 12.5px; }