/* ==========================================================================================
   STRATUS // INTERFACE SPEC
   ------------------------------------------------------------------------------------------
   Monochrome by rule. Black ground, white ink, hairlines. One signal colour, --alert, and it
   means one thing only: this needs action now -- a restricted name still active, a sector over
   its cap, a job that failed. Everything else is told apart by lightness, weight, border
   style and a text label, never by hue.

   Type:   Bahnschrift -- the DIN-derived technical face Windows ships -- for labels, titles
           and figures; Cascadia Mono for data. Both are local, so the interface works offline.
   Shape:  square. Panels carry corner brackets; interactive things carry a corner tick.
   Motion: short, and off when the system asks for reduced motion.

   The living version of this file is style.html. Every token below is used there.
   ========================================================================================== */

:root {
    color-scheme: dark;

    /* ground and surfaces: black, then three steps up */
    --bg:        #000000;
    --surface-1: #080808;          /* panels */
    --surface-2: #101010;          /* raised: inputs, hovered rows */
    --surface-3: #181818;          /* pressed, selected */
    --grid:      rgba(255, 255, 255, .025);

    /* lines */
    --line-1: #1a1a1a;             /* gridlines, row rules */
    --line-2: #2a2a2a;             /* panel and field borders */
    --line-3: #474747;             /* emphasised borders */

    /* ink -- contrast on black: 18.8 / 10.6 / 6.1. --ink-4 is decoration, never text */
    --ink-1: #f2f2f2;
    --ink-2: #b8b8b8;
    --ink-3: #8a8a8a;
    --ink-4: #545454;

    /* the one signal colour: 6.3:1 on black, and black text on it reads at 6.3:1 */
    --alert:     #ff4b2b;
    --alert-dim: rgba(255, 75, 43, .12);

    /* data marks -- the series in white, context in a grey that still clears 3:1 */
    --data-1:     #f2f2f2;
    --data-2:     #636363;
    --data-track: #1c1c1c;

    /* which way a figure went: jade up, red down. A green leaning to teal, as far toward green as the
       pair stays apart for red-green colour blindness (separation 8.5 on the panel surface, the
       method's target 8; a plainer green falls to 3-5), both muted to the same weight and above 3:1.
       They mark data only, always beside a sign and a position above or below nought; --alert still
       means act now, and always travels with its word */
    --pos: #16a38a;
    --neg: #e66767;

    /* type */
    --font-ui:   "Bahnschrift", "DIN Alternate", "Barlow Semi Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
    --font-data: "Cascadia Mono", "Cascadia Code", "JetBrains Mono", "SF Mono", Consolas, ui-monospace, monospace;
    --text-2xs: 10px;
    --text-xs:  10.5px;
    --text-sm:  12px;
    --text-md:  13px;
    --text-lg:  15px;
    --text-xl:  20px;
    --text-2xl: 30px;
    --text-hero: 56px;
    --track: .16em;                /* the micro-label tracking */

    /* space */
    --s1: 4px;  --s2: 8px;  --s3: 12px;  --s4: 16px;  --s5: 24px;  --s6: 32px;  --s7: 48px;

    --tick: 5px;                   /* the corner tick on interactive things */
    --bracket: 10px;               /* the corner brackets on panels */
    --motion: 140ms;
    --drawer: min(820px, 96vw);
}

/* ------------------------------------------------------------------------------------------
   base
   ------------------------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { background: var(--bg); }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink-2);
    font: 400 var(--text-md)/1.45 var(--font-ui);
    background:
        linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 100% 32px,
        linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 32px 100%,
        var(--bg);
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ink-1); color: #000; }

a { color: var(--ink-1); text-decoration: none; border-bottom: 1px solid var(--line-3); }
a:hover { border-bottom-color: var(--ink-1); }

:focus-visible { outline: 1px solid var(--ink-1); outline-offset: 2px; }

h1, h2, h3, h4 { margin: 0; color: var(--ink-1); font-weight: 400; }
p { margin: 0; }                   /* spacing comes from the container: .stack, .row, a grid */

code, kbd, .mono { font-family: var(--font-data); }

kbd {
    display: inline-block;
    min-width: 1.7em;
    padding: 1px 5px;
    border: 1px solid var(--line-3);
    border-bottom-width: 2px;
    color: var(--ink-2);
    font-size: var(--text-2xs);
    text-align: center;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); }
::-webkit-scrollbar-thumb:hover { background: var(--line-3); }

/* the micro-label: every caption, column head and field name */
.label, .eyebrow {
    color: var(--ink-3);
    font: 600 var(--text-xs)/1.2 var(--font-ui);
    letter-spacing: var(--track);
    text-transform: uppercase;
}

.muted  { color: var(--ink-3); }
.strong { color: var(--ink-1); }
.alert-text { color: var(--alert); }
.num { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.wrap { white-space: normal; }
.clip { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.hidden { display: none !important; }

/* ------------------------------------------------------------------------------------------
   shell: the header every page shares
   ------------------------------------------------------------------------------------------ */
.top { position: sticky; top: 0; z-index: 30; }

.shell {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: stretch;
    height: 48px;
    border-bottom: 1px solid var(--line-2);
    background: rgba(0, 0, 0, .92);
    backdrop-filter: blur(6px);
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: 0 var(--s5) 0 var(--s4);
    border: 0;
    border-right: 1px solid var(--line-2);
    color: var(--ink-1);
    font: 600 var(--text-lg)/1 var(--font-ui);
    letter-spacing: .34em;
}
.brand:hover { border-right-color: var(--line-2); }
.brand svg { display: block; }

.nav { display: flex; align-items: stretch; }
.nav .gap { flex: 1; border-right: 1px solid var(--line-1); }

.nav a {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: 0 var(--s4);
    border: 0;
    border-right: 1px solid var(--line-1);
    color: var(--ink-3);
    font: 600 var(--text-xs)/1 var(--font-ui);
    letter-spacing: var(--track);
    text-transform: uppercase;
    position: relative;
}
.nav a .n { color: var(--ink-4); font-family: var(--font-data); letter-spacing: 0; }
.nav a:hover { color: var(--ink-1); background: var(--surface-1); }
.nav a[aria-current="page"] { color: var(--ink-1); }
.nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--ink-1);
}
.nav a[aria-current="page"] .n { color: var(--ink-2); }

.search {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: 0 var(--s4);
    border-left: 1px solid var(--line-2);
    position: relative;
}
.search input {
    width: 200px;
    padding: 6px 0;
    border: 0;
    border-bottom: 1px solid var(--line-3);
    background: transparent;
    color: var(--ink-1);
    font: var(--text-md) var(--font-data);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.search input::placeholder { color: var(--ink-4); letter-spacing: var(--track); }
.search input:focus { outline: 0; border-bottom-color: var(--ink-1); }

.suggest {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--line-2);
    background: var(--surface-1);
}
.suggest li {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: var(--s2);
    align-items: center;
    padding: 7px var(--s3);
    cursor: pointer;
    font-size: var(--text-sm);
}
.suggest li .t { color: var(--ink-1); font-family: var(--font-data); }
.suggest li[aria-selected="true"], .suggest li:hover { background: var(--surface-3); }

.status {
    display: flex;
    align-items: center;
    gap: var(--s4);
    padding: 0 var(--s4);
    border-left: 1px solid var(--line-2);
    font: 600 var(--text-xs)/1 var(--font-ui);
    letter-spacing: var(--track);
    text-transform: uppercase;
    color: var(--ink-3);
    white-space: nowrap;
}
.status .clock { font-family: var(--font-data); letter-spacing: 0; color: var(--ink-2); }
.status button { all: unset; cursor: pointer; display: flex; align-items: center; gap: var(--s2); }
.status button:hover { color: var(--ink-1); }
.status button:focus-visible { outline: 1px solid var(--ink-1); outline-offset: 4px; }

