/* ============================================================
   Investment Tracker -- viewer stylesheet.
   DIRECTION C, "the instrument panel" (DECISIONS.md R14).

   The page is a measuring device. Every proportion the business
   actually cares about is drawn as a graduated rod with named
   datum marks, and every fill carries a TEXTURE as well as a
   colour, so it survives greyscale and both common colour
   blindnesses. Status is a SHAPE as well as a word.

   No JavaScript. No charting library. No image assets. The only
   SVG is the ledger sparkline, whose points are computed server
   side. Bars are divs with a server-computed width.

   Two Google faces, neither monospace (global rule: monospace is
   never the UI font). Both have a real system fallback stack and
   the page was designed to read correctly with the webfonts
   failing to load entirely.
   ============================================================ */

:root {
  /* One width for masthead, tabs, main and colophon, so the chrome cannot
     drift out of line with the content. 1480 because the project screen's
     split-of-a-cheque table carries eight columns and clipped at 1220. */
  --page-max: 1480px;
  --paper:      #e8ecec;
  --surface:    #fbfcfc;
  --surface-2:  #f1f4f4;
  --ink:        #131819;
  --ink-2:      #3b4547;
  --muted:      #5a6567;
  --rule:       #d0d7d7;
  --rule-2:     #aeb8b8;
  --hair:       #c0c9c9;

  /* The four states of a dollar on this page. Each is a colour
     AND a texture AND a written figure -- never colour alone. */
  --c-prin:     #0a4f56;   /* principal home          - solid       */
  --c-ret:      #9d4c0e;   /* return paid             - 45deg hatch */
  --c-biz:      #97a3a6;   /* kept by the business    - dots        */
  --c-out:      #6f7c7e;   /* still outstanding       - open rule   */
  --c-bill:     #3b4547;   /* billed against contract - the rod     */

  --warn:       #8a3d12;
  --warn-bg:    #fbf1e9;

  --tex:        rgba(255,255,255,.50);
  --dot:        rgba(19,24,25,.42);

  --track:      #dde3e3;
  --datum:      #131819;
  --shadow:     0 1px 2px rgba(19,24,25,.07);
  --scrim-l:    linear-gradient(90deg, var(--surface), rgba(251,252,252,0));
  --scrim-r:    linear-gradient(270deg, var(--surface), rgba(251,252,252,0));
  --edge:       rgba(19,24,25,.13);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:     #0e1314;
    --surface:   #161c1d;
    --surface-2: #1d2425;
    --ink:       #e7eceb;
    --ink-2:     #b0bbba;
    --muted:     #8a9695;
    --rule:      #283130;
    --rule-2:    #3f4a49;
    --hair:      #313b3a;

    --c-prin:    #5ec8bf;
    --c-ret:     #c4712b;
    --c-biz:     #6b7c80;
    --c-out:     #78878a;
    --c-bill:    #9fb0b2;

    --warn:      #e2955c;
    --warn-bg:   #241a13;

    --tex:       rgba(255,255,255,.40);
    --dot:       rgba(231,236,235,.52);

    --track:     #202827;
    --datum:     #e7eceb;
    --shadow:    none;
    --scrim-l:   linear-gradient(90deg, var(--surface), rgba(22,28,29,0));
    --scrim-r:   linear-gradient(270deg, var(--surface), rgba(22,28,29,0));
    --edge:      rgba(0,0,0,.55);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: break-word;
  /* Belt and braces. Nothing below may exceed the viewport, but one
     long token must never take the whole document sideways. */
  overflow-x: hidden;
}

a { color: var(--c-prin); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--c-prin); outline-offset: 2px; border-radius: 2px;
}

/* --- Numerals ----------------------------------------------------------- */

/* Money is tabular everywhere it appears, so columns of figures line up on
   the decimal whether they are in a table, a figure grid or a caption. */
.num, .money, .pct, td, th, .big, .sm, dd {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.num, .money, .pct { white-space: nowrap; }
.num, .r { text-align: right; }
.zero { color: var(--muted); }
.neg { color: var(--warn); }
.nowrap { white-space: nowrap; }

/* Deliberately breakable mid-token: fingerprints and hashes, where the
   characters carry no word boundaries and a long one would otherwise be
   the single thing that scrolls the page sideways. */
.breakable { overflow-wrap: anywhere; word-break: break-all; }

/* --- Chrome ------------------------------------------------------------- */

.masthead { background: var(--surface); border-bottom: 1px solid var(--rule); }
.masthead-inner {
  max-width: var(--page-max); margin: 0 auto; padding: 14px 24px 0;
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
}
.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-weight: 600; font-size: 18px; letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none;
}
.wordmark .mark { width: 28px; height: 28px; flex: none; display: block; }
.wordmark .mark-text { display: block; white-space: nowrap; }
.masthead-note {
  margin-left: auto; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  text-align: right;
}
.tabs {
  max-width: var(--page-max); margin: 0 auto; padding: 10px 24px 0;
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
  padding: 8px 12px; border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--ink); border-bottom-color: var(--c-prin); }

main { max-width: var(--page-max); margin: 0 auto; padding: 28px 24px 60px; }

.colophon {
  max-width: var(--page-max); margin: 0 auto; padding: 0 24px 48px;
  font-size: 12px; color: var(--muted); line-height: 1.6;
}

/* --- Page heads --------------------------------------------------------- */

