/* Trading Project board - Stratalytic house layer (Monolight + Work Sans, #0700E8 / #F1F1F3 /
   #17181C), in the house visual language so it reads as part of the same family. It shares no
   code and no data with anything: this file is its own, and tests/test_render.py holds the line.

   World: an instrument sheet. Grey is the ground, white panels are the sheets, and colour only
   ever means a verdict - green in tolerance, red out of it, amber unsettled, grey-dashed not
   measured. A colour nobody acts on is a bug in this board.

   Contrast is computed, not guessed: every text pair clears WCAG AA 4.5:1 and every lamp, rule
   and tick clears 3:1 against the grey ground (#F1F1F3), which is the stricter of the two. */

:root {
  color-scheme: light;
  --bg: #F1F1F3;
  --surface: #FFFFFF;
  --surface-2: #F7F7F9;
  --ink: #17181C;
  --ink-2: #45464D;
  --ink-3: #63646B;
  --line: #DCDDE2;
  --line-2: #ECEDF0;
  --line-3: #85868E;
  --blue: #0700E8;
  --blue-ink: #0600B8;
  --blue-soft: #E7E6FD;
  --on-blue: #FFFFFF;
  --ok: #149242;   --ok-ink: #13773A;   --ok-soft: #E3F5E9;
  --warn: #E66206; --warn-ink: #A84D06; --warn-soft: #FDEBDC;
  --crit: #C52020; --crit-ink: #B91C1C; --crit-soft: #FBE3E3;
  --off: #898A93;  --off-ink: #63646B;  --off-soft: #EEEEF1;
  --pos: #13773A;  --neg: #B91C1C;
  --display: "Monolight", "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius: 4px;
  --gutter: 24px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--body);
       -webkit-text-size-adjust: 100%; scrollbar-color: var(--line-3) var(--bg); }
body { margin: 0; min-height: 100vh; background: var(--bg); }
::selection { background: var(--blue); color: var(--on-blue); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; }
a { color: var(--blue-ink); text-decoration: underline; text-decoration-thickness: 1px;
    text-underline-offset: 0.18em; }
a:hover { color: var(--blue); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-3); border: 3px solid var(--bg); border-radius: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
button { font: inherit; }
a, button { touch-action: manipulation; }
.skip { position: absolute; left: 16px; top: -48px; z-index: 10; padding: 8px 12px;
        background: var(--surface); border: 1px solid var(--line-3); border-radius: var(--radius);
        color: var(--ink); }
.skip:focus-visible { top: 12px; }
#content:focus { outline: none; }  /* a landing point for the skip link, not a control */
svg { display: block; }

h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -0.01em; margin: 0;
             text-wrap: balance; }
h2 { font-size: 1.25rem; line-height: 1.2; }
h3 { font-size: 1rem; line-height: 1.25; }
p { margin: 0; }

.num, td.num, th.num { font-variant-numeric: tabular-nums lining-nums; }
.lbl { font-family: var(--display); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em;
       text-transform: uppercase; color: var(--ink-3); }
.lbl--block { display: block; margin-bottom: 8px; }
.faint { color: var(--ink-3); }
.small { font-size: 0.8125rem; }
.pos { color: var(--pos); } .neg { color: var(--neg); }

/* ---------- page frame ---------- */
.sheet { max-width: 1180px; margin: 0 auto; padding: 0 32px 72px; }
.crumb { display: flex; align-items: center; gap: 8px; padding: 22px 0 0; font-size: 0.8125rem;
         color: var(--ink-3); }
.crumb a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid transparent; }
.crumb a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- masthead ---------- */
.mast { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 20px;
        padding: 26px 0 18px; border-bottom: 1px solid var(--line); }
.mast .brand { display: flex; align-items: center; gap: 12px; }
.mast .brand .mark { width: 14px; height: 14px; background: var(--blue); transform: rotate(45deg);
                     flex: none; }
.mast .brand .host { color: var(--ink-3); font-size: 0.8125rem; }
/* Namen blijven staan zoals ze geschreven zijn: HAA en WTI/Brent overleven een kleine-letter-
   transform niet, en een boeknaam die verkeerd gespeld op het bord staat is een fout, geen stijl. */
.mast h1 { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1; letter-spacing: -0.02em;
           margin-top: 12px; }
.mast .sub { margin-top: 8px; color: var(--ink-2); max-width: 62ch; }
.mast .meta { display: grid; gap: 4px; text-align: right; color: var(--ink-3);
              font-size: 0.8125rem; font-variant-numeric: tabular-nums; padding-top: 4px; }
.mast .meta b { color: var(--ink); font-weight: 500; }

/* ---------- environment strip ---------- */
.env { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0;
       margin: 22px 0 0; padding: 0; background: var(--surface); border: 1px solid var(--line);
       border-radius: var(--radius); overflow: hidden; }
.env > div { padding: 14px 18px 16px; border-left: 1px solid var(--line-2); min-width: 0; }
.env > div:first-child { border-left: 0; }
.env dd { margin: 5px 0 0; color: var(--ink-2); font-size: 0.875rem; line-height: 1.45;
          overflow-wrap: anywhere; }
.env dd b { color: var(--ink); font-weight: 500; }

/* ---------- sections ---------- */
.sec { margin-top: 44px; }
.sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
             flex-wrap: wrap; margin-bottom: 10px; }
.sec__note { margin: 0 0 14px; color: var(--ink-2); max-width: 78ch; }
.sec__note--tight { margin-bottom: 0; }
.sec__right { flex: none; text-align: right; }

/* ---------- verdict tags ---------- */
.stamp { display: inline-block; font-family: var(--display); font-size: 0.6875rem; font-weight: 500;
         letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 9px; border-radius: 3px;
         background: var(--off-soft); color: var(--off-ink); white-space: nowrap;
         border: 1px solid transparent; }
.stamp--in { background: var(--ok-soft); color: var(--ok-ink); }
.stamp--out { background: var(--crit-soft); color: var(--crit-ink); }
.stamp--hold { background: var(--warn-soft); color: var(--warn-ink); }
.stamp--none { background: transparent; color: var(--off-ink); border: 1px dashed var(--line-3); }
/* A recorded fact with no verdict attached - FLAT, VALUED, FIRST RUN. These were wearing
   --none, whose dashed frame means "never measured" everywhere else on this board, so the log
   was calling a decision the book actually took an absence of data. Solid hairline, no tint. */
.stamp--plain { background: transparent; color: var(--ink-3); border: 1px solid var(--line-2); }
.stamp--flat { font-size: 0.6875rem; padding: 2px 7px; }