/* the rail: the procedure's stages in the order an event travels them */
.rail {
    display: flex;
    align-items: stretch;
    height: 32px;
    border-bottom: 1px solid var(--line-2);
    background: rgba(0, 0, 0, .94);
    overflow-x: auto;
    scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail-label {
    display: flex;
    align-items: center;
    padding: 0 var(--s3) 0 var(--s4);
    border-right: 1px solid var(--line-1);
    color: var(--ink-4);
    font: 600 var(--text-2xs)/1 var(--font-ui);
    letter-spacing: var(--track);
    text-transform: uppercase;
}
.rail .st {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 24px 0 12px;
    border: 0;
    color: var(--ink-3);
    font: 600 var(--text-2xs)/1 var(--font-ui);
    letter-spacing: var(--track);
    text-transform: uppercase;
    white-space: nowrap;
}
.rail .st .n { color: var(--ink-4); font-family: var(--font-data); letter-spacing: 0; }
.rail .st::after {                                    /* the chevron to the next stage */
    content: "";
    position: absolute;
    right: 9px; top: 50%;
    width: 6px; height: 6px;
    border-top: 1px solid var(--line-3);
    border-right: 1px solid var(--line-3);
    transform: translateY(-50%) rotate(45deg);
}
.rail .st:last-child::after { display: none; }
.rail a.st:hover { color: var(--ink-1); background: var(--surface-1); }
.rail a.st:hover .n { color: var(--ink-2); }
.rail .st[aria-current="page"] { color: var(--ink-1); }
.rail .st[aria-current="page"] .n { color: var(--ink-2); }
.rail .st[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 12px; right: 24px; bottom: -1px;
    height: 2px;
    background: var(--ink-1);
}
.rail .st.unbuilt { color: var(--ink-4); cursor: default; }
.rail .st.unbuilt .n { color: var(--line-3); }
.rail .count {
    min-width: 18px;
    padding: 2px 4px;
    border: 1px solid var(--line-3);
    color: var(--ink-1);
    font: 600 var(--text-2xs)/1 var(--font-data);
    letter-spacing: 0;
    text-align: center;
}
.rail .count.alert { border-color: var(--alert); color: var(--alert); }

/* the pages of one stage, as tabs above the page */
.subnav {
    display: flex;
    align-items: stretch;
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 var(--s5);
    border-bottom: 1px solid var(--line-1);
}
.subnav .n {
    display: flex;
    align-items: center;
    padding-right: var(--s4);
    color: var(--ink-4);
    font: var(--text-2xs) var(--font-data);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.subnav a {
    position: relative;
    padding: 10px var(--s4) 9px;
    border: 0;
    color: var(--ink-3);
    font: 600 var(--text-2xs)/1 var(--font-ui);
    letter-spacing: var(--track);
    text-transform: uppercase;
}
.subnav a:hover { color: var(--ink-1); }
.subnav a[aria-current="page"] { color: var(--ink-1); }
.subnav a .count { margin-left: 8px; padding: 1px 6px; border: 1px solid var(--ink-3); color: var(--ink-1);
                   font: 600 var(--text-2xs)/1.4 var(--font-data); letter-spacing: 0; text-transform: none; }
.subnav a[aria-current="page"]::after {
    content: ""; position: absolute; left: var(--s4); right: var(--s4); bottom: -1px; height: 2px; background: var(--ink-1);
}

/* the tape: the latest thing the server said, one line */
.tape {
    display: flex;
    gap: var(--s3);
    align-items: center;
    height: 26px;
    padding: 0 var(--s4);
    border-bottom: 1px solid var(--line-1);
    background: var(--surface-1);
    color: var(--ink-3);
    font: var(--text-sm)/1 var(--font-data);
    overflow: hidden;
    white-space: nowrap;
}
.tape .src { color: var(--ink-2); }
.tape .msg { overflow: hidden; text-overflow: ellipsis; }
.tape .caret {
    width: 7px; height: 12px;
    background: var(--ink-2);
    animation: blink 1.1s steps(1) infinite;
}
.tape.warning .msg, .tape.error .msg { color: var(--alert); }

@keyframes blink { 50% { opacity: 0; } }

/* ------------------------------------------------------------------------------------------
   page layout
   ------------------------------------------------------------------------------------------ */
main {
    max-width: 1480px;
    margin: 0 auto;
    padding: var(--s5) var(--s5) var(--s7);
}

.page-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: end;
    gap: var(--s4);
    margin-bottom: var(--s5);
    padding-bottom: var(--s3);
    border-bottom: 1px solid var(--line-2);
}
.page-head .idx {
    color: transparent;
    -webkit-text-stroke: 1px var(--ink-3);
    font: 300 64px/.8 var(--font-ui);
    letter-spacing: -.02em;
}
.page-head h1, .t-title {
    color: var(--ink-1);
    font: 300 var(--text-2xl)/1 var(--font-ui);
    letter-spacing: .28em;
    text-transform: uppercase;
}
.page-head .lede { margin: var(--s2) 0 0; max-width: 72ch; color: var(--ink-3); }
.page-head .readout {
    text-align: right;
    color: var(--ink-3);
    font: var(--text-sm)/1.6 var(--font-data);
}

.row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s3);
}
.row.end { justify-content: flex-end; }
.row.nowrap { flex-wrap: nowrap; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: var(--s4); }
.stack.tight > * + * { margin-top: var(--s2); }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s4); }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4) var(--s5); }
.span-2 { grid-column: span 2; }

section + section, .panel + .panel { margin-top: var(--s4); }
.grid-2 > .panel + .panel, .grid-3 > .panel + .panel, .grid-4 > .panel + .panel,
.grid-auto > .panel + .panel { margin-top: 0; }

/* ------------------------------------------------------------------------------------------
   panel: the one container
   ------------------------------------------------------------------------------------------ */
.panel {
    position: relative;
    border: 1px solid var(--line-1);
    background: var(--surface-1);
    animation: rise var(--motion) ease-out both;
}
.panel::before, .panel::after {
    content: "";
    position: absolute;
    width: var(--bracket);
    height: var(--bracket);
    border: 1px solid var(--ink-3);
    pointer-events: none;
}
.panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.panel::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }

.panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s3);
    min-height: 40px;
    padding: var(--s2) var(--s4);
    border-bottom: 1px solid var(--line-1);
}
.panel-head .idx { color: var(--ink-4); font: var(--text-sm) var(--font-data); }
.panel-head h2, .t-section {
    color: var(--ink-1);
    font: 600 var(--text-sm)/1 var(--font-ui);
    letter-spacing: .2em;
    text-transform: uppercase;
}
.panel-head .meta { flex: 1 1 0; min-width: 0; overflow: hidden; color: var(--ink-3); font: var(--text-sm) var(--font-data); white-space: nowrap; text-overflow: ellipsis; }
.panel-head .actions { flex-wrap: wrap; justify-content: flex-end; }
.panel-head .actions { margin-left: auto; display: flex; gap: var(--s2); align-items: center; }

.panel-body { padding: var(--s4); }
.panel-body.flush { padding: 0; }
.panel.alert { border-color: var(--alert); }
.panel.alert::before, .panel.alert::after { border-color: var(--alert); }

@keyframes rise { from { opacity: 0; transform: translateY(3px); } }

.note {
    color: var(--ink-3);
    font-size: var(--text-sm);
    max-width: 90ch;
}
.note b { color: var(--ink-2); font-weight: 600; }

hr.rule { border: 0; border-top: 1px solid var(--line-1); margin: var(--s4) 0; }