.page-head { margin-bottom: 24px; }
.kicker, .eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 6px;
}
h1 {
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-weight: 600; font-size: clamp(25px, 4.2vw, 38px);
  letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 10px;
}
h2 {
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-weight: 600; font-size: 17px; letter-spacing: -0.015em;
  margin: 30px 0 12px;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
h3 {
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 10px;
}
/* The note beside a heading explains the rule the section is showing. It is
   normal-weight prose, never a second heading. */
.h2-note, h2 .sub {
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 12.5px; font-weight: 400; letter-spacing: 0;
  color: var(--muted); line-height: 1.45; max-width: 72ch;
}
.sub, .lede {
  font-size: 13.5px; color: var(--ink-2); line-height: 1.62; max-width: 78ch;
}
.lede-figure { font-weight: 600; }
.lede-note, .split-note { font-size: 12.5px; color: var(--muted); }
.dim { color: var(--muted); }
.small { font-size: 11.5px; line-height: 1.4; }
/* R48 (developer, 2026-10-28): "all small words should show only on hover".
   The small print -- the note under a figure, the sub-line under a name or a
   row label, the note beside a heading or a panel title -- is drawn invisible
   and keeps its space, so nothing on the page moves when it appears. It shows
   while the pointer is over the row, box, heading or panel title it belongs to
   (or its own parent), and while that row has keyboard focus. A device with
   no pointer keeps the words: there is nothing to hover. Print keeps them. */
@media (hover: hover) {
  .small, .why, .cellnote, .sub-note, .h2-note, h2 .sub, .panel-hd .sub, .scale-note {
    opacity: 0; transition: opacity .12s ease-in;
  }
  :hover > .small, :hover > .why, :hover > .cellnote, :hover > .sub-note, :hover > .h2-note,
  h2:hover .sub, .panel-hd:hover .sub, .panel-hd:hover .small, th:hover .scale-note,
  tr:hover .small, tr:hover .cellnote, tr:hover .sub-note,
  .figure:hover .small, .figure:hover .why, .page-head:hover .small, summary:hover .small,
  tr:focus-within .small, tr:focus-within .cellnote, .figure:focus-within .why {
    opacity: 1;
  }
}
@media print {
  .small, .why, .cellnote, .sub-note, .h2-note, h2 .sub, .panel-hd .sub, .scale-note { opacity: 1 !important; }
}
.sm { font-size: 15px; font-weight: 600; }
.label, .split-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}

/* --- Panels ------------------------------------------------------------- */

.panel {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 3px; box-shadow: var(--shadow); margin-bottom: 20px;
}
.panel-hd {
  padding: 15px 20px 13px; border-bottom: 1px solid var(--rule);
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.panel-hd h2 { margin: 0; }
.panel-bd { padding: 18px 20px 20px; }
.panel-ft {
  padding: 12px 20px 15px; border-top: 1px solid var(--rule);
  font-size: 12.5px; color: var(--muted); line-height: 1.55;
}
.panel-ft strong, .panel-ft b { color: var(--ink-2); font-weight: 600; }

/* ============================================================
   THE ROD -- the signature of this direction.

   A graduated scale read like a surveyor's levelling staff: a
   minor tick every 5%, a major every 25%, and two named DATUM
   MARKS which between them govern every other number on the
   page --

     base billed      75% of contract. Every cent of principal
                      is home by here.
     positions paid   base + the agreed rate on top. Past here
                      the positions take nothing further.

   Those two rules exist today only as prose at the foot of the
   page. Drawn once at the top, they make the rest predictable
   instead of surprising.
   ============================================================ */

.rod-wrap { padding: 20px 20px 16px; }

.rod-read {
  display: flex; align-items: flex-end; gap: 20px;
  flex-wrap: wrap; margin-bottom: 10px;
}
.rod-read .lab {
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); display: block;
  margin-bottom: 3px;
}
.big {
  font-size: clamp(28px, 4.6vw, 40px); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1; display: block;
}
.rod-read .of {
  font-size: 13px; color: var(--muted); padding-bottom: 3px;
  max-width: 34ch; line-height: 1.45;
}
.rod-read .of b { color: var(--ink-2); font-weight: 600; }

.rod { position: relative; height: 62px; margin: 76px 0 4px; }
.rod-track {
  position: absolute; left: 0; right: 0; top: 0; height: 22px;
  background: var(--track); border: 1px solid var(--rule-2);
}
.rod-fill {
  position: absolute; left: 0; top: 0; height: 22px;
  background-color: var(--c-bill); border: 1px solid var(--c-bill);
}
/* The stretch of fill past the payout datum: the job has billed beyond the
   point where positions stop taking, so all of it is the business's. Drawn
   dotted, exactly like "kept by the business" everywhere else. */
.rod-fill.past {
  background-color: var(--c-biz); border-color: var(--rule-2);
  background-image: radial-gradient(var(--dot) .9px, transparent 1px);
  background-size: 4px 4px;
}
/* Funded by recycling: money that came back off one job and went straight out
   onto the next, never having been outside money twice. It is a FIFTH state of
   a dollar and it gets its own texture -- vertical rules, distinct from the
   45deg hatch of a return and the dots of business-kept -- rather than
   borrowing one that already means something else (R14.2). */
.rod-fill.recy, .f-recy {
  background-color: transparent; border-color: var(--rule-2);
  background-image: repeating-linear-gradient(90deg,
      var(--c-prin) 0 1px, transparent 1px 6px);
}
.rod-fill.fp { background-color: var(--c-prin); border-color: var(--c-prin); }
.rod-fill.fo {
  background-color: transparent; border-color: var(--rule-2);
  background-image: repeating-linear-gradient(-45deg,
      var(--c-out) 0 1px, transparent 1px 5px);
}

/* Graduations hang BELOW the bar, the way a rule is actually read. */
.rod-ticks { position: absolute; left: 0; right: 0; top: 22px; height: 10px; }
.rod-ticks i {
  position: absolute; top: 0; width: 1px; height: 4px; background: var(--rule-2);
}
.rod-ticks i.maj { height: 9px; background: var(--ink-2); opacity: .45; }

.datum {
  position: absolute; top: -6px; height: 36px; width: 0;
  border-left: 1.5px dashed var(--datum);
}
.datum.hi { top: -36px; height: 66px; }
.datum::after {
  content: ""; position: absolute; left: -4.5px; top: -1px;
  border-left: 4.5px solid transparent; border-right: 4.5px solid transparent;
  border-top: 6px solid var(--datum);
}
.datum-lab {
  position: absolute; top: -32px; transform: translateX(-50%);
  white-space: nowrap; font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
  text-align: center; line-height: 1.25;
}
.datum-lab.hi { top: -62px; }
.datum-lab .v {
  display: block; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--muted); font-size: 11.5px;
}
.rod-scale {
  position: absolute; left: 0; right: 0; top: 36px; height: 18px;
  font-size: 10.5px; color: var(--muted);
}
.rod-scale span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.rod-scale span.s0 { transform: none; }
.rod-scale span.s100 { transform: translateX(-100%); }

/* Below 820px the floating datum labels have nowhere to go, so they become a
   list under the rod. The dashed marks stay on the bar either way. */