/* ---------- the tolerance rail ----------
   The signature: every figure sits above the band it is judged against, drawn to that band's
   scale. Hollow blue tick = the reference value, filled dot = what was measured. The ends are
   revealed on hover and focus on a pointer device, and shown permanently where there is no
   hover, because a band you cannot read is not a tolerance. */
.rail { position: relative; width: 100%; min-width: 132px; max-width: 220px; padding: 9px 0 4px;
        cursor: default; }
.rail__track { position: relative; height: 6px; border-radius: 3px; background: var(--line-2);
               border: 1px solid var(--line); }
.rail__nom, .rail__meas { position: absolute; top: 3px; }
.rail__nom { left: var(--pos-nom); width: 0; height: 16px; border-left: 2px dotted var(--blue);
             transform: translateX(-1px); }
.rail__meas { left: var(--pos-meas); width: 3px; height: 16px; background: var(--ink);
              border-radius: 1px; transform: translateX(-1.5px); }
.rail--in .rail__meas { background: var(--ok); }
.rail--out .rail__meas { background: var(--crit); }
.rail__ends { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px;
              font-size: 0.6875rem; color: var(--ink-3); font-variant-numeric: tabular-nums;
              opacity: 0; transition: opacity 160ms var(--ease-out); }
.rail:hover .rail__ends, .rail:focus-visible .rail__ends, .rail--open .rail__ends,
.rail.is-pinned .rail__ends { opacity: 1; }
.rail--empty .rail__track { background: repeating-linear-gradient(90deg, var(--line-2) 0 4px,
                            transparent 4px 8px); border-style: dashed; }
.rail--empty .rail__ends { opacity: 1; }
@media (hover: none) { .rail__ends { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rail__ends { transition: none; } }

/* ---------- instrument register ---------- */
.reg { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
       overflow: hidden; }
.reg__row { display: grid; grid-template-columns: 40px minmax(180px, 1.4fr) 112px 96px 96px
            minmax(150px, 1fr) 96px; align-items: center; gap: 18px; padding: 16px 20px;
            border-top: 1px solid var(--line-2); text-decoration: none; color: inherit; }
.reg__head { display: grid; grid-template-columns: 40px minmax(180px, 1.4fr) 112px 96px 96px
              minmax(150px, 1fr) 96px; align-items: end; gap: 18px; padding: 12px 20px 9px;
              background: var(--surface-2); border-bottom: 1px solid var(--line);
              font-family: var(--display); font-weight: 500; font-size: 0.6875rem;
              letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.reg__row:first-child { border-top: 0; }
.reg__row + .reg__row, .reg__head + .reg__row { border-top: 1px solid var(--line-2); }
.reg__row:hover { background: var(--surface-2); }
.reg__row > * { min-width: 0; }
.reg__ord { font-family: var(--display); font-size: 0.875rem; color: var(--ink-3);
            font-variant-numeric: tabular-nums; }
.reg__name { font-family: var(--display); font-weight: 500; font-size: 1.0625rem;
             letter-spacing: -0.01em; }
.reg__row:hover .reg__name { color: var(--blue-ink); }
.reg__kind { margin-top: 3px; font-size: 0.6875rem; }
.reg__val { font-size: 1.125rem; font-weight: 500; line-height: 1.1;
            font-variant-numeric: tabular-nums lining-nums; }
.reg__open { justify-self: end; font-size: 0.8125rem; color: var(--ink-3); white-space: nowrap; }
.reg__row:hover .reg__open { color: var(--blue-ink); }

/* ---------- the traffic light ----------
   The board's first answer, and the one component whose colour a reader is meant to see daily.
   That is a deliberate amendment to the nothing-coloured-at-rest rule and not a hole in it: green
   here is not decoration, it is the answer to "did it work today", which is the question the page
   is opened for. It is spent carefully - one 10px dot, never a filled chip, never a coloured row -
   and the word beside it carries the same message, so a reader who cannot separate red from green
   loses nothing. Every lamp clears 3:1 against both the grey ground and the white sheet. */
.lamp { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display);
        font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase;
        white-space: nowrap; color: var(--ink); }
.lamp__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--off); }
.lamp--ok { color: var(--ok-ink); } .lamp--ok .lamp__dot { background: var(--ok); }
.lamp--warn { color: var(--warn-ink); } .lamp--warn .lamp__dot { background: var(--warn); }
.lamp--bad { color: var(--crit-ink); } .lamp--bad .lamp__dot { background: var(--crit); }
/* Not-trading is an absence, drawn the way every other absence on this board is drawn. */
.lamp--off { color: var(--off-ink); }
.lamp--off .lamp__dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-3); }

/* The lamp and its sentence, on a sleeve sheet. A ground only where there is something to act
   on: red is a fact with an action, amber is unsettled, and a book that is simply working gets a
   white panel like everything else. */
.verdict { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
           background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
           padding: 15px 18px 16px; }
.verdict__why { color: var(--ink-2); flex: 1 1 22ch; min-width: 0; }
.verdict--bad { background: var(--crit-soft); border-color: var(--crit-soft); }
.verdict--warn { background: var(--warn-soft); border-color: var(--warn-soft); }

/* ---------- the status board ----------
   `.slv`, not `.reg`: the register below it still means "what this sleeve was admitted on", and
   giving that class a second meaning would quietly restyle it. Six columns and a full-width
   sentence under them, because the sentence is the part a non-technical reader acts on. */
.slv { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
       overflow: hidden; }
.slv__head, .slv__row { display: grid; gap: 4px 18px;
       grid-template-columns: 40px minmax(140px, 1.35fr) minmax(178px, 1fr) 124px 158px 108px;
       grid-template-areas: 'ord name light worth pnl run' '. why why why why why'; }
