/* Direction B — the design system behind Spread Proof, from candidate-b.dc.html in
   the Claude Design project (6fab8424). Every value here is read off that file.

   Retune the system in the token block; the application layer below only composes it.
   Class names are unchanged from the direction this replaces, so the templates carry
   the same semantics and only the shapes moved. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&display=swap');

:root {
  --color-bg: #FBF9F6;
  --color-surface: #FFFFFF;
  --color-text: #262421;
  --color-body: #504B45;
  --color-muted: #6E6862;
  --color-faint: #76716B;   /* 4.8:1 on white; #908A83 was 3.42 - REVIEW.md B2 */
  --color-quiet: #A8A29A;

  --color-line: #EAE4DC;          /* card and section borders */
  --color-hair: #F2EDE6;          /* row rules inside a card */
  --color-hair-soft: #F7F3EE;     /* the quietest rule, in the activity log */
  --color-rule: #DDD6CC;          /* above a subtotal — heavier than a row rule */
  --color-edge: #D6CFC5;          /* an outlined control */
  --color-chip: #F5F1EB;          /* a resting chip or icon well */
  --color-sunken: #FDFCFA;        /* a child row, barely off white */
  --color-track: #F0EAE2;         /* the share bar's groove */

  --color-accent: #0E6E5E;
  --color-accent-hover: #0B5A4D;
  --color-accent-deep: #17554A;
  --color-accent-100: #E8F2F0;
  --color-accent-200: #D6EBE6;

  --color-warn: #A03A16;
  --color-warn-100: #FBE9E0;

  /* Statement semantics — the three colours the workbook itself uses. */
  --color-keyed: #2C5C7A;         /* keyed from the report */
  --color-tie: #2E7D5B;           /* a check that tied */
  --color-tie-100: #E5F1EB;
  /* The run console's page map: what each page is to the run, in ONE hue - the keyed
     blue, "read by the run" - at three lightness steps, darkest first. 9.60 / 3.68 / 1.79
     against the ground and 2.61 / 2.05 apart (t_console_colours). A light ground has no
     room for a fourth fill, so "not needed" is an outline. Never the tie green: that
     means a relationship holds, and a page being looked at is not that. */
  --color-map-statement: #22455E;
  --color-map-notes: #5E86A6;
  --color-map-auditor: #A9C0D0;
  --color-map-idle-edge: #C9C2B8;
  --color-sharp: #A03A16;         /* moved sharply year on year */
  /* Review amber - somebody will be asked. The normalization board already teaches it;
     the review screen's open questions and the verdict bar's "edited" state use it too.
     Never red: in this product red means a break. */
  --color-review: #E0A43A;
  --color-review-deep: #986912;   /* 4.8:1 on white; #A97514 was 3.91 - REVIEW.md B3 */
  --color-review-100: #FDF8EE;
  --color-review-ink: #7A5E23;     /* text on the amber ground, 5.75:1 */
  --color-review-edge: #E5CE9E;
  /* Held - the pale ground of a thing that has been settled: consent given, every
     relationship holding. Quieter than --color-accent-100, which is a control's. */
  --color-held-100: #F1F7F4;
  --color-held-edge: #C9D8D2;
  --color-held-ink: #3A5A52;
  --color-held-deep: #1E4A40;
  /* A derived figure's ground: computed from other lines, so it is set in the ink on this
     wash (design_handoff_analyst_flow, the colour contract). It was muted ink on white,
     which read as a figure that mattered less rather than one that carries a formula. */
  --color-derived: #F6F4F0;
  /* Keyed by an analyst - its own hue, never the break red (7.6:1 on white). The workbook
     file uses the same colour, so the screen and the file agree about whose figure it is. */
  --color-yours: #6A3D9A;
  --color-yours-100: #F3EEF8;
  /* The source panel's wash: amber by default, never red, never blurred. */
  --wash-fill: rgba(224, 164, 58, .30);
  --wash-edge: #A97514;
  --ease: cubic-bezier(.4, 0, .2, 1);

  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-heading: 'DM Sans', system-ui, sans-serif;
  --font-heading-weight: 700;

  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;

  --radius-card: 18px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-chip: 9px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(38, 36, 33, .04), 0 10px 30px rgba(38, 36, 33, .05);
  --shadow-drawer: 0 24px 60px rgba(38, 36, 33, .22);
}

*, *::before, *::after { box-sizing: border-box; }
/* A class that sets `display` outranks the user agent's [hidden] rule, so a .btn
   marked hidden stayed on screen — the commentary toggle showed on tabs that have
   no commentary column. */
[hidden] { display: none !important; }
body {
  margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400;
  background: var(--color-bg); color: var(--color-text); font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 var(--space-2);
}
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-decoration: none; border-bottom: 1px solid rgba(14, 110, 94, .3); }
a:hover { border-bottom-color: var(--color-accent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-sm); }
::selection { background: var(--color-accent-200); }

.hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-line); }

/* — buttons — every one is a pill in this direction — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  font-family: var(--font-body); font-weight: 500; font-size: 15px; line-height: 1.2;
  color: var(--color-text); background: var(--color-surface);
  border: 1px solid transparent; padding: 12px 22px; border-radius: var(--radius-pill);
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: #FFFFFF; border-color: var(--color-accent); }
.btn-primary:hover:not(:disabled) { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn-secondary { border-color: var(--color-edge); }
.btn-secondary:hover:not(:disabled) { border-color: var(--color-text); }
/* A toggle that is on says so — the source column stays wide until it is pressed again. */
.btn-secondary.is-on { border-color: var(--color-accent); background: var(--color-accent-100); color: var(--color-accent); }
.btn-dark { background: var(--color-text); color: #FFFFFF; border-color: var(--color-text); }
.btn-dark:hover:not(:disabled) { background: #000000; }
.btn-quiet { background: transparent; border-color: transparent; color: var(--color-accent); padding: 10px 6px; font-size: 14px; }
.btn-sm { padding: 9px 17px; font-size: 13px; }
a.btn { border-bottom-width: 1px; }

/* — forms — */
.field > label { display: block; font-size: 12px; margin-bottom: 5px; color: var(--color-muted); }
.input {
  width: 100%; padding: 10px 16px; font: inherit; font-size: 14px;
  color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-bg); border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
}
.input:hover { border-color: var(--color-edge); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }

/* The basis choice is two pills, not a segmented block. */
.seg { display: inline-flex; gap: 8px; }
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 10px 18px; font-size: 14px; font-weight: 500; white-space: nowrap;
  border: 1px solid var(--color-edge); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-text);
}
.seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.seg-opt:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-100); color: var(--color-accent); }
.seg-opt:not(:has(input:checked)):hover { background: var(--color-chip); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 500;
  padding: 4px 11px; border-radius: var(--radius-pill); white-space: nowrap;
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent); }
.tag-warn { background: var(--color-warn-100); color: var(--color-warn); }
/* Amber: somebody will be asked - an upload that has gone, a report the check refused, a
   waiver. Red is a break and nothing else (CLAUDE.md, Words and colours). */
.tag-review { background: var(--color-review-100); color: var(--color-review-ink); }
/* The standing "Concept study" label beside the name. Deliberately not tag-accent:
   that pill is Demo mode's, and two of the same pill side by side read as one status
   split in two. */
.tag-concept {
  background: var(--color-chip); color: var(--color-muted);
  border: 1px solid var(--color-edge); text-transform: uppercase;
  letter-spacing: .06em; font-size: 11px; padding: 3px 9px;
}

/* — cards — */
.panel, .card {
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-card); padding: 28px;
}
.panel { box-shadow: var(--shadow-card); }
.aside-note {
  background: var(--color-accent-100); border-radius: var(--radius-card);
  padding: 20px 22px; font-size: 14px; line-height: 1.6; color: var(--color-accent-deep);
}
.aside-note.spaced { margin-top: 20px; }
.aside-note.bad { background: var(--color-warn-100); color: var(--color-warn); }
/* A form refused for want of its token (_refused.html). Over the page, not in it: on the
   finished screen every pixel of height is the report and the sheet. Not red - nothing
   broke; the page was open too long. */
.refused-note {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 60;
  margin: 0; max-width: min(64ch, calc(100vw - 32px)); padding: 14px 18px;
  gap: 14px; align-items: center;
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-line); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); font-size: 14px; line-height: 1.5;
}
/* Only while open: an author `display` would beat the browser's own
   dialog:not([open]) { display: none } and Dismiss would leave it standing. */
.refused-note[open] { display: flex; }
.refused-note p { margin: 0; }
.refused-note form { margin: 0; flex: 0 0 auto; }
/* What no arithmetic can catch - the scale, the company - is asked of a person: amber. */
.aside-note.ask { background: var(--color-review-100); color: var(--color-review-ink);
  border: 1px solid var(--color-review-edge); }

/* Secondary text: a fact that supports the one beside it rather than competing with
   it. The templates have asked for this class on 25 elements since the design system
   was written and it was never defined, so every one of them has been rendering at body
   strength - which is why those lines read as a wall rather than as a hierarchy. */
.muted { color: var(--color-muted); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 12px; font-weight: 500; color: var(--color-faint);
  padding: 9px 10px; border-bottom: 1px solid var(--color-line);
}
.table td { padding: 8px 10px; border-bottom: 1px solid var(--color-hair); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .4 } }
@keyframes blink { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }
summary { cursor: pointer; list-style: none; }
summary.kicker { font-size: 12px; letter-spacing: .06em; }
summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ------------------------------------------------------------------ application */

/* The shell is a fixed-height column: header, a main that scrolls, footer. The
   workbook screen needs that so its table can own the remaining height and scroll
   inside itself rather than pushing the page. */
.shell { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }

.top {
  display: flex; align-items: center; gap: 20px; padding: 13px 28px;
  background: var(--color-surface); border-bottom: 1px solid var(--color-line);
  flex-wrap: wrap; flex: 0 0 auto;
}
.top-brand {
  display: flex; align-items: center; gap: 10px; font-family: var(--font-heading);
  font-weight: 700; font-size: 18px; letter-spacing: -.01em;
  color: var(--color-text); border-bottom: 0;
}
.top-brand:hover { opacity: .7; border-bottom: 0; }
.top-mark { width: 26px; height: 26px; border-radius: var(--radius-chip); background: var(--color-accent); display: inline-block; }
.top-sub { font-size: 14px; color: var(--color-muted); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.top-right form { margin: 0; }
.top-note { font-size: 13px; color: var(--color-muted); white-space: nowrap; }

.main {
  flex: 1; min-height: 0; width: 100%; max-width: 1560px; margin: 0 auto;
  padding: 18px 28px; box-sizing: border-box;
  display: flex; flex-direction: column; overflow: auto;
}
.main-wide { max-width: 1560px; }
.main-narrow { max-width: 900px; }

.foot {
  border-top: 1px solid var(--color-line); background: var(--color-surface);
  padding: 9px 28px 11px; display: flex; flex-direction: column; gap: 2px;
  font-size: 12px; color: var(--color-faint); flex: 0 0 auto;
}
.foot .push { margin-left: auto; }

/* Faint, not quiet: --color-quiet is 2.53:1 on the page and was carrying words
   (2026-09-19 review). Quiet stays for rules and fills, never for text. */
.kicker { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-faint); }
.display { font-size: 52px; line-height: 1.06; letter-spacing: -.03em; margin: 0 0 18px; }
.display-sm { font-size: 30px; line-height: 1.15; letter-spacing: -.02em; margin: 18px 0 6px; }
.lede { font-size: 19px; line-height: 1.6; color: var(--color-body); max-width: 50ch; margin: 0 0 32px; text-wrap: pretty; }

.split { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: start; }
.split-tight { padding-top: 0; }

/* — how it runs — */
.how { list-style: none; margin: 0; padding: 0; }
.how li {
  display: grid; grid-template-columns: 30px 1fr; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid var(--color-hair);
}
.how li:last-child { border-bottom: 0; }
.how-n {
  width: 26px; height: 26px; border-radius: var(--radius-chip);
  background: var(--color-accent-100); color: var(--color-accent);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.how-t { font-size: 15px; font-weight: 500; }
.how-b { display: block; font-size: 14px; line-height: 1.5; color: var(--color-muted); margin-top: 3px; }

/* — the drop zone — */
.drop {
  display: flex; align-items: center; gap: 18px; cursor: pointer;
  border: 2px dashed var(--color-edge); border-radius: var(--radius-md);
  padding: 28px; background: var(--color-bg);
}
.drop.over { border-color: var(--color-accent); background: var(--color-accent-100); }
.drop input[type=file] { position: absolute; opacity: 0; width: 0; height: 0; }
.drop-mark {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: var(--radius-md);
  background: var(--color-accent-100); color: var(--color-accent);
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700;
}
.drop-name { flex: 1; font-size: 19px; font-weight: 500; line-height: 1.3; }
.drop .btn { pointer-events: none; }
.limit { font-size: 13px; color: var(--color-muted); margin-top: 16px; }

/* — "or pull it from the web" — */
.url-field {
  display: flex; align-items: center; gap: 10px; flex: 1 1 300px; min-width: 0;
  background: var(--color-bg); border: 1px solid var(--color-line);
  border-radius: var(--radius-pill); padding: 0 8px 0 16px;
}
.url-field:focus-within { border-color: var(--color-accent); }
.url-field .input {
  flex: 1; min-width: 0; background: transparent; border: none; padding: 13px 0;
  border-radius: 0; font-size: 15px;
}
.url-field .input:hover, .url-field .input:focus-visible { border-color: transparent; outline: none; }

.go-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.go-row .btn-primary { margin-left: auto; font-size: 16px; padding: 14px 26px; }

/* — the run in progress — */
.run-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.run-chip {
  display: flex; align-items: center; gap: 10px; background: var(--color-accent-100);
  border-radius: var(--radius-pill); padding: 6px 14px 6px 10px;
  font-size: 13px; font-weight: 500; color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}
.spinner {
  width: 14px; height: 14px; border: 2px solid var(--color-accent);
  border-top-color: transparent; border-radius: 50%;
  animation: spin .8s linear infinite; display: inline-block;
}
.run-eta { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--color-muted); margin-left: auto; font-variant-numeric: tabular-nums; }

/* The five stages, as a strip of equal cells with their own progress bars. */
.stages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.stage { display: flex; flex-direction: column; opacity: .6; }
.stage.is-done, .stage.is-running { opacity: 1; }
.stage-chip {
  width: 32px; height: 32px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px;
  background: var(--color-chip); color: var(--color-faint);
}
.stage.is-done .stage-chip, .stage.is-running .stage-chip { background: var(--color-accent-200); color: var(--color-accent); }
.stage.is-running .stage-chip { box-shadow: 0 0 0 3px rgba(14, 110, 94, .14); animation: pulse 1.8s ease-in-out infinite; }
.stage-name { font-size: 13px; font-weight: 500; color: var(--color-faint); }
.stage.is-done .stage-name, .stage.is-running .stage-name { color: var(--color-text); }
.stage-state { font-size: 12px; color: var(--color-faint); margin-top: 1px; }
.stage.is-running .stage-state { color: var(--color-accent); }
.stage-bar { height: 5px; border-radius: var(--radius-pill); margin-top: 10px; background: var(--color-line); }
.stage.is-done .stage-bar { background: var(--color-accent); }
.stage.is-running .stage-bar { background: linear-gradient(90deg, var(--color-accent) 55%, var(--color-line) 55%); }

.log-row {
  display: grid; grid-template-columns: 22px 46px 1fr; gap: 12px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--color-hair-soft); font-size: 15px;
}
.log-row:last-child { border-bottom: 0; }
.log-t { font-variant-numeric: tabular-nums; color: var(--color-faint); font-size: 13px; }
.log-m { color: var(--color-muted); }
.log-row.is-last .log-m { color: var(--color-text); font-weight: 500; }

/* — the finished workbook — */
.wb-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.wb-head h1 { font-size: 21px; line-height: 1.2; margin: 0; }
.wb-meta { font-size: 12px; color: var(--color-faint); }
.wb-actions { margin-left: auto; display: flex; gap: 8px; }

.wb-layout {
  display: grid; gap: 14px; margin-top: 10px; align-items: stretch;
  flex: 1 1 auto; min-height: 360px; overflow: hidden;
  grid-template-columns: 224px 1fr;
}
.wb-layout.is-collapsed { grid-template-columns: 54px 1fr; }
/* The failed screen's spread sits in a page that scrolls, so it takes a height of its own. */
.wb-layout.is-extracted { min-height: 420px; }
/* THE REPORT STAYS BESIDE THE ROW (owner, 2026-09-28). The stopped screen is a flowing
   page, so its sheet is as tall as its rows and the page scrolls; the report pane was
   stretched to the same 2,089px on a 900px screen with its PDF page at the top, so the
   row banded in it went off-screen as the analyst scrolled down the sheet. Held to the
   window instead, and sticky, it stays level with whatever row is on screen - the chat's
   column, which takes its place, likewise. `clip`, not `hidden`: hidden makes the layout
   a scroll box of its own, and a sticky child inside one never sticks (measured). */
@media (min-width: 1181px) {
  .wb-layout.is-extracted.has-source { overflow: clip; }
  .wb-layout.is-extracted.has-source > .wb-source,
  .wb-layout.is-extracted > .chat-panel {
    position: sticky; top: 8px; align-self: start; height: calc(100dvh - 72px);
  }
}

.wb-nav {
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-card); padding: 14px 12px;
  min-height: 0; max-height: 100%; overflow: auto; box-sizing: border-box;
}
.wb-nav-top { display: flex; align-items: center; gap: 8px; padding: 0 2px 10px; }
.wb-nav-toggle {
  background: var(--color-chip); border: none; border-radius: var(--radius-pill);
  width: 30px; height: 30px; flex: 0 0 30px; font: inherit; font-size: 15px;
  color: var(--color-body); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.wb-nav-toggle:hover { background: var(--color-line); }
.wb-nav-title { font-size: 13px; font-weight: 500; color: var(--color-muted); white-space: nowrap; }
.wb-group { margin-bottom: 12px; }
.wb-group-title { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-faint); padding: 6px 8px; }
.wb-tab {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; border: none; cursor: pointer; font: inherit;
  font-size: 14px; padding: 8px 11px; border-radius: var(--radius-sm); margin-bottom: 1px;
  background: transparent; color: var(--color-text);
}
.wb-tab:hover { background: var(--color-chip); }
.wb-tab.is-active { background: var(--color-accent-100); color: var(--color-accent); font-weight: 500; }
.wb-tab-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-tab-count {
  font-size: 12px; font-variant-numeric: tabular-nums; border-radius: var(--radius-pill);
  padding: 2px 8px; background: var(--color-chip); color: var(--color-faint);
}
.wb-tab.is-active .wb-tab-count { background: var(--color-surface); color: var(--color-accent); }
.wb-rail { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.wb-rail-btn {
  width: 32px; height: 32px; border: none; cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 500; border-radius: var(--radius-sm); letter-spacing: .02em;
  background: transparent; color: var(--color-muted);
}
.wb-rail-btn:hover { background: var(--color-chip); }
.wb-rail-btn.is-active { background: var(--color-accent-100); color: var(--color-accent); }

.wb-pane { min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; }
.sheetwrap {
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-card); overflow: hidden;
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.sheet-head { padding: 10px 16px 0; flex: 0 0 auto; }
.sheet-head h2 { font-size: 19px; margin: 0; }
.sheet-note, .wb-note { font-size: 14px; line-height: 1.5; color: var(--color-muted); margin: 4px 0 0; max-width: 92ch; }
.sheet-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 12px 0 10px; }
.sheet-tools .input { flex: 0 1 230px; font-size: 13px; padding: 8px 14px; }
.sheet-cap {
  margin-left: auto; font-size: 12px; color: var(--color-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch;
}
.sheet-count { font-size: 13px; color: var(--color-faint); white-space: nowrap; }
.sheet-scroll { flex: 1 1 auto; min-height: 320px; overflow: auto; border-top: 1px solid var(--color-line); overscroll-behavior: contain; }
/* There is more of this table sideways. The caption column is sticky and the box
   scrolls, so nothing is out of reach - but a phone's overlay scrollbar only appears
   after the first swipe, and until then a figure cut at the right edge reads as a fault
   (analyst QA, 2026-09-20). The fade sits on .sheetwrap, which does not scroll, so it
   stays at the edge; workbook.js takes it off the moment there is nothing more that way.
   Not a control: pointer-events none, so it never swallows a click on a figure. */
.sheetwrap { position: relative; }
.sheetwrap::after, .sheetwrap::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 26px; z-index: 3;
  pointer-events: none; opacity: 0; transition: opacity .12s ease;
}
.sheetwrap::after { right: 0; background: linear-gradient(to right, transparent, var(--color-surface)); }
.sheetwrap::before { left: 0; background: linear-gradient(to left, transparent, var(--color-surface)); }
.sheetwrap.has-more-right::after, .sheetwrap.has-more-left::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sheetwrap::after, .sheetwrap::before { transition: none; } }
/* And a scrollbar that is actually there to see. A phone's is an overlay drawn only
   while a swipe is in progress, which is why the analyst reported "no scrollbar or swipe
   hint visible" over a table that scrolls perfectly well. Styling it makes it a classic
   bar that keeps its place; scoped to the widths where the split has already become two
   tabs, so the desktop sheet keeps every pixel of its density. */
@media (max-width: 1180px) {
  .sheet-scroll { scrollbar-width: thin; }
  .sheet-scroll::-webkit-scrollbar { height: 7px; width: 7px; }
  .sheet-scroll::-webkit-scrollbar-thumb { background: var(--color-line); border-radius: 4px; }
  .sheet-scroll::-webkit-scrollbar-track { background: transparent; }
}
.legend { font-size: 12px; color: var(--color-faint); margin: 7px 4px 0; flex: 0 0 auto; }

table.sheet { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; font-size: 14px; }

table.sheet th {
  padding: 9px 10px; text-align: right; font-size: 12px; font-weight: 500;
  color: var(--color-faint); background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
  position: sticky; top: 0; z-index: 2;
  /* Wrapping, not `nowrap`: widths are set from the data, and a header longer than the
     column it names — "vs printed subtotal" over a column of "ties" — overflowed into
     the one beside it rather than taking a second line. */
  white-space: normal; vertical-align: bottom;
}
table.sheet th.lbl { text-align: left; white-space: normal; padding-left: 24px; }
table.sheet th.lbl:first-child { left: 0; z-index: 3; }
table.sheet th.mid { text-align: center; }
/* The default is right, for a column of figures. Everything else — a code, a
   reference, a sentence — is set from the left, and its header has to agree. */
table.sheet th.txt { text-align: left; }
table.sheet th.last { padding-right: 24px; }
table.sheet td {
  padding: 8px 10px; border-bottom: 1px solid var(--color-hair);
  font-variant-numeric: tabular-nums; background: var(--color-surface);
}
table.sheet td.lbl { white-space: normal; padding-left: 24px; text-align: left; vertical-align: top; }
/* Sticky only where it is the first column: the label is not always column 0 — the
   Standard Spread prints a node code before its caption — and pinning a middle column
   to left: 0 would slide it over the one before it. */
