:root {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --panel-2: #fafbfc;
  --ink: #14181f;
  --ink-2: #495261;
  --ink-3: #7b8494;
  --line: #e2e5ea;
  --line-2: #eceef2;
  --accent: #1c4fd8;
  --accent-soft: #e8eeff;
  --pos: #0d7a4a;
  --neg: #c02626;
  --warn: #a35b00;
  --warn-bg: #fff5e6;
  --fatal: #a5121b;
  --fatal-bg: #fdecec;
  --ok-bg: #e9f7f0;
  --hl: #fff3c9;
  --hl-line: #e0a300;
  --hl-2: #fffaeb;
  --hl-line-2: #f0d9a0;
  --drw: #f2f5fb;
  --drw-line: #d3ddf2;
  --sel: rgba(28, 79, 216, .045);
  --sel-head: #e8eeff;
  --radius: 8px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  /* formulas are set in a serif face, the way mathematics is set everywhere else */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sunk: #f7f8fa;
}
[data-theme="dark"] {
  --sunk: #1b2028;
  --bg: #0e1116;
  --panel: #161a21;
  --panel-2: #1b2028;
  --ink: #e8ecf2;
  --ink-2: #a8b2c1;
  --ink-3: #6e7887;
  --line: #262c36;
  --line-2: #1f242c;
  --accent: #5b8cff;
  --accent-soft: #1b2540;
  --drw: #1a2130;
  --drw-line: #313b4d;
  --sel: rgba(91, 140, 255, .07);
  --sel-head: #1b2540;
  --pos: #3ec98a;
  --neg: #ff7373;
  --warn: #e0a34a;
  --warn-bg: #2c2314;
  --fatal: #ff8a8a;
  --fatal-bg: #33191a;
  --ok-bg: #14291f;
  --hl: #3d3517;
  --hl-line: #b48b1c;
  --hl-2: #262112;
  --hl-line-2: #4d411f;
}

* { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0; height: 100%; background: var(--bg); color: var(--ink);
  font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; overflow: hidden;
}
button, input, select { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }

/* Two independently scrolling panes. `min-height: 0` on both the shell and its
   children is what actually lets them shrink and scroll instead of overflowing
   their parent — without it the sidebar clips its own content. */
.shell { flex: 1 1 auto; min-height: 0; display: flex; gap: 16px; padding: 16px;
  overflow: hidden; justify-content: center; }
/* capped, so on a wide monitor the figures stay near their labels instead of
   the statement stretching out into a gulf of whitespace */
.main {
  flex: 1 1 auto; min-width: 0; max-width: 1180px; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 14px; padding-right: 4px;
}
.side {
  flex: 0 0 400px; min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 12px; padding-right: 4px;
}
.main::-webkit-scrollbar, .side::-webkit-scrollbar { width: 10px; }
.main::-webkit-scrollbar-thumb, .side::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 5px; border: 3px solid var(--bg);
}
.main::-webkit-scrollbar-thumb:hover, .side::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* ------------------------------------------------------------------ header */
header {
  flex: 0 0 auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 18px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 650; font-size: 15px; letter-spacing: -0.2px; white-space: nowrap; }
.brand span { color: var(--ink-3); font-weight: 400; margin-left: 8px; font-size: 12.5px; }
.hspace { flex: 1; }
.hgroup { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.hbtn {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px;
  padding: 5px 11px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap;
}
.hbtn:hover { border-color: var(--accent); color: var(--accent); }
.hbtn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
/* A toggle whose setting is real and saved, but which has nothing to act on
   yet. Dimmed rather than recoloured, so it composes with .on instead of
   fighting it: the button still shows honestly whether it is on or off, and
   the fade says only that the setting is not biting on anything right now. */
.hbtn.idle { opacity: 0.45; }
.hbtn.idle:hover { opacity: 0.7; }
.hsep { width: 1px; height: 20px; background: var(--line); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 550;
  background: var(--ok-bg); color: var(--pos); white-space: nowrap;
}
.badge.bad { background: var(--fatal-bg); color: var(--fatal); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* -------------------------------------------------------------------- cards */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; flex: none; min-width: 0; }
.card > h2 {
  margin: 0; padding: 10px 12px; font-size: 13px; font-weight: 620;
  border-bottom: 1px solid var(--line); background: var(--panel-2);
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.card.folded > h2 { border-bottom: none; }
.card > h2 .sub { font-weight: 400; color: var(--ink-3); font-size: 12px; overflow-wrap: anywhere; }
.card > h2 .ttl { display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1; min-width: 0; }
.card > h2 .ttl:hover { color: var(--accent); }
.fold { color: var(--ink-3); font-size: 10px; width: 10px; flex: none; }
.cardbtn {
  background: none; border: 1px solid var(--line); border-radius: 5px; padding: 3px 8px;
  font-size: 11px; color: var(--ink-3); white-space: nowrap;
}
.cardbtn:hover { border-color: var(--accent); color: var(--accent); }
.cardbtn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* --------------------------------------------------------------- statements */
/* `overflow-x: auto` here would make this the scroll container, which silently
   breaks the sticky column headings below — so it is only turned on when the
   table genuinely cannot fit. */
.stmtwrap { overflow-x: visible; }
@media (max-width: 900px) { .stmtwrap { overflow-x: auto; } }
/* fixed layout clips rather than overflows, so let long labels wrap when the
   column gets tight instead of losing their ends */
@media (max-width: 1150px) { table.stmt td.lbl { white-space: normal; } }
/* Fixed layout with a set width per figure column, so Q1..FY land on exactly the
   same x-position in all three statements and the eye can run straight down a
   quarter from revenue to closing cash. The label column takes what is left. */
table.stmt { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums;
  table-layout: fixed; min-width: 660px; }
/* proportional, so the figures stay near their labels on a wide screen instead
   of the label column soaking up every spare pixel */
table.stmt thead th { width: 13.2%; }
table.stmt thead th:first-child { width: 34%; }
table.stmt th, table.stmt td { padding: 3.5px 12px; --pt: 3.5px; --pb: 3.5px; }
/* a hairline between the words and the figures, and again before the full year */
table.stmt td.lbl, table.stmt thead th:first-child { border-right: 1px solid var(--line-2); }
table.stmt td.fy, table.stmt th.fy { border-left: 1px solid var(--line); }

/* the quarter currently selected in the sidebar, tinted down every statement */
table.stmt thead th {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3); text-align: right; border-bottom: 1px solid var(--line);
  padding-top: 8px; padding-bottom: 8px; background: var(--panel);
  position: sticky; top: 0; z-index: 3;
}
/* the headings sit against the scrolling pane, so give them an edge to land on */
table.stmt thead th::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--line);
}
table.stmt thead th:first-child { text-align: left; }
table.stmt thead th.bankrupt { color: var(--fatal); }
/* ---------------------------------------------------------------------------
   Statement hierarchy. Indentation comes from a single depth variable set on
   each row, so every level lines up regardless of which statement it is in:

     d0  section caption, and the running totals of the statement
     d1  a collapsible collection, and the subtotal that closes it
     d2  a line inside a collection, or a nested collection
     d3  a line inside a nested collection
     d4  the entries behind an expanded line

   A COLLECTION (something that folds its members away) is marked with a
   chevron. An EXPANDABLE LINE (a real account that opens into the entries
   that produced it) is marked with a plus in a circle. The two must never be
   confused for one another.
--------------------------------------------------------------------------- */
table.stmt { --step: 18px; --gutter: 20px; }
td.lbl { text-align: left; white-space: nowrap; color: var(--ink-2); position: relative;
  font-size: 13px; }