.slv__head { grid-template-areas: 'ord name light worth pnl run'; align-items: end;
       padding: 12px 20px 9px; background: var(--surface-2); border-bottom: 1px solid var(--line);
       font-family: var(--display); font-weight: 500; font-size: 0.6875rem;
       letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.slv__row { padding: 16px 20px 15px; text-decoration: none; color: inherit;
            border-top: 1px solid var(--line-2); align-items: start; }
.slv__head + .slv__row { border-top: 0; }
.slv__row:hover { background: var(--surface-2); }
.slv__row > * { min-width: 0; }
.slv__ord { grid-area: ord; font-family: var(--display); font-size: 0.875rem; color: var(--ink-3);
            padding-top: 2px; }
.slv__id { grid-area: name; }
.slv__name { font-family: var(--display); font-weight: 500; font-size: 1.0625rem;
             letter-spacing: -0.01em; }
.slv__row:hover .slv__name { color: var(--blue-ink); }
.slv__kind { margin-top: 3px; font-size: 0.6875rem; }
.slv__light { grid-area: light; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
              padding-top: 1px; }
/* The derived state next to the lamp, deliberately uncoloured. A tinted stamp here put a green
   LIVE beside a green lamp and an amber DERIVED beside a grey NOT TRADING - once redundant, once
   contradictory. The lamp is the only verdict colour in the row; this is the state's name. */
.slv__state, .sec__right .slv__state { display: inline-block; font-family: var(--display);
            font-size: 0.625rem; font-weight: 500; letter-spacing: 0.05em;
            text-transform: uppercase; padding: 2px 7px; border-radius: 3px;
            border: 1px solid var(--line-2); color: var(--ink-3); white-space: nowrap; }
.slv__cell--worth { grid-area: worth; }
.slv__cell--pnl { grid-area: pnl; }
.slv__cell--run { grid-area: run; }
.slv__fig { display: block; font-family: var(--display); font-weight: 500; font-size: 1.0625rem;
            line-height: 1.15; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.slv__fig--sm { font-size: 0.9375rem; }
.slv__sub { display: block; margin-top: 4px; font-size: 0.75rem; color: var(--ink-3);
            line-height: 1.35; }
/* The sentence. It is the row's message, so it is set as prose in the reading ink rather than as
   another small grey label. */
.slv__why { grid-area: why; margin-top: 10px; color: var(--ink-2); font-size: 0.875rem;
            line-height: 1.5; max-width: 92ch; }

/* ---------- activity log ----------
   What the books did, newest first. Each row carries a word - FILLED, FLAT, FAILED, CANNOT FUND -
   in the board's existing stamp vocabulary, which is what makes the column scannable and what
   makes the colour a second copy of the message rather than the message. Only a failure gets a
   ground: an amber row is unsettled, not urgent, and tinting a fifth of the log every month is
   how a colour stops being read. */
.act { list-style: none; margin: 0; padding: 0; background: var(--surface);
       border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.act__row { display: grid; gap: 6px 16px; padding: 13px 18px 14px;
            border-top: 1px solid var(--line-2); align-items: start;
            grid-template-columns: 92px 118px 124px minmax(190px, 1.7fr) minmax(0, 1.15fr);
            grid-template-areas: 'when tag who what outcome'; }
.act--own .act__row { grid-template-columns: 92px 118px minmax(190px, 1.7fr) minmax(0, 1.15fr);
            grid-template-areas: 'when tag what outcome'; }
.act__row:first-child { border-top: 0; }
.act__row > * { min-width: 0; }
.act__row--bad { background: var(--crit-soft); }
/* On the tinted row the FAILED badge was crit-soft on crit-soft, so it lost its box and read as
   loose red text while every other row had a badge. Give it the panel back. */
.act__row--bad .stamp--out { background: var(--surface); }
.act__when { grid-area: when; display: block; font-size: 0.75rem; color: var(--ink-3);
             line-height: 1.35; }
.act__when b { display: block; color: var(--ink); font-weight: 500; font-size: 0.8125rem; }
.act__tag { grid-area: tag; }
.act__who { grid-area: who; font-family: var(--display); font-weight: 500; font-size: 0.875rem;
            color: var(--ink-2); text-decoration: none;
            border-bottom: 1px solid transparent; align-self: start; justify-self: start; }
.act__who:hover { color: var(--blue-ink); border-bottom-color: currentColor; }
.act__what { grid-area: what; }
.act__title { font-weight: 500; line-height: 1.4; font-size: 0.9375rem; }
.act__detail { margin-top: 3px; color: var(--ink-2); font-size: 0.8125rem; line-height: 1.45;
               font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; }
.act__outcome { grid-area: outcome; color: var(--ink-3); font-size: 0.8125rem; line-height: 1.45; }

/* A price the plausibility check refused, against the position it belongs to. The row stays: an
   impossible entry price is a fact about that line, and dropping the line hides it. */
.hold__flag { margin-top: 3px; font-size: 0.75rem; color: var(--crit-ink); line-height: 1.35;
              text-align: right; white-space: normal; }

/* The verbatim run rows the parsed log was read from. Folded away, never removed - a reading
   whose source cannot be checked is an assertion. */
.raw > summary { cursor: pointer; padding: 12px 16px; background: var(--surface);
                 border: 1px solid var(--line); border-radius: var(--radius);
                 font-family: var(--display); font-weight: 500; font-size: 0.75rem;
                 letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.raw > summary:hover { color: var(--ink); background: var(--surface-2); }
.raw[open] > summary { border-radius: var(--radius) var(--radius) 0 0; border-bottom: 0; }
.raw[open] > summary + * { border-radius: 0 0 var(--radius) var(--radius); border-top: 0; }
.raw .tbl td:last-child { min-width: 40ch; font-size: 0.8125rem; color: var(--ink-2); }

/* ---------- tables ---------- */
.scrollx { overflow-x: auto; background: var(--surface); border: 1px solid var(--line);
           border-radius: var(--radius); }
table.tbl, table.cal { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.tbl th, .cal th { text-align: left; font-family: var(--display); font-weight: 500;
                   font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase;
                   color: var(--ink-3); padding: 12px 14px 9px; border-bottom: 1px solid var(--line);
                   white-space: nowrap; }
.tbl td, .cal td { padding: 11px 14px; border-bottom: 1px solid var(--line-2);
                   vertical-align: middle; }
.tbl tbody tr:last-child td, .cal tbody tr:last-child td { border-bottom: 0; }
.tbl td.num, .tbl th.num, .cal td.num { text-align: right;
                                        font-variant-numeric: tabular-nums lining-nums; }
.tbl tbody tr:hover, .cal tbody tr:hover { background: var(--surface-2); }

/* calibration table: metric, nominal, measured, tolerance, verdict */
.cal th:nth-child(2), .cal th:nth-child(3), .cal td:nth-child(2), .cal td:nth-child(3)
  { text-align: right; }
.cal th:last-child, .cal td:last-child { text-align: right; }
.cal td:first-child { max-width: 34ch; }
.cal__metric { font-weight: 500; }
.cal__sub { margin-top: 2px; color: var(--ink-3); font-size: 0.8125rem; line-height: 1.4; }
.cal__fig { font-size: 1.0625rem; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }
.cal__fig--none { color: var(--ink-3); font-weight: 400; }
.cal__band { width: 240px; }
.cal .rail { margin-left: auto; }
.cal__bandtext { text-align: right; font-size: 0.8125rem; }

.tolnote { width: 100%; border-collapse: collapse; background: var(--surface);
           border: 1px solid var(--line); border-radius: var(--radius); font-size: 0.875rem; }
.tolnote td { padding: 11px 14px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.tolnote tr:last-child td { border-bottom: 0; }
.tolnote td:first-child { font-family: var(--display); font-weight: 500; white-space: nowrap;
                          width: 1%; }
.tolnote td:nth-child(2) { color: var(--ink-2); white-space: nowrap; width: 1%;
                           font-variant-numeric: tabular-nums; }
.tolnote td:last-child { color: var(--ink-2); }

/* ---------- empty states ---------- */
.empty { background: var(--surface); border: 1px dashed var(--line-3); border-radius: var(--radius);
         padding: 22px 24px; max-width: 84ch; }
.empty h3 { font-family: var(--display); font-size: 0.8125rem; letter-spacing: 0.05em;
            text-transform: uppercase; color: var(--ink-3); }
.empty p { margin-top: 8px; color: var(--ink-2); }

/* ---------- defect ---------- */
.defect { margin-top: 14px; padding: 12px 16px; border-radius: var(--radius);
          background: linear-gradient(90deg, var(--crit-soft), transparent 88%);
          border: 1px solid var(--crit-soft); }
.defect__t { font-family: var(--display); font-size: 0.6875rem; letter-spacing: 0.05em;
             text-transform: uppercase; color: var(--crit-ink); margin-bottom: 4px; }
.defect p { color: var(--ink-2); font-size: 0.875rem; }
.defect b { color: var(--ink); font-weight: 500; }

/* ---------- chart ---------- */
.chart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
         padding: 18px 20px 16px; }
.chart__bar { display: flex; align-items: center; justify-content: space-between; gap: 14px;
              flex-wrap: wrap; margin-bottom: 12px; }
.seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line);
       border-radius: var(--radius); background: var(--surface-2); }
.seg button { appearance: none; border: 0; background: transparent; color: var(--ink-3);
              cursor: pointer; padding: 4px 11px; border-radius: 2px;
              font: 500 0.75rem/1.2 var(--display); letter-spacing: 0.03em; text-transform: uppercase; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink);
                                   box-shadow: 0 1px 2px rgb(0 0 0 / 0.06); }
.chart__frame { overflow: hidden; }
.chart__frame svg { width: 100%; height: auto; }
.chart__grid { stroke: var(--line-2); stroke-width: 1; }
.chart__zero { stroke: var(--line-3); stroke-width: 1; }
.chart__axis { font: 400 11px var(--body); fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.chart__ref { fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linejoin: round; }
.chart__bench { fill: none; stroke: var(--line-3); stroke-width: 1.25; stroke-dasharray: 3 3; }
.chart__dd { fill: var(--crit-soft); stroke: none; }
.chart__legend { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px;
                 font-size: 0.8125rem; color: var(--ink-2); }
.chart__key { display: inline-flex; align-items: center; gap: 8px; }
.chart__swatch { width: 16px; height: 3px; border-radius: 2px; background: var(--ink); flex: none; }
.chart__swatch--bench { background: repeating-linear-gradient(90deg, var(--line-3) 0 3px,
                        transparent 3px 6px); }
.chart__swatch--dd { height: 10px; border-radius: 2px; background: var(--crit-soft); }
.readout { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 14px; padding-top: 12px;
           border-top: 1px solid var(--line-2); font-size: 0.8125rem; color: var(--ink-2); }
.readout b { color: var(--ink); font-weight: 500; margin-left: 4px; }
.readout .lbl { font-size: 0.6875rem; }

/* ---------- live P&L ----------
   Its own names rather than the reference chart's, because it answers a different question and
   the two must never be mistaken for each other: that chart is the window the sleeve was admitted
   on, this one is money that has actually moved. Colourless at rest - a book that is up is the
   healthy steady state and nobody acts on it - so the only tint here is the drawdown, which is
   the part of the picture that is ever worth acting on. */
.pnl { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
       padding: 18px 20px 16px; }
.pnl__base { stroke: var(--line-3); stroke-width: 1; fill: none; }
.pnl__baselbl { font: 400 11px var(--body); fill: var(--ink-3);
                font-variant-numeric: tabular-nums; }
/* A session with no mark. Dotted, so the eye follows the series across the hole without the
   board claiming it measured anything inside it. */
.pnl__bridge { stroke: var(--line-3); stroke-width: 1; stroke-dasharray: 2 3; }
.pnl__now { fill: var(--ink); }
.pnl__ddtop { stroke: var(--line-2); stroke-width: 1; }
.pnl__read { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
             gap: 14px 24px; margin-top: 16px; padding-top: 14px;
             border-top: 1px solid var(--line-2); }
.pnl__cell { min-width: 0; }
.pnl__cell .lbl { display: block; margin-bottom: 5px; }
.pnl__cell b { display: block; font-family: var(--display); font-size: 1.0625rem;
               font-weight: 500; line-height: 1.15; letter-spacing: -0.01em;
               overflow-wrap: anywhere; }
.pnl__sub { display: block; margin-top: 4px; font-size: 0.75rem; color: var(--ink-3);
            line-height: 1.35; }
.pnl__cell--wait { grid-column: span 2; }
/* Where the chart will be once there is a series to draw. Dashed, because an empty plot frame
   would read as a chart that failed rather than one that has not started. */
.pnl__pending { display: flex; align-items: center; justify-content: center; min-height: 92px;
                border: 1px dashed var(--line-3); border-radius: var(--radius);
                color: var(--ink-3); font-size: 0.8125rem; text-align: center;
                padding: 12px 16px; }
/* A 1120-wide drawing scaled into a phone renders its axis at six pixels. The same answer the
   wide tables get: keep the drawing at a legible size and let it scroll inside its own panel. */
@media (max-width: 720px) {
  .pnl .chart__frame { overflow: auto hidden; -webkit-overflow-scrolling: touch; }
  .pnl .chart__frame svg { min-width: 660px; }
  .pnl .chart__axis, .pnl .pnl__baselbl { font-size: 15px; }
}
.pnl__cell--wait .pnl__sub { max-width: 46ch; }

/* ---------- P&L cards ----------
   One card per book, two-up on a desktop and one-up on a phone. It answers, top to bottom, the
   order the question is actually asked in: which book, is it working, what did it make, what is
   that against what it was funded with, then the windows, then the curve, then where all of it
   came from. The lamp stays in the header - a card is the second thing a reader looks at, and the
   answer to "is it working" may never end up underneath a chart.

   Colour is still a verdict and still nothing else: the money figure takes the gain or loss ink,
   the live line takes the one accent this world has, and every absence is the same dashed grey as
   an unmeasured figure anywhere else on this board. */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
        padding: 16px 18px 15px; min-width: 0; display: flex; flex-direction: column; }
.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
              flex-wrap: wrap; }
.card__name { font-family: var(--display); font-weight: 500; font-size: 1.0625rem;
              letter-spacing: -0.01em; color: inherit; text-decoration: none;
              border-bottom: 1px solid transparent; }
.card__name:hover { color: var(--blue-ink); border-bottom-color: currentColor; }
.card__kind { margin-top: 3px; font-size: 0.6875rem; }
.card__light { flex: none; padding-top: 2px; }
.card__badge { display: block; margin-top: 12px; font-size: 0.6875rem; }
/* The figure the card exists for. Set at the display face and large enough that it is read before
   anything around it, which is what makes the rest of the card a defence of it. */
.card__big { display: block; margin-top: 4px; font-family: var(--display); font-weight: 500;
             font-size: clamp(1.75rem, 3.4vw, 2.125rem); line-height: 1.05;
             letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; }
.card__sub { margin-top: 6px; color: var(--ink-3); font-size: 0.8125rem; line-height: 1.4; }
.card__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px;
                 margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line-2); }
