/* Ledger Playground — a paper-and-ink ledger, not a dashboard. */

:root {
  --paper: #FAFAF8;
  --surface: #FFFFFF;
  --sunk: #F4F1EA;
  --ink: #1A1A18;
  --ink-2: #3A362E;
  --ink-3: #78756F;
  --ink-4: #A8A5A0;
  --rule: #E8E6E3;
  --rule-strong: #D4CEBE;
  --ok: #3C7A4A;
  --ok-bg: #E9F1E7;
  --warn: #8A734E;
  --warn-bg: #F6EFE2;
  --bad: #9C4A3C;

  --display: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --body: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --s1: 0.35rem; --s2: 0.7rem; --s3: 1.1rem; --s4: 1.8rem; --s5: 2.8rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #131311; --surface: #1B1A18; --sunk: #232119;
    --ink: #F3F1EC; --ink-2: #DBD7CE; --ink-3: #9C988F; --ink-4: #6E6A63;
    --rule: #302E2A; --rule-strong: #45413A;
    --ok: #7FB98C; --ok-bg: #1E2A20; --warn: #C7A671; --warn-bg: #2A2318; --bad: #D98A7A;
  }
}
:root[data-theme="dark"] {
  --paper: #131311; --surface: #1B1A18; --sunk: #232119;
  --ink: #F3F1EC; --ink-2: #DBD7CE; --ink-3: #9C988F; --ink-4: #6E6A63;
  --rule: #302E2A; --rule-strong: #45413A;
  --ok: #7FB98C; --ok-bg: #1E2A20; --warn: #C7A671; --warn-bg: #2A2318; --bad: #D98A7A;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wrap {
  max-width: 64rem;
  margin: 0 auto;
  padding: var(--s4) var(--s3) var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
a { color: var(--ink); text-decoration-color: var(--rule-strong); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--ink-3); }

.eyebrow {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
h1 {
  font-family: var(--display); font-size: clamp(1.7rem, 4vw, 2.2rem);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); margin: 0;
}
h2 { font-family: var(--display); font-size: 1.05rem; font-weight: 600; color: var(--ink); margin: 0; }
h3 { font-family: var(--display); font-size: 0.92rem; font-weight: 600; color: var(--ink); margin: 0; }
p { margin: 0; }

/* An account code is one word however it is punctuated. FreeAgent sub-accounts
   read 750-1 and 901-1, and a hyphen is a break opportunity a browser will
   happily take — leaving "750-" on one line and "1" on the next. */
.t-code, .code, .ledger .who .tag { white-space: nowrap; }

/* ---- masthead ---- */
.masthead { display: flex; flex-direction: column; gap: var(--s2); border-bottom: 1px solid var(--rule); padding-bottom: var(--s3); }
.masthead .top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3); }
.masthead .lede { max-width: 62ch; font-size: 0.94rem; }
.masthead .lede p + p { margin-top: var(--s2); }
/* A lede that is a couple of things to try rather than one thing to read. The
   marker is drawn rather than a bullet, to sit with the rest of the page. */
.lede .points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.lede .points li { position: relative; padding-left: var(--s3); }
.lede .points li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 0.32rem; height: 0.32rem; background: var(--rule-strong); border-radius: 50%;
}
nav.tabs { display: flex; gap: var(--s1); }
nav.tabs a {
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.4rem 0.75rem; border: 1px solid var(--rule-strong); border-radius: 2px;
  color: var(--ink-3); text-decoration: none; background: var(--surface);
}
nav.tabs a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---- flash / narration ---- */
/* The three desks and the hint stack with air between them. */
[data-controller="desk"] { display: flex; flex-direction: column; gap: var(--s3); }

/* Two different things, kept apart. The hint reacts to the pointer and so must
   sit BELOW the buttons: above them, a longer hint would push the button out
   from under the cursor, reverting the text, shrinking the box and springing
   the button back — a loop you cannot click through. Both are given a fixed
   height so neither resizes as its text changes. */