/* ------------------------------------------------------------------------------------------
   controls
   ------------------------------------------------------------------------------------------ */
/* --- the calendar: a trading month, a day's panel, an agenda ------------------------------------ */
.cal { display: grid; gap: var(--s3); }
.cal-head { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.cal-title { margin: 0 var(--s2); font: 600 var(--text-lg) var(--font-ui); letter-spacing: .02em; min-width: 12ch; }
.cal-head .toggle { display: inline-flex; border: 1px solid var(--line-2); }
.cal-head .toggle button { background: none; border: 0; color: var(--ink-3); padding: 4px 10px; font: 600 var(--text-2xs) var(--font-ui); letter-spacing: var(--track); text-transform: uppercase; cursor: pointer; }
.cal-head .toggle button[aria-pressed="true"] { background: var(--ink-1); color: #000; }
.cal-grid { border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); }
.cal-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) repeat(2, minmax(0, .5fr)); }
.cal-dow { padding: 4px 8px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); color: var(--ink-3); font: 600 var(--text-2xs) var(--font-ui); letter-spacing: var(--track); text-transform: uppercase; }
.cal-cell { min-height: 104px; padding: 6px 7px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 3px; cursor: pointer; min-width: 0; overflow: hidden; }
.cal-cell:hover { background: var(--surface-2); }
.cal-cell:focus { outline: 1px solid var(--ink-2); outline-offset: -2px; }
.cal-cell[aria-selected="true"] { box-shadow: inset 0 0 0 1px var(--ink-1); background: var(--surface-2); }
.cal-cell.weekend { background: var(--surface-1); }
.cal-cell.out .cal-num, .cal-cell.out .cal-ev { opacity: .45; }
.cal-cell.closed { background: repeating-linear-gradient(135deg, transparent 0 7px, var(--surface-3) 7px 8px); }
.cal-date { display: flex; align-items: baseline; gap: 6px; }
.cal-num { font: 600 var(--text-md) var(--font-data); color: var(--ink-1); }
.cal-cell.today .cal-num { background: var(--ink-1); color: #000; padding: 0 5px; }
.cal-mon { font: 600 var(--text-2xs) var(--font-ui); letter-spacing: var(--track); text-transform: uppercase; color: var(--ink-2); }
.cal-now { font: var(--text-2xs) var(--font-ui); letter-spacing: var(--track); text-transform: uppercase; color: var(--ink-2); margin-left: auto; }
.cal-note { font-size: var(--text-2xs); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev { display: flex; align-items: center; gap: 5px; border: 1px solid var(--line-3); padding: 1px 5px; font: var(--text-xs) var(--font-data); white-space: nowrap; overflow: hidden; min-width: 0; }
.cal-ev.estimated { border-style: dashed; }
.cal-ev.confirm { border-color: var(--alert); }
.cal-tk { color: var(--ink-1); font-weight: 600; }
.cal-kind { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.cal-flag { color: var(--alert); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--track); }
.cal-mark { flex: none; width: 7px; height: 7px; display: inline-block; }
.cal-mark.filled { background: var(--data-1); }
.cal-mark.hollow { border: 1.5px solid var(--data-1); }
.cal-more { font-size: var(--text-2xs); color: var(--ink-2); }
.cal-day, .cal-agenda-day { border: 1px solid var(--line-2); padding: var(--s3); display: grid; gap: 6px; }
.cal-day-head, .cal-agenda-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin: 0 0 4px; font: var(--text-md) var(--font-ui); }
.cal-agenda { display: grid; gap: var(--s2); }
.cal-agenda-head span:first-child { font-weight: 600; color: var(--ink-1); }
.cal-row-ev { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--text-sm); }
.cal-src { max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.linkish { background: none; border: 0; padding: 0; color: var(--ink-1); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-3); font: inherit; }
@media (max-width: 760px) {
    .cal-week { grid-template-columns: repeat(5, minmax(0, 1fr)) repeat(2, minmax(0, .35fr)); }
    .cal-cell { min-height: 64px; padding: 3px; }
    .cal-kind { display: none; }
}

.login-box { max-width: 420px; margin: 14vh auto 0; padding: 0 16px; display: grid; gap: var(--s4); }
.login-title { font: 600 var(--text-lg) var(--font-ui); letter-spacing: 0.3em; text-transform: uppercase; margin: 0; }
.login-box input { width: 100%; }
.login-box [hidden] { display: none; }
.login-box details summary { cursor: pointer; color: var(--ink-3); font-size: var(--text-sm); }
.login-box details[open] summary { margin-bottom: var(--s2); }
.code-input { font-family: var(--font-data); letter-spacing: .2em; text-transform: uppercase; }
/* a pairing code on screen (pairing.js): the QR code dark on white whatever the theme -- a camera looks for that */
.pairing { display: grid; gap: var(--s3); justify-items: start; }
.pairing-qr { line-height: 0; }
.pairing-qr svg.qr { width: 216px; height: 216px; display: block; }
.pairing-code { font: 600 28px var(--font-data); letter-spacing: .18em; color: var(--ink-1); user-select: all; }
.pairing.spent .pairing-code { opacity: .35; }
.pairing-state .btn { margin-left: var(--s2); }

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    min-height: 28px;
    padding: 0 var(--s3);
    border: 1px solid var(--line-3);
    background: transparent;
    color: var(--ink-1);
    font: 600 var(--text-xs)/1 var(--font-ui);
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--motion), background var(--motion);
}
.btn::before {
    content: "";
    position: absolute;
    top: -1px; left: -1px;
    width: var(--tick); height: var(--tick);
    background: var(--ink-3);
    transition: background var(--motion);
}
.btn:hover { border-color: var(--ink-1); background: var(--surface-2); }
.btn:hover::before { background: var(--ink-1); }
.btn:active { background: var(--surface-3); }
.btn[disabled] { color: var(--ink-4); border-color: var(--line-2); cursor: default; background: transparent; }
.btn[disabled]::before { background: var(--line-3); }

.btn.primary { background: var(--ink-1); border-color: var(--ink-1); color: #000; }
.btn.primary::before { background: #000; }
.btn.primary:hover { background: #fff; }

.btn.danger { border-color: var(--alert); color: var(--alert); }
.btn.danger::before { background: var(--alert); }
.btn.danger:hover { background: var(--alert-dim); }

.btn.ghost { border-color: transparent; color: var(--ink-3); }
.btn.ghost::before { display: none; }
.btn.ghost:hover { color: var(--ink-1); border-color: var(--line-2); }

.btn.sm { min-height: 22px; padding: 0 var(--s2); font-size: var(--text-2xs); }

.btn .k { color: var(--ink-4); font-family: var(--font-data); letter-spacing: 0; }

input, select, textarea {
    min-height: 28px;
    padding: 4px 8px;
    border: 1px solid var(--line-2);
    border-bottom-color: var(--line-3);
    background: var(--surface-2);
    color: var(--ink-1);
    font: var(--text-md) var(--font-data);
    transition: border-color var(--motion);
}
input:hover, select:hover, textarea:hover { border-bottom-color: var(--ink-3); }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--ink-3); border-bottom-color: var(--ink-1); }
input::placeholder, textarea::placeholder { color: var(--ink-4); }
textarea { width: 100%; resize: vertical; line-height: 1.5; font-family: var(--font-ui); font-size: var(--text-md); }
select { cursor: pointer; }
input[type="checkbox"] {
    appearance: none;
    width: 14px; height: 14px; min-height: 0;
    padding: 0;
    margin: 0;
    border: 1px solid var(--ink-3);
    background: transparent;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    vertical-align: -2px;
}
input[type="checkbox"]::after { content: ""; width: 8px; height: 8px; background: var(--ink-1); transform: scale(0); transition: transform 80ms; }
input[type="checkbox"]:checked { border-color: var(--ink-1); }
input[type="checkbox"]:checked::after { transform: scale(1); }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.8); cursor: pointer; }

