/* Portal shell CSS — sidebar chrome + content components for the C1 sidebar shell
(card r1shl005/r1apv006, doc 60 §2). Shared by every portal mode page (index / approved-plans /
plan-v-actual) via button/arrow region
and the options popup, scrollbars) render in the matching UA scheme. W5-08 themed the select's
background from tokens, but with color-scheme left at the default ("normal" = light) Chrome still
painted the select's button area and popup as a bright-white light widget in dark mode. Light is
set here on the base :root; the two dark blocks below flip it. A [data-theme="light"] override
while the OS is dark keeps this light value (the dark @media rule excludes it). */
color-scheme:light;
--sidebar:#eef1f6;--sidebar-active:#dbe6f4;--sidebar-ink:#1c2430;--sidebar-muted:#5a6473;
--sidebar-line:#d0d7e1;--sidebar-active-ink:#14243a;--sidebar-accent:#3d6fa8;
--success:#2f8a52;--success-bg:#e7f3ec;--success-line:#bfe0cc;--success-ink:#1f6b3d;
--warn:#b9760f;--danger-bg:#fbe9e7;--danger-line:#edc7c1;--danger-ink:#8f2c20;
--purple-bg:#efe9f7;--purple-line:#d3c2ec;--purple-ink:#6b3fa0;
/* W5-09 — generic surface/border aliases used by injected inline-SVG maps (the Programs cluster
locator, approved-plans.js) and small raised panels (home.css). Defined here so those `var(--surface-2)`
/ `var(--border)` references resolve to a THEME-AWARE value instead of their hard-coded near-white
fallbacks (#f6f7f9 / #ccc), which rendered a white box in dark theme. */
--surface-2:#eef1f6;--border:#d0d7e1;
/* R73 single-view — the fixed top bar's height. A static fallback so the page clears the fixed header with
no pre-JS flash; shell.js measures the real rendered height and overwrites this on documentElement (and
on resize / font-load) so a wrapped bar never overlaps the content. Theme-independent, so it lives on the
base :root only. */
--cp-topbar-h:52px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
color-scheme:dark; /* W6-08 — native controls follow the dark scheme (OS-dark, no explicit light override) */
--sidebar:#1a212b;--sidebar-active:#273240;--sidebar-ink:#e7ebf1;--sidebar-muted:#9aa4b3;
--sidebar-line:#2c3644;--sidebar-active-ink:#ffffff;--sidebar-accent:#6ea0d6;
--success:#5cbd85;--success-bg:#16241c;--success-line:#2e5540;--success-ink:#97d6af;
--warn:#d9a24a;--danger-bg:#2c1a17;--danger-line:#5a2f28;--danger-ink:#e8a397;
--purple-bg:#241a33;--purple-line:#4a3566;--purple-ink:#c3a3e8;
--surface-2:#161c24;--border:#2c3644; /* W5-09 — dark counterparts of the SVG-map surface/border aliases */
}}
:root[data-theme="dark"]{
color-scheme:dark; /* W6-08 — native controls follow the dark scheme (explicit dark override) */
--sidebar:#1a212b;--sidebar-active:#273240;--sidebar-ink:#e7ebf1;--sidebar-muted:#9aa4b3;
--sidebar-line:#2c3644;--sidebar-active-ink:#ffffff;--sidebar-accent:#6ea0d6;
--success:#5cbd85;--success-bg:#16241c;--success-line:#2e5540;--success-ink:#97d6af;
--warn:#d9a24a;--danger-bg:#2c1a17;--danger-line:#5a2f28;--danger-ink:#e8a397;
--purple-bg:#241a33;--purple-line:#4a3566;--purple-ink:#c3a3e8;
--surface-2:#161c24;--border:#2c3644; /* W5-09 — dark counterparts of the SVG-map surface/border aliases */
}
/* ============================================================================
Typography scale (hotfix-typography) — ONE global lever for portal readability.
Every --fs-* token (shell-tokens.js: --fs-body/-small/-micro/-h1/-h2/-display) is
rem-based, so setting the ROOT font-size here scales the whole type ramp
PROPORTIONALLY — body, section headers, and labels move together and their size
relationships are preserved (the Tesla/iPhone clean-minimal hierarchy is unchanged,
just larger). line-height stays a unitless ratio (--lh-tight 1.2 / --lh-body 1.55)
so lines grow WITH the text — no squishing; the --space-* tokens are px, so
padding/whitespace is NOT compressed — the breathing room is kept while the text
gets larger.
Why here and not in the token block: the --fs-* VALUES live in the inline