table.sheet td.lbl:first-child { position: sticky; left: 0; }
table.sheet td.num { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.sheet td.mid { text-align: center; }
table.sheet td.last { padding-right: 24px; text-align: right; }
table.sheet td.code { font-size: 12px; color: var(--color-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A source reference, shortened to the printed page with the rest in the tooltip. */
table.sheet td.ref {
  font-size: 12px; color: var(--color-faint); vertical-align: top;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Only where something is actually hidden — a cell showing its whole reference has
   nothing behind the tooltip and should not invite the cursor. */
table.sheet td.ref.is-cut { cursor: help; }
table.sheet td.ref.is-full { white-space: normal; text-overflow: clip; }
/* Prose that landed in a value column. Right-aligned and nowrap it leaves the column
   entirely and puts a horizontal scrollbar under the table. */
table.sheet td.prose {
  text-align: left; white-space: normal; vertical-align: top; overflow: hidden;
  font-variant-numeric: normal;
}
/* Two lines and no more, from any one cell. Always on a span: `display: -webkit-box`
   on a `td` takes it out of table layout and collapses the column beside it. */
.clamp2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35; min-width: 0;
}

/* A sheet in two halves. The far side is tinted and the boundary carries a rule, so
   the eye reads "what the bank gets" against "what the report says" without the two
   ever being separate tables — separate tables would drift out of alignment. */
table.sheet th.far, table.sheet td.far { background: var(--color-sunken); }
table.sheet th.edge, table.sheet td.edge { border-left: 2px solid var(--color-rule); }
tr.heading td.far, tr.subtotal td.far, tr.blockTotal td.far { background: var(--color-sunken); }

/* Row kinds. The background has to be set on the cell, not the row, because the label
   column is sticky and would otherwise show the rows beneath it sliding past. */
tr.heading td { background: var(--color-bg); font-weight: 500; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-faint); padding: 9px 10px; }
tr.heading.is-prov td { text-transform: none; letter-spacing: 0; font-size: 12.5px; padding-right: 24px; }
.cap-wrap.is-prov { align-items: flex-start; gap: 9px; }
.prov-mark { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 2px; color: var(--color-faint); }
tr.child td, tr.blockTotal td { background: var(--color-sunken); }
tr.is-open td { background: var(--color-accent-100); }
tr.subtotal td, tr.blockTotal td { border-top: 1px solid var(--color-rule); }
tr.subtotal .cap, tr.parent .cap { font-weight: 500; }
tr.blockTotal .cap { color: var(--color-faint); }
tr.strong .cap { text-transform: uppercase; letter-spacing: .04em; font-size: 13px; }
tr.subtotal td.num, tr.parent td.num, tr.blockTotal td.num { font-weight: 700; }

/* One line and no more. The browser cuts it at the pixel the column ends, so there is
   no word-counting here to get wrong at some width nobody tested. */
.clamp1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* A note's commentary, folded. Sized so a run of them reads as a margin, not as rows:
   no cell background, a rule to the left standing in for the indent it had in Excel,
   and the whole line clickable. Open, the text runs the width of the table and wraps —
   more room than it had wrapping inside the caption column. */
tr.aside td {
  background: var(--color-bg); padding: 0 10px 0 0; border-bottom: none;
}
.aside-btn {
  display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left;
  padding: 3px 10px 3px 34px; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 12px; line-height: 1.45; color: var(--color-faint);
  border-left: 2px solid transparent; min-width: 0;
}
.aside-btn:hover { color: var(--color-muted); background: var(--color-chip); }
.aside-btn .prov-mark { align-self: center; margin-top: 0; }
.aside-text { min-width: 0; flex: 1 1 auto; }
tr.aside.is-open .aside-text { white-space: normal; max-width: 78ch; }
/* Only worth a word once the eye is on the row — a "Read" on every one of seventeen
   folded lines is seventeen things competing with the figures. */
.aside-more {
  flex: 0 0 auto; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-accent); opacity: 0; transition: opacity .12s;
}
.aside-btn:hover .aside-more, .aside-btn:focus-visible .aside-more { opacity: 1; }
tr.aside.is-open .aside-btn {
  color: var(--color-body); border-left-color: var(--color-accent);
  background: var(--color-chip); padding-top: 8px; padding-bottom: 10px;
  align-items: flex-start;
}
tr.aside.is-open .aside-more { opacity: 1; }

/* Notes as printed (textread.line_kind): the nil lines folded at a note's foot, and the
   Tables only / Full text switch. Plain grey - neither is a flag, nobody is asked. */
tr.fold-row td { background: var(--color-bg); padding: 0 10px 0 0; border-bottom: none; }
.fold-btn {
  display: block; width: 100%; text-align: left; padding: 3px 10px 5px 34px; border: none;
  background: none; cursor: pointer; font: inherit; font-size: 12px; line-height: 1.45;
  color: var(--color-muted);
}
.fold-btn:hover, .fold-btn:focus-visible { background: var(--color-chip); color: var(--color-body); }
.fold-btn.is-static { cursor: default; }
.fold-btn.is-static:hover { background: none; color: var(--color-muted); }
tr.is-nil td { color: var(--color-muted); }
.wb-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-pill); background: var(--color-chip); }
.wb-seg[hidden] { display: none; }
.wb-seg button { font: inherit; font-size: 12.5px; padding: 4px 11px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-muted); cursor: pointer; }
.wb-seg button[aria-pressed="true"] { background: var(--color-surface); color: var(--color-text); font-weight: 500; box-shadow: 0 1px 2px rgba(38, 36, 33, .08); }

.cap-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.twisty {
  width: 26px; height: 26px; flex: 0 0 26px; display: inline-flex;
  align-items: center; justify-content: center; padding: 0; cursor: pointer;
  border: none; border-radius: var(--radius-chip); font: inherit; font-size: 15px; line-height: 1;
  background: var(--color-chip); color: var(--color-muted);
}
.twisty:hover { background: var(--color-accent-200); }
tr.is-open .twisty { background: var(--color-accent-200); color: var(--color-accent); }
.twisty-gap { width: 26px; flex: 0 0 26px; }
.childcount { font-size: 12px; color: var(--color-faint); background: var(--color-chip); border-radius: var(--radius-pill); padding: 2px 9px; white-space: nowrap; }

.notebtn {
  min-width: 30px; padding: 2px 8px; border-radius: var(--radius-pill); cursor: pointer;
  border: 1px solid transparent; font: inherit; font-size: 13px; font-variant-numeric: tabular-nums;
  background: var(--color-accent-100); color: var(--color-accent);
}
.notebtn:hover { background: var(--color-accent-200); }
.notebtn.is-open { background: var(--color-accent); color: #FFFFFF; border-color: var(--color-accent); }
/* An expanded parent row is tinted the same accent-100 the chip is filled with, so on
   those rows the chip disappeared into its own cell. It inverts there instead — the
   border keeps it a chip, and the transparent border above keeps every state one size. */
tr.is-open .notebtn:not(.is-open) { background: var(--color-surface); border-color: var(--color-accent); }
tr.is-open .notebtn:not(.is-open):hover { background: var(--color-accent-200); }
/* A cell citing several notes draws one chip each. They wrap rather than widening the
   column - a Hyundai balance sheet line cites five - and the min-width above is dropped
   so five chips do not push the figures off the screen. */
/* Smaller than a single chip, never below the target a finger or a shaky hand can
   hit: 24px is the floor the rest of ds.css keeps to, and the multi-note cell is the
   one an analyst clicks most on a Korean or Indian filer. */
td.notes-many .notebtn, td.notes-many .notedead {
  min-width: 24px; padding: 4px 6px; margin: 2px 4px 2px 0;
}
/* A cited note this workbook does not hold: said, never drawn as a control that would
   do nothing (CLAUDE.md, principle 5). */
.notedead { display: inline-block; color: var(--color-faint); font-size: 13px;
  font-variant-numeric: tabular-nums; }

.v-keyed { color: var(--color-keyed); }
.v-calc { color: var(--color-text); }
/* A figure whose source the screen cannot say just now - the sheet cannot be squared with
   the edits - is plain muted ink: never the run's blue, never the analyst's violet. */
.v-held { color: var(--color-muted); }
/* On the wash, and over the sunken ground a child row, a block total or an older period
   wears; an open row and a traced row keep their own ground (a later, or more specific,
   rule). A derived cell is never a trace cell, so no tier's ground is covered. */
table.sheet td.v-calc { background: var(--color-derived); }
table.sheet tr.is-open td.v-calc { background: var(--color-accent-100); }
.v-tie { color: var(--color-tie); font-weight: 500; }
/* A cell whose check did NOT tie. workbook.js has been marking these since the value
   classes were written, and there was no rule to match: the one number a reviewer is
   looking for rendered in the same ink as every number around it. */
.v-sharp { color: var(--color-warn); font-weight: 600; }
/* A total the report itself does not add up (crosscheck REPORT): every line was found on
   its page and none was left out. Amber, the review colour - someone will be asked - in
   its deep shade for 4.8:1 on white; never the break red, since nothing was misread. */
.v-report { color: var(--color-review-deep); font-weight: 600; }
.yoy { font-size: 13px; color: var(--color-faint); }
.yoy.is-sharp { color: var(--color-sharp); font-weight: 500; }

.share { display: flex; align-items: center; gap: 9px; justify-content: flex-end; }
.share-track { display: inline-block; width: 36px; height: 7px; flex: 0 0 36px; border-radius: var(--radius-pill); background: var(--color-track); overflow: hidden; }
.share-fill { display: block; height: 7px; border-radius: var(--radius-pill); background: var(--color-faint); }
.share-fill.is-child { background: var(--color-accent); }
.share-num { font-size: 12px; font-variant-numeric: tabular-nums; min-width: 38px; color: var(--color-muted); }

/* The basis cell doubles as the way into the mapping editor, on the one sheet that
   has one. Quiet until there is something to say, and a chip once a person has ruled. */
.remap {
  font: inherit; font-size: 12px; padding: 2px 9px; border-radius: var(--radius-pill);
  border: 1px dashed var(--color-edge); background: transparent; color: var(--color-faint);
  cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.remap:hover { border-style: solid; border-color: var(--color-accent); color: var(--color-accent); }
.remap.is-set { border-style: solid; border-color: var(--color-edge); color: var(--color-muted); }
.pick-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 18px; max-height: 210px; overflow: auto; }
.pick-list .accept-label { width: 100%; white-space: normal; font-weight: 400; font-size: 13px; }

/* The line the mapping editor answers on: saving, or why it could not. */
.why { font-size: 12.5px; color: var(--color-faint); }

/* The action under the tab list. Quieter than a tab, because it makes something
   rather than showing something that is already there. */
.wb-make { margin: 14px 10px 4px; padding-top: 14px; border-top: 1px solid var(--color-line); }
.wb-make-btn {
  width: 100%; text-align: left; font: inherit; font-size: 13px; font-weight: 500;
  padding: 9px 12px; border-radius: var(--radius-chip); cursor: pointer;
  border: 1px dashed var(--color-edge); background: transparent; color: var(--color-accent);
}
.wb-make-btn:hover:not(:disabled) { border-style: solid; background: var(--color-accent-100); }
.wb-make-btn:disabled { color: var(--color-faint); cursor: default; }
.wb-make-note { font-size: 12px; color: var(--color-faint); line-height: 1.45; margin: 7px 12px 0; }

/* — the note drawer — */
.scrim { position: fixed; inset: 0; background: rgba(38, 36, 33, .28); z-index: 39; }
.drawer {
  position: fixed; top: 12px; right: 12px; bottom: 12px; width: 580px; max-width: 94vw;
  background: var(--color-surface); border-radius: 22px; box-shadow: var(--shadow-drawer);
  padding: 30px 32px; overflow: auto; z-index: 40;
}
.drawer-top { display: flex; align-items: flex-start; gap: 16px; }
.drawer h3 { font-size: 26px; line-height: 1.15; margin: 14px 0 6px; }
.drawer-page { font-size: 14px; color: var(--color-muted); }
.drawer-x {
  margin-left: auto; background: var(--color-chip); border: none; border-radius: var(--radius-pill);
  width: 38px; height: 38px; flex: 0 0 38px; font: inherit; font-size: 18px;
  color: var(--color-body); cursor: pointer;
}
.drawer-x:hover { background: var(--color-line); }
.drawer-text { background: var(--color-bg); border-radius: var(--radius-md); padding: 16px 18px; margin: 20px 0 0; font-size: 15px; line-height: 1.65; color: var(--color-body); }
.drawer-block { width: 100%; border-collapse: collapse; margin-top: 22px; font-size: 14px; }
.drawer-block th { text-align: right; font-size: 12px; font-weight: 500; color: var(--color-faint); border-bottom: 1px solid var(--color-line); padding: 0 0 9px; }
.drawer-block th:first-child { text-align: left; }
.drawer-block td { padding: 11px 0; border-bottom: 1px solid var(--color-hair); }
.drawer-block td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--color-keyed); }
.drawer-block td.page { text-align: right; font-size: 12px; color: var(--color-faint); }
.drawer-block tr.face td { border-top: 1px solid var(--color-rule); border-bottom: 0; font-weight: 700; }
.drawer-block tr.face td.num { color: var(--color-text); }
.drawer-foot { font-size: 13px; color: var(--color-faint); margin-top: 20px; }

/* — a run that did not tie — */
.fail-row { border-top: 1px solid var(--color-hair); padding: 18px 0; }
.fail-line { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.fail-title { font-size: 15px; font-weight: 500; flex: 1 1 260px; }
.fail-fig { font-size: 14px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.fail-delta {
/* What the difference is worth. Beside the printed-unit figure, never instead of it:
   the arithmetic is done in the report's own units and the money is the reader's cue
   for how hard to look (analyst QA, 2026-09-20). */
.fail-money { font-size: 12px; color: var(--color-muted); margin-left: 8px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
  font-size: 14px; font-weight: 700; color: var(--color-warn); background: var(--color-warn-100);
  border-radius: var(--radius-pill); padding: 4px 12px; font-variant-numeric: tabular-nums;
}
/* A rounding difference that held: the same pill, in the review colour. */
.fail-delta.is-round { color: var(--color-review-ink); background: var(--color-review-100); }
.fail-detail { font-size: 14px; line-height: 1.55; color: var(--color-muted); margin-top: 6px; max-width: 70ch; }
.fail-rule { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.accept { display: inline-flex; cursor: pointer; }
.accept input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.accept-label {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  border: 1px solid var(--color-edge); border-radius: var(--radius-pill);
  padding: 9px 16px; font-size: 14px; font-weight: 500;
  background: var(--color-surface); color: var(--color-text);
}
.accept-label::before {
  content: ""; width: 15px; height: 15px; flex: 0 0 15px; border-radius: 5px;
  border: 1.5px solid var(--color-edge); background: var(--color-surface);
}
.accept:hover .accept-label { border-color: var(--color-text); }
.accept:has(input:checked) .accept-label {
  border-color: var(--color-accent); background: var(--color-accent-100); color: var(--color-accent);
}
.accept:has(input:checked) .accept-label::before {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 2px var(--color-accent-100);
}
.accept:has(input:focus-visible) .accept-label { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.accept-note { font-size: 13px; color: var(--color-faint); }
/* The same control for a sentence rather than a phrase - the consent on a checked
   upload. A pill cannot hold two lines, and nowrap pushed it 900px past its column. */
.accept-wrap { display: flex; }
.accept-wrap .accept-label {
  white-space: normal; align-items: flex-start; border-radius: var(--radius-md);
  font-weight: 400; line-height: 1.5; padding: 12px 16px;
}
.accept-wrap .accept-label::before { margin-top: 3px; }

.fail-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--color-hair); }

/* What a stopped run completed and what it did not (job.html, the ungraded arm). Read
   as a list because that is the question the analyst has: which of the five stages got
   there. Not red - a stage that did not run is not a break. */
.ran-list { margin: 0 0 18px; max-width: 62ch; font-size: 14px; line-height: 1.6; }
.ran-list > div { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--color-hair); }
.ran-list dt { flex: 0 0 15ch; font-weight: 600; color: var(--color-body); }
.ran-list dd { margin: 0; color: var(--color-muted); }
.ran-list dd.ran-missing { color: var(--color-review-deep); }

/* — the review screen: checked, waiting to be started —
   One card in bands: the finding, then settled | open, then the money, the stages Start
   begins, and consent. Wider than main-narrow because two columns and five stages do not
   fit in 900px without the captions wrapping to single words. */
.review { width: 100%; max-width: 1080px; margin: 0 auto; }
.review-card {
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden;
}
.review-head { padding: 30px 38px 26px; }
.review-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.review-file { margin-left: auto; font-size: 12.5px; color: var(--color-faint); }
.review-finding { font-size: 30px; line-height: 1.12; letter-spacing: -.015em; margin: 0 0 10px; max-width: 26ch; }
.review-lede { font-size: 15px; line-height: 1.6; color: var(--color-muted); margin: 0; max-width: 70ch; }

.review-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--color-line); }
.review-settled { padding: 22px 26px 24px 38px; border-right: 1px solid var(--color-line); }
.review-open { padding: 22px 38px 24px 26px; background: var(--color-sunken); }
.review-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: 14px;
}
.review-label-open { color: var(--color-review-deep); }
.review-label-quiet { color: var(--color-faint); margin-bottom: 12px; }
.review-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.review-table th {
  width: 104px; padding: 9px 12px 9px 0; text-align: left; vertical-align: top;
  font-weight: 400; color: var(--color-faint); border-bottom: 1px solid var(--color-hair);
}
.review-table td { padding: 9px 0; line-height: 1.5; border-bottom: 1px solid var(--color-hair); }
.review-table tr:last-child th, .review-table tr:last-child td { border-bottom: 0; }
.review-table .muted { color: var(--color-faint); }
/* What a run achieved statement by statement (R2, _verdict.html statement_table): the
   review table's rows, folded to one line on the finished screen. Red only for a break,
   amber for what someone will be asked about - the contract's two colours, no third. */
.stmt-sum { margin: 0 0 8px; padding: 6px 12px; font-size: 13px;
  border: 1px solid var(--color-hair); border-radius: var(--radius-card);
  background: var(--color-surface); }
.stmt-sum > summary { color: var(--color-muted); font-variant-numeric: tabular-nums; }
.stmt-sum-lead { color: var(--color-text); font-weight: 500; margin-right: 6px; }
.stmt-sum-old { color: var(--color-muted); }
.stmt-sum-note { margin: 4px 0 2px; font-size: 12px; color: var(--color-muted); }
.stmt-table { margin-top: 4px; font-variant-numeric: tabular-nums; }
.stmt-table th { width: 150px; }
.stmt-table td.stmt-page { color: var(--color-muted); padding-left: 16px; }
.stmt-table td.is-break { color: var(--color-warn); }
.stmt-table td.is-review { color: var(--color-review-ink); }
.review-aside { font-size: 13px; line-height: 1.55; color: var(--color-muted); margin: 12px 0 0; }
.review-q {
  border: 1px solid var(--color-hair); border-radius: 12px; background: var(--color-surface);
  padding: 11px 13px;
}
.review-q + .review-q { margin-top: 10px; }
.review-q-title { font-size: 13.5px; font-weight: 500; }
.review-q-body { font-size: 12px; line-height: 1.5; color: var(--color-muted); margin-top: 3px; }
.review-none { font-size: 13.5px; line-height: 1.55; color: var(--color-muted); margin: 0; }

.review-notes { display: grid; gap: 12px; padding: 20px 38px; border-top: 1px solid var(--color-line); }
.review-notes .aside-note { margin: 0; }

.review-money {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 20px 38px; border-top: 1px solid var(--color-line);
}
.review-cell { padding: 0 18px; border-left: 1px solid var(--color-hair); }
.review-cell:first-child { padding-left: 0; border-left: 0; }
.review-cell:last-child { padding-right: 0; }
.review-cell-k {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-faint); margin-bottom: 5px;
}
.review-cell-v { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.review-cell-s { font-size: 11.5px; line-height: 1.45; color: var(--color-muted); margin-top: 2px; }

.review-stages { padding: 20px 38px; border-top: 1px solid var(--color-line); background: var(--color-sunken); }
.review-stage-list {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px;
  list-style: none; margin: 0; padding: 0;
}
.review-stage {
  border: 1px solid var(--color-line); border-radius: 12px; background: var(--color-surface);
  padding: 11px 13px;
}
.review-stage-no { font-size: 10.5px; letter-spacing: .08em; color: var(--color-faint); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.review-stage-name { font-size: 13.5px; font-weight: 700; margin-bottom: 3px; }
.review-stage-body { font-size: 11.5px; line-height: 1.45; color: var(--color-muted); }

.review-go { margin: 0; padding: 22px 38px 26px; border-top: 1px solid var(--color-line); }
/* Consent as three lines in one box. Unticked it is an outlined control; ticked it takes
   the held ground, so the state is readable at a glance before Start lights. */
.review-consent {
  display: flex; gap: 13px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--color-edge); border-radius: var(--radius-md);
  background: var(--color-surface); padding: 15px 17px; margin-bottom: 18px;
  transition: background .18s cubic-bezier(.4, 0, .2, 1), border-color .18s cubic-bezier(.4, 0, .2, 1);
}
.review-consent input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.review-consent:hover { border-color: var(--color-text); }
.review-consent:has(input:checked) { border-color: var(--color-held-edge); background: var(--color-held-100); }
.review-consent-box {
  width: 18px; height: 18px; flex: none; margin-top: 1px; border-radius: 5px;
  border: 1.5px solid var(--color-edge); background: var(--color-surface);
  display: grid; place-items: center; box-sizing: border-box;
}
.review-consent:has(input:checked) .review-consent-box { border-color: var(--color-accent); background: var(--color-accent); }
.review-consent:has(input:checked) .review-consent-box::after { content: "\2713"; color: #FFFFFF; font-size: 11px; line-height: 1; }
.review-consent:has(input:focus-visible) .review-consent-box { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.review-consent-text { display: grid; gap: 4px; min-width: 0; font-size: 12.5px; line-height: 1.5; color: var(--color-muted); }
.review-consent:has(input:checked) .review-consent-text { color: var(--color-held-ink); }
.review-consent-head { font-size: 14px; font-weight: 500; color: var(--color-text); margin-bottom: 3px; }
.review-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn-discard:hover:not(:disabled) { border-color: var(--color-text); color: var(--color-text); }

@media (max-width: 860px) {
  .review-head, .review-money, .review-stages, .review-go, .review-notes { padding-left: 22px; padding-right: 22px; }
  .review-split { grid-template-columns: minmax(0, 1fr); }
  .review-settled { padding: 20px 22px; border-right: 0; border-bottom: 1px solid var(--color-line); }
  .review-open { padding: 20px 22px; }
  .review-finding { font-size: 25px; }
  .review-file { margin-left: 0; }
  .review-money { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .review-cell:nth-child(odd) { padding-left: 0; border-left: 0; }
  .review-stage-list { grid-template-columns: minmax(0, 1fr); }
}
.fail-actions .push { margin-left: auto; font-size: 13px; color: var(--color-muted); }
/* How far into the notes a stopped run got, stated above the rungs that offer to finish
   them. Muted and 13px, as every other explanatory line in this block is. */
.fail-note { margin: 22px 0 0; font-size: 13px; color: var(--color-muted); }

/* ---------------------------------------------------------- what has been read so far
   The statements on the run console, while the notes are still being read. Read-only
   and said to be: the band above it carries the words, and the sheet below is the same
   component the finished screen draws, without its controls. */
.reading-so-far { margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--color-hair); }
.reading-so-far h2 { margin: 0; font-size: 15px; }
.reading-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.reading-so-far > .legend { margin: 0 0 14px; max-width: 70ch; }
/* The verdict in one strip, so the workbook can start inside the first screen. The
   panel below it holds everything that explains the break, and it shuts: once somebody
   has waived the break the argument is over and the file is the point. */
.fail-top { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 4px; }
.fail-name { font-size: 26px; line-height: 1.15; margin: 0; }

.whyfold { margin-top: 26px; border-radius: var(--radius-lg); max-width: 980px; }
.whyfold > summary { display: flex; align-items: baseline; gap: 8px 14px; flex-wrap: wrap; }
.whyfold > summary::-webkit-details-marker { display: none; }
.whyfold > summary::after {
  content: "Show"; margin-left: auto; font-size: 13px; color: var(--color-accent);
}
.whyfold[open] > summary::after { content: "Hide"; }
.whyfold-t { font-size: 19px; font-weight: 600; }
.whyfold-body { margin-top: 20px; }

/* A caveat that runs to a paragraph is a page of its own on a borrower whose every note
   rounds to its own hundredth, and it stood between the reader and the figures it was
   qualifying. The lead sentence stays; the evidence is one click. */
.notefold > summary { display: flex; align-items: baseline; gap: 8px; }
.notefold > summary::-webkit-details-marker { display: none; }
.notefold > summary::after { content: "show the detail"; margin-left: auto; font-size: 13px; opacity: .75; }
.notefold[open] > summary::after { content: "hide"; }
.notefold-body { margin-top: 10px; }

.report { font-size: 13px; line-height: 1.5; white-space: pre-wrap; background: var(--color-bg); border-radius: var(--radius-md); padding: 16px 18px; margin: 0; overflow: auto; max-height: 340px; }

/* — the figures strip on a finished run — */
.figures { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.figure { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 12px 16px; }
.figure-k { font-size: 12px; color: var(--color-faint); }
.figure-v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 1080px) {
  .split { grid-template-columns: 1fr; gap: 32px; }
  /* Stacked, the sign-in form goes first: a phone should not have to read the whole
     pitch before it can get in. */
  .split > .first-when-stacked { order: -1; }
  .display { font-size: 40px; }
  /* The rail stays a rail: stacking it put the table below the fold. */
  .wb-layout, .wb-layout.is-collapsed { grid-template-columns: 54px 1fr; }
  .wb-nav-toggle:disabled { opacity: .35; cursor: default; }
  .drawer { top: 0; right: 0; bottom: 0; left: 0; width: auto; max-width: none; border-radius: 0; }
}
@media (max-width: 640px) {
  .shell { height: auto; min-height: 100dvh; overflow: visible; }
  .main { padding: 16px; overflow: visible; }
  .top, .foot { padding-left: 16px; padding-right: 16px; }
  .display { font-size: 32px; }
  .lede { font-size: 17px; }
  .stages { grid-template-columns: repeat(2, 1fr); }
  .drawer { top: 0; right: 0; bottom: 0; left: 0; width: auto; max-width: none; border-radius: 0; padding: 22px 18px; }

  /* Measured at 375 CSS px: the header line and the workbook's button row were both
     laid out as one unwrappable row, so the PAGE scrolled sideways - 5px on the
     sign-in page, 191px on a finished spread, where the row carrying Download
     workbook came to 566px in a 375px viewport. A page that scrolls horizontally on a
     phone is a page whose right-hand controls cannot be reached without knowing they
     are there. Both wrap now, and the header note may break rather than force a line
     of its own width. */
  .top { flex-wrap: wrap; row-gap: 8px; }
  .top-right { margin-left: 0; flex-wrap: wrap; row-gap: 8px; width: 100%; }
  .top-note { white-space: normal; }
  .wb-head { row-gap: 10px; }
  .wb-actions { margin-left: 0; flex-wrap: wrap; row-gap: 8px; width: 100%; }
}

/* ============================================================ POCSPREAD additions
   The upload page is one column of full-width bands, not two cards side by side. */
.band { width: 100%; max-width: 1080px; margin: 0 auto; }

/* The refusal page (templates/error.html). Flowing content, so the page's own footer
   sits under it; the actions are a row because there are only ever two. */
.errpage { padding: 56px 0 40px; max-width: 62ch; }
.errpage h1 { margin: 6px 0 14px; }
.errpage-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.headline {
  display: flex; gap: 40px; align-items: flex-end; flex-wrap: wrap;
  margin: 0 0 20px;
}
.headline h1 { font-size: 34px; line-height: 1.1; letter-spacing: -.03em; margin: 0; }
.headline p {
  flex: 1 1 320px; max-width: 46ch; font-size: 14px; line-height: 1.6;
  color: var(--color-muted); margin: 0; text-wrap: pretty;
}

/* The console: one panel, three stacked rows, the whole thing a drop target. */
.console {
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: 22px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(38, 36, 33, .04), 0 14px 40px rgba(38, 36, 33, .06);
}
.console.over { border-color: var(--color-accent); }
.drop-row {
  display: flex; align-items: center; gap: 18px; padding: 30px 28px; cursor: pointer;
}
.drop-row:hover { background: var(--color-held-100); }
.console.over .drop-row { background: var(--color-accent-100); }
.drop-row input[type=file] { position: absolute; opacity: 0; width: 0; height: 0; }
.drop-mark {
  width: 48px; height: 48px; flex: 0 0 48px; border-radius: 16px;
  background: var(--color-accent-100); color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
}
.drop-slot { flex: 1; min-width: 0; }
.drop-name {
  font-size: 19px; font-weight: 500; line-height: 1.3; display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drop-sub { font-size: 13px; color: var(--color-muted); display: block; margin-top: 2px; }
/* The upload's rules as chips - uppercase, quiet, and coloured only where the rule is a
   yes (teal) or a no (the break red's pale ground, which is a refusal, not a break). */
.drop-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.drop-tag {
  font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--color-chip); color: var(--color-muted);
}
.drop-tag.is-ok { background: var(--color-accent-100); color: var(--color-accent); }
/* A rule the upload refuses on - a password, a scan with scan reading off - is a rule,
   not a break: stated in plain ink, never the break red. */
.drop-tag.is-no { color: var(--color-body); }
.drop-row .btn { pointer-events: none; }

.link-row {
  border-top: 1px solid var(--color-hair); padding: 14px 28px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.link-lab {
  display: inline-flex; align-items: center; gap: 8px; font-size: 14px;
  color: var(--color-muted); white-space: nowrap;
}
.link-row .url-field { flex: 1 1 260px; }
.link-state { flex: 1 0 100%; font-size: 12px; color: var(--color-faint); }

.action-bar {
  border-top: 1px solid var(--color-hair); background: var(--color-bg);
  padding: 14px 28px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.action-lab { font-size: 14px; color: var(--color-muted); white-space: nowrap; }
.action-bar .quota { margin-left: auto; font-size: 13px; color: var(--color-faint); }
/* The upload in flight: how far it has got, what it is doing, and a way out. */
.upload-progress { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--color-hair); }
.upload-track { flex: 1 1 200px; height: 6px; border-radius: var(--radius-pill); background: var(--color-track); overflow: hidden; }
.upload-bar { height: 100%; width: 0; background: var(--color-accent); transition: width .2s ease; }
.upload-text { font-size: 13px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .upload-bar { transition: none; } }

/* Four equal columns on the ground, ruled, no card. */
.pipeline {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--color-line); margin-top: 26px; padding-top: 18px;
}
.pipeline > div { padding-right: 18px; }
.pipeline > div + div {
  border-left: 1px solid var(--color-line); padding-left: 18px;
}
.pipe-n { font-size: 13px; font-weight: 500; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.pipe-t { font-size: 14px; font-weight: 500; margin-top: 2px; }
.pipe-b { font-size: 12px; line-height: 1.5; color: var(--color-faint); margin-top: 3px; }

.section-line {
  display: flex; align-items: baseline; gap: 10px; margin: 26px 0 4px;
  font-size: 13px; font-weight: 500; color: var(--color-muted);
}
.section-line .count { font-size: 12px; color: var(--color-faint); font-variant-numeric: tabular-nums; }
.section-line .push { margin-left: auto; font-size: 12px; color: var(--color-faint); }

/* Never shrinks away, scrolls in place as runs accumulate. */
.recent-list {
  flex: 0 0 auto; min-height: 132px; max-height: 240px; overflow: auto;
  overscroll-behavior: contain;
}
.recent-row {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) 128px 78px;
  gap: 12px; align-items: center; padding: 11px 2px;
  border-bottom: 1px solid var(--color-hair);
}
.recent-row .who { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-row .what { font-size: 13px; color: var(--color-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-row .when { font-size: 13px; color: var(--color-faint); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.recent-empty { font-size: 13px; color: var(--color-faint); padding: 14px 2px; }

/* The same list, as page content rather than as a panel on a dashboard. The capped
   version above is right where a list is one card among several and a fixed height keeps
   the page still. It is wrong wherever the list IS the page - Home's borrowers now, whose
   runs are .wl-row below - a borrower with twenty declarations should not read four of them through a
   240px window with a scrollbar of its own inside the page's. */
.recent-list.flowing { min-height: 0; max-height: none; overflow: visible; }

/* ── a borrower at a glance ──────────────────────────────────────────────────────
   Four tiles, and the only place on the page that leads with a big number - these
   figures ARE the point of the screen, which is the test for whether a big number is
   earned. Everything below is the evidence for them. */
.glance {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 12px; margin: 0 0 24px;
}
/* Each tile carries its own border rather than the grid faking one with a coloured
   1px gap. Four tiles in a row of three left two empty cells painted in the line
   colour - a block of border with nothing in it, which reads as a broken tile. */
.glance > div {
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-md); padding: 15px 17px 14px;
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.glance .k { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
             color: var(--color-faint); }
.glance .v { font-size: 23px; line-height: 1.15; font-weight: 500;
             color: var(--color-text); font-variant-numeric: tabular-nums;
             letter-spacing: -.015em; overflow: hidden; text-overflow: ellipsis; }
.glance .v.sm { font-size: 16px; font-weight: 500; line-height: 1.35; }
.glance .s { font-size: 12px; line-height: 1.4; color: var(--color-muted); }
/* Direction of change is not a verdict: a fall in revenue is ink, not the break red.
   A breached covenant or a declaration needing attention is somebody to ask - amber. */
.glance .up, .glance .down { color: var(--color-body); }
.glance .ok { color: var(--color-tie); }
.glance .bad { color: var(--color-review-deep); }
/* The one tile that may need to shout. A left edge rather than a filled card. */
.glance > div.flagged { box-shadow: inset 3px 0 0 var(--color-review);
                        border-color: var(--color-review-edge); }

/* ── the borrowers on file ────────────────────────────────────────────────────── */
.cust-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
             gap: 12px; }
.cust {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-md); padding: 15px 16px 13px; border-bottom-width: 1px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.cust:hover { border-color: var(--color-edge); box-shadow: var(--shadow-card); }
.cust-top { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; }
.cust-name { font-size: 15px; font-weight: 500; color: var(--color-text);
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cust-ref { font-size: 12.5px; color: var(--color-accent); }
.cust-facts { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px;
              color: var(--color-muted); }
.cust-foot { display: flex; align-items: baseline; justify-content: space-between;
             gap: 10px; margin-top: 3px; padding-top: 9px;
             border-top: 1px solid var(--color-hair); font-size: 12px;
             color: var(--color-faint); }
.cust-cin { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .cust { transition: none; } }

/* A section on this page announces itself, so a long page can be skimmed by its
   headings rather than read to find them. */
.sec-head { display: flex; align-items: baseline; gap: 10px; margin: 30px 0 8px;
            flex-wrap: wrap; }
.sec-head h2 { font-size: 18px; margin: 0; }
.sec-head .count { font-size: 12px; color: var(--color-faint);
                   font-variant-numeric: tabular-nums; }

/* A stated fact: what it is, what the report said about it, and how it reads at a
   glance. Not .recent-row, which is the JOB list - there the detail is a nicety and is
   dropped below 1000px, but here the detail IS the row. "Differences in inventory
   valuation between the returns and the books" is the whole reason to look at it, and a
   layout that hides it on a laptop hides the finding. */
.fact-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 16px;
  padding: 11px 2px; border-bottom: 1px solid var(--color-hair); align-items: start;
}
.fact-row:last-child { border-bottom: 0; }
.fact-row .who { font-size: 14px; font-weight: 500; color: var(--color-text); }
.fact-row .what { grid-column: 1; font-size: 13px; line-height: 1.5;
                  color: var(--color-muted); }
/* The pills keep their own column and never wrap mid-date: an ISO date cut to
   "2026-03-" is worse than no date. */
.fact-row .marks { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 6px;
                   align-items: center; white-space: nowrap; }
@media (max-width: 620px) {
  .fact-row { grid-template-columns: 1fr; }
  .fact-row .marks { grid-column: 1; grid-row: auto; margin-top: 4px; }
}

/* What a measure is made of, openable rather than hovered - a tooltip is unreachable on
   a touch screen, and this is the sentence that says which definition of debt was used. */
.made-of { margin-top: 4px; }
.made-of summary { font-size: 12px; color: var(--color-accent); cursor: pointer;
                   list-style: none; }
.made-of summary::-webkit-details-marker { display: none; }
.made-of summary::after { content: " \203A"; }
.made-of[open] summary::after { content: " \2039"; }
.made-of p { font-size: 12px; line-height: 1.55; color: var(--color-muted);
             margin: 5px 0 0; max-width: 58ch; }

.caveat {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 18px;
  font-size: 12px; line-height: 1.6; color: var(--color-faint);
}
.caveat svg { flex: 0 0 auto; margin-top: 2px; }

/* The upload page flows as a page: the footer sits at the end of the content instead
   of being pinned over it. On a laptop screen the pinned footer covered the Upload and
   check button (button bottom 715px, footer top 691px, in a 790px window). */
.shell-flow { height: auto; min-height: 100dvh; overflow: visible; }
.shell-flow .main { flex: 1 0 auto; overflow: visible; }

/* File or link: one way in at a time. */
.source-row { padding: 18px 28px 0; }
/* The file input is 0x0, so its own focus ring is invisible - ring the row it lives in. */
.drop-row:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -8px; border-radius: 22px; }
.drop-clear {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid var(--color-edge); background: var(--color-surface); color: var(--color-muted);
}
.drop-clear:hover { border-color: var(--color-text); color: var(--color-text); }
.link-row .link-lab { cursor: pointer; }
.link-state.ok { color: var(--color-tie); }
.link-state.bad { color: var(--color-warn); }
.action-hint { flex: 1 0 100%; font-size: 12px; color: var(--color-faint); margin-top: -4px; }
.free-note {
  display: flex; align-items: flex-start; gap: 8px; padding: 12px 28px;
  border-top: 1px solid var(--color-hair); background: var(--color-accent-100);
  font-size: 13px; line-height: 1.5; color: var(--color-accent-deep);
}
.free-note svg { flex: 0 0 auto; margin-top: 2px; }

/* Run statuses as chips, so a list of ten reads at a glance: what is done, what
   stopped, and - first in the list - what is waiting for its owner. */
.status {
  display: inline-block; font-size: 12px; font-weight: 500; line-height: 1.4;
  padding: 3px 10px; border-radius: var(--radius-pill); white-space: nowrap;
  background: var(--color-chip); color: var(--color-muted); border-bottom: 0;
}
/* The tie green on its own tint is 4.31:1; the deep held green carries the word. */
.status-done { background: var(--color-tie-100); color: var(--color-held-deep); }

/* A source reference that goes somewhere. Underlined on hover rather than at
   rest: the column is six per cent wide and a permanent rule under every row of
   it reads as a ruled table rather than as a set of links. */
.ref-link { color: var(--color-keyed); border-bottom: 0; cursor: pointer; }
.ref-link:hover { color: var(--color-accent); text-decoration: underline; }
.status-failed { background: var(--color-warn-100); color: var(--color-warn); }
.status-busy { background: var(--color-accent-100); color: var(--color-accent); }
/* Waiting for a person - the design's amber, not a one-off yellow. */
.status-wait { background: var(--color-review-100); color: var(--color-review-ink); }
a.status-wait:hover { box-shadow: inset 0 0 0 1px var(--color-review-edge); border-bottom: 0; }

/* What comes back, before anything is uploaded. */
.sample-link { display: inline-block; margin-top: 8px; font-weight: 500; }

/* The four steps as one line; the detail behind "How it works". */
.how { margin-top: 22px; border-top: 1px solid var(--color-line); padding-top: 14px; }
.how > summary { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; font-size: 13px; }
.how > summary::-webkit-details-marker { display: none; }
.how-line { color: var(--color-body); font-weight: 500; }
.how-more { margin-left: auto; font-size: 12px; color: var(--color-accent); white-space: nowrap; }
.how-more::after { content: " +"; }
.how[open] .how-more::after { content: " \2212"; }
.how .pipeline { margin-top: 14px; border-top: 0; padding-top: 0; }

/* The footer: one line, and the full terms behind "Privacy & limits". */
.foot { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.foot-more > summary { color: var(--color-muted); text-decoration: underline; text-underline-offset: 2px; }
.foot-more > summary::-webkit-details-marker { display: none; }
.foot-more[open] { flex: 1 0 100%; display: flex; flex-direction: column; gap: 2px; }

@media (max-width: 640px) {
  .headline h1 { font-size: 28px; }
  .source-row { padding: 14px 16px 0; }
  /* The file's name wraps rather than truncating to "Drop the …", and Browse takes a
     line of its own instead of squeezing the name into a column beside it. */
  .drop-row { flex-wrap: wrap; gap: 12px 14px; padding: 20px 16px; }
  .drop-name { white-space: normal; font-size: 17px; }
  .drop-browse { flex: 1 0 100%; }
  .link-row, .action-bar, .free-note { padding-left: 16px; padding-right: 16px; }
  .action-bar .quota { margin-left: 0; flex: 1 0 100%; }
  .action-bar .btn-primary { flex: 1 0 100%; }
}

/* ---------------------------------------------------------------- agent view */
.agent-grid {
  display: grid; grid-template-columns: 1fr 288px; gap: 14px;
  flex: 1 1 auto; min-height: 300px; overflow: hidden; margin-top: 14px;
}
.agent-grid > * { min-height: 0; }
.agent-card {
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-card); display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
.agent-head {
  display: flex; align-items: center; gap: 8px; padding: 13px 18px;
  border-bottom: 1px solid var(--color-hair); font-size: 13px; font-weight: 500;
  color: var(--color-muted); flex: 0 0 auto;
}
.agent-head .push { margin-left: auto; font-size: 13px; color: var(--color-faint); font-variant-numeric: tabular-nums; }
.agent-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 18px; }
.step-row {
  display: grid; grid-template-columns: 20px 1fr auto; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--color-hair-soft); align-items: start;
}
.step-row:last-child { border-bottom: 0; }
.step-mark { display: flex; align-items: center; justify-content: center; padding-top: 2px; }
.step-t { font-size: 14px; font-weight: 500; }
.step-d { font-size: 13px; line-height: 1.45; color: var(--color-muted); margin-top: 2px; }
.step-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.tool {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  background: var(--color-chip); color: var(--color-muted);
  border-radius: 6px; padding: 2px 7px;
}
.dots { display: inline-flex; gap: 3px; }
.dots i {
  width: 4px; height: 4px; border-radius: 50%; background: var(--color-accent);
  display: inline-block; animation: blink 1.2s infinite;
}
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
.step-dur { font-size: 13px; color: var(--color-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

.side { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.thinking {
  background: var(--color-accent-100); border-radius: var(--radius-card);
  padding: 16px 18px; flex: 0 0 auto;
}
.thinking-l { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent); }
.thinking-t { font-size: 14px; line-height: 1.5; color: var(--color-accent-deep); margin-top: 6px; }
.counters {
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-card); padding: 6px 18px; flex: 0 0 auto;
}
.counter {
  display: flex; align-items: baseline; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--color-hair-soft); font-size: 13px; color: var(--color-muted);
}
.counter:last-child { border-bottom: 0; }
.counter b { margin-left: auto; font-size: 15px; font-weight: 500; color: var(--color-text); font-variant-numeric: tabular-nums; }
.side-note { font-size: 12px; line-height: 1.55; color: var(--color-faint); flex: 0 0 auto; }

/* ---------------------------------------------------------------- run log drawer */
#runlog[hidden] { display: none; }
.drawer-col { display: flex; flex-direction: column; padding: 0; width: 560px; }
.drawer-scroll .aside-note.spaced:first-child { margin-top: 18px; }
.drawer-scroll .aside-note { margin-bottom: 10px; }
.drawer-col .drawer-fixed { padding: 26px 28px 0; flex: 0 0 auto; }
.drawer-col .drawer-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 28px 26px; }
.totals {
  display: grid; grid-template-columns: 1fr 1fr; margin: 18px 0 4px;
  border-top: 1px solid var(--color-hair);
}
.totals > div { padding: 12px 0; border-bottom: 1px solid var(--color-hair); }
.totals > div:nth-child(odd) { padding-right: 14px; }
.totals > div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--color-hair); }
.totals .k { font-size: 12px; color: var(--color-faint); }
.totals .v { font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; margin-top: 2px; }

@media (max-width: 1000px) {
  .agent-grid { grid-template-columns: 1fr; }
  .side { overflow: visible; }
  .pipeline { grid-template-columns: 1fr 1fr; gap: 14px 0; }
  .pipeline > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .recent-row { grid-template-columns: minmax(0, 1fr) 124px 70px; }
  .recent-row .what { display: none; }
}

/* — rulings: what the analyst tells the spread, and how it answered — */

/* A tint of --color-tie, which the workbook already uses for a check that held. A
   ruling the checker upheld IS a check that held, so it gets that colour rather than a
   new one: two greens meaning the same thing would be two greens to keep in step. */
.tag-ok { background: var(--color-tie-100); color: var(--color-held-deep); }   /* 8.6:1; --color-tie on this ground was 4.31 */

/* A panel inside a panel. Quieter than .panel — this sits below the failures it is
   about and must not compete with them for the eye. */
.panel-inset {
  border: 1px solid var(--color-line); border-radius: var(--radius-md);
  padding: 20px 22px; background: var(--color-bg);
}
.panel-inset.spaced { margin-top: 22px; }

.rule-table { width: 100%; border-collapse: collapse; margin: 0 0 16px; }
.rule-table th {
  text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-faint); font-weight: 500; padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--color-line);
}
.rule-table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--color-hair);
                 vertical-align: top; }
.rule-table tr:last-child td { border-bottom: 0; }
.rule-table td:last-child, .rule-table th:last-child { padding-right: 0; width: 34%; }
.rule-cap { font-size: 15px; line-height: 1.4; }
.rule-where { display: block; font-size: 12px; color: var(--color-faint); margin-top: 3px; }
/* Tabular figures, so two periods of the same line read as a column. */
.rule-vals {
  font-variant-numeric: tabular-nums; font-size: 14px; color: var(--color-muted);
  white-space: nowrap;
}
.rule-why { display: block; margin: 0 0 18px; }
.rule-why .kicker { display: block; margin-bottom: 6px; }

@media (max-width: 700px) {
  /* The value column is the first thing to go: it is context for the caption, not the
     decision, and the <select> must keep its width to stay usable with a thumb. */
  .rule-table td:nth-child(2), .rule-table th:nth-child(2) { display: none; }
  .rule-table td:last-child, .rule-table th:last-child { width: 45%; }
}

/* The two controls that buy pages. Deliberately quieter than the free ones beside
   them: everything else on these screens costs nothing, and the difference has to be
   visible before the click rather than after it. */
.read-further {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-hair);
}
.read-further label {
  display: inline-flex; align-items: center; gap: 8px; font-size: 14px;
}
.read-further .input { width: 96px; font-variant-numeric: tabular-nums; }
.read-further-note {
  font-size: 13px; line-height: 1.45; color: var(--color-muted);
  flex: 1 1 260px; min-width: 0;
}
.btn-sm { padding: 7px 14px; font-size: 14px; }
.cust-search { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.cust-search .input { max-width: 340px; flex: 1 1 220px; }
.cust-search-says { font-size: 13.5px; }
/* Every upload slot taken: somebody has to start or discard one before sending another. */
.drop-tag.is-full { background: var(--color-review-100); color: var(--color-review-ink); }

/* What a paid rung after Start costs, and the tick it asks for (templates/_spend.html):
   Start's consent box, smaller, under one line naming the price and the allowance. */
.spend { display: grid; gap: 8px; margin: 0 0 12px; max-width: 64ch; }
.spend-price { font-size: 13px; line-height: 1.45; color: var(--color-muted); }
.spend-price strong { color: var(--color-text); font-weight: 500; }
.spend .review-consent { margin-bottom: 0; padding: 11px 14px; }
.read-further .spend { flex: 1 1 100%; }

/* — the verdict bar —
   Pinned under the sheet: the grading the server did, in one place. 72px, so it never
   pushes the figures off-screen. Three states: tied; edited (amber), once an analyst has
   keyed a figure and the checker has not graded it; and broken (red), when that grading
   did not hold. A run that did not tie itself is never shown here - it writes no
   workbook. Cross-fades, never slides, under a figure. */
.wb-verdict {
  position: sticky; bottom: 0; z-index: 3; flex: 0 0 auto;
  display: flex; align-items: center; gap: 14px; min-height: 72px; box-sizing: border-box;
  margin-top: 12px; padding: 12px 18px; border-radius: var(--radius-md);
  border: 1px solid var(--color-held-edge); background: var(--color-held-100);
  color: var(--color-held-deep);
  transition: background .18s cubic-bezier(.4, 0, .2, 1), border-color .18s cubic-bezier(.4, 0, .2, 1);
}
.verdict-seal {
  width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center;
  background: var(--color-accent); color: #FFFFFF; font-size: 15px; font-weight: 700;
}
.verdict-text { min-width: 0; flex: 1 1 0; }
.verdict-head { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.verdict-sub { font-size: 12.5px; line-height: 1.45; color: var(--color-held-ink); }
/* Links in the sub-line point at things to read, and on a tied bar that includes
   "n for information" and "0 on hold" - neither of which is a break. Red was saying
   one had happened (CLAUDE.md, Words and colours; 2026-09-20 review). Amber is the
   review colour: somebody will be asked. On a broken bar the break's own red stands. */
/* --color-review-ink, not -deep: the bar's own ground is a pale green wash, where the
   deep amber measures 4.43:1 at 12px. The ink reads 5.60:1 on it (measured in the
   running app, 2026-09-20). */
.verdict-sub a, .verdict-sub-link { color: var(--color-review-ink); }
.wb-verdict.is-broken .verdict-sub a, .wb-verdict.is-broken .verdict-sub-link { color: var(--color-warn); }
.verdict-sub-link {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.verdict-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.verdict-chip {
  font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
  padding: 6px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-held-edge); background: var(--color-surface); color: var(--color-accent);
}
.verdict-chip:hover { border-color: var(--color-accent); }
.verdict-chip.is-warn { color: var(--color-warn); border-color: var(--color-warn-100); }
.verdict-chip.is-warn:hover { border-color: var(--color-warn); }
/* Rounding alerts, caveats and a qualified audit opinion: nothing broke, and someone will
   be asked to read them - amber, the review colour. Red is a break (CLAUDE.md). */
.verdict-chip.is-ask { color: var(--color-review-ink); border-color: var(--color-review-edge); }
.verdict-chip.is-ask:hover { border-color: var(--color-review); }
.verdict-chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* A phone keeps the seal and the headline on one line and puts the chips beneath, so a
   bar that is pinned over the sheet stays short enough to leave the sheet readable. */
@media (max-width: 700px) {
  .wb-verdict { flex-wrap: wrap; gap: 6px 10px; min-height: 0; padding: 9px 12px; margin-top: 8px; }
  .verdict-seal { width: 24px; height: 24px; border-radius: 7px; font-size: 13px; }
  .verdict-head { font-size: 14px; }
  .verdict-sub { font-size: 12px; }
  .verdict-actions { flex-basis: 100%; margin-left: 34px; justify-content: flex-start; }
  .verdict-chip { padding: 4px 10px; font-size: 12px; }
}

/* — the free check's step strip —
   Light, as both consoles now are: the analyst is still on a light page deciding whether to
   spend. A bar fills only where a step has a count; a step without one moves a stripe,
   which says "working" without inventing a proportion. */
.checkstrip { margin-top: 20px; }
.checkstrip-cap { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.checkstrip-where { font-size: 12.5px; color: var(--color-faint); }
.checkstrip-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.checkstep {
  border: 1px solid var(--color-line); border-radius: 14px; background: var(--color-surface);
  padding: 13px 14px 14px; transition: border-color .18s cubic-bezier(.4, 0, .2, 1);
}
.checkstep.is-running { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-100); }
.checkstep-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.checkstep-no { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--color-faint); }
.checkstep-state { font-size: 11px; color: var(--color-faint); font-variant-numeric: tabular-nums; }
.checkstep.is-running .checkstep-state { color: var(--color-accent); font-weight: 500; }
.checkstep.is-done .checkstep-state { color: var(--color-tie); }
.checkstep-name { font-size: 15px; font-weight: 700; margin-bottom: 5px; }
.checkstep-body { font-size: 11.5px; line-height: 1.45; color: var(--color-muted); margin-bottom: 11px; }
.checkstep-bar { height: 5px; border-radius: var(--radius-pill); background: var(--color-hair); overflow: hidden; }
.checkstep-bar i { display: block; height: 100%; width: 0; background: var(--color-accent); transition: width .26s cubic-bezier(.4, 0, .2, 1); }
.checkstep.is-done .checkstep-bar i { background: var(--color-tie); }
@keyframes checkstripe { from { background-position: 0 0; } to { background-position: 24px 0; } }
.checkstep.is-busy .checkstep-bar i {
  width: 100%;
  background: repeating-linear-gradient(135deg, var(--color-accent-200) 0 6px, var(--color-accent-100) 6px 12px);
  background-size: 24px 100%; animation: checkstripe 1.2s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .checkstep.is-busy .checkstep-bar i { animation: none; } }
@media (max-width: 700px) { .checkstrip-steps { grid-template-columns: minmax(0, 1fr); } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* — the workbook beside its report (handoff changes 1-3) —
   rail | report | handle | sheet. The report takes 45 of every 100 by default and the
   analyst drags it between 40 and 60; the rail starts shut, because its width is the
   report's. The design's 500px and 620px minimums do not fit beside the rail below
   ~1220px, so the split holds 380 and 520 and gives way to two tabs under 1180. */
.wb-layout.has-source {
  column-gap: 8px;
  grid-template-columns: 224px minmax(380px, var(--src-share, 45fr)) 12px minmax(520px, var(--pane-share, 55fr));
}
.wb-layout.has-source.is-collapsed {
  grid-template-columns: 54px minmax(380px, var(--src-share, 45fr)) 12px minmax(520px, var(--pane-share, 55fr));
}
.wb-gone { font-size: 13px; line-height: 1.5; color: var(--color-muted); margin: 0 0 10px; max-width: 80ch; }

.wb-split { cursor: col-resize; position: relative; border-radius: 6px; touch-action: none; }
.wb-split::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 44px;
  transform: translate(-50%, -50%); border-radius: 4px; background: var(--color-rule);
  transition: background .18s var(--ease);
}
.wb-split:hover::after, .wb-split:focus-visible::after { background: var(--color-accent); }
.wb-split:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.wb-source {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-card); overflow: hidden;
}
.src-tools {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto; flex-wrap: wrap;
  padding: 8px 12px; border-bottom: 1px solid var(--color-line); background: var(--color-surface);
}
.src-badge {
  font-size: 12.5px; font-weight: 700; color: var(--color-accent);
  padding: 3px 9px; border-radius: var(--radius-pill); background: var(--color-accent-100);
  transition: opacity .09s var(--ease); font-variant-numeric: tabular-nums;
}
.src-btn {
  width: 28px; height: 28px; border-radius: var(--radius-pill); border: 1px solid var(--color-line);
  background: var(--color-surface); color: var(--color-body); font: inherit; font-size: 15px;
  line-height: 1; cursor: pointer; display: inline-grid; place-items: center;
}
.src-btn:hover:not(:disabled) { border-color: var(--color-text); }
.src-btn:disabled { opacity: .35; cursor: default; }
.src-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.src-sep { width: 1px; height: 18px; background: var(--color-line); margin: 0 4px; }
.src-zoom-pc { font-size: 12px; color: var(--color-muted); min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; }
/* The find box gives way first, so Hide stays on the toolbar's one line at 380px. */
.src-find { margin-left: auto; flex: 1 1 64px; max-width: 150px; min-width: 64px; }
.src-find input {
  font: inherit; font-size: 12.5px; width: 100%; box-sizing: border-box; padding: 5px 10px;
  border: 1px solid var(--color-line); border-radius: var(--radius-pill); background: var(--color-sunken);
}
.src-find input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-100); }
.src-view { flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--color-sunken); padding: 12px; }
.src-view:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.wb-source.is-loading .src-view { opacity: .6; }
/* Said in the view itself, not only on the status line under it: on the first page there
   is no canvas to dim and the panel looked broken (analyst QA, 2026-09-20). */
.src-wait { margin: 0; padding: 28px 12px; text-align: center; font-size: 13.5px;
  color: var(--color-muted); }
.wb-source.is-loading .src-wait { color: var(--color-body); }
.src-page { position: relative; margin: 0 auto; background: #FFFFFF; box-shadow: 0 1px 3px rgba(38, 36, 33, .12); }
.src-canvas { display: block; }
.src-boxes { position: absolute; inset: 0; pointer-events: none; }
.src-box { position: absolute; border-radius: 3px; }
@keyframes wash-in { from { opacity: 0; } to { opacity: 1; } }
/* 180ms in, then 80ms to full: the wash arrives after the page has settled under it. */
.src-box.is-wash {
  background: var(--wash-fill); box-shadow: inset 0 0 0 1.5px var(--wash-edge);
  opacity: 0; animation: wash-in .08s var(--ease) .18s forwards;
}
.src-box.is-ghost { background: var(--wash-fill); box-shadow: inset 0 0 0 1px var(--wash-edge); opacity: .3; }
.src-box.is-band { background: rgba(224, 164, 58, .14); box-shadow: inset 0 0 0 1px var(--wash-edge); }
.src-box.is-band.is-page { background: transparent; box-shadow: inset 0 0 0 3px rgba(169, 117, 20, .55); border-radius: 0; }
.src-box.is-find { background: rgba(14, 110, 94, .20); box-shadow: inset 0 0 0 1px var(--color-accent); }
/* The figure's printed row, under its wash: the same amber as the sheet's selected line. */
.src-box.is-row {
  background: rgba(224, 164, 58, .16); box-shadow: inset 0 -2px 0 rgba(169, 117, 20, .55);
  opacity: 0; animation: wash-in .08s var(--ease) .12s forwards;
}
.src-hide {
  font: inherit; font-size: 12.5px; padding: 5px 11px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-body);
  cursor: pointer; white-space: nowrap;
}
.src-hide:hover { border-color: var(--color-text); }
.src-hide:focus-visible, .src-reveal:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* Put away: rail and sheet only, as though there were no report. */
.wb-layout.has-source.src-hidden { grid-template-columns: 224px minmax(0, 1fr); }
.wb-layout.has-source.src-hidden.is-collapsed { grid-template-columns: 54px minmax(0, 1fr); }
.wb-layout.has-source.src-hidden .wb-source,
.wb-layout.has-source.src-hidden .wb-split { display: none; }
/* The sheet's selected line, the one banded on the page. */
.sheet tr.is-traced-row > td { background-color: rgba(224, 164, 58, .12); }
/* The faint ink is 4.8:1 on white but 4.42:1 on this wash, and a year-on-year figure is
   words: on the banded row it takes the next ink up (4.95:1). A sharp move keeps its own. */
.sheet tr.is-traced-row > td .yoy:not(.is-sharp),
.sheet tr.is-traced-row > td.yoy:not(.is-sharp) { color: var(--color-muted); }
.sheet tr.is-traced-row > td.trace.tier-review,
.sheet tr.is-traced-row > td.trace.tier-broke { background-image: linear-gradient(rgba(224, 164, 58, .12), rgba(224, 164, 58, .12)); }
.src-link { position: absolute; height: 1px; background: var(--wash-edge); transform-origin: 0 0; }
.src-status {
  flex: 0 0 auto; font-size: 12px; line-height: 1.45; color: var(--color-muted);
  padding: 7px 12px; border-top: 1px solid var(--color-line); background: var(--color-surface);
  min-height: 1.45em;
}

/* — the sheet picker (the tab list's job, in the toolbar) — */
.sheet-pick { display: inline-flex; align-items: center; gap: 8px; }
.sheet-pick-select {
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--color-text);
  padding: 7px 30px 7px 12px; border: 1px solid var(--color-edge); border-radius: var(--radius-pill);
  background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236E6862' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center;
  appearance: none; max-width: 300px; cursor: pointer;
}
.sheet-pick-select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.sheet-pick-of { font-size: 12px; color: var(--color-faint); white-space: nowrap; }

/* — a keyed figure: traced, tiered, keyed by you, edited in place — */
td.trace { cursor: pointer; transition: box-shadow .09s var(--ease), background .18s var(--ease); }
td.trace:hover { box-shadow: inset 0 0 0 1px var(--color-rule); }
td.trace:focus { outline: none; }
td.trace:focus-visible, td.trace.is-traced { box-shadow: inset 0 0 0 1.5px var(--color-accent); }
/* A calculated total, chosen by a link or a click: the same ring, and still grey. */
td.calc { cursor: pointer; }
td.calc:focus { outline: none; }
td.calc.is-traced { box-shadow: inset 0 0 0 1.5px var(--color-accent); }
td.trace.tier-review { background: var(--color-review-100); }
td.trace.tier-broke { background: var(--color-warn-100); }
.tier-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
/* The design's #E0A43A dot is 2.08:1 on its ground; a marker needs 3:1. */
.tier-review .tier-dot { background: #B88630; }
.tier-broke .tier-dot { background: var(--color-warn); }
td.trace.v-yours { color: var(--color-yours); background: var(--color-sunken); box-shadow: inset 3px 0 0 var(--color-yours); font-weight: 500; }
td.trace.v-yours.is-traced, td.trace.v-yours:focus-visible { box-shadow: inset 3px 0 0 var(--color-yours), inset 0 0 0 1.5px var(--color-accent); }
.yours-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; vertical-align: 1px; background: var(--color-yours); }
td.trace.is-editing { padding: 2px 4px; box-shadow: none; }
.cell-edit {
  width: 100%; box-sizing: border-box; font: inherit; text-align: right; font-variant-numeric: tabular-nums;
  padding: 3px 7px; border: 1px solid var(--color-accent); border-radius: 6px;
  box-shadow: 0 0 0 2px rgba(14, 110, 94, .18); background: #FFFFFF; color: var(--color-yours);
}
.cell-edit:focus { outline: none; }

/* — a period's three-line header — */
th.th-period { vertical-align: bottom; }
.th-l1 { display: block; font-size: 14px; font-weight: 700; color: var(--color-text); }
/* Wrapped, not cut: a period column is narrow, and a scale shown as "AED · MILLI…" is
   the one fact on the sheet no check can confirm. */
.th-l2, .th-l3 { display: block; font-size: 10.5px; line-height: 1.3; font-weight: 400; color: var(--color-faint); letter-spacing: .02em; white-space: normal; }
.th-l2 { text-transform: uppercase; }
button.th-scale { margin: 0 0 0 auto; padding: 0; border: 0; background: none; font: inherit; font-size: 10.5px; color: var(--color-accent); cursor: pointer; text-transform: uppercase; max-width: 100%; }
button.th-scale:hover { text-decoration: underline; }

/* — the selected figure, in words — */
.cell-inspector {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 0 0 auto;
  margin-top: 8px; padding: 8px 14px; font-size: 12.5px;
  background: var(--color-sunken); border: 1px solid var(--color-line); border-radius: 12px;
  font-variant-numeric: tabular-nums;
}
.cell-inspector[hidden] { display: none; }
.insp-k { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-faint); }
.insp-what { font-weight: 500; }
.insp-run { color: var(--color-muted); }
/* A Standard Spread figure the screen cannot tie to its face line while an edit is kept
   on that caption: plain, never the run's blue nor the analyst's violet (workbook.js
   keptOnCaption). The cell itself carries `v-held` and no colour rule of its own. */
.insp-held { color: var(--color-muted); }
.insp-arrow { color: var(--color-faint); }
.insp-yours { color: var(--color-yours); font-weight: 700; }
.insp-page, .insp-revert { font: inherit; font-size: 12.5px; padding: 2px 9px; border-radius: var(--radius-pill); border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-accent); cursor: pointer; }
.insp-revert { color: var(--color-yours); }
.insp-page:hover, .insp-revert:hover { border-color: currentColor; }
.insp-block { font-size: 12.5px; color: var(--color-muted); }
.insp-page-in { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--color-review-ink); }
.insp-page-in .input { width: 64px; padding: 3px 9px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.insp-note { color: var(--color-warn); font-weight: 500; }
/* Edits graded tied whose workbook cannot be built again now (edits.py `unbuilt`): the bar
   says "edited, not re-checked", amber, and so does this - nothing broke, somebody is asked. */
.insp-note.insp-unbuilt { color: var(--color-review-ink); }
.insp-why { flex-basis: 100%; color: var(--color-muted); font-size: 12px; }
/* What to do about the flag, under what is wrong, and the control that does it. A flag
   an analyst cannot act on is a disclaimer, not a flag (2026-09-20 review). */
.insp-do { flex-basis: 100%; color: var(--color-body); font-size: 12px; line-height: 1.5; }
.insp-act {
  font: inherit; font-size: 12.5px; padding: 2px 9px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-line); background: var(--color-surface);
  color: var(--color-review-deep); cursor: pointer; text-decoration: none;
}
.insp-act:hover { border-color: currentColor; }

/* — the legend, with swatches — */
.legend .lg { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; }
.legend .lg::before { content: ""; width: 9px; height: 9px; border-radius: 2px; }
.lg-keyed::before { background: var(--color-keyed); }
.lg-calc::before { background: var(--color-text); box-shadow: 0 0 0 2px var(--color-derived); }
.lg-review::before { background: #B88630; border-radius: 50%; }
.lg-broke::before { background: var(--color-warn); border-radius: 50%; }
.lg-yours::before { background: var(--color-yours); }
.legend .lg-hint { color: var(--color-faint); }

/* — the verdict bar's other two states, and its tray — */
.wb-verdict { flex-wrap: wrap; }
.wb-verdict.is-edited { background: var(--color-review-100); border-color: var(--color-review-edge); color: var(--color-review-ink); }
.wb-verdict.is-edited .verdict-seal { background: var(--color-review-deep); }   /* white "!" 4.8:1; the light amber was 2.20 */
/* The free regrade, amber to match the edited bar (design_handoff_analyst_flow Screen 3):
   teal said "the primary action" over a state that is about somebody being asked. It says
   "free" on its face - in a tooltip nobody read it before pressing. */
.btn-review { background: var(--color-review-deep); color: #FFFFFF; border-color: var(--color-review-deep); }
.btn-review:hover:not(:disabled) { background: var(--color-review-ink); border-color: var(--color-review-ink); }
.wb-verdict.is-edited .verdict-sub { color: var(--color-review-ink); }
.wb-verdict.is-broken { background: var(--color-warn-100); border-color: #E2BCA9; color: #5C2410; }
.wb-verdict.is-broken .verdict-seal { background: var(--color-warn); }
.wb-verdict.is-broken .verdict-sub { color: #5C2410; }
.verdict-own { display: inline-flex; gap: 8px; align-items: center; }
.verdict-own:empty { display: none; }
.verdict-tray {
  flex-basis: 100%; max-height: 216px; overflow: auto; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid #E2BCA9; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.verdict-tray[hidden] { display: none; }
.tray-k { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.tray-row { display: flex; flex-direction: column; gap: 2px; padding: 5px 0; border-bottom: 1px solid rgba(160, 58, 22, .12); font-size: 12.5px; }
.tray-what { font-weight: 500; }
.tray-fig { font-variant-numeric: tabular-nums; }
.tray-fig.is-within { color: var(--color-text); }
.tray-fig.is-yours { color: var(--color-yours); }
.tray-rest { color: var(--color-muted); border-bottom: 0; }
.tray-p { font-size: 12.5px; line-height: 1.5; margin: 0 0 6px; }

/* — under 1180px: Sheet and Source as two tabs, the bar pinned under both — */
.wb-switch { display: none; }
@media (max-width: 1180px) {
  .wb-switch { display: inline-flex; gap: 4px; padding: 3px; margin: 0 0 8px; border-radius: var(--radius-pill); background: var(--color-chip); align-self: flex-start; }
  .wb-switch button { font: inherit; font-size: 13px; padding: 6px 14px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-muted); cursor: pointer; }
  .wb-switch button[aria-pressed="true"] { background: var(--color-surface); color: var(--color-text); font-weight: 500; box-shadow: 0 1px 2px rgba(38, 36, 33, .08); }
  .wb-layout.has-source, .wb-layout.has-source.is-collapsed { grid-template-columns: 54px minmax(0, 1fr); }
  .wb-layout.has-source .wb-split { display: none; }
  .wb-layout.has-source .wb-source { display: none; }
  .wb-layout.has-source.show-source .wb-source { display: flex; }
  .wb-layout.has-source.show-source .wb-pane { display: none; }
  /* Tabs already put either half away here, so Hide has nothing to add. */
  .src-hide, .src-reveal { display: none !important; }
  .wb-layout.has-source.src-hidden, .wb-layout.has-source.src-hidden.is-collapsed { grid-template-columns: 54px minmax(0, 1fr); }
  .wb-layout.has-source.src-hidden.show-source .wb-source { display: flex; }
  .verdict-tray { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  td.trace, .wb-split::after, .src-badge { transition: none; }
}

/* — the review page: the report and the sheet, and nothing else on the screen —
   One strip across the top (the way back, the readings no check catches, the tabs), the
   two halves filling the height, the verdict bar under them. Rules here carry one more
   class than the finished screen's so they win wherever both apply, media queries
   included. */
.shell-review .main { max-width: none; padding: 6px 10px 6px; overflow: hidden; }
.rv-top {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto; min-height: 44px;
  padding: 4px 12px; background: var(--color-surface); border-bottom: 1px solid var(--color-line);
}
.rv-back {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-heading);
  font-weight: 700; font-size: 15px; color: var(--color-text); border-bottom: 0;
  white-space: nowrap; max-width: 26ch; overflow: hidden; text-overflow: ellipsis;
}
.rv-back span { font-size: 20px; line-height: 1; color: var(--color-accent); }
.rv-back:hover { color: var(--color-accent); border-bottom: 0; }
.rv-meta { font-size: 12px; color: var(--color-faint); white-space: nowrap; }
.rv-keys { font-size: 12px; color: var(--color-faint); cursor: help; border-bottom: 1px dotted var(--color-rule); white-space: nowrap; }
.rv-warn { position: relative; flex: 0 0 auto; }
.rv-warn summary {
  list-style: none; cursor: pointer; font-size: 12.5px; font-weight: 700; white-space: nowrap;
  padding: 5px 11px; border-radius: var(--radius-pill);
  background: var(--color-review-100); color: var(--color-review-ink); border: 1px solid var(--color-review-edge);
}
.rv-warn summary::-webkit-details-marker { display: none; }
.rv-warn summary::before { content: "! "; }
.rv-warn-body {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: min(520px, 80vw);
  padding: 12px 14px; font-size: 13px; line-height: 1.5; border-radius: 12px;
  background: var(--color-surface); border: 1px solid var(--color-review-edge);
  box-shadow: 0 8px 24px rgba(38, 36, 33, .14);
}
.rv-warn-body p { margin: 0 0 8px; }
.rv-tabs {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; gap: 8px;
  overflow-x: auto; scrollbar-width: thin; padding: 2px 0;
}
.rv-tab {
  flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 6px; cursor: pointer;
  font: inherit; font-size: 12.5px; white-space: nowrap; padding: 5px 10px;
  border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--color-muted);
}
.rv-tab:hover { background: var(--color-chip); color: var(--color-text); }
.rv-tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.rv-tab-code { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--color-faint); }
.rv-tab.is-active { background: var(--color-accent-100); border-color: var(--color-accent-100); color: var(--color-text); font-weight: 500; }
.rv-tab.is-active .rv-tab-code { color: var(--color-accent); }
/* A finished run past the retention window: what went, what is kept, the verdict it
   earned and a priced way to read the report again. */
.swept { max-width: 980px; margin: 0 auto; width: 100%; }
.swept-panel { padding: 28px 32px; }
.swept-h { font-size: 26px; line-height: 1.2; margin: 10px 0 4px; }
.swept-meta { margin: 0 0 16px; font-size: 14px; }
.swept .wb-verdict { position: static; }
.swept-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px 28px; margin-top: 20px; }
.swept-col ul { margin: 8px 0 0; padding-left: 18px; color: var(--color-body); font-size: 14px; line-height: 1.55; }
.swept-col li { margin: 4px 0; }
.swept-rerun { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--color-line); }
.swept-none { font-size: 13.5px; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--color-line); max-width: 70ch; }
.swept-foot { margin: 18px 0 0; }
.rv-tab-sep { flex: 0 0 auto; width: 1px; height: 18px; background: var(--color-line); margin: 0 4px; }
/* A GROUP IS A CARD, with its heading over it: as printed, exploded into the notes,
   proof, compared out, and the verdict - the grouping an analyst navigates by. Laid out
   in the row beside its tabs, the heading read as one more tab and the grouping was the
   hardest thing on the strip to see. The card is quiet: a hairline and the page's own
   wash, so the ACTIVE tab inside it is still the loudest thing in the strip. */
.rv-tabcard {
  flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 4px 8px 5px; border: 1px solid var(--color-line);
  border-radius: 12px; background: var(--color-bg);
}
.rv-tabcard-row { display: flex; align-items: center; gap: 2px; }
.rv-tab-group { flex: 0 0 auto; font-size: 10.5px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-muted); padding: 0 2px; white-space: nowrap; }
.rv-make { color: var(--color-accent); border-color: var(--color-line); }
/* The finished screen's strip (D1): the company, its year, basis and scale, the readings
   no check catches, then the actions - and the tabs on a row of their own under it, so
   neither crowds the other out at 1440px. */
/* One line wherever it fits; where it does not, the actions wrap under the company rather
   than the company's name being cut to its first four letters - at 1000px, with the
   Companies link and the reason beside a waiting Sign off, "Hindustan Aeronautics..." was
   squeezed to 49px. The name keeps at least 18 characters. */
.fs-head { gap: 8px; flex-wrap: wrap; row-gap: 4px; }
.rv-home { display: inline-grid; place-items: center; border-bottom: 0; flex: 0 0 auto; }
.rv-home .top-mark { margin: 0; }
.rv-name { font-family: var(--font-heading); font-weight: 700; font-size: 16px; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: min(18ch, 100%); flex: 0 1 auto; max-width: 34ch; }
.rv-grow { flex: 1 1 auto; }
.fs-head .wb-ticks { white-space: nowrap; }
.rv-signoff-wait { display: inline-flex; align-items: center; gap: 8px; cursor: help; }
/* Sign off itself, which says why beside it while keyed figures hold it back. */
.rv-signoff { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
/* Why Sign off is greyed, in words beside it rather than only in a tooltip. */
.rv-why { font-size: 12px; color: var(--color-muted); white-space: nowrap; cursor: auto; }
/* The way to the companies from the strip that stands in for the site's header. */
.rv-chrome { flex: 0 0 auto; font-size: 12.5px; color: var(--color-muted); border-bottom: 0; white-space: nowrap; }
.rv-chrome:hover { color: var(--color-accent); border-bottom: 0; }
/* A sign-off withdrawn by an edit, and the CMA pack's: amber - somebody will be asked to
   sign again - on a band of its own under the strip, so the strip keeps to one line. */
.rv-notice { flex: 0 0 auto; padding: 5px 12px; background: var(--color-review-100);
  border-bottom: 1px solid var(--color-review-edge); color: var(--color-review-ink); font-size: 12.5px; line-height: 1.45; }
.rv-notice-line { margin: 0; }
.rv-notice-line + .rv-notice-line { margin-top: 2px; }
/* A note block ticked as read, once for every line in it (D4). */
.blk-tick { font: inherit; font-size: 12px; line-height: 1; width: 22px; height: 22px; margin-right: 6px;
  border-radius: 6px; border: 1px solid var(--color-line); background: var(--color-surface);
  color: var(--color-faint); cursor: pointer; flex: 0 0 auto; }
.blk-tick.is-on { background: var(--color-accent-100); border-color: var(--color-accent-100); color: var(--color-accent); }
.rv-tabmenu > summary.rv-tab { list-style: none; }
.rv-tabmenu > summary.rv-tab::-webkit-details-marker { display: none; }
.rv-tab-caret { font-size: 10px; color: var(--color-faint); }
/* A folded group's own title leads its tab, in the heading's small capitals. */
.rv-tabmenu .rv-tab-group { padding: 0 2px 0 0; }

/* — the Credit view (D5): the first tab of a finished spread —
   It shares the body with the sheets; while it is open the sheets step aside and their
   tab strip shows no sheet as current. */
.cv-open #wb, .cv-open .wb-switch, .cv-open #wb-fallback, .cv-open .rv-gone { display: none !important; }
.cv-open #wb-tabs .rv-tab.is-active { background: transparent; border-color: transparent; font-weight: 400; }
.cv-tab { flex: 0 0 auto; font-weight: 500; }
.cv { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 4px 2px 10px; }
.cv-step0 { padding: 16px 20px; }
.cv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.cv-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cv-meta { font-size: 13px; margin-left: 4px; }
.cv-p0 { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; max-width: 110ch; }
.cv-source { color: var(--color-muted); }
/* A figure an analyst keyed over the run's, named in Step 0 with what it replaced.
   Violet, because that is the analyst's own colour everywhere else on the spread. */
.cv-keyed { color: var(--color-yours); white-space: nowrap; }
.cv-keyed .muted { white-space: normal; }
.cv-conv { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 2px; }
.cv-conv .kicker { margin-right: 4px; }
.cv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 12px; }
.cv-q { padding: 14px 16px; min-width: 0; }
.cv-qh { font-size: 15px; margin: 0 0 8px; display: flex; align-items: baseline; gap: 8px; }
.cv-qn { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-accent-100); color: var(--color-accent-deep); font-size: 12px; }
.cv-t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cv-t th, .cv-t td { padding: 6px 6px; border-bottom: 1px solid var(--color-hair); vertical-align: top; }
.cv-t thead th { font-size: 12px; font-weight: 500; color: var(--color-muted); }
.cv-l { text-align: left; font-weight: 400; }
.cv-why { display: block; font-size: 12px; color: var(--color-muted); margin-top: 2px; }
.cv-n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cv-fig { color: var(--color-keyed); }
.cv-p { text-align: right; white-space: nowrap; }
.cv-page { display: inline-block; font-size: 11px; color: var(--color-faint); margin-left: 4px; }
.cv-nh { color: var(--color-muted); font-size: 12.5px; }
.cv-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.cv-pill { font: inherit; font-size: 12px; padding: 3px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-muted); cursor: pointer; }
.cv-pill.is-on { background: var(--color-accent-100); border-color: var(--color-accent-100); color: var(--color-accent-deep); font-weight: 500; }
.cv-unchecked ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.55; }
.cv-unchecked li { margin: 4px 0; }
@media (max-width: 720px) { .cv-grid { grid-template-columns: minmax(0, 1fr); } }
/* Below a laptop's width the keys' hint gives its room to the tabs: the legend under the
   sheet lists the keys too. */
@media (max-width: 1180px) { .rv-tabbar .rv-keys { display: none; } }
.rv-tabmenu .wb-more-menu > button.is-active { background: var(--color-accent-100); font-weight: 500; }
.rv-tabbar { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; min-height: 38px;
  padding: 2px 12px; background: var(--color-surface); border-bottom: 1px solid var(--color-line); }
.rv-note { margin: 0 0 6px; padding: 10px 14px; }
.rv-gone { margin: 0 0 6px; }

.wb-layout.is-review { margin-top: 0; min-height: 0; gap: 0; }
.wb-layout.is-review .wb-nav { display: none; }
.wb-layout.is-review:not(.has-source) { grid-template-columns: minmax(0, 1fr); }
.wb-layout.is-review.has-source,
.wb-layout.is-review.has-source.is-collapsed {
  column-gap: 2px;
  grid-template-columns: minmax(300px, var(--src-share, 45fr)) 10px minmax(360px, var(--pane-share, 55fr));
}
.wb-layout.is-review.has-source.src-hidden,
.wb-layout.is-review.has-source.src-hidden.is-collapsed { grid-template-columns: minmax(0, 1fr); }
/* The tabs are in the strip; the picker, the caption and the tool row's margins go. */
.is-review .sheet-pick, .is-review .sheet-cap { display: none; }
.is-review .sheet-head { padding: 6px 10px 0; }
.is-review .sheet-tools { flex-wrap: nowrap; gap: 6px; margin: 0 0 6px; overflow-x: auto; }
.is-review .sheet-tools .input { flex: 0 1 200px; padding: 5px 12px; }
.is-review .sheet-tools .btn-sm { padding: 5px 11px; font-size: 13px; white-space: nowrap; }
.is-review .sheet-scroll { min-height: 0; }
.is-review .cell-inspector { margin-top: 4px; padding: 5px 12px; }
.is-review .legend { margin: 3px 4px 0; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-review .src-tools { padding: 5px 10px; }
.is-review .src-view { padding: 8px; }
.is-review .src-status { padding: 4px 10px; }
.shell-review .wb-verdict { min-height: 48px; margin-top: 6px; padding: 6px 14px; }
.shell-review .verdict-seal { width: 26px; height: 26px; border-radius: 8px; font-size: 14px; }
.shell-review .verdict-head { font-size: 14px; }
.shell-review .verdict-sub { font-size: 12px; }
.shell-review .wb-switch { margin: 0 0 6px; }

/* Side by side down to 980px here: an analyst ticking through a note needs both at once,
   and a 14-inch laptop is where most of that happens. */
@media (min-width: 981px) and (max-width: 1180px) {
  .shell-review .wb-switch { display: none; }
  .wb-layout.is-review.has-source .wb-source { display: flex; }
  .wb-layout.is-review.has-source .wb-split { display: block; }
  .wb-layout.is-review.has-source .wb-pane { display: flex; }
  .wb-layout.is-review.has-source.src-hidden .wb-source,
  .wb-layout.is-review.has-source.src-hidden .wb-split { display: none; }
  .shell-review .src-hide, .shell-review .src-reveal { display: inline-grid !important; }
  .shell-review .src-reveal[hidden] { display: none !important; }
}
@media (max-width: 980px) {
  .wb-layout.is-review.has-source,
  .wb-layout.is-review.has-source.is-collapsed { grid-template-columns: minmax(0, 1fr); }
  /* Not .rv-meta: year, basis and scale stay in sight at every width (CLAUDE.md, "Context
     stays in sight"). The strip wraps instead (.fs-head), so they take a line of their
     own when the name and the actions leave no room. */
  .rv-keys { display: none; }
}
@media (max-width: 720px) {
  /* A phone: digits are never cut short. The sheet sizes its columns to what they hold
     and scrolls sideways under its pinned caption - at 390px a period's figure read
     "26,..." with the note's chip on the digits (2026-09-19 review). */
  table.sheet { table-layout: auto; }
  table.sheet td.lbl, table.sheet th.lbl { min-width: 150px; }
  /* A phone: the strip wraps rather than cutting the company's name to nothing. */
  .fs-head { flex-wrap: wrap; row-gap: 6px; }
  .rv-name { max-width: 100%; }
  /* A phone: the tab strip wraps, every group but the open one folded to a tab with a
     menu (workbook.js fitTabs). At 390px it scrolled, unmarked, and held 1,145px of tabs
     in 249 - the Income statement onward sat past the edge (2026-09-19). */
  .rv-tabbar { flex-wrap: wrap; row-gap: 2px; padding: 4px 10px; }
  .rv-tabs { flex: 1 1 100%; flex-wrap: wrap; overflow: visible; row-gap: 6px; }
  .rv-tabs .rv-tab { max-width: 100%; }
  /* A card of three tabs is wider than a phone, and a card cannot scroll inside the
     strip: its tabs wrap under its heading instead. The open group is the one that
     keeps its tabs (fitTabs), so this is the row that needs the room. */
  .rv-tabcard { max-width: 100%; }
  .rv-tabcard-row { flex-wrap: wrap; justify-content: center; row-gap: 2px; }
}

/* — ticks: a figure read against its page (the review page) — */
td.trace.is-ticked { background-image: linear-gradient(90deg, transparent calc(100% - 3px), var(--color-accent) calc(100% - 3px)); }
/* Placed over the cell's corner, not after its digits: a column of figures stays aligned. */
td.trace.is-ticked { position: relative; }
td.trace.is-ticked::after { content: "✓"; position: absolute; top: 1px; right: 5px; font-size: 9px; font-weight: 700; line-height: 1; color: var(--color-accent); }
/* Above the sheet: Proof's four lenses (the pills are the Credit view's EBITDA pills), or
   the line saying a bank format's mapping is a proposal. Plain ink - a proposal asks
   nobody anything yet, so it is neither amber nor a figure's colour. */
.wb-sheetbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; }
.wb-sheetbar[hidden] { display: none; }
.wb-lens-k { font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-muted); margin-right: 2px; }
.wb-proposal { font-size: 12.5px; line-height: 1.45; color: var(--color-body);
  padding: 5px 10px; border-radius: 8px; background: var(--color-chip); }
.rv-tab-prog { font-size: 10.5px; color: var(--color-faint); font-variant-numeric: tabular-nums; }
.rv-tab-prog.is-done { color: var(--color-accent); font-weight: 700; }
.rv-progress {
  flex: 0 0 auto; font-size: 12px; font-weight: 500; white-space: nowrap; padding: 4px 10px;
  border-radius: var(--radius-pill); background: var(--color-chip); color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.rv-progress.is-done { background: var(--color-accent-100); color: var(--color-accent); }
.insp-tick { font: inherit; font-size: 12.5px; padding: 2px 9px; border-radius: var(--radius-pill); border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-muted); cursor: pointer; }
.insp-tick.is-on { color: var(--color-accent); border-color: var(--color-accent); font-weight: 500; }
.insp-key { font: inherit; font-size: 12.5px; padding: 2px 9px; border-radius: var(--radius-pill); border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-muted); cursor: pointer; }
.wb-focus { flex: 0 0 auto; font-size: 13px; padding: 5px 10px; }
.src-backbtn {
  font: inherit; font-size: 12px; padding: 4px 10px; border-radius: var(--radius-pill); cursor: pointer;
  border: 1px solid var(--color-accent); background: var(--color-accent-100); color: var(--color-accent); white-space: nowrap;
}
.src-backbtn[hidden] { display: none; }
/* The summary's count of figures ticked, beside the sign-off it qualifies. */
.wb-ticks {
  align-self: center; font-size: 12.5px; white-space: nowrap; padding: 5px 11px; border-bottom: 0;
  border-radius: var(--radius-pill); background: var(--color-accent-100); color: var(--color-accent);
}
.wb-ticks.is-short { background: var(--color-review-100); color: var(--color-review-deep); }

/* The year never breaks ("FY 2025–" over "26"); on the review page the date line is one
   line, cut, with the whole of it on hover - the scale above it still wraps. */
.th-l1 { white-space: nowrap; }
.is-review .th-l3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-back { flex: 0 0 auto; max-width: 22ch; }
.is-review .sheet-tools .input#wb-filter { flex: 1 1 140px; min-width: 120px; max-width: 220px; }
.is-review table.sheet td { padding: 7px 7px; }
.is-review table.sheet th { padding: 7px 7px; }
.is-review table.sheet td.lbl, .is-review table.sheet th.lbl { padding-left: 14px; }
.is-review .sheet-tools { scrollbar-width: none; }
.is-review .sheet-tools::-webkit-scrollbar { display: none; }

/* — the CMA pack: the forms beside the report —
   Built on the review page's frame. A cell says what kind of figure it is by its ink:
   read figures in the keyed blue, derived ones plain on a grey wash, an analyst's in the
   violet the edited workbook uses, projections in italic. */
.cma-select { flex: 0 0 auto; font-size: 12.5px; padding: 4px 8px; max-width: 18ch; }
.cma-dl.is-off { opacity: .45; cursor: not-allowed; }
.cma-pane .sheet-scroll { padding-bottom: 12px; }
.cma-empty { padding: 24px; color: var(--color-muted); }
.cma-legend { display: inline-flex; gap: 10px; font-size: 12px; margin-left: auto; white-space: nowrap; }
.cma-legend .k-derived { padding: 0 5px; border-radius: 4px; }
table.cma-table col:first-child { width: auto; }
table.cma-table td.cma-cell { cursor: pointer; }
table.cma-table td.cma-cell:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
table.cma-table td.cma-cell.is-traced { box-shadow: inset 0 0 0 2px var(--color-accent); }
table.cma-table td.cma-head { font-weight: 700; font-size: 12px; letter-spacing: .04em; color: var(--color-muted); background: var(--color-sunken); }
table.cma-table tr.k-row-calc td.lbl { font-weight: 500; }
table.cma-table tr.k-row-memo td.lbl { padding-left: 40px; color: var(--color-muted); }
.cma-no { display: inline-block; min-width: 5.2em; font-size: 11.5px; color: var(--color-faint); font-variant-numeric: tabular-nums; }
.cma-col .cma-kind, .cma-card-head .cma-kind { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cma-card-head .cma-kind { display: inline; margin: 0 8px; }
.k-read { color: var(--color-keyed); }
.k-derived { color: var(--color-text); }
td.k-derived, .cma-legend .k-derived { background: var(--color-derived); }
.k-input { color: var(--color-yours); background: var(--color-sunken); }
/* A derived line that rests on a keyed input keeps the derived ink - violet is a figure an
   analyst keyed, not one computed from it - and says so with a dotted underline; the
   inspector lists the input it rests on. */
td.uses-input { text-decoration: underline dotted var(--color-muted); text-underline-offset: 3px; }
.k-projected, .cma-kind.k-projected, .cma-kind.k-estimate { color: #1D4ED8; font-style: italic; }
.cma-kind.k-audited { color: var(--color-accent); }
.cma-kind.k-provisional { color: var(--color-review-deep); }
td.is-empty { color: var(--color-faint); }
td.is-awaiting { background-image: linear-gradient(90deg, transparent calc(100% - 3px), var(--color-review) calc(100% - 3px)); }
/* A ratio past the bank's benchmark is somebody to ask, not a break: an amber mark
   beside the digits, which keep their own ink. */
td.is-outside { box-shadow: inset -3px 0 0 var(--color-review); font-weight: 700; }
li.is-outside { color: var(--color-review-ink); font-weight: 700; }
li.is-within { color: var(--color-tie); }
li.is-awaiting { color: var(--color-review-ink); }
.cma-inspector { flex-wrap: wrap; max-height: 36vh; overflow: auto; }
.cma-prov { flex-basis: 100%; margin: 4px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.cma-prov li { margin: 2px 0; }
.cma-why { color: var(--color-muted); }
.cma-ruled { color: var(--color-yours); font-weight: 500; }
.cma-expr { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }
.cma-link { font: inherit; font-size: 12.5px; border: 0; background: none; color: var(--color-accent); cursor: pointer; text-decoration: underline; padding: 0; }
.cma-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.cma-form .input { font-size: 13px; padding: 5px 10px; min-width: 16ch; }
.cma-panel { padding: 12px 18px 24px; max-width: 1100px; }
.cma-panel h2 { font-size: 15px; margin: 18px 0 6px; }
.cma-panel > .input { font-size: 13px; padding: 5px 10px; margin: 4px 6px 4px 0; min-width: 28ch; }
.cma-note { font-size: 13px; color: var(--color-muted); margin: 6px 0; max-width: 90ch; }
.cma-card { border: 1px solid var(--color-line); border-radius: var(--radius-sm); padding: 10px 12px; margin: 8px 0; background: var(--color-surface); }
.cma-card.is-pending { border-color: var(--color-review-edge); background: var(--color-review-100); }
.cma-card.is-answered { border-left: 3px solid var(--color-yours); }
.cma-card-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 13.5px; }
.cma-form-ref { font-size: 12px; color: var(--color-faint); }
.cma-hint { font-size: 12px; color: var(--color-review-ink); }
.cma-fields { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 8px; font-size: 13px; }
.cma-fields .input { font-size: 13px; padding: 5px 10px; }
.cma-num { width: 12ch; text-align: right; font-variant-numeric: tabular-nums; }
.cma-mode { width: auto; }
.cma-total { color: var(--color-muted); font-variant-numeric: tabular-nums; }
.cma-err { color: var(--color-review-ink); font-size: 13px; margin: 6px 0 0; }

/* What the reading gave a form no account for, on the face of the form. Amber: someone
   has to weigh it (CLAUDE.md's colour contract), never red, which is a break. */
.cma-leftout { border: 1px solid var(--color-review); background: var(--color-review-100);
  border-radius: var(--radius-card); padding: 12px 14px; margin: 0 0 12px; }
.cma-leftout > strong { display: block; color: var(--color-review-ink); font-size: 14px;
  margin-bottom: 4px; }
.cma-leftout .cma-note { margin: 4px 0 0; color: var(--color-body); }
.cma-err[hidden] { display: none; }
table.cma-mini { width: auto; min-width: 60%; table-layout: auto; font-size: 13px; }
table.cma-mini td, table.cma-mini th { padding: 5px 10px; }
table.cma-mini td.lbl { padding-left: 10px; }
table.cma-mini .input { font-size: 13px; padding: 4px 8px; width: 16ch; }
table.cma-mini tr.is-broken td { background: var(--color-warn-100); }
.k-ok { color: var(--color-tie); }
.k-bad { color: var(--color-warn); font-weight: 700; }
.cma-verdicts, .cma-trail { font-size: 13px; line-height: 1.55; padding-left: 18px; }
.cma-list { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cma-withdrawn { color: var(--color-review-ink); font-weight: 500; }
.cma-tab-pending { color: var(--color-review-deep); font-weight: 700; }
.cma-tab-broken { color: var(--color-warn); font-weight: 700; }
.wb-verdict.is-refused { background: var(--color-chip); border-color: var(--color-line); color: var(--color-muted); }
.wb-verdict.is-refused .verdict-seal { background: var(--color-quiet); }
.cma-busy { cursor: progress; }
.wb-cma { align-self: center; }
/* The pack's strip carries its settings as well as its tabs: the tabs take their own line
   before either is crushed to nothing. */
.cma-top { flex-wrap: wrap; row-gap: 4px; }
/* The run behind a pack whose way back is the company: secondary, but never hidden with
   the strip's metadata below 980px - it is the only way to the spread's own page here. */
.cma-run-link { font-size: 12px; white-space: nowrap; }
@media (max-width: 1400px) {
  .cma-top .rv-tabs { order: 10; flex: 1 0 100%; }
}
@media (max-width: 640px) {
  .cma-top .cma-select { max-width: 30vw; }
  .cma-legend { display: none; }
}
.cma-sub { font-size: 13px; margin: 16px 18px 4px; }
#cma-sheet > .cma-note { margin-left: 18px; margin-right: 18px; }

/* The finished spread's head: the name on one line, its actions on the next, and no air
   between them or above the workbook - the sheet is what the page is for. */
.main-wide:has(> div > .wb-head) { padding-top: 8px; }
.wb-head { row-gap: 4px; margin-bottom: 4px; }
.wb-actions { gap: 6px; }
.wb-actions .btn-sm { padding: 5px 12px; }
.wb-head ~ .wb-layout { margin-top: 4px; }

/* The finished spread: its sheets as tabs across the top, and the table the full width.
   The workbook list is not drawn here; the review page has worked this way all along. */
.wb-toptabs { flex: 0 0 auto; margin: 0 0 4px; padding: 2px 0; border-bottom: 1px solid var(--color-line); }
.wb-layout.has-toptabs,
.wb-layout.has-toptabs.is-collapsed { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.wb-layout.has-toptabs .wb-nav,
.wb-layout.has-toptabs .sheet-pick { display: none; }
/* The stopped screen: the same tabs over the report and the sheet, and no rail column. */
.wb-layout.has-toptabs.has-source,
.wb-layout.has-toptabs.has-source.is-collapsed {
  grid-template-columns: minmax(380px, var(--src-share, 45fr)) 12px minmax(520px, var(--pane-share, 55fr));
}
.wb-layout.has-toptabs.has-source.src-hidden,
.wb-layout.has-toptabs.has-source.src-hidden.is-collapsed { grid-template-columns: minmax(0, 1fr); }
.fail-tabs { margin-top: 12px; border-radius: var(--radius-card) var(--radius-card) 0 0; }
.fail-tabs:has(> .rv-tabs:empty) { display: none; }
.wb-head { flex-wrap: nowrap; }
.wb-head h1 { white-space: nowrap; }
.wb-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-actions { flex: 0 0 auto; align-items: center; }
.wb-more { position: relative; }
.wb-more > summary { list-style: none; cursor: pointer; }
.wb-more > summary::-webkit-details-marker { display: none; }
.wb-more-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 200px;
  display: flex; flex-direction: column; padding: 6px; border-radius: 12px;
  background: var(--color-surface); border: 1px solid var(--color-line);
  box-shadow: 0 8px 24px rgba(38, 36, 33, .14);
}
.wb-more-menu > a, .wb-more-menu > button {
  font: inherit; font-size: 13.5px; text-align: left; padding: 8px 10px; border: 0;
  border-radius: 8px; background: none; color: var(--color-text); cursor: pointer;
}
.wb-more-menu > a:hover, .wb-more-menu > button:hover,
.wb-more-menu > a:focus-visible, .wb-more-menu > button:focus-visible { background: var(--color-chip); }
@media (max-width: 1180px) {
  .wb-layout.has-toptabs, .wb-layout.has-toptabs.is-collapsed,
  .wb-layout.has-toptabs.has-source, .wb-layout.has-toptabs.has-source.is-collapsed,
  .wb-layout.has-toptabs.has-source.src-hidden,
  .wb-layout.has-toptabs.has-source.src-hidden.is-collapsed { grid-template-columns: minmax(0, 1fr); }
  .wb-head { flex-wrap: wrap; }
  .wb-actions { flex: 1 1 auto; }
}
@media (max-width: 640px) {
  .wb-actions { margin-left: 0; flex-wrap: wrap; row-gap: 8px; width: 100%; }
  .wb-more-menu { right: auto; left: 0; }
}

/* A long sign-off note is a chip, not a sentence: its whole text is in the title. */
.wb-actions .wb-cma { max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Home as a work list ─────────────────────────────────────────────────────────
   design/verification-terminal/HANDOFF-home-worklist.md. The upload is a strip once
   there are runs; below it the runs, as six columns where .recent-row is four. Chips are
   the house .status pills; red is a break and nothing else - an expiring upload and a
   spent allowance are the review amber. */
.action-bar #go { margin-left: auto; }
.action-bar .action-hint { order: 2; }
.action-hint.is-spent { color: var(--color-review-ink); }
.console.is-strip .source-row { padding: 12px 20px 0; }
.console.is-strip .drop-row { padding: 12px 20px; gap: 14px; }
.console.is-strip .drop-mark { width: 38px; height: 38px; flex-basis: 38px; border-radius: 12px; }
.console.is-strip .drop-name { font-size: 15px; }
.console.is-strip .drop-sub { display: none; }
.console.is-strip .drop-tags { margin-top: 6px; }
.console.is-strip .action-bar { padding: 10px 20px; }
.console.is-strip .free-note { padding-top: 8px; padding-bottom: 10px; font-size: 12.5px; }

.wl-head { align-items: center; margin-top: 22px; }
.wl-title { font-size: 17px; margin: 0; color: var(--color-text); }
.wl-allow { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.wl-allow .quota { font-size: 13px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.wl-allow-sub { font-size: 11.5px; color: var(--color-faint); }
.wl-allow.is-spent .quota { color: var(--color-review-ink); font-weight: 500; }
.wl-said { margin-bottom: 14px; }

.wl-attn {
  margin: 10px 0 4px; padding: 10px 14px; border-radius: var(--radius-md);
  background: var(--color-review-100); border: 1px solid var(--color-review-edge);
}
.wl-attn-head { font-size: 13.5px; font-weight: 500; color: var(--color-review-ink); margin-bottom: 4px; }
.wl-attn-sub { display: block; font-weight: 400; font-size: 12px; }
.wl-attn-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 7px 0;
  border-top: 1px solid var(--color-review-edge);
}
.wl-attn-what { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 auto; min-width: 0; }
.wl-attn-name { font-weight: 500; }
.wl-attn-file { font-size: 12.5px; color: var(--color-muted); min-width: 0; }
.wl-attn-more {
  display: inline-block; margin-top: 4px; padding-top: 7px; font-size: 13px; font-weight: 500;
  color: var(--color-review-ink); border-bottom: 0; text-decoration: underline;
}

.wl-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 6px; }
.wl-tabs { display: flex; gap: 2px; flex-wrap: wrap; flex: 1 1 auto; }
.wl-tab {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; font-size: 13px;
  border: 1px solid transparent; border-radius: var(--radius-pill); color: var(--color-muted);
}
.wl-tab:hover { background: var(--color-chip); color: var(--color-text); border-bottom-color: transparent; }
.wl-tab.is-active { background: var(--color-accent-100); color: var(--color-text); font-weight: 500; }
.wl-n { font-size: 12px; color: var(--color-faint); font-variant-numeric: tabular-nums; }
.wl-tab.is-active .wl-n { color: var(--color-accent); }
.wl-find { display: flex; align-items: center; gap: 8px; }
.wl-find .input { padding: 7px 14px; font-size: 13px; border-radius: var(--radius-pill); }
.wl-q .input { width: 240px; }
.wl-sort .input { width: auto; }
.wl-matched { font-size: 13px; color: var(--color-muted); margin: 2px 0 6px; }

.wl-selbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; margin: 4px 0; border-radius: var(--radius-sm);
  background: var(--color-surface); border: 1px solid var(--color-line); box-shadow: var(--shadow-card);
  font-size: 13px;
}
/* The run table is a card, as every card here is (--radius-card); it drew square, on the
   page's own ground. */
.wl-table {
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-card); overflow: hidden;
}
.wl-row {
  display: grid; align-items: center; gap: 12px; padding: 9px 14px;
  grid-template-columns: 22px minmax(0, 2.2fr) 110px minmax(150px, 1.4fr) 120px 96px;
  border-bottom: 1px solid var(--color-hair);
}
.wl-table > .wl-row:last-child { border-bottom: 0; }
.wl-row.is-pending { background: var(--color-review-100); }
/* The header row is .table th's: 12px, weight 500, sentence case - not micro-caps
   (HANDOFF README, Screen 1 Columns). */
.wl-cap { padding-top: 9px; padding-bottom: 9px; border-bottom-color: var(--color-line); }
.wl-cap > span { font-size: 12px; font-weight: 500; color: var(--color-faint); }
.wl-notyet { color: var(--color-faint); }
.wl-who { display: flex; flex-direction: column; min-width: 0; }
.wl-who > a { font-size: 14px; font-weight: 500; color: var(--color-text); border-bottom: 0;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-who > a:hover { color: var(--color-accent); }
.wl-sub { font-size: 12px; color: var(--color-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-basis { font-size: 13px; color: var(--color-muted); }
.wl-state { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.wl-mark { font-size: 12px; color: var(--color-muted); max-width: 100%;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-mark:empty { display: none; }
.wl-mark.is-review { color: var(--color-review-ink); }
.wl-mark.is-yours { color: var(--color-yours); }
.wl-mark.is-break, .wl-checks.is-break { color: var(--color-warn); }
.wl-statements { font-variant-numeric: tabular-nums; }
.wl-checks { font-size: 13px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.wl-when { font-size: 13px; color: var(--color-faint); text-align: right; white-space: nowrap;
           font-variant-numeric: tabular-nums; }
.wl-del { display: block; font-size: 12px; color: var(--color-muted); border-bottom: 0; visibility: hidden; }
/* The checking screen's own words, which are longer than "Delete": they wrap under the
   time rather than run out of a 70-96px column. */
button.wl-del { margin-left: auto; padding: 0; background: none; border: 0; font: inherit;
                font-size: 12px; cursor: pointer; white-space: normal; text-align: right; }
.wl-row:hover .wl-del, .wl-del:focus-visible { visibility: visible; }
.wl-del:hover { color: var(--color-text); text-decoration: underline; }
.wl-row.is-gone .wl-who > a { color: var(--color-muted); font-weight: 400; }
.wl-empty { padding: 18px 16px; font-size: 14px; color: var(--color-muted); }
.wl-empty p { margin: 0 0 6px; }
.wl-pager { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 12px 0 0; font-size: 13px; }
.wl-range { font-size: 12.5px; color: var(--color-faint); margin: 10px 8px 0 0; font-variant-numeric: tabular-nums; }
.wl-pager .wl-range { margin-top: 0; }
.wl-pg { padding: 4px 10px; border-radius: var(--radius-pill); border-bottom: 0; font-variant-numeric: tabular-nums; }
.wl-pg:hover { background: var(--color-chip); }
.wl-pg.is-active { background: var(--color-accent-100); color: var(--color-text); font-weight: 500; }
.wl-gap { color: var(--color-faint); padding: 0 4px; }
/* The list's address beside its count, in the mono the prototype gives it. */
.wl-addr { display: inline-flex; align-items: baseline; gap: 6px; margin-right: 10px; min-width: 0; }
.wl-addr a { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--color-muted);
             border-bottom: 0; overflow-wrap: anywhere; }
.wl-addr a:hover { color: var(--color-text); text-decoration: underline; }
.wl-copy { font-size: 12px; padding: 2px 8px; }

.wl-confirm { max-width: 720px; }
.wl-confirm h1 { font-size: 26px; margin-bottom: 6px; }
.wl-confirm-lead { font-size: 14px; color: var(--color-text); }
.wl-group { border-top: 1px solid var(--color-line); padding: 12px 0 4px; }
.wl-group h2 { font-size: 15px; margin: 0 0 4px; }
.wl-group p { font-size: 13px; color: var(--color-muted); margin: 0 0 6px; }
.wl-group ul { margin: 0 0 8px; padding-left: 18px; font-size: 14px; }
.wl-group li { margin: 4px 0; }
.wl-group li .wl-sub, .wl-group li .wl-mark { display: block; white-space: normal; }
.wl-keeps { font-size: 13px; color: var(--color-muted); border-top: 1px solid var(--color-line); padding-top: 12px; }
.wl-confirm-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

@media (max-width: 980px) {
  .wl-row { grid-template-columns: 22px minmax(0, 1fr) minmax(120px, auto) 70px; }
  .wl-basis, .wl-checks { display: none; }
  .wl-q .input { width: 170px; }
}
@media (max-width: 640px) {
  .wl-row { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .wl-row .wl-when { display: none; }
  .wl-find { flex-wrap: wrap; width: 100%; }
  .wl-q { flex: 1 1 100%; }
  .wl-q .input { width: 100%; }
  .wl-allow { align-items: flex-start; margin-left: 0; }
  .wl-head { flex-wrap: wrap; }
}

/* A deleted run's line, where somebody asked to see what is still counted, and the way
   to end a borrower's file. */
.wl-gone-name { font-size: 14px; color: var(--color-muted); }
.cus-forget { margin: 0 0 16px; font-size: 13px; }
.cus-forget a { color: var(--color-muted); border-bottom-color: var(--color-line); }
.cus-forget a:hover { color: var(--color-text); }
/* The credit file's foot: back to the list, and - last, out of the way of the figures -
   the way to end the file (B-9). */
.cus-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 8px 20px; margin: 26px 0 0; }
.cus-foot .cus-forget { margin: 0; }
/* A kept figure is one a run read off the report: the run's ink, as on the Credit view,
   with the page it was printed on beneath it. The page is a link while the run is kept
   and plain text after; never red, never violet - nothing here broke or was keyed. */
.cus-fig { color: var(--color-keyed); }
.cus-page { font-size: 11.5px; color: var(--color-muted); white-space: nowrap; }
a.cus-page { color: var(--color-keyed); border-bottom-color: var(--color-line); }
/* Keyed by an analyst, not read by the run: violet, as a keyed cell is on the sheet. */
.cus-keyed { font-size: 11.5px; color: var(--color-yours); white-space: nowrap; }
/* An empty section says what would be here and where it comes from, in the same place
   the section would be. */
.cus-empty { font-size: 13px; margin: 0 0 10px; max-width: 86ch; }
.cus-notheld { max-width: 86ch; font-size: 13.5px; }
.cus-notheld ul { margin: 0; padding-left: 18px; }
.cus-notheld li { margin: 0 0 4px; }
/* The per-row Delete is revealed on hover, which a touch screen does not have and a
   narrow one has no room for: there it is simply shown. */
@media (hover: none), (max-width: 980px) {
  .wl-del { visibility: visible; }
}
@media (max-width: 640px) {
  .wl-row .wl-when { display: block; grid-column: 3; text-align: right; }
  .wl-row .wl-when { font-size: 11.5px; }
}

/* ---------------------------------------------------------------- the profile (/account)
   One column, each part a panel. A key row shows its provider and its last four
   characters and never more (docs/user-keys.md); the paste field is a password field so
   a key typed in a shared room is not read off the screen. */
.account { max-width: 640px; }
.account .lede { font-size: 15px; margin: 4px 0 18px; }
.account .aside-note { margin: 0 0 16px; }
.account-part { margin-bottom: 16px; }
.account-part p { margin: 0 0 10px; }
.account-part .field { margin-bottom: 14px; }
.account-h { font-size: 15px; margin: 0 0 10px; }
.account-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.account-row .input { flex: 1 1 260px; min-width: 0; }
.account-keys { list-style: none; margin: 14px 0 0; padding: 0; }
.account-key { border-top: 1px solid var(--color-line); padding: 12px 0; }
.account-key-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.account-key-head form { margin-left: auto; }
.account .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.limit-inline { font-size: 13px; color: var(--color-muted); }

/* ---------------------------------------------------------------- who pays, at Start
   (docs/user-keys.md). The consent box's language: one bordered option per choice, the
   chosen one on the held ground. A choice that cannot read the report stays visible,
   greyed, with its reason. */
.review-reader { border: 0; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.review-reader legend { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-faint); margin-bottom: 8px; padding: 0; }
.review-reader-opt { display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--color-edge); border-radius: var(--radius-md);
  background: var(--color-surface); padding: 11px 15px; }
.review-reader-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.review-reader-opt:hover { border-color: var(--color-text); }
.review-reader-opt:has(input:checked) { border-color: var(--color-held-edge); background: var(--color-held-100); }
.review-reader-opt.is-off { cursor: not-allowed; opacity: .6; }
.review-reader-opt.is-off:hover { border-color: var(--color-edge); }
.review-reader-box { width: 16px; height: 16px; flex: none; margin-top: 2px; border-radius: 50%;
  border: 1.5px solid var(--color-edge); box-sizing: border-box; background: var(--color-surface); }
.review-reader-opt:has(input:checked) .review-reader-box { border: 5px solid var(--color-accent); }
.review-reader-opt:has(input:focus-visible) .review-reader-box { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.review-reader-text { display: grid; gap: 2px; min-width: 0; font-size: 12.5px; line-height: 1.5; color: var(--color-muted); }
.review-reader-head { font-size: 14px; font-weight: 500; color: var(--color-text); }
.review-reader .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.review-keyhint { font-size: 12.5px; line-height: 1.5; color: var(--color-muted); margin: 0 0 12px; }
/* A kept key's model and monthly limit, on one row above its replace field. */
.account-settings { align-items: flex-end; margin-bottom: 4px; }
.account-field { display: grid; gap: 4px; font-size: 12px; color: var(--color-muted); flex: 1 1 240px; min-width: 0; }
.account-field .input { width: 100%; }
.account-limit { flex: 0 1 150px; }
.account-spent { margin: 4px 0 10px; }
.account-check { margin: 0 0 4px; display: flex; max-width: 100%; }
/* The pill the Start screen's gates use never wraps; a long line on the profile does. */
.account-check .accept-label { white-space: normal; border-radius: var(--radius-md); line-height: 1.45; }
.account-note { margin: 4px 0 12px; }

/* Start all, under the uploads waiting on Home (app.start_all). */
.wl-bulk { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
  border-top: 1px solid var(--color-line); padding-top: 12px; margin-top: 8px; }
.wl-bulk-who { display: grid; gap: 4px; font-size: 12px; color: var(--color-muted); flex: 1 1 320px; min-width: 0; }
.wl-bulk-who .input { width: 100%; font-size: 13px; padding: 6px 10px; }
.wl-bulk-consent { flex: 1 1 100%; }
.wl-bulk-consent .accept-label { white-space: normal; border-radius: var(--radius-md); line-height: 1.45; font-size: 13px; }
.account-secret { display: inline-block; word-break: break-all; margin-top: 6px; font-size: 13px; }
.account-sub { margin-top: 18px; }

/* ---------------------------------------------------------------- teams (teams.py)
   A teammate's run: read, never changed. Every form that would change it is hidden
   rather than left to fail; the approval is the one control a reviewer is shown. The
   sheet itself is drawn not editable (job.html), so no tick or keyed figure is offered. */
.team-view { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  border: 1px solid var(--color-edge); border-radius: var(--radius-md); background: var(--color-surface);
  padding: 10px 14px; margin: 0 0 12px; font-size: 13px; }
.team-approved { color: var(--color-tie); font-weight: 500; }
.team-approve { display: flex; gap: 8px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.team-approve .input { font-size: 13px; padding: 5px 10px; min-width: 18ch; }
.is-team-view form[method="post"]:not(.team-approve) { display: none !important; }
.team-table { display: grid; gap: 0; font-size: 13px; }
.team-row { display: grid; grid-template-columns: minmax(0, 2fr) 128px 56px 88px 88px 96px;
  gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--color-line); }
.team-head { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-faint); border-top: 0; }
.team-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.team-row > span { min-width: 0; overflow-wrap: anywhere; }
.team-audit .team-row { grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 2fr); }
.team-inline { margin: 0; }
.team-inline .input { font-size: 13px; padding: 4px 8px; width: 100%; }
.team-policy { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 10px; }
@media (max-width: 700px) {
  .team-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .team-head { display: none; }
}

/* ---------------------------------------------------------------- the portfolio (app.portfolio)
   The lending book at a glance. A breached covenant is amber - somebody will be asked
   about it - and never red: red is a spread that did not tie, and only that (CLAUDE.md,
   colours; the suite fails on a third use). */
.portfolio { max-width: 1100px; }
.pf-table { display: grid; font-size: 13px; }
.pf-row { display: grid; grid-template-columns: minmax(0, 2fr) 100px 130px minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 1.2fr);
  gap: 10px; padding: 10px 0; border-top: 1px solid var(--color-line); align-items: start; }
.pf-row > span { min-width: 0; overflow-wrap: anywhere; }
.pf-head { border-top: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-faint); }
.pf-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.pf-breach { color: var(--color-review-ink); font-weight: 600; }
@media (max-width: 860px) {
  .pf-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pf-head { display: none; }
}

/* ---------------------------------------------------------------- ask about the figures
   The chat panel under the inspector (R7; templates/_workbook.html chat_panel, static/
   chat.js). Amber is someone will be asked, violet is keyed by an analyst: a proposal is
   drawn in the review colour and its figure in the analyst's, because accepting it makes
   it theirs. Never red: nothing here is a break. */
.insp-ask { font: inherit; font-size: 12.5px; padding: 2px 9px; border-radius: var(--radius-pill); border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-accent); cursor: pointer; }
.insp-ask:hover { border-color: currentColor; }
/* Report a problem (problems.py): quieter than Ask - it records, it changes nothing. */
.insp-report { font: inherit; font-size: 12.5px; padding: 2px 9px; border-radius: var(--radius-pill); border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-muted); cursor: pointer; }
.insp-report:hover { border-color: currentColor; color: var(--color-text); }
.insp-report-form { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.insp-report-form select, .insp-report-form input { font: inherit; font-size: 12.5px; padding: 2px 6px; border: 1px solid var(--color-line); border-radius: 6px; background: var(--color-surface); color: var(--color-text); }
.insp-report-form input { min-width: 180px; }
.insp-report-send { font: inherit; font-size: 12.5px; padding: 2px 10px; border-radius: var(--radius-pill); border: 1px solid var(--color-accent); background: var(--color-surface); color: var(--color-accent); cursor: pointer; }
.insp-report-said { font-size: 12.5px; color: var(--color-muted); }
/* "Reported - this changes nothing": never the break's red that .insp-note carries. */
.insp-note.insp-reported { color: var(--color-muted); }
/* The questions are a column beside the sheet, never a band under it (2026-09-27): open,
   they take the report's column, or a column of their own where there is no report. The
   sheet keeps its whole height. */
.chat-panel { border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-surface); display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
.chat-panel .chat-log { flex: 1 1 auto; min-height: 0; }
/* The conversations of a report, listed at the top of the log (static/chat.js). */
.chat-hist { border: 1px solid var(--color-line); border-radius: 10px; padding: 8px; margin: 0 0 10px; background: var(--color-sunken); }
.chat-hist-h { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); padding: 2px 4px 6px; }
.chat-hist-row { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; border: 0; background: none;
  padding: 6px 8px; border-radius: 8px; cursor: pointer; font: inherit; color: var(--color-text); }
.chat-hist-row:hover, .chat-hist-row.is-on { background: var(--color-chip); }
.chat-hist-m { font-size: 12px; color: var(--color-muted); }
.chat-head #chat-to-report { padding-left: 6px; }
.src-ask { font: inherit; font-size: 12.5px; font-weight: 600; padding: 3px 11px; border-radius: var(--radius-pill); border: 1px solid var(--color-accent); background: var(--color-accent-100); color: var(--color-accent); cursor: pointer; }
.src-ask[hidden] { display: none; }
/* The screens with the rail (the stopped screen's spread): rail | report | handle | sheet. */
@media (min-width: 1181px) {
  /* The report's column, taken: the report is put away while the questions are open. */
  .wb-layout.has-source.chat-open:not(.src-hidden):not(.is-review) .wb-source { display: none; }
  .wb-layout.has-source.chat-open:not(.src-hidden):not(.is-review) > .chat-panel { grid-column: 2; grid-row: 1; }
  /* No report beside the sheet, or one put away: a column of its own on the right. */
  .wb-layout.chat-open:not(.has-source):not(.is-review),
  .wb-layout.has-source.src-hidden.chat-open:not(.is-review) {
    grid-template-columns: 224px minmax(0, 1fr) minmax(340px, 38%);
  }
  .wb-layout.chat-open.is-collapsed:not(.has-source):not(.is-review),
  .wb-layout.has-source.src-hidden.chat-open.is-collapsed:not(.is-review) {
    grid-template-columns: 54px minmax(0, 1fr) minmax(340px, 38%);
  }
  .wb-layout.chat-open:not(.has-source):not(.is-review) > .chat-panel,
  .wb-layout.has-source.src-hidden.chat-open:not(.is-review) > .chat-panel { grid-column: 3; grid-row: 1; }
  /* The stopped screen has the tabs on top and no rail: report | handle | sheet. Column 2
     is the 12px handle there, and the questions were drawn into it - 12px wide beside an
     empty report column (e& 2024, 2026-09-29). Its report's column is the first; with no
     report beside the sheet, the questions take a column of their own after it. */
  .wb-layout.has-toptabs.has-source.chat-open:not(.src-hidden):not(.is-review) > .chat-panel { grid-column: 1; grid-row: 1; }
  .wb-layout.has-toptabs.chat-open:not(.has-source):not(.is-review),
  .wb-layout.has-toptabs.chat-open.is-collapsed:not(.has-source):not(.is-review),
  .wb-layout.has-toptabs.has-source.src-hidden.chat-open:not(.is-review),
  .wb-layout.has-toptabs.has-source.src-hidden.chat-open.is-collapsed:not(.is-review) {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 38%);
  }
  .wb-layout.has-toptabs.chat-open:not(.has-source):not(.is-review) > .chat-panel,
  .wb-layout.has-toptabs.has-source.src-hidden.chat-open:not(.is-review) > .chat-panel { grid-column: 2; grid-row: 1; }
}
@media (max-width: 1180px) {
  /* Narrow, the sheet and the report are already two tabs: the questions are a third,
     shown in the sheet's place while they are open. */
  .wb-layout.chat-open:not(.is-review), .wb-layout.chat-open.is-collapsed:not(.is-review) { grid-template-columns: 54px minmax(0, 1fr); }
  .wb-layout.chat-open:not(.is-review) .wb-pane, .wb-layout.chat-open:not(.is-review) .wb-source,
  .wb-layout.chat-open:not(.is-review) .wb-split { display: none !important; }
  .wb-layout.chat-open:not(.is-review) > .chat-panel { grid-column: 2; grid-row: 1; }
  .wb-layout:not(.is-review) .src-ask { display: none !important; }
}
/* The finished screen (no rail): report | handle | sheet, side by side down to 980px. The
   questions take the report's column, on the left; with no report, a column there. */