.hint {
  border-top: 1px solid var(--rule); padding-top: var(--s3);
  font-size: 0.86rem; color: var(--ink-3); min-height: 3.6rem;
}
.say {
  border-left: 2px solid var(--rule-strong); padding: var(--s3);
  background: var(--surface); font-size: 0.92rem; color: var(--ink-2);
  display: flex; flex-direction: column; gap: var(--s1); min-height: 6.5rem;
}
.say-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.say .cap {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
}
.housekeeping { display: flex; gap: var(--s1); }
.housekeeping button { padding: 0.3rem 0.7rem; font-size: 0.82rem; }
.say.alert { border-left-color: var(--bad); background: var(--warn-bg); }
.say.alert .cap { color: var(--bad); }
.say strong { color: var(--ink); font-weight: 600; }

/* ---- posting desk ---- */
.desk { background: var(--surface); border: 1px solid var(--rule); padding: var(--s3); display: flex; flex-direction: column; gap: var(--s3); }
.row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); }
.field { display: flex; flex-direction: column; gap: var(--s1); }
.field label, .field > .cap {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
}
input[type="number"], input[type="date"], select {
  font-family: var(--mono); font-size: 0.92rem; font-variant-numeric: tabular-nums;
  padding: 0.45rem 0.6rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 2px;
}
input[type="number"] { width: 8rem; }
select { font-family: var(--body); min-width: 10rem; }
.check { display: flex; align-items: center; gap: var(--s2); font-size: 0.92rem; color: var(--ink); }
.vat-field { gap: 0.15rem; }
.vat-note { font-size: 0.72rem; color: var(--ink-4); line-height: 1.35; max-width: 22rem; }
.vat-note .vat-no { color: var(--ink-3); }
.check input { accent-color: var(--ink); width: 1rem; height: 1rem; }

/* One desk per cycle, side by side while there is room. Each carries only the
   contact it can use, so nothing on screen asks to be picked twice. */