/* Pranav's row - the figures he asks for by name every time. Same grid, its own ground, so it
   reads as a second question rather than as more of the first one. */
.card__metrics--pranav { margin-top: 12px; padding: 12px 12px 11px; background: var(--surface-2);
                         border: 1px solid var(--line-2); border-radius: var(--radius); }
.card__m { min-width: 0; }
/* A refused delta is a sentence, not a figure. Given a third of a card it either clips or
   stacks eight lines deep, so it takes the row. */
.card__m--wide { grid-column: 1 / -1; }
.card__m--wide .card__ms { white-space: normal; }
.card__m .lbl { display: block; font-size: 0.625rem; margin-bottom: 4px; }
.card__mv { display: block; font-family: var(--display); font-weight: 500; font-size: 0.9375rem;
            line-height: 1.15; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.card__ms { display: block; margin-top: 3px; font-size: 0.6875rem; line-height: 1.35;
            color: var(--ink-3); }
.card__chart { margin-top: 14px; overflow: hidden; }
.card__chart svg { width: 100%; height: auto; }
.card__chart .chart__axis { font-size: 12px; }
/* Zero P&L. Dotted, because it is the line the book was funded on rather than a value it
   measured, and a solid rule there reads as a third series. */
.card__zero { stroke: var(--line-3); stroke-width: 1; stroke-dasharray: 2 3; }
/* Kept faint on purpose. A solid tint under a P&L line that crosses zero reads as a highlighted
   region rather than as the area under a curve, and at full strength it swallowed the dashed
   reference wherever the two lines met. */
.card__area { fill: var(--blue); fill-opacity: 0.07; stroke: none; }
.card__live { fill: none; stroke: var(--blue); stroke-width: 1.75; stroke-linejoin: round;
              stroke-linecap: round; }
.card__ref { fill: none; stroke: var(--line-3); stroke-width: 1.25; stroke-dasharray: 4 3; }
.card__band { fill: var(--line-3); fill-opacity: 0.25; stroke: none; }
/* The bridge across a session that recorded no mark belongs to the live series, so it is drawn
   in the live series' colour and dotted. In grey it was indistinguishable from the reference,
   which made a hole in the record look like a second backtest line. */
.card__break { stroke: var(--blue); stroke-opacity: 0.45; stroke-width: 1.25;
               stroke-dasharray: 2 3; }
.card__dot { fill: var(--blue); }
.card__legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 9px;
                font-size: 0.75rem; color: var(--ink-2); }