.field { display: grid; gap: 5px; }
.field > .label { display: flex; justify-content: space-between; gap: var(--s2); }
.field .hint { color: var(--ink-3); font-size: var(--text-sm); }
.field.inline { display: flex; align-items: center; gap: var(--s2); }
.check { display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer; color: var(--ink-2); }
.check:hover { color: var(--ink-1); }

/* a field that saves itself says so */
.saved-state { font: var(--text-2xs) var(--font-data); color: var(--ink-3); letter-spacing: .06em; }
.saved-state.ok { color: var(--ink-2); }
.saved-state.err { color: var(--alert); }

/* ------------------------------------------------------------------------------------------
   chips, LEDs: state, told by shape and label as well as by fill
   ------------------------------------------------------------------------------------------ */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 18px;
    padding: 0 6px;
    border: 1px solid var(--line-3);
    color: var(--ink-2);
    font: 600 var(--text-2xs)/1 var(--font-ui);
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
}
.chip.solid  { background: var(--ink-1); border-color: var(--ink-1); color: #000; }
.chip.dashed { border-style: dashed; }
.chip.dotted { border-style: dotted; }
.chip.dim    { border-color: var(--line-2); color: var(--ink-4); text-decoration: line-through; }
.chip.ghost  { border-color: transparent; color: var(--ink-3); padding: 0; }
.chip.alert  { background: var(--alert); border-color: var(--alert); color: #000; }
.chip.alert-line { border-color: var(--alert); color: var(--alert); }

.led {
    display: inline-block;
    flex: none;
    width: 7px; height: 7px;
    border: 1px solid var(--ink-3);
}
.led.on    { background: var(--ink-1); border-color: var(--ink-1); }
.led.half  { background: linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); border-color: var(--ink-2); }
.led.off   { border-color: var(--line-3); }
.led.alert { background: var(--alert); border-color: var(--alert); }
.led.busy  { background: var(--ink-1); border-color: var(--ink-1); animation: blink .9s steps(1) infinite; }

/* the pipeline: a page's stages left to right, each a way to its panel */
.pipeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-bottom: var(--s4);
    border: 1px solid var(--line-1);
    background: var(--surface-1);
}
.pipeline .stage {
    all: unset;
    position: relative;
    display: grid;
    gap: 6px;
    padding: var(--s3) var(--s5) var(--s3) var(--s4);
    border-right: 1px solid var(--line-1);
    cursor: pointer;
    min-width: 0;
}
.pipeline .stage:last-child { border-right: 0; }
.pipeline .stage:not(:last-child)::after {           /* the chevron into the next stage */
    content: "";
    position: absolute;
    right: -6px; top: 50%;
    z-index: 1;
    width: 10px; height: 10px;
    border-top: 1px solid var(--line-3);
    border-right: 1px solid var(--line-3);
    background: var(--surface-1);
    transform: translateY(-50%) rotate(45deg);
}
.pipeline .stage:hover { background: var(--surface-2); }
.pipeline .stage:hover::after { background: var(--surface-2); }
.pipeline .stage:focus-visible { outline: 1px solid var(--ink-1); outline-offset: -3px; }
.pipeline .top { display: flex; align-items: center; gap: var(--s2); }
.pipeline .top .n { color: var(--ink-4); font: var(--text-2xs) var(--font-data); }
.pipeline .value { color: var(--ink-1); font: 300 var(--text-xl)/1 var(--font-ui); letter-spacing: .02em; }
.pipeline .sub { color: var(--ink-3); font: var(--text-sm) var(--font-data); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------------------------------------
   figures: stat tiles, the hero, meters
   ------------------------------------------------------------------------------------------ */
.stat { display: grid; gap: 6px; align-content: start; padding: var(--s4); min-width: 0; }
.stat .value {
    color: var(--ink-1);
    font: 300 var(--text-2xl)/1 var(--font-ui);
    letter-spacing: .01em;
}
.stat .sub { color: var(--ink-3); font-size: var(--text-sm); }
.stat.alert .value { color: var(--alert); }
.stat.hero .value { font-size: var(--text-hero); font-weight: 300; line-height: .9; }
.stat .value small { font-size: .45em; color: var(--ink-3); margin-left: .25em; letter-spacing: .1em; text-transform: uppercase; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.stats > .stat + .stat { border-left: 1px solid var(--line-1); }

.meter { display: grid; gap: 5px; }
.meter .track {
    position: relative;
    height: 8px;
    background: repeating-linear-gradient(90deg, var(--data-track) 0 5px, transparent 5px 7px);
}
.meter .fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: repeating-linear-gradient(90deg, var(--data-1) 0 5px, transparent 5px 7px);
    transition: width 400ms ease-out;
}
.meter.alert .fill { background: repeating-linear-gradient(90deg, var(--alert) 0 5px, transparent 5px 7px); }
.meter .mark {
    position: absolute;
    top: -4px; bottom: -4px;
    width: 1px;
    background: var(--ink-2);
}
.meter .mark span {
    position: absolute;
    top: -14px;
    transform: translateX(-50%);
    color: var(--ink-3);
    font: var(--text-2xs) var(--font-data);
    white-space: nowrap;
}
.meter .legend { display: flex; justify-content: space-between; color: var(--ink-3); font: var(--text-sm) var(--font-data); }
.meter.busy .fill { animation: scan 1.4s linear infinite; background-size: 200% 100%; }
.meter.marked .track { margin-top: 14px; }        /* room for the tick labels above the track */

@keyframes scan { from { opacity: 1; } 50% { opacity: .55; } to { opacity: 1; } }

/* ------------------------------------------------------------------------------------------
   tables: dense, sortable, and every row goes somewhere
   ------------------------------------------------------------------------------------------ */
.table-wrap { overflow: auto; max-height: var(--table-max, none); }
table.grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font: var(--text-md)/1.35 var(--font-data);
    font-variant-numeric: tabular-nums;
}
table.grid th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 9px 10px 8px;
    border-bottom: 1px solid var(--line-2);
    background: var(--surface-1);
    color: var(--ink-3);
    font: 600 var(--text-2xs)/1.2 var(--font-ui);
    letter-spacing: var(--track);
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    user-select: none;
}
table.grid th.sortable { cursor: pointer; }
table.grid th.sortable:hover { color: var(--ink-1); }
table.grid th .dir { display: inline-block; width: 1em; color: var(--ink-1); }
table.grid td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--line-1);
    color: var(--ink-2);
    white-space: nowrap;
    vertical-align: middle;
}
table.grid th.num, table.grid td.num { text-align: right; }
table.grid td.key { color: var(--ink-1); font-weight: 600; }
table.grid td.wrap { white-space: normal; min-width: 18ch; }
table.grid td.dim { color: var(--ink-3); }
table.grid tbody tr { position: relative; }
table.grid tbody tr.clickable { cursor: pointer; }
table.grid tbody tr:hover td { background: var(--surface-2); color: var(--ink-1); }
table.grid tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--ink-1); }
table.grid tbody tr:focus-visible { outline: 0; }
table.grid tbody tr:focus-visible td { background: var(--surface-3); }
table.grid tbody tr:focus-visible td:first-child { box-shadow: inset 2px 0 0 var(--ink-1); }
table.grid tbody tr.alert td:first-child { box-shadow: inset 2px 0 0 var(--alert); }
table.grid tbody tr.selected td { background: var(--surface-3); }
table.grid tbody tr.selected td:first-child { box-shadow: inset 2px 0 0 var(--ink-2); }
table.grid tbody tr.dim td { color: var(--ink-4); }
table.grid.compact td { padding: 5px 8px; }
table.grid.compact th { padding: 7px 8px 6px; }
table.grid td .cell-actions { display: flex; gap: var(--s1); justify-content: flex-end; }