.desks { display: grid; grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); gap: var(--s3); align-items: start; }
.desk-head { display: flex; flex-direction: column; gap: 0.1rem; border-bottom: 1px solid var(--rule); padding-bottom: var(--s2); }
.desk-head h2 { font-size: 1rem; }
.desk-head .cap { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.desk .buttons { display: flex; flex-wrap: wrap; gap: var(--s1); }

button, input[type="submit"] {
  font-family: var(--body); font-size: 0.9rem; font-weight: 500;
  padding: 0.45rem 0.8rem; cursor: pointer; border-radius: 2px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule-strong);
  transition: background 120ms ease, border-color 120ms ease;
}
button:hover:not(:disabled), input[type="submit"]:hover { background: var(--sunk); border-color: var(--ink-4); }
button.primary, input[type="submit"].primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
button.primary:hover:not(:disabled), input[type="submit"].primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
button.quiet { border-color: var(--rule); color: var(--ink-3); background: transparent; }
button:disabled { opacity: 0.4; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---- t-accounts ---- */
.panel { display: flex; flex-direction: column; gap: var(--s2); }
.panel > .sub, .lede.sub { font-size: 0.86rem; color: var(--ink-3); max-width: 70ch; }
.t-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: var(--s3); }
.t { background: var(--surface); border: 1px solid var(--rule); padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.t.touched { border-color: var(--rule-strong); }
.t-head { display: flex; align-items: baseline; gap: var(--s2); border-bottom: 1px solid var(--rule-strong); padding-bottom: var(--s1); }
.t-code { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.t-name { font-size: 0.8rem; color: var(--ink-3); }
.t-kind { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); margin-left: auto; }
.t-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s2); font-size: 0.85rem; }
.t-cols .col-label { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); padding-bottom: 0.2rem; }
.t-cols .col-label.cr, .t-cols .amounts.cr { text-align: right; }
.amounts { display: flex; flex-direction: column; gap: 0.1rem; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-3); min-height: 1.2rem; max-height: 9rem; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }
.amounts span.fresh { color: var(--ink); font-weight: 600; }
.t-bal { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--rule); padding-top: var(--s2); }
.t-bal .label { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.t-bal .val { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.t-bal .val.zero { color: var(--ink-4); font-weight: 400; }
.t-blurb { font-size: 0.76rem; color: var(--ink-3); line-height: 1.45; }

/* ---- status strip ---- */
.strip { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); background: var(--sunk); padding: var(--s3); }
.stat { display: flex; flex-direction: column; gap: 0.1rem; }
.stat .label { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.stat .val { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.stat .val.muted { color: var(--ink-3); font-weight: 500; font-size: 0.92rem; }
.balanced { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; font-weight: 500; color: var(--ok); }
.balanced.off { color: var(--bad); }
.balanced .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }

/* ---- subledgers ---- */
.subledgers { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: var(--s3); }
.ledger { display: flex; flex-direction: column; border: 1px solid var(--rule); background: var(--surface); }
.ledger .lrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: 0.55rem var(--s3); }
.ledger .lrow + .lrow { border-top: 1px solid var(--rule); }
.ledger .who { color: var(--ink); font-weight: 500; }
.ledger .who .tag { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-left: var(--s2); }
.ledger .amt { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.ledger .amt.zero { color: var(--ink-4); }
.ledger .amt .state { font-family: var(--body); font-size: 0.76rem; color: var(--ink-3); margin-left: var(--s2); }
.recon { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem; font-size: 0.82rem; color: var(--ink-3); }
.recon .sum { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.recon .ok { color: var(--ok); font-weight: 500; display: inline-flex; align-items: center; gap: 0.35rem; }
.recon .ok .dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }

/* ---- tables: journal and reports ---- */
.scroller { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
table.journal { min-width: 40rem; }
table th {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 500; color: var(--ink-3); text-align: right; padding: 0 0 var(--s1);
  border-bottom: 1px solid var(--rule-strong);
}
table td { padding: 0.34rem 0; border-bottom: 1px solid var(--rule); text-align: right; }
table th.l, table td.l { text-align: left; padding-right: var(--s3); }
td.step, td.when { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-3); white-space: nowrap; }
td.acct { color: var(--ink); }
td.acct .code { font-family: var(--mono); font-weight: 600; }
td.who { color: var(--ink-2); }
td.who.none { color: var(--ink-4); }
td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; width: 6.5rem; }
td.num.empty { color: var(--ink-4); }
tr.first-of-entry td { border-top: 1px solid var(--rule); }
tr.first-of-entry:first-child td { border-top: 0; }
tr.fresh td { background: var(--ok-bg); }
tbody tr.seeded td.step { color: var(--ink-4); }
.empty-state { color: var(--ink-3); font-size: 0.9rem; padding: var(--s3) 0; }

/* ---- report statements ---- */
.statements { display: grid; grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); gap: var(--s4); align-items: start; }
.statement { background: var(--surface); border: 1px solid var(--rule); padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.statement .when { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
table.statement-rows td { border-bottom: 0; padding: 0.22rem 0; }
table.statement-rows tr.heading td { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); padding-top: var(--s3); }
table.statement-rows tr.heading:first-child td { padding-top: 0; }
table.statement-rows tr.subtotal td { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-weight: 600; color: var(--ink); padding: 0.4rem 0; }
table.statement-rows tr.total td { border-top: 1px solid var(--ink-4); border-bottom: 2px double var(--rule-strong); font-weight: 700; color: var(--ink); padding: 0.45rem 0; }
table.statement-rows td.caption { text-align: left; color: var(--ink-2); padding-right: var(--s3); }
table.statement-rows td.caption .code { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-4); margin-right: var(--s2); }
table.statement-rows td.amt { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; width: 7rem; }
table.statement-rows td.amt.neg { color: var(--bad); }
.rownote { font-size: 0.76rem; color: var(--ink-3); line-height: 1.45; padding: 0 0 var(--s2); text-align: left; }

