/* * portfolio-dash-d5.css * * D5 visual redesign of the /portfolio dashboard: dark, cinematic, * monochrome-restrained, map-as-stage command briefing. This file is loaded * ONLY by atlas/web/static/portfolio.html, after console.css and * product-tokens.css, and touches NOTHING in design-tokens.css or * console.css directly. * * UI reconciliation (2026-08-12): tokens and fonts now come from * product-tokens.css, the single product token source; this file holds * page layout only. The only token declarations remaining below are the * page-specific radius override (body.portfolio-dash's 2px instrument * scale, a page layout decision, not a shared token) in its own small * block further down. * * SCOPING. design-tokens.css defines its palette as a bare `:root { ... }` * block (no page-scoping selector of its own), and portfolio-dashboard.js * reads every paint colour via getComputedStyle(document.documentElement) * (see that file's cssVar()), i.e. off , not off . A token * override scoped to `body.portfolio-dash { --surface-0: ... }` would * therefore be invisible to the map's own paint properties: custom * properties do not flow from a descendant back up to an ancestor's * computed style. The only selector that can reach is one that * matches something at or above itself, and this file is never * loaded by any other route (grep confirms body.portfolio-dash exists * nowhere but portfolio.html, and this file is linked from nowhere but * portfolio.html), so a bare `:root` override here is safe: it can never * be evaluated against /room, /coverage, /gallery, /runs, or /methodology, * because those pages' HTML never requests this stylesheet. The scoping * boundary is "which page loads this file", not "which selector it uses * inside that file". See the D5 build report for the byte-identical-text * and unchanged-other-pages proof this claim rests on. * * D9 command-view palette (now owned by product-tokens.css). Amber * #E8A33D is removed entirely from this page: --accent-600 is the UI accent * (eyebrows, links, active toggle state, focus rings, quiet ghost-outline * buttons), used sparingly and never as an outcome colour. That accent is * now BRASS, #856410 on the light default and #D9A441 on the dark arm; the * ice steel cyan #7FAFC6 named here was retired by the light-first reskin. * This page reads the token, so it followed without an edit. The "susceptibility indicated" outcome has its own * dedicated token, --outcome-indicated, deep desaturated signal red * #C4523E, used ONLY for that one outcome (map cells, halos, chips, * legend, colour dots, the outcome split figure). Everywhere else in the * console (nav, other pages) --accent-600 remains the existing blue, * because product-tokens.css's dark skin block is what all migrated pages * now share. */ body.portfolio-dash { --radius-sm: 2px; --radius-md: 2px; --radius-lg: 2px; --radius-full: 2px; font-family: var(--font-body); font-variant-numeric: tabular-nums; } body.portfolio-dash, body.portfolio-dash input, body.portfolio-dash button { font-variant-numeric: tabular-nums; } /* Small-caps-style panel/eyebrow labels: uppercase + wide tracking reads as the "small caps" language of the spec without relying on font-variant (IBM Plex Sans ships no true small-caps glyphs). Every selector in this list was checked against an untouched checkout of the prod-freeze commit (via getComputedStyle) and is ALREADY uppercase there today (.rail-heading/.insp-heading/.db-metric-label/.bs-title/.diff-strip- label/.insp-field-label/thead th via console.css's own rules, .cutoff-disclosure-field-label via portfolio.html's own inline style, never actually rendered by either fixture but authored uppercase in both), so this rule only restyles size/weight/colour, never casing. .lt-label and .const-legend-label are DELIBERATELY excluded: verified against the same untouched checkout, both compute text-transform: none originally (.lt-label inherits uppercase from console.css's bare `label {}` selector by mistake in an earlier draft of this file's OWN override, since caught and reverted; .const-legend-label was never uppercase to begin with). Restyled separately below without touching case. #state-toggle-caption is DELIBERATELY INCLUDED as of the approved wording change (iteration 2, task 3): the caption now always holds the fixed literal "Evidence as of" (set once in renderStateToggleDates, portfolio- dashboard.js), never dossier-derived text, so uppercasing it here is a presentation-only small-caps treatment of a string this file's own author controls, not a re-casing of data. See its own rule further below. */ body.portfolio-dash .rail-heading, body.portfolio-dash .insp-heading, body.portfolio-dash .db-metric-label, body.portfolio-dash .bottom-strip-head .bs-title, body.portfolio-dash .diff-strip-label, body.portfolio-dash .insp-field-label, body.portfolio-dash .cutoff-disclosure-field-label, body.portfolio-dash table.table-dense thead th { font-size: var(--text-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-surface-2); font-weight: var(--font-regular); } /* Restyled (size/weight/colour) but NOT re-cased: text-transform is left at whatever console.css's global `label` rule already computes (uppercase), so rendered text is unchanged from original prod. */ body.portfolio-dash .lt-label { color: var(--on-surface-0); font-size: 12px; letter-spacing: 0.04em; font-weight: var(--font-regular); } /* Integrity chip text: same small-caps treatment, but the colour stays whatever .integrity-chip/.integrity-chip.verified/.failed already sets (primary white when verified, danger when failed), so this rule only ever touches size/tracking/case, never colour. */ body.portfolio-dash #db-integrity-text { font-size: var(--text-micro); letter-spacing: 0.08em; text-transform: uppercase; font-weight: var(--font-medium); } /* Every digit reads in the mono face, tabular. Applies broadly rather than enumerating every number-bearing element, since the dashboard's whole premise is instrumentation density. */ body.portfolio-dash .db-metric-value, body.portfolio-dash .db-outcome-split, body.portfolio-dash .book-summary-grid dd, body.portfolio-dash .insp-field-value.mono, body.portfolio-dash .cutoff-disclosure-date, body.portfolio-dash .diff-chip .dc-delta, body.portfolio-dash .evidence-mini-item .em-id, body.portfolio-dash .evidence-point-item .ep-id, body.portfolio-dash #db-book-name .db-book-id, body.portfolio-dash table.table-dense .num, body.portfolio-dash #bottom-table-body td:first-child, body.portfolio-dash #bottom-table-body td:nth-child(2), body.portfolio-dash #bottom-table-body td:nth-child(3) { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } body.portfolio-dash :focus-visible { outline: 2px solid var(--accent-600); outline-offset: 2px; } /* ================================================================ LAYOUT RECOMPOSITION: the map becomes the base layer of the whole viewport; every other region (top bar, verdict banner, diff strip, rail, inspector, bottom strip) becomes an absolutely positioned glass panel floating over it, instead of a flex sibling that letterboxes the map into a rectangle between opaque bars. Same elements, same DOM order, same event handlers; only position/sizing changes. ================================================================ */ /* #dash-shell stays flex/column (unchanged from portfolio.html's own