/* Round 10b candidate "fills": the winner (quarter back) changed on the controls axis only, by fill. On white surfaces (the case strip, rail and action rows, ledger panels and their breakdowns, the Risk block) every secondary control takes a tonal fill one step darker than the surface it sits on: ink at a fixed opacity, so the step is the same on a white row, a banded row and the tinted running page. Secondary buttons 8% ink; inputs sunk at 11%; chips a 4% wash; hover one step further (13% / 15%), press one more (19%); disabled a step lighter than rest (4% / 5%) with the tertiary-grey label. Primary buttons stay solid ink; on the grey top strip the winner's white boxes and view switch stay exactly as they are (white on the band is already contrast-up), and Stop, which only shows while the strip is tinted, keeps its white box and its shadow. Label weights, corners, shadows, padding and sizes are the winner's. Nothing but control fill declarations differs from the winner; the winner's own notes follow.

/* Round 5 candidate "deepertonal": the winner (figure-led) changed on the surface-and-depth axis only. Stronger grey steps and no borders anywhere: page a step darker (#dfe3e8), panels white a level above it with a low shadow, breakdowns and tip boxes two levels above with a stronger second shadow (no 1 px ring), inputs a clear step darker than their panel (#d7dce2). Every 1 px line in the winner is gone and replaced by a tonal step: alternate rows, groups and breakdown lines sit on a light band (#eaedf1); off rows and the breakdown total line sit on a deeper recess (#e2e6ea); the ring on disabled buttons is gone and the Stop button is lifted by shadow instead of ringed. Radii held (4 px controls, 6 px surfaces). Nothing but surface and depth declarations differs from the winner; the winner's own notes follow.

/* Round 3b candidate "figureled": the round 3 winner (more) with the same four sizes and a different assignment of elements to them, the figure on top and everything else receding. Primary figure 600 --ink: wallet 26px; ledger totals, operator totals and Requirement now 17px (15px in narrow windows). Body 13px --ink: row, group and Requirement now names 600; wallet labels USD and USDC 400. Label 12px 500 --ink-2 +0.02em: setting and small-figure labels; its uppercase form 10px 500 --ink-3 +0.08em: panel headings, operator labels, chip labels. Metadata 11px 400 --ink-3, figures --ink-2: wallet sub-lines, chip values, breakdown-line figures, "Cases:", footer, setting units. Nothing but type declarations differs from the winner; the winner's own notes follow.

/* Round 3 candidate "more": the round 2 winner (airier) with the type scale changed only. Four text levels, each with its own size, weight and grey: primary figure (wallet 26px, Requirement now 20px, ledger and operator totals 17px; 600; --ink), body (13px; 400, row names 600; --ink), label (12px; 500; --ink-2; +0.02em; the uppercase panel, operator and chip labels 10px; 500; --ink-3; +0.08em), metadata (11px; 400; --ink-3). Nothing but type-scale declarations differs from the winner; the winner's own note follows.

Round 2 candidate "airier": the winner (candidate A of batch one) with one step more air between groups and around panels; rows unchanged. Below is the winner's own note, kept for the origin; its density line now reads: panel padding 12px 12px; row gap 4px; section gap 12px.

   Candidate A, polish batch one. A rewrite of app/styles.css from the craft
   rules alone (polishcraft, FIGURESRULES, the direction guide). Same
   selectors and class names as the app; no markup assumed that the app does
   not produce. Words, elements and figures are untouched.

   Density: base unit 4px; body 13px/1.4; panel padding 8px 12px; row gap 4px;
   section gap 8px. Depth: tonal, one strategy for the whole app: the page is a
   light grey ground, working surfaces are white, the meta strip is a darker
   band, inputs sit darker than their surface, a breakdown or a tip box lifts
   one level with a shadow; no outlines around panels; hairline dividers only
   inside a surface. One radius scale: 4px controls, 6px surfaces. Type: one
   system text face; every figure in tabular numerals of that face, right-
   aligned, labels left. Colour: grey by default; the lit control keeps the
   tour colour, the result and refusal lines keep theirs; nothing else is
   coloured. Nothing flashes when a figure changes. */

:root {
  /* surfaces */
  --ground: #dfe3e8;
  --band: #e9ecf0;
  --panel: #ffffff;
  --tone: #f1f3f5;
  --tone-2: #e4e8ec;
  --field: #d7dce2;
  --step: #f5f6f8;
  --recess: #eaecef;
  --tint: #e4e7eb;
  /* dividers */
  --line-soft: #e3e6ea;
  --line: #c9ced4;
  /* text: primary, secondary (labels), tertiary (metadata; also the greyed control) */
  --ink: #16191d;
  --ink-2: #444c55;
  --ink-3: #626a74;
  --on-ink: #ffffff;
  /* the only colours */
  --tour: #d97706;
  --tour-wash: #fff7ed;
  --result: #a05a00;
  /* shape and motion */
  --r-control: 4px;
  --r-surface: 6px;
  /* control fills (round 10b): ink over the surface the control sits on */
  --ctl: rgba(0, 30, 72, 0.08);
  --ctl-hover: rgba(0, 30, 72, 0.13);
  --ctl-active: rgba(0, 30, 72, 0.19);
  --ctl-off: rgba(0, 30, 72, 0.04);
  --sunk: rgba(0, 30, 72, 0.11);
  --sunk-hover: rgba(0, 30, 72, 0.15);
  --sunk-off: rgba(0, 30, 72, 0.05);
  --chip-fill: rgba(0, 30, 72, 0.04);
  --track: rgba(0, 30, 72, 0.22);
  --track-hover: rgba(0, 30, 72, 0.30);
  --track-off: rgba(0, 30, 72, 0.10);
  --shadow-low: 0 1px 2px rgba(22, 25, 29, 0.08), 0 2px 6px rgba(22, 25, 29, 0.05);
  --shadow-lift: 0 16px 40px rgba(22, 25, 29, 0.26), 0 3px 8px rgba(22, 25, 29, 0.12);
  --shadow-strip: 0 2px 8px rgba(22, 25, 29, 0.12);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: var(--sans);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 13px/1.4 var(--sans);
  -webkit-font-smoothing: antialiased;
}

main { padding: 11px 10px; max-width: 1280px; margin: 0 auto; }

a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }

/* every figure: tabular numerals, right-aligned where it sits in a column */
.n, .cv, .clockbox, input[inputmode="decimal"], input[inputmode="numeric"], input[type="number"] {
  font-variant-numeric: tabular-nums;
}

/* --- controls: five states each (default, hover, active, focus, disabled) --- */

button {
  font: inherit;
  color: var(--ink);
  background: var(--ctl);
  border: 0;
  border-radius: var(--r-control);
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 120ms ease, transform 120ms var(--ease-out);
}
button:active:not(:disabled) { transform: scale(0.97); background: var(--ctl-active); }
button.primary:active:not(:disabled) { background: var(--ink); }
/* the top strip keeps the winner's white boxes in every state */
.top button:active:not(:disabled) { background: var(--ctl-active); }
.views button:active:not(:disabled) { background: transparent; }
.views button[aria-pressed="true"]:active:not(:disabled) { background: var(--ink); }
button:disabled { background: var(--ctl-off); color: var(--ink-3); cursor: default; }
button.primary { background: var(--ink); color: var(--on-ink); font-weight: 500; }
button.primary:disabled { background: var(--ctl-off); color: var(--ink-3); font-weight: 500; }