td.lbl.d0 { --d: 0; } td.lbl.d1 { --d: 1; } td.lbl.d2 { --d: 2; }
td.lbl.d3 { --d: 3; } td.lbl.d4 { --d: 4; }
/* the depth of the COLLECTION a subtotal closes, so its corner marker lands in
   that collection's gutter column rather than in its own */
td.lbl.gd0 { --gd: 0; } td.lbl.gd1 { --gd: 1; } td.lbl.gd2 { --gd: 2; }
td.lbl.gd3 { --gd: 3; } td.lbl.gd4 { --gd: 4; }
/* must out-rank the `table.stmt td { padding }` shorthand above, or every
   level collapses to the same left edge */
table.stmt td.lbl { padding-left: calc(var(--gutter) + var(--d, 0) * var(--step)); }
/* The marker sits in the gutter immediately left of its own text — and level
   with that text, not with the middle of the cell.

   Those are not the same thing. An absolutely-positioned marker is placed
   against the cell's PADDING box, so `top: 50%` centres it on the box; the
   moment a row carries uneven padding — extra space above a heading that
   follows a total, say — the text sits low in that box and the marker floats
   away above it. Every row that changes its padding therefore declares it, and
   the marker offsets by half the difference, which is exactly how far the text
   moved. */
td.lbl::before { left: calc(2px + var(--d, 0) * var(--step)); }
/* Half the difference between top and bottom padding is exactly how far the
   text sits below the middle of the cell, so that is how far each marker moves.
   Spelled out at every use rather than hidden behind one custom property: a
   custom property resolves its own var()s against the element that DECLARES
   it, so `--level` on the table would have frozen the table's padding into
   every row and the correction would silently have been zero everywhere. */
td.num { text-align: right; font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }

/* -- section caption: the three top-level divisions -- */
tr.cap td { padding-top: 20px; padding-bottom: 5px; --pt: 20px; --pb: 5px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.11em; color: var(--ink-3);
  border-bottom: 1px solid var(--line); }
tr.cap + tr td { padding-top: 7px; --pt: 7px; }