.empty {
    display: grid;
    gap: 6px;
    padding: var(--s6) var(--s4);
    color: var(--ink-3);
    text-align: center;
}
.empty .sig {
    color: var(--ink-2);
    font: 600 var(--text-xs)/1 var(--font-ui);
    letter-spacing: .3em;
}

.pager { display: flex; align-items: center; gap: var(--s2); color: var(--ink-3); font: var(--text-sm) var(--font-data); }

/* ------------------------------------------------------------------------------------------
   key-value readouts
   ------------------------------------------------------------------------------------------ */
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--s4); margin: 0; }
dl.kv dt { color: var(--ink-3); font: 600 var(--text-2xs)/1.9 var(--font-ui); letter-spacing: var(--track); text-transform: uppercase; }
dl.kv dd { margin: 0; color: var(--ink-1); font: var(--text-md)/1.6 var(--font-data); min-width: 0; overflow-wrap: anywhere; }
dl.kv dd.wrap { font-family: var(--font-ui); color: var(--ink-2); }

/* ------------------------------------------------------------------------------------------
   overlays: drawer, dialog, toasts, the job dock, tooltips
   ------------------------------------------------------------------------------------------ */
.scrim {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, .66);
    animation: fade var(--motion) ease-out;
}
@keyframes fade { from { opacity: 0; } }

.drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 41;
    display: grid;
    grid-template-rows: auto auto 1fr;
    width: var(--drawer);
    border-left: 1px solid var(--line-3);
    background: var(--surface-1);
    animation: slide 180ms ease-out;
}
@keyframes slide { from { transform: translateX(24px); opacity: 0; } }
.drawer-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s2) var(--s4);
    padding: var(--s4) var(--s5) var(--s3);
    border-bottom: 1px solid var(--line-2);
}
.drawer-head .ticker { font: 300 40px/1 var(--font-ui); color: var(--ink-1); letter-spacing: .06em; }
.drawer-head .name { color: var(--ink-2); font-size: var(--text-lg); }
.drawer-head .ident { grid-column: 1 / -1; color: var(--ink-3); font: var(--text-sm) var(--font-data); display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); }
.drawer-body { overflow: auto; padding: var(--s5); }

.tabs {
    display: flex;
    gap: 0;
    padding: 0 var(--s5);
    border-bottom: 1px solid var(--line-2);
    overflow-x: auto;
}
.tabs button {
    all: unset;
    position: relative;
    padding: 12px var(--s4) 11px;
    color: var(--ink-3);
    font: 600 var(--text-xs)/1 var(--font-ui);
    letter-spacing: var(--track);
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
}
.tabs button:hover { color: var(--ink-1); }
.tabs button[aria-selected="true"] { color: var(--ink-1); }
.tabs button[aria-selected="true"]::after {
    content: ""; position: absolute; left: var(--s4); right: var(--s4); bottom: -1px; height: 2px; background: var(--ink-1);
}
.tabs button .count { margin-left: 6px; color: var(--ink-4); font-family: var(--font-data); letter-spacing: 0; }
.tabs button:focus-visible { outline: 1px solid var(--ink-1); outline-offset: -4px; }

/* windows: what is looked at closely, floating on the desk */
.window {
    position: fixed;
    display: flex;
    flex-direction: column;
    min-width: 340px;
    min-height: 160px;
    border: 1px solid var(--line-3);
    outline: 1px solid #000;                 /* a gap of ground between it and the page: no shadow */
    background: var(--surface-1);
    resize: both;
    overflow: hidden;
    animation: rise var(--motion) ease-out;
}
.window::before, .window::after {
    content: ""; position: absolute; z-index: 2; width: 12px; height: 12px; border: 1px solid var(--ink-3); pointer-events: none;
}
.window::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.window::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.window.front { border-color: var(--ink-3); }
.window.front::before, .window.front::after { border-color: var(--ink-1); }
.window-bar {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 28px;
    flex: none;
    padding: 0 4px 0 var(--s3);
    border-bottom: 1px solid var(--line-2);
    background: var(--surface-2);
    cursor: grab;
    user-select: none;
    touch-action: none;
}
.window-bar:active { cursor: grabbing; }
.window-bar .title {
    flex: 1;
    overflow: hidden;
    color: var(--ink-3);
    font: 600 var(--text-2xs)/1 var(--font-ui);
    letter-spacing: var(--track);
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.window.front .window-bar .title { color: var(--ink-1); }
.window-bar button {
    all: unset;
    display: grid;
    place-items: center;
    width: 24px; height: 22px;
    color: var(--ink-3);
    font: 14px/1 var(--font-data);
    cursor: pointer;
}
.window-bar button:hover { color: var(--ink-1); background: var(--surface-3); }
.window-bar button:focus-visible { outline: 1px solid var(--ink-1); outline-offset: -2px; }
.window-body { flex: 1; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.window-body.sheet { grid-template-rows: auto minmax(0, 1fr) auto; }
.window-body.plain { grid-template-rows: auto minmax(0, 1fr); }
.window-body .drawer-body { overflow: auto; min-height: 0; }
.window.min { height: auto !important; min-height: 0; resize: none; }
.window.min .window-body { display: none; }
.window.max { top: 88px !important; left: 0 !important; width: 100vw !important; height: calc(100vh - 88px) !important; resize: none; }

/* a filing, served by Stratus from its cache, read inside the interface */
.filing-frame { width: 100%; height: 100%; border: 0; background: #fff; }
.filing-frame.dark { filter: invert(.9) hue-rotate(180deg); }
.filing-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line-1); font: var(--text-sm) var(--font-data); color: var(--ink-3); }

@media (max-width: 760px) {
    .window { inset: 0 !important; width: auto !important; height: auto !important; min-width: 0; resize: none; outline: 0; }
    .window-bar { cursor: default; height: 36px; }
    .window-bar button { width: 36px; height: 32px; }
    .window.max { top: 0 !important; }
}

.dialog {
    position: fixed;
    top: 12vh; left: 50%;
    z-index: 51;
    width: min(540px, 94vw);
    transform: translateX(-50%);
    border: 1px solid var(--line-3);
    background: var(--surface-1);
    animation: rise var(--motion) ease-out;
}
.dialog::before, .dialog::after {
    content: ""; position: absolute; width: 14px; height: 14px; border: 1px solid var(--ink-1); pointer-events: none;
}
.dialog::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.dialog::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.dialog.danger { border-color: var(--alert); }
.dialog-head { padding: var(--s4) var(--s5) var(--s3); border-bottom: 1px solid var(--line-1); }
.dialog-head h3 { font: 600 var(--text-sm)/1.2 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; }
.dialog-head p { margin: var(--s2) 0 0; color: var(--ink-3); font-size: var(--text-sm); }
.dialog-body { display: grid; gap: var(--s4); padding: var(--s4) var(--s5); }
.dialog-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: var(--s3) var(--s5); border-top: 1px solid var(--line-1); }
.dialog-foot .keys { color: var(--ink-4); font: var(--text-2xs) var(--font-data); }
.dialog.over .scrim { z-index: 50; }