.datum-list { display: none; margin: 0; padding: 0; }
@media (max-width: 620px) {
  .rod-scale span:not(.s0):not(.s100) { display: none; }
}
@media (max-width: 820px) {
  .rod { margin-top: 18px; height: 58px; }
  .datum-lab { display: none; }
  .datum-list {
    display: grid; gap: 8px; margin-top: 20px; font-size: 12.5px;
    color: var(--muted); line-height: 1.45;
  }
  .datum-list b { color: var(--ink); font-weight: 600; }
  .datum-list li { list-style: none; padding-left: 15px; position: relative; }
  .datum-list li::before {
    content: ""; position: absolute; left: 3px; top: 4px;
    width: 0; height: 12px; border-left: 1.5px dashed var(--datum);
  }
}

/* A footnote under the rod. The rod is a JOB-level indicator: a position
   opened after the first cheque, or written at a rate other than the project
   default, makes the payout datum approximate for that position. R14 keeps
   the job-level rod and says so in prose rather than drawing a mark per
   position. */
.rod-caveat {
  margin: 14px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.55;
  max-width: 88ch;
}
.rod-caveat b { color: var(--ink-2); font-weight: 600; }

/* --- The split bar (shared by every proportion on every page) ----------- */

.split { display: flex; height: 22px; border: 1px solid var(--rule-2);
         background: var(--track); overflow: hidden; }
.split.sm { height: 13px; }
.split.xs { height: 9px; }
.seg { height: 100%; min-width: 0; }

.f-prin { background-color: var(--c-prin); }
.f-ret {
  background-color: var(--c-ret);
  background-image: repeating-linear-gradient(45deg,
      var(--tex) 0 2px, transparent 2px 5px);
}
.f-biz {
  background-color: var(--c-biz);
  background-image: radial-gradient(var(--dot) .9px, transparent 1px);
  background-size: 4px 4px;
}
.f-bill { background-color: var(--c-bill); }
.f-out {
  background-color: transparent;
  background-image: repeating-linear-gradient(-45deg,
      var(--c-out) 0 1px, transparent 1px 5px);
}

.legend {
  display: flex; gap: 26px; flex-wrap: wrap; margin-top: 15px; font-size: 12.5px;
}
.legend > div { display: flex; gap: 9px; align-items: flex-start; }
.key {
  width: 15px; height: 15px; flex: none; margin-top: 3px;
  border: 1px solid var(--rule-2);
}
.key.f-empty { background: var(--track); }
.legend .k-lab {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.legend .k-val { display: block; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.legend .k-pct { color: var(--muted); font-weight: 400; font-size: 12px; }

/* Every bar states which scale it is drawn against. Three are in play and
   mixing them is how a chart lies: against the CONTRACT (the rod), against
   the LARGEST IN THIS TABLE, and against ITS OWN TOTAL. This label is not
   decoration -- drop it and the page becomes misleading (R14.3). */
.scale-note {
  display: block; font-weight: 400; letter-spacing: .02em; text-transform: none;
  font-size: 10.5px; opacity: .85; white-space: normal;
  max-width: 118px; margin-left: auto;
}
th:not(.num) .scale-note { margin-left: 0; }

/* --- Figure grid: the header of a statement ----------------------------- */

.figures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 0;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 3px; box-shadow: var(--shadow); margin-bottom: 22px;
}
/* Borders live on the cells, not on a background showing through a 1px gap:
   a fractional device pixel makes a gap-drawn grid shimmer at some zooms. */
.figure {
  padding: 14px 18px 16px;
  border-left: 1px solid var(--rule); border-top: 1px solid var(--rule);
  margin: -1px 0 0 -1px;
}
.figure dt {
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 5px;
}
.figure dd {
  margin: 0; font-weight: 600; font-size: 21px; letter-spacing: -0.02em;
  line-height: 1.15;
}
.figure dd.sm { font-size: 17px; }
/* A prose note inside a figure cell must WRAP. The number above it stays on
   one line; the sentence explaining it does not. */
.why {
  margin-top: 6px; font-size: 11.5px; color: var(--muted);
  line-height: 1.45; white-space: normal;
}
.why b { color: var(--ink-2); font-weight: 600; }

/* --- Definition rows for flat facts ------------------------------------- */

/* A grid, not a stack: a dozen figures one under the other read as a page of
   repetition (owner, 2026-08-27); four to a row they read as a panel. */
.facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px 26px;
}
.facts dt, dl.facts dt {
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}
.facts dd, dl.facts dd { margin: 2px 0 0; font-weight: 600; }

.group { margin-bottom: 26px; }
.spacer { height: 10px; }

/* --- Tables ------------------------------------------------------------- */

/* Two cues that a wide table is cut, because "$384" is a well-formed number
   and a reader has no way to know the rest of it scrolled off. The scrims
   are painted with background-attachment: local, so they only show on the
   side that actually has more content. */