/* -- collection: chevron, folds its members away -- */
/* a collection heading is never smaller than the lines it contains */
tr.hdr td { font-size: 13px; font-weight: 650; color: var(--ink); padding-top: 9px; --pt: 9px; }
tr.hdr.nest td { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
tr.hdr td.lbl { cursor: pointer; user-select: none; }
tr.hdr td.lbl::before {
  content: "▾"; position: absolute; font-size: 11px; color: var(--ink-2);
  top: calc(50% + (var(--pt, 3.5px) - var(--pb, 3.5px)) / 2); transform: translateY(-50%); width: 14px; text-align: center;
  line-height: 1;
}
tr.hdr.fold td.lbl::before { content: "▸"; color: var(--accent); }
tr.hdr:hover td { background: var(--panel-2); }
tr.hdr:hover td.lbl, tr.hdr:hover td.lbl::before { color: var(--accent); }
tr.hdr .cnt { font-weight: 400; color: var(--ink-3); font-size: 10.5px; font-style: italic; margin-left: 6px; }

/* -- expandable line: circled plus, opens into the entries behind it -- */
tr.acct td { color: var(--ink-2); }
tr.acct td.lbl { cursor: pointer; }
tr.acct td.lbl::before {
  content: "+"; position: absolute; top: calc(50% + (var(--pt, 3.5px) - var(--pb, 3.5px)) / 2);
  transform: translateY(-50%); width: 13px; height: 13px; line-height: 11px;
  border: 1px solid currentColor; border-radius: 50%; font-size: 9px; font-weight: 700;
  color: var(--ink-3); text-align: center; opacity: .35; transition: opacity .12s;
}
tr.acct:hover td { background: var(--panel-2); }
tr.acct:hover td.lbl::before { opacity: .9; }
tr.acct.open td.lbl::before { content: "−"; opacity: 1; color: var(--accent); }
tr.acct.open td.lbl { color: var(--ink); font-weight: 600; }
tr.acct.open td { background: var(--drw); }

/* -- subtotals: weight rises with the level they close -- */
tr.sub td { border-top: 1px solid var(--line-2); font-weight: 600; color: var(--ink); }
tr.sub td.lbl { color: var(--ink); font-size: 13px; }
tr.sub.run td { border-top: 1px solid var(--ink-3); font-weight: 650; }
tr.sub.strong td { border-top: 1.5px solid var(--ink-3); border-bottom: 3px double var(--ink-3);
  font-weight: 700; padding-top: 5px; padding-bottom: 5px; --pt: 5px; --pb: 5px; }
tr.sub.strong td.lbl { font-size: 13.5px; }

/* ---------------------------------------------------------------------------
   TYING A TOTAL TO ITS SECTION.

   A subtotal that closes a collection used to float free of it: bigger type
   than the heading it belonged to, a full-width rule above that read as a
   divider, and — for three of them — a shallower indent, so it looked like a
   title for whatever came next rather than the sum of what came before.

   Three things fix it, and they reinforce each other. The subtotal now sits at
   its collection's own indent. It carries a corner marker in that collection's
   gutter column, directly below the chevron, so the block is bracketed top and
   bottom. And hovering either end tints every row between them.
--------------------------------------------------------------------------- */
tr.sub.closer td.lbl::before {
  content: "\2514"; position: absolute; top: calc(50% + (var(--pt, 3.5px) - var(--pb, 3.5px)) / 2); transform: translateY(-55%);
  left: calc(2px + var(--gd, 0) * var(--step)); width: 14px; text-align: center;
  font-size: 12px; line-height: 1; color: var(--ink-3); opacity: .55;
}
/* space after a closed collection, so the total belongs to what is above it
   and the next heading reads as a fresh start */
tr.sub.closer + tr.hdr td { padding-top: 16px; --pt: 16px; }
tr.sub.closer + tr.cap td { padding-top: 22px; --pt: 22px; }

/* No hover tint on a section. It was added to tie a total to its heading, but
   it turns moving the pointer across a statement into a light show — and the
   indent and the corner marker already say the same thing, permanently. */

/* -- a folded collection is ONE line -- it carries the total that closes it,
      rather than leaving the same figure stranded on a second row underneath a
      header with nothing against it. Expanded, header and subtotal are two
      different things and both are drawn. -- */
tr.hdr.merged td { border-top: 1px solid var(--line-2); color: var(--ink); }
tr.hdr.merged + tr.hdr td { padding-top: 16px; --pt: 16px; }
tr.hdr.merged + tr.cap td { padding-top: 22px; --pt: 22px; }
tr.hdr.merged td.num { font-weight: 650; }
tr.hdr.merged.run td { border-top: 1px solid var(--ink-3); }
tr.hdr.merged.strong td { border-top: 1.5px solid var(--ink-3);
  border-bottom: 3px double var(--ink-3); font-weight: 700; }

tr.spacer td { height: 10px; padding: 0; }
tr.memo td { color: var(--ink-3); font-size: 11.5px; font-style: italic; }
tr.chk td { font-size: 11px; color: var(--pos); border-top: 1px dotted var(--line); font-style: italic; }
tr.chk.bad td { color: var(--fatal); font-weight: 600; font-style: normal; }

/* the full-year column restates the quarters, so mute it */
table.stmt th.fy, td.num.fy { color: var(--ink-3); background: var(--panel-2); }
tr.sub.strong td.num.fy, tr.sub.run td.num.fy { color: var(--ink); }

/* The change highlight must out-rank the selected-quarter tint, or a changed
   figure looks different depending on which quarter happens to be selected.
   Two weights: full amber where the action's own entry landed, a fainter wash
   where the figure moved only through what that entry set off. */
table.stmt td.num.chg { background: var(--hl); box-shadow: inset 0 0 0 1px var(--hl-line);
  border-radius: 3px; }
table.stmt td.num.chg2 { background: var(--hl-2); box-shadow: inset 0 0 0 1px var(--hl-line-2);
  border-radius: 3px; }
td.num.chg2 .delta { opacity: .8; }
.delta { display: block; font-size: 10px; line-height: 1.25; font-weight: 600; }
.delta.up { color: var(--pos); } .delta.dn { color: var(--neg); }
/* mute nil cells with colour only — opacity here would make the cell its own
   stacking context and wash out the row background behind it */
td.num.zero { color: var(--ink-3); }

/* -- the entries behind an expanded line: one tinted block, tied back to the
      line it belongs to by a rail running under that line's own marker -- */
tr.drw td { background: var(--drw); font-size: 11.5px; padding-top: 2.5px; padding-bottom: 2.5px;
  --pt: 2.5px; --pb: 2.5px; border: none; }
tr.drw td.lbl { color: var(--ink-2); font-weight: 400; }
tr.drw td.lbl::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 2px;
  left: calc(8px + (var(--d, 1) - 1) * var(--step)); background: var(--drw-line);
}
tr.drw td.num { font-size: 11.5px; color: var(--ink-2); }

/* the column headings of the breakdown, and its opening/closing bookends */
tr.drw.head td, tr.drw.dhead td { font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3); font-weight: 600; padding-top: 10px; --pt: 10px; }
tr.drw.dhead td { border-top: 1px solid var(--drw-line); }

/* the causal chain: the action's own entry, then what it set off, indented */
tr.drw.ditem td { color: var(--ink); }
tr.drw.knock td { color: var(--ink-2); }
tr.drw.knock td.lbl::after {
  content: "\21B3"; position: absolute; color: var(--ink-3); font-size: 11px;
  left: calc(var(--gutter) + (var(--d, 1) - 1) * var(--step)); top: calc(50% + (var(--pt, 3.5px) - var(--pb, 3.5px)) / 2);
  transform: translateY(-50%);
}
tr.drw.dclose td { border-top: 1px solid var(--drw-line); font-weight: 650; color: var(--ink); }
tr.drw.open td, tr.drw.close td { font-weight: 650; color: var(--ink); }
tr.drw.open td { border-bottom: 1px dotted var(--drw-line); }
tr.drw.close td { border-top: 1px solid var(--drw-line); }
tr.drw.none td { color: var(--ink-3); font-style: italic; }
tr.drw.hl td { background: var(--hl); }

/* the explanatory line reads as prose, so let it wrap and give it room */
tr.drw.note td { color: var(--ink-3); font-size: 11px; white-space: normal;
  line-height: 1.55; font-style: italic; padding-top: 7px; padding-bottom: 7px;
  --pt: 7px; --pb: 7px; padding-right: 18px; }