select, input {
  font: inherit;
  border: 0;
  border-radius: var(--r-control);
  padding: 3px 6px;
  background: var(--sunk);
  color: var(--ink);
  max-width: 100%;
  transition: background-color 120ms ease;
}
input:disabled, select:disabled { background: var(--sunk-off); color: var(--ink-3); }
input[inputmode="decimal"], input[inputmode="numeric"], input[type="number"] { text-align: right; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
input:focus-visible, select:focus-visible { outline-offset: 0; background: var(--sunk-hover); }

@media (hover: hover) and (pointer: fine) {
  button:hover:not(:disabled) { background: var(--ctl-hover); }
  button.primary:hover:not(:disabled) { background: var(--ink-2); }
  .top button:hover:not(:disabled) { background: var(--ctl-hover); }
  .top .views button:hover:not(:disabled) { background: var(--ctl-hover); }
  .views button[aria-pressed="true"]:hover:not(:disabled) { background: var(--ink); }
  .cases button[aria-pressed="true"]:hover:not(:disabled) { background: var(--ink); }
  .cases button.stop:hover { background: var(--tone); }
  .gname:hover { background: transparent; text-decoration: underline; text-underline-offset: 3px; }
  button.tip:hover { background: var(--ink); color: var(--on-ink); }
  input:hover:not(:disabled), select:hover:not(:disabled) { background: var(--sunk-hover); }
  .switch:hover:not(:disabled) { background: var(--track-hover); }
  .switch[aria-checked="true"]:hover:not(:disabled) { background: var(--ink-2); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* --- top strip: the meta-controls on a darker band --- */

.top {
  background: var(--panel);
  border-radius: var(--r-surface) var(--r-surface) 0 0;
  padding: 9px 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  box-shadow: var(--shadow-low);
}
.top h1 { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.top .spacer { flex: 1; }
.top button { background: var(--ctl); }
.top a { color: var(--ink); }
.views { display: inline-flex; gap: 2px; padding: 2px; background: var(--panel); border-radius: var(--r-control); }
.views button { background: transparent; border-radius: 3px; padding: 2px 10px; }
.views button:disabled { background: transparent; box-shadow: none; }
.views button + button { border-left: 0; }
.views button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); font-weight: 500; }
.clockbox { font-size: 13px; font-weight: 600; white-space: nowrap; }
.clockctl { display: inline-flex; gap: 4px; }

/* --- case strip: attached under the band --- */

.cases {
  background: var(--panel);
  border-radius: 0 0 var(--r-surface) var(--r-surface);
  padding: 9px 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  box-shadow: var(--seam), var(--shadow-low);
}
.cases.running { position: sticky; top: 0; z-index: 25; box-shadow: var(--seam), var(--shadow-strip); }
.cases .lead { color: var(--ink-3); font-size: 11px; }
.cases .walk { margin-right: 6px; }
.cases button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); font-weight: 500; }
.cases button[aria-pressed="true"]:disabled { background: var(--ink); color: var(--on-ink); cursor: default; }
.cases button.stop { background: var(--panel); box-shadow: var(--shadow-low); color: var(--ink); font-weight: 600; }

/* --- notices (page-level: storage state) --- */

.notice {
  background: var(--tone);
  border-radius: var(--r-surface);
  color: var(--ink);
  padding: 4px 12px;
  margin-top: 11px;
  font-size: 12px;
}
.notice:empty { display: none; }

/* --- the plane: surfaces, rows, groups --- */

.plane { margin-top: 11px; display: flex; flex-direction: column; gap: 11px; }
.box {
  background: var(--panel);
  border-radius: var(--r-surface);
  padding: 11px 12px;
  box-shadow: var(--shadow-low);
}
.box h2 {
  font-size: 10px;
  font-weight: 500;
  margin: 0 0 7px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

/* figures: labels left, figures right; the headline figures larger, nothing else competes */
table.figures { border-collapse: collapse; width: 100%; }
table.figures td { padding: 3px 8px; vertical-align: baseline; }
table.figures td.n { text-align: right; font-size: 13px; white-space: nowrap; width: 1%; }
table.figures td.n.neg { color: var(--ink); }
table.figures tr.main td { font-size: 13px; font-weight: 400; color: var(--ink); }
table.figures tr.main td.n { font-size: 26px; font-weight: 600; letter-spacing: 0; color: var(--ink); }
table.figures tr.sub td { color: var(--ink-3); font-size: 11px; padding-left: 20px; padding-top: 0; }
table.figures tr.sub td.n { font-size: 11px; color: var(--ink-2); }
tr.flash td, .flash { animation: none; }

/* the wallet: one card */
.wallet { max-width: 520px; }

/* --- rail rows and action rows: one surface, a hairline between rows --- */

.rails, .rows { display: flex; flex-direction: column; gap: 0; background: var(--panel); border-radius: var(--r-surface); box-shadow: var(--shadow-low); }
.railpick { display: none; }
.row {
  background: transparent;
  padding: 8px 12px;
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto auto 480px;
  grid-template-areas: "label amount go chips" "callout callout callout callout" "settings settings settings settings" "line line line line";
  align-items: center;
  column-gap: 12px;
  row-gap: 4px;
}
.row:nth-of-type(even) { background: var(--step); }
.row .label { grid-area: label; font-weight: 600; font-size: 13px; }
.row .amount { grid-area: amount; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.row .amount input { width: 150px; }
.row .go { grid-area: go; display: inline-flex; gap: 4px; }
.row .chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.row .settings { grid-area: settings; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.row .line { grid-area: line; font-size: 12px; color: var(--result); }
.row.off { background: var(--recess); }
.row.off .label { color: var(--ink-3); }
.rails > .row:first-of-type, .rows > .row:first-of-type { border-top-left-radius: var(--r-surface); border-top-right-radius: var(--r-surface); }
.rails > .row:last-of-type, .rows > .row:last-of-type { border-bottom-left-radius: var(--r-surface); border-bottom-right-radius: var(--r-surface); }

/* chips: small standing label fields */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--chip-fill);
  border-radius: var(--r-control);
  padding: 1px 5px;
  font-size: 10px;
  white-space: nowrap;
}
.chip .cl { color: var(--ink-3); font-size: 9px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; }
.chip .cv { color: var(--ink-2); }
.row.off .chip { background: var(--chip-fill); }

/* settings: label · bounded number box · unit, on the line of the figure it changes */
.setting { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; }
.setting .sl { color: var(--ink-2); font-weight: 500; letter-spacing: 0.02em; }
.setting input[type="number"] { width: 104px; padding: 2px 5px; font-size: 12px; }
.setting .unit { color: var(--ink-3); font-size: 11px; }

/* a small figure beside a line */
.fig { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12px; white-space: nowrap; }
.fig .fl { color: var(--ink-2); font-weight: 500; letter-spacing: 0.02em; }
.fig .n { font-size: 12px; color: var(--ink); }

/* --- ledger groups: one line at rest; the breakdown lifts one level above the surface --- */

.ledger { padding: 0; background: var(--ground); }
.group { position: relative; background: var(--panel); margin-top: 0; }
.group:last-child { border-bottom: 0; }
.group:nth-of-type(even) { background: var(--panel); }
.group:first-of-type { border-radius: 0; }
.group:last-of-type { border-radius: 0 0 var(--r-surface) var(--r-surface); }
.gline { display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
.gname { border: 0; background: transparent; padding: 0; font-weight: 600; font-size: 13px; border-radius: 2px; }
.gname:active:not(:disabled) { transform: none; background: transparent; }
.gname:disabled { background: transparent; box-shadow: none; color: var(--ink-3); }
.gname::before { content: "\25B8"; color: var(--ink-3); font-size: 11px; margin-right: 6px; }
.group.open .gname::before { content: "\25BE"; }
.gfigs { margin-left: auto; display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; justify-content: flex-end; }
.n.gt { font-size: 17px; font-weight: 600; white-space: nowrap; }
.overlay {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 15;
  background: var(--panel);
  border-radius: var(--r-surface);
  box-shadow: var(--shadow-lift);
  padding: 7px 12px 9px;
  overflow-y: auto;
  max-height: 60vh;
}
.oline {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(110px, max-content) 1fr;
  align-items: center;
  gap: 4px 12px;
  padding: 5px 0;
}
.oline:last-child { border-bottom: 0; }
.oline:nth-of-type(even) { background: var(--step); }
.oline .ol { min-width: 0; }
.oline > .n { font-size: 11px; color: var(--ink-2); white-space: nowrap; text-align: right; }
.oline .extras { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; justify-self: end; justify-content: flex-end; }
.oline.total { font-weight: 600; background: var(--recess); }
.oline .line, .oline > .callout-control { grid-column: 1 / -1; }
.oline .line { font-size: 12px; color: var(--result); font-weight: 400; }
.fund { display: inline-flex; gap: 4px; align-items: center; }
.fund .amount { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-3); }
.fund .amount input { width: 112px; padding: 2px 5px; font-size: 12px; }
.fund button { padding: 2px 8px; font-size: 12px; }

/* pricing: a group in its own surface; its two standing fees at body size, not total size */
.pricing { padding: 0; }
.pricing .n.gt { font-size: 13px; }

/* --- the operators' books: each operator is a surface with a small-print label --- */

.system { padding: 0; background: transparent; box-shadow: none; display: flex; flex-direction: column; gap: 11px; }
.operator { background: var(--panel); border-radius: var(--r-surface); box-shadow: var(--shadow-low); }
.oplabel { display: block; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); padding: 9px 12px 0; }
.operator .gline { padding: 4px 12px 6px; }
.operator .group:last-child { border-bottom: 0; }