.toasts {
    position: fixed;
    left: var(--s4); bottom: var(--s4);
    z-index: 60;
    display: grid;
    gap: var(--s2);
    width: min(460px, 92vw);
}
.toast {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--s3);
    align-items: start;
    padding: var(--s3) var(--s3) var(--s3) var(--s4);
    border: 1px solid var(--line-3);
    border-left: 2px solid var(--ink-1);
    background: var(--surface-2);
    color: var(--ink-1);
    font: var(--text-sm)/1.5 var(--font-data);
    animation: rise var(--motion) ease-out;
}
.toast.error { border-left-color: var(--alert); }
.toast.error .kind { color: var(--alert); }
.toast .kind { color: var(--ink-3); font: 600 var(--text-2xs)/1.8 var(--font-ui); letter-spacing: var(--track); text-transform: uppercase; }
.toast button { all: unset; cursor: pointer; color: var(--ink-3); padding: 0 4px; }
.toast button:hover { color: var(--ink-1); }

.dock {
    position: fixed;
    top: 50px; right: var(--s4);
    z-index: 35;
    width: min(420px, 92vw);
    border: 1px solid var(--line-3);
    background: var(--surface-1);
    animation: rise var(--motion) ease-out;
}
.dock-row { display: grid; gap: 6px; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line-1); }
.dock-row .top { display: flex; align-items: center; gap: var(--s2); color: var(--ink-1); font-size: var(--text-sm); }
.dock-row .top .id { color: var(--ink-4); font-family: var(--font-data); }
.dock-row .note { color: var(--ink-3); font: var(--text-sm) var(--font-data); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tip {
    position: fixed;
    z-index: 70;
    pointer-events: none;
    padding: 7px 10px;
    border: 1px solid var(--line-3);
    background: #000;
    color: var(--ink-2);
    font: var(--text-sm)/1.45 var(--font-data);
    max-width: 320px;
}
.tip .v { color: var(--ink-1); font: 600 var(--text-lg)/1.2 var(--font-ui); }

/* ------------------------------------------------------------------------------------------
   charts: SVG drawn by charts.js. Marks thin, grid recessive, text in ink tokens only
   ------------------------------------------------------------------------------------------ */
.figure { display: grid; gap: var(--s3); align-content: start; }
.figure-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); }
.figure-head .title { color: var(--ink-1); font: 600 var(--text-xs)/1 var(--font-ui); letter-spacing: var(--track); text-transform: uppercase; }
.figure-head .sub { color: var(--ink-3); font-size: var(--text-sm); }
.figure-head .toggle { margin-left: auto; display: flex; }
/* the company sheet's financials: a section of figures under one head, by year or by quarter */
.fin-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); border-top: 1px solid var(--line-2); padding-top: var(--s4); }
.fin-head h3 { font: 600 var(--text-sm)/1 var(--font-ui); letter-spacing: var(--track); text-transform: uppercase; }
.fin-head .sub { color: var(--ink-3); font-size: var(--text-sm); }
.fin-head .toggle { margin-left: auto; display: flex; }
.fin-sub { color: var(--ink-2); font: 600 var(--text-xs)/1 var(--font-ui); letter-spacing: var(--track); text-transform: uppercase; margin-top: var(--s3); }
.stats.boxed { border: 1px solid var(--line-1); }
table.statements td.num, table.statements th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.statements tr.sum td { color: var(--ink-1); font-weight: 600; }
table.statements tr.head td { color: var(--ink-3); padding-top: var(--s3); font: 600 var(--text-2xs)/1 var(--font-ui); letter-spacing: var(--track); text-transform: uppercase; }
table.statements .derived { color: var(--ink-3); }
.figure-head .toggle button, .fin-head .toggle button {
    all: unset;
    padding: 3px 8px;
    border: 1px solid var(--line-2);
    color: var(--ink-3);
    font: 600 var(--text-2xs)/1.2 var(--font-ui);
    letter-spacing: var(--track);
    cursor: pointer;
}
.figure-head .toggle button + button, .fin-head .toggle button + button { border-left: 0; }
.figure-head .toggle button[aria-pressed="true"], .fin-head .toggle button[aria-pressed="true"] { background: var(--ink-1); color: #000; border-color: var(--ink-1); }
.figure-head .toggle button:focus-visible, .fin-head .toggle button:focus-visible { outline: 1px solid var(--ink-1); outline-offset: 1px; }
.fin-head .toggle button[disabled] { color: var(--ink-4); cursor: default; }
.legend { display: flex; flex-wrap: wrap; gap: var(--s4); color: var(--ink-3); font-size: var(--text-sm); }
.legend .key { display: inline-flex; align-items: center; gap: 6px; }
.legend .swatch { width: 10px; height: 10px; display: inline-block; }

svg.chart { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-data); }
svg.chart text { fill: var(--ink-3); font-size: 11px; }
svg.chart text.v { fill: var(--ink-2); }
svg.chart text.k { fill: var(--ink-2); font-family: var(--font-ui); letter-spacing: .04em; }
svg.chart tspan.d { fill: var(--ink-3); }
svg.chart .gridline { stroke: var(--line-1); stroke-width: 1; shape-rendering: crispEdges; }
svg.chart .axis { stroke: var(--line-3); stroke-width: 1; shape-rendering: crispEdges; }
svg.chart .bar { fill: var(--data-1); }
svg.chart .bar.context { fill: var(--data-2); }
svg.chart .bar.alert { fill: var(--alert); }
svg.chart .bar.pos { fill: var(--pos); }
svg.chart .bar.neg { fill: var(--neg); }
svg.chart .bar.quiet { fill-opacity: .5; }                /* inside the band it is read against */
svg.chart .zero { stroke: var(--ink-3); stroke-width: 1; shape-rendering: crispEdges; }
svg.chart .step { stroke: var(--line-3); stroke-width: 1; stroke-dasharray: 2 3; shape-rendering: crispEdges; }
svg.chart .track { fill: var(--data-track); }
svg.chart .limit { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; }
svg.chart .limit-label { fill: var(--ink-2); font-size: 10px; letter-spacing: .08em; }
svg.chart .today { stroke: var(--ink-1); stroke-width: 1; }
svg.chart .marker { fill: var(--data-1); stroke: var(--surface-1); stroke-width: 2; }
svg.chart .marker.hollow { fill: var(--surface-1); stroke: var(--data-1); stroke-width: 1.5; }
svg.chart .hit { fill: transparent; cursor: pointer; }
/* two columns joined by lines (charts.js bipartite): a thing hovered brings its lines forward */
svg.chart.bipartite .edge { fill: none; stroke: var(--data-1); stroke-opacity: .5; stroke-linecap: round; transition: stroke-opacity .12s; }
svg.chart.bipartite .edge-hit { fill: none; stroke: transparent; stroke-width: 10; cursor: pointer; }
svg.chart.bipartite.focus .edge { stroke-opacity: .1; }
svg.chart.bipartite.focus .edge.on { stroke-opacity: .95; }
svg.chart.bipartite .dot { fill: var(--data-1); }
svg.chart.bipartite .node.focal text { fill: var(--ink-1); font-weight: 600; }
/* every pair as a grid (charts.js matrix): white by how much links the two, the track where nothing does */
svg.chart.matrix { width: auto; max-width: 100%; }     /* its own size: a few names are not drawn large */
svg.chart.matrix .cell { fill: var(--data-1); }
svg.chart.matrix .empty { fill: var(--data-track); }
svg.chart.matrix .diag { fill: var(--surface-3); }
svg.chart.matrix .mark:hover rect, svg.chart.matrix .mark:focus rect { stroke: var(--ink-1); stroke-width: 1; }
svg.chart.matrix text.on { fill: var(--ink-1); }
svg.chart.bipartite .node.focal .dot { stroke: var(--ink-1); stroke-width: 2; }
svg.chart.bipartite.focus .node:not(.on) text { fill: var(--ink-4); }
svg.chart.bipartite.focus .node:not(.on) .dot { fill: var(--data-2); }
svg.chart .hit:hover + .bar, svg.chart .hit:focus + .bar { fill: #fff; }
svg.chart .hit:focus { outline: none; }
svg.chart g.mark:hover .bar, svg.chart g.mark:focus-within .bar { fill: #fff; }
svg.chart g.mark:hover .bar.context, svg.chart g.mark:focus-within .bar.context { fill: var(--ink-3); }
svg.chart g.mark:hover .bar.alert { fill: #ff6f55; }
svg.chart .series { fill: none; stroke: var(--data-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg.chart .dot { fill: var(--data-1); stroke: var(--surface-1); stroke-width: 2; }
svg.chart .dot.focus { fill: var(--surface-1); stroke: var(--data-1); pointer-events: none; }
svg.chart .crosshair { stroke: var(--ink-3); stroke-width: 1; pointer-events: none; shape-rendering: crispEdges; }
svg.chart .band { fill: var(--surface-3); }
svg.chart .mark .guide { stroke: transparent; stroke-width: 1; shape-rendering: crispEdges; }
svg.chart .mark:hover .guide, svg.chart .mark:focus .guide { stroke: var(--ink-4); }
svg.chart .spark { fill: none; stroke: var(--data-1); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
svg.chart .spark-end { fill: var(--data-1); }

/* ------------------------------------------------------------------------------------------
   the review: a numbered procedure, worked top to bottom
   ------------------------------------------------------------------------------------------ */
.steps { counter-reset: step; display: grid; gap: 0; }
.step {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: var(--s3);
    padding: var(--s4) 0;
    border-top: 1px solid var(--line-1);
}
.step:first-child { border-top: 0; padding-top: 0; }
.step .no { display: grid; gap: 8px; align-content: start; justify-items: start; }
.step .no b { color: var(--ink-3); font: var(--text-sm) var(--font-data); }
.step h4 { font: 600 var(--text-sm)/1.3 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-1); }
.step .where { color: var(--ink-3); font-size: var(--text-sm); margin: 2px 0 var(--s2); }
.step .where a { font-family: var(--font-data); font-size: var(--text-sm); }
.step .measured { color: var(--ink-2); font: var(--text-sm)/1.5 var(--font-data); }
.step .ends { color: var(--ink-3); font-size: var(--text-sm); }
.step.done .no b { color: var(--ink-1); }

.slugs { display: flex; flex-wrap: wrap; gap: 6px; }
.slug {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid var(--line-2);
    color: var(--ink-3);
    font: var(--text-sm) var(--font-data);
    cursor: pointer;
    user-select: none;
}
.slug:hover { border-color: var(--ink-3); color: var(--ink-1); }
.slug.on { border-color: var(--ink-1); color: var(--ink-1); background: var(--surface-3); }
.slug .m { color: var(--ink-4); font-size: var(--text-2xs); letter-spacing: .1em; }
.slug.on .m { color: var(--ink-3); }

.timer { font: var(--text-sm) var(--font-data); color: var(--ink-3); }
.timer.over { color: var(--alert); }

/* the classify sheet: a drawer with a footer that stays put */
.drawer.sheet { grid-template-rows: auto 1fr auto; }
.drawer-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--s2) var(--s4);
    padding: var(--s3) var(--s5);
    border-top: 1px solid var(--line-2);
    background: var(--surface-1);
}
.step.skipped h4, .step.skipped .where { color: var(--ink-4); }
.step.skipped .no b { color: var(--ink-4); }

/* a yes/no answer: two buttons, one pressed */
.seg { display: inline-flex; }
.seg button {
    all: unset;
    padding: 5px 16px;
    border: 1px solid var(--line-3);
    color: var(--ink-3);
    font: 600 var(--text-2xs)/1.2 var(--font-ui);
    letter-spacing: var(--track);
    text-transform: uppercase;
    cursor: pointer;
}
.seg button + button { border-left: 0; }
.seg button:hover { color: var(--ink-1); background: var(--surface-2); }
.seg button[aria-pressed="true"] { background: var(--ink-1); border-color: var(--ink-1); color: #000; }
.seg button:focus-visible { outline: 1px solid var(--ink-1); outline-offset: 2px; }

/* the routing decision, stated large */
.verdict-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s2) var(--s3);
    padding: var(--s3) var(--s4);
    border: 1px solid var(--line-3);
    border-left: 2px solid var(--ink-1);
}
.verdict-line .big { color: var(--ink-1); font: 300 var(--text-xl)/1 var(--font-ui); letter-spacing: .22em; text-transform: uppercase; }

/* what will be recorded, verbatim */
.basis { padding: var(--s3); border: 1px dashed var(--line-3); color: var(--ink-1); font: var(--text-sm)/1.5 var(--font-data); overflow-wrap: anywhere; }

/* what stops it being recorded: the one place a list carries the signal colour */
ul.problems { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
ul.problems li { position: relative; padding-left: var(--s4); color: var(--ink-2); font-size: var(--text-sm); }
ul.problems li::before { content: "▸"; position: absolute; left: 0; color: var(--alert); }
ul.problems li.ok::before { content: "✓"; color: var(--ink-1); }

/* the funnel readout on a company: five filters, each with a lamp */
.funnel-rows { display: grid; gap: 0; }
.funnel-row {
    display: grid;
    grid-template-columns: 14px 160px 1fr;
    gap: var(--s3);
    align-items: start;
    padding: 10px 0;
    border-top: 1px solid var(--line-1);
}
.funnel-row:first-child { border-top: 0; }
.funnel-row .led { margin-top: 5px; }
.funnel-row .what { color: var(--ink-1); font: 600 var(--text-xs)/1.6 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
.funnel-row .facts { color: var(--ink-2); font: var(--text-sm)/1.6 var(--font-data); }
.funnel-row .facts .meter { margin-top: 8px; max-width: 360px; }

.docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--s2); }
.doc {
    display: grid;
    gap: 4px;
    padding: var(--s3);
    border: 1px solid var(--line-2);
    color: var(--ink-2);
}
.doc:hover { border-color: var(--ink-1); color: var(--ink-1); background: var(--surface-2); }
.doc .form { color: var(--ink-1); font: 600 var(--text-sm)/1 var(--font-data); }
.doc .what { color: var(--ink-3); font-size: var(--text-sm); }
.doc .open { color: var(--ink-4); font: 600 var(--text-2xs)/1 var(--font-ui); letter-spacing: var(--track); text-transform: uppercase; }
.doc:hover .open { color: var(--ink-2); }
.doc.none { color: var(--ink-4); border-style: dashed; }

.terminal {
    height: 440px;
    overflow: auto;
    padding: var(--s3) var(--s4);
    background: #000;
    font: var(--text-sm)/1.65 var(--font-data);
}
.terminal .line { display: grid; grid-template-columns: 96px 76px 110px 1fr; gap: var(--s3); white-space: pre-wrap; }
.terminal .t { color: var(--ink-4); }
.terminal .lv { color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }
.terminal .src { color: var(--ink-3); }
.terminal .text { color: var(--ink-2); }
.terminal .success .text, .terminal .success .lv { color: var(--ink-1); }
.terminal .warning .lv, .terminal .error .lv, .terminal .error .text { color: var(--alert); }
.terminal .warning .text { color: var(--ink-1); }
.terminal .line.has-payload { cursor: pointer; }
.terminal .line.has-payload .text::after { content: " +"; color: var(--ink-4); }
.terminal .line:hover { background: var(--surface-1); }
.terminal pre.payload { margin: 2px 0 6px 96px; padding: 6px 10px; border-left: 1px solid var(--line-3); color: var(--ink-3); font: var(--text-sm)/1.5 var(--font-data); white-space: pre-wrap; }
pre.json { margin: 0; max-height: 60vh; overflow: auto; padding: var(--s3); border: 1px solid var(--line-2); background: #000; color: var(--ink-2); font: var(--text-sm)/1.5 var(--font-data); white-space: pre-wrap; }

/* style guide swatches */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--s3); }
.swatch-card { border: 1px solid var(--line-2); }
.swatch-card .chip-color { height: 54px; border-bottom: 1px solid var(--line-2); }
.swatch-card .meta { padding: var(--s2) var(--s3); display: grid; gap: 2px; font: var(--text-sm) var(--font-data); }
.swatch-card .meta .n { color: var(--ink-1); }

ul.rules { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
ul.rules li { position: relative; padding-left: var(--s4); color: var(--ink-2); font-size: var(--text-sm); }
ul.rules li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 1px; background: var(--ink-3); }

@media (max-width: 1100px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: minmax(0, 1fr); }
    .search input { width: 130px; }
    .nav a .n { display: none; }
}
@media (max-width: 760px) {
    .shell { grid-template-columns: auto minmax(0, 1fr); height: auto; }
    .nav .gap { flex: 0 0 var(--s3); }
    .subnav { padding: 0 var(--s4); }
    .brand { padding: 0 var(--s3); letter-spacing: .2em; }
    .nav { overflow-x: auto; scrollbar-width: none; }
    .nav a { padding: 0 var(--s3); }
    .search, .status { display: none; }
    .grid-2, .grid-4 { grid-template-columns: minmax(0, 1fr); }
    .span-2 { grid-column: auto; }
    main { padding: var(--s4) var(--s4) var(--s7); }
    .page-head { grid-template-columns: 1fr; }
    .page-head .idx { font-size: 40px; }
}

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