.scroll, .scroller {
  overflow-x: auto; overflow-y: hidden;
  background:
    var(--scrim-l) left / 24px 100% no-repeat,
    var(--scrim-r) right / 24px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, var(--edge), transparent) left / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, var(--edge), transparent) right / 12px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
  border: 1px solid var(--rule); border-radius: 3px;
  background-color: var(--surface);
  margin-bottom: 20px;
}
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
thead th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  padding: 11px 10px; border-bottom: 1px solid var(--rule-2);
  vertical-align: bottom; white-space: nowrap;
}
thead th.num, thead th.r { text-align: right; }
thead th small {
  display: block; font-weight: 400; letter-spacing: .02em;
  text-transform: none; font-size: 10.5px; opacity: .85;
  white-space: normal; max-width: 118px; margin-left: auto;
}
tbody td { padding: 9px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-2); }
tfoot td {
  padding: 11px 10px; border-top: 1.5px solid var(--rule-2);
  font-weight: 600; font-size: 13.5px; background: var(--surface-2);
}
.name, .who { font-weight: 600; min-width: 168px; }
.name small, .who small, .name .small, .who .small {
  display: block; font-weight: 400; font-size: 11.5px; color: var(--muted);
}
.date { white-space: nowrap; color: var(--ink-2); }
.tx, .number { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.sub-note { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; }
.wide { width: 100%; }

/* A micro-bar under a figure in a table cell. It is drawn against the scale
   its column header names, and it never replaces the figure -- the number is
   always printed above it. */
.cell-bar { display: block; text-align: right; }
.cell-bar .split { margin-top: 5px; width: 104px; margin-left: auto; }

/* Sub-tables: a payment's split, nested inside the payments table. */
table.inner { font-size: 13px; background: var(--surface-2); margin: 2px 0 6px; }
table.inner thead th {
  padding: 8px 9px; border-bottom: 1px solid var(--rule);
  white-space: normal; /* headers may wrap: the split must fit without x-scroll */
}
table.inner tbody td { padding: 7px 9px; }
table.inner tfoot td { padding: 9px; background: transparent; }
table.inner caption { caption-side: top; }
/* Below the design width the split must still fit whole -- the owner's rule
   (2026-08-28): no project box may scroll sideways. Tighter cells, same figures. */
@media (max-width: 1440px) {
  table.inner { font-size: 12.5px; }
  table.inner thead th, table.inner tbody td { padding: 6px 6px; }
}

/* --- Small marks -------------------------------------------------------- */

/* Status is a SHAPE first and a colour second, so it survives greyscale:
   filled circle repaid, hatched square part-paid, open square active. */
.st {
  display: inline-flex; align-items: flex-start; gap: 6px; font-size: 11.5px;
  font-weight: 600; margin-top: 3px; line-height: 1.3; color: var(--ink-2);
}
.st::before { content: ""; width: 9px; height: 9px; flex: none; margin-top: 2px; }
.st.repaid::before  { background: var(--c-prin); border-radius: 50%; }
.st.partial::before {
  background-color: var(--c-ret);
  background-image: repeating-linear-gradient(45deg, var(--tex) 0 1.5px, transparent 1.5px 3px);
}
.st.active::before  { background: transparent; border: 1.5px solid var(--c-out); }
/* Void and written off: a crossed square. A fourth SHAPE rather than a fourth
   colour, so it is still distinguishable with every hue removed. */
.st.void::before {
  background: transparent; border: 1.5px solid var(--muted);
  background-image:
    linear-gradient(45deg,  transparent 44%, var(--muted) 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--muted) 44% 56%, transparent 56%);
}

.tag {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 6px; border: 1px solid var(--rule-2); border-radius: 2px;
  color: var(--muted); white-space: nowrap;
}
.tag.exception { color: var(--warn); border-color: var(--warn); background: var(--warn-bg); }

/* The Statement | History switch on an investor's pages (R39b, developer
   2026-10-12: "make this toggle clearer that it's a toggle"). Both halves
   are always drawn and the current one is filled, so it reads as a two-way
   switch and not as a lone link beside a label. */
.seg {
  display: inline-flex; border: 1px solid var(--rule-2); border-radius: 3px;
  overflow: hidden; vertical-align: middle;
}
.seg a {
  display: inline-block; padding: 5px 12px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  text-decoration: none; border-left: 1px solid var(--rule-2); background: var(--surface);
}
.seg a:first-child { border-left: 0; }
.seg a:not(.on):hover { background: var(--surface-2); color: var(--ink); }
.seg a.on { background: var(--ink); color: var(--surface); cursor: default; }

/* Sections that start folded (R42d): the heading is the handle. */
details.fold { margin: 22px 0; }
details.fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
details.fold > summary::-webkit-details-marker { display: none; }
/* The marker is a real triangle (the escape had lost its backslash and drew
   a control character -- Joe's snip of 2026-11-05) and the heading carries
   a visible open / close pill, never hover-only (R58: "needs to be clear
   that you can open it"). */
details.fold > summary::before { content: "\25B8"; color: var(--muted); font-size: 13px; width: 12px; }
details.fold[open] > summary::before { content: "\25BE"; }
details.fold > summary::after, .fold-hint {
  content: "open"; font-size: 10px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); border: 1px solid var(--rule-2);
  border-radius: 999px; padding: 2px 8px; margin-left: 6px; line-height: 1.4; white-space: nowrap;
}
details.fold[open] > summary::after { content: "close"; }
details.fold > summary:hover::after, details.walk > summary:hover .fold-hint { background: var(--surface-2); color: var(--ink); }