.ntag {
  display: inline-block; margin-right: 7px; padding: 1px 6px; border-radius: 3px;
  background: var(--accent-soft); color: var(--accent); font-style: normal;
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  vertical-align: 1px;
}

/* round the block off top and bottom so it reads as one object */
tr.acct.open td:first-child { border-top-left-radius: 5px; }
tr.acct.open td:last-child { border-top-right-radius: 5px; }
tr.drw.last td { padding-bottom: 9px; --pb: 9px; }
tr.drw.last td:first-child { border-bottom-left-radius: 5px; }
tr.drw.last td:last-child { border-bottom-right-radius: 5px; }

/* expansion drawer */
tr.detail > td { padding: 0; background: var(--panel-2); }
.drawer { padding: 10px 14px 12px 26px; border-left: 2px solid var(--accent); margin: 4px 12px 8px 22px; }
.drawer h4 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; }
.drawer .hint { color: var(--ink-2); font-size: 12.5px; margin: 0 0 10px; max-width: 78ch; }
table.tx { width: 100%; border-collapse: collapse; font-size: 12px; }
table.tx td, table.tx th { padding: 3px 8px; text-align: left; vertical-align: top; }
table.tx th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); border-bottom: 1px solid var(--line); }
table.tx td.n { text-align: right; font-family: var(--mono); white-space: nowrap; }
table.tx tr.hl td { background: var(--hl); }
table.tx tr.tot td { border-top: 1px solid var(--line); font-weight: 600; }
.tag { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 10px;
  background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tag.auto { background: var(--warn-bg); color: var(--warn); }

/* popped-out placeholder */
.popped { padding: 26px 16px; text-align: center; color: var(--ink-3); font-size: 13px; }
.popped button { margin-top: 10px; }
body.popout { display: block; overflow: auto; height: auto; padding: 14px; }
body.popout .card { margin: 0 auto; max-width: 1100px; }

/* ------------------------------------------------------------- change panel */
.impact { display: flex; flex-wrap: wrap; }
.impact .kpi { flex: 1 1 130px; padding: 10px 14px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.impact .kpi .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.impact .kpi .v { font-family: var(--mono); font-size: 15px; font-weight: 600; margin-top: 1px; }
.impact .kpi .v.up { color: var(--pos); } .impact .kpi .v.dn { color: var(--neg); }
.walk { padding: 11px 14px; font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.walk ul { margin: 6px 0 0; padding-left: 18px; }
.walk li { margin-bottom: 3px; }
/* the step a run of notes belongs to, when one entry covers several */
.walk .nhead {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 650; color: var(--ink-3); margin: 11px 0 1px;
}
.walk .nhead:first-child { margin-top: 2px; }
.walk .tipbox { margin-top: 9px; padding: 10px 12px; background: var(--accent-soft); border-radius: 6px;
  color: var(--ink); font-size: 12.5px; line-height: 1.55; }
.walk .tipbox b { color: var(--accent); }

/* ------------------------------------------------------------------- alerts */
.alert {
  padding: 9px 14px; font-size: 12.5px; display: flex; gap: 9px; align-items: baseline;
  flex-wrap: wrap; border-bottom: 1px solid var(--line-2);
}
.alert > span:last-child { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.alert:last-child { border-bottom: none; }
.alert .code { font-weight: 700; font-size: 11px; letter-spacing: .04em; white-space: nowrap; }
.alert.fatal { background: var(--fatal-bg); color: var(--fatal); }
.alert.warn { background: var(--warn-bg); color: var(--warn); }
.alert .q { font-family: var(--mono); font-size: 11px; opacity: .8; }

/* ----------------------------------------------------------------- timeline */
.tl { display: flex; align-items: stretch; overflow-x: auto; }
.tlq { flex: 1 1 0; min-width: 210px; border-right: 1px solid var(--line-2); display: flex; flex-direction: column; }
.tlq:last-child { border-right: none; }
.tlq.sel { background: var(--accent-soft); box-shadow: inset 0 2px 0 var(--accent); }
.tlq.bank { background: var(--fatal-bg); }
.tlqh {
  padding: 9px 12px; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; gap: 8px;
  cursor: pointer; font-size: 12px;
}
.tlqh:hover { color: var(--accent); }
.tlqh b { font-size: 13px; }
.tlqh .n { color: var(--ink-3); }
.tlqh .fold { margin-left: auto; }
.tlbody { padding: 8px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.chip {
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel); padding: 6px 8px;
  font-size: 11.5px; cursor: pointer; position: relative;
}
.chip:hover { border-color: var(--accent); }
.chip.on { border-color: var(--accent); background: var(--accent-soft); }
.chip.hl { border-color: var(--hl-line); background: var(--hl); }
.chip .cn { font-weight: 600; color: var(--ink); display: block; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip .cp { color: var(--ink-3); font-size: 10.5px; display: block; margin-top: 2px; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; }
.chip .ord {
  position: absolute; right: 5px; top: 5px; color: var(--ink-3); font-size: 9px; font-family: var(--mono);
  background: var(--panel-2); border-radius: 3px; padding: 0 4px; line-height: 14px;
}
.chip.auto { border-style: dashed; opacity: .8; cursor: default; }
.tlempty { color: var(--ink-3); font-size: 11.5px; padding: 6px 4px; text-align: center; }
.tlclose { border-top: 1px dashed var(--line); margin-top: auto; padding: 7px; }
.tlclose .h { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; margin-bottom: 5px; }
.stepline { display: flex; align-items: center; gap: 6px; font-size: 11.5px; padding: 2px 0; color: var(--ink-2); }
.stepline input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--accent); flex: none; }
.stepline .sn { flex: 1; cursor: pointer; }
.stepline.on .sn { color: var(--ink); font-weight: 550; }
/* selected, in the same amber the timeline uses for the highlighted action —
   the close is picked out the same way anything else on the timeline is */
.stepline .sn { border-radius: 4px; padding: 1px 4px; margin-left: -4px; }
.stepline .sn:hover { background: var(--line-2); }
.stepline.hl .sn, .stepline.hl .sn:hover { background: var(--hl); box-shadow: inset 0 0 0 1px var(--hl-line); }
.stepfields { padding: 3px 0 5px 20px; display: flex; flex-direction: column; gap: 4px; }
.stepfields .r { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-3); }
.stepfields .r label { flex: 1; }
.stepfields .r input { width: 58px; padding: 2px 5px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--panel); text-align: right; font-family: var(--mono); font-size: 11px; }
.stepfields .r .u { width: 16px; flex: none; }
.substeps { margin: 3px 0 0 4px; padding-left: 12px; border-left: 2px solid var(--line); }
.stepline.forced { color: var(--ink-3); }
.stepline.forced .sn { cursor: pointer; }
.stepline .tick { color: var(--pos); font-size: 11px; width: 14px; flex: none; text-align: center; }
.stepnote { font-size: 10.5px; color: var(--ink-3); line-height: 1.45; padding: 4px 0 2px; font-style: italic; }

.editor { padding: 12px 14px 14px; border-top: 2px solid var(--accent); background: var(--panel-2); }
.editor .eh { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.editor .eh b { font-size: 12.5px; }
.editor .eh .q { font-size: 11px; color: var(--ink-3); font-family: var(--mono); }
.editor .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 280px)); gap: 4px 20px; }
.editor .row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.editor .row label { flex: 1; min-width: 0; font-size: 12px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor .row input, .editor .row select {
  width: 104px; flex: none; padding: 4px 7px; border: 1px solid var(--line); border-radius: 5px;
  background: var(--panel); text-align: right; font-family: var(--mono); font-size: 12px;
}
.editor .row select, .editor .row input[type=text] { text-align: left; font-family: var(--sans); }
.editor .row input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent); }
.editor .row .unit { width: 40px; flex: none; font-size: 11px; color: var(--ink-3); }
.ebar { display: flex; flex-direction: row; align-items: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.emove { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px 2px 9px; background: var(--panel); }
.emove select { border: none; background: none; font-size: 12px; padding: 3px 2px; color: var(--ink); }
.ebtn { border: 1px solid var(--line); background: var(--panel); border-radius: 5px; padding: 5px 11px; font-size: 12px; color: var(--ink-2); }
.ebtn:hover { border-color: var(--accent); color: var(--accent); }
.ebtn.danger:hover { border-color: var(--neg); color: var(--neg); }
.ebtn.prim { background: var(--accent); border-color: var(--accent); color: #fff; }
.ebtn.prim:hover { filter: brightness(1.08); color: #fff; }

/* -------------------------------------------------------------------- modal */
.modal { position: fixed; inset: 0; z-index: 100; display: none; }
.modal.open { display: block; }
.modal-back { position: absolute; inset: 0; background: rgba(10, 14, 20, .55); backdrop-filter: blur(2px); }
.modal-panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(940px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
}
.modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0 0 4px; font-size: 15px; font-weight: 650; }
.modal-head p { margin: 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; max-width: 62ch; }
.modal-x { background: none; border: none; font-size: 22px; line-height: 1; color: var(--ink-3);
  padding: 0 4px; margin-left: auto; }
.modal-x:hover { color: var(--accent); }
.hbtn.prim { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.hbtn.prim:hover { filter: brightness(1.08); color: #fff; }

/* ------------------------------------------------------------------ profiles */
#profiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px; padding: 16px 18px 18px;
}
.prof {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--line); border-radius: 9px; padding: 13px 14px 14px;
  background: var(--panel-2);
}
.prof:hover { border-color: var(--accent); }
/* name and sector stack, so a long sector name cannot wrap the title */
.prof .phead { display: flex; flex-direction: column; gap: 2px; }
.prof .pn { font-weight: 650; font-size: 13.5px; color: var(--ink); }
.prof .ps { font-size: 10px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .06em; }
.prof .pblurb { font-size: 12px; color: var(--ink-2); line-height: 1.55; }
.prof .pwatch {
  font-size: 11.5px; color: var(--ink); background: var(--accent-soft);
  border-radius: 6px; padding: 8px 10px; line-height: 1.5;
}
.prof .pwatch b { color: var(--accent); }
.prof .pload {
  margin-top: auto; padding: 8px; border-radius: 6px; border: none;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 12.5px;
}
.prof .pload:hover { filter: brightness(1.08); }

/* ------------------------------------------------------------------ sidebar */
.periods { display: flex; gap: 6px; padding: 12px; }
.periods button {
  flex: 1; padding: 9px 0; border-radius: 6px; border: 1px solid var(--line);
  background: var(--panel-2); font-weight: 600; font-size: 13px; color: var(--ink-2); transition: all .12s;
}
.periods button:hover { border-color: var(--accent); }
.periods button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.periods button.bk { border-color: var(--fatal); color: var(--fatal); }
.periods button.on.bk { background: var(--fatal); color: #fff; }
.periodnote { padding: 0 12px 12px; font-size: 12px; color: var(--ink-3); }

.cat { border-bottom: 1px solid var(--line-2); }
.cat:last-child { border-bottom: none; }
.cat > button { width: 100%; text-align: left; background: none; border: none; padding: 10px 12px;
  display: flex; align-items: center; gap: 8px; }
.cat > button:hover { background: var(--panel-2); }
.cat .cname { font-weight: 600; font-size: 13px; }
.cat .ctag { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px;
  border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-3); white-space: nowrap; }
.cat.open > button .cname { color: var(--accent); }
.cat .cblurb { padding: 0 12px 10px; font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.cat .chev { margin-left: auto; color: var(--ink-3); font-size: 10px; }

.acts { padding: 0 8px 8px; display: flex; flex-direction: column; gap: 2px; }
.acts > button { text-align: left; background: none; border: none; border-radius: 6px;
  padding: 7px 10px; font-size: 12.5px; color: var(--ink-2); line-height: 1.35; }
.acts > button:hover { background: var(--accent-soft); color: var(--accent); }
.acts > button.on { background: var(--accent); color: #fff; }
.acts > button .once { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; opacity: .7; }

.form { margin: 2px 4px 10px; padding: 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; }
.form .fdesc { font-size: 12.5px; color: var(--ink-2); margin-bottom: 10px; line-height: 1.5; }
.form .row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.form .row label { flex: 1; font-size: 12.5px; color: var(--ink-2); }
.form .row input[type=number], .form .row input[type=text], .form .row select {
  width: 112px; flex: none; padding: 5px 8px; border: 1px solid var(--line);
  border-radius: 5px; background: var(--panel); text-align: right; font-family: var(--mono); font-size: 12.5px;
}
.form .row select, .form .row input[type=text] { text-align: left; font-family: var(--sans); }
.form .row input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }
.form .row .unit { width: 44px; flex: none; font-size: 11.5px; color: var(--ink-3); }
.form .apply { width: 100%; margin-top: 8px; padding: 9px; border-radius: 6px; border: none;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 13px; }
.form .apply:hover { filter: brightness(1.08); }
.form .tipbox { margin-top: 10px; padding: 9px 11px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; font-size: 12px; color: var(--ink-2); line-height: 1.55; }
.form .tipbox b { color: var(--accent); display: block; margin-bottom: 3px; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .06em; }

.setrow { display: flex; align-items: center; gap: 8px; padding: 4px 12px; font-size: 12.5px; color: var(--ink-2); }
.setrow label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setrow label { flex: 1; }
.setrow input { width: 92px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 5px;
  background: var(--panel-2); text-align: right; font-family: var(--mono); font-size: 12px; }
.setrow input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }
.setrow .unit { width: 26px; flex: none; font-size: 11px; color: var(--ink-3); }

@media (max-width: 1180px) {
  body { height: auto; overflow: visible; }
  .shell { flex-direction: column; overflow: visible; padding: 12px; }
  .main, .side { overflow: visible; flex: 0 0 auto; width: 100%; min-height: 0; }
  header { position: sticky; top: 0; z-index: 40; }
}

/* ------------------------------------------------------------- narrow screens
   The sidebar gives way first, then the two panes stack. Without this the
   400px sidebar plus the statement's minimum width push the page sideways. */
@media (max-width: 1280px) { .side { flex-basis: 340px; } }
@media (max-width: 1120px) {
  .side { flex-basis: 300px; }
  .shell { gap: 10px; padding: 10px; }
}
@media (max-width: 980px) {
  body { overflow: auto; }
  .shell { flex-direction: column; overflow: visible; height: auto; }
  .main, .side { overflow: visible; flex: none; }
  .side { flex-basis: auto; }
}

/* ------------------------------------------------------------------ glossary
   Any abbreviation the interface uses explains itself on hover, wherever it
   appears — statement lines, action descriptions, interview and standards
   notes. Statement lines carry their own explanation the same way. */
.gl {
  border-bottom: 1px dotted var(--ink-3); cursor: help;
  text-decoration: none; white-space: nowrap;
}
.gl:hover { border-bottom-color: var(--accent); color: var(--accent); }
td.lbl[data-tip] { cursor: help; }

/* One format for both kinds: a title in the accent colour, then prose, then —
   where the text carries them — tab-separated rows laid out as label and
   figure. A line description and an abbreviation must read as the same object. */
.tip {
  position: fixed; z-index: 400; display: none;
  width: max-content; max-width: 380px; padding: 11px 13px 12px;
  background: var(--panel); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .24), 0 2px 6px rgba(0, 0, 0, .08);
  font: 400 12px/1.6 var(--sans); font-style: normal;
  text-align: left; text-transform: none; letter-spacing: normal;
  white-space: normal;
  /* it can be pointed at and read from: entering it holds it open, and the text
     inside is selectable so a working can be copied out */
  pointer-events: auto; user-select: text; -webkit-user-select: text; cursor: auto;
}
.tip.on { display: block; animation: tipin .13s ease-out; }
@keyframes tipin { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.tip b {
  display: block; padding-bottom: 6px; margin-bottom: 7px; color: var(--accent);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--line-2);
}
.tip .tp { display: block; }
.tip .tp + .tp { margin-top: 7px; }
/* a small heading inside the body — "How to get there" above the arithmetic */
.tip .th {
  display: block; margin: 9px 0 4px; color: var(--ink-3);
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
/* label on the left, figure on the right: the shape arithmetic wants */
.tip .tr { display: flex; gap: 18px; justify-content: space-between; align-items: baseline;
  padding: 2px 0; line-height: 1.45; }
.tip .tr + .tp { margin-top: 7px; }
.tip .tr .tk { color: var(--ink-2); }
.tip .tr .tv { font-family: var(--mono); font-size: 11.5px; color: var(--ink); white-space: nowrap; }
.tip .tr:last-child .tk, .tip .tr:last-child .tv { font-weight: 650; color: var(--ink); }

/* ----------------------------------------------------------------- equations
   A formula is set as a formula: its own tinted box, a real division bar, and
   a serif face that reads as mathematics rather than as another sentence. The
   box is what separates it from the prose around it at a glance. */
.teq {
  display: block; margin: 8px 0; padding: 7px 11px;
  background: var(--sunk); border: 1px solid var(--line-2); border-left: 2px solid var(--accent);
  border-radius: 6px;
  font-family: var(--serif, Georgia, 'Times New Roman', serif);
  font-size: 12.5px; line-height: 1.35; color: var(--ink);
  text-align: center; overflow-x: auto;
}
/* the fraction: numerator, rule, denominator — stacked, and centred on the bar */
.mfrac {
  display: inline-flex; flex-direction: column; align-items: center;
  vertical-align: middle; margin: 0 .3em; text-align: center;
}
.mfrac > .mnum { padding: 0 .35em .12em; border-bottom: 1px solid currentColor; }
.mfrac > .mden { padding: .12em .35em 0; }
.msup { font-size: .72em; vertical-align: super; line-height: 0; }
.mop { padding: 0 .28em; }
/* inside a working, the arithmetic keeps its figure in the numbers column, so
   the box gives up its own margins and stays on the one line */
.tip .teqr { align-items: center; }
.tip .teqr .tk { flex: 1 1 auto; min-width: 0; }
.tip .teqr .teq { margin: 3px 0; text-align: left; }
td.lbl.eqn .teq { margin: 1px 0; text-align: left; display: inline-block; padding: 4px 9px; }

/* ------------------------------------------------------------------ practice
   Predict the effect of an action on the statements above, then check. */
.quizbody { padding: 12px 14px 14px; }
.qask {
  border: 1px solid var(--accent); border-radius: 8px; padding: 12px 14px;
  background: var(--accent-soft); margin-bottom: 14px;
}
.qname { font-weight: 650; font-size: 14px; color: var(--ink); margin-bottom: 4px; }
.qdesc { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
.qterms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.qterm {
  font-size: 11.5px; padding: 3px 8px; border-radius: 5px;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink-2);
  font-family: var(--mono);
}
.qhow { font-size: 12px; color: var(--ink-3); line-height: 1.55; margin-top: 10px; }
.qhow code { font-family: var(--mono); background: var(--panel-2); padding: 1px 4px; border-radius: 3px; }

.qscore { font-weight: 650; font-size: 13px; color: var(--ink); margin-right: auto; align-self: center; }
.qscore.all { color: var(--pos); }

/* ---- the givens: every assumption the answer actually turns on ---- */
.givens {
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2);
  padding: 10px 12px 11px; margin-top: 12px;
}
.givens .gh {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3); margin-bottom: 7px;
}
.givens .grow {
  display: grid; grid-template-columns: minmax(150px, 210px) minmax(84px, auto) 1fr;
  gap: 4px 14px; align-items: baseline; padding: 5px 0;
  border-top: 1px solid var(--line-2);
}
.givens .grow:first-of-type { border-top: none; padding-top: 1px; }
.givens .gk { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.givens .gv { font-family: var(--mono); font-size: 12.5px; color: var(--accent); font-weight: 600; }
.givens .gn { font-size: 11.5px; color: var(--ink-2); line-height: 1.55; }
@media (max-width: 720px) {
  .givens .grow { grid-template-columns: 1fr auto; }
  .givens .gn { grid-column: 1 / 3; }
}

.quizbody .tipbox {
  margin-top: 12px; padding: 10px 12px; background: var(--accent-soft);
  border-radius: 6px; font-size: 12.5px; color: var(--ink-2); line-height: 1.6;
}
.quizbody .tipbox b {
  color: var(--accent); display: block; margin-bottom: 4px; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .05em;
}

/* ================================================================= practice
   Its own window: a brief, then either the six key lines or the full
   statements with a box against every ground account. */
body.practice { overflow: auto; }
.pshell { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px; }
.pmain {
  max-width: 1120px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 14px;
}
#brief, #board { display: flex; flex-direction: column; gap: 14px; }

/* The two extra columns: what you think changes, and what actually did.
   `table-layout: fixed` will not let an `auto` column absorb the slack, so the
   label column is sized explicitly against however many columns are showing. */
table.pstmt thead th.ask, table.pstmt thead th.ans { width: 128px; text-align: right; }
table.pstmt thead th.rep { width: 132px; }
/* the label column takes whatever the figure columns leave, and which of those
   are on the page depends on the mode and on whether the board has been
   checked — so it is spelled out for each combination rather than left to an
   `auto` column, which `table-layout: fixed` will not stretch */
table.pstmt thead th:first-child { width: calc(100% - 260px); }
table.pstmt.marked thead th:first-child { width: calc(100% - 388px); }
table.pstmt td.ask, table.pstmt td.ans {
  text-align: right; font-family: var(--mono); font-size: 12.5px; white-space: nowrap;
  border-left: 1px solid var(--line-2);
}
table.pstmt td.ask input {
  width: 100%; max-width: 108px; padding: 3px 7px; text-align: right;
  font-family: var(--mono); font-size: 12px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 5px; background: var(--panel);
}
table.pstmt td.ask input:focus { outline: none; border-color: var(--accent); background: var(--panel-2); }
table.pstmt td.ask input:disabled { background: none; border-color: transparent; color: var(--ink-2); }
table.pstmt td.ask input::placeholder { color: var(--ink-3); opacity: .5; }

/* a subtotal is computed from the lines above it and cannot be typed into */
table.pstmt td.ask.auto { color: var(--ink); font-weight: 650; cursor: help; }
table.pstmt td.ask.auto.zero { color: var(--ink-3); font-weight: 400; }
table.pstmt td.ans { color: var(--ink-2); }
table.pstmt td.ans.zero { color: var(--ink-3); }
/* a reported total that spans lines the key-lines filter has hidden: correct
   for the quarter, but not checkable against what is on the page */
table.pstmt td.num.partial { color: var(--ink-3); cursor: help;
  text-decoration: underline dotted var(--line); text-underline-offset: 3px; }

/* marking, once checked */
table.pstmt tr.right td { background: var(--ok-bg); }
table.pstmt tr.right td.lbl, table.pstmt tr.right td.ask { color: var(--pos); }
table.pstmt tr.wrong td { background: var(--fatal-bg); }
table.pstmt tr.wrong td.lbl, table.pstmt tr.wrong td.ask { color: var(--fatal); }
table.pstmt tr.right td.lbl::after, table.pstmt tr.wrong td.lbl::after {
  margin-left: 8px; font-weight: 700; font-size: 11px;
}
table.pstmt tr.right td.lbl::after { content: "\2713"; color: var(--pos); }
table.pstmt tr.wrong td.lbl::after { content: "\2717"; color: var(--fatal); }

.qhint { font-size: 12px; color: var(--ink-3); align-self: center; }

/* the controls are the first thing in their card, so they take the card's own
   padding rather than adding a margin of their own on top of it */
.quizbody > .ebar:first-child { margin-top: 0; }

/* what to notice, once the answer is on the page */
.notice { border-bottom: 1px solid var(--line-2); padding-bottom: 12px; }
.notice .nh {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); font-weight: 650; margin-bottom: 7px;
}
.notice p { margin: 0 0 7px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.notice p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------- practice on a phone
   The board is a list of line items with three figures against each, so it is
   made to fit the width and read by scrolling down: the figure columns shrink
   to what a number needs, the indent step halves, and the labels wrap.

   The main window is left alone — comparing five quarters across is the whole
   reason it is a table, so it keeps its horizontal scroller. */
@media (max-width: 720px) {
  body.practice .pshell { padding: 8px; }
  body.practice #brief, body.practice #board { gap: 10px; }
  body.practice table.stmt { min-width: 0; --step: 10px; --gutter: 15px; }
  body.practice table.stmt th, body.practice table.stmt td { padding: 4px 6px; }
  body.practice table.stmt td.lbl { white-space: normal; font-size: 12px; overflow-wrap: anywhere; }
  body.practice table.stmt td.num { font-size: 11.5px; }
  body.practice table.pstmt thead th { font-size: 9.5px; letter-spacing: .03em; }
  body.practice table.pstmt thead th.rep,
  body.practice table.pstmt thead th.ask,
  body.practice table.pstmt thead th.ans { width: 62px; }
  body.practice table.pstmt thead th:first-child { width: calc(100% - 124px); }
  body.practice table.pstmt.marked thead th:first-child { width: calc(100% - 186px); }
  body.practice table.pstmt td.ask, body.practice table.pstmt td.ans { font-size: 11.5px; }
  body.practice table.pstmt td.ask input { max-width: 100%; padding: 3px 4px; font-size: 11.5px; }
  /* the chevron and the circled plus sit in a gutter that has just halved */
  body.practice tr.acct td.lbl::before { width: 11px; height: 11px; line-height: 9px; font-size: 8px; }
  body.practice tr.hdr td.lbl::before { width: 11px; font-size: 10px; }
  /* the header is a row of controls, not a toolbar: let it wrap and stay small */
  body.practice header { gap: 8px; padding: 8px 10px; }
  body.practice .hgroup { gap: 4px; }
  body.practice .hbtn { padding: 5px 9px; font-size: 12px; }
  body.practice .card > h2 { padding: 9px 10px; }
  body.practice .quizbody { padding: 10px; }
  /* the brief's own figures wrap instead of forcing the card wide */
  body.practice .qterms { gap: 6px; }
}
/* an explanation can never be wider than the screen it has to open on */
.tip { max-width: min(380px, calc(100vw - 24px)); }

/* ------------------------------------------------------ valuation assumptions
   Market inputs, set on the statement they drive rather than in the settings
   drawer: a valuation is an argument about these numbers, so they belong where
   the argument is being made. */
.assume { padding: 9px 12px 11px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.assume .ah {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); font-weight: 650; margin-bottom: 7px;
}
.agrid { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.af { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); }
.af label { white-space: nowrap; }
.af input {
  width: 66px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--panel); text-align: right; font-family: var(--mono); font-size: 11.5px;
}
.af input:focus { outline: none; border-color: var(--accent); }

