/* Solva subledger demo page. Calm, paper-and-ink, the same palette family as the
   own-DMS thinking pages. Every colour is a token below; nothing else in this
   file names a colour, so light and dark flip together (test/contrast.test.js, which
   computes every pair this file declares; npm run mutation dims a token to prove it: CONTRAST-CHECK). */
#parts-low a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; }
[data-denied="yes"] { display: none !important; }
@media (max-width: 600px) {
  .scroll .tb th:first-child, .scroll .tb td:first-child {
    position: sticky; left: 0; background: var(--surface); z-index: 1;
    max-width: 160px; white-space: normal; overflow-wrap: anywhere;
  }
}
:root {
  color-scheme: light;
  --bg: #F7F6F2; --surface: #FFFFFF; --surface-2: #EFEDE7; --line: #D9D6CD;
  --ink: #1B1D21; --ink-2: #474C55; --ink-3: #5A5F68;
  --brand: #1F4FA8; --on-brand: #FFFFFF; --tint: #E8EEF9;
  --good: #1E6B3A; --good-bg: #E3F2E8; --warn: #7E4500; --warn-bg: #FBEFDC; --bad: #A3261A; --bad-bg: #FBE7E4;
  --focus: #1F4FA8; --ctrl: #7C7F86;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --bg: #121417; --surface: #1B1E23; --surface-2: #24282E; --line: #353A42;
  --ink: #ECEEF1; --ink-2: #C3C8D0; --ink-3: #A9AFB8;
  --brand: #8FB3FF; --on-brand: #0D1526; --tint: #1D2638;
  --good: #8FD9A8; --good-bg: #163222; --warn: #F4C27A; --warn-bg: #3A2A12; --bad: #FFB3A8; --bad-bg: #3D1C18;
  --focus: #8FB3FF; --ctrl: #8A9099;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121417; --surface: #1B1E23; --surface-2: #24282E; --line: #353A42;
  --ink: #ECEEF1; --ink-2: #C3C8D0; --ink-3: #A9AFB8;
  --brand: #8FB3FF; --on-brand: #0D1526; --tint: #1D2638;
  --good: #8FD9A8; --good-bg: #163222; --warn: #F4C27A; --warn-bg: #3A2A12; --bad: #FFB3A8; --bad-bg: #3D1C18;
  --focus: #8FB3FF; --ctrl: #8A9099;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 16px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
h1 { font-size: 1.75rem; line-height: 1.2; margin: 4px 0 4px; font-weight: 650; }
h2 { font-size: 1.3rem; margin: 0 0 6px; font-weight: 650; }
h3 { font-size: 1rem; margin: 0; font-weight: 650; }
p { margin: 0 0 12px; }
a { color: var(--brand); text-underline-offset: 3px; }
/* A link in a sentence is a 44 px target too: padding above and below grows what a finger presses
   without moving the words around it (1.33em is the type's own height, so 46 px at any size). A link
   in a table cell is a box of its own, 44 px each way. Design section 74. */
/* (.today and .find-hits links, and a car card's own link, are 44 px boxes already.) */
:is(p:not(.own), li, span) > a:not([class]):not(.today a, .find-hits a) { padding-block: calc(23px - .67em); }
td > a:not([class]) { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -48px; background: var(--surface); color: var(--ink); padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); }
.skip:focus { top: 8px; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: .85em; letter-spacing: .01em; overflow-wrap: anywhere; }

/* Header */
.top { background: var(--surface); border-bottom: 1px solid var(--line); padding-top: 20px; }
.top-row { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; }
.eyebrow { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
.sub { color: var(--ink-2); margin: 0 0 12px; }
.theme { min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--ctrl); background: var(--surface); color: var(--ink); font: inherit; font-size: .9rem; cursor: pointer; white-space: nowrap; }
.theme:hover { background: var(--surface-2); }
.demo { background: var(--warn-bg); color: var(--ink); border-radius: 10px; padding: 10px 14px; margin: 0 0 12px; font-size: .95rem; }
.demo strong { color: var(--warn); }
.jump { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.jump a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-size: .95rem; font-weight: 550; }
.jump a:hover { background: var(--surface-2); color: var(--ink); }
/* The workbench menu: a few headings, and under the current one its screens. It wraps, never scrolls sideways. */
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.menu .groups { padding-bottom: 6px; }
.menu .subs { padding: 6px 0 10px; border-top: 1px solid var(--line); }
.menu a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-size: .95rem; font-weight: 550; }
.menu .groups a { font-weight: 650; color: var(--ink); }
.menu a:hover { background: var(--surface-2); color: var(--ink); }
.menu a[aria-current] { background: var(--brand); color: var(--on-brand); }

/* Sections */
main section { padding: 28px 0 8px; }
.lead { color: var(--ink-2); max-width: 70ch; }
.sec-head { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 6px; }
.sec-head h2 { margin: 0; }

/* Tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.tile .k { color: var(--ink-3); font-size: .85rem; margin: 0 0 4px; }
.tile .v { font-size: 1.45rem; font-weight: 650; margin: 0; font-variant-numeric: tabular-nums; }
.tile .s { color: var(--ink-2); font-size: .85rem; margin: 2px 0 0; }
.tile a { color: inherit; text-decoration: none; display: block; }
.tile.alert { background: var(--warn-bg); border-color: transparent; }

/* Pills */
.pill { display: inline-block; font-size: .78rem; font-weight: 650; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.p-good { color: var(--good); background: var(--good-bg); }
.p-warn { color: var(--warn); background: var(--warn-bg); }
.p-bad { color: var(--bad); background: var(--bad-bg); }
.p-calm { color: var(--ink-2); background: var(--surface-2); }

/* Reconciliation differences */
.diffs, .att { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.diff { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; grid-template-columns: minmax(150px, 1.1fr) 2.4fr minmax(260px, 1.5fr); gap: 8px 20px; align-items: start; }
.diff .what { margin: 4px 0 0; color: var(--ink-2); font-size: .92rem; }
.diff .pill { white-space: normal; }
.diff .hint { margin: 0; color: var(--ink); font-size: .95rem; }
.diff .hint + .hint { margin-top: 6px; }
.amounts { display: grid; grid-template-columns: auto auto; gap: 2px 14px; margin: 0; font-size: .92rem; }
.amounts dt { color: var(--ink-3); }
.amounts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.amounts .gap { font-weight: 650; color: var(--ink); }
.ties { color: var(--good); font-weight: 600; }

/* Needs a look */
.att li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.att .row { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.att p { margin: 4px 0 0; color: var(--ink-2); font-size: .95rem; }
.att p.notice { color: var(--warn); background: var(--warn-bg); border-radius: 8px; padding: 6px 10px; font-weight: 550; }

/* Segmented filter */
.seg { display: inline-flex; background: var(--surface-2); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { min-height: 44px; min-width: 44px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: inherit; font-size: .92rem; font-weight: 550; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }

/* Car cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-top: 12px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card .head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.card .desc { margin: 0; color: var(--ink); font-size: .98rem; }
.card .vin { margin: 0; color: var(--ink-3); }
.money { display: grid; grid-template-columns: 1fr auto; gap: 3px 0; margin: 0; font-size: .95rem; }
.money dt { color: var(--ink-2); }
.money dd { margin: 0; padding-left: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.money .total { font-weight: 650; color: var(--ink); border-top: 1px solid var(--line); padding-top: 4px; }
.money .gross { font-weight: 700; }
.money .indent { padding-left: 12px; color: var(--ink-3); }
.ops { background: var(--surface-2); border-radius: 8px; padding: 8px 10px; font-size: .86rem; color: var(--ink-2); }
.ops strong { color: var(--ink); font-weight: 600; }
.flags { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .86rem; }
.flags li { padding: 4px 8px; border-radius: 6px; }
.flags .attention { background: var(--warn-bg); color: var(--ink); }
.flags .info { background: var(--tint); color: var(--ink); }
details summary { cursor: pointer; color: var(--brand); font-size: .9rem; font-weight: 550; min-height: 44px; display: flex; align-items: center; }
.docs { list-style: none; margin: 0; padding: 0; font-size: .85rem; display: grid; gap: 6px; }
.docs li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; color: var(--ink-2); }
.docs .amt { color: var(--ink); font-variant-numeric: tabular-nums; }
.docs .rev { color: var(--bad); }

/* Trial balance */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
table.tb { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 520px; }
.tb th, .tb td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.tb th { color: var(--ink-3); font-weight: 600; font-size: .85rem; background: var(--surface-2); }
.tb td.n, .tb th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb tfoot td { font-weight: 700; border-bottom: 0; }
.tb .code { color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Footer */
.foot { padding-top: 24px; padding-bottom: 48px; color: var(--ink-2); font-size: .92rem; border-top: 1px solid var(--line); margin-top: 32px; }
.foot p { margin: 0 0 6px; }

/* GST worksheet (demo page and workbench) */
.pick { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 4px 0 12px; }
.pick label { font-weight: 600; }
.gst { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.gst > li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 2px 16px; min-width: 0; }
.gst > li.sub { margin-left: 20px; }
.gst summary { justify-content: space-between; gap: 12px; font-size: 1rem; padding: 6px 0; }
.gst summary .amt, .gst-cars .amt { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.gst-cars { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 12px; }
.gst-cars .row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: baseline; margin-bottom: 4px; }

/* Workbench forms */
.top-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.form { display: grid; gap: 14px; max-width: 680px; margin-top: 12px; }
.field { display: grid; gap: 4px; min-width: 0; }
.field label, fieldset legend { font-weight: 600; }
.hint { color: var(--ink-2); font-size: .9rem; margin: 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--ctrl); border-radius: 8px; min-height: 44px; padding: 8px 12px; width: 100%; max-width: 100%; }
.pick select { width: auto; }
/* The hint inside an empty box reads at 4.5 or better in both themes (the browser's own grey did not in dark). */
::placeholder { color: var(--ink-3); opacity: 1; }
fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 14px; margin: 0; min-width: 0; display: grid; gap: 8px; }
legend { padding: 0 4px; }
.choice { display: flex; gap: 8px; flex-wrap: wrap; }
.choice label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--ctrl); border-radius: 8px; cursor: pointer; font-weight: 550; }
.choice input { width: auto; min-height: 0; margin: 0; accent-color: var(--brand); }
.btn { min-height: 44px; padding: 0 20px; border-radius: 10px; border: 0; background: var(--brand); color: var(--on-brand); font: inherit; font-weight: 650; cursor: pointer; justify-self: start; }
.err { background: var(--bad-bg); color: var(--bad); border-radius: 10px; padding: 10px 14px; margin: 0; font-weight: 550; }
.ok { background: var(--good-bg); color: var(--good); border-radius: 10px; padding: 10px 14px; margin: 0; font-weight: 550; }
.check { background: var(--tint); color: var(--ink); border-radius: 10px; padding: 12px 14px; }
.check p { margin: 0 0 8px; }
.check .money { margin-bottom: 8px; }
.check .money dt { color: var(--ink); }
.jump a[aria-current="page"] { background: var(--surface-2); color: var(--ink); }
a.btn { display: inline-flex; align-items: center; text-decoration: none; }
.btn.alt { background: var(--surface); color: var(--brand); border: 1px solid var(--ctrl); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
.sub-h { margin: 24px 0 0; font-size: 1.05rem; }
.fixes { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: .92rem; color: var(--ink-2); }
.att .fixes li { border: 0; border-radius: 0; padding: 0; background: none; }

/* Printable documents (workbench): signing sheets, tax invoice, window notice, deal summary */
.doc { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; margin-top: 12px; max-width: 820px; min-width: 0; }
.doc h2 { font-size: 1.35rem; margin: 0 0 2px; }
.doc .doc-sub { color: var(--ink-2); margin: 0 0 6px; }
.doc .doc-demo { font-size: .85rem; font-weight: 650; color: var(--ink); margin: 0 0 12px; }
.doc h3 { margin: 18px 0 6px; font-size: 1rem; }
.doc-rows { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0; margin: 0; border-top: 1px solid var(--line); }
.doc-rows dt, .doc-rows dd { margin: 0; padding: 7px 8px 7px 0; border-bottom: 1px solid var(--line); min-width: 0; overflow-wrap: anywhere; }
.doc-rows dt { color: var(--ink-2); font-size: .92rem; }
.doc-rows dd { font-weight: 550; }
.doc-rows .cite { display: block; color: var(--ink-3); font-size: .8rem; font-weight: 400; }
.doc-rows .empty { color: var(--bad); font-weight: 600; }
.doc .banner { border: 3px solid var(--bad); color: var(--bad); background: var(--bad-bg); font-weight: 800; font-size: 1.15rem; letter-spacing: .02em; padding: 10px 14px; border-radius: 8px; margin: 8px 0 12px; }
.doc .missing { margin: 0 0 12px; padding-left: 20px; color: var(--ink); }
.sign { display: grid; gap: 18px; margin-top: 16px; }
.sign div { border-bottom: 1px solid var(--ink); padding-top: 28px; font-size: .9rem; color: var(--ink-2); }
.doc .notes { margin-top: 16px; font-size: .88rem; color: var(--ink-2); }
.screen-notes { margin-top: 12px; }
.doc-total dt, .doc-total dd { font-weight: 750; color: var(--ink); }
/* The car's own page: its journal entries, one small table each */
.doc .entry { margin-top: 10px; }
.doc .entry-h { margin: 0; padding: 8px 12px; font-size: .9rem; color: var(--ink-2); }
.doc .entry-h strong { color: var(--ink); }
.card .own { margin: 8px 0 0; }
.card .own a, .doc-rows a { display: inline-flex; align-items: center; min-height: 44px; color: var(--brand); font-weight: 550; }

/* Find (workbench): one search box under the menu, results grouped by kind */
.find { display: flex; gap: 8px; padding-bottom: 12px; }
.find input { flex: 1; min-width: 0; }
.find .btn { flex: none; }
.find-hits { list-style: none; margin: 8px 0 16px; padding: 0; display: grid; gap: 8px; }
.find-hits li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 4px 16px 10px; }
.find-hits a { display: inline-flex; align-items: center; min-height: 44px; color: var(--brand); font-weight: 650; }
.find-hits p { margin: 0; color: var(--ink-2); font-size: .92rem; overflow-wrap: anywhere; }
/* Today (workbench): one line per thing that needs a person, its count opening its rows */
.today { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.today > li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 2px 16px; }
.today summary, .today .none { justify-content: space-between; gap: 12px; font-size: 1rem; color: var(--ink); }
.today .none { display: flex; align-items: center; min-height: 44px; margin: 0; color: var(--ink-2); }
.today .pill { font-variant-numeric: tabular-nums; }
.today ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.today ul li { color: var(--ink-2); font-size: .95rem; }
.today ul strong { color: var(--ink); }
.today a { display: inline-flex; align-items: center; min-height: 44px; color: var(--brand); font-weight: 550; }
/* Stock ageing */
.ageing { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 12px 0; }

@media (max-width: 860px) {
  .diff { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  h1 { font-size: 1.4rem; }
  .top-row { flex-direction: column; gap: 8px; }
  .theme { align-self: flex-start; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tile { padding: 12px; }
  .tile .v { font-size: 1.15rem; }
  .cards { grid-template-columns: 1fr; }
  table.tb { min-width: 0; font-size: .86rem; }
  .tb th, .tb td { padding: 8px 8px; }
  .tb .dc { display: none; }
  .two { grid-template-columns: 1fr; }
  .gst > li.sub { margin-left: 10px; }
}
@media (max-width: 600px) {
  .doc { padding: 14px 12px; }
  .doc-rows { grid-template-columns: 1fr; }
  .doc-rows dt { border-bottom: 0; padding-bottom: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Print: a document page only, in black on white whatever theme is chosen.
   html:root:root outranks both dark theme blocks above. */
@media print {
  html:root:root {
  color-scheme: light;
  --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #FFFFFF; --line: #000000;
  --ink: #000000; --ink-2: #000000; --ink-3: #000000; --brand: #000000; --tint: #FFFFFF;
  --good: #000000; --good-bg: #FFFFFF; --warn: #000000; --warn-bg: #FFFFFF; --bad: #000000; --bad-bg: #FFFFFF;
  }
  .top, .foot, .noprint, .skip { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  .doc { border: 0; padding: 0; margin: 0; max-width: none; }
  .doc-rows { grid-template-columns: 1.4fr 1fr; }
  .sign div { break-inside: avoid; }
}

/* ---- Explain this number (lib/explain.js, design section 67): one block, added by the explain lane ----
   The "How?" control beside a figure (44 px target, keyboard reachable) and the panel it opens, tokens only. */
.explain-btn { min-height: 44px; min-width: 44px; margin-left: 6px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--ctrl); background: var(--surface); color: var(--brand);
  font: inherit; font-size: .85rem; font-weight: 650; cursor: pointer; vertical-align: middle; white-space: nowrap; }
.explain-btn:hover { background: var(--tint); }
.money dd .explain-btn, .doc-rows dd .explain-btn { margin-top: 2px; margin-bottom: 2px; }
dialog.explain { width: min(44rem, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); }
.explain-head { position: sticky; top: 0; z-index: 1; display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.explain-head h2 { margin: 0; font-size: 1.1rem; flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.explain-acts { display: flex; gap: 8px; }
.explain-body { padding: 12px 16px 16px; overflow-wrap: anywhere; }
.explain-body h3 { margin: 14px 0 6px; }
.explain-sum { list-style: none; margin: 0 0 8px; padding: 0; }
.explain-sum li { display: flex; gap: 12px; justify-content: space-between; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line); }
.explain-sum .explain-label { flex: 1 1 auto; min-width: 0; color: var(--ink-2); }
.explain-sum .explain-amt { flex: none; font-variant-numeric: tabular-nums; text-align: right; }
.explain-sum .explain-total { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--line); }
.explain-sum .explain-total .explain-label { color: var(--ink); }
.explain .banner { display: inline-block; border: 2px solid var(--bad); color: var(--bad); background: var(--bad-bg); font-weight: 700; padding: 6px 10px; border-radius: 8px; }
.explain .notice { color: var(--warn); background: var(--warn-bg); border-radius: 8px; padding: 6px 10px; font-weight: 550; }
.explain-rule { margin: 0 0 8px; padding: 8px 12px; border-left: 4px solid var(--brand); background: var(--surface-2); border-radius: 0 8px 8px 0; }
.explain-rule p { margin: 0 0 4px; }
.explain-entry { margin: 6px 0; }
.explain-entry summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--brand); font-weight: 600; }
.explain-entry .tb { min-width: 0; }
.explain-entry tr.counted td { font-weight: 700; color: var(--ink); }
.explain-records { margin: 0 0 8px; padding-left: 20px; }

/* A table heading that sorts its table (public/bench-switch.js, design sections 68 and 69). */
.sort-h { min-height: 44px; min-width: 44px; background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: inherit; cursor: pointer; text-align: inherit; }
.sort-h:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ==== The dealer's own books screens (public/books.js, design section 72). Existing tokens only. ==== */
.bk-sort { min-height: 44px; min-width: 44px; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; text-align: inherit; cursor: pointer; }
.bk-sort:hover { color: var(--ink); text-decoration: underline; }
.bk-tb th[aria-sort="ascending"] .bk-sort::after { content: " (first to last)"; font-weight: 500; }
.bk-tb th[aria-sort="descending"] .bk-sort::after { content: " (last to first)"; font-weight: 500; }
.btn.bk-mini { min-height: 44px; padding: 0 12px; font-size: .9rem; }
.bk-tile { display: block; width: 100%; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.bk-tile span { display: block; }
.bk-tile[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.bk-tile[aria-pressed="true"] .k, .bk-tile[aria-pressed="true"] .s { color: var(--on-brand); }
.bk-bad { color: var(--bad); font-weight: 600; }
.bk-tb tr.bk-head th { background: var(--surface-2); color: var(--ink); font-size: .95rem; }
.bk-tb tr.bk-total td { font-weight: 700; }
.bk-line { margin: 0 0 10px; }
.bk-close-list { margin: 6px 0; padding-left: 20px; }
#books-owed .tiles, #books-owed .scroll { margin: 10px 0; }
/* ==== END the dealer's own books ==== */

/* ==== Charts: charts drawn as inline SVG (public/charts.js, design section 77). Existing tokens only. ====
   Marks (bars, the line, dots) are --brand on --surface; text is --ink and --ink-2; the zero line is --ctrl. */
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 12px; margin: 12px 0; }
.chart { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin: 12px 0; min-width: 0; }
.charts .chart { margin: 0; }
.chart h3 { margin: 0 0 6px; }
.chart-draw { width: 100%; min-width: 0; }
.ch { display: block; }
.ch text { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 13px; fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.ch .ch-val { fill: var(--ink); font-weight: 650; }
.ch .ch-bar, .ch .ch-dot { fill: var(--brand); }
.ch .ch-other { fill: var(--surface); stroke: var(--brand); stroke-width: 2; }
.ch .ch-line { fill: none; stroke: var(--brand); stroke-width: 2.5; }
.ch .ch-axis { stroke: var(--ctrl); stroke-width: 1; }
.ch .ch-grid { stroke: var(--line); stroke-width: 1; }
.chart-sum { color: var(--ink-2); margin: 8px 0 0; font-size: .95rem; }
.chart .tb { min-width: 0; }
.chart-go { margin: 0; }
.chart-go a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 550; }
/* ==== END charts ==== */

/* LANE datain: the matching step and its answers (public/data-in.js) */
.din-match { display: grid; gap: 14px; min-width: 0; }
/* A grid item takes its widest table's width unless told otherwise: the answer's tables scroll inside their own box. */
.form > .check { min-width: 0; }
.din-seen { overflow-wrap: anywhere; }
.din-dup { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.check .scroll { margin: 8px 0; }
.check .btn { margin: 4px 0; }

/* ==== Ease of use (public/ease.js, design section 80) ==== */
.ease-group { border-top: 1px solid var(--line); }
.ease-group summary { gap: 8px; font-size: 1rem; }
.ease-group .ease-group-count { color: var(--ink-2); font-weight: 500; }
.ease-group > .field { margin: 0 0 12px; }
.ok .ease-next, .today .actions { margin: 8px 0 0; }
/* "Wrong? Correct it" under a saved answer (gaps 2.3 a): quiet, in the answer's own colour, underlined, 44 px tall. */
.ease-undo-row { display: inline-block; }
.ease-undo-row a { color: inherit; font-weight: 650; }
.ease-undo { min-height: 44px; padding: 0 2px; border: 0; background: none; color: inherit; font: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* The dealings book's sort buttons (gaps W7): the existing .seg look, wrapping on a narrow phone rather than squeezing. */
.ease-book-sort { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; margin: 4px 0 0; }
.ease-book-sort button { white-space: nowrap; }
/* Words on this screen (gaps W12): at the foot of each screen, closed until pressed. */
.ease-words { margin-top: 28px; border-top: 1px solid var(--line); max-width: 70ch; }
.ease-words dl { margin: 4px 0 8px; }
.ease-words dt { font-weight: 650; margin-top: 8px; }
.ease-words dd { margin: 0; color: var(--ink-2); }
/* "Type to narrow the list" over a list of records (gaps W8). */
.ease-find { max-width: 680px; margin: 12px 0 0; }
/* A box the form needs, left empty when it was sent (gaps W11): marked in the refusal colour, its words under it. */
[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.ease-need { color: var(--bad); font-size: .9rem; font-weight: 600; margin: 0; }
/* Two boxes side by side (gaps W9): when one label wraps to two lines its box sat lower than its neighbour's,
   so Tab from the left box went up to the right one. The pair now shares its rows (subgrid): the labels in one
   row, the boxes in the next, any hint or "Fill this in." under its own box. Wider screens only; a phone stacks them. */
@media (min-width: 601px) {
  .two { row-gap: 0; }
  .two > .field { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .two > .field > * + * { margin-top: 4px; }
}
/* A short header at phone width (gaps #3, second round): the menu's two rows each scroll sideways inside
   themselves (the page never does; ease.js scrolls the chosen item into its row), the made-up data note shows
   its first sentence on one line (the whole note stays in the page for a screen reader), the top buttons sit in
   one row, and the spacing is tighter. Targets stay 44 px. */
@media (max-width: 600px) {
  .top { padding-top: 10px; }
  .top-row { gap: 4px; }
  .top-row h1 { margin: 0; }
  .sub { margin: 0 0 6px; }
  .top-actions { flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 6px; }
  .demo { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; padding: 6px 12px; margin: 0 0 6px; font-size: .9rem; }
  .menu ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .menu li { flex: none; }
  .menu .groups { padding-bottom: 2px; }
  .menu .subs { padding: 2px 0 4px; }
  .find { padding-bottom: 8px; }
}
/* ==== END ease of use ==== */
/* ==== LANE paging: the search box over each list, "Show the next 50", and a picker's short list (public/paged.js) ==== */
.pg-search { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin: 0 0 12px; }
.pg-search .field { flex: 1 1 220px; }
.pg-search .btn { flex: none; }
.pg-says { margin: 8px 0; }
.pg-more { margin: 0 0 16px; }
.pg-pick { display: grid; gap: 4px; min-width: 0; }
.pg-list { list-style: none; margin: 0; padding: 4px; background: var(--surface); color: var(--ink); border: 1px solid var(--ctrl); border-radius: 8px; max-height: 320px; overflow-y: auto; }
.pg-list li { display: flex; align-items: center; min-height: 44px; padding: 6px 10px; border-radius: 6px; cursor: pointer; overflow-wrap: anywhere; }
.pg-list li:hover { background: var(--tint); color: var(--ink); }
.pg-list li[aria-selected="true"] { background: var(--brand); color: var(--on-brand); }
.pg-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ==== END LANE paging ==== */