`. */ [data-portal="debug"] .page-head{margin-bottom:20px} /* …and the SAME 20px on `/activity` (docs/18 §139.3, the operator's call after a live look). Its head carries the tab strip (§134), and what follows the strip is the first TABLE — so the 38px base put a gap under the title bigger than the one between the strip and the section it labels, which read as the page having lost its first block. 20px is `/debug`'s number for `/debug`'s reason, and the same reason holds here: the title row is a control row, and the thing under it is the content those controls select. It is a per-page judgement rather than a base change for the reason §73 item 5 already gave — a page whose title is followed by PROSE still wants the wider gap. */ [data-portal="positions"] .page-head{margin-bottom:20px} .sec{margin:26px 0 10px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} /* `/health` IS THE ONE PAGE WITH NO `.page-head` (docs/18 §141, the operator's live look): its first visible block is the *System status* heading itself, so the 26px every OTHER page spends between two sections was landing on top of `.body`'s own 22px of padding and reading as a page that had lost its title. The margin is a gap BETWEEN sections; at the top of the page there is nothing above to be apart from. Scoped to the FIRST child so it can only ever be the top of the page, and to the direct child so a `.sec` nested in some later block is untouched. When the engine's stale-snapshot alert is present it is the first child instead — it carries no top margin of its own, and the heading under it keeps the ordinary 26px, which is the spacing that block wants. */ [data-portal="health"] > .sec:first-child{margin-top:0} .sec h2{font-size:18px;letter-spacing:-.01em} .sec .right{margin-left:auto;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums} .foot{margin-top:8px;font-size:11.5px;color:var(--ink-3)} .mono{font-family:var(--font-mono)} /* ---------- metric cards ---------- */ .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px} /* FIVE up (docs/18 §133) — `/activity`'s row, since the maintenance margin and the cushion became a card each. A modifier rather than a second grid: same gap, same margin, same card, one more column. It degrades in two steps below — 1180px → three columns, and at 720px it stops being a grid at all and becomes a swipeable row (docs/18 §138) — so a narrow screen never asks five serif headlines to share a phone's width. */ .cards.five{grid-template-columns:repeat(5,1fr)} .card{background:var(--surface);border:1px solid var(--line);padding:14px 16px} .card .k{font-size:12.5px;color:var(--ink-2);letter-spacing:.01em} .card .v{ font-family:var(--font-serif);font-size:27px;line-height:1.15;margin:7px 0 4px; font-variant-numeric:tabular-nums lining-nums; } .card .s{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums} .card .s b{color:var(--ink-2)} /* A card value in the DANGER tone (docs/18 §30) — today the Broker-reconciliation card's "2 breaks". Deliberately its own class rather than the money `.down` it shares an ink with: a red verdict and a red loss are different claims, and one of them must be able to change colour without the other following. Grey (`.mute`) needs no rule here — the design system's tertiary-ink class already applies, since `.card .v` sets no colour of its own. */ .card .v.bad{color:var(--down)} /* ---------- system checks: the verdict card and the list (docs/18 §142) ---------- ⚠️ This replaced the six-across CHIP GRID (`.status` / `.chips` / `.chip`) on 2026-08-18, the operator's call. A grid of sixteen small boxes made the reader hunt for the one that was not green and wrapped into a wall on a phone; a list reads top to bottom at every width, and the verdict is stated once above it. NO NEW COLOURS: every tone below is one of the existing state tokens, the same three `.b`/`.dot` already use, and neither the tint nor the icon is ever the only carrier of a state — the row says it in words twice (its detail and its verdict). */ .sysverdict{ display:flex;align-items:flex-start;gap:11px;padding:14px 16px;margin-bottom:14px; border:1px solid var(--line);background:var(--surface); } .sysverdict .i{display:flex;flex:none;margin-top:1px;color:var(--ink-3)} .sysverdict .h{font-size:15px;line-height:1.3} .sysverdict .s{font-size:12px;color:var(--ink-3);margin-top:4px;font-variant-numeric:tabular-nums} .sysverdict.ok{background:var(--up-bg);border-color:var(--up-line)} .sysverdict.ok .i{color:var(--up)} .sysverdict.warn{background:var(--warn-bg);border-color:var(--warn-line)} .sysverdict.warn .i{color:var(--warn)} .sysverdict.bad{background:var(--down-bg);border-color:var(--down-line)} .sysverdict.bad .i{color:var(--down)} /* `unk` keeps the plain surface and the tertiary ink it inherits: an unreadable set states nothing, so it is tinted as nothing — and above all not green. */ /* The list. ⚠️ **Each ROW is a `.set` CARD since docs/18 §144** (the operator's call): the settings row's own box, so a check reads like everything stacked on `/settings` — which is also where the strategy cards went with §142. `.set` (below, in the settings block) supplies the border, the padding and the 10px of air between rows; what is left here is the row's own flex line and the state colours. The wrapper around them draws nothing and carries no class at all, so the `.checks` frame with its hairline between rows is gone with it. */ .check{ display:flex;align-items:center;gap:10px;width:100%; font:inherit;color:inherit;text-align:left; } .check .i{display:flex;flex:none;color:var(--ink-3)} .check .n{font-size:12.5px;flex:none} /* The reading. It takes the slack and is the ONE thing that may be cut on a narrow screen — the name and the verdict either side of it are never elided. */ .check .d{ font-size:11.5px;color:var(--ink-3);flex:1 1 auto;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font-variant-numeric:tabular-nums; } /* …so the verdict still sits at the right edge on a row whose reading is empty. */ .check .w{font-size:11.5px;color:var(--ink-3);flex:none;margin-left:auto;white-space:nowrap} .check[data-state="ok"] .i{color:var(--up)} .check[data-state="warn"] .i{color:var(--warn)} .check[data-state="warn"] .w{color:var(--warn)} .check[data-state="bad"] .i{color:var(--down)} .check[data-state="bad"] .w{color:var(--down)} /* A row that HAS an explanation is rendered as a