/* ---- period picker ---- */
.picker { background: var(--surface); border: 1px solid var(--rule); padding: var(--s3); display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); }
.picker .presets { display: flex; flex-wrap: wrap; gap: var(--s1); }
.picker .presets a {
  font-family: var(--mono); font-size: 0.72rem; padding: 0.35rem 0.6rem; border: 1px solid var(--rule-strong);
  border-radius: 2px; color: var(--ink-3); text-decoration: none; background: var(--paper);
}
.picker .presets a[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---- the bridge between the two statements ---- */
.bridge { background: var(--sunk); padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); font-size: 0.9rem; }
.bridge .line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); }
.bridge .num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.bridge .arrow { color: var(--ink-4); }

footer { border-top: 1px solid var(--rule); padding-top: var(--s3); font-size: 0.85rem; color: var(--ink-3); display: flex; flex-direction: column; gap: var(--s2); }
footer p { max-width: 74ch; }
footer strong { color: var(--ink-2); font-weight: 600; }
footer code { font-family: var(--mono); font-size: 0.9em; }

/* ---- help page ---- */
/* The mnemonic is only worth memorising if you have seen it derived, so the
   equation sits directly under it, growing one term at a time. */
.derivation { margin-top: var(--s3); border-top: 1px solid var(--rule); padding-top: var(--s3); }
.derivation h3 { margin-bottom: var(--s2); }
.derivation .rownote { max-width: 62ch; padding-bottom: var(--s1); }
.eq {
  font-family: var(--mono); font-size: 0.86rem; color: var(--ink-2);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem;
  padding: var(--s2) 0 var(--s3);
}
.eq em { font-style: normal; color: var(--ink-4); }
.eq.big { font-size: 1rem; font-weight: 600; }
/* The two sides of the final line, marked the way the ledger marks them. */
.eq .dr { color: var(--ink); border-bottom: 2px solid var(--rule-strong); }
.eq .cr { color: var(--ink); border-bottom: 2px dashed var(--rule-strong); }

.mnemonic { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: var(--s3); }
.mn { background: var(--surface); border: 1px solid var(--rule); padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.mn-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); border-bottom: 1px solid var(--rule-strong); padding-bottom: var(--s2); }
.mn-head .word { font-family: var(--mono); font-size: 1.15rem; font-weight: 600; letter-spacing: 0.08em; color: var(--ink); }
.mn-head .cap { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.mn-row { display: grid; grid-template-columns: 1.4rem 7rem 1fr; align-items: baseline; gap: var(--s2); }
.mn-row .letter { font-family: var(--mono); font-size: 1rem; font-weight: 700; color: var(--ink); }
.mn-row .word { font-size: 0.92rem; color: var(--ink); }
.mn-row .accts { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.82rem; color: var(--ink-3); }
.mn-row .acct .code { font-family: var(--mono); font-weight: 600; color: var(--ink-2); margin-right: 0.35rem; }
.mn-row .none { font-style: italic; }
.posting-leg { display: inline-flex; align-items: baseline; gap: 0.35rem; margin-right: var(--s2); white-space: nowrap; }
.posting-leg .code { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.posting-leg .fig { font-size: 0.78rem; color: var(--ink-3); }
td.rownote { font-size: 0.8rem; color: var(--ink-3); line-height: 1.45; min-width: 18rem; }
.statement h3 + .rownote { padding-top: var(--s1); }

/* ---- help: one entry, filed two ways ---- */
.refile { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s3); align-items: start; }
.refile-side { display: flex; flex-direction: column; gap: var(--s2); background: var(--surface); border: 1px solid var(--rule); padding: var(--s3); }
.refile-side > .cap { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.refile-side .rownote { padding: 0; }
.refile-side table.journal { min-width: 0; }
.refile-side table.journal td { font-size: 0.82rem; }
.refile-side td.num { width: 5rem; }
.refile-side td.step { white-space: normal; padding-right: var(--s2); }
.refile-side td.acct { line-height: 1.35; }
.refile-arrow { font-family: var(--mono); font-size: 1.4rem; color: var(--ink-4); align-self: center; }
.mini-ts { display: flex; flex-direction: column; gap: var(--s2); }
.mini-t { border: 1px solid var(--rule); padding: var(--s2); display: flex; flex-direction: column; gap: 0.2rem; }
.mini-head { font-size: 0.8rem; color: var(--ink-2); }
.mini-head .code { font-family: var(--mono); font-weight: 600; color: var(--ink); margin-right: 0.35rem; }
.mini-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s2); border-top: 1px solid var(--rule); padding-top: 0.2rem; }
.mini-cols .col-label { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); }
.mini-cols .cr { text-align: right; }
.mini-cols .amt { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.85rem; color: var(--ink); min-height: 1.2rem; }