/* The walk's lines open into their parts (R58). */
details.walk > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
details.walk > summary::-webkit-details-marker { display: none; }
details.walk > summary::before { content: "\25B8"; color: var(--muted); font-size: 12px; width: 10px; }
details.walk[open] > summary::before { content: "\25BE"; }
details.walk .fold-hint { font-weight: 500; letter-spacing: .06em; text-transform: none; font-size: 10.5px; }
table.walk-detail { width: auto; margin: 6px 0 4px 16px; font-size: 12.5px; }
table.walk-detail td { padding: 3px 12px 3px 0; border-bottom: 0; vertical-align: baseline; }
table.walk-detail tr.walk-head td { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
details.fold > summary h2 { margin: 0; }

/* The as-of box (R43): a date, Show, and a way back to today. */
form.asof { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
form.asof label { font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
form.asof input[type="date"], form.asof input[type="month"] { font: inherit; font-size: 12.5px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule-2); border-radius: 2px; padding: 3px 6px; }
form.asof button { font: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--surface); background: var(--ink); border: 1px solid var(--ink); border-radius: 2px; padding: 4px 10px; cursor: pointer; }
form.asof a { color: var(--muted); }

/* The legacy single-fill bar, kept for callers that have not moved to the
   segmented .split yet. */
.bar {
  display: block; height: 9px; background: var(--track);
  border: 1px solid var(--rule-2); overflow: hidden;
}
.bar > span { display: block; height: 100%; background: var(--c-prin); }
.bar.full > span { background: var(--c-bill); }

/* --- Notices ------------------------------------------------------------ */

.notice {
  border: 1px solid var(--rule-2); border-left: 3px solid var(--c-bill);
  background: var(--surface); border-radius: 3px;
  padding: 14px 18px; margin-bottom: 20px;
  font-size: 13px; color: var(--ink-2); line-height: 1.6;
}
.notice b { color: var(--ink); font-weight: 600; }
.notice.exception { border-left-color: var(--warn); }
.verdict { font-weight: 600; }

/* --- Filters ------------------------------------------------------------ */

.filters {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 3px;
  padding: 14px 18px; margin-bottom: 20px; font-size: 13px;
}
.filters label {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.filters select, .filters input {
  font: inherit; font-size: 13px; padding: 6px 8px;
  border: 1px solid var(--rule-2); border-radius: 2px;
  background: var(--surface); color: var(--ink);
}
.filters button {
  font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 14px;
  border: 1px solid var(--c-prin); border-radius: 2px;
  background: var(--c-prin); color: var(--surface); cursor: pointer;
}

/* --- Pagination --------------------------------------------------------- */

.pager {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  margin: 18px 0 0; font-size: 13px; color: var(--muted);
}

/* --- Ledger transaction blocks ------------------------------------------ */

.txn {
  border: 1px solid var(--rule); border-radius: 3px;
  background: var(--surface); margin-bottom: 12px;
}
.txn-head {
  padding: 12px 16px; border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
  display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap;
  font-size: 13px;
}
.txn-head .memo { font-weight: 600; }
.txn table { font-size: 13px; }

/* Cheque blocks -- a receipt and the split it produced. */
.cheque { border: 1px solid var(--rule); border-radius: 3px; margin-bottom: 12px; }
.cheque > summary {
  list-style: none; cursor: pointer; padding: 13px 16px;
  display: grid; grid-template-columns: 132px minmax(0,1fr) 158px;
  gap: 18px; align-items: center;
}
.cheque > summary::-webkit-details-marker { display: none; }
.cheque > summary::marker { content: ""; }
.cheque > summary:hover { background: var(--surface-2); }
.cheque[open] > summary { border-bottom: 1px solid var(--rule); background: var(--surface-2); }
.cq-when { font-size: 13px; }
.cq-when b { display: block; font-weight: 600; }
.cq-when span { color: var(--muted); font-size: 11.5px; }
.cq-bar .rail { display: block; }
.cq-bar .split { height: 16px; width: 100%; }
.cq-bar .cap {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 11px; color: var(--muted); margin-top: 5px;
}
.cq-amt { text-align: right; }

/* Corp statement: month rows that open into their days (R29). Same details
   idiom as .cheque; the summary IS the table row. */
.corp-months { border: 1px solid var(--rule); border-radius: 3px; margin-bottom: 20px; }
.corp-month-head, .corp-month > summary {
  display: grid; grid-template-columns: minmax(150px,1.2fr) repeat(4, minmax(110px,1fr));
  gap: 14px; align-items: baseline; padding: 10px 16px;
}
.corp-month-head {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--rule); background: var(--surface-2);
}
.corp-month-head .num, .corp-month > summary .num {
  text-align: right; font-variant-numeric: tabular-nums;
}
.corp-month > summary {
  list-style: none; cursor: pointer; font-size: 13.5px;
  border-bottom: 1px solid var(--rule);
}
.corp-month-name::before {
  content: "B8"; display: inline-block; margin-right: 8px;
  color: var(--muted); font-size: 11px; transition: transform .12s ease;
}
.corp-month[open] .corp-month-name::before { transform: rotate(90deg); }
.corp-month:last-child > summary { border-bottom: 0; }
.corp-month > summary::-webkit-details-marker { display: none; }
.corp-month > summary::marker { content: ""; }
.corp-month > summary:hover { background: var(--surface-2); }
.corp-month[open] > summary {
  background: var(--surface-2); border-bottom: 1px solid var(--rule); font-weight: 600;
}
.corp-month .chip {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-prin); border: 1px solid var(--c-prin); border-radius: 2px;
  padding: 1px 6px; margin-left: 8px; vertical-align: 1px;
}
.corp-days { font-size: 12.5px; margin: 0; }
.corp-days th, .corp-days td { padding: 5px 16px; }
.corp-day-move { background: var(--surface-2); font-weight: 600; }
.corp-month .derivation {
  font-size: 12px; color: var(--muted); margin: 8px 16px 12px; line-height: 1.5;
}
.cq-amt b {
  display: block; font-weight: 600; font-size: 16px; letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.cq-amt span { font-size: 11.5px; color: var(--muted); }

/* --- Filmstrip (gross billings, one rod per cheque) --------------------- */

td.strip-cell { min-width: 190px; }
.strip { position: relative; padding-top: 2px; }
.strip .split { height: 11px; }
.strip i {
  position: absolute; top: 0; width: 0; height: 15px;
  border-left: 1.5px dashed var(--datum); opacity: .85;
}

/* --- Ledger sparkline --------------------------------------------------- */

.spark { width: 100%; height: 132px; display: block; overflow: visible; }
.spark polyline {
  fill: none; stroke: var(--c-prin); stroke-width: 1.5px;
  stroke-linejoin: round; stroke-linecap: round;
  /* The viewBox is stretched on both axes independently, so without this the
     stroke would be drawn thick horizontally and hairline vertically. */
  vector-effect: non-scaling-stroke;
}
.spark .floor { stroke: var(--rule-2); stroke-width: 1px; stroke-dasharray: 3 3; }
.spark-top {
  display: flex; justify-content: space-between; font-size: 10.5px;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.spark-top span:last-child {
  font-weight: 600; letter-spacing: .02em;
  text-transform: none; font-variant-numeric: tabular-nums;
}
.spark-ax {
  display: flex; justify-content: space-between; font-size: 11px;
  color: var(--muted); margin-top: 8px; border-top: 1px solid var(--rule);
  padding-top: 6px;
}

/* --- The cash identity, drawn as a running balance ---------------------- */

/* ONE quantity is drawn: the balance after each line, every bar left-anchored
   on the one scale, so a subtraction is visibly SHORTER than the line above
   it and the closing bar lands level with the last movement. The movements
   are printed, not drawn -- a second bar per row is what made this panel a
   specialist's chart. The dashed tick is where the balance stood before that
   line; it is the mark the rod and the filmstrip already use, not a new
   meaning (R14.2). Money is right-aligned and tabular in both money columns
   so the balances read straight down as one column. */

.fall { display: grid; gap: 2px; }

.fall-row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) 150px minmax(120px, 2.4fr) 158px;
  gap: 18px; align-items: center; padding: 7px 0;
}

.fall-head {
  padding: 0 0 7px; border-bottom: 1px solid var(--rule);
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); align-items: end;
}
.fall-head .fall-delta, .fall-head .fall-run { text-align: right; }
/* The scale the bars are drawn against, stated where the bars are. R14.3:
   this labelling is not decoration -- drop it and the column misleads. */
.fall-head small {
  display: block; font-weight: 400; letter-spacing: .02em;
  text-transform: none; font-size: 11px; line-height: 1.35; padding-top: 3px;
}