/* A leaf with nothing behind it to open. It keeps the type and indent of a
   line item and loses only the affordance, because the marker is a promise
   that clicking will do something. */
tr.acct.noexp td.lbl::before { content: none; }
tr.acct.noexp td.lbl { cursor: default; }

/* ------------------------------------------------------------ what-if grid */
.sens { padding: 14px 12px 4px; border-top: 1px solid var(--line); }
.sens .sh {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); font-weight: 650; margin-bottom: 8px;
}
.sens .sn { font-size: 10.5px; color: var(--ink-3); font-style: italic; padding: 8px 0 6px; line-height: 1.45; }
table.sgrid { border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 12px; }
table.sgrid th, table.sgrid td {
  border: 1px solid var(--line-2); padding: 5px 12px; text-align: right; white-space: nowrap;
}
table.sgrid thead th, table.sgrid th.rh {
  font-size: 10.5px; font-weight: 650; color: var(--ink-3);
  background: var(--panel-2); text-transform: none; letter-spacing: 0;
}
table.sgrid th.corner { text-align: left; color: var(--ink-2); font-weight: 600; }
table.sgrid td { font-family: var(--mono); color: var(--ink); }
/* the base case, outlined rather than filled: it must stay readable against
   whatever shade the value ramp has already put behind it */