@media (max-width: 52rem) {
  .refile { grid-template-columns: 1fr; }
  .refile-arrow { transform: rotate(90deg); justify-self: center; }
}

/* ---- help: the mnemonic applied ---- */
.worked-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); gap: var(--s3); align-items: start; }
.worked { background: var(--surface); border: 1px solid var(--rule); padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.worked h3 { font-size: 0.95rem; }
.worked .story { font-size: 0.86rem; color: var(--ink-3); }
.leg { border-left: 2px solid var(--rule-strong); padding: var(--s1) 0 var(--s1) var(--s2); display: flex; flex-direction: column; gap: 0.1rem; }
.leg-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.45rem; }
.leg-head .code { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.leg-head .nm { font-size: 0.86rem; color: var(--ink-2); }
.leg-head .move { font-size: 0.74rem; color: var(--ink-3); font-style: italic; }
.leg-head .verdict {
  margin-left: auto; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 0.1rem 0.45rem; border: 1px solid var(--rule-strong);
  border-radius: 2px; color: var(--ink); white-space: nowrap;
}
.leg-head .verdict.dr { background: var(--sunk); }
.leg .chain { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); }
.leg .why { font-size: 0.82rem; color: var(--ink-3); line-height: 1.45; }
.entry-line { display: flex; flex-wrap: wrap; gap: var(--s1); border-top: 1px solid var(--rule); padding-top: var(--s2); }
.leg-chip { display: inline-flex; align-items: baseline; gap: 0.35rem; font-family: var(--mono); font-size: 0.8rem; padding: 0.15rem 0.5rem; border: 1px solid var(--rule); border-radius: 2px; }
.leg-chip .sd { font-size: 0.66rem; color: var(--ink-3); }
.leg-chip .code { font-weight: 600; color: var(--ink); }
.leg-chip.dr { background: var(--sunk); }
.worked .upshot { font-size: 0.84rem; color: var(--ink-2); line-height: 1.5; }

/* ---- home: choosing a set of books ---- */
h1 a { color: inherit; text-decoration: none; }
/* Home leaves the company; the other three move around inside it. The gap, the
   rule and the dashed border say so before the label has to. */
nav.tabs a.home { position: relative; margin-left: var(--s3); border-style: dashed; }
nav.tabs a.home::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(-1 * var(--s3) / 2); border-left: 1px solid var(--rule-strong);
}
.company-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--s3); align-items: start; }
.company { background: var(--surface); border: 1px solid var(--rule); padding: var(--s3); display: flex; flex-direction: column; gap: var(--s3); }
.company-head { display: flex; flex-direction: column; gap: 0.1rem; }
.company-head h3 { font-size: 1rem; }
.company-head .cap { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.company-stats { display: flex; gap: var(--s4); margin: 0; border-top: 1px solid var(--rule); padding-top: var(--s2); }
.company-stats div { display: flex; flex-direction: column; gap: 0.1rem; }
.company-stats dt { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.company-stats dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.company-actions { display: flex; gap: var(--s2); }
.company-actions form { flex: 0 0 auto; }
input[type="text"] {
  font-family: var(--body); font-size: 0.92rem; padding: 0.45rem 0.6rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 2px; min-width: 14rem;
}