.fall-lab { font-size: 13.5px; color: var(--ink-2); min-width: 0; }
.fall-lab small {
  display: block; color: var(--muted); font-size: 11.5px; line-height: 1.4;
}

.fall-delta {
  text-align: right; font-size: 14px; font-weight: 600; color: var(--ink-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sign { color: var(--muted); font-weight: 400; }
.fall-none { color: var(--muted); font-weight: 400; letter-spacing: .04em; }
.fall-eq { color: var(--muted); font-weight: 400; font-size: 15px; }

.fall-track {
  position: relative; height: 20px; min-width: 0;
  background: var(--track); border: 1px solid var(--rule-2);
}
/* Left-anchored, in flow: there is no `left` to get wrong any more. The
   min-width keeps a real but tiny balance visible; a balance of nothing draws
   .fall-nil instead, so 2px never stands for zero. */
.fall-bar { display: block; height: 100%; min-width: 2px; }
.fall-was {
  position: absolute; top: -4px; bottom: -4px; width: 0; margin-left: -1px;
  border-left: 1.5px dashed var(--datum); opacity: .8; z-index: 2;
}
.fall-nil {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: var(--muted); letter-spacing: .04em;
}

.fall-run {
  text-align: right; font-weight: 600; font-size: 15px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Column names live in the head row at desktop width; below 760 the head is
   gone and these carry them inline instead. display:none, so a screen reader
   is never read both. */
.fall-tag { display: none; }

/* The closing line. Heavy rule, bigger figure, taller track -- but the bar
   inside it ends on exactly the same vertical as the line above, which is the
   identity closing and the whole point of the panel (Q70). */
.fall-row.total {
  border-top: 2px solid var(--ink-2); margin-top: 7px; padding-top: 13px;
}
.fall-row.total .fall-lab { color: var(--ink); font-weight: 600; }
.fall-row.total .fall-track { height: 26px; border-color: var(--ink-2); }
.fall-row.total .fall-run { font-size: 20px; letter-spacing: -.02em; }

@media (max-width: 1040px) {
  .fall-row {
    grid-template-columns: minmax(0, 1fr) 128px minmax(90px, 1.6fr) 138px;
    gap: 12px;
  }
  .fall-delta, .fall-run { font-size: 13.5px; }
  .fall-row.total .fall-run { font-size: 18px; }
}

/* Below 760 the row becomes three lines: name and balance, then the movement,
   then the bar full width. The balances still read straight down the right
   edge, which is the reason the balance stays on line 1 rather than following
   the bar. */
@media (max-width: 760px) {
  .fall-head { display: none; }
  .fall-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 14px; padding: 11px 0;
    border-bottom: 1px solid var(--rule);
  }
  .fall-lab   { grid-column: 1; grid-row: 1; }
  .fall-run   { grid-column: 2; grid-row: 1; align-self: start; }
  .fall-delta { grid-column: 1 / -1; grid-row: 2; text-align: left; }
  .fall-track { grid-column: 1 / -1; grid-row: 3; margin-top: 5px; }
  .fall-tag {
    display: inline; margin-right: 6px; font-size: 10.5px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  }
  .fall-row.total { border-bottom: 0; }
  .fall-row.total .fall-run { font-size: 19px; }
}

@media (max-width: 430px) {
  .fall-lab { font-size: 13px; }
  .fall-run { font-size: 14.5px; }
  .fall-row.total .fall-run { font-size: 17px; }
}

@media (max-width: 760px) {
  .cheque > summary { grid-template-columns: minmax(0,1fr) auto; gap: 10px 14px; }
  .cq-bar { grid-column: 1 / -1; order: 3; }
}

/* --- Derivation notes --------------------------------------------------- */

/* The prose that explains how a page's figures were arrived at. It is the
   normative explanation of the rules, so it is readable, not fine print --
   but it is COLLAPSED by default (owner, 2026-08-28: the figures must fit
   one screen; the honesty is one click away, not deleted). */
.derivations {
  font-size: 13px; color: var(--ink-2); line-height: 1.62;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 3px;
  padding: 0; margin-bottom: 20px; max-width: 92ch;
}
.derivations > summary {
  list-style: none; cursor: pointer; padding: 13px 22px;
  font-family: var(--font-display, inherit); font-weight: 600; font-size: 14px;
  color: var(--ink);
}
.derivations > summary::-webkit-details-marker { display: none; }
.derivations > summary::marker { content: ""; }
.derivations > summary::after {
  content: " +"; color: var(--muted); font-weight: 700;
}
.derivations[open] > summary::after { content: " \2212"; }
.derivations > summary:hover { background: var(--surface-2); }
.derivations[open] > summary { border-bottom: 1px solid var(--rule); }
.derivations > ul, .derivations > ol, .derivations > p {
  padding-left: 42px; padding-right: 22px; margin-top: 14px;
}
.derivations > p { padding-left: 22px; }
.derivations > *:last-child { margin-bottom: 0; padding-bottom: 18px; }
.derivations h2 { margin-top: 0; }
.derivations p { margin: 0 0 11px; }
.derivations p:last-child, .derivations li:last-child { margin-bottom: 0; }
.derivations ul, .derivations ol { margin: 0 0 11px; padding-left: 20px; }
.derivations li { margin-bottom: 9px; }
.derivations b, .derivations dfn { color: var(--ink); font-weight: 600; font-style: normal; }

/* --- Portfolio roll-up -------------------------------------------------- */

/* The investor page already has a figures grid and a positions table, and the
   deployed/held split reads better as one bar than as two more numbers in a
   row of six. */
.portfolio {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 3px;
  padding: 18px 20px 20px; margin-bottom: 22px;
}
.portfolio-head {
  display: flex; align-items: flex-start; gap: 26px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.portfolio-head .lede { flex: 1 1 260px; min-width: 0; }
/* The portfolio's deployed/held block. NOT called .split: that name belongs to
   direction C's segmented bar, and a container sharing it inherits
   display:flex, a 22px height and overflow:hidden, which stacks its label, bar
   and note on top of one another. */
.portfolio-split { margin-top: 4px; min-width: 0; flex: 1 1 320px; }
.portfolio-split .split-label {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
  line-height: 1.4;
}
.portfolio-split .split-label b {
  font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ink);
}
.portfolio-split .split-label span:last-child { text-align: right; }
.portfolio-note, .split-note {
  margin-top: 9px; font-size: 12.5px; color: var(--muted); line-height: 1.55;
}

/* --- Notes -------------------------------------------------------------- */

.notes { font-size: 13px; color: var(--ink-2); line-height: 1.62; }
.notes p { margin: 0 0 11px; }
.notes p:last-child { margin-bottom: 0; }
.notes b, .notes dfn { color: var(--ink); font-weight: 600; font-style: normal; }

/* No entrance animation on any bar, deliberately. A bar that grows in is a
   bar that is briefly showing the WRONG number, and this was caught in the
   mockup rendering an 84% bar at 33% mid-flight. On a page whose whole job
   is to be right at a glance that is not a trade worth making (R14). */

@media print {
  .tabs, .masthead-note { display: none; }
  .panel, .figures, .scroll, .scroller { break-inside: avoid; box-shadow: none; }
}

/* --- Sign in ------------------------------------------------------------ */

/* The one page shown to somebody who has not proved they may see the book, so
   it carries no nav, no figures and no basis chip -- nothing that describes
   what is behind it. */
.signin-main {
  max-width: 420px; margin: 0 auto; padding: clamp(40px, 12vh, 110px) 24px 60px;
}
.signin-card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 3px; box-shadow: var(--shadow); padding: 30px 30px 34px;
}
.signin-card .wordmark { display: inline-flex; margin-bottom: 26px; }
.signin-card h1 { font-size: 26px; margin-bottom: 6px; }
.signin-card .sub { margin: 0 0 22px; }
.signin-card .notice { margin-bottom: 20px; padding: 12px 15px; font-size: 12.5px; }

.signin-form { display: grid; gap: 6px; }
.signin-form label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); margin-top: 12px;
}
.signin-form input {
  font: inherit; font-size: 15px; padding: 10px 12px;
  border: 1px solid var(--rule-2); border-radius: 2px;
  background: var(--surface); color: var(--ink); width: 100%;
}
.signin-form input:focus-visible {
  outline: 2px solid var(--c-prin); outline-offset: 1px; border-color: var(--c-prin);
}
.signin-form button {
  font: inherit; font-size: 14px; font-weight: 600; letter-spacing: .02em;
  margin-top: 24px; padding: 11px 16px; width: 100%;
  border: 1px solid var(--c-prin); border-radius: 2px;
  background: var(--c-prin); color: var(--surface); cursor: pointer;
}
.signin-form button:hover { filter: brightness(1.08); }
.signin-foot {
  margin: 20px 2px 0; font-size: 12px; color: var(--muted); line-height: 1.6;
}
.signin-foot b { color: var(--ink-2); font-weight: 600; }