table.sgrid td.base { box-shadow: inset 0 0 0 2px var(--accent); font-weight: 700; }

/* the step heading and the prose lines inside a practice line's drawer */
table.pstmt tr.drw.dhead td { padding-top: 7px; font-size: 10px; text-transform: uppercase;
  letter-spacing: .06em; font-weight: 650; color: var(--ink-3); }
table.pstmt tr.drw td.dnote { white-space: normal; font-style: italic; color: var(--ink-3); }

/* assumption groups in the sidebar */
.seth { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; font-weight: 650;
  color: var(--ink-3); padding: 12px 12px 4px; }
.seth:first-child { padding-top: 4px; }
.setnote { font-size: 10.5px; color: var(--ink-3); font-style: italic; padding: 0 12px 4px; line-height: 1.4; }

/* the answer box sits centred in its row rather than on the text baseline —
   an inline input leaves a gap above it that reads as a wonky top margin */
table.pstmt td.ask { vertical-align: middle; }
table.pstmt td.ask input { display: block; margin: 0 0 0 auto; }
/* a box holding something that is neither a number nor a sum */
table.pstmt td.ask.bad input { border-color: var(--neg); background: var(--fatal-bg); color: var(--neg); }
.qbad { font-size: 12px; color: var(--neg); font-weight: 550; }

/* a foldable assumption group */
.seth { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.seth:hover { color: var(--accent); }
.seth i.fold { font-size: 9px; width: 9px; color: var(--ink-3); font-style: normal; }

/* the two faces of the valuation card */
.vtabs { display: inline-flex; gap: 4px; }
.vtab {
  background: none; border: 1px solid var(--line); border-radius: 5px; padding: 3px 9px;
  font-size: 11px; color: var(--ink-3); white-space: nowrap;
}
.vtab:hover { border-color: var(--accent); color: var(--accent); }
.vtab.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }