/* helm-console — Home Screen shell styles (T1.1). T1.8 extends. * * THEME-AWARE (2026-08-27). Two layers, matching the Bridge's own mechanism * so the two surfaces agree on the same theme: * * Layer 1 (this file): a complete DARK token set on bare `:root`, and a * complete LIGHT set under `:root[data-theme="light"]`. Mode alone * therefore renders correctly with zero JS — which is what the pre-paint * snippet in index.html relies on. * Layer 2 (appearance.ts): the active theme's tokens written as INLINE * custom properties on . Inline beats both blocks, so a theme's * colors win; anything a theme does not define falls through to the mode * block here. * * RULE: no rule below may name a bare hex. Every color goes through a token, * or the light mode silently keeps a dark value — which is exactly the class * of bug this file was rewritten to remove. `dark = no attribute` is the * default state, matching data-theme on the Bridge. */ :root { /* chrome — overwritten inline by the active theme */ --hc-bg: #101418; /* shell chrome (theme-truth): one full ramp step DARKER than --hc-bg — * the Helm's --bg-deep seat (.tabstrip/.rail/.trailbar ride it); also * the grid's odd-row stripe. Overwritten per theme (theme.ui.bgDeep). */ --hc-bg-deep: #0b0e12; --hc-fg: #d5dbe0; --hc-accent: #4cc38a; --hc-muted: #7d8590; --hc-line: #2a3138; --hc-surface: #181e24; /* inputs, selects */ --hc-surface2: #1d2530; /* buttons */ --hc-panel: #181e24; /* dialogs, menus, cards — raised chrome sits ABOVE the ground (theme-truth ordering: bg-deep < bg < surface < surface-2) */ --hc-track: #232a32; /* progress track */ --hc-scrim: rgba(0, 0, 0, 0.55); /* grid scroll rails (owner item 67) — the shared pi-stack layer * (pi-stack/src/client/scroll-rails.ts) draws the transcript minimap's * rail treatment over every AG grid and reads its colors through these * two seats; this mapping is the console's ONE hookup (the Helm falls * through to its own --ink/--accent). Theme swaps ride along because * --hc-fg/--hc-accent are overwritten inline by the active theme on this * same root. */ --sb-rail-ink: var(--hc-fg); --sb-rail-accent: var(--hc-accent); /* semantic pill ladder — nine palettes shared by status/type/severity. * Named by role, not by hue's source status, because one palette serves * several statuses (see the rules further down). */ --hc-p-blue-bg: #2b3a55; --hc-p-blue-fg: #9ec1ff; --hc-p-cyan-bg: #263a4d; --hc-p-cyan-fg: #7fc4e8; --hc-p-green-bg: #1f3d2e; --hc-p-green-fg: #6fdca4; --hc-p-olive-bg: #34402a; --hc-p-olive-fg: #b7dc8a; --hc-p-amber-bg: #3d3524; --hc-p-amber-fg: #e8c47f; --hc-p-red-bg: #45262a; --hc-p-red-fg: #ef9ba4; --hc-p-violet-bg: #3a2e4a; --hc-p-violet-fg: #c9a8f0; --hc-p-mauve-bg: #33313d; --hc-p-mauve-fg: #b9b3d6; --hc-p-neutral-bg: #262b31; --hc-p-neutral-fg: #8a949e; /* standalone signals */ --hc-danger: #ef9ba4; /* ---- typography tokens (R34/R35) ---- * Copied BY VALUE from the release UI (helm-bridge/src/client/styles.css * --mono/--body) rather than invented: the owner's requirement is the * Helm's fonts throughout the Bridge, and same names + same stacks means a * header set in --mono here is the same face as a WaaG header there. No * webfont ships — the Helm's only @font-face is the terminal-pref * JetBrains Mono, deliberately out of scope. */ --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; --body: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif; /* ---- FONT ROLES — the consumption API (Styles × Themes, PR-1) -------- * The same six semantic roles the Helm declares (helm-bridge/src/client/ * styles.css), copied BY VALUE for the same reason --mono/--body are: same * names + same stacks means a header set in --font-display here is the * same face as one there. --mono/--body above are the KIT and are no * longer consumed directly — fonts-check refuses a raw-kit consumer. * Blueprint is the IDENTITY mapping; scripts/fonts-identity.mjs proves it. */ --font-reading: var(--body); /* long-form prose: KB/help, agent transcripts */ --font-data: var(--mono); /* grids, fields, tables, metrics — tabular figures */ --font-ui: var(--body); /* controls, modals, menus, tooltips, assistant chat */ --font-display: var(--body); /* page and section headers */ --font-accent: var(--mono); /* eyebrow labels, chips, grid headers */ --font-code: var(--mono); /* code blocks and terminals */ --font-data-numeric: tabular-nums; /* role contract: data renders tabular figures */ /* ---- motion tokens ---- * Copied by VALUE from the release UI (helm-bridge/src/client/styles.css * "motion tokens (BR-D1)") rather than invented, because the owner's * requirement is that the two surfaces animate alike. Same names, same * numbers: a 220ms reveal here is the same gesture as a 220ms reveal there. * These are mode-independent — motion does not change with the theme — so * they are declared once and NOT repeated in the light block. */ --t-micro: 120ms; /* hover, press, focus — acknowledgment */ --t-standard: 220ms; /* reveals, menus, cards */ --t-deliberate: 360ms; /* drawers, entrances */ --ease-out: cubic-bezier(.2, .7, .3, 1); --ease-in: cubic-bezier(.6, .1, .8, .4); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* ---- second-tier chrome tokens ---- * The release UI's palette carries these and the console's did not, so the * borrowed components had nothing to resolve against. Written here as the * mode DEFAULT; appearance.ts overwrites the ones a theme defines with * inline custom properties (it already writes the raw --ink-2/--border-2/… * vocabulary onto ), so these are the pre-hydrate floor. */ --hc-ink2: #93a3ba; /* secondary text */ --hc-border2: #2a3a55; /* raised borders */ --hc-accent-dim: #83bd4f2e; --hc-onaccent: #0c1207; /* link + selection idiom floors (the Helm's a{color:var(--sea)} and * hover --accent-2) — overwritten inline per theme by appearance.ts's * UI_TOKEN_VARS loop; these are the pre-hydrate values. */ --sea: #4C8FE8; --accent-2: #a3d478; /* chat send accent (Claude terracotta) — the Helm's --send seat, copied * by value; a theme may override via an inline --send (themes write * --send, never --pi-send). Send-button INK is white in both modes, the * Helm's own hardcode on .pi-sendbtn. Mode-independent, redeclared in * the light block by the complete-set contract. */ --send: #c96442; --send-ink: #fff; --hc-radius: 8px; /* the Helm's --radius, copied by value */ --hc-shadow: 0 16px 40px rgba(0, 0, 0, .45); --hc-hairline: rgba(255, 255, 255, .05); /* R36 — glow GEOMETRY for running indicators, consumed as * `box-shadow: var(--hc-glow) `. Dark mode glows; the light block * zeroes it, matching the Helm's deliberate `--glow: 0 0 0`. appearance.ts * re-pins it per theme MODE (themeTokenVars). */ --hc-glow: 0 0 8px; /* Replay-VM increment: the REPLAY badge. The SAME values in both token * blocks ON PURPOSE (the Bridge banner's doctrine — a replay marker must * look identical in every mode, never blend into a theme). */ --hc-replay-badge-bg: #b45309; --hc-replay-badge-fg: #fffbeb; /* FW5 (VM-fork): the FORK badge — same identical-in-every-mode doctrine. */ --hc-fork-badge-bg: #6d28d9; --hc-fork-badge-fg: #f5f3ff; /* ---- BUTTON INTENT RAMPS (Styles × Themes, PR-2) -------------------- The SAME four intents and the SAME token names the Helm declares (helm-bridge/src/client/styles.css) — authored here in the console's own --hc-* vocabulary, for the same reason the tooltip's CSS twin is: this :root has no floor for the Helm's raw --surface/--ink names, so a verbatim copy would render unstyled on a first-ever visit. The `.ibtn` component block below consumes only these names and is byte-identical on both surfaces; buttons-check refuses a drift. These need no repeat in the light block: every value is a var() onto an --hc-* token that the light block (and appearance.ts) already re-points. */ --btn-neutral-fill: var(--hc-surface2); --btn-neutral-ink: var(--hc-fg); --btn-neutral-border: var(--hc-border2); --btn-neutral-hover-fill: var(--hc-panel); --btn-neutral-hover-ink: var(--hc-accent); --btn-neutral-hover-border: var(--hc-accent); --btn-additive-fill: var(--hc-accent); --btn-additive-ink: var(--hc-onaccent); --btn-additive-border: var(--hc-accent); --btn-additive-hover-fill: var(--accent-2); --btn-additive-hover-ink: var(--hc-onaccent); --btn-additive-hover-border: var(--accent-2); --btn-destructive-fill: color-mix(in srgb, var(--hc-danger) 10%, var(--hc-surface2)); --btn-destructive-ink: var(--hc-danger); --btn-destructive-border: color-mix(in srgb, var(--hc-danger) 45%, transparent); --btn-destructive-hover-fill: color-mix(in srgb, var(--hc-danger) 26%, var(--hc-surface2)); --btn-destructive-hover-ink: var(--hc-danger); --btn-destructive-hover-border: var(--hc-danger); --btn-error-fill: color-mix(in srgb, var(--hc-p-amber-fg) 10%, var(--hc-surface2)); --btn-error-ink: var(--hc-p-amber-fg); --btn-error-border: color-mix(in srgb, var(--hc-p-amber-fg) 45%, transparent); --btn-error-hover-fill: color-mix(in srgb, var(--hc-p-amber-fg) 26%, var(--hc-surface2)); --btn-error-hover-ink: var(--hc-p-amber-fg); --btn-error-hover-border: var(--hc-p-amber-fg); /* ---- FORM-CONTROL FIELD TOKENS (Styles × Themes, PR-3a) ------------- The SAME twenty slot names the Helm declares, authored here in the console's own --hc-* vocabulary — the `--btn-*` precedent directly above. The `fc-component-block` below consumes only these names and is byte-identical on both surfaces; primitives-check refuses a drift. No repeat needed in the light block: every value is a var() onto an --hc-* token the light block already re-points. */ --fc-field-bg: var(--hc-surface2); --fc-field-ink: var(--hc-fg); --fc-field-border: var(--hc-border2); --fc-field-muted: var(--hc-muted); --fc-field-hover-border: var(--hc-accent); --fc-field-focus-border: var(--hc-accent); --fc-field-focus-ring: color-mix(in srgb, var(--hc-accent) 30%, transparent); --fc-field-disabled-ink: var(--hc-ink2); --fc-pop-bg: var(--hc-panel); --fc-pop-border: var(--hc-border2); --fc-pop-shadow: var(--hc-shadow); --fc-opt-hover-bg: var(--hc-surface2); --fc-opt-on-bg: color-mix(in srgb, var(--hc-accent) 18%, transparent); --fc-opt-on-ink: var(--hc-accent); --fc-track-off: var(--hc-track); --fc-track-on: var(--hc-accent); --fc-knob: var(--hc-muted); --fc-knob-on: var(--hc-onaccent); --fc-ok: var(--hc-p-green-fg); --fc-bad: var(--hc-danger); /* ---- SCROLLBAR + FOCUS TOKENS (Styles × Themes, PR-3c) --------------- The scroll-rail engine reads --sb-rail-ink / --sb-rail-accent; these derive the THEMED FLOOR from the same two seats using the rail's own mixes (track 6%, thumb 55%, hover 80%), so a surface that rides the floor instead of a rail still wears the rail's colours. The floor block itself is byte-identical in both CSS homes and primitives-nav-check refuses a drift. The focus ring is ONE treatment app-wide (the keyboard contract's closing row): every :focus-visible rule in either home resolves to these three tokens, and the gate names any rule that hand-picks instead. ---- */ --sb-track: color-mix(in srgb, var(--sb-rail-ink) 6%, transparent); --sb-thumb: color-mix(in srgb, var(--sb-rail-accent) 55%, transparent); --sb-thumb-hover: color-mix(in srgb, var(--sb-rail-accent) 80%, transparent); --focus-ring: var(--sb-rail-accent); --focus-ring-width: 2px; --focus-ring-offset: 2px; --chip-ink: color-mix(in srgb, var(--hc-fg) 82%, transparent); --chip-mute: color-mix(in srgb, var(--hc-fg) 58%, transparent); } /* ---- style-axis floor (owner ruling 2026-09-06, supersedes #490) ---------- style-materials.css (generated from the Helm's styles.css by ensure-style-materials.mjs, linked in index.html) carries the eight styles' `[data-style]` MATERIAL tables. Those tables speak the Helm's token vocabulary (--surface, --ink, --accent, --glass*, --radius, …), which appearance.ts ALREADY writes onto at runtime (themeTokenVars loops UI_TOKEN_VARS, whose values ARE the Helm names) — so the tables resolve once a theme is applied. This block is (1) the PRE-HYDRATE floor — first-ever visit, JS disabled, private windows — mapping the Helm names onto the console's own --hc-* equivalents (which the light block + appearance.ts re-point, so they track the theme for free), and (2) the few STRUCTURAL tokens the material tables reference that appearance.ts does NOT write: --glass*, --accent-glow, --radius (the last three copied BY VALUE from the Helm's base :root). --sea and --accent-2 already live in the block above; aux-* are decoration-only (dropped from the extract) and are not floored here. */ :root { --bg: var(--hc-bg); --bg-deep: var(--hc-bg-deep); --surface: var(--hc-surface); --surface-2: var(--hc-surface2); --surface-3: var(--hc-track); --border: var(--hc-line); --border-2: var(--hc-border2); --ink: var(--hc-fg); --ink-2: var(--hc-ink2); --ink-3: var(--hc-muted); --accent: var(--hc-accent); --accent-dim: var(--hc-accent-dim); --onaccent: var(--hc-onaccent); --yellow: var(--hc-p-amber-fg); --radius: var(--hc-radius); /* the FORM LADDER's pre-hydrate floor — helm-bridge/src/client/styles.ts FORM_VAR_NAMES, copied BY VALUE from the Helm's style-axis base table exactly as --radius/--glass* above are. helm-bridge/scripts/form-tokens.test.mjs control E refuses a registry entry with no row here AND a row whose value has drifted from the Helm's, so this copy cannot rot in silence. `--radius` itself is NOT re-floored: it stays on --hc-radius (8px, the same value the Helm's --radius-md carries), so the console keeps one theme-owned radius seat. */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; /* @@radius-non-steps — NOT the ladder. Four steps (sm/md/lg/xl) and nothing else; `pill`/`full` are SHAPES and `2xs`/`xs`/`2xl` are EXTREMES. Gated by radius-ladder.test.mjs. */ --radius-2xs: 2px; --radius-xs: 4px; --radius-2xl: 14px; --radius-pill: 999px; --radius-full: 50%; --stroke-hair: 1; --stroke-mark: 1.25; --stroke-icon: 1.7; --stroke-emph: 2.2; --stroke-cap: round; --stroke-join: round; --stroke-miter: 4; --grid-step: 28px; --grid-w: 1px; --grid-dash: 0; --seg-lit: 100%; --seg-gap: 0px; --seg-pitch: 100%; --mark-rendering: auto; --accent-glow: color-mix(in srgb, var(--accent) 42%, transparent); --glass: color-mix(in srgb, var(--surface) 60%, transparent); --glass-brd: color-mix(in srgb, var(--border-2) 62%, transparent); --glass-hi: color-mix(in srgb, #ffffff 7%, transparent); --glass-sh: 0 18px 50px -14px rgba(0, 0, 0, .6); } /* THE MARK TOKEN FLOOR — `--mark-*` (S3, #1037). The console's own half of the twelve-token transport, in the console's OWN vocabulary. The per-style `--mark-*` tables cross from the Helm inside style-materials.css (they are custom properties in a `:root[data-style]` table, which is exactly what ensure-style-materials.mjs carries); this FLOOR does not cross, because the two homes genuinely diverge and a single floor would hide that. THE RECORDED DIVERGENCE, measured: `.seismo-base` strokes `--border-2` on the Helm and `--hc-line` here, and `--s-completed` does not exist here at all (`grep -c -- '--s-completed' helm-console/src/client/styles.css` -> 0), which is why `--mark-done` is `var(--hc-p-green-fg)` rather than a name nothing else on this surface needs. Recording the divergence is the point; closing it would move a Blueprint pixel. Every value is the value its consumer already carried below, so this block moves ZERO Blueprint pixels. C2: no `--pi-*` here, ever. */ :root { --mark-radius: 3px; --mark-stroke-w: 1; --mark-cap: round; --mark-join: round; --mark-rendering: auto; --mark-ring-w: 3; --mark-track: var(--hc-track); --mark-track-brd: var(--hc-line); --mark-fill: var(--hc-accent); --mark-fill-2: var(--hc-accent); --mark-grid: var(--hc-line); --mark-done: var(--hc-p-green-fg); } :root[data-theme='light'] { /* the Helm's light-slot --glass* (base :root light block), copied by value. The vocabulary floors above are mode-independent (var() onto --hc-*), so only the glass literals need a light override. */ --glass: color-mix(in srgb, var(--surface) 74%, transparent); --glass-brd: color-mix(in srgb, var(--border-2) 70%, transparent); --glass-hi: color-mix(in srgb, #ffffff 55%, transparent); --glass-sh: 0 18px 44px -16px rgba(40, 34, 20, .35); --hc-bg: #f7f8fa; /* shell chrome — see the dark block's note; one ramp step darker. */ --hc-bg-deep: #edeff2; --hc-fg: #1c2229; --hc-accent: #1a7f4b; --hc-muted: #5b636c; --hc-line: #d5dae0; --hc-surface: #ffffff; --hc-surface2: #eef1f4; --hc-panel: #ffffff; --hc-track: #e2e6ea; --hc-scrim: rgba(20, 26, 33, 0.38); /* Pale ground + saturated ink, so the ladder keeps its hue identity while * clearing contrast on a light page. */ --hc-p-blue-bg: #dbe8ff; --hc-p-blue-fg: #1c4680; --hc-p-cyan-bg: #d6ecfa; --hc-p-cyan-fg: #14567a; --hc-p-green-bg: #d3f0e0; --hc-p-green-fg: #14683f; --hc-p-olive-bg: #e4f0d4; --hc-p-olive-fg: #43631f; --hc-p-amber-bg: #f7ecd2; --hc-p-amber-fg: #7a5514; --hc-p-red-bg: #fadcdf; --hc-p-red-fg: #8c2733; --hc-p-violet-bg: #ece0f7; --hc-p-violet-fg: #593a80; --hc-p-mauve-bg: #e6e3ee; --hc-p-mauve-fg: #4a4360; --hc-p-neutral-bg: #e4e7ea; --hc-p-neutral-fg: #545c64; --hc-danger: #a32330; /* Typography is mode-independent; redeclared here BY CONTRACT (the seam * plan pins the pair in both blocks) so the light block stays a COMPLETE * token set — the property this file's header promises. Same values. */ --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; --body: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif; /* ---- FONT ROLES — the consumption API (Styles × Themes, PR-1) -------- * The same six semantic roles the Helm declares (helm-bridge/src/client/ * styles.css), copied BY VALUE for the same reason --mono/--body are: same * names + same stacks means a header set in --font-display here is the * same face as one there. --mono/--body above are the KIT and are no * longer consumed directly — fonts-check refuses a raw-kit consumer. * Blueprint is the IDENTITY mapping; scripts/fonts-identity.mjs proves it. */ --font-reading: var(--body); /* long-form prose: KB/help, agent transcripts */ --font-data: var(--mono); /* grids, fields, tables, metrics — tabular figures */ --font-ui: var(--body); /* controls, modals, menus, tooltips, assistant chat */ --font-display: var(--body); /* page and section headers */ --font-accent: var(--mono); /* eyebrow labels, chips, grid headers */ --font-code: var(--mono); /* code blocks and terminals */ --font-data-numeric: tabular-nums; /* role contract: data renders tabular figures */ --hc-ink2: #4e5a6c; --hc-border2: #c4bba6; --hc-accent-dim: #497f1d24; --hc-onaccent: #fdfcf8; /* link/selection + send floors — see the dark block's notes. */ --sea: #1F63C8; --accent-2: #3a660f; --send: #c96442; --send-ink: #fff; --hc-shadow: 0 16px 40px rgba(28, 34, 41, .18); --hc-hairline: rgba(0, 0, 0, .05); /* Glow OFF in light mode — the Helm's own --glow is 0 in light (ruling * Q4's dispatched default; the owner may override). */ --hc-glow: 0 0 0; /* Replay badge: identical to the dark block by doctrine (see above). */ --hc-replay-badge-bg: #b45309; --hc-replay-badge-fg: #fffbeb; /* FORK badge: identical to the dark block by doctrine (see above). */ --hc-fork-badge-bg: #6d28d9; --hc-fork-badge-fg: #f5f3ff; } * { box-sizing: border-box; } body { margin: 0; /* Style-axis GROUND (owner ruling 2026-09-06): the body paints the chosen style's background layer, exactly as the Helm's body does. Blueprint's --bgl-layer is the shipped radial; canvas styles degrade to their CSS-only still here (the Bridge home runs no background canvas — the ruling permits it). Fallbacks keep the flat --hc-bg if style-materials.css is absent. */ background-color: var(--bgl-color, var(--hc-bg)); background-image: var(--bgl-layer, none); background-attachment: var(--bgl-attach, scroll); /* The three background LONGHANDS (#773). A ground that is a STACK carries its geometry PER LAYER, and `--bgl-layer` cannot hold a size list, a position list or a repeat mode. Synthwave's held frame — what the reduce lanes paint in place of the torn-down canvas — is eleven layers whose whole gesture is its position list, so without these three the home renders the flat ramp. Same fallback idiom as the three lines above: a style declaring none of them paints unchanged. */ background-size: var(--bgl-size, auto); background-position: var(--bgl-position, 0% 0%); background-repeat: var(--bgl-repeat, repeat); color: var(--hc-fg); /* R35: the Helm's body stack, via the token — one of FOUR divergent hardcoded stacks this file used to carry (body, .hc-detail, the audit action pills, .hc-subject-id), all now pointed at --body/--mono. */ font: 14px/1.5 var(--font-ui); } /* ---- native controls ride the UI role (the style axis' blind spot) ---- `button`, `input`, `select` and `textarea` do NOT inherit `font` from their parent: the UA stylesheet gives each its own default family, so a control nobody wrote a font rule for renders in the BROWSER's face under every style — Arial in Chromium — while the whole page around it obeys `--font-ui`. Measured 2026-09-07 by the style-parity probe: a `