@media (min-width: 981px) {
  .wb-layout.is-review.has-source.chat-open:not(.src-hidden) .wb-source { display: none; }
  .wb-layout.is-review.has-source.chat-open:not(.src-hidden) > .chat-panel { grid-column: 1; grid-row: 1; }
  .wb-layout.is-review.chat-open:not(.has-source),
  .wb-layout.is-review.has-source.src-hidden.chat-open {
    column-gap: 8px; grid-template-columns: minmax(340px, 40fr) minmax(0, 60fr);
  }
  .wb-layout.is-review.chat-open:not(.has-source) > .chat-panel,
  .wb-layout.is-review.has-source.src-hidden.chat-open > .chat-panel { grid-column: 1; grid-row: 1; }
  .wb-layout.is-review.chat-open:not(.has-source) > .wb-pane,
  .wb-layout.is-review.has-source.src-hidden.chat-open > .wb-pane { grid-column: 2; grid-row: 1; }
}
@media (max-width: 980px) {
  /* Tabs here: the questions show in place of the sheet and the report while open. */
  .wb-layout.is-review.chat-open, .wb-layout.is-review.has-source.chat-open { grid-template-columns: minmax(0, 1fr); }
  .wb-layout.is-review.chat-open .wb-pane, .wb-layout.is-review.chat-open .wb-source,
  .wb-layout.is-review.chat-open .wb-split { display: none !important; }
  .wb-layout.is-review.chat-open > .chat-panel { grid-column: 1; grid-row: 1; }
  .wb-layout.is-review .src-ask { display: none !important; }
}
.chat-panel[hidden] { display: none; }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--color-hair); font-size: 13px; }
.chat-head #chat-close { margin-left: auto; }
.chat-focus { display: inline-flex; align-items: center; gap: 6px; padding: 1px 4px 1px 9px; border-radius: var(--radius-pill); background: var(--color-chip); color: var(--color-body); font-size: 12px; font-variant-numeric: tabular-nums; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-focus[hidden] { display: none; }
.chat-unfocus { font: inherit; border: 0; background: none; color: var(--color-muted); cursor: pointer; padding: 0 4px; }
.chat-log { overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 12px; min-height: 60px; font-size: 13px; color: var(--color-body); }
.chat-empty, .chat-wait { margin: 0; color: var(--color-muted); }
.chat-error { margin: 0; color: var(--color-review-ink); }
.chat-q { color: var(--color-text); }
.chat-who { font-weight: 700; }
.chat-about { color: var(--color-muted); }
.chat-answer { margin-top: 4px; line-height: 1.5; white-space: pre-wrap; }
.chat-page { font: inherit; font-size: 12px; padding: 0 7px; margin: 0 1px; border-radius: var(--radius-pill); border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-accent); cursor: pointer; font-variant-numeric: tabular-nums; }
.chat-page:hover { border-color: currentColor; }
.chat-prop { margin-top: 6px; padding: 6px 10px; border: 1px solid var(--color-review-edge); border-left: 3px solid var(--color-review); border-radius: var(--radius-chip); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.chat-prop-k { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-review-ink); flex-basis: 100%; }
.chat-prop-what { color: var(--color-text); }
.chat-prop-fig { font-variant-numeric: tabular-nums; }
.chat-prop-why, .chat-prop-out, .chat-prop-note { flex-basis: 100%; color: var(--color-muted); font-size: 12px; }
.chat-prop-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex-basis: 100%; }
.chat-caution { color: var(--color-review); }
.chat-dropped, .chat-meta { display: block; margin-top: 4px; color: var(--color-faint); font-size: 11.5px; }
.chat-consent { margin: 0; padding: 6px 12px; border-top: 1px solid var(--color-hair); font-size: 12.5px; color: var(--color-review-ink); }
.chat-consent[hidden] { display: none; }
.chat-form { display: flex; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--color-hair); align-items: flex-end; }
.chat-form textarea { flex: 1; resize: vertical; min-height: 38px; font-size: 13px; }
.chat-cost { margin: 0; padding: 0 12px 8px; color: var(--color-faint); font-size: 11.5px; }
.chat-cost:empty { display: none; }
.chat-tablewrap { margin-top: 8px; border: 1px solid var(--color-line); border-radius: var(--radius-chip); background: var(--color-surface); }
.chat-table-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 5px 10px; border-bottom: 1px solid var(--color-hair); }
.chat-table-title { font-size: 12.5px; color: var(--color-text); margin-right: auto; }
.chat-table-scroll { overflow-x: auto; }
.chat-table { border-collapse: collapse; width: 100%; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.chat-table th { text-align: left; font-weight: 600; color: var(--color-muted); padding: 5px 10px; border-bottom: 1px solid var(--color-rule); white-space: nowrap; }
.chat-table td { padding: 5px 10px; border-bottom: 1px solid var(--color-hair); color: var(--color-body); vertical-align: top; }
.chat-table tr:last-child td { border-bottom: 0; }
.chat-table .is-num { text-align: right; white-space: nowrap; }
.chat-table td.is-unfound { background: var(--color-chip); box-shadow: inset 0 -2px 0 var(--color-review); color: var(--color-review-ink); }
.chat-table-note { display: block; padding: 4px 10px 6px; color: var(--color-review-ink); font-size: 11.5px; }
.chat-follow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.chat-follow-k { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-faint); }
.chat-follow-q { font: inherit; font-size: 12.5px; padding: 3px 10px; border-radius: var(--radius-pill); border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-accent); cursor: pointer; text-align: left; }
.chat-follow-q:hover { border-color: currentColor; }
.chat-table td.is-traceable { cursor: pointer; }
.chat-table td.is-traceable:hover, .chat-table td.is-traceable:focus-visible { color: var(--color-accent); text-decoration: underline dotted; outline: none; }
.chat-agenda { border: 1px solid var(--color-line); border-radius: var(--radius-chip); background: var(--color-sunken); }
.chat-agenda-k { cursor: pointer; padding: 6px 10px; font-size: 12px; font-weight: 600; color: var(--color-text); }
.chat-agenda-list { display: flex; flex-direction: column; }
.chat-agenda-row { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-top: 1px solid var(--color-hair); font-size: 12.5px; }
.chat-agenda-t { flex: 1; color: var(--color-body); }
.chat-agenda-row.is-break .chat-agenda-t { color: var(--color-warn); }
.chat-agenda-row.is-shared .chat-agenda-t, .chat-agenda-row.is-unchecked .chat-agenda-t, .chat-agenda-row.is-hold .chat-agenda-t { color: var(--color-review-ink); }
.chat-agenda-row.is-batch .chat-agenda-t { font-weight: 600; }
.chat-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chat-printed { padding: 0 10px 6px; display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--color-muted); }
.chat-printed-k { padding-bottom: 0; color: var(--color-faint); text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; }

/* ============================================================ The Company chart
   templates/company_chart.html: the charts filed against a company, year beside year.
   No new colour meaning. Amber is a gap between two reports and a line nobody reviewed -
   both ask a person; red is a year that does not balance and a spread that no longer
   ties, which are breaks; violet is an analyst's act (a ruling, a keyed figure); green is
   two reports agreeing. A figure is plain ink: nothing here is a provenance colour. */
.band.cc { max-width: 1320px; }
.cc-crumbs { font-size: 12px; color: var(--color-muted); margin: 0 0 4px; }
.cc-crumbs a { color: var(--color-muted); }
.cc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.cc-head h1 { font-size: 26px; letter-spacing: -.02em; margin: 0; }
.cc-grow { flex: 1; }
.cc-pill { display: inline-block; font-size: 11px; line-height: 1.5; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--color-chip); color: var(--color-body); margin: 2px 2px 0 0; font-weight: 400; }
.cc-pill.amber { background: var(--color-review-100); color: var(--color-review-ink); border: 1px solid var(--color-review-edge); }
.cc-pill.red { background: var(--color-warn-100); color: var(--color-warn); }
.cc-pill.green { background: var(--color-tie-100); color: var(--color-tie); }
.cc-pill.violet { background: var(--color-yours-100); color: var(--color-yours); }
.cc-seg { display: inline-flex; border: 1px solid var(--color-edge); border-radius: var(--radius-sm); overflow: hidden; }
.cc-seg a { padding: 6px 12px; color: var(--color-body); text-decoration: none; font-size: 13px; }
.cc-seg a.on { background: var(--color-accent-100); color: var(--color-accent); font-weight: 600; }
.cc-tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.cc-check { color: var(--color-body); text-decoration: none; }
.cc-check::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border: 1px solid var(--color-edge); border-radius: 3px; background: var(--color-surface); }
.cc-check.on::before { background: var(--color-accent); border-color: var(--color-accent); box-shadow: inset 0 0 0 2px var(--color-surface); }
.cc-link { color: var(--color-accent); font-size: 12px; font-weight: 400; }
.cc-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--color-line); margin: 10px 0 0; }
.cc-tabs a { padding: 8px 12px; color: var(--color-muted); text-decoration: none; border-bottom: 2px solid transparent; font-size: 14px; }
.cc-tabs a.on { color: var(--color-text); border-color: var(--color-accent); font-weight: 600; }
.cc-empty { padding: 34px 12px; text-align: center; color: var(--color-body); max-width: 70ch; margin: 0 auto; }
.cc-empty b { display: block; font-size: 16px; color: var(--color-text); margin-bottom: 6px; }
/* Wider than its box on a laptop once three years are opened: the caption freezes, the
   table scrolls, and the right edge says there is more - a phone's scrollbar is an
   overlay nobody sees until they have already swiped. */
.cc-scroll { overflow-x: auto; margin-top: 10px; background:
  linear-gradient(to left, var(--color-bg), transparent 24px) right / 24px 100% no-repeat local,
  linear-gradient(to left, rgba(38,36,33,.10), transparent 12px) right / 12px 100% no-repeat scroll; }
.cc-table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 13px; }
.cc-table th, .cc-table td { padding: 6px 10px; border-bottom: 1px solid var(--color-hair); text-align: right; font-variant-numeric: tabular-nums; vertical-align: top; font-weight: 400; white-space: nowrap; }
.cc-table th { white-space: normal; min-width: 150px; font-size: 12px; color: var(--color-muted); vertical-align: bottom; }
.cc-yr { display: block; font-size: 14px; font-weight: 700; color: var(--color-text); }
.cc-table th:first-child, .cc-table td:first-child { text-align: left; position: sticky; left: 0; background: var(--color-bg); white-space: normal; min-width: 250px; }
.cc-table tr.cc-class td, .cc-table tr.cc-top td { font-weight: 700; background: var(--color-sunken); border-top: 1px solid var(--color-rule); }
.cc-table tr.cc-diff td { background: var(--color-sunken); }
.cc-table tr.cc-endtop td { border-bottom: 2px solid var(--color-rule); }
.cc-table tr.cc-blank td, .cc-plain tr.cc-blank td { color: var(--color-faint); }
.cc-code { color: var(--color-faint); display: inline-block; width: 34px; font-weight: 400; }
.cc-hid { font-size: 11px; font-weight: 400; color: var(--color-faint); margin-left: 6px; }
.cc-fold { color: var(--color-muted); text-decoration: none; padding-right: 6px; font-size: 12px; }
.cc-fig { color: inherit; text-decoration: none; border-bottom: 0; display: inline-block; min-width: 3ch; }
.cc-fold, .cc-seg a, .cc-tabs a, .cc-check { border-bottom: 0; }
.cc-tabs a { border-bottom: 2px solid transparent; }
.cc-fig:hover, .cc-fig:focus-visible { color: var(--color-accent); text-decoration: underline dotted; outline: none; }
.cc-table td.cc-sel { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.cc-grp { border-left: 1px solid var(--color-rule); }
.cc-pct { display: block; font-size: 11px; color: var(--color-faint); font-weight: 400; }
.cc-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--color-review); margin-left: 5px; vertical-align: middle; }
.cc-tier { color: var(--color-review-deep); margin-right: 4px; font-size: 11px; }
.cc-table .cc-gap, .cc-fig.cc-gap { color: var(--color-review-deep); font-weight: 600; }
.cc-fig.cc-bad { color: var(--color-warn); font-weight: 700; }
.cc-table .cc-na, .cc-fig.cc-na { color: var(--color-faint); font-size: 11px; font-weight: 400; white-space: normal; }
.cc-foot { color: var(--color-muted); font-size: 12px; margin: 10px 0 0; max-width: 110ch; }
.cc-insp { margin-top: 16px; border-top: 1px solid var(--color-line); padding-top: 12px; }
.cc-insp h2 { font-size: 15px; margin: 0 0 6px; }
.cc-src { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 5px 0; border-bottom: 1px solid var(--color-hair); font-size: 13px; }
.cc-src b { font-variant-numeric: tabular-nums; min-width: 90px; text-align: right; }
.cc-band { border-radius: var(--radius-sm); padding: 9px 12px; margin: 10px 0; font-size: 13px; }
.cc-band.amber { background: var(--color-review-100); border: 1px solid var(--color-review-edge); color: var(--color-review-ink); }
.cc-band.red { background: var(--color-warn-100); color: var(--color-warn); }
.cc-band.green { background: var(--color-tie-100); color: var(--color-tie); }
.cc-band.plain { background: var(--color-chip); color: var(--color-body); }
/* An analyst's own act on a figure - a placement kept on purpose - in the analyst's violet. */
.cc-band.violet { background: var(--color-yours-100); color: var(--color-yours); }
.cc-plain { border-collapse: collapse; width: 100%; margin-top: 8px; font-size: 13px; }
.cc-plain th, .cc-plain td { padding: 6px 8px; border-bottom: 1px solid var(--color-hair); text-align: left; vertical-align: top; }
.cc-plain th { color: var(--color-muted); font-weight: 400; font-size: 12px; }
.cc-plain .n { text-align: right; font-variant-numeric: tabular-nums; }
.cc-act summary { cursor: pointer; color: var(--color-accent); font-size: 12px; }
.cc-act form { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; max-width: 380px; font-size: 12px; }
.cc-act input { font: inherit; padding: 6px 8px; border: 1px solid var(--color-edge); border-radius: var(--radius-chip); width: 100%; }


/* ws:begin */
/* The company workspace's row (docs/company-workspace-design.md): six steps in the order
   the work flows, in four groups with a divider between them. Kept between these two
   markers because the Universal Chart, which draws its own page without this stylesheet,
   takes exactly these rules (app._ws_css). Every colour has a fallback for that page. */