/* --- the review's evidence, read from the filings (Coverage Runbook §3.4, §3.7, §3.8) -----------
   ------------------------------------------------------------------------------------------ */
.evidence-strip { border: 1px solid var(--line-2); padding: var(--s2) var(--s3); margin-bottom: var(--s4); font-size: var(--text-sm); }
.evidence-strip .sig, .excerpt-head .sig {
    color: var(--ink-1); font: 600 var(--text-2xs)/1 var(--font-ui); letter-spacing: var(--track); text-transform: uppercase;
}
.evidence-strip .push { margin-left: auto; }
.evidence-gaps { margin: var(--s2) 0 0; padding-left: 18px; color: var(--ink-3); }
.excerpt { border-left: 1px solid var(--line-3); padding-left: var(--s3); }
.excerpt-head { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); align-items: baseline; font-size: var(--text-sm); margin-bottom: var(--s2); }
.excerpt p { color: var(--ink-2); font: var(--text-md)/1.55 var(--font-ui); max-width: 78ch; margin: 0 0 var(--s2); }
.excerpt summary { cursor: pointer; color: var(--ink-3); font-size: var(--text-sm); margin-bottom: var(--s2); }
.excerpt summary:hover { color: var(--ink-1); }
.edge-qs { display: grid; gap: var(--s3); padding: var(--s1) 0 var(--s2); }
.edge-q { display: grid; grid-template-columns: 11ch minmax(0, 1fr); gap: var(--s3); font-size: var(--text-sm); }
.edge-q .k { color: var(--ink-3); font: 600 var(--text-2xs)/1.9 var(--font-ui); letter-spacing: var(--track); text-transform: uppercase; }
.edge-q .v { color: var(--ink-2); min-width: 0; line-height: 1.5; }
.draft { border: 1px dashed var(--line-3); padding: var(--s2) var(--s3); display: grid; gap: var(--s2); font-size: var(--text-sm); }
.draft-head { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); align-items: baseline; }
.draft-head .sig { color: var(--ink-1); font: 600 var(--text-2xs)/1 var(--font-ui); letter-spacing: var(--track); text-transform: uppercase; }
.draft-head .push { margin-left: auto; }
.draft-text { color: var(--ink-1); font: var(--text-md)/1.55 var(--font-ui); margin: 0; max-width: 78ch; }
.claim { display: grid; grid-template-columns: 11ch minmax(0, 1fr); gap: var(--s3); }
.claim .k { color: var(--ink-3); font: 600 var(--text-2xs)/1.9 var(--font-ui); letter-spacing: var(--track); text-transform: uppercase; }
.claim q { color: var(--ink-2); }
/* the keys (System): a key per row, where it comes from, and what can be done with it here */
.keys { display: grid; }
.key-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2) var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--line-1); align-items: start; }
.key-row:first-child { border-top: 0; padding-top: 0; }
.key-row .who .row { flex-wrap: wrap; }
.key-row .what { color: var(--ink-3); font-size: var(--text-sm); margin-top: var(--s1); max-width: 90ch; }
.key-row .acts { display: flex; gap: var(--s2); flex-wrap: wrap; justify-content: flex-end; }
.key-row .fix { grid-column: 1 / -1; }
.copyable { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.copyable code { background: var(--surface-2); border: 1px solid var(--line-2); padding: 4px 8px; font-size: var(--text-sm); overflow-wrap: anywhere; user-select: all; }
@media (max-width: 640px) {
    .key-row { grid-template-columns: minmax(0, 1fr); }
    .key-row .acts { justify-content: flex-start; }
}
pre.log-tail { white-space: pre-wrap; color: var(--alert); font: var(--text-xs)/1.5 var(--font-data); margin: 0; max-height: 12em; overflow: auto; }
@media (max-width: 760px) { .claim { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
details.guide { border-left: 1px solid var(--line-3); padding-left: var(--s3); font-size: var(--text-sm); color: var(--ink-2); }
details.guide summary { cursor: pointer; color: var(--ink-3); }
details.guide summary:hover { color: var(--ink-1); }
details.guide[open] summary { margin-bottom: var(--s2); }
details.guide p { margin: 0 0 var(--s2); max-width: 82ch; line-height: 1.5; }
details.guide ul { margin: 0 0 var(--s2); padding-left: 18px; max-width: 82ch; line-height: 1.5; }
details.guide b { color: var(--ink-1); font-weight: 600; }
.accounts { display: grid; gap: 4px; }
.account { display: grid; grid-template-columns: 16ch minmax(0, 1fr); gap: var(--s3); align-items: baseline; font-size: var(--text-sm); }
@media (max-width: 760px) { .account { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.edge-q .brokers { color: var(--ink-3); font: var(--text-xs)/1.6 var(--font-data); }
table.margins { border-collapse: collapse; font-size: var(--text-sm); }
table.margins th { color: var(--ink-3); font: 600 var(--text-2xs)/1.9 var(--font-ui); letter-spacing: var(--track); text-transform: uppercase; text-align: left; padding: 0 var(--s4) 2px 0; }
table.margins td { padding: 1px var(--s4) 1px 0; color: var(--ink-2); }
table.margins .num { text-align: right; font-family: var(--font-data); white-space: nowrap; }
ul.events { margin: 0; padding-left: 18px; }
.claim .cited { color: var(--ink-3); font-size: var(--text-sm); }
.tags { overflow-wrap: anywhere; }
table.holders { border-collapse: collapse; }
table.holders td { padding: 1px var(--s3) 1px 0; vertical-align: baseline; }
table.holders td.num { white-space: nowrap; }
table.inst td.num { text-align: right; padding-left: var(--s3); }
.kpi { display: grid; grid-template-columns: 13ch minmax(0, 1fr); gap: var(--s2); }
.kpi .term { color: var(--ink-1); font: var(--text-sm)/1.5 var(--font-data); }
.kpi q { color: var(--ink-2); }
@media (max-width: 760px) {
    .edge-q, .kpi { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .evidence-strip .push { margin-left: 0; }
}