/* Layout: one narrow reading column; each run's chunk ledger is the single bold object. */
:root {
  --bg: #f3f6f5; --panel: #ffffff; --fg: #152320; --muted: #5a6d68; --rule: #d5dfdc;
  --accent: #0d6b5b; --accent-soft: #d6ece6; --cell: #e3ebe8; --crowd: #8fc4b7; --good: #1d7a3a; --bad: #b3261e;
  --display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0e1513; --panel: #151f1c; --fg: #e2ebe8; --muted: #93a7a1; --rule: #2a3934;
  --accent: #52c4aa; --accent-soft: #17352e; --cell: #1f2b28; --crowd: #2f6a5d; --good: #5cc77d; --bad: #ff8a80; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #0e1513; --panel: #151f1c; --fg: #e2ebe8; --muted: #93a7a1; --rule: #2a3934;
  --accent: #52c4aa; --accent-soft: #17352e; --cell: #1f2b28; --crowd: #2f6a5d; --good: #5cc77d; --bad: #ff8a80; color-scheme: dark }

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.55 var(--body); }
a { color: var(--accent); }
.top { max-width: 46rem; margin: 0 auto; padding-block: 18px 0;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; font: 600 0.9rem/1.4 var(--display); }
.top .brand { color: var(--fg); text-decoration: none; font-weight: 750; font-size: 1.05rem; margin-right: auto; }
.top a { text-decoration: none; }
main { max-width: 46rem; margin: 0 auto; padding-block: 28px 72px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: grid; gap: 44px; }
section, header { display: grid; gap: 14px; min-width: 0; }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0; line-height: 1.12; }
h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 750; letter-spacing: -0.01em; }
h2 { font-size: 1.35rem; font-weight: 750; }
h3 { font-size: 1.05rem; font-weight: 750; }
p { margin: 0; max-width: 65ch; }
.eyebrow { font: 600 0.72rem/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
code, .mono { font-family: var(--mono); font-size: 0.86em; }
.muted { color: var(--muted); }
.answer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.answer .big { font: 750 clamp(3rem, 11vw, 4.8rem)/1 var(--display); color: var(--accent); font-variant-numeric: tabular-nums; }
.answer .side { font-size: 0.98rem; color: var(--muted); }
.quote { font-size: 1.02rem; border-left: 3px solid var(--accent); padding-left: 14px; }

.receipt { border-top: 2px solid var(--fg); border-bottom: 1px solid var(--rule); }
.receipt dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); }
.receipt dt, .receipt dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.receipt dt { font: 600 0.72rem/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-right: 18px; }
.receipt dd { font: 0.86rem/1.6 var(--mono); overflow-wrap: anywhere; min-width: 0; }
.receipt dl > :nth-last-child(-n+2) { border-bottom: 0; }
@media (max-width: 520px) { .receipt dl { grid-template-columns: 1fr; } .receipt dt { border-bottom: 0; padding-bottom: 0; } }

.checks { display: grid; gap: 10px; }
.check { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 10px; align-items: start; }
.mark { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font: 600 0.85rem/1 var(--mono);
  background: var(--cell); color: var(--muted); }
.mark.ok { background: var(--good); color: var(--bg); }
.mark.no { background: var(--bad); color: var(--bg); }
.check p { font-size: 0.98rem; }

.ledger { background: var(--panel); border: 1px solid var(--rule); border-radius: 6px; padding: 18px; display: grid; gap: 16px; min-width: 0; }
.ledger canvas { width: 100%; max-width: 100%; display: block; cursor: crosshair; image-rendering: pixelated; border-radius: 2px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.82rem; color: var(--muted); }
.legend i { display: inline-block; width: 0.8em; height: 0.8em; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
button { font: 600 0.95rem/1 var(--display); padding: 12px 16px; border-radius: 4px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--bg); cursor: pointer; }
button.ghost { background: transparent; color: var(--accent); }
button:disabled { opacity: 0.5; cursor: progress; }
button:focus-visible, input:focus-visible, canvas:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
input { font: 0.95rem var(--mono); width: 7.5rem; padding: 10px; border: 1px solid var(--rule); border-radius: 4px; background: var(--bg); color: var(--fg); }
.tally { font-size: 0.98rem; }
.tally strong { font-family: var(--display); }

.tablewrap { overflow-x: auto; min-width: 0; }
table { border-collapse: collapse; width: 100%; font: 0.82rem/1.4 var(--mono); font-variant-numeric: tabular-nums; }
th { text-align: right; font-weight: 600; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
td { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
td.ok, .ok-text { color: var(--good); font-weight: 600; } td.no, .no-text { color: var(--bad); font-weight: 600; }
td.wrap { white-space: normal; }

.rule-out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rule-out div { background: var(--panel); border: 1px solid var(--rule); border-radius: 4px; padding: 12px; display: grid; gap: 4px; }
.rule-out .v { font: 750 1.5rem/1 var(--display); font-variant-numeric: tabular-nums; }
.rule-out .k { font-size: 0.82rem; color: var(--muted); }
@media (max-width: 520px) { .rule-out { grid-template-columns: 1fr; } }
ul, ol { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; max-width: 65ch; }

/* index */
.hero-stats { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.hero-stats div { display: grid; gap: 2px; }
.hero-stats .v { font: 750 1.9rem/1 var(--display); font-variant-numeric: tabular-nums; color: var(--accent); }
.hero-stats .k { font-size: 0.85rem; color: var(--muted); }
.qlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; max-width: none; border-top: 1px solid var(--rule); }
.qlist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.qlist a { text-decoration: none; color: var(--fg); }
.qlist a:hover { color: var(--accent); }
.qlist .val { font: 600 0.92rem/1.3 var(--mono); color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qlist .sub { grid-column: 1 / -1; font-size: 0.82rem; color: var(--muted); }
details { border: 1px solid var(--rule); border-radius: 4px; padding: 8px 12px; background: var(--panel); }
details summary { cursor: pointer; font: 600 0.9rem/1.4 var(--display); }
details pre { overflow-x: auto; font: 0.78rem/1.45 var(--mono); margin: 10px 0 0; }
.pill { display: inline-block; font: 600 0.72rem/1 var(--mono); padding: 4px 7px; border-radius: 999px; letter-spacing: 0.04em; }
.pill.agrees { background: var(--accent-soft); color: var(--good); }
.pill.disagrees { background: var(--bad); color: var(--bg); }
.pill.error { background: var(--cell); color: var(--muted); }
footer { max-width: 46rem; margin: 0 auto; padding-block: 0 40px; font-size: 0.85rem; color: var(--muted);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }