/* Selah — v2 "Verified". Emerald on white. Space Grotesk + JetBrains Mono. */

:root {
  --ink-900:#0A0F0D; --ink-700:#3D4642; --ink-500:#6B7570; --ink-400:#9AA39E; --ink-300:#C4CBC7;
  --surface-0:#F7F9F8; --surface-1:#EFF2F1; --surface-2:#FFFFFF;
  --border:#E2E7E5; --border-str:#C9D1CD;
  --emerald-900:#00543F; --emerald-700:#007A5C; --emerald-600:#00A37A; --emerald-500:#16BE90;
  --emerald-100:#D2F2E8; --emerald-50:#ECFAF5;
  --amber-700:#A85C00; --amber-600:#D97706; --amber-100:#FDEBCF; --amber-50:#FEF7EC;
  --red-700:#A81F1F; --red-600:#DC2626; --red-100:#FBD9D9; --red-50:#FEF0F0;
  --font-ui:'Space Grotesk','Inter',system-ui,sans-serif;
  --font-num:'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace;
  --radius:8px; --radius-card:12px;

  /* What goes ON the accent. NOT always white.
     Light: emerald-600 is #00A37A — white on it is 4.6:1. Fine.
     Dark:  emerald-600 is #16BE90 — bright mint. White on it is 1.9:1. Unreadable.
     So the foreground is a token, not a hardcode. */
  --on-emerald: #FFFFFF;
}
[data-theme="dark"] {
  --ink-900:#F2F5F4; --ink-700:#C2CAC7; --ink-500:#8B9591; --ink-400:#79837E; --ink-300:#545E59;
  --surface-0:#0A0F0D; --surface-1:#131A17; --surface-2:#1A231F;
  --border:#26302B; --border-str:#3A453F;
  --emerald-900:#A8EBD4; --emerald-700:#16BE90; --emerald-600:#16BE90; --emerald-500:#3ED9AC;
  --emerald-100:#00543F; --emerald-50:#00382A;
  --amber-700:#FBBF5B; --amber-600:#F59E0B; --amber-100:#5C3200; --amber-50:#3D2100;
  --red-700:#F49B9B; --red-600:#EF4444; --red-100:#5C1616; --red-50:#3D0F0F;

  /* Dark ink on the bright mint. 10.4:1. Readable. */
  --on-emerald: #0A0F0D;
}

* { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family:var(--font-ui); font-size:15px; line-height:1.6;
  color:var(--ink-900); background:var(--surface-0);
  -webkit-font-smoothing:antialiased;
}

/* ─── THE RULE THAT MATTERS MOST ───
   Every number is monospaced, tabular, right-aligned. Decimals stack.
   Set a tax computation in a proportional font and it reads like a blog post.
   Set it in mono and it reads like a fact. */
.num { font-family:var(--font-num); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.num-r { text-align:right; }

.top {
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 24px; border-bottom:1px solid var(--border); background:var(--surface-2);
  position:sticky; top:0; z-index:10;
}
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink-900); }
.brand span { font-size:19px; font-weight:500; letter-spacing:-0.02em; }
.top-right { display:flex; align-items:center; gap:14px; }
.stamp { font-family:var(--font-num); font-size:11px; color:var(--ink-500); text-transform:lowercase; }
.ghost { background:none; border:1px solid var(--border-str); color:var(--ink-700);
  border-radius:var(--radius); padding:5px 10px; cursor:pointer; font-size:14px; }
.ghost:hover { background:var(--surface-1); }

main { max-width:1080px; margin:0 auto; padding:32px 24px 64px; }

.hero { margin-bottom:32px; }
h1 { font-size:34px; font-weight:500; letter-spacing:-0.03em; line-height:1.2; margin-bottom:12px; }
.lede { font-size:17px; color:var(--ink-700); max-width:640px; margin-bottom:20px; }

.tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:24px;
  border-bottom:1px solid var(--border); padding-bottom:12px; }
.tabs button {
  font-family:var(--font-ui); font-size:13.5px; font-weight:400;
  background:none; border:1px solid transparent; color:var(--ink-500);
  padding:7px 13px; border-radius:var(--radius); cursor:pointer;
}
.tabs button:hover { background:var(--surface-1); color:var(--ink-900); }
.tabs button.active { background:var(--emerald-600); color:var(--on-emerald); font-weight:500; }

/* ═══════════════════════════════════════════════════════════════════════════
   🔴 THE ATTRIBUTE IS THE SINGLE SOURCE OF TRUTH. NOT A CLASS.

   This used to be:

       .panel        { display: none; }
       .panel.active { display: block; }

   ...and NOTHING IN THE JAVASCRIPT EVER ADDED `.active`. The code toggles the
   `hidden` ATTRIBUTE. So every calculator panel was display:none, permanently,
   in every real browser. The user got a title, a sub-heading and a footer —
   with nothing between them.

   AND 167 UI TESTS PASSED THROUGHOUT, because jsdom does not apply CSS. Every
   assertion checked `panel.hidden === false` and was perfectly satisfied while
   the stylesheet silently overruled all of it.

   Two mechanisms for one piece of state is not redundancy. It is a bug with a
   grace period.

   The `hidden` attribute now drives visibility, everywhere, and the UI test
   loads the real stylesheets and asserts the COMPUTED display — not the
   property the JavaScript happens to believe.
   ═══════════════════════════════════════════════════════════════════════════ */
.panel          { display: block; }
.panel[hidden]  { display: none; }
.grid { display:grid; grid-template-columns:340px minmax(0,1fr); gap:20px; align-items:start; }
@media (max-width:860px) { .grid { grid-template-columns:1fr; } }

.card { background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-card); padding:20px; }
.card h2 { font-size:18px; font-weight:500; letter-spacing:-0.01em; margin-bottom:16px; }

label { display:block; font-size:12.5px; color:var(--ink-500); margin:14px 0 5px; }
label:first-of-type { margin-top:0; }
label.check { display:flex; align-items:flex-start; gap:8px; font-size:13.5px; color:var(--ink-900); margin:12px 0; cursor:pointer; }
label.check input { margin-top:3px; flex-shrink:0; }
label.check .hint { display:block; }
input[type=number], select {
  width:100%; font-family:var(--font-num); font-size:15px; padding:9px 11px;
  border:1px solid var(--border-str); border-radius:var(--radius);
  background:var(--surface-2); color:var(--ink-900);
}
select { font-family:var(--font-ui); }
input[type=number]:focus, select:focus { outline:none; border-color:var(--emerald-600);
  box-shadow:0 0 0 3px var(--emerald-50); }
.hint { font-size:12px; color:var(--ink-500); line-height:1.5; margin-top:8px; }
.divider { height:1px; background:var(--border); margin:16px 0; }

/* ── output ── */
.out { display:flex; flex-direction:column; gap:12px; }
.result { background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-card); padding:20px; }
.result .cap { font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-500); margin-bottom:8px; }
.big { display:flex; align-items:baseline; gap:9px; }
.big .v { font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:32px; font-weight:500; letter-spacing:-0.02em; }
.big .u { font-size:13px; color:var(--ink-500); }
.because { font-size:14px; color:var(--ink-700); margin-top:10px; line-height:1.6; }

.steps { margin-top:4px; }
.step { display:flex; justify-content:space-between; gap:16px; padding:5px 0;
  font-family:var(--font-num); font-variant-numeric:tabular-nums; font-size:13px; color:var(--ink-700); }
.step .t { text-align:right; white-space:nowrap; }
.step-note { font-family:var(--font-ui); font-size:12px; color:var(--ink-500);
  line-height:1.5; margin:0 0 8px; }
.total { border-top:1px solid var(--border-str); margin-top:6px; padding-top:8px;
  font-weight:500; color:var(--ink-900); }

.badges { display:flex; gap:6px; flex-wrap:wrap; margin-top:14px; }
.badge { font-family:var(--font-num); font-size:10.5px; padding:3px 8px; border-radius:6px; }
.badge-a { background:var(--emerald-100); color:var(--emerald-900); }
.badge-b { background:var(--surface-1);   color:var(--ink-700); }
.badge-c { background:var(--amber-100);   color:var(--amber-700); }
.badge-f { background:var(--red-100);     color:var(--red-700); }
.badge-n { background:var(--surface-1);   color:var(--ink-500); }

.cite { font-size:12px; color:var(--ink-500); line-height:1.55; margin-top:12px;
  padding-top:12px; border-top:1px solid var(--border); }

.alert { border-radius:var(--radius); padding:11px 13px; font-size:13.5px; line-height:1.55; }
.alert a { color:inherit; }
.alert-warn   { background:var(--amber-50); color:var(--amber-700); border:1px solid var(--amber-100); }
.alert-danger { background:var(--red-50);   color:var(--red-700);   border:1px solid var(--red-100); }
.alert-good   { background:var(--emerald-50); color:var(--emerald-900); border:1px solid var(--emerald-100); }
.alert-info   { background:var(--surface-1); color:var(--ink-700); border:1px solid var(--border); }

/* ── the refusal card — the most persuasive screen in the product ── */
.refusal { background:var(--surface-2); border:1px solid var(--red-600);
  border-radius:var(--radius-card); padding:20px; }
.refusal h3 { font-size:19px; font-weight:500; margin:10px 0 12px; letter-spacing:-0.01em; }
.refusal p { font-size:13.5px; color:var(--ink-700); line-height:1.65; margin-bottom:9px; }
.refusal .lab { font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-500); margin:14px 0 5px; }

/* ── options — never a recommendation ── */
.opt { background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-card); padding:18px; }
.opt.flag { border-color:var(--red-600); }
.opt-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.opt-head h3 { font-size:16px; font-weight:500; }
.opt-head .amt { font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:21px; font-weight:500; }
.opt-head .rate { font-family:var(--font-num); font-size:11.5px; color:var(--ink-500); }
.opt .lab { font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-500); margin:13px 0 4px; }
.opt p, .opt li { font-size:13px; color:var(--ink-700); line-height:1.6; }
.opt ul { padding-left:17px; }
.pill { font-size:10.5px; padding:2px 7px; border-radius:5px;
  background:var(--red-100); color:var(--red-700); font-family:var(--font-num); }

.cta { width:100%; margin-top:14px; background:var(--emerald-600); color:var(--on-emerald);
  border:none; border-radius:var(--radius); padding:11px; font-size:14px; font-weight:500;
  font-family:var(--font-ui); cursor:pointer; }
.cta:hover { background:var(--emerald-700); }

.check-row { display:flex; align-items:flex-start; gap:9px; padding:7px 0; font-size:13.5px; }
.check-row .mk { flex-shrink:0; font-family:var(--font-num); font-size:13px; }
.pass .mk { color:var(--emerald-600); }
.fail .mk { color:var(--red-600); }
.fail { color:var(--ink-500); }

footer { max-width:1080px; margin:0 auto; padding:28px 24px 56px;
  border-top:1px solid var(--border); }
footer p { font-size:12.5px; color:var(--ink-500); line-height:1.65; margin-bottom:7px; }
footer strong { color:var(--ink-700); font-weight:500; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE GUIDE — plain questions, no tax words
   ═══════════════════════════════════════════════════════════════════════════ */

.quiz { max-width: 620px; }
.q { padding: 16px 0; border-bottom: 1px solid var(--border); }
.q:first-child { padding-top: 0; }
.q:last-of-type { border-bottom: none; }
.qt { font-size: 16px; font-weight: 500; color: var(--ink-900); margin-bottom: 4px; }
.qh { font-size: 13px; color: var(--ink-500); line-height: 1.5; margin-bottom: 10px; }
.qopts { display: flex; gap: 8px; margin-top: 10px; }
.qbtn {
  font-family: var(--font-ui); font-size: 14px; padding: 9px 20px;
  border: 1px solid var(--border-str); background: var(--surface-2);
  color: var(--ink-700); border-radius: var(--radius); cursor: pointer;
}
.qbtn:hover { border-color: var(--emerald-600); color: var(--ink-900); }
.qbtn.on { background: var(--emerald-600); border-color: var(--emerald-600); color: var(--on-emerald); font-weight: 500; }
.q input[type=number] { margin-top: 6px; }
.cta:disabled { background: var(--ink-300); cursor: not-allowed; }
.back { margin-bottom: 16px; }

/* ═══════════════════════════════════════════════════════════════════════════
   YOUR TAXES — what applies, WHY, WHEN, and what if you don't
   ═══════════════════════════════════════════════════════════════════════════ */

.ob {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 20px; margin-bottom: 12px;
}
/* Colour is SEMANTIC. Emerald = money back. Red = you are on the hook. */
.ob.sev-red   { border-color: var(--red-600); }
.ob.sev-green { border-color: var(--emerald-600); }
.ob.sev-amber { border-color: var(--amber-600); }

.ob-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.ob-head h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.ob-sev { display: inline-block; font-size: 11px; margin-top: 5px; padding: 2px 8px; border-radius: 5px;
  background: var(--surface-1); color: var(--ink-500); }
.sev-red   .ob-sev { background: var(--red-100);     color: var(--red-700); }
.sev-green .ob-sev { background: var(--emerald-100); color: var(--emerald-900); }
.sev-amber .ob-sev { background: var(--amber-100);   color: var(--amber-700); }

.ob-due { text-align: right; flex-shrink: 0; }
.ob-date { font-family: var(--font-num); font-size: 13px; font-weight: 500; color: var(--ink-900); white-space: nowrap; }
.ob-days { font-family: var(--font-num); font-size: 11px; color: var(--ink-500); margin-top: 2px; }
.sev-red .ob-days { color: var(--red-700); }

.ob-lab { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-400); margin: 12px 0 3px; }
.ob-p { font-size: 14px; color: var(--ink-700); line-height: 1.6; }
/* "Why it applies to YOU" is the sentence the whole product exists to say. */
.ob-why  { color: var(--ink-900); font-weight: 500; }
.ob-miss { color: var(--red-700); }

.ob-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.link { background: none; border: none; padding: 0; margin-left: auto;
  font-family: var(--font-ui); font-size: 13px; font-weight: 500;
  color: var(--emerald-700); cursor: pointer; }
.link:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .ob-head { flex-direction: column; }
  .ob-due { text-align: left; }
  .qopts { flex-direction: column; }
  .qbtn { width: 100%; }
}

/* ─── The two blocks that carry the honesty. Added 11 July 2026. ───────────────
   `.pending` — a law that is SIGNED BUT NOT IN FORCE. Amber, because it is a
   conflict with what everyone else is telling the user, not an error.
   `.cannot`  — what we cannot tell you. Not a disclaimer. A list of the questions
   nobody has answered. It is the most valuable block on the page and it should
   not look like small print. */
.result.pending {
  border-color: var(--amber-600);
  background: var(--amber-50);
}
.result.pending .cap,
.result.pending .because,
.result.pending .step-note { color: var(--amber-700); }
.result.pending .step { border-color: var(--amber-100); }

.result.cannot {
  border-left: 3px solid var(--ink-500);
}
.result.cannot .ob-p {
  font-size: 13.5px; line-height: 1.65; color: var(--ink-700);
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.result.cannot .ob-p:last-child { border-bottom: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   SELAH — THE APP LAYER
   ═══════════════════════════════════════════════════════════════════════════
   This replaces four separate slabs of CSS that were appended one at a time as
   features landed. Each was reasonable alone; together they had no shared spacing
   scale, no type hierarchy, and no agreement about what a "card" is. The result
   was a product where everything shouted at the same volume, and the user's
   complaint was exactly right: it was hard to know where anything was.

   Three rules govern everything below.

   1. HIERARCHY IS SIZE AND SPACE, NOT COLOUR. A screen has ONE headline, a few
      section heads, and body. If everything is bold, nothing is.

   2. ONE PRIMARY ACTION PER SCREEN. Exactly one filled button. Everything else is
      an outline or a link. Two primaries is a question, not an interface.

   3. NUMBERS ARE TABULAR AND RIGHT-ALIGNED, ALWAYS. Money read in a proportional
      font reads like prose. Money read in tabular figures reads like a fact — and
      1,200,000 is visibly larger than 120,000 at a glance, rather than after a
      squint.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* A spacing scale. Not "whatever looked right that afternoon". */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem;
  --shadow-1:0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
  --shadow-2:0 4px 12px rgba(0,0,0,.08);
  --shadow-3:0 12px 32px rgba(0,0,0,.18);
}
[data-theme="dark"] {
  --shadow-1:0 1px 2px rgba(0,0,0,.3);
  --shadow-2:0 4px 14px rgba(0,0,0,.4);
  --shadow-3:0 16px 40px rgba(0,0,0,.6);
}

/* ═══════════════════════════════════════════════════════════════════════════
   🔴 THIS ONE LINE. READ THE COMMENT BEFORE YOU TOUCH IT.

   `[hidden]` is styled by the BROWSER's own stylesheet as `display: none`. But a
   browser's stylesheet has the LOWEST priority there is — ANY author rule that
   sets `display` on the same element beats it. Silently. With no error.

   So this:

       .sheet { display: grid; }        <div class="sheet" hidden>

   ...is a dialog that CAN NEVER BE CLOSED. The `hidden` attribute is set, the
   JavaScript is correct, `el.hidden === true` — and the thing is still on screen,
   on top of everything, and the user cannot navigate away from it. Which is
   exactly what shipped.

   The same rule silently broke `.fab` (a Record button that would not go away) and
   `.appnav` (a nav bar shown to signed-out visitors).

   🔴 AND THE TESTS PASSED. Every one of them asserted `el.hidden === true` — THE
   PROPERTY, NOT THE RENDERING. The property was always true. The pixels never
   agreed. This is the THIRD time in this project that a test has verified a fact
   the browser did not share, and it is the same lesson every time:

       ASSERT WHAT THE USER SEES, NOT WHAT THE DOM SAYS.

   The tests now read getComputedStyle().display. So does the guard below.
   ═══════════════════════════════════════════════════════════════════════════ */
[hidden] { display: none !important; }

main { max-width: 62rem; margin: 0 auto; padding: var(--s5) var(--s4) var(--s7); }

/* ── PAGE HEADER — every screen says what it is, and what to do on it ─────── */
.viewhead {
  display: flex; align-items: baseline; gap: var(--s3);
  flex-wrap: wrap; margin-bottom: var(--s2);
}
.viewhead h2 { font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; }
.viewhead .back { order: -1; }
.lede { color: var(--ink-500); margin-bottom: var(--s5); max-width: 44rem; }

.group-head {
  margin: var(--s6) 0 var(--s3);
  font-size: .72rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-400);
  display: flex; align-items: center; gap: var(--s3);
}
.group-head::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ── CARDS — one definition, used everywhere ─────────────────────────────── */
.card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--s4);
  box-shadow: var(--shadow-1);
}
.card + .card, .stack > * + * { margin-top: var(--s3); }
.card h3 { font-size: 1rem; font-weight: 600; margin-bottom: var(--s2); }

/* 🔑 A CARD HEADER: what this is, on the left. What you can do to it, on the right.
   The action sits WITH the thing it acts on — not floating over it, covering the
   last row, which is the one you just added. */
.cardhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); margin-bottom: var(--s2); flex-wrap: wrap;
}
.cardhead h3 { margin-bottom: 0; }
.card p { color: var(--ink-700); }
.card .muted, .muted { color: var(--ink-500); }
.hint { font-size: .85rem; color: var(--ink-500); margin-top: var(--s2); }
.src  { font-size: .75rem; color: var(--ink-400); font-family: var(--font-num); }
.warn { color: var(--red-700); }

/* semantic cards — the LEFT EDGE carries the meaning, so the body stays readable */
.card.refuse { border-left: 3px solid var(--red-600);     background: var(--red-50); }
.card.ask    { border-left: 3px solid var(--emerald-600); background: var(--emerald-50); }
.card.note   { border-left: 3px solid var(--amber-600);   background: var(--amber-50); }

/* ── BUTTONS — one primary per screen. Everything else recedes. ───────────── */
.primary, .cta {
  background: var(--emerald-600); color: var(--on-emerald);
  border: 1px solid var(--emerald-600); border-radius: var(--radius);
  padding: .55rem 1rem; font: inherit; font-weight: 600; cursor: pointer;
  box-shadow: var(--shadow-1);
}
.primary:hover, .cta:hover { background: var(--emerald-700); border-color: var(--emerald-700); }
.ghost { padding: .5rem .85rem; font: inherit; }
.link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--emerald-700); font: inherit; font-size: .85rem; text-decoration: underline;
  text-underline-offset: 2px;
}
.link:hover { color: var(--emerald-900); }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 2px solid var(--emerald-600); outline-offset: 2px;
}
.row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }

/* ── FORMS ───────────────────────────────────────────────────────────────── */
label { display: block; font-size: .78rem; font-weight: 500; color: var(--ink-500); margin-bottom: var(--s1); }
input, select, textarea {
  font: inherit; font-size: 16px;          /* 16px: below this, iOS zooms the page */
  padding: .55rem .7rem; border: 1px solid var(--border-str);
  border-radius: var(--radius); background: var(--surface-2); color: var(--ink-900);
}
input[type=number] { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* ── THE APP NAV. Always on screen; always says where you are. ────────────── */
.appnav { display: none; }
.appnav:not([hidden]) {
  display: flex; gap: var(--s1); position: sticky; top: 0; z-index: 40;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  padding: var(--s2) var(--s4); overflow-x: auto;
}
.appnav button {
  display: flex; align-items: center; gap: var(--s2);
  background: none; border: none; cursor: pointer;
  padding: .45rem .8rem; border-radius: 999px;
  color: var(--ink-500); font: inherit; font-size: .88rem; white-space: nowrap;
}
.appnav button:hover { background: var(--surface-1); color: var(--ink-900); }
.appnav button.active {
  color: var(--emerald-900); background: var(--emerald-50);
  font-weight: 600; box-shadow: inset 0 0 0 1px var(--emerald-100);
}
@media (max-width: 700px) {
  .appnav {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0;
    border-top: 1px solid var(--border); border-bottom: none;
    justify-content: space-around; box-shadow: 0 -2px 12px rgba(0,0,0,.06);
  }
  .appnav button { flex-direction: column; gap: 2px; font-size: .68rem; padding: .4rem .5rem; }
  main { padding-bottom: 5.5rem; }
}
@media (min-width: 701px) { .appnav button span { display: inline; } }

/* ── DOORS — the home screen ─────────────────────────────────────────────── */
.door-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s3); }
.door {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: var(--s4); cursor: pointer;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.door:hover { border-color: var(--emerald-600); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.door h3 { font-size: 1rem; margin-bottom: var(--s2); }
.door p { font-size: .85rem; color: var(--ink-500); line-height: 1.5; }

/* ── TABS inside a Book ──────────────────────────────────────────────────── */
.tabs {
  display: flex; gap: var(--s1); overflow-x: auto;
  margin: var(--s4) 0; border-bottom: 1px solid var(--border);
}
.tabs .tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: .55rem .9rem; margin-bottom: -1px; cursor: pointer;
  color: var(--ink-500); font: inherit; font-size: .9rem; white-space: nowrap;
}
.tabs .tab:hover { color: var(--ink-900); }
.tabs .tab.active { color: var(--emerald-900); border-bottom-color: var(--emerald-600); font-weight: 600; }

/* ── STAT GRID — the numbers that matter, side by side ───────────────────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--s2); margin: var(--s3) 0; }
.stat { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s3); background: var(--surface-1); }
.stat .k { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-400); }
.stat .v {
  font-size: 1.35rem; font-family: var(--font-num); font-variant-numeric: tabular-nums;
  margin-top: 2px; letter-spacing: -.02em;
}
.stat.muted .v { color: var(--ink-400); }
.stat.bad .v { color: var(--red-600); }
.stat.good .v { color: var(--emerald-700); }

/* ── TABLES — money is tabular ───────────────────────────────────────────── */
.tablewrap { overflow-x: auto; margin: var(--s3) calc(-1 * var(--s4)) 0; padding: 0 var(--s4); }
table.t { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.t th, table.t td { padding: .55rem .7rem; text-align: left; white-space: nowrap; }
table.t thead th {
  position: sticky; top: 0; background: var(--surface-2); z-index: 1;
  font-size: .68rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-400); font-weight: 600; border-bottom: 1px solid var(--border-str);
}
table.t tbody tr { border-bottom: 1px solid var(--border); }
table.t tbody tr:hover { background: var(--surface-1); }
table.t td.num, table.t th.num {
  text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums;
}
table.t td.wide { white-space: normal; min-width: 10rem; }
table.t td.amt { font-weight: 600; }

tr.is-in    td.amt { color: var(--emerald-700); }
tr.is-draft { color: var(--ink-400); font-style: italic; }   /* 🔴 counted in NOTHING */
tr.is-missed td { color: var(--red-700); }                   /* 🔑 it did not come */
tr.is-transfer td { color: var(--ink-400); }                 /* counted in nothing */

/* ── PILLS ───────────────────────────────────────────────────────────────── */
.pill {
  display: inline-block; padding: .1rem .5rem; border-radius: 999px;
  font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 600;
  border: 1px solid var(--border-str); color: var(--ink-500); background: var(--surface-1);
}
.pill.draft  { border-color: var(--border-str); color: var(--ink-400); }
.pill.ok     { border-color: var(--emerald-100); color: var(--emerald-700); background: var(--emerald-50); }
.pill.missed,
.pill.over   { border-color: var(--red-100); color: var(--red-700); background: var(--red-50); }

/* ── PROGRESS ────────────────────────────────────────────────────────────── */
.bar { display: inline-block; width: 5rem; height: 6px; border-radius: 999px; background: var(--surface-1); overflow: hidden; vertical-align: middle; }
.bar > i { display: block; height: 100%; background: var(--emerald-600); }
.bar.over > i { background: var(--red-600); }

/* ── EMPTY STATES — never a blank screen. Always: what, why, and what next. ─ */
.empty { text-align: center; padding: var(--s6) var(--s4); }
.empty .ico { font-size: 2rem; opacity: .6; }
.empty h3 { margin: var(--s3) 0 var(--s2); }
.empty p { color: var(--ink-500); max-width: 30rem; margin: 0 auto var(--s4); font-size: .9rem; }

/* ── "START HERE" ────────────────────────────────────────────────────────── */
.step { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s2) 0; }
.step .n {
  flex: 0 0 1.5rem; height: 1.5rem; border-radius: 999px; display: grid; place-items: center;
  background: var(--surface-1); color: var(--ink-400); font-size: .72rem; font-weight: 700;
  border: 1px solid var(--border-str);
}
.step.done .n { background: var(--emerald-600); color: var(--on-emerald); border-color: var(--emerald-600); }
.step.done .t { color: var(--ink-400); text-decoration: line-through; }
.step .t { flex: 1; font-size: .92rem; }

/* ── THE SHEET ─────────────────────────────────────────────────────────── */

/* 🔴 DEFAULT TO HIDDEN, IN THE CLASS ITSELF.
   Do not set `display: grid` and then rely on `[hidden]` to override it — that is
   a fight with the cascade, and the cascade wins in ways that are invisible until
   a user is trapped in a dialog they cannot close. Set `display: none` as the BASE,
   and only show it when the element is NOT hidden. There is nothing to override. */
.sheet { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.5); display: none; }
.sheet:not([hidden]) { display: grid; place-items: end center; }
.sheet-panel {
  width: 100%; max-width: 27rem; max-height: 90vh; overflow: auto;
  background: var(--surface-2); border: 1px solid var(--border-str);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  display: flex; flex-direction: column; box-shadow: var(--shadow-3);
}
@media (min-width: 701px) { .sheet { place-items: center; } .sheet-panel { border-radius: var(--radius-card); } }
.sheet-head, .sheet-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: var(--s3) var(--s4); position: sticky; background: var(--surface-2); z-index: 2;
}
.sheet-head { top: 0; border-bottom: 1px solid var(--border); }
.sheet-foot { bottom: 0; border-top: 1px solid var(--border); }
.sheet-body { padding: var(--s4); }
.sheet-body label { margin-top: var(--s3); }
.sheet-body input, .sheet-body select { width: 100%; }
/* The amount is what you opened this sheet to type. Make it the loudest thing on it. */
.sheet-body #bk-amount { font-size: 1.7rem; font-weight: 600; letter-spacing: -.02em; text-align: right; }
.sheet-body .two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }

.seg { display: flex; gap: var(--s1); background: var(--surface-1); padding: 3px; border-radius: var(--radius); }
.seg-b {
  flex: 1; padding: .5rem; cursor: pointer; font: inherit; font-size: .85rem;
  background: none; border: none; border-radius: calc(var(--radius) - 2px); color: var(--ink-500);
}
.seg-b.active { background: var(--surface-2); color: var(--emerald-900); font-weight: 600; box-shadow: var(--shadow-1); }

.saved { color: var(--emerald-700); font-weight: 600; }

/* ── ON TRACK — the one budget fact the month screen needs ────────────────── */
.ontrack {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  margin-top: var(--s3); padding: var(--s3);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-1);
}
.ontrack.ok  { border-left: 3px solid var(--emerald-600); }
.ontrack.bad { border-left: 3px solid var(--red-600); }
.ontrack-l { flex: 1; min-width: 12rem; font-size: .9rem; }
.ontrack .bar { width: 6rem; }

/* ── THE DASHBOARD TILES ─────────────────────────────────────────────────────
   🔴 A tile shows a REAL figure or a dash. Never a placeholder, never a sample.
   A product that shows you an invented number has taught you to distrust its
   real ones — so an empty tile says "—" and tells you what to do about it.     */
.tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--s3); margin: var(--s4) 0;
}
.tile {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: var(--s4);
  box-shadow: var(--shadow-1); cursor: pointer; text-align: left;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.tile:hover { border-color: var(--emerald-600); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.tile .ti { font-size: 1.15rem; }
.tile .tk { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-400); margin-top: var(--s2); }
.tile .tv {
  font-size: 1.5rem; font-family: var(--font-num); font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; margin-top: 2px; line-height: 1.2;
}
.tile .ts { font-size: .75rem; color: var(--ink-500); margin-top: var(--s1); }
.tile.empty-t .tv { color: var(--ink-300); }
.tile.bad  .tv { color: var(--red-600); }
.tile.good .tv { color: var(--emerald-700); }
.tile.act { border-left: 3px solid var(--emerald-600); }

.dico { font-size: 1.05rem; margin-right: .35rem; }

/* ── the "add" tile: present, but visibly not one of your things ──────────── */
.tile-add {
  border-style: dashed; background: none; box-shadow: none;
  color: var(--ink-500);
}
.tile-add:hover { border-style: solid; border-color: var(--emerald-600); color: var(--ink-900); }
.tile-add .ti { opacity: .7; }

/* ── A NOTE COLUMN IS CONTEXT, NOT CONTENT ───────────────────────────────────
   "Where this came from" was set to `wide` — normal wrapping, 10rem minimum — so
   a sentence of working ("Over 6 months you spent 4,800,000 on this, across 6
   transactions") pushed the BUDGET, SPENT and LEFT columns off the screen.

   The figures are what the person came to the table to read. The note explains
   them. An explanation that hides the thing it explains is not an explanation.

   So: one line, truncated, muted, and the whole sentence on hover.              */
table.t th.note, table.t td.note {
  max-width: 13rem; width: 13rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: .72rem; color: var(--ink-400); font-family: var(--font-num);
}
table.t td.note { cursor: help; }

/* On a narrow screen the note is the first thing to go. The numbers are not. */
@media (max-width: 620px) {
  table.t th.note, table.t td.note { display: none; }
}

/* ── editing a category where it is used ─────────────────────────────────── */
.cat { display: inline-flex; align-items: center; gap: .3rem; }
.cat-e { opacity: 0; font-size: .8rem; text-decoration: none; transition: opacity .1s; }
table.t tr:hover .cat-e, .cat-e:focus-visible { opacity: 1; }
.chk { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--ink-500); margin: 0; }
.chk input { width: auto; }

/* ── THE MONTH NAVIGATOR ──────────────────────────────────────────────────── */
.monthnav {
  display: flex; align-items: center; gap: var(--s3);
  margin: var(--s4) 0 0;
}
.monthnav .ghost { font-size: 1.2rem; line-height: 1; padding: .3rem .7rem; }
.monthnav-l { display: flex; flex-direction: column; min-width: 9rem; text-align: center; }
.monthnav-l strong { font-size: 1.05rem; letter-spacing: -.01em; }
.monthnav-l span { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.monthnav-l .past    { color: var(--ink-400); }
.monthnav-l .current { color: var(--emerald-700); }
.monthnav-l .future  { color: var(--amber-700); }
.monthnav #bk-today { margin-left: auto; }