/* The statement, as a household reads it.
 *
 * One column, system type, no webfont — a page that holds a decrypted
 * statement fetches nothing from anywhere, and a typeface is not worth
 * a third party in that diagram. The palette is the brandbook's, which
 * `seal` decides and this file does not reinvent.
 */

:root {
  --ivory: #EDE9E2;
  --charcoal: #1B1B1B;
  --forest: #2A4A3D;
  --muted: #6B6B6B;
  --rule: #D8D2C8;
  --danger: #B0453A;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 24px 16px 48px;
  background: var(--ivory);
  color: var(--charcoal);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.stage { max-width: 44rem; margin: 0 auto; }
h1 { font-size: 1.3rem; margin: 0 0 2px; }
h2 { font-size: 1rem; margin: 24px 0 8px; }
.muted, .period { color: var(--muted); margin: 0 0 2px; }

/* ── The verdicts, one line each, never a single tick. */
.verdicts { margin: 20px 0; border-top: 1px solid var(--rule); }
.verdict {
  display: flex; gap: 10px; align-items: baseline;
  margin: 0; padding: 8px 0; border-bottom: 1px solid var(--rule);
}
.verdict-label { flex: 0 0 9rem; color: var(--muted); font-size: 0.85rem; }
.verdict-said { flex: 1; }
.verdict-pass .verdict-label { color: var(--forest); }
.verdict-fail { color: var(--danger); }
.verdict-absent { color: var(--muted); }
.verdict-detail { margin: 0 0 6px 9.6rem; font-family: var(--mono); font-size: 0.8rem; color: var(--danger); }

/* An amount withheld is said once, loudly, not left as a dash. */
.withheld {
  margin: 16px 0; padding: 12px 14px;
  border: 1px solid var(--danger); color: var(--danger);
}

table { width: 100%; border-collapse: collapse; }
td { padding: 6px 4px; border-bottom: 1px solid var(--rule); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.gap { color: var(--muted); }
.group { text-align: left; }
.basis { text-align: right; color: var(--muted); font-size: 0.85rem; }
.for-owner td { color: var(--muted); }

.household-totals { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; margin: 12px 0 0; }
.household-totals dt { color: var(--muted); }
.household-totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.household-totals .total { font-weight: 600; color: var(--charcoal); }

.payment dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; margin: 0; }
.payment dt { color: var(--muted); }
.payment dd { margin: 0; }
.mono { font-family: var(--mono); }

/* The sheet is wide by nature; it scrolls rather than squeezing the
 * numbers into something unreadable. */
.sheet { margin-top: 28px; overflow-x: auto; }
.sheet-rows { min-width: 34rem; font-size: 0.85rem; }
.sheet tfoot td { border-top: 2px solid var(--rule); border-bottom: none; font-weight: 600; }

/* Stated the way the paper states it: a fact, not a warning. */
.rounding { margin-top: 16px; color: var(--muted); font-size: 0.8rem; line-height: 1.45; }

.state { display: block; margin: 32px 0; }
.state[data-kind="refused"] { color: var(--danger); }
#detail { display: block; margin-top: 6px; color: var(--muted); font-size: 0.9rem; }
.foot { max-width: 44rem; margin: 40px auto 0; color: var(--muted); font-size: 0.8rem; }

@media (prefers-color-scheme: dark) {
  :root { --ivory: #0B0B0B; --charcoal: #EDE9E2; --forest: #C1A2E2; --rule: #2A2A2A; --muted: #9A9A9A; }
}