.card__sw { width: 16px; height: 3px; border-radius: 2px; background: var(--blue); flex: none; }
.card__sw--ref { background: repeating-linear-gradient(90deg, var(--line-3) 0 4px,
                 transparent 4px 7px); }
.card__sw--zero { background: repeating-linear-gradient(90deg, var(--line-3) 0 2px,
                  transparent 2px 5px); }
.card__sw--gap { background: repeating-linear-gradient(90deg, var(--blue) 0 2px,
                 transparent 2px 5px); opacity: 0.55; }
/* The card's defence sits at its foot however tall the rest of it got, so two cards side by side
   line their notes up rather than floating them at different heights. */
.card__why { margin-top: auto; padding-top: 13px; color: var(--ink-2); font-size: 0.8125rem;
             line-height: 1.5; }
.card__note { margin-top: 9px; color: var(--ink-3); font-size: 0.75rem; line-height: 1.45; }
.card__note b { color: var(--ink-2); font-weight: 500; }
.card__note--wait { color: var(--ink-2); }  /* amber is for lamps and chips only */
.card .pnl__pending { margin-top: 14px; }

/* ---------- correlation matrix ---------- */
.corr th[scope="row"] { text-align: left; font-family: var(--display); font-weight: 500;
                        font-size: 0.8125rem; white-space: nowrap; padding: 11px 14px; }
.corr td { vertical-align: top; }
.corr__n { display: block; margin-top: 3px; font-size: 0.6875rem; color: var(--ink-3);
           font-variant-numeric: normal; }
.corr__self { color: var(--ink-3); }

/* ---------- acceptance record ---------- */
.gate { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: start;
        background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
        padding: 15px 18px 14px; margin-bottom: 10px; }
.gate__name { font-family: var(--display); font-weight: 500; }
.gate__val { margin-top: 3px; font-size: 1.0625rem; font-weight: 500;
             font-variant-numeric: tabular-nums lining-nums; }
.gate__note { grid-column: 1 / -1; color: var(--ink-2); font-size: 0.875rem; }
.gate__src { grid-column: 1 / -1; color: var(--ink-3); font-size: 0.75rem;
             padding-top: 8px; border-top: 1px solid var(--line-2); overflow-wrap: anywhere; }

/* ---------- diagnostic plates ---------- */
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
         gap: var(--gutter); margin-bottom: 18px; }
.grid3 > * { min-width: 0; }
.plate { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
         padding: 16px 18px 15px; }