.ws-steps { display: flex; align-items: stretch; gap: 0; flex: 0 0 auto; overflow-x: auto;
  padding: 4px 12px 5px; background: var(--color-surface, #fff);
  border-bottom: 1px solid var(--color-line, #EAE4DC); font-size: 13px; line-height: 1.25; }
.ws-group { display: flex; flex-direction: column; gap: 3px; padding: 0 14px; min-width: max-content; }
.ws-group:first-child { padding-left: 0; }
.ws-group + .ws-group { border-left: 2px solid var(--color-text, #2B2622); }
.ws-glabel { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-muted, #6E6862); white-space: nowrap; }
.ws-glabel a { color: inherit; }
.ws-gsteps { display: flex; align-items: center; gap: 4px; }
.ws-step { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 4px;
  border: 1px solid transparent; border-radius: 16px; color: var(--color-text, #2B2622);
  text-decoration: none; white-space: nowrap; }
a.ws-step:hover { background: var(--color-bg, #FBF9F6); border-color: var(--color-line, #EAE4DC); }
.ws-step.is-at { background: var(--color-bg, #FBF9F6); border-color: var(--color-text, #2B2622); font-weight: 600; }
.ws-n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  font-size: 11px; font-weight: 600; border: 1.5px solid var(--color-muted, #6E6862);
  color: var(--color-muted, #6E6862); background: var(--color-surface, #fff); }
.ws-step.is-done .ws-n { background: var(--color-tie, #2E7D5B); border-color: var(--color-tie, #2E7D5B); color: #fff; }
.ws-step.is-wait .ws-n { background: var(--color-review, #E0A43A); border-color: var(--color-review, #E0A43A); color: #3d2c05; }
.ws-step.is-locked { color: var(--color-muted, #6E6862); opacity: .7; }
.ws-step.is-locked .ws-n { border-style: dashed; }
.ws-tick { color: var(--color-tie); font-weight: 700; margin-left: -2px; }
.ws-count { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 9px; line-height: 16px;
  background: var(--color-review); color: #3d2c05; }
.ws-state { text-transform: none; letter-spacing: 0; margin-left: 4px; }
.ws-group:has(.ws-step.is-at) > .ws-glabel { color: var(--color-accent); }
.ws-steps { position: relative; }
.ws-progline { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-line); }
.ws-progline i { display: block; height: 100%; background: var(--color-tie); transition: width .2s; }
.ws-report-h { display: block; padding: 4px 10px 2px; font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--color-muted); }
.ws-report > summary { cursor: pointer; list-style: none; }
.ws-report > summary::-webkit-details-marker { display: none; }
.ws-report { position: relative; }
.ws-report-menu { position: absolute; z-index: 40; top: 100%; left: 0; min-width: 320px;
  background: var(--color-surface, #fff); border: 1px solid var(--color-line, #EAE4DC);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 4px; text-transform: none;
  letter-spacing: 0; font-size: 13px; }
.ws-report-menu a { display: block; padding: 6px 9px; border-radius: 6px; color: var(--color-text, #2B2622); text-decoration: none; }
.ws-report-menu a span { color: var(--color-muted, #6E6862); }
.ws-report-menu a:hover, .ws-report-menu a[aria-current] { background: var(--color-bg, #FBF9F6); }
.ws-inprog { display: inline-flex; align-items: center; gap: 7px; padding: 2px 11px; border-radius: 14px;
  font-size: 12.5px; white-space: nowrap; text-decoration: none;
  border: 1px solid #ecd49a; background: #fdf6e3; color: #7a5207; }
.ws-inprog i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-review, #E0A43A); display: inline-block; }
.ws-inprog.is-run i { animation: ws-blink 1.1s infinite; }
.ws-inprog.is-none { border-color: #bfe0cb; background: #eef8f1; color: var(--color-tie, #2E7D5B); }
.ws-inprog.is-none i { background: var(--color-tie, #2E7D5B); }
@keyframes ws-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .ws-inprog.is-run i { animation: none; } }
.ws-alone { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; position: sticky; top: 0; z-index: 60; }
.ws-name { color: var(--color-text, #2B2622); text-decoration: none; margin-right: 8px; white-space: nowrap; }
.ws-name span { color: var(--color-muted, #6E6862); font-weight: 400; }
.ws-sel { background: rgba(14, 110, 94, .13) !important; box-shadow: inset 0 0 0 1px rgba(14, 110, 94, .35); }
#ws-selbar { position: fixed; right: 14px; bottom: 10px; z-index: 80; padding: 4px 12px; border-radius: 14px;
  background: var(--color-text, #2B2622); color: #fff; font: 12.5px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums; box-shadow: 0 4px 14px rgba(0,0,0,.2); white-space: pre; }
#ws-selbar[hidden] { display: none; }
#ws-selbar.in-verdict { position: static; margin-left: auto; order: 9; box-shadow: none; align-self: center; }
.ws-twin { flex: 0 0 auto; padding: 5px 12px; font-size: 13px; background: #fdf6e3; color: #7a5207;
  border-bottom: 1px solid #ecd49a; }
.ws-twin a { color: inherit; font-weight: 600; }
/* Shown inside the run page's tab: the page's own copy of the row is put away. */
.in-frame .ws-steps.ws-alone, .in-frame .ws-twin { display: none !important; }
.in-frame .ws-back { display: none !important; }
/* The decision screen's company line (the mockup's "Ready to start"). Teal edge where
   there is nothing to choose, amber where Start waits for an answer. */
.ws-match { border: 1px solid var(--color-line); border-left: 4px solid var(--color-accent);
  border-radius: 10px; padding: 10px 14px; margin: 14px 0 0; background: var(--color-surface); }
.ws-match.is-ask { border-left-color: var(--color-review); }
.ws-match.is-off > * { opacity: .45; }
.ws-match > b { font-size: 14.5px; }
.ws-match .ws-why { margin-top: 3px; line-height: 1.5; }
.ws-match-picks { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ws-pick { display: inline-flex; align-items: center; cursor: pointer; }
.ws-pick input { position: absolute; opacity: 0; pointer-events: none; }
.ws-pick span, a.ws-pick.is-link { border: 1px solid var(--color-line); border-radius: 8px;
  padding: 5px 12px; font-size: 13px; font-weight: 600; background: var(--color-surface);
  color: var(--color-text); text-decoration: none; }
.ws-pick input:checked + span { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.ws-pick input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ws-match-or { display: block; margin-top: 8px; }
.ws-match-or select { max-width: 300px; display: inline-block; }
.ws-match-dup { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-line); }
.ws-ready { margin-top: 4px; }
.ws-startsum { font-size: 13.5px; margin-right: auto; }
.ws-nokeep { font-size: 12.5px; color: var(--color-muted); display: inline-flex; gap: 6px;
  align-items: center; cursor: pointer; }
/* A locked step, pressed: one centred card saying what it waits for. */
.ws-lockcard { max-width: 640px; margin: 30px auto; text-align: center; background: var(--color-surface);
  border: 1px solid var(--color-line); border-radius: 12px; padding: 22px 24px; }
.ws-lockcard h3 { font-size: 17px; margin: 0 0 6px; }
.ws-lockcard .ws-why { font-size: 13.5px; line-height: 1.55; margin: 0 0 14px; }
.ws-prog { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 12px 0 16px; }
.ws-prog span { border: 1px solid var(--color-line); border-radius: 10px; padding: 5px 12px;
  font-size: 12.5px; color: var(--color-muted); background: var(--color-surface); }
.ws-prog span.is-done { color: var(--color-tie); border-color: var(--color-tie); }
.ws-prog span.is-now { color: var(--color-text); border-color: var(--color-accent); font-weight: 600; }
.wl-dots i.is-now { background: var(--color-review); border-color: var(--color-review); }
#purged .swept-foot { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ws-drop { position: relative; display: flex; flex: 1 1 100%; gap: 12px; align-items: center; justify-content: center;
  border: 1.5px dashed var(--color-edge); border-radius: 12px; padding: 18px; background: var(--color-sunken);
  color: var(--color-body); cursor: pointer; }
.ws-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.ws-drop:hover, .ws-drop:focus-within { border-color: var(--color-accent); }
.ws-says { color: var(--color-muted); font-size: 12.5px; margin-top: 4px; }
.ws-prog-row { justify-content: flex-start; margin: 6px 0 0; }
.ws-ghost td { color: var(--color-faint); font-style: italic; }
.ws-h-more { font-size: 12.5px; font-weight: 400; }
/* Statements: which statement first, then how it is shown (the mockup's toolbar order). */
.is-ws[data-step="statements"] .rv-tabbar > #wb-tabs, .is-ws[data-step="statements"] .rv-tabbar > .rv-tabcard { order: -2; }
.is-ws[data-step="statements"] .rv-tabbar > #ws-lens { order: -1; }
/* On Checks the list above carries "Ask the checker again": the bar does not say it twice. */
.is-ws[data-step="checks"] .wb-verdict .verdict-check { display: none; }
.ws-selcopy { margin-left: 6px; border: 1px solid var(--color-edge); background: var(--color-surface);
  border-radius: 6px; padding: 1px 8px; font: inherit; font-size: 12px; cursor: pointer; color: var(--color-text); }
.ws-yearhead td { background: var(--color-sunken); font-size: 12.5px; color: var(--color-body); }
tr.is-one-of > td:first-child { padding-left: 22px; }
.chat-ctx { font-size: 12px; color: var(--color-muted); border: 1px solid var(--color-line); border-radius: 10px; padding: 1px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46%; }
.chat-empty-h { font-weight: 600; font-size: 15px; margin: 6px 0 2px; }
.ws-nvband { margin: 0 16px 10px; padding: 8px 14px; border: 1px solid var(--color-warn); border-radius: 10px;
  background: var(--color-warn-100); color: var(--color-warn); }
.ws-recnote { margin: 0 0 10px; }
.cc-draftrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; padding: 6px 10px;
  border: 1px solid var(--color-review-edge); border-radius: 10px; background: var(--color-review-100); }
.cc-draftrow .cc-draft-say { flex: 1 1 320px; font-size: 13px; }
.cc-pill.is-draft { background: var(--color-surface); border: 1px solid var(--color-review-edge); color: var(--color-review-ink); font-weight: 600; }
.cc-history > summary { cursor: pointer; }
/* A section heading of a statement stays under the period headings until the next one
   pushes it out (the design's sheet). */
.is-ws table.sheet tbody tr[class^="heading"]:not(.is-prov) > td { position: sticky; top: var(--sheet-head, 0px); z-index: 1; background: var(--color-surface); }
.chat-sugg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.is-ws.ws-chat-wide .chat-sugg { grid-template-columns: repeat(4, 1fr); }
.chat-sugg button { text-align: left; border: 1px solid var(--color-line); border-radius: 10px; padding: 8px 10px;
  background: var(--color-surface); font: inherit; font-size: 13px; color: var(--color-text); cursor: pointer; }
.chat-sugg button:hover { border-color: var(--color-accent); }
.chat-sugg small { display: block; color: var(--color-muted); font-size: 11.5px; margin-top: 2px; }
.ws-found { margin: 14px 0 0; }
.ws-found > summary { cursor: pointer; font-size: 13.5px; color: var(--color-body); padding: 6px 0; }
.ws-upform { display: flex; flex-direction: column; gap: 10px; min-width: min(520px, 80vw); }
.ws-upfld { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.ws-upfld > span { min-width: 130px; color: var(--color-muted); }
.ws-upfld > span i { font-style: normal; opacity: .7; }
.ws-upfld .input { flex: 1 1 220px; }
.ws-note-fold[hidden] { display: none; }
@media (min-width: 981px) {
  .is-ws .wb-layout.is-review.has-source:not(.src-hidden),
  .is-ws .wb-layout.is-review.has-source.is-collapsed:not(.src-hidden) {
    grid-template-columns: minmax(360px, var(--pane-share, 55fr)) 10px minmax(300px, var(--src-share, 45fr));
  }
  .is-ws .wb-layout.is-review.has-source:not(.src-hidden) > .wb-pane { grid-column: 1; grid-row: 1; }
  .is-ws .wb-layout.is-review.has-source:not(.src-hidden) > .wb-split { grid-column: 2; grid-row: 1; }
  .is-ws .wb-layout.is-review.has-source:not(.src-hidden) > .wb-source { grid-column: 3; grid-row: 1; }
}
.wb-source > .cell-inspector { flex: 0 0 auto; border-top: 1px solid var(--color-line); padding: 8px 12px; max-height: 38%; overflow: auto; }
/* Home's Next column holds a button, not a date: "Ask the checker again - free" is about
   200px, and the 96px the date had cut it off at the table's edge at every width (found
   2026-10-05). The column is as wide as the longest act, and a label wraps before it is
   ever clipped. */
.wl-ws .wl-row { grid-template-columns: 22px minmax(0, 2fr) 96px minmax(140px, 1.3fr) 120px 208px; }
.wl-ws .wl-when { white-space: normal; min-width: 0; }
.wl-ws .wl-next { white-space: normal; max-width: 100%; text-align: center; }
@media (max-width: 980px) {
  .wl-ws .wl-row { grid-template-columns: 22px minmax(0, 1fr) minmax(110px, auto) 150px; }
  /* "Step reached" is .wl-checks, hidden here - but .wl-reached's own display put it
     back, a fifth cell in four columns, and the Next button fell to a 22px column on a
     row of its own. */
  .wl-ws .wl-reached { display: none; }
}
@media (max-width: 640px) {
  .wl-ws .wl-row { grid-template-columns: 22px minmax(0, 1fr) minmax(0, 132px); }
}
/* THE ROW ON A PAGE OF ITS OWN (a report not finished, or stopped): who the company is
   and what is open sit on their own line, over the six steps. On one line with them, a
   long sentence in the chip pushed every step off the right edge behind a scrollbar -
   1,731px of row in a 926px box on a stopped report (live, 2026-10-05). */
.ws-steps.ws-alone { flex-wrap: wrap; row-gap: 4px; }
.ws-alone > .ws-who { flex: 1 0 100%; min-width: 0; padding: 0 0 4px; }
.ws-alone > .ws-who .ws-gsteps { flex-wrap: wrap; row-gap: 3px; }
.ws-alone > .ws-who .ws-inprog { white-space: normal; }
.ws-alone > .ws-who + .ws-group { border-left: 0; padding-left: 0; }
/* On a narrow screen the wrapped row is several lines tall: it scrolls away with the
   page there, and does not stand over a third of it. */
@media (max-width: 700px) { .ws-steps.ws-alone { position: static; } }
/* ws:end */

/* The run page under the row: which of the sheets' own tab cards a step shows. The cards
   are drawn by workbook.js as before; workspace.js names each by its heading. */
.ws-onreport { font-weight: 400; color: var(--color-muted); font-size: .86em; }
.is-ws .rv-tabbar > .rv-tabcard:has(#cv-tab) { display: none; }
.is-ws[data-step="statements"] #wb-tabs .rv-tabcard:not([data-group="As printed"]):not([data-group="Exploded into the notes"]),
.is-ws[data-step="checks"] #wb-tabs .rv-tabcard:not([data-group="Proof"]),
.is-ws[data-step="other"] #wb-tabs .rv-tabcard[data-group="As printed"],
.is-ws[data-step="other"] #wb-tabs .rv-tabcard[data-group="Exploded into the notes"],
.is-ws[data-step="other"] #wb-tabs .rv-tabcard[data-group="Proof"] { display: none; }
.ws-lens { display: inline-flex; gap: 6px; align-items: center; margin-right: 6px; flex-wrap: wrap; }
.ws-hint { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--color-line); color: var(--color-muted); font-size: 12px; cursor: help; }
.ws-more-h:empty { border-top: 1px solid var(--color-line); padding: 0; margin: 4px 0; }
.ws-more-h { display: block; padding: 6px 10px 2px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
dialog.ws-dl { border: 1px solid var(--color-line); border-radius: 12px; padding: 16px 18px; width: min(560px, 92vw);
  background: var(--color-surface); color: var(--color-text); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
dialog.ws-dl::backdrop { background: rgba(30, 26, 22, .35); }
dialog.ws-dl h2 { font-size: 17px; margin: 0 0 8px; }
.ws-dlrow { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid var(--color-line); font-size: 13.5px; }
.ws-dlrow > div { flex: 1 1 auto; min-width: 0; }
dialog.ws-dl form { margin: 10px 0 0; text-align: right; }
.ws-lens[hidden] { display: none; }
.is-ws[data-step="statements"][data-lens="face"] #wb-tabs .rv-tabcard[data-group="Exploded into the notes"],
.is-ws[data-step="statements"][data-lens="notes"] #wb-tabs .rv-tabcard[data-group="As printed"] { display: none; }
.is-ws[data-step="statements"] #wb-tabs .rv-tab-group { display: none; }
.is-ws[data-step="company"] .rv-tabbar, .is-ws[data-step="credit"] .rv-tabbar,
.is-ws[data-step="checks"] .rv-tabbar { display: none; }
.is-ws[data-step="company"] #wb, .is-ws[data-step="company"] .wb-switch,
.is-ws[data-step="company"] #wb-fallback, .is-ws[data-step="company"] .rv-gone,
.is-ws[data-step="company"] .wb-statements, .is-ws[data-step="company"] .stmt-sum { display: none !important; }
.ws-checkbar { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; padding: 5px 12px;
  background: var(--color-bg); border-bottom: 1px solid var(--color-line); font-size: 13px; }
.ws-checkbar[hidden] { display: none; }
.ws-checkbar-say { color: var(--color-muted); flex: 1 1 auto; }
.ws-checkbar-slot, .ws-signoff { display: inline-flex; align-items: center; gap: 8px; }
.in-frame .shell > header, .in-frame .shell > footer, .in-frame .cc-crumbs { display: none !important; }
/* Inside the run page's tab Across years does not repeat the header: the company is named
   above, and the one Download is the header's. */
.in-frame .cc-head h1, .in-frame .cc-head > a.btn { display: none !important; }
.ws-frame { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ws-frame[hidden] { display: none; }
.ws-frame iframe { flex: 1 1 auto; width: 100%; min-height: 60vh; border: 0; background: var(--color-bg); }
.ws-frame-ask { padding: 18px 16px; max-width: 62ch; }
.ws-frame-ask h2 { font-size: 17px; margin: 0 0 6px; }
.is-ws[data-step="chart"] .rv-tabbar, .is-ws[data-step="years"] .rv-tabbar { display: none; }
.is-ws[data-step="chart"] #wb, .is-ws[data-step="years"] #wb,
.is-ws[data-step="chart"] .wb-switch, .is-ws[data-step="years"] .wb-switch,
.is-ws[data-step="chart"] #wb-fallback, .is-ws[data-step="years"] #wb-fallback,
.is-ws[data-step="chart"] .rv-gone, .is-ws[data-step="years"] .rv-gone,
.is-ws[data-step="chart"] .stmt-sum, .is-ws[data-step="years"] .stmt-sum,
.is-ws[data-step="chart"] .wb-verdict, .is-ws[data-step="years"] .wb-verdict { display: none !important; }
.ws-co { flex: 1 1 auto; overflow: auto; padding: 14px 16px; }
.ws-co[hidden] { display: none; }
.ws-co { max-width: 1180px; }
.ws-co-id { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 32px; margin-bottom: 16px;
  padding: 10px 14px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card, 10px); }
@media (max-width: 900px) { .ws-co-id { grid-template-columns: 1fr; } }
.ws-kv { display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 40px; font-size: 13.5px; }
.ws-kv > span { color: var(--color-text); }
.ws-kv > span small { display: block; color: var(--color-muted); font-size: 11.5px; line-height: 1.3; }
.ws-chips { white-space: normal; }
.ws-chip { display: inline-block; padding: 1px 8px; margin: 1px 2px 1px 0; border-radius: 10px; font-size: 12px;
  border: 1px solid var(--color-line); color: var(--color-muted); background: var(--color-bg); }
.ws-chip.is-done { color: var(--color-tie); border-color: #bfe0cb; background: #eef8f1; }
.ws-co-links { margin: 10px 0 0; font-size: 13.5px; }
.ws-colink { color: inherit; text-decoration: none; }
.ws-colink:hover { border-bottom: 1px solid currentColor; }
.ws-kv > b { font-weight: 600; min-width: 0; }
.ws-label-form { display: flex; gap: 6px; margin: 0; min-width: 0; }
.ws-label-form .input { height: 28px; padding: 2px 8px; flex: 1 1 auto; min-width: 0; max-width: 280px; }
.ws-co h3 { font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--color-muted); margin: 16px 0 6px; font-weight: 600; }
.ws-co-reports, .cv-years-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--color-surface);
  border: 1px solid var(--color-line); }
.ws-co-reports th, .ws-co-reports td, .cv-years-tbl th, .cv-years-tbl td { padding: 6px 12px; border-bottom: 1px solid var(--color-line); text-align: left; vertical-align: top; }
.ws-co-reports thead th, .cv-years-tbl thead th { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted);
  font-weight: 600; background: var(--color-bg); position: sticky; top: 0; }
.cv-years-tbl td.n, .cv-years-tbl th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cv-years-tbl tbody th { font-weight: 600; white-space: nowrap; position: sticky; left: 0; background: var(--color-surface); }
.cv-years-tbl tr.cv-ratio th { font-weight: 400; }
.cv-years-tbl tr.cv-ratio:first-of-type th, .cv-years-tbl tr.cv-ratio:first-of-type td { border-top: 2px solid var(--color-line); }
.cv-years-tbl .why { font-size: 11.5px; color: var(--color-muted); }
.ws-up { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 14px; background: var(--color-surface);
  border: 1px dashed var(--color-line); border-radius: var(--radius-card, 10px); font-size: 13.5px; }
.ws-up .input { height: 30px; padding: 2px 8px; }
.ws-up input[type=file] { max-width: 300px; }
.ws-co-foot { margin: 14px 0 0; font-size: 13px; color: var(--color-muted); }
.is-ws[data-step="company"] .wb-verdict { display: none !important; }
.ws-checkbar-counts { display: inline-flex; gap: 6px; align-items: center; }
.ws-co-reports tr.is-here td { background: var(--color-bg); }
.ws-co-none h2 { font-size: 17px; margin: 0 0 6px; }
.ws-move { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; font-size: 13.5px; }
.ws-move .input { height: 28px; padding: 2px 8px; max-width: 260px; }
.ws-move-no { font-size: 13px; margin: 0 0 12px; }
.cv-ratio th { font-weight: 400; }
.cv-years { margin-bottom: 10px; }
.cv-years .cv-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cv-legend { font-size: 12px; color: var(--color-muted); display: inline-flex; gap: 6px; align-items: center; }
.cv-k { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-left: 8px; }
.cv-k-read { background: var(--color-keyed); } .cv-k-yours { background: var(--color-yours); } .cv-k-calc { background: var(--color-muted); }
.cv-years-tbl .cv-fig { color: var(--color-keyed); text-decoration: none; font-variant-numeric: tabular-nums; }
.cv-years-tbl .cv-fig.is-yours { color: var(--color-yours); }
.cv-years-tbl a.cv-fig:hover { text-decoration: underline; }
.cv-calc { color: var(--color-muted); }
.ws-record { display: inline-flex; gap: 6px; margin: 2px 0 0 6px; vertical-align: middle; }
.ws-record .input { height: 26px; padding: 2px 8px; width: 170px; }
/* Ask, at the side on every step of the workspace (static/chat.js SIDE). */
.is-ws > #wb-chat { position: fixed; right: 10px; top: 104px; bottom: 70px; width: min(420px, calc(100vw - 20px));
  z-index: 70; box-shadow: 0 10px 30px rgba(0,0,0,.16); }
.is-ws > #wb-chat[hidden] { display: none; }
.is-ws.ws-chat-open .main { padding-right: 440px; }
.is-ws.ws-chat-wide > #wb-chat { width: min(640px, calc(100vw - 20px)); }
.is-ws.ws-chat-open.ws-chat-wide .main { padding-right: 660px; }
.is-ws #chat-title { margin-right: auto; }
.is-ws #chat-to-report, .is-ws #src-ask { display: none !important; }
@media (max-width: 980px) { .is-ws.ws-chat-open .main, .is-ws.ws-chat-open.ws-chat-wide .main { padding-right: 10px; } }
.wl-reached { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.wl-dots { display: inline-flex; gap: 3px; }
.wl-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--color-muted); display: inline-block; }
.wl-dots i.is-on { background: var(--color-tie); border-color: var(--color-tie); }
.wl-at { font-size: 12.5px; color: var(--color-text); }
.wl-at.is-done { color: var(--color-tie); }
.wl-next { white-space: nowrap; }
.wl-since { display: block; font-size: 11.5px; color: var(--color-muted); margin-top: 2px; }
.wl-step { color: var(--color-accent); text-decoration: none; }
.wl-step:hover { text-decoration: underline; }
.wl-step.is-done { color: var(--color-tie); }
.up-company { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 10px 28px 2px; font-size: 13px; }
.console.is-strip .up-company { margin: 10px 20px 2px; }
.up-company > span { color: var(--color-muted); white-space: nowrap; }
.up-company > span i { font-style: normal; opacity: .7; }
.up-company .input { flex: 1 1 auto; max-width: 420px; height: 30px; padding: 2px 9px; }
.up-company .up-company-note { flex: 1 1 100%; color: var(--color-muted); font-size: 12.5px; white-space: normal; }

/* CHECKS and the CREDIT VIEW, as the company workspace's design draws them. */
.ws-checks { flex: 0 0 auto; padding: 8px 12px 0; }
.ws-checks[hidden] { display: none; }
.ws-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; font-size: 13px; }
.ws-why { color: var(--color-muted); font-size: 12.5px; }
.ws-sp { flex: 1 1 auto; }
.ws-seg { display: inline-flex; border: 1px solid var(--color-line); border-radius: 8px; overflow: hidden; background: var(--color-surface); }
.ws-seg button { border: 0; background: none; padding: 4px 11px; font: inherit; font-size: 12.5px; color: var(--color-text); cursor: pointer; }
.ws-seg button + button { border-left: 1px solid var(--color-line); }
.ws-seg button.is-on { background: var(--color-text); color: #fff; }
.ws-tools .stmt-sum { margin: 0; border: 0; background: none; padding: 0; font-size: 12.5px; color: var(--color-muted); }
.ws-signbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 0 0 8px; border: 1px solid #bfe0cb;
  background: #eef8f1; border-radius: var(--radius-card, 10px); font-size: 13.5px; }
.ws-signbar.is-hold { border-color: #ecd49a; background: #fdf6e3; }
.ws-row-t { flex: 1 1 auto; min-width: 0; }
.ws-card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card, 10px);
  padding: 10px 14px; margin: 0 0 10px; font-size: 13.5px; }
.ws-card h3 { font-size: 14px; margin: 0 0 6px; }
.ws-card p { margin: 0; }
.ws-card.ws-scroll { overflow-x: auto; }
.ws-need { border-color: #ecd49a; }
.ws-need.is-none { border-color: var(--color-line); }
.ws-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.ws-row + .ws-row { border-top: 1px solid var(--color-line); }
.ws-pill { display: inline-block; padding: 1px 9px; border-radius: 11px; font-size: 12px; white-space: nowrap;
  background: var(--color-bg); border: 1px solid var(--color-line); color: var(--color-text); }
.ws-pill.is-ok { background: #eef8f1; border-color: #bfe0cb; color: var(--color-tie); }
.ws-pill.is-rv { background: #fdf6e3; border-color: #ecd49a; color: #7a5207; }
.ws-pill.is-vi { background: #f3ecfa; border-color: #d9c6ee; color: var(--color-yours); }
.ws-pill.is-break { background: #fbeceb; border-color: #f0c4c0; color: var(--color-warn); }
.ws-unchecked { margin: 0; padding-left: 18px; }
.ws-chk-need[hidden] { display: none; }
.is-ws[data-step="checks"][data-chk="need"] #wb, .is-ws[data-step="checks"][data-chk="need"] .wb-switch,
.is-ws[data-step="checks"][data-chk="need"] #wb-fallback, .is-ws[data-step="checks"][data-chk="need"] .rv-gone { display: none !important; }
.is-ws[data-step="checks"] .wb-lens { display: none !important; }
.is-ws:not([data-step="checks"]) .stmt-sum { display: none !important; }
.ws-cv { padding: 0 0 4px; }
.ws-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--color-muted); }
.ws-legend b { color: var(--color-text); }
.ws-tag { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: baseline; }
.ws-tag.is-read { background: var(--color-keyed); } .ws-tag.is-calc { background: var(--color-muted); } .ws-tag.is-yours { background: var(--color-yours); }
.ws-qh { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 6px; }
.ws-qh h3 { margin: 0; }
.ws-ans { color: var(--color-muted); font-size: 12.5px; }
.ws-cvt { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ws-cvt th, .ws-cvt td { padding: 6px 10px; border-bottom: 1px solid var(--color-line); text-align: left; vertical-align: middle; }
.ws-cvt.is-compact th, .ws-cvt.is-compact td { padding: 2px 10px; }
.ws-cvt thead th { font-weight: 600; font-size: 12.5px; vertical-align: bottom; background: var(--color-surface); position: sticky; top: 0; }
.ws-cvt .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ws-cvt td.ws-lab { position: sticky; left: 0; background: var(--color-surface); white-space: nowrap; }
.ws-cvt tr.is-key td { font-weight: 600; background: var(--color-bg); }
.ws-cvt tr.is-key td.ws-lab { background: var(--color-bg); }
.ws-colh { display: inline-flex; flex-direction: column; align-items: flex-end; }
.ws-colh small { font-weight: 400; color: var(--color-muted); font-size: 11px; }
.ws-cvt td.is-read .ws-v { color: var(--color-keyed); }
.ws-cvt td.is-yours .ws-v { color: var(--color-yours); }
.ws-cvt td.is-calc .ws-v { color: var(--color-text); }
.ws-cvt a.ws-v { text-decoration: none; border-bottom: 1px dotted currentColor; }
/* A year-on-year move for the worse is red, as .yoy.is-sharp is on the sheet: the one use
   of red beside a break (CLAUDE.md, Words and colours; owner, 2026-10-04). */
.ws-cvt td.is-up .ws-v { color: var(--color-tie); }
.ws-cvt td.is-down .ws-v { color: var(--color-warn); }
.ws-nk { color: var(--color-muted); font-size: 12px; }
.ws-spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 24px; }
.ws-spark i { width: 6px; background: #c9c2b8; border-radius: 1px; display: inline-block; }
.ws-spark i:last-of-type { background: var(--color-accent); }
.ws-spark i[hidden] { display: none; }
.ws-note { color: var(--color-muted); font-size: 12.5px; margin: 4px 2px 12px; }
.cv-own { margin: 0 0 10px; }
/* The Credit view is the design's drawing alone; the report's own credit read is its own
   screen, from More, in the same panel. */
.is-ws[data-step="credit"] #cv-own { display: none; }
.is-ws[data-step="read"] #ws-cv { display: none; }
.is-ws[data-step="read"] #cv-own > summary { pointer-events: none; border: 0; background: none; padding: 0 2px 8px; }
.is-ws[data-step="read"] .rv-tabbar { display: none; }
.cv-own > summary { cursor: pointer; padding: 8px 12px; border: 1px solid var(--color-line); border-radius: var(--radius-card, 10px);
  background: var(--color-surface); font-size: 13.5px; font-weight: 600; }
.cv-own[open] > summary { margin-bottom: 10px; }

/* ── Chart Mapping (templates/chartmap.html) ─────────────────────────────────────────
   A work list first (what waits for a person), the ties second, the chart third. Dense
   tables in the app's own language; amber for "someone will be asked", never a score. */
.cm .cm-mark { margin: 0 0 12px; }
.cm .cm-pick { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.cm .cm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }
.cm .tablewrap { overflow-x: auto; }
.cm table.cm-tbl { width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; }
.cm table.cm-tbl th.num, .cm table.cm-tbl td.num { text-align: right; white-space: nowrap; }
.cm table.cm-chart { table-layout: fixed; min-width: 980px; }
.cm table.cm-chart col.c-code { width: 62px; }
.cm table.cm-chart col.c-num { width: 132px; }
.cm table.cm-chart col.c-how { width: 23%; }
.cm table.cm-chart col.c-page { width: 13%; }
.cm table.cm-chart col.c-act { width: 96px; }
.cm table.cm-chart td { overflow-wrap: anywhere; vertical-align: top; }
.cm details.cm-decide[open] { position: relative; }
.cm details.cm-decide[open] .cm-form { position: absolute; right: 0; z-index: 5; background: #fff; border: 1px solid var(--color-rule); border-radius: 8px; padding: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.12); width: 440px; }
.cm table.cm-tbl td.code { color: var(--color-faint); font-size: 12px; white-space: nowrap; }
.cm tr.cm-class td { font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted); background: var(--color-sunken); }
.cm tr.cm-calculated td { background: var(--color-derived); }
.cm tr.cm-unit td { font-size: 13px; border-top: 0; padding-top: 2px; padding-bottom: 2px; color: var(--color-body); }
.cm tr.cm-unit td.cm-from { padding-left: 22px; }
.cm tr.cm-unit.is-confirm td { background: var(--color-review-100); }
.cm .cm-watch { font-size: 12px; color: var(--color-review-ink); }
.cm details.cm-decide > summary { list-style: none; cursor: pointer; display: inline-block; }
.cm details.cm-decide > summary::-webkit-details-marker { display: none; }
.cm .cm-form { display: grid; gap: 8px; margin: 8px 0; min-width: 320px; max-width: 520px; }
.cm .cm-form label { display: grid; gap: 4px; font-size: 13px; }
.cm .cm-list { margin: 0 0 12px 18px; }
.cm .cm-foot { margin: 24px 0; font-size: 13px; }