/* --- Signed-in chrome --------------------------------------------------- */

.whoami {
  margin-left: auto; display: flex; align-items: baseline; gap: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.whoami form { margin: 0; }
.whoami button {
  font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.whoami button:hover { color: var(--ink); }

/* --- record forms --- */

/* The write screens (WRITE_SCREENS_DESIGN 6, 11). Everything below is drawn
   from the tokens already defined at the top of this sheet -- no new hex.
   The input rules generalize the .signin-form ones: same face, same focus
   ring, applied to every control inside a .record-form. */

.record-form { display: grid; gap: 6px; max-width: 460px; }
.record-form label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); margin-top: 12px;
}
.record-form input, .record-form select, .record-form textarea {
  font: inherit; font-size: 15px; padding: 10px 12px;
  border: 1px solid var(--rule-2); border-radius: 2px;
  background: var(--surface); color: var(--ink); width: 100%;
}
.record-form textarea { resize: vertical; }
.record-form input:focus-visible,
.record-form select:focus-visible,
.record-form textarea:focus-visible {
  outline: 2px solid var(--c-prin); outline-offset: 1px; border-color: var(--c-prin);
}
.record-form button {
  font: inherit; font-size: 14px; font-weight: 600; letter-spacing: .02em;
  margin-top: 24px; padding: 11px 16px; width: 100%;
  border: 1px solid var(--c-prin); border-radius: 2px;
  background: var(--c-prin); color: var(--surface); cursor: pointer;
}
.record-form button:hover { filter: brightness(1.08); }
.field-help {
  font-size: 12px; color: var(--muted); line-height: 1.55; margin-top: 2px;
}
.field-static {
  font-size: 14px; font-weight: 600; color: var(--ink-2); padding: 4px 0 2px;
}
.field-static .live-figure { color: var(--c-prin); }
.field-static.dim { font-weight: 500; font-size: 13px; }

/* Checkbox and radio rows: normal-case text beside a natural-size control,
   overriding the uppercase label and full-width input rules above. */
.record-form .check-label {
  display: flex; align-items: baseline; gap: 9px; margin-top: 12px;
  font-size: 14px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--ink); cursor: pointer; line-height: 1.5;
}
.record-form .check-label input[type="checkbox"],
.record-form .check-label input[type="radio"] {
  width: auto; padding: 0; margin: 0; flex: none;
  accent-color: var(--c-prin); transform: translateY(1px);
}
.record-form .radio-group {
  border: 1px solid var(--rule-2); border-radius: 2px;
  padding: 4px 14px 14px; margin: 12px 0 0;
}
.record-form .radio-group legend {
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); padding: 0 6px;
}
.record-form .radio-group .check-label { margin-top: 8px; }

/* Row-level actions on the logins screen: a small quiet button inside a
   table cell, never the full-width post button. */
.inline-form { display: inline; }
.inline-form .btn-small {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 4px 10px; margin: 0; width: auto;
  border: 1px solid var(--rule-2); border-radius: 2px;
  background: var(--surface); color: var(--ink-2);
}
.inline-form .btn-small:hover { border-color: var(--c-prin); color: var(--c-prin); }

/* The book banner. Demo is quiet chrome; the REAL book borrows the warn
   tokens and bolds -- weight and border do the shouting, never an icon. */
.book-banner {
  border: 1px solid var(--rule-2); border-left: 3px solid var(--rule-2);
  border-radius: 3px; padding: 13px 17px; margin-bottom: 20px;
  font-size: 13px; color: var(--ink-2); line-height: 1.6;
}
.book-banner b { color: var(--ink); font-weight: 700; }
.book-banner.demo { background: var(--surface-2); }
.book-banner.real {
  background: var(--warn-bg); border-left-color: var(--warn);
  border-color: var(--warn); font-weight: 600;
}
.book-banner.real b { color: var(--warn); }

/* The confirm card: the figures the operator is about to make true. */
.confirm-card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 3px; box-shadow: var(--shadow);
  padding: 20px 22px 24px; margin-bottom: 20px; max-width: 640px;
}
.confirm-card h2 { margin-top: 0; }
.confirm-table {
  width: 100%; margin: 12px 0 4px; border-collapse: collapse; font-size: 13.5px;
}
.confirm-table th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rule);
  white-space: nowrap; vertical-align: top; width: 1%;
}
.confirm-table td {
  padding: 8px 0; border-bottom: 1px solid var(--rule);
  font-weight: 600; text-align: right;
}
.confirm-table td .dim { font-weight: 400; font-size: 12px; }
.confirm-card .derivation {
  font-size: 12.5px; color: var(--muted); line-height: 1.6; margin: 12px 0 0;
}
.confirm-form { margin-top: 18px; }
.confirm-form .edit-link {
  display: block; text-align: center; margin-top: 12px; font-size: 13px;
}

/* The posting button names the book. The real one wears the warn tokens so
   the click that writes to the real ledger never looks routine. */
.btn-post {
  font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .02em;
  padding: 12px 16px; width: 100%;
  border: 1px solid var(--c-prin); border-radius: 2px;
  background: var(--c-prin); color: var(--surface); cursor: pointer;
}
.btn-post:hover { filter: brightness(1.08); }
.btn-post.real {
  background: var(--warn); border-color: var(--warn); color: var(--surface);
}

/* The index: four action cards. */
.record-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; margin-bottom: 20px;
}
.record-card {
  display: block; background: var(--surface); border: 1px solid var(--rule);
  border-radius: 3px; box-shadow: var(--shadow); padding: 18px 20px 20px;
  color: var(--ink); text-decoration: none;
}
.record-card:hover { border-color: var(--c-prin); }
.record-card h2 { margin: 0 0 8px; font-size: 16px; }
.record-card p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.55; }

/* --- the real-book strip ------------------------------------------------ */

/* Full-width, on every page of an instance serving anything that is not the
   demo file. Warn tokens, both themes; no icon -- weight and colour carry it. */
.book-strip {
  background: var(--warn-bg); color: var(--warn);
  border-bottom: 2px solid var(--warn);
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; text-align: center;
  padding: 7px 24px;
}

/* --- The month-by-month schedule (owner, 2026-08-27) --------------------- */

/* The rule after the term month is drawn with the datum ink, not the warn
   red: it marks a regime change the deal always had, not an error. */
.term-mark td {
  border-top: 2px solid var(--datum);
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  padding-top: 6px; padding-bottom: 8px;
}
details.sched { margin: 0 0 10px; }
details.sched > summary {
  cursor: pointer; font-weight: 600; font-size: 13.5px;
  padding: 8px 10px; border: 1px solid var(--rule); border-radius: 3px;
  background: var(--surface);
}
details.sched[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
details.sched > .scroll {
  border: 1px solid var(--rule); border-top: 0; padding: 4px 10px 8px;
  background: var(--surface);
}

/* A note under a figure inside a right-aligned number cell. .num cells are
   nowrap so columns of money never break -- which turned a sentence-length
   note into one enormous line that shoved the whole earnings table past its
   wrapper (owner: "did not land nicely", 2026-08-27). The note wraps,
   stays with its figure, and cannot widen the column past a readable
   measure. */
td.num .cellnote, .cellnote {
  white-space: normal;
  font-size: 11.5px; color: var(--muted); line-height: 1.45;
  max-width: 36ch; margin-left: auto; text-align: right;
}

/* --- Documents (R44): the field editor and the signing page ------------- */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
@media (max-width: 900px) { .editor { grid-template-columns: 1fr; } }
.editor-pages { min-width: 0; }
.pdf-page { position: relative; width: 100%; margin: 0 0 18px; background: #fff; border: 1px solid var(--rule);
  box-shadow: var(--shadow); cursor: crosshair; }
.pdf-page canvas { display: block; width: 100%; height: auto; }
.pdf-page-no { position: absolute; top: 6px; right: 8px; font-size: 10px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.fbox { position: absolute; box-sizing: border-box; border: 1.5px dashed var(--warn); background: rgba(251, 241, 233, .55);
  color: var(--warn); font-size: 10px; font-weight: 700; padding: 2px 4px; overflow: hidden; white-space: nowrap; cursor: pointer; }
.fbox.business { border-color: var(--c-prin); color: var(--c-prin); background: rgba(10, 79, 86, .08); }
.fbox.on { outline: 2px solid var(--ink); }
.fbox.sign-here { cursor: default; }
.editor-side { position: sticky; top: 12px; }
.field-list { display: grid; gap: 6px; max-height: 60vh; overflow: auto; }
.field-row { border: 1px solid var(--rule); border-radius: 3px; padding: 8px 10px; background: var(--surface); cursor: pointer; display: grid; gap: 6px; }
.field-row.on { border-color: var(--ink); }
.field-row label { font-size: 11px; color: var(--muted); display: grid; gap: 3px; }
.field-row input, .field-row select { font: inherit; font-size: 12.5px; padding: 4px 6px; border: 1px solid var(--rule-2);
  border-radius: 2px; background: var(--surface); color: var(--ink); }
.field-row .xy { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.field-row button { font: inherit; font-size: 11px; padding: 4px 8px; }
.editor-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 14px 0; }
.editor-actions form.inline { display: inline-flex; gap: 8px; align-items: end; max-width: none; }
.editor-actions button, .sign-form button { font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--surface); background: var(--ink); border: 1px solid var(--ink); border-radius: 2px;
  padding: 7px 12px; cursor: pointer; }
.record-form label.check { display: flex; gap: 8px; align-items: start; font-size: 13px; color: var(--ink); }
.mail-body { white-space: pre-wrap; font-size: 12px; max-width: 520px; }
.sign-main { max-width: 900px; margin: 24px auto; padding: 0 16px; }
.sign-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 3px; box-shadow: var(--shadow); padding: 22px 24px; }
.sign-card h1 { margin-top: 4px; }
.sign-form { margin-top: 18px; }
.decline { margin-top: 18px; }