.big { font-family: var(--display); font-size: 2.25rem; font-weight: 500; line-height: 1;
       letter-spacing: -0.02em; margin-top: 8px; font-variant-numeric: tabular-nums lining-nums; }
.big--md { font-size: 1.625rem; }
.big--sm { font-size: 1.125rem; letter-spacing: -0.01em; }
.plate .faint.small { margin-top: 8px; display: block; line-height: 1.45; }
.plate__text { margin-top: 8px; color: var(--ink-2); font-size: 0.875rem; line-height: 1.5; }
.bar { display: inline-block; height: 6px; border-radius: 3px; background: var(--ink);
       vertical-align: middle; margin-right: 8px; }
.bar--neg { background: var(--neg); }

/* ---------- footer ---------- */
.foot { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--line);
        color: var(--ink-3); font-size: 0.8125rem; }
.foot__cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--gutter); }
.foot__cols > div > p { margin-bottom: 10px; color: var(--ink-2); max-width: 72ch; }
.foot b { color: var(--ink); font-weight: 500; }
.foot dl { margin: 0; display: grid; gap: 7px; }
.foot dt { font-family: var(--display); font-size: 0.6875rem; letter-spacing: 0.04em;
           text-transform: uppercase; color: var(--ink-3); }
.foot dd { margin: 2px 0 0; color: var(--ink-2); overflow-wrap: anywhere; }
.foot dd s { color: var(--ink-3); text-decoration-thickness: 1px; }
/* A figure the record has outgrown is struck rather than deleted: the board shows what was
   superseded, it does not quietly rewrite itself. */
.supersede { display: inline-block; margin-top: 4px; font-family: var(--display); font-size: 0.6875rem;
             font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
             color: var(--warn-ink); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .reg__row, .reg__head { grid-template-columns: 34px minmax(150px, 1.2fr) 104px 84px 84px 92px;
              gap: 14px; }
  .reg__rail, .reg__head > div:nth-child(6) { display: none; }
  .foot__cols { grid-template-columns: 1fr; }
  /* Two-up needs about 470px a card before the metric row starts wrapping every label onto three
     lines. Below that the cards stack rather than shrink: a card that has to be decoded is worse
     than a card you scroll to. */
  .cards { grid-template-columns: 1fr; }
  /* The status board sheds no information here, it re-flows: the column head each cell lost is
     re-emitted inside the cell, which is the same answer the register gets on a phone. */
  .slv__head { display: none; }
  .slv__row { grid-template-columns: 34px minmax(120px, 1.2fr) 132px 148px;
              grid-template-areas: 'ord name worth pnl' '. light light light'
                                   '. run run run' '. why why why'; gap: 8px 14px; }
  .slv__cell::before, .slv__light::before { display: block; margin-bottom: 3px;
    font-family: var(--display); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--ink-3); }
  .slv__cell::before { content: attr(data-h); }
  .slv__light::before { content: "Is it working"; flex-basis: 100%; }
  .slv__cell--run { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .slv__cell--run::before { margin-bottom: 0; }
  .slv__cell--run .slv__sub { margin-top: 0; }
  .act__row { grid-template-columns: 96px 118px minmax(180px, 1.6fr);
              grid-template-areas: 'when tag who' 'when tag what' '. . outcome'; }
  .act--own .act__row { grid-template-columns: 96px 118px minmax(180px, 1.6fr);
              grid-template-areas: 'when tag what' '. . outcome'; }
}
@media (max-width: 720px) {
  .sheet { padding: 0 16px 56px; }
  .mast { grid-template-columns: 1fr; align-items: start; }
  .mast .meta { text-align: left; }
  .mast h1 { font-size: 2rem; }
  .env > div { border-left: 0; border-top: 1px solid var(--line-2); }
  .env > div:first-child { border-top: 0; }
  .reg__head { display: none; }
  .reg__row { grid-template-columns: 34px 1fr auto; grid-template-areas:
              'ord name stamp' '. ref meas' '. rail rail' '. open open';
              row-gap: 8px; align-items: start; }
  .reg__ord { grid-area: ord; }
  .reg__row > div:nth-child(2) { grid-area: name; }
  .reg__stamp { grid-area: stamp; justify-self: end; }
  .reg__ref { grid-area: ref; }
  .reg__meas-cell { grid-area: meas; }
  .reg__ref::before { content: "Reference"; }
  .reg__meas-cell::before { content: "Measured"; }
  .reg__ref::before, .reg__meas-cell::before { display: block; margin-bottom: 2px;
    font-family: var(--display); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--ink-3); }
  .reg__rail { grid-area: rail; display: block; }
  .reg__rail .rail { max-width: none; }
  .reg__open { grid-area: open; justify-self: start; color: var(--blue-ink); }
  .cal td:first-child { max-width: none; }
  .cal__band { width: auto; }
  /* Phone. Three metric columns at 390px gives each label 90px and every one of them wraps to
     three lines, so the row drops to two. The chart keeps its shape and scales down with the
     card - it is 480 units wide rather than 1120, which is what lets it do that without the axis
     falling under ten pixels; the type inside it is set larger to land back on the same size. */
  .card { padding: 15px 15px 14px; }
  .card__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card__chart .chart__axis { font-size: 16px; }
  .card__big { font-size: 1.875rem; }
  /* Drie kolommen op 390px knijpt elke cel tot vijf regels. Op een telefoon is dit geen tabel
     maar een lijst: metriek, band, en waarom die band zo staat, onder elkaar. */
  .tolnote, .tolnote tbody, .tolnote tr, .tolnote td { display: block; width: auto; }
  .tolnote tr { padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
  .tolnote tr:last-child { border-bottom: 0; }
  .tolnote td { padding: 0; border: 0; white-space: normal; }
  .tolnote td:first-child { font-size: 0.9375rem; }
  .tolnote td:nth-child(2) { margin-top: 2px; color: var(--ink); }
  .tolnote td:last-child { margin-top: 6px; font-size: 0.8125rem; }
  .gate { grid-template-columns: 1fr auto; }
  .readout { gap: 4px 16px; }
  /* Phone. Every cell keeps the head it lost, and the sentence - which is the part the two
     readers who are not in a terminal act on - gets the full width. */
  .slv__row { grid-template-columns: 30px 1fr;
              grid-template-areas: 'ord name' '. light' '. worth' '. pnl' '. run' '. why';
              gap: 10px 12px; padding: 16px 16px 17px; }
  .slv__light { padding-top: 0; }
  .slv__why { margin-top: 2px; }
  /* The log stops being a grid of columns and becomes what it is on a phone: a stack of entries,
     each opening with when-and-which-book, then the word, then what happened. */
  .act__row { grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 16px;
              grid-template-areas: 'when tag' 'who tag' 'what what' 'outcome outcome'; }
  .act--own .act__row { grid-template-areas: 'when tag' 'what what' 'outcome outcome'; }
  .act__when { display: flex; align-items: baseline; gap: 8px; }
  .act__when b { display: inline; }
  .act__what { margin-top: 4px; }
  .hold__flag { text-align: left; }
}

/* Vehicles — the line an order is placed on when it is not the line the signal reads.
   The dot carries one bit only: is this the same exposure, or a different index? Only the second
   is coloured. A green dot on eleven of thirteen rows is a colour a reader sees every day and
   never acts on, which is this board's definition of a defect; the matched rows get a hairline
   ring instead, and the ochre ones are then the only thing in the table asking to be read. */
.vdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
        vertical-align: 1px; margin-right: 6px; }
.vdot--ok { box-shadow: inset 0 0 0 1px var(--line-3); }
.vdot--warn { background: var(--warn); }
.vcost { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px;
         margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.vcost > div { display: flex; flex-direction: column; gap: 3px; }
.vcost__k { font-family: var(--display); font-size: 1.0625rem; font-weight: 500;
            letter-spacing: -0.01em; }
.vcost .faint { font-size: 0.8125rem; line-height: 1.45; }
@media (max-width: 720px) { .vcost { grid-template-columns: 1fr; } }

/* ---------- the door ----------
   The login page is the same page family as the board, not a card floating on its own: it reuses
   the masthead component whole, so the brand line, the h1 scale and the hairline under it are the
   ones every sleeve sheet has. Under that rule sits one white panel where the register would be.

   Colour is a verdict here too. At rest the page has none but the blue mark and the one action, so
   the red of a refused attempt and the ochre of a rate limit are the only things that can appear -
   which is the point. A permanent LOCKED badge would be a colour nobody ever acts on. */
/* `.door`, not `.gate`: the acceptance record on every sleeve sheet already owns `.gate`, and a
   second meaning for that class quietly restyled it. */
.door { max-width: 460px; margin: 0 auto; padding: 40px 24px 48px; min-height: 100vh;
        min-height: 100dvh; display: flex; flex-direction: column; justify-content: center;
        align-items: stretch; }
.mast--door { grid-template-columns: 1fr; padding-top: 0; }
.mast--door .sub { max-width: none; }

.door__panel { margin-top: 26px; padding: 22px 22px 24px; background: var(--surface);
               border: 1px solid var(--line); border-radius: var(--radius);
               display: grid; gap: 18px; }
.door__foot { margin-top: 18px; color: var(--ink-3); font-size: 0.8125rem; line-height: 1.55; }

.field { display: grid; gap: 7px; }
/* 16px, not 0.9375rem: below sixteen, iOS Safari zooms the page on focus and the reader lands on a
   board they then have to pinch back out of. */
.field input { width: 100%; font: 400 16px/1.4 var(--body); color: var(--ink);
               background: var(--surface); border: 1px solid var(--line-3);
               border-radius: var(--radius); padding: 11px 12px; }
.field input:hover { border-color: var(--ink-3); }
/* The global focus ring is the whole treatment. Tinting the border blue underneath it draws a
   second ring, and an autofocused field then opens the page looking like a flagged one. The
   radius is restated only because the global rule squares it to 2px. */
.field input:focus-visible { border-radius: var(--radius); }
.field input[aria-invalid="true"] { border-color: var(--crit); }
.field input[disabled] { background: var(--surface-2); color: var(--ink-3);
                         border-color: var(--line); cursor: not-allowed; }

.btn { appearance: none; display: inline-flex; align-items: center; justify-content: center;
       gap: 10px; width: 100%; padding: 13px 18px; cursor: pointer;
       font: 500 0.9375rem/1 var(--display); letter-spacing: 0.02em;
       color: var(--on-blue); background: var(--blue); border: 1px solid var(--blue);
       border-radius: var(--radius); }
.btn:hover { background: var(--blue-ink); border-color: var(--blue-ink); }
.btn:active { background: var(--blue-ink); border-color: var(--blue-ink);
              box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.22); }
/* Greyed, not dimmed white-on-grey: a disabled control is exempt from the contrast rule and still
   has to be readable, and #FFF on --off is 3.2:1. */
.btn[disabled] { background: var(--off-soft); border-color: var(--line); color: var(--off-ink);
                 cursor: not-allowed; }
.btn[disabled]:hover svg { transform: none; }
.btn svg { width: 14px; height: 14px; flex: none; transition: transform 160ms var(--ease-out); }
.btn:hover svg { transform: translateX(2px); }

/* The one thing on this page that is allowed a colour, and only when there is something to do
   about it. Same construction as .defect on the sleeve sheets. */
.notice { padding: 12px 14px; border-radius: var(--radius); background: var(--crit-soft);
          border: 1px solid var(--crit-soft); color: var(--ink-2); font-size: 0.875rem;
          line-height: 1.5; }
.notice__t { display: block; font-family: var(--display); font-size: 0.6875rem; font-weight: 500;
             letter-spacing: 0.05em; text-transform: uppercase; color: var(--crit-ink);
             margin-bottom: 4px; }
.notice--wait { background: var(--warn-soft); border-color: var(--warn-soft); }
.notice--wait .notice__t { color: var(--warn-ink); }

/* The way out, in the masthead's metadata column on every board page. */
.mast__out { margin-top: 6px; }
.mast__out a { color: var(--ink-3); text-decoration: none;
               border-bottom: 1px solid transparent; }
.mast__out a:hover { color: var(--ink); border-bottom-color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .btn svg { transition: none; }
  .btn:hover svg { transform: none; }
}
@media (max-width: 720px) {
  .door { padding: 28px 16px 40px; }
  .door__panel { padding: 18px 16px 20px; }
}

/* ---------- forward tests ---------- */
/* A held quantity that has not reached its target outside a dry run: unsettled, so amber. */
.gap { color: var(--warn-ink); font-weight: 500; }

/* ---------- fase 3 (04-11-2026): sign, not colour ----------
   Green, amber and red mean status on this board and nothing else. A gain is not a status: it
   is carried by its sign, in ink, so the only green a reader sees on an ordinary day is a lamp
   that says a book ran. */
.pos, .neg { color: inherit; }

/* ---------- paper sleeves: the front page's table ----------
   One row per sleeve, lamp first. Each figure sits on one line with what it is judged against
   under it: the stop limit under the drawdown, the backtest under the Sharpe and the maximum
   drawdown. Wider than a phone, so on a phone it stops being a table (see below). */
.paper td, .paper th[scope="row"] { vertical-align: top; padding: 14px 10px 13px; }
.paper thead th { white-space: normal; vertical-align: bottom; padding: 12px 10px 9px; }
.paper thead th:first-child { padding-left: 16px; }
.paper td:first-child, .paper th[scope="row"] { padding-left: 16px; }
.paper td:last-child { padding-right: 16px; }
.paper th[scope="row"] { font: 400 0.875rem/1.4 var(--body); text-transform: none;
                         letter-spacing: normal; color: var(--ink); white-space: normal;
                         border-bottom: 1px solid var(--line-2); min-width: 150px; }
.paper th[scope="row"] a { font-family: var(--display); font-size: 1rem; letter-spacing: -0.01em;
                           color: var(--ink); text-decoration: none;
                           border-bottom: 1px solid var(--line); }
.paper th[scope="row"] a b { font-weight: 500; }
.paper th[scope="row"] a:hover { color: var(--blue-ink); border-bottom-color: currentColor; }
.paper__id { display: block; margin-top: 4px; font-size: 0.75rem; color: var(--ink-3); }
.paper__status { min-width: 150px; }
.paper__status .slv__sub { max-width: 24ch; }
.paper__fig { display: block; font-family: var(--display); font-weight: 500; font-size: 0.9375rem;
              line-height: 1.25; white-space: nowrap; }
.paper td.num .slv__sub, .paper td[data-h="In paper"] .slv__sub,
.paper td[data-h="Last run"] .slv__sub { white-space: nowrap; }
.paper__ref { color: var(--ink-3); }
.paper td.num .paper__wait { white-space: normal; max-width: 13ch; margin-left: auto; }
.paper .cal__fig--none { display: block; line-height: 1.25; }
.paper__none { color: var(--ink-3); font-size: 0.8125rem; }
.paper tbody tr:last-child th { border-bottom: 0; }
/* A new group (placing orders, dry run, stopped, waiting) starts under a firmer rule. */
.paper__row--first > th, .paper__row--first > td { border-top: 1px solid var(--line); }

/* ---------- the calibration half of the front page ----------
   Below the paper sleeves and deliberately quieter: smaller heads, smaller notes, one rule
   across the sheet where it starts. It is the record of two books; the table above is the
   board's answer. */
.part { margin-top: 64px; padding-top: 4px; border-top: 1px solid var(--line); }
.part .sec { margin-top: 40px; }
.part .sec h2 { font-size: 1.0625rem; }
.part .sec__note { font-size: 0.875rem; color: var(--ink-2); }
.retired-line { margin-top: 12px; }

/* ---------- retired archive: the reason beside its record ---------- */
.gone { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--gutter);
        align-items: start; }
.gone__when { font-family: var(--display); font-weight: 500; margin-bottom: 8px; }
.gone__why .sec__note { margin-bottom: 10px; }

/* ---------- sleeve sheet ---------- */
.verdict__days { flex-basis: 100%; color: var(--ink-2); }
.tbl td.tbl__ts { text-align: left; white-space: nowrap; }
.verdict__days + .verdict__days { margin-top: -10px; }
.verdict + .env { margin-top: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card--curve { display: block; padding: 16px 18px 14px; }
.card--curve .card__chart { margin-top: 0; }
.fchart--wide .chart__axis { font-size: 12px; }
.fchart--narrow { display: none; }
.fchart--narrow .chart__axis { font-size: 15px; }
.card__sw--band { height: 10px; background: var(--line-3); opacity: 0.25; }
/* An empty state on a sheet lines up with the tables around it; its prose keeps its measure. */
.sheet .sec > .empty, .empty--wide { max-width: none; }
.empty p { max-width: 84ch; }
.verdict + .empty { margin-top: 12px; }

@media (max-width: 720px) {
  .fchart--wide { display: none; }
  .fchart--narrow { display: block; }
  .card--curve { padding: 12px 10px 12px; }
  .env, .verdict + .env { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .env > div { padding: 12px 14px 13px; border-top: 1px solid var(--line-2); }
  .env > div:nth-child(odd) { border-left: 0; }
  .env > div:nth-child(even) { border-left: 1px solid var(--line-2); }
  .env > div:nth-child(-n+2) { border-top: 0; }
  .gone { grid-template-columns: 1fr; }
  .part { margin-top: 48px; }

  /* Column-Head-Follows-Its-Cell: on a phone each table below is a list of rows, and every cell
     that lost its column head carries it as a micro label. */
  .scrollx:has(> .paper), .scrollx--stack { overflow: visible; }
  .paper thead, .tbl--kv thead, .tbl--vs thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
    white-space: nowrap; }
  .paper, .paper tbody, .tbl--kv, .tbl--kv tbody, .tbl--vs, .tbl--vs tbody { display: block; }
  .paper tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px;
              padding: 14px 16px 15px; border-top: 1px solid var(--line-2); }
  .paper tr:first-child { border-top: 0; }
  .paper tr.paper__row--first { border-top: 1px solid var(--line); }
  .paper th[scope="row"], .paper td, .paper td.num { display: block; padding: 0; border: 0;
                                                    min-width: 0; text-align: left; }
  .paper td.num .paper__wait { max-width: none; margin-left: 0; }
  .paper__row--first > th, .paper__row--first > td { border-top: 0; }
  .paper th[scope="row"], .paper__status, .paper__none { grid-column: 1 / -1; }
  .paper__status .slv__sub { max-width: none; }
  .paper .slv__sub, .paper td.num .slv__sub { white-space: normal; }
  .paper td[data-h]::before, .tbl--vs td[data-h]::before {
    content: attr(data-h); display: block; margin-bottom: 3px; font-family: var(--display);
    font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--ink-3); }

  .tbl--kv tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px;
                padding: 11px 14px; border-bottom: 1px solid var(--line-2); }
  .tbl--vs tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px;
                padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
  .tbl--kv tr:last-child, .tbl--vs tr:last-child { border-bottom: 0; }
  .tbl--kv td, .tbl--vs td { display: block; padding: 0; border: 0; min-width: 0; }
  .tbl--kv .tbl__k, .tbl--vs .tbl__k { font-weight: 500; }
  .tbl--kv .tbl__note, .tbl--vs .tbl__k, .tbl--vs .tbl__note { grid-column: 1 / -1; }
  .tbl--vs td.num { text-align: left; }
}