/* the Risk block: the requirement now, five settings, the yield shock, the call */
.risk { display: flex; flex-wrap: wrap; align-items: center; gap: 11px 23px; }
.rline { display: inline-flex; align-items: center; gap: 8px; }
.rline .rl { font-weight: 600; font-size: 13px; }
.rline > .n { font-size: 17px; font-weight: 600; }
.rline .line { font-size: 12px; color: var(--result); }
.switch { width: 34px; height: 18px; border-radius: 9px; padding: 0; position: relative; background: var(--track); border: 0; }
.switch:active:not(:disabled) { transform: none; background: var(--track-hover); }
.switch:disabled { background: var(--track-off); box-shadow: none; }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--panel); transition: left 120ms var(--ease-out); }
.switch[aria-checked="true"] { background: var(--ink); }
.switch[aria-checked="true"] .knob { left: 19px; }

/* --- the guided tour: every surface tinted while a case or the walk-through runs,
   one lit control in the tour colour, used nowhere else, one callout --- */

.app.running .top, .app.running .cases, .app.running .box, .app.running .row, .app.running .rails, .app.running .rows,
.app.running .operator, .app.running .overlay, .app.running .notice { background: var(--tint); }
.app.running .system { background: transparent; }
.app.running .row.off { background: var(--tone-2); }
/* Highlight box (2026-09-17): drawn as a rounded frame 2 px outside the element, never cut off, the same shape on every element.
   A pseudo-element so the corners are always rounded; inputs and selects cannot carry one, so they keep a rounded outline. */
.demo-target { position: relative; z-index: 6; }
.demo-target::after { content: ""; position: absolute; inset: -5px; border: 3px solid var(--tour); border-radius: 8px; pointer-events: none; }
input.demo-target, select.demo-target { outline: 3px solid var(--tour); outline-offset: 2px; border-radius: 6px; }
button.demo-target:disabled, input.demo-target:disabled, select.demo-target:disabled {
  background: var(--panel);
  color: var(--ink);
}
button.demo-target:disabled.primary { background: var(--ink); color: var(--on-ink); }
.callout {
  display: block;
  z-index: 20;
  box-sizing: border-box;
  max-width: min(340px, calc(100vw - 16px));
  border: 2px solid var(--tour);
  border-radius: var(--r-surface);
  background: var(--tour-wash);
  color: var(--ink);
  padding: 4px 10px;
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  box-shadow: var(--shadow-strip);
}
.callout-control { position: relative; width: max-content; margin: 2px 0 2px; }
.row > .callout-control { grid-area: callout; }
.top > .callout-control, .cases > .callout-control, .risk > .callout-control { flex-basis: 100%; order: 99; }
.rline > .callout-control { flex-basis: 100%; min-width: 100%; }
.rline:has(> .callout-control) { flex-wrap: wrap; }
.overlay > .callout-control { margin: 10px 0 6px; }
.callout-control::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 14px;
  border: 7px solid transparent;
  border-top: 0;
  border-bottom-color: var(--tour);
}
.callout-panel { position: relative; margin: 2px 0 8px; }
.callout-panel::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 14px;
  border: 7px solid transparent;
  border-bottom: 0;
  border-top-color: var(--tour);
}

/* --- info marks: the only sourcing surface --- */

button.tip {
  display: inline-block;
  width: 14px;
  height: 14px;
  padding: 0;
  margin-left: 4px;
  border: 0;
  border-radius: 50%;
  background: var(--ctl);
  color: var(--ink-3);
  font-size: 10px;
  font-style: italic;
  font-family: Georgia, serif;
  font-weight: 400;
  line-height: 14px;
  text-align: center;
  vertical-align: text-top;
  cursor: help;
}
button.tip:active:not(:disabled) { transform: none; }
button.tip[aria-expanded="true"] { background: var(--ink); color: var(--on-ink); }
button.tip:disabled { background: var(--ctl-off); color: var(--ink-3); box-shadow: none; }
body.tips-off .tip { display: none; }

.tipbox {
  position: absolute;
  z-index: 30;
  max-width: min(380px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  background: var(--panel);
  border-radius: var(--r-surface);
  box-shadow: var(--shadow-lift);
  padding: 11px 10px;
  font-size: 12px;
  line-height: 1.45;
}
.tipbox p { margin: 0 0 5px; }
.tipbox p:last-child { margin-bottom: 0; }
.tipbox .note { color: var(--ink-3); font-style: italic; }
.tipbox .note a { color: var(--ink-2); }

footer {
  margin-top: 11px;
  padding: 2px 4px;
  font-size: 11px;
  color: var(--ink-3);
}
footer a { color: var(--ink-3); }

/* about page */
.about { max-width: 640px; }
.about h2 { margin-bottom: 11px; }
.about p { margin: 0; }
.about .icons { display: flex; gap: 12px; margin-top: 15px; }
.about .icons a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); text-decoration: none; }
.about .icons svg { width: 20px; height: 20px; fill: currentColor; }

/* --- narrow windows (by window width only): small strips, the rail dropdown, one row --- */
@media (max-width: 720px) {
  main { padding: 8px 8px; }
  html, body { font-size: 13px; line-height: 1.3; }
  .top { padding: 8px 10px; gap: 4px 8px; }
  .top h1 { font-size: 14px; width: 100%; }
  .views button { padding: 2px 8px; font-size: 12px; }
  .clockbox { font-size: 12px; }
  .clockctl button, .top > button[data-act="reset"] { padding: 2px 7px; font-size: 11px; }
  .cases { padding: 8px 10px; gap: 4px 6px; }
  .cases button { padding: 2px 7px; font-size: 11px; }
  .cases .lead { font-size: 11px; }
  .plane { gap: 8px; }
  .box { padding: 8px 10px; }
  .wallet { max-width: none; }
  table.figures td { padding: 2px 6px; }
  table.figures tr.main td.n { font-size: 26px; }
  .railpick { display: block; }
  .railpick select { width: 100%; font-size: 13px; font-weight: 600; padding: 6px 10px; }
  /* The walk-through's rail-rows stop: in a narrow window the light sits on the rail dropdown, not around the rows. */
  .rails.demo-target { outline: none; }
  .rails.demo-target .railpick select { outline: 3px solid var(--tour); outline-offset: 2px; }
  .rails .row:not(.picked) { display: none; }
  .rails .row.picked { border-top: 0; border-radius: var(--r-surface); }
  /* one rail row shows at a time here, so the alternate band has nothing to alternate with */
  .rails .row.picked:not(.off) { background: transparent; }
  .row {
    padding: 5px 10px;
    grid-template-columns: 1fr auto;
    grid-template-areas: "label label" "amount go" "chips chips" "callout callout" "settings settings" "line line";
    row-gap: 3px;
  }
  .row .amount input { width: 150px; }
  .row .chips { justify-content: flex-start; }
  .gline { padding: 5px 10px; }
  .pricing .gline { flex-wrap: wrap; }
  .pricing .gfigs { flex-basis: 100%; margin-left: 0; padding-left: 20px; justify-content: flex-start; }
  .operator .gline { padding: 4px 10px 5px; }
  .oplabel { padding: 8px 10px 0; }
  .oline { grid-template-columns: 1fr auto; }
  .oline .extras { grid-column: 1 / -1; justify-self: stretch; justify-content: flex-start; }
  .overlay { padding: 6px 10px 8px; }
  .system { gap: 8px; }
  .risk { display: block; }
  .rline { display: flex; padding: 2px 0; }
  .gfigs { gap: 8px; }
  .n.gt { font-size: 15px; }
  .rline > .n { font-size: 15px; }
}

/* Round 8 partial pick (2026-09-11: "i like the time keys in one box. i do not like the larger clock size."): the joined time keys from candidate instrument, clock size unchanged. */
.clockctl { display: inline-flex; gap: 1px; }
.clockctl button { border-radius: 0; }
.clockctl button:first-child { border-radius: var(--r-control) 0 0 var(--r-control); }
.clockctl button:last-child { border-radius: 0 var(--r-control) var(--r-control) 0; }
.n.flash, .clockbox.flash, tr.flash td.n { position: relative; isolation: isolate; }
.oline > .n.flash { justify-self: end; }
.n.flash::after, .clockbox.flash::after {
  content: "";
  position: absolute;
  inset: -2px -4px;
  border: 2px solid var(--tour);
  border-radius: var(--r-surface);
  background: var(--tour-wash);
  z-index: -1;
}
tr.flash td.n::after {
  content: "";
  position: absolute;
  inset: -1px 0;
  border: 2px solid var(--tour);
  border-radius: var(--r-surface);
  background: var(--tour-wash);
  z-index: -1;
}

/* Round 10b "fillsheavier": the fills candidate plus flat's five label weights (assembled by the advisor so the two candidates differ in weight only). */
button { font-weight: 500; }
button.primary { font-weight: 600; }
button.primary:disabled { font-weight: 600; }
.views button[aria-pressed="true"] { font-weight: 600; }
.cases button[aria-pressed="true"] { font-weight: 600; }

/* Round 10d: the four case buttons joined into one block like the time keys, wide screens only (2026-09-12; the view buttons keep their gap: "the views still need the small gap between each button"). */
@media (min-width: 721px) {
  .cases button[data-act^="demo:S"] { border-radius: 0; }
  .cases button[data-act="demo:S1"] { border-radius: var(--r-control) 0 0 var(--r-control); }
  .cases button[data-act="demo:S4"] { border-radius: 0 var(--r-control) var(--r-control) 0; }
  .cases button[data-act^="demo:S"] + button[data-act^="demo:S"] { margin-left: 1px; }
  .caseset { display: inline-flex; gap: 0; }
  .tl[data-id="pnl:wire"], .tl[data-id="pnl:instant"] { grid-template-columns: minmax(216px, max-content) 1fr auto; } /* the two price boxes share a left edge (the product owner, 2026-09-25) */
}

/* Round 10d, corrected (2026-09-12, twice): the three view buttons arranged like the joined time keys — white keys on the band with 1px of band showing between them; the chosen view stays ink-filled. */
.views { background: transparent; padding: 0; gap: 1px; border-radius: 0; }
.views button { background: var(--ctl); border-radius: 0; }
.views button:first-child { border-radius: var(--r-control) 0 0 var(--r-control); }
.views button:last-child { border-radius: 0 var(--r-control) var(--r-control) 0; }
.views button:disabled { background: var(--ctl); }
.views button:active:not(:disabled) { background: var(--ctl-active); }
.views button[aria-pressed="true"] { background: var(--ink); }

/* Gap fix (2026-09-12, row 7: "the text touches the sides of the ribbon shading exactly. there should be a gap"): the band on a breakdown line extends 8 px beyond the text on both sides; the text does not move. */
.oline { padding: 5px 8px; margin: 0 -8px; }

/* =====================================================================
   Storyboard mockup additions (advisor, 2026-09-17). Everything above is
   the polish winner unchanged. Below: the layout of the round-4 review.
   ===================================================================== */

/* top strip: the clock is the day pull-down and the time box themselves */
.clock { display: inline-flex; gap: 1px; align-items: center; }
.clock select, .clock input { font-weight: 600; font-size: 13px; padding: 3px 8px; border-radius: 0; background: var(--sunk); }
.clock select { border-radius: var(--r-control) 0 0 var(--r-control); }
.clock input { border-radius: 0 var(--r-control) var(--r-control) 0; width: 58px; text-align: center; }
.clock.demo-target { border-radius: var(--r-control); }

/* case strip: Case simulations, one lead, Pause / Stop / Continue while a case runs */
.cases .lead { font-size: 12px; color: var(--ink-2); font-weight: 500; }
.cases.phone:has(.lead[data-id="stopped"]) { flex-wrap: wrap; } /* the stopped line on its own row on the phone (the product owner, 2026-09-25) */
.cases.phone .lead[data-id="stopped"] { flex-basis: 100%; font-size: 11px; font-weight: 400; letter-spacing: 0; line-height: 1.3; } /* on the phone in the subtitle's size and style; the desktop keeps the strip's 12 px, weight 500 */

/* panel titles: the wallet's title style for every titled panel */
.box > h2 { margin-bottom: 8px; }

/* a titled line: title far left, control left of the figure, figure far right */
.tl {
  display: grid;
  grid-template-columns: minmax(180px, max-content) 1fr auto;
  grid-template-areas: "title ctl fig";
  align-items: center;
  column-gap: 14px;
  padding: 6px 12px;
  margin: 0;
  background: var(--panel);
}
.tl.sub { padding-top: 3px; padding-bottom: 3px; }
.tl.sub .t { padding-left: 20px; color: var(--ink-2); font-size: 12px; }
.tl.sub2 .t { padding-left: 40px; }
.tl .t { grid-area: title; font-weight: 600; font-size: 13px; white-space: nowrap; }
.tl.sub .t { font-weight: 500; }
.tl .ctl { grid-area: ctl; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-self: start; }
.tl .ctl input { width: 118px; padding: 2px 6px; font-size: 12px; box-shadow: inset 0 1px 2px rgba(22, 25, 29, 0.18); }
.tl .ctl button { padding: 2px 9px; font-size: 12px; }
.tl .ctl .chip { margin-left: 4px; }
.tl .ctl .unit { font-size: 11px; color: var(--ink-3); }
.tl .f { grid-area: fig; text-align: right; white-space: nowrap; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink); }
.tl.sub .f { font-size: 12px; color: var(--ink-2); }
.tl.main .f { font-size: 17px; font-weight: 600; }
.tl.big .f { font-size: 26px; font-weight: 600; }
.tl .f .lbl { font-weight: 500; font-size: 12px; color: var(--ink-2); margin-right: 10px; }
.tl.heading { padding-top: 5px; padding-bottom: 5px; }
.tl.heading .t { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }

/* row bands inside a panel (today's ribbon; a polish round may replace it) */
.band > .tl:nth-child(even) { background: var(--panel); }
.band > .tl:first-child { border-radius: var(--r-surface) var(--r-surface) 0 0; }
.band > .tl:last-child { border-radius: 0 0 var(--r-surface) var(--r-surface); }

/* wallet and rails: full width, same title */
.wallet { max-width: none; }
.rails { padding: 0; display: block; background: var(--ground); }
.rails .rail {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto;
  grid-template-areas: "label send" "chips send" "line line";
  align-items: center;
  column-gap: 12px;
  row-gap: 3px;
  padding: 6px 12px;
  margin: 0;
  background: var(--panel);
}
.rails .rail:nth-child(even) { background: var(--panel); }
.rails .rail .label { grid-area: label; font-weight: 600; font-size: 13px; }
.rails .rail .send { grid-area: send; display: inline-flex; align-items: center; gap: 6px; justify-self: end; }
.rails .rail .send .unit { font-size: 12px; color: var(--ink-3); }
.rails .rail .send input { width: 150px; box-shadow: inset 0 1px 2px rgba(22, 25, 29, 0.18); }
.rails .rail .chips { grid-area: chips; display: flex; flex-wrap: nowrap; gap: 6px; justify-content: flex-start; }
.rails .rail .chips .chip { padding: 1px 5px; font-size: 10px; }
.rails .rail .chips .chip .cl { font-size: 9px; }
.rails .rail .line { grid-area: line; font-size: 12px; color: var(--result); }
.rails .rail.off { background: transparent; }
.rails .rail.off .label { color: var(--ink-3); }

/* balance-sheet drawers stay in the page flow and push what follows down */
.drawer { padding: 0; background: var(--ground); box-shadow: none; }
.group.open { background: var(--panel); }
.group:nth-of-type(even) .drawer { background: var(--ground); }
.drawer .tl { margin: 0; padding-left: 12px; padding-right: 12px; }
.drawer .tl:nth-child(even) { background: var(--panel); }
.group:nth-of-type(even) .drawer .tl:nth-child(even) { background: var(--panel); }
.drawer .tl .t { font-weight: 500; font-size: 12px; }
.drawer .tl.sub .t { padding-left: 20px; }
.drawer .tl.sub2 .t { padding-left: 40px; }
.drawer .tl .f { font-size: 12px; color: var(--ink-2); }
.drawer .tl .ctl input { width: 120px; } /* 2026-09-20: a 16-character amount (1,605,833,384.50) clipped at 112 px; every drawer box on every view shares this rule */
.drawer .tl .line { grid-column: 1 / -1; font-size: 12px; color: var(--result); }

/* system view: one balance sheet, one FICC panel */
.opl { display: inline-block; width: 150px; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }

/* the buttons: a little less black, with a low shadow so they sit in the panel (review: "less contrast") */
button.primary { background: #2a2f36; box-shadow: 0 1px 2px rgba(22, 25, 29, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
button.primary:disabled { background: var(--ctl-off); box-shadow: none; }
button.demo-target:disabled.primary { background: #2a2f36; }

/* narration box: floating, positioned by script, arrow on the side facing the target */
.narr {
  position: absolute;
  z-index: 40;
  max-width: 340px;
  border: 2px solid var(--tour);
  border-radius: var(--r-surface);
  background: var(--tour-wash);
  color: var(--ink);
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.35;
  box-shadow: var(--shadow-strip);
}
.narr .arrow { position: absolute; width: 0; height: 0; border: 8px solid transparent; }
.narr.side-top .arrow { top: -16px; border-bottom-color: var(--tour); }
.narr.side-bottom .arrow { bottom: -16px; border-top-color: var(--tour); }
.narr.side-left .arrow { left: -16px; border-right-color: var(--tour); }
.narr.side-right .arrow { right: -16px; border-left-color: var(--tour); }

/* changed figures: the tour outline the app uses today */
.f.flash, .n.flash { position: relative; isolation: isolate; }
.f.flash::after { content: ""; position: absolute; inset: -2px -5px; border: 2px solid var(--tour); border-radius: var(--r-surface); background: var(--tour-wash); z-index: -1; }
/* Highlight box (2026-09-17): drawn as a rounded frame 2 px outside the element, never cut off, the same shape on every element.
   A pseudo-element so the corners are always rounded; inputs and selects cannot carry one, so they keep a rounded outline. */
.demo-target { position: relative; z-index: 6; }
.demo-target::after { content: ""; position: absolute; inset: -5px; border: 3px solid var(--tour); border-radius: 8px; pointer-events: none; }
input.demo-target, select.demo-target { outline: 3px solid var(--tour); outline-offset: 2px; border-radius: 6px; }
.app.running .drawer { background: var(--field); }
.app.running .band > .tl:nth-child(even), .app.running .rails .rail:nth-child(even), .app.running .drawer .tl:nth-child(even) { background: var(--tint); }
.app.running .drawer .tl:nth-child(odd) { background: var(--tint); }
.app.running .group:nth-of-type(even) .drawer .tl:nth-child(even) { background: var(--tint); }
.app.running .group:nth-of-type(even) .drawer .tl:nth-child(odd) { background: var(--tint); }
.app.running .rails .rail.off { background: transparent; }

/* ---- storyboard additions, 2026-09-17 sitting (her instructions on the first board) ---- */
/* "Case simulations:" further from Walk-through, same distance to the case buttons */
.cases .walk { margin-right: 18px; }
/* one outline around an amount box and its button */
.pair { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-control); }
.pair.demo-target { outline-offset: 3px; }
.ledger > h2.lh { padding: 11px 12px 8px; margin: 0; background: var(--panel); border-radius: var(--r-surface) var(--r-surface) 0 0; }
.tl.notitle { grid-template-areas: "ctl ctl fig"; }
.gfigs .lbl { font-weight: 500; font-size: 12px; color: var(--ink-2); margin-right: 10px; }

/* ---- phone layout (review, "Mobile"): 390 px wide in the storyboards ---- */
@media (max-width: 720px) {
  /* top panel: title, then three rows — clock, view switcher, cases — separated by a thin line of the background */
  .top.phone { display: block; padding: 0; gap: 0; background: var(--ground); border-radius: var(--r-surface) var(--r-surface) 0 0; overflow: hidden; }
  .top.phone h1 { width: auto; margin: 0; font-size: 13px; padding: 7px 10px 6px; background: var(--panel); }
  .top.phone .trow { display: flex; align-items: center; gap: 5px; padding: 6px 10px; margin-top: 0; background: var(--panel); flex-wrap: nowrap; }
  .top.phone .viewrow { background: var(--panel); }
  .top.phone .spacer { flex: 1; }
  .clock select, .clock input { font-size: 12px; padding: 3px 6px; }
  .clock input { width: 50px; }
  .clockctl button, .top.phone .trow > button[data-id="reset"] { padding: 3px 7px; font-size: 11px; white-space: nowrap; }
  .views button { padding: 3px 9px; font-size: 12px; }
  .cases.phone { margin-top: 0; padding: 6px 10px; flex-wrap: nowrap; gap: 5px; }
  .cases.phone .walk { margin-right: 0; padding: 3px 8px; font-size: 11px; white-space: nowrap; }
  .cases.phone .casepick { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 600; padding: 3px 6px; }
  .cases.phone button.stop { padding: 3px 8px; font-size: 11px; white-space: nowrap; }
  /* titled lines stack: title and figure on one line, the control under them */
  .tl { grid-template-columns: 1fr auto; grid-template-areas: "title fig" "ctl ctl"; column-gap: 8px; row-gap: 4px; padding: 5px 10px; }
  .tl.noctl { grid-template-areas: "title fig"; }
  .tl.notitle { grid-template-areas: "ctl ctl"; }
  .tl .t { white-space: normal; }
  .tl .ctl { flex-wrap: wrap; row-gap: 4px; }
  .tl .ctl input, .drawer .tl .ctl input { width: 120px; }
  .tl.big .f { font-size: 20px; }
  .tl.main .f { font-size: 15px; }
  .tl .f .lbl { margin-right: 6px; }
  .opl { width: auto; }
  /* wallet drawers: the USD and USDC totals large */
  .wallet .n.gt { font-size: 20px; }
  /* rails: title, pull-down, one rail — its controls, then its chips on one line, then any refusal line */
  .rails .railpick { display: block; margin: 0; padding: 6px 10px; background: var(--panel); }
  .rails .railpick select { width: 100%; font-size: 13px; font-weight: 600; padding: 5px 10px; }
  .rails .rail { grid-template-columns: 1fr; grid-template-areas: "send" "chips" "line"; margin: 0; padding: 4px 10px 10px; row-gap: 5px; }
  .rails .rail { background: var(--panel); }
  .rails .rail.off, .app.running .rails .rail.off { background: transparent; }
  .rails .rail .send { justify-self: start; }
  .rails .rail .send input { width: 150px; }
  .rails .rail .chips { flex-wrap: nowrap; overflow: hidden; }
  .rails .rail .chips .chip { white-space: nowrap; }
  .rails .rail.off .send { opacity: 0.55; }
  /* sticky case row leaves room for the box */
  .narr { max-width: calc(100vw - 16px); font-size: 12px; }
}
@media (max-width: 720px) {
  /* the drawer line's small label sits above its figure so the line fits the phone */
  .gfigs .lbl { display: block; margin: 0; text-align: right; font-size: 11px; line-height: 1.2; }
}

/* ---- her corrections on the first storyboards (2026-09-17, second sitting) ---- */
/* 9: every panel title one small step larger (10 -> 11.5 px); the in-panel headings (Simulated bank, Payments liquidity, Prefunding opportunity cost) stay at 10 px */
.box h2 { font-size: 11.5px; }
/* 6: Continue, Pause and Stop as one joined block of keys with 1 px of the strip between them, like the time keys; the block carries the shadow */
.runctl { display: inline-flex; gap: 1px; border-radius: var(--r-control); box-shadow: var(--shadow-low); }
.cases .runctl button.stop { box-shadow: none; border-radius: 0; }
.cases .runctl button.stop:first-child { border-top-left-radius: var(--r-control); border-bottom-left-radius: var(--r-control); }
.cases .runctl button.stop:last-child { border-top-right-radius: var(--r-control); border-bottom-right-radius: var(--r-control); }
/* 1: Tokenized collateral value is a plain sub line now (mockup.js), aligned with the other figure labels */
/* the yield shock box */
.tl .ctl .shockctl { display: inline-flex; align-items: center; gap: 6px; }
.tl .ctl .shockctl input { width: 70px; }
/* 3: desktop FICC panel: its lines share one grid, so the control column is exactly as wide as the yield shock controls
   and Issue margin call, pushed to the column's right edge, ends flush with Apply on the line above */
@media (min-width: 721px) {
  .ficc { display: grid; grid-template-columns: minmax(180px, max-content) max-content 1fr auto; column-gap: 14px; }
  .ficc > h2 { grid-column: 1 / -1; }
  .ficc > .tl { grid-column: 1 / -1; grid-template-columns: subgrid; grid-template-areas: "title ctl . fig"; column-gap: 14px; }
  .ficc > .tl.noctl { grid-template-areas: "title ctl . fig"; }
  .ficc .tl .ctl { justify-self: stretch; flex-wrap: nowrap; }
  .ficc .tl .ctl .issuectl { margin-left: 0; } /* 2026-09-17: B, left beside its label */
}
/* 8: the Prefunding opportunity cost total on its heading line (desktop), in the figure size of the panel's lines */
.tl.heading .f { font-size: 13px; color: var(--ink); }
@media (max-width: 720px) {
  /* 5: the view switcher row sits on the band like the clock row, so the white keys and Reset show as buttons (the row was white) */
  .top.phone .viewrow { background: var(--panel); }
  /* 4: chips wrap to a second line rather than being cut off at the right edge */
  .rails .rail .chips { flex-wrap: wrap; overflow: visible; }
  /* 2: the yield shock controls and Issue margin call share the panel's last line, left-aligned; a narrower box so the line fits 390 px */
  .tl .ctl .shockctl input { width: 56px; }
  .ficc .tl .ctl { flex-wrap: nowrap; }
}

/* ---- approved agent corrections (docs/critics/APPROVEDAGENTCORRECTIONS.md; her answers 2026-09-17) ---- */
/* items 20 and 21: a control whose route is closed is greyed, running case or not (Buy and Sell on the weekend; Prefund and Withdraw on CHIPS after the closing payout) */
button.off, button.off.primary, button.off:disabled, button.demo-target:disabled.primary.off { background: var(--ctl-off); color: var(--ink-3); box-shadow: none; font-weight: 500; }
/* item 21: the closed-state line under the CHIPS position line reads like the rails' "Not available" lines */
.tl.closed .line { grid-column: 1 / -1; font-size: 12px; color: var(--result); }
/* item 10: the repo fee chip's full text; on the phone it may wrap inside its chip */
@media (max-width: 720px) {
  .tl .ctl .chip { white-space: normal; max-width: 100%; }
}

/* 2026-09-17: the Tokenized line's fee chip on the same line as Mint and Redeem on the phone: a narrower amount box there */
@media (max-width: 720px) {
  .tl:has(.f[data-id="tr:tokenized"]) .ctl .unit { white-space: nowrap; }
}


/* candidate B for the phone (A/B, 2026-09-17) */
.narr.docked { position: fixed; left: 8px; right: 8px; bottom: 8px; top: auto; width: auto; max-width: none; z-index: 40; }

/* a 'Not available' line under a wallet control, like the rails' lines (After hours payment, 2026-09-17) */
.tl .line { grid-column: 1 / -1; font-size: 12px; color: var(--result); margin-top: 2px; }

.narr br.para { display: block; content: ''; margin-top: 6px; }

/* =====================================================================
   Round 16 candidate "keys" (ribbon round A, direction 1): no ribbons.
   Every sub-panel is its own white key on the panel; between keys 1 px
   of the page ground shows through (as between the joined time keys and
   the view buttons); the panel is still one group by its rounded corners
   and its one shadow. The panel title is the top key. A closed rail has
   no key: it sits on the ground between its neighbours. While a case
   runs the keys take the running tint and the ground between them is
   shown one step darker (--field) so the lines keep their contrast.
   ===================================================================== */
.band { padding: 0; background: var(--ground); }
.band > h2, .rails > h2 { margin: 0; padding: 11px 12px 8px; background: var(--panel); border-radius: var(--r-surface) var(--r-surface) 0 0; }
.rails .rail:last-child { border-radius: 0 0 var(--r-surface) var(--r-surface); }
.group:last-of-type .drawer .tl:last-child { border-radius: 0 0 var(--r-surface) var(--r-surface); }
.app.running .band, .app.running .ledger, .app.running .rails, .app.running .top.phone { background: var(--field); }
.app.running .band > h2, .app.running .rails > h2, .app.running .ledger > h2.lh, .app.running .tl, .app.running .group, .app.running .rails .rail, .app.running .rails .railpick { background: var(--tint); }
@media (max-width: 720px) {
  .band > h2, .rails > h2, .ledger > h2.lh { padding: 8px 10px 8px; }
}

/* Round 16c (2026-09-17, on keys: "too flat and repetitive"; her choice, option 2): a sub-line shares its parent's key.
   The 1 px seam is removed above every indented sub-line, so USD and "held as deposit tokens" are one key, USDC and ETH one key,
   Pledged to FICC with Non-tokenized and Tokenized one key, a heading with its lines (By custodian, Payments liquidity, Peak Prefunding,
   Simulated bank) one key, Federal Reserve account with Remaining daylight credit one key, an operator's fee row with its network row one key. */
.tl.sub, .drawer .tl.sub { margin-top: 0; }

/* =====================================================================
   Round 16d candidate "softseams" (her option 1), on fewerkeys. The hard
   1 px line of page ground between keys is gone (every key's top margin
   is 0); in its place each key below another carries a faint inset
   shadow along its top edge, ink at a low opacity, 1 px down and 2 px of
   blur, so the key above reads as a plate lying slightly over the next.
   Shadow and tone only: no drawn line, no border, no gradient. The same
   device on the tinted keys while a case runs. The title key of a panel
   and the phone's title row are top edges and carry no seam. A sub-line
   shares its parent's key (16c) and carries none either.
   ===================================================================== */
:root { --seam: inset 0 1px 2px rgba(22, 25, 29, 0.16); }
.tl, .drawer .tl, .rails .rail, .group { box-shadow: var(--seam); }
.tl.sub, .drawer .tl.sub { box-shadow: none; }
@media (max-width: 720px) {
  .rails .railpick, .top.phone .trow { box-shadow: var(--seam); }
  .cases.phone { box-shadow: var(--seam), var(--shadow-low); }
  .cases.phone.running { box-shadow: var(--seam), var(--shadow-strip); }
}

/* Fix (advisor, 2026-09-17, her words: "some now have a grey rounded edge? but not all"): on the phone the ledger panels kept the 8 px 10 px
   inner padding of the general phone panel rule, which the mockup never showed because the panel was white; with the panel painted in the
   ground colour it appeared as a grey rim around the keys. The ledger, like the band and rails panels, has no inner padding on any size. */
.ledger { padding: 0; }

/* Fix (2026-09-17: "look at how close the lower end of some panels sit to elements in them, particularly evident with the button in the
   ficc panel but also in the treasury and risk panel"): round 16's keys removed the panel's inner padding so the keys reach the panel's edge,
   which left the last key's own 3–6 px under its content. The last key of a panel now keeps the panel's old inner padding below its content:
   11 px on the desktop and 8 px on the phone, the same as the title key has above it. */
.band > .tl:last-child, .rails .rail:last-child, .group:last-of-type .drawer .tl:last-child { padding-bottom: 11px; }
.ledger > .group:last-of-type > .gline { padding-bottom: 11px; }
@media (max-width: 720px) {
  .band > .tl:last-child, .rails .rail:last-child, .group:last-of-type .drawer .tl:last-child { padding-bottom: 8px; }
  .ledger > .group:last-of-type > .gline { padding-bottom: 8px; }
  .rails .rail.picked:last-child { padding-bottom: 8px; }
}

/* =====================================================================
   Round 11b candidate "chips" (figures and chips, repeat; direction 1).
   Every chip is one size everywhere, a clear step smaller than today:
   value 10 px, label 9 px (control-line chips were 11/10; rail chips
   were already 10/9 and shrink by their box), padding 1px 5px (was
   2px 7px and 1px 6px), the parts 4 px apart (was 6), and the tip mark
   inside a chip 12 px with a 9 px letter (was 14 / 10 px), so a chip
   reads clearly below the 13 px titles and the 12 px controls. The
   phone Tokenized line's amount box is back at the phone's 104 px and
   its line may wrap (the 70 px box and its nowrap are removed above).
   Figures unchanged. Edited in place: .chip, .chip .cl,
   .rails .rail .chips .chip, and the phone Tokenized rule.
   ===================================================================== */
.chip button.tip { width: 12px; height: 12px; line-height: 12px; font-size: 9px; margin-left: 2px; }

/* Round 11c candidate "allplain" (2026-09-18: "wdyt about rendering all chips on mobile this way?"; then: "look at how chips labels and figures formatting difference causes them to appear vertically jagged"): on the phone EVERY chip loses its fill and reads as small grey text, chips parted by a middle dot; the chip's label is set at the value's size and the parts share a baseline, so the line is level. Desktop unchanged. */
@media (max-width: 720px) {
  .chip, .tl .ctl .chip, .rails .rail .chips .chip { background: none; padding: 0; margin-left: 0; gap: 3px; align-items: baseline; }
  .chip .cl, .rails .rail .chips .chip .cl { font-size: 10px; }
  .chip + .chip::before { content: "\00B7"; color: var(--ink-3); margin-right: 4px; }
  .rails .rail .chips { gap: 4px; }
}

/* 2026-09-18, "desktop too": the desktop's filled chips get the same level line as the phone's text chips — the label at the value's size, label, value and mark on one baseline. */
.chip, .rails .rail .chips .chip { align-items: baseline; }
.chip .cl, .rails .rail .chips .chip .cl { font-size: 10px; }

/* Round 11d candidate "figures" (2026-09-18: the additional round on 11b — the current smaller chips against smaller chips with larger figures, on the mockup as it now stands):
   every figure one step larger at every level, the step and the line-height holds of round 11b's figures candidate (sub 12→13, body 13→14, main 17→19, big 26→28; phone big 20→22, main 15→17); weights, colours and chips unchanged. */
.tl .f { font-size: 14px; line-height: 1.3; }
.tl.sub .f { font-size: 13px; line-height: 1.29; }
.drawer .tl .f { font-size: 13px; line-height: 1.29; }
.tl.main .f { font-size: 19px; line-height: 1.25; }
.tl.big .f { font-size: 28px; line-height: 1.3; }
.tl.heading .f { font-size: 14px; }
.n.gt { font-size: 19px; line-height: 1.25; }
.fig .n { font-size: 13px; }
@media (max-width: 720px) {
  .tl .f { line-height: 1.2; }
  .tl.sub .f, .drawer .tl .f { line-height: 1.2; }
  .tl.big .f { font-size: 22px; line-height: 1.18; }
  .tl.main .f { font-size: 17px; line-height: 1.14; }
  .n.gt { font-size: 17px; line-height: 1.14; }
  .wallet .n.gt { font-size: 22px; line-height: 1.18; }
}

/* =====================================================================
   Round 18 candidate "quiet" (AXES direction 1, "same weight as the
   panels"): the top strip and the case strip lose their darker band and
   take the panels' own treatment. On the desktop the two strips are two
   white keys of one panel above the others, parted by the soft seam
   (--seam on the case strip), with the panel's shadow and corners. On
   the phone the title row, the clock row, the view row and the case row
   are four white keys of one panel, parted by the seam each already
   carries. The controls that were white keys on the band take a fill
   that increases their contrast on white (round 10): the view keys, the
   time keys and Reset take --ctl, the fill of Walk-through and the case
   buttons; the day pull-down and the time box take --sunk, the fill of
   every pull-down and amount box on white, so the readout sits darker
   than the keys beside it. The chosen view and the running case stay in
   ink. While a case runs the strips take the running tint like every
   surface; on the phone the title, clock and view rows now take it too
   (they were band-coloured and had no running rule).
   ===================================================================== */
.app.running .top.phone h1, .app.running .top.phone .trow { background: var(--tint); }

/* Round 18 fork "liftedwhite" (2026-09-18, torn between quiet's white panel and fenced's keys that pop): quiet, with every control in the strips a WHITE key lifted off the white panel by the low shadow, the way Pause and Stop already are; joined blocks carry the shadow as one block and show a light line between their keys. */
.views, .clockctl, .clock, .caseset, .top > button[data-id="reset"], .top.phone .trow > button[data-id="reset"], .cases .walk, .cases.phone .casepick, .cases > button.stop { box-shadow: var(--shadow-low); border-radius: var(--r-control); }
.views, .clockctl, .clock, .caseset { background: var(--line-soft); }
.views button, .clockctl button, .clock select, .clock input, .caseset button, .top > button[data-id="reset"], .top.phone .trow > button[data-id="reset"], .cases .walk, .cases.phone .casepick { background: var(--panel); }
.cases.phone .casepick { appearance: none; -webkit-appearance: none; padding-right: 24px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%2316191d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 8px center; } /* the native select look off so the keys' shadow renders on iOS; the chevron drawn (the product owner, 2026-09-25) */
.views button[aria-pressed="true"], .cases button[aria-pressed="true"] { background: var(--ink); }
.views button:disabled { background: var(--panel); }
.views button[aria-pressed="true"]:disabled, .cases button[aria-pressed="true"]:disabled { background: var(--ink); color: var(--on-ink); }

/* Round 18 fork "halflift" (2026-09-18: agrees lifted white keys fit the motif, "however, i'm concerned about legibility in the 'less lifted' version"): the key shadow half way between the panels' low shadow and morelift's, so a key's edge reads on the white strip without the keys floating above their panel. */
:root { --shadow-key: 0 1px 2px rgba(22, 25, 29, 0.10), 0 2px 5px rgba(22, 25, 29, 0.11); }
.views, .clockctl, .clock, .caseset, .top > button[data-id="reset"], .top.phone .trow > button[data-id="reset"], .cases .walk, .cases.phone .casepick, .cases > button.stop, .runctl { box-shadow: var(--shadow-key); }

/* Round 23b "hoursright" (2026-09-18 on clockwork: "i don't like the clock button reorder. could possibly like the hours chips being moved. same bank only would need to be placed next to fee though."): clockwork's rail idea alone — the strip untouched; every rail's Hours chip at the right end of the rail's chip line against its Send box; on the Deposit token rail "Same bank only" sits next to Fee. */
.rails [data-id="rail:fedwire"] .chips .chip:nth-child(3) { margin-left: auto; }
.rails [data-id="rail:chips"] .chips .chip:nth-child(2) { margin-left: auto; }
.rails [data-id="rail:rtp"] .chips .chip:nth-child(3) { margin-left: auto; }
.rails [data-id="rail:fednow"] .chips .chip:nth-child(3) { margin-left: auto; }
.rails [data-id="rail:token"] .chips .chip:nth-child(2) { margin-left: auto; order: 3; }
.rails [data-id="rail:token"] .chips .chip:nth-child(1) { order: 1; }
.rails [data-id="rail:token"] .chips .chip:nth-child(3) { order: 2; }
.rails [data-id="rail:usdc"] .chips .chip:nth-child(2) { margin-left: auto; }
@media (min-width: 721px) {
  .rails .rail { grid-template-columns: minmax(160px, 1fr) 250px; }
}
@media (max-width: 720px) {
  .rails [data-id="rail:fedwire"] .chips .chip:nth-child(3)::before { content: none; }
  .rails [data-id="rail:chips"] .chips .chip:nth-child(2)::before { content: none; }
  .rails [data-id="rail:rtp"] .chips .chip:nth-child(3)::before { content: none; }
  .rails [data-id="rail:fednow"] .chips .chip:nth-child(3)::before { content: none; }
  .rails [data-id="rail:token"] .chips .chip:nth-child(2)::before { content: none; }
  .rails [data-id="rail:token"] .chips .chip:nth-child(3)::before { content: "\00B7"; }
  .rails [data-id="rail:usdc"] .chips .chip:nth-child(2)::before { content: none; }
}

/* Round 23 "books", taken with the Treasuries drawer fixed (2026-09-18: "books single with hours right"; then the total line iterated to "light cell"; "two seam strengths with seam below"): an open drawer is set as a statement. The Tokenized line is the third custody line under By custodian (mockup.js); a total line closes the by-use entries; the heading's figure hides while the drawer is open; By custodian follows as a memo. The sum's mark is a light sunk cell: the total in a cell of the lighter sunk fill with a faint inset, cut into the panel like an amount box. Two seam strengths: the seam between lines inside a drawer is a lighter, shorter one (--seam-inner) and the seam between drawers stays; the total row carries no seam above it (the sum belongs to its entries), and the lighter seam below it parts the memo. */
:root { --seam-inner: inset 0 1px 1px rgba(22, 25, 29, 0.08); }
.drawer .tl { box-shadow: var(--seam-inner); }
.drawer .tl.sub { box-shadow: none; }
.tl.total { grid-template-areas: "ctl ctl fig"; padding-top: 5px; padding-bottom: 5px; }
.drawer .tl.total { box-shadow: none; }
.tl.total .f { padding: 8px 10px; margin-right: -8px; background: var(--sunk-off); box-shadow: inset 0 1px 2px rgba(22, 25, 29, 0.14); border-radius: var(--r-control); font-size: 19px; font-weight: 600; color: var(--ink); }
.group.open > .gline .gfigs { visibility: hidden; }
.wallet .group.open > .gline .gfigs { visibility: visible; } /* the phone wallet's drawers carry no total cell inside: the total stays on the title line (the product owner, 2026-09-25) */
@media (max-width: 720px) { .tl.total .f { font-size: 17px; } }

/* 2026-09-19 (books extended; Payment fee revenue): the drawer's figure cell sits directly under the title with no white space
   ("move up so it sits directly under the title with no white space"): the head cell row loses its top padding and rises by the
   title row's bottom padding (8 px desktop, 5 px phone; the title's hidden figure kept that height). No seam above it, as on every cell. */
.drawer .tl.total.head { padding-top: 0; margin-top: -8px; }
@media (max-width: 720px) { .drawer .tl.total.head { margin-top: -5px; } }

/* 2026-09-19 (her report: the Pause key while paused "appears entirely blacked out"): the paused key is drawn as Resume with
   aria-pressed, and `.cases button.stop` (black text) came after the pressed-key rule at equal weight, so the text stayed black on
   the ink background. White text on the pressed Pause/Stop key; nothing else changes. */
.cases button.stop[aria-pressed="true"] { color: var(--on-ink); }

/* R5 unit 2a (change list 3.4, D 9): the "Start here" box is a narration box one type step smaller than the box (13 px on the desktop, 12 px on the phone). */
.narr.start { font-size: 12px; }
@media (max-width: 720px) { .narr.start { font-size: 10px; } } /* the phone's key labels are 11 px */

/* =====================================================================
   Round 17, size comparison (her words 2026-09-23: "prefer the title in
   folds for desktop and stays for mobile" / "i'd also like the title to
   be larger. can you give me two larger sizes to compare?"). Phone size comparison (her words 2026-09-23: "28px is better but i also want to see larger sizes on mobile"): the phone name at 22px instead of 13. Assembled
   by the advisor: folds' desktop name (the name on its own line, the
   descriptor 11 px under it in the strip) at 28 px instead of 19; stays'
   phone name (13 px, the descriptor 11 px on its own line inside the
   title key); phone rows and panel order as today. Nothing else changes.
   ===================================================================== */
.top h1 .name { display: block; font-size: 28px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.top h1 .desc { display: block; padding-top: 1px; font-size: 11px; font-weight: 400; color: var(--ink-2); letter-spacing: 0; line-height: 1.3; }
@media (max-width: 720px) {
  .top.phone h1 .name { font-size: 22px; line-height: 1.25; }
  .top.phone h1 .desc { padding-top: 0; margin: 2px 0 0; }
}


/* =====================================================================
   Round 19 "groundonly" (her words 2026-09-23: "let's try ground only
   compared to winner and half step"), assembled by the advisor: the
   open drawer and its lines on the lighter band grey (--step, #f5f6f8)
   as in half step, with no top-edge shadow; the seams as today; the
   running state as today.
   ===================================================================== */
.drawer, .group:nth-of-type(even) .drawer { background: var(--step); }
.drawer .tl, .drawer .tl:nth-child(even), .group:nth-of-type(even) .drawer .tl:nth-child(even) { background: var(--step); }

/* =====================================================================
   Round 21 pick (her words 2026-09-23: "i like the larger text on desktop
   but not the heavier outline on phone" / "no to winner" / "ground
   dimmed"), assembled by the advisor: the desktop sentence 14 px (the
   phone keeps 12 px); while a case runs the page ground behind the
   panels dims to #d0d5db (a step under --field) so the panels keep
   their lift; the surface tint, the lit control, the phone box, the
   shadow and the trail as before.
   ===================================================================== */
.narr { font-size: 14px; }
@media (max-width: 720px) { .narr { font-size: 12px; } } /* restated after the desktop rule so the phone keeps it */
html:has(.app.running), body:has(.app.running) { background: #d0d5db; }


/* =====================================================================
   Round 8c, second tier, restored 2026-09-23 (her words: "of course it must
   be corrected"): the 1 px trail box on every figure a guide has changed
   since it began (the "moved" class the app sets, marks.ts). R4 unit 3b
   put these rules in app/styles.css; the R5 stylesheet swap (item 0)
   dropped them though change list 7.12 said the mark was kept. Copied
   from setup/polish/rounds/r8c/boxed/styles.css unchanged.
   ===================================================================== */
.n.moved, .clockbox.moved, tr.moved td.n { position: relative; isolation: isolate; }
.oline > .n.moved { justify-self: end; }
.n.moved::after, .clockbox.moved::after {
  content: "";
  position: absolute;
  inset: -2px -4px;
  border: 1px solid var(--tour);
  border-radius: var(--r-surface);
  background: var(--tour-wash);
  z-index: -1;
}
tr.moved td.n::after {
  content: "";
  position: absolute;
  inset: -1px 0;
  border: 1px solid var(--tour);
  border-radius: var(--r-surface);
  background: var(--tour-wash);
  z-index: -1;
}

/* =====================================================================
   Round 23c pick (her words 2026-09-23: "preserve winner on phone and with
   unit after box is a maybe on desktop" / "take it on desktop"): on the
   desktop every rail slip reads Send, the amount box, then the unit, the
   unit at a fixed width so the Send keys stand in one column and the box
   sits in the wallet's balance column; the phone slip as before.
   ===================================================================== */
@media (min-width: 721px) {
  .rails .rail .pair > .unit { min-width: 36px; }
}
/* Build 2026-09-23: the slip's markup order becomes Send, box, unit (her pick's
   own order, so the keyboard's tab order follows the picture); the desktop
   needs no reorder, and the phone keeps its unit, box, Send by order. */
@media (max-width: 720px) {
  .rails .rail .pair > button.primary { order: 2; }
  .rails .rail .pair > .unit { order: -1; }
}


/* =====================================================================
   Round 24 pick "hue only" (her words 2026-09-23: "hue only"): tell 12 — the
   eleven fill tokens (--ctl, --ctl-hover, --ctl-active, --ctl-off, --sunk,
   --sunk-hover, --sunk-off, --chip-fill, --track, --track-hover,
   --track-off) re-based from rgba(22, 25, 29, a) to rgba(0, 30, 72, a)
   at the same alphas, so every fill carries the page's blue-grey hue at
   its former darkness (edited in place in :root above). The desktop
   chips keep their fill (surfacecolour's tell-14 change not taken).
   ===================================================================== */

/* =====================================================================
   Subtitle, solution 1 (her words 2026-09-23: "i would like to see solution 1
   to the subtitle break in a storyboard" / "lowercase and draw it"): on
   the phone the descriptor breaks after the comma, two deliberate lines —
   "a settlement infrastructure simulator," then "comparing traditional
   and blockchain-based rails" — the second clause in its own span set as
   a block; the desktop as the winner. Page code: the descriptor's two
   clauses become two spans (.d1, .d2) inside .desc.
   ===================================================================== */
@media (max-width: 720px) {
  .top.phone h1 .desc .d2 { display: block; }
}

/* round 25, candidate inter: the shipped face Inter (SIL OFL), one variable file for 400-600; in the app the url becomes fonts/inter/variable.woff2 */
@font-face { font-family: "Inter"; src: url("fonts/inter/variable.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
:root { --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; }

/* round 25, internowrap: the Yield shock label held to one line on the phone (her word 2026-09-23, "draw it with the one line rule") */
@media (min-width: 375px) { .tl .ctl .shockctl .unit { white-space: nowrap; } } /* below 375 px the label may break as in the base: the row would otherwise run 13 px past a 360 px screen and 53 px past a 320 px one (measured 2026-09-23), and the fit gate refuses any horizontal overflow at 360 */

/* =====================================================================
   Build 2026-09-24, the desktop header (her words: "right column" on the
   gallery of the step check's pictures, then "24"): on the desktop the
   descriptor is a full-width line under the row that holds the name, the
   view keys, the clock and Reset, and the name stands 24 px before the
   view keys. The header as built (the descriptor beside the name, one
   447 px line) pushed the view keys right and left 104 px before the
   clock, where the clock steps' boxes live (step check 8 of 82 red).
   ===================================================================== */
@media (min-width: 721px) {
  .top { flex-wrap: wrap; }
  .top h1 { display: contents; }
  .top h1 .name { display: block; margin-right: 12px; } /* 12 + the header's own 12 px gap = 24 px to the view keys */
  .top h1 .desc { flex-basis: 100%; order: 9; padding-top: 0; }
}