/* * COMPILED ARTIFACT, generated by build/build-styles.mjs. Do not hand-edit. * This is the single stylesheet consumers link. It is the modular sources under * tokens/ and parts/ concatenated in cascade order. To change it, edit the * sources and/or build/styles.manifest.css (the import order), then regenerate: * cd build && npm run build:styles * Sources of truth: tokens/*.css, parts/*.css, ordered by build/styles.manifest.css. * Concatenated (not @import-ed) so an HTTP-served page makes one request instead * of an @import round-trip waterfall; file:// is unaffected either way. */ /* ===== tokens/colors.css ===== */ /* Foundational — Color tokens Near-black ink on cool near-white paper. ONE selective accent (signal), reserved for live / now / recommended wayfinding ONLY. Status colors are muted + harmonized; a chip always pairs a dot with a WORD. */ :root { /* color-scheme names which NATIVE-UI palette the browser paints — scrollbars, form controls, the default focus outline. Native UI ignores our tokens, so without this a dark page still paints the browser-default BRIGHT scrollbar, the loudest thing on an otherwise calm dark surface. Declared explicitly on BOTH sides (light here; dark in each dark path below) so native UI follows the theme rather than the reader's OS. */ color-scheme: light; /* Ink ramp — text on paper, darkest to faintest. Neutral GRAPHITE ink: a whisper of cool, no navy, never pure black. Reads as refined printed ink rather than a saturated screen dark. */ --ink: #272a2e; /* primary headings, strongest text */ --ink-2: #454952; /* secondary headings, strong body */ --body: #636a73; /* default body copy */ --mut: #686e77; /* muted / supporting text — meets WCAG AA on paper (4.53) and panel (5.14) */ --faint: #aeb2b9; /* faintest text, disabled, hairline labels */ /* Surfaces — cool near-white paper, white panels, hairlines */ --paper: #eef1f3; /* page background, cool near-white (future paper) */ --panel: #ffffff; /* flat content card / pane */ --well: #e8ecef; /* subordinate island set INTO the flow: code, figure media, callout. Recessed a touch below paper, no shadow (a panel lifts, a well recedes). Holds strong / body / code text at WCAG AA (ink-2 7.6, body 4.6); muted text stays on paper/panel, not here. */ --line: #e3e6ea; /* hairline border, default */ --line-2: #d5d9df; /* stronger hairline, dividers */ --line-fine:#edf0f3; /* finer/lighter hairline for schematic rules */ --scrim: rgba(20, 21, 26, 0.46); /* dimming wash behind an overlay; theme-aware (dark gets a pure-black, higher-alpha override) */ --tick: #c7ccd3; /* minor ruler ticks */ --tick-2: #adb2ba; /* major ruler ticks */ /* Event-marker drop-line colour — the quiet vertical a bar-chart annotation drops from its word to the bar it marks. A dedicated semantic name (not a raw --line). RF's intent for this indicator, verbatim, is "a very faint thin line"; the meaning is carried by the WORD directly above it (colour is never alone), so the line stays a faint position tick, never a high-contrast rule. Aliased to --tick-2, the chart's own MAJOR-RULER-TICK strength (#adb2ba light / #565d66 dark), so an event marker reads as one of the chart's quiet ruler lines, at home with the axis and grid rather than louder than them. It is faintest where it matters least (over a filled bar) and clearest over the open plot ground above the bar, exactly where the eye picks up the drop from the word. A single flat token cannot ALSO clear WCAG's 3:1 non-text floor over every possible bar fill; that floor does not bind here because the line conveys no information on its own (the word and the screen-reader summary carry the event), so honouring RF's faint-hairline intent is correct over forcing a heavier mark. Re-resolves per theme and in print (--tick-2 restates in the forced light palette). */ --chart-mark: var(--tick-2); /* Signal accent — Cabin navy. LIVE / NOW / RECOMMENDED wayfinding only. Never a status. Never a content fill. */ --signal: #294a78; /* primary accent — navy with gravitas */ --signal-deep: #1d3458; /* pressed / deep accent */ --signal-soft: #eaedf3; /* faint accent wash (active row, selected) */ --signal-line: #c6cfe0; /* accent hairline */ /* Keyboard-focus ring — system-wide :focus-visible colour. Derived from --signal so it stays in the one accent family; calm but clearly visible. Use as: outline: 2px solid var(--focus); outline-offset: 2px. */ --focus: color-mix(in srgb, var(--signal) 70%, transparent); /* Status — cleared / sage green */ --ok-ink: #3f5e4d; --ok-bg: #eaeeeb; --ok-line: #d4ddd6; --ok-dot: #5e8468; /* Status — in progress / muted ochre (warm, but chroma held to sage's level so it never reads as candy amber). */ --warn-ink: #7a611c; --warn-bg: #efeae1; --warn-line: #ddd5c4; --warn-dot: #9b8350; /* Status — blocked / muted clay (warm-red dialled back to the one muted level) */ --blk-ink: #74463b; --blk-bg: #efe7e3; --blk-line: #ddccc6; --blk-dot: #9f6356; /* Status — not started / cool stone (clearly neutral). Ink darkened from #6f7177 so the small "not started" word and the journey process kicker clear WCAG AA on their own --na-bg tint (was 4.06, now 5.16). */ --na-ink: #5f6166; --na-bg: #eceae6; --na-line: #d9d7cf; --na-dot: #abb0b4; /* Live-state beacon — the status triad for the animated indicator (sphere / status dot). A notch livelier than the muted chip dots on purpose: this is the one moving "how are things" signal. Still held off candy so it sits in the same calm family as the chip dots, never out-shouting --signal. */ --state-ok: #538d66; /* healthy / on track */ --state-warn: #a88948; /* waiting / in progress */ --state-blk: #a85348; /* needs action now */ /* Data-series ramp — a navy-to-faint sequence for share/stacked composition only (never status). Anchored on --signal so it stays in the one accent family. */ --data-1: var(--signal); --data-2: #7a8fab; --data-3: #a9b7c9; --data-4: #d0d7e1; /* Semantic aliases — the names a few components happen to read; not a preferred layer. Most components read the raw ramp directly. */ --text-body: var(--body); --text-muted: var(--mut); /* --text-faint is the alias that VISIBLE faint-weight labels read (kickers, column heads, measure captions). It must clear WCAG AA, so it resolves to --mut (5.14 light / 4.58 dark on panel), NOT the raw --faint (2.12 light / 2.58 dark — fails AA). --faint stays for genuinely non-text or disabled uses only (placeholders, disabled caret/knob, the data-ramp tail). */ --text-faint: var(--mut); --surface-page: var(--paper); --accent: var(--signal); --accent-deep: var(--signal-deep); --accent-line: var(--signal-line); /* Emphasis-accent TEXT (Recommended marker, selected tab/filter/sidenav, open accordion label, pressed segmented control, in-prose accent bold). Distinct from --signal-deep (the pressed/deep FILL/border accent): as TEXT, --signal-deep clears WCAG AA in light but fails it on the dark surface (~3.8-4.2:1), so this alias flips to the brighter --signal in every dark path (explicit data-theme="dark" AND OS-driven auto-dark below). Fills and borders keep reading --signal-deep directly. */ --accent-text: var(--signal-deep); --on-accent: #ffffff; /* text / glyphs on a signal-filled surface (button, live badge) */ } /* Default paper is COOL "future-white" (the :root values above): a calm, precise, low-chroma near-white that holds the blue glass and the signal orb without a warm cast fighting them. data-theme="cool" is the default. The only theme override is DARK, below. */ /* DARK theme — the full ramp re-declared for a near-black cool graphite surface. "Always implement light AND dark." Every text colour resolves to the inverted ink ramp, surfaces to dark paper/panel/lines, status keeps the one muted level (lightened to read on dark, dot+word still paired), the one accent stays navy but lifts so it reads as light wayfinding on dark. Contrast verified: ink 15:1, ink-2 10:1, body 6.8:1, signal 6.7:1, status dots 4.8-6:1. Glass / mesh dark overrides live in tokens/mesh.css. SELECTION CONTRACT — which theme a page gets: • Explicit wins. A page that sets data-theme on ("cool" or "dark") is PINNED to that theme; the reader's OS preference is ignored. This is the catalog's own behaviour (the runtime always sets data-theme). • No attribute = follow the OS. A page that sets NO data-theme auto-darkens when the reader's OS is in dark mode, via the @media block below, and stays light otherwise. This is the default for a static report or landing page handed to a person. The @media :root:not([data-theme]) ramp below MUST stay value-identical to this [data-theme="dark"] ramp. Plain CSS has no way to reference a declaration set, so the two are a synchronized pair: change one, change the other. */ [data-theme="dark"] { /* Native UI follows the theme: paint dark scrollbars / form controls, not the browser-default bright ones. Twin of the light-path color-scheme in :root. */ color-scheme: dark; /* Ink ramp — light text, darkest (strongest) to faintest */ --ink:#e9ebee; --ink-2:#c2c6cc; --body:#9aa0a8; --mut:#828892; --faint:#5a606a; /* Surfaces — near-black cool graphite paper, lifted panels, dark hairlines */ --paper:#15171a; --panel:#1d2024; --well:#101216; --line:#2c3036; --line-2:#3a3f47; --line-fine:#23262b; --tick:#3f454d; --tick-2:#565d66; /* Scrim: pure black at higher alpha. The dark page is already near-black, so the light-theme near-black tint would not separate the dimmed area from the panel. */ --scrim:rgba(0, 0, 0, 0.76); /* Signal accent — navy lifted to read as light wayfinding on dark. --focus inherits this via color-mix, no separate override needed. */ --signal:#7da0d4; --signal-deep:#5e82bd; --signal-soft:#202833; --signal-line:#34415a; /* Emphasis-accent TEXT flips to the brighter --signal on dark (AA: ~5.6:1); --signal-deep stays the FILL/border accent. */ --accent-text:var(--signal); --on-accent:#0f1114; /* dark glyphs on a lifted-navy fill */ /* Status — cleared / sage (lightened, chroma held to the one muted level) */ --ok-ink:#a6c9b0; --ok-bg:#222f26; --ok-line:#394c3e; --ok-dot:#6eaa7e; /* Status — in progress / muted ochre */ --warn-ink:#ccbfa4; --warn-bg:#302b21; --warn-line:#4d4638; --warn-dot:#b09b6d; /* Status — blocked / muted clay */ --blk-ink:#cea9a1; --blk-bg:#342623; --blk-line:#513d38; --blk-dot:#b87d6f; /* Status — not started / stone */ --na-ink:#acb2b9; --na-bg:#282b2f; --na-line:#3f454a; --na-dot:#8c949b; /* Live-state beacon — a notch livelier than the chip dots, still off candy */ --state-ok:#69b582; --state-warn:#bfa469; --state-blk:#c37065; /* Data-series ramp — anchored on the lifted signal, fading to faint on dark */ --data-2:#5c7195; --data-3:#46556e; --data-4:#333d4d; /* Ink on the dark glass surface lives in tokens/mesh.css (single owner). */ } /* OS-driven auto dark — honour the reader's operating-system preference for any page that has NOT pinned a theme. An explicit data-theme always wins because [data-theme="dark"] above and the [data-theme="cool"]-implied :root defaults both carry the attribute, so :root:not([data-theme]) excludes them. This is the synchronized twin of the [data-theme="dark"] ramp above. Keep the values identical. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { /* Native UI follows the theme (see the [data-theme="dark"] twin). Keep identical. */ color-scheme: dark; /* Ink ramp — light text, darkest (strongest) to faintest */ --ink:#e9ebee; --ink-2:#c2c6cc; --body:#9aa0a8; --mut:#828892; --faint:#5a606a; /* Surfaces — near-black cool graphite paper, lifted panels, dark hairlines */ --paper:#15171a; --panel:#1d2024; --well:#101216; --line:#2c3036; --line-2:#3a3f47; --line-fine:#23262b; --tick:#3f454d; --tick-2:#565d66; --scrim:rgba(0, 0, 0, 0.76); /* Signal accent — navy lifted to read as light wayfinding on dark */ --signal:#7da0d4; --signal-deep:#5e82bd; --signal-soft:#202833; --signal-line:#34415a; /* Emphasis-accent TEXT flips to the brighter --signal on dark (AA: ~5.6:1); --signal-deep stays the FILL/border accent. */ --accent-text:var(--signal); --on-accent:#0f1114; /* Status — cleared / sage */ --ok-ink:#a6c9b0; --ok-bg:#222f26; --ok-line:#394c3e; --ok-dot:#6eaa7e; /* Status — in progress / muted ochre */ --warn-ink:#ccbfa4; --warn-bg:#302b21; --warn-line:#4d4638; --warn-dot:#b09b6d; /* Status — blocked / muted clay */ --blk-ink:#cea9a1; --blk-bg:#342623; --blk-line:#513d38; --blk-dot:#b87d6f; /* Status — not started / stone */ --na-ink:#acb2b9; --na-bg:#282b2f; --na-line:#3f454a; --na-dot:#8c949b; /* Live-state beacon */ --state-ok:#69b582; --state-warn:#bfa469; --state-blk:#c37065; /* Data-series ramp */ --data-2:#5c7195; --data-3:#46556e; --data-4:#333d4d; } } /* ===== tokens/typography.css ===== */ /* Foundational — Typography tokens System neutral sans. No web fonts (offline, timeless, ages well). No monospace as a reading or display look (reads sci-fi); mono is for code content only (see docs/USAGE.md). No serif. Hierarchy comes from WEIGHT (400 body / 600 headings+labels) and SIZE only. */ :root { --font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; /* Weights — only two */ --weight-body: 400; --weight-strong: 600; /* Type scale (px) — calm, limited steps */ --text-svg-micro: 9px; /* in-SVG axis/donut micro-labels only; one notch below the chrome floor */ --text-micro: 10px; /* tiny chrome only: tooltip values, meter flags. Not for reading copy. */ --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-base: 15px; --text-md: 17px; --text-lg: 20px; --text-xl: 25px; --text-2xl: 31px; --text-3xl: 39px; /* Line heights */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.6; /* Tracking — single source of truth for letter-spacing across the system. Label tracking has three steps (the uppercase-label voice was drifting to 0.07 / 0.12 / 0.14 raw across parts/ and specimens; these tokens hold it). */ --tracking-tighter: -0.04em; /* big display figures (countdown, donut centre) */ --tracking-figure: -0.03em; /* mid big-figure tightening (hero figure, KPI figure) */ --tracking-tight: -0.01em; /* large headlines */ --tracking-normal: 0; --tracking-label: 0.07em; /* default uppercase label tracking */ --tracking-label-loose: 0.12em; /* wider eyebrows / app-bar labels */ --tracking-label-wide: 0.14em; /* widest tracked micro-labels */ /* Label treatment — uppercase, tracked. Derives from the tracking scale so label tracking lives in exactly one place (no duplicate 0.07em literal). */ --label-size: var(--text-xs); --label-spacing: var(--tracking-label); --label-weight: var(--weight-strong); /* Display / figure type — off the reading scale, for the one big number. Tokenized so the countdown and large figures retune with the system. */ --text-display: 56px; /* large countdown / hero figure */ --text-figure: 22px; /* donut centre value, mid-figure */ } /* ===== tokens/spacing.css ===== */ /* Foundational — Spacing, radii, shadow, motion tokens Spacing on a small consistent scale. Don't hand-place px. */ :root { /* Spacing scale (4px base) */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* Radii */ --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px; /* Hairline width */ --hair: 1px; /* Signature dot diameter (status + now dots) */ --dot: 7px; /* Derived micro-dimensions & patterns for rendered and enhanced blocks (pacing, vintage, line chart, ledger). Each off-scale raw value lives here ONCE, named, so the blocks stay tokens-only and a change propagates from a single source. */ --stroke-2: 2px; /* a double-hairline: the vintage most-recent-forecast box; also focus-ring width/offset + line-chart legend rule */ --legend-sw-w: 18px; /* legend swatch width (pacing + vintage + line chart) */ --legend-sw-h: 10px; /* bar-style legend swatch height (pacing fills) */ --legend-sw-h-box: 14px; /* cell-style legend swatch height (vintage cells, pacing target) */ --legend-sw-r: 3px; /* legend swatch corner */ --vintage-min-w: 460px; /* min table width before it scrolls horizontally on a phone */ --caret-half: 4px; /* caret triangle half-base (the ledger section toggle's CSS-border caret) */ --caret-rise: 5px; /* caret triangle height (the same caret) */ /* Page container — the canonical content max-width (one source for page + app bar). */ --page-max: 1180px; /* Reading-column frame for a composed READING page (document, decision, briefing): the one-width column plus its side padding (780px + 2 x space-8). Ratified 2026-07-06: a reading page carries ONE content width - prose, cards, tables and callouts all share both edges; the two-width layout (narrow prose inside wider furniture) read as imbalance. App surfaces (the dashboard) keep the wide --page-max frame: they are instruments, not reading columns. */ --page-measure: 844px; /* Sticky app-bar height. An in-page anchor target (a section) leaves this much clearance above itself (scroll-margin-top) so a scrolled-to section is not hidden under the sticky bar. Tokenised so the value is not a raw magic number. */ --appbar-clearance: 88px; /* Reading measures — the river's lane widths. Ratified 2026-07-06: the measure and wide lanes are the SAME 780px, because a reading page carries one content width (the one-width doctrine above); the lanes stay as named hooks so a page that ever needs a distinct wide lane changes one token, not its markup. Pixels, not ch: the column must equal the card/table width exactly, which is a page geometry, not a type metric. 780px sits at the wide edge of the reading-column convention (Confluence 760, Stripe ~760, Notion ~710/900) because our column also carries tables and cards. The lede stays shorter under a display figure. */ --measure: 780px; /* the one reading-page content width */ --measure-wide: 780px; /* same width: one-width doctrine (hook kept) */ --measure-lede: 620px; /* a lede line under a statement's display figure */ --rail-aside: 18rem; /* the sticky companion beside a main reading column */ /* Shadows — soft, low, navy-tinted to match the glass header's light. */ --shadow-flat: 0 1px 2px rgba(20, 21, 26, 0.04); --shadow-card: 0 1px 2px rgba(20, 21, 26, 0.04), 0 10px 30px -14px rgba(30, 42, 72, 0.14); --shadow-float: 0 1px 2px rgba(20, 21, 26, 0.04), 0 16px 40px -16px rgba(30, 42, 72, 0.20); /* Sticky app-bar: top hairline + a low drop, shown only once stuck. */ --shadow-bar: 0 1px 0 var(--glass-hair), 0 8px 24px -18px rgba(30, 42, 72, 0.28); /* Glass — frosted veil for the floating / alive layer only. Surface, hair, edge, frost and glow tokens live in tokens/mesh.css. */ /* Motion. Calm digital easing, no bounce on content. The motion CHARTER (docs/USAGE.md, "Motion charter: three verbs, then stillness"): light breathes, feedback answers, a value arrives, and nothing else moves. Each token below is tagged with the one verb it PRIMARILY serves (@motion ...). A couple of curves are shared, so the tag names the primary intent, not the only use; the lint (build/motion-lint.mjs) is what enforces the charter. The tag just puts the doctrine where an author reads the token. */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */ /* @motion feedback-answers. the shared calm "out" curve */ --ease-inout: cubic-bezier(0.45, 0.05, 0.2, 1); /* @kind other */ /* @motion light-breathes. the ambient loop curve (breathe, mesh, skeleton, progress) */ /* Spring: one gentle overshoot then settle, never a bounce. The curve rises fast, edges a few percent past its target, and eases back to rest. Reserved for a value ARRIVING (a progress fill growing in), so it reads snappy while staying calm and precise. A cubic-bezier can only overshoot once, so there is no oscillation. */ --ease-spring: cubic-bezier(0.34, 1.26, 0.64, 1); /* @kind other */ /* @motion value-arrives. reserved for a value arriving */ --dur-snap: 120ms; /* @kind other */ /* @motion feedback-answers. instant hover/feedback micro-transition */ --dur-fast: 140ms; /* @kind other */ /* @motion feedback-answers */ --dur-base: 220ms; /* @kind other */ /* @motion feedback-answers */ --dur-slow: 420ms; /* @kind other */ /* @motion value-arrives. a value's arrival (the meter fill grows to this over --dur-slow) */ /* Loading / ambient loops breathe slowly and never hurry: they ride the mesh and hero cadence, not the functional micro-transition scale. */ --dur-loading: 2.4s; /* @kind other */ /* @motion light-breathes. ambient / loading loop cadence */ --dur-wait: 1.5s; /* @kind other */ /* @motion value-arrives. in-flight: indeterminate progress slide, snappier than the ambient loop */ } /* ===== tokens/mesh.css ===== */ /* Foundational — living mesh tokens for the GLASS layer (header banner / hero / app bar). A slow-drifting pastel-blue gradient mesh: blobs multiply onto the near-white glass surface, heavy blur, each on its own slow keyframe. prefers-reduced-motion freezes all of it. */ :root { /* --- Shared glass surface tokens (canonical handoff values). Used by BOTH the mesh header/hero (parts/glass.css) and the .lg overlay (parts/overlay.css) so all glass in the system speaks one material language. --- */ --glass-surface: #fbfcfb; /* the panel itself reads almost white */ --glass-hair: rgba(120, 118, 110, 0.20); /* hairline border */ --glass-edge: rgba(255, 255, 255, 0.80); /* bright top light-catching edge */ --glass-shadow: 0 1px 2px rgba(20, 21, 26, 0.05), 0 16px 40px -16px rgba(30, 42, 72, 0.22); --glass-frost-1: rgba(251, 252, 251, 0.30); --glass-frost-2: rgba(251, 252, 251, 0.52); --glass-frost-blur: 6px; --glass-glow: color-mix(in srgb, var(--signal) 12%, transparent); /* faint signal light, cursor-aware — derived from --signal */ /* --- Glass overlay (.lg): the canonical floating-glass surface. Real edge REFRACTION (the background bends at the rounded rim, centre stays clear), driven by liquid-glass.js; frosted-blur fallback on Safari/Firefox. Use for nav bars, docks, status pills, hovering cards. --- */ --glass-tint: rgba(247, 246, 242, 0.42); /* surface fill — lower alpha = clearer (canonical handoff value) */ --glass-tint-solid: #f7f6f2; /* opaque .lg fill where backdrop-filter is unsupported (the solid form of --glass-tint, mirrors --tip-bg-solid) */ --glass-spec: rgba(255, 255, 255, 0.55); /* specular highlight along the top edge */ --glass-rim-top: rgba(255, 255, 255, 0.90); /* crisp lit top edge — glass caught from above */ --glass-rim-bot: rgba(255, 255, 255, 0.22); /* faint light catch on the bottom inner edge */ --glass-inner: rgba(255, 255, 255, 0.18); /* faint inner hairline so the rim reads over busy content */ --glass-fallback-blur: 14px; /* frosted-blur amount where SVG refraction is unsupported */ --glass-sat: 1.5; /* @kind other */ /* backdrop saturation behind the glass (refraction + fallback) */ /* hover data box — standardized white-glass tooltip with edge refraction */ --tip-bg: rgba(255, 255, 255, 0.62); --tip-bg-solid: #ffffff; /* fallback where backdrop-filter is unsupported */ --tip-border: rgba(255, 255, 255, 0.85); --tip-rim-top: rgba(255, 255, 255, 0.95); --tip-rim-bot: rgba(255, 255, 255, 0.45); --tip-blur: 9px; --tip-sat: 155%; /* Header mesh — pastel blue, multiplied onto the near-white surface. Saturated enough to read as visible ambient blobs through the frost veil. */ --gmesh-blob-1: #93b3e6; --gmesh-blob-2: #b3cbf0; --gmesh-blob-3: #9dbeee; --gmesh-blob-4: #a8c5ef; --gmesh-blur: 70px; --gmesh-blend: multiply; /* @kind other */ /* Dark ink reads on the light glass */ --on-glass-ink: #242a33; --on-glass-body: #565a62; --on-glass-muted: #888b92; /* --- Horizon: the ambient living-light field carried across the canvas --- A present-but-calm signal light that drifts autonomously: enough to read as a soft living glow, never a spotlight, and it does not track the cursor (only the hero panel does). The field tints the page; the bloom lights the ONE element that matters (live step, accent figure). Restraint is the rule. */ --horizon-glow: color-mix(in srgb, var(--signal) 10.5%, transparent); /* @kind color — derived from --signal; brightened from 6% to a present-and-calm ambient light, RF-authorised 2026-07-03 */ --horizon-tint: color-mix(in srgb, var(--signal) 3.8%, transparent); /* @kind color — derived from --signal */ --horizon-bloom: color-mix(in srgb, var(--signal) 55%, transparent); /* @kind color — derived from --signal */ /* Live-now bloom — the soft breathing glow on the ONE element that is live now (the lit node, the active step). One source of truth shared by .fd-lit, the journey now-node, and the pane now-node so the signature cannot drift. */ --bloom-now: 0 0 28px -8px var(--horizon-bloom); } /* DARK theme — the glass material re-stated for a dark surface. The mesh now ADDS light (screen) on dark instead of multiplying it away, blobs become deep signal-navy ambient light, frost/edge invert to a faint light catch over a dark translucent panel. Keeps "glass floats, paper reads" in the dark. */ [data-theme="dark"] { --glass-surface: #1f242c; /* dark translucent-reading panel */ --glass-hair: rgba(180, 192, 214, 0.16); /* faint light hairline */ --glass-edge: rgba(210, 222, 244, 0.22); /* soft top light-catching edge */ --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.40), 0 16px 40px -16px rgba(0, 0, 0, 0.55); --glass-frost-1: rgba(24, 28, 35, 0.30); --glass-frost-2: rgba(24, 28, 35, 0.55); --glass-glow: color-mix(in srgb, var(--signal) 17%, transparent); /* G5: raised from the :root 12% so the cursor-aware hero glow clears the dark perception floor (dark renders ~20-25% fainter) */ /* Overlay (.lg) on dark */ --glass-tint: rgba(26, 31, 40, 0.46); --glass-tint-solid: #1a1f28; /* opaque .lg fill where backdrop-filter is unsupported (solid form of dark --glass-tint) */ --glass-spec: rgba(210, 222, 244, 0.20); --glass-rim-top: rgba(210, 222, 244, 0.30); --glass-rim-bot: rgba(210, 222, 244, 0.08); --glass-inner: rgba(210, 222, 244, 0.08); /* tooltip glass on dark */ --tip-bg: rgba(30, 35, 44, 0.72); --tip-bg-solid: #1f242c; --tip-border: rgba(180, 192, 214, 0.22); --tip-rim-top: rgba(210, 222, 244, 0.28); --tip-rim-bot: rgba(210, 222, 244, 0.08); /* Mesh — deep signal-navy blobs that ADD light on the dark surface */ --gmesh-blob-1: #2f4a78; --gmesh-blob-2: #3a5891; --gmesh-blob-3: #324f80; --gmesh-blob-4: #2a4470; --gmesh-blend: screen; /* @kind other — add light on dark, not multiply */ --on-glass-ink: #e6e9ee; --on-glass-body: #b0b6bf; /* AA-compliant on-glass supporting ink over the dark mesh worst case (was #aab0b9, sub-AA behind the brightest navy blob) */ --on-glass-muted: #7d838c; } /* OS-driven auto dark for the glass material — twin of the [data-theme="dark"] block above, applied to any page that has NOT pinned a theme so the glass darkens in lock-step with the colour ramp (tokens/colors.css). Without this, an unattributed OS-dark page would render dark text on a LIGHT glass panel. Explicit data-theme still wins (the :not([data-theme]) gate excludes it). Keep these values identical to the [data-theme="dark"] block above. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --glass-surface: #1f242c; --glass-hair: rgba(180, 192, 214, 0.16); --glass-edge: rgba(210, 222, 244, 0.22); --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.40), 0 16px 40px -16px rgba(0, 0, 0, 0.55); --glass-frost-1: rgba(24, 28, 35, 0.30); --glass-frost-2: rgba(24, 28, 35, 0.55); --glass-glow: color-mix(in srgb, var(--signal) 17%, transparent); /* G5: raised from the :root 12% so the cursor-aware hero glow clears the dark perception floor (dark renders ~20-25% fainter) */ /* Overlay (.lg) on dark */ --glass-tint: rgba(26, 31, 40, 0.46); --glass-tint-solid: #1a1f28; --glass-spec: rgba(210, 222, 244, 0.20); --glass-rim-top: rgba(210, 222, 244, 0.30); --glass-rim-bot: rgba(210, 222, 244, 0.08); --glass-inner: rgba(210, 222, 244, 0.08); /* tooltip glass on dark */ --tip-bg: rgba(30, 35, 44, 0.72); --tip-bg-solid: #1f242c; --tip-border: rgba(180, 192, 214, 0.22); --tip-rim-top: rgba(210, 222, 244, 0.28); --tip-rim-bot: rgba(210, 222, 244, 0.08); /* Mesh — deep signal-navy blobs that ADD light on the dark surface */ --gmesh-blob-1: #2f4a78; --gmesh-blob-2: #3a5891; --gmesh-blob-3: #324f80; --gmesh-blob-4: #2a4470; --gmesh-blend: screen; --on-glass-ink: #e6e9ee; --on-glass-body: #b0b6bf; /* AA-compliant on-glass supporting ink over the dark mesh worst case (was #aab0b9, sub-AA behind the brightest navy blob) */ --on-glass-muted: #7d838c; } } /* Mesh blob drift — translate + scale, long slow loops. Defined here so both header and sphere reuse them. */ @keyframes mesh-drift-1 { 0% { transform: translate(0%, 0%) scale(1.00); } 50% { transform: translate(8%, 6%) scale(1.18); } 100% { transform: translate(0%, 0%) scale(1.00); } } @keyframes mesh-drift-2 { 0% { transform: translate(0%, 0%) scale(1.10); } 50% { transform: translate(-10%, 8%) scale(0.92); } 100% { transform: translate(0%, 0%) scale(1.10); } } @keyframes mesh-drift-3 { 0% { transform: translate(0%, 0%) scale(1.00); } 50% { transform: translate(6%, -8%) scale(1.22); } 100% { transform: translate(0%, 0%) scale(1.00); } } @keyframes mesh-drift-4 { 0% { transform: translate(0%, 0%) scale(1.05); } 50% { transform: translate(-7%, -6%) scale(0.95); } 100% { transform: translate(0%, 0%) scale(1.05); } } @media (prefers-reduced-motion: reduce) { .mesh-blob { animation: none !important; } } /* B2 still mode twin (kept identical to the reduced-motion rule by lint-still-mode.mjs) */ :root[data-still] .mesh-blob { animation: none !important; } /* ===== tokens/base.css ===== */ /* Foundational — base resets shared by cards and kits. Minimal; tokens carry the design. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-weight: var(--weight-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-body); background: var(--surface-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ===== parts/surface-fill.css ===== */ /* Foundational — the panel fill, declared once. A large family of components sits on the panel token: form controls, nav surfaces, chips, decision options, flow and journey nodes, timeline dots, the drawer and popover, the alert and toast. Each paints the SAME background (var(--panel)); only its border, radius and shadow differ (those stay with the component). Rather than copy that one panel-token fill into thirty-odd rules, it is declared ONCE here, as one grouped selector list. WHY THIS FILE LOADS FIRST. This is the base fill every listed component's own states and modifiers layer over: a journey node's per-type tint, a toggle's on/disabled wash, a decision option's selected wash, a link's hover. Declared before any of them (first part in build/styles.manifest.css), it is the lowest layer, so every later state or modifier (later in source, or higher in specificity) still wins exactly as it did when each rule carried its own fill. The consolidation is therefore pixel-for-pixel identical (snapshot-proven), not a restyle. A single grouped declaration also means a future change to how a panel is filled is made in one place, not hunted across eleven files. NOT here: `.fdn-card`. The public card carries the full panel recipe (fill, hairline, radius, shadow) in its own home (parts/composition.css), positioned after the decision option, flow node and tooltip so it wins an equal-specificity tie against them. Folding its fill into this first-loading group would move it BEFORE those and silently flip that order, so the card is deliberately excluded. `.fd-surface` / `.fd-pane` (the internal panel recipe) keep their border, radius and shadow in parts/pane.css and take only their fill from here. */ .fd-surface, .fd-pane, .fd-dec__opt, .fd-node, .fdn-seg, .fdn-tl-node__dot, .fdn-road__nowlabel, .fdn-scatter-dot--plain, .fdn-dep__node, .fdn-btn--secondary, .fdn-input, .fdn-select, .fdn-menu, .fdn-toggle, .fdn-control, .fdn-pager__step, .fdn-pager__step[aria-disabled="true"], .fdn-sidenav__link:hover, .fdn-sidenav__tag, .fdn-alert, .fdn-toast, .fdn-code__copy, .fdn-code__pre, .fdn-figure__tag, .fd-tag, .fdn-journey__node, .fdn-journey__elabel, .fdn-journey__loop-label, .fdn-journey__pathbtn, .fdn-drawer, .fdn-pop__trigger, .fdn-popover, .fdn-popover::before { background: var(--panel); } /* ===== parts/schematic.css ===== */ /* Foundational — schematic: a quiet precision vocabulary of thin lines. Registration corner marks, ruler ticks, fine rules, crosshair junctions, a faint measure grid. The "from the future" feeling comes from delicate, measured hairlines — NOT blueprint fonts or sci-fi type. Use sparingly: one or two of these per surface, never a full schematic overlay. */ /* --- Rules: thin dividers ------------------------------------------------- */ .fd-rule { height: var(--hair); border: 0; margin: 0; background: var(--line); } .fd-rule--fine { background: var(--line-fine); } .fd-rule--strong{ background: var(--line-2); } .fd-vrule { width: var(--hair); align-self: stretch; background: var(--line); } .fd-vrule--fine { background: var(--line-fine); } /* --- Registration corner marks ------------------------------------------- */ /* Wrap a surface in .fd-frame, then drop four bracket spans inside it: … tr / bl / br. The signature precision detail: an L-bracket in fine hairline at each corner. */ .fd-frame { position: relative; } .fd-corner { position: absolute; width: 12px; height: 12px; color: var(--line-2); pointer-events: none; } .fd-corner::before, .fd-corner::after { content: ""; position: absolute; background: currentColor; } .fd-corner::before { width: 100%; height: var(--hair); } /* horizontal arm */ .fd-corner::after { width: var(--hair); height: 100%; } /* vertical arm */ .fd-corner--tl { top: -1px; left: -1px; } .fd-corner--tl::before { top: 0; left: 0; } .fd-corner--tl::after { top: 0; left: 0; } .fd-corner--tr { top: -1px; right: -1px; } .fd-corner--tr::before { top: 0; right: 0; } .fd-corner--tr::after { top: 0; right: 0; } .fd-corner--bl { bottom: -1px; left: -1px; } .fd-corner--bl::before { bottom: 0; left: 0; } .fd-corner--bl::after { bottom: 0; left: 0; } .fd-corner--br { bottom: -1px; right: -1px; } .fd-corner--br::before { bottom: 0; right: 0; } .fd-corner--br::after { bottom: 0; right: 0; } /* --- Ruler tick scale ----------------------------------------------------- */ /* A measured baseline: a thin top rule with minor ticks every 12px and major ticks every 60px. Reads "instrument", not "blueprint". */ .fd-tickrule { height: 10px; border-top: var(--hair) solid var(--line-2); background-image: repeating-linear-gradient(to right, var(--tick-2) 0, var(--tick-2) var(--hair), transparent var(--hair), transparent 60px), repeating-linear-gradient(to right, var(--tick) 0, var(--tick) var(--hair), transparent var(--hair), transparent 12px); background-repeat: no-repeat, no-repeat; background-size: 100% 10px, 100% 5px; background-position: top left, top left; } .fd-tickrule--down { transform: scaleY(-1); } /* ticks hang upward instead */ /* --- Crosshair junction --------------------------------------------------- */ /* A tiny plus mark for an intersection or a measured point. */ .fd-crosshair { position: relative; width: 10px; height: 10px; flex: none; color: var(--line-2); } .fd-crosshair::before, .fd-crosshair::after { content: ""; position: absolute; background: currentColor; } .fd-crosshair::before { left: 50%; top: 0; width: var(--hair); height: 100%; transform: translateX(-50%); } .fd-crosshair::after { top: 50%; left: 0; height: var(--hair); width: 100%; transform: translateY(-50%); } /* --- Faint measure grid --------------------------------------------------- */ /* Extremely subtle 24px grid. A background utility for a single framed area; never the whole page. */ .fd-grid { background-image: linear-gradient(to right, var(--line-fine) var(--hair), transparent var(--hair)), linear-gradient(to bottom, var(--line-fine) var(--hair), transparent var(--hair)); background-size: 24px 24px; } /* --- Measure label -------------------------------------------------------- */ /* A small tracked caption for schematic annotations (no monospace). */ .fd-measure { font-size: var(--text-2xs); font-weight: var(--weight-strong); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); } /* ===== parts/journey.css ===== */ /* Foundational — Journey: an expected-behaviour flow (steps, decisions, branches, loops) on a deterministic vertical spine. The hydrator ([data-flow] in fdn-behaviors.js) lays nodes out by longest forward path (rows) and a primary-stays / secondary-steps DFS (columns), then measures the rendered node cards and draws SVG wires between them. Loops lift into a right-hand return corridor and re-enter a straight trunk; on a narrow phone the whole thing does NOT reflow. It scales to fit the viewport (and pinch-zooms) so the spine, branches, and loops stay readable as one diagram. FDS discipline: - Tokens only; light (cool) and dark both re-resolve every value. - Node TYPE is carried by SHAPE + a printed WORD (Start / Step / Decision / End), never colour. A decision also reads as a question. - Exactly ONE node — the live "now" node — uses the single --signal accent (ring + "• Now" + a breathing bloom). Nothing else touches --signal. - Every branch edge and every loop carries a WORD chip; a back wire also reads one faint luminance step below the forward wire, but the word carries the meaning. */ /* --- Stage: the measured coordinate space ----------------------------------- */ /* overflow:hidden clips the scaled stage's unscaled layout box so a phone-width page never gains horizontal scroll (the stage's transform shrinks the visual, but its layout box keeps its natural pixel width). */ .fdn-journey { position: relative; width: 100%; max-width: 100%; overflow: hidden; } /* the transform value (scale-to-fit on a phone) is set inline by the hydrator; the wrapper height is also set inline by the hydrator to match the scaled box. */ .fdn-journey__stage { position: relative; width: 100%; transform-origin: top left; } /* hydrator sets an explicit px width + height on the stage in wide mode so the absolutely-positioned nodes and the SVG share one pixel coordinate space. */ .fdn-journey__wires { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 0; } /* --- Node card: ONE shape for every type; COLOUR (paired with the WORD) denotes type ---------------------------------------------------------------------- Every node, every type, is the SAME rounded rectangle. Shape no longer carries type, so shape can no longer be inconsistent. The uppercase kicker WORD (Start / Step / Decision / End) stays on every card and is the SOURCE OF TRUTH: the type tint is a scan accelerator layered on the word, never alone. The measured -bg fills are nearly inseparable in luminance (and collapse in dark), so the fill cannot carry type; the -ink kicker word, high-contrast on the fill in both themes, carries it and reads in pure greyscale. */ .fdn-journey__node { position: absolute; box-sizing: border-box; z-index: 1; min-width: 92px; max-width: 176px; display: grid; gap: 1px; padding: var(--space-2) var(--space-3); border: var(--hair) solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-flat); text-align: center; cursor: default; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .fdn-journey__node:hover, .fdn-journey__node.is-hot { box-shadow: var(--shadow-card); } .fdn-journey__node:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .fdn-journey__type { font-size: var(--text-micro); font-weight: var(--weight-strong); letter-spacing: var(--tracking-label-loose); text-transform: uppercase; color: var(--text-faint); } .fdn-journey__label { color: var(--ink-2); font-weight: var(--weight-strong); font-size: var(--text-sm); line-height: 1.2; overflow-wrap: anywhere; } /* TYPE COLOUR: each type maps to ONE muted status family (4-token set that re-resolves in dark): -bg fill, -line border, -ink kicker word. --signal is used by NO type; it is reserved for the single live 'now' node. The WORD on the card is the source of truth, so colour here is never alone. start = sage/ok ("begin here"); process/Step = neutral/na (the most common type, so the spine stays calm); decision = ochre/warn ("choose"); terminal/End = clay/blk ("stop here"). */ .fdn-journey__node--start { background: var(--ok-bg); border-color: var(--ok-line); } .fdn-journey__node--start .fdn-journey__type { color: var(--ok-ink); } .fdn-journey__node--process { background: var(--na-bg); border-color: var(--na-line); } .fdn-journey__node--process .fdn-journey__type { color: var(--na-ink); } .fdn-journey__node--decision { background: var(--warn-bg); border-color: var(--warn-line); } .fdn-journey__node--decision .fdn-journey__type { color: var(--warn-ink); } .fdn-journey__node--terminal { background: var(--blk-bg); border-color: var(--blk-line); } .fdn-journey__node--terminal .fdn-journey__type { color: var(--blk-ink); } /* endpoints prefer a single line: a short ending word stays on one line because it fits inside max-width. A long ending (e.g. "Closed: cannot reproduce") is allowed to wrap at its spaces rather than spill past the border — overflow-wrap stays normal so it only ever breaks between words, never mid-word, and the box is the same rounded rectangle as every other type. (A hard white-space:nowrap here forced long endings onto one line and clipped them past the right wall.) */ .fdn-journey__node--start .fdn-journey__label, .fdn-journey__node--terminal .fdn-journey__label { overflow-wrap: normal; } /* --- The ONE live node — single --signal accent, breathing bloom on a layer --- */ .fdn-journey__node--now { border-color: var(--signal-line); } .fdn-journey__node--now::after { content: ""; position: absolute; inset: calc(-1 * var(--hair)); border-radius: inherit; z-index: -1; pointer-events: none; box-shadow: 0 0 0 var(--hair) var(--signal-line), var(--bloom-now); animation: fd-breathe 6s var(--ease-inout) infinite; } .fdn-journey__node--now .fdn-journey__type { color: var(--signal); } .fdn-journey__now { font-size: var(--text-2xs); font-weight: var(--weight-strong); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--signal); } .fdn-journey__now::before { content: "• "; } @media (prefers-reduced-motion: reduce) { .fdn-journey__node--now::after { animation: none !important; } } /* B2 still mode twin (kept identical to the reduced-motion rule by lint-still-mode.mjs) */ :root[data-still] .fdn-journey__node--now::after { animation: none !important; } /* Loop targets need no marker: the drawn back-wire and its word carry the return. The class is kept for hooks but renders nothing extra. */ /* --- Wires (SVG; colours must come from CSS) -------------------------------- */ .fdn-journey__wire { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; } /* the return/loop wire is a FAINTER SOLID stroke one clear luminance step below the forward --line-2 wire (same 1.5 weight). --line vs --line-2 reads as a two-step line ladder in both themes and in print; the loop-label WORD carries the meaning. */ .fdn-journey__wire--back { stroke: var(--line); } .fdn-journey__arrowhead { fill: var(--line-2); } /* --- Edge word chips (DOM, so a word always backs a branch) ----------------- */ .fdn-journey__elabel, .fdn-journey__loop-label { position: absolute; transform: translate(-50%, -50%); z-index: 2; padding: 1px var(--space-2); border-radius: var(--radius-pill); border: var(--hair) solid var(--line); font-size: var(--text-2xs); font-weight: var(--weight-strong); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--mut); white-space: nowrap; pointer-events: none; } .fdn-journey__loop-label { border-color: var(--line-2); color: var(--ink-2); } /* --- Path highlighting: dim the off-path subset, leave the path at full read --- A pure post-layout overlay toggled by the hydrator when the data carries a "paths" array. Identity is carried by the path's word chip in the control bar, NOT by colour on the diagram, so this uses NO --signal / --accent (those stay unique to the single "now" node). The signal here is contrast of presence: off-path elements recede to a low opacity, the chosen path stays present. */ .fdn-journey__wire, .fdn-journey__arrowhead, .fdn-journey__elabel, .fdn-journey__loop-label { transition: opacity var(--dur-fast) var(--ease-out); } .fdn-journey--pathed .fdn-journey__node.is-off, .fdn-journey--pathed .fdn-journey__wire.is-off, .fdn-journey--pathed .fdn-journey__arrowhead.is-off, .fdn-journey--pathed .fdn-journey__elabel.is-off, .fdn-journey--pathed .fdn-journey__loop-label.is-off { opacity: 0.22; } /* on-path nodes gain a hair more presence via a stronger shadow only; the type tint border stays (colour identity is orthogonal to path identity), and the off-path opacity-dim already carries the presence contrast. On-path identity is the path's control-bar word, never colour, so no accent is added here. */ .fdn-journey--pathed .fdn-journey__node:not(.is-off) { box-shadow: var(--shadow-card); } /* on-path WIRES darken so the chosen route (its forward and loop wires alike) reads as one connected line instead of the default faint hairline */ .fdn-journey--pathed .fdn-journey__wire:not(.is-off) { stroke: var(--mut); } .fdn-journey--pathed .fdn-journey__arrowhead:not(.is-off) { fill: var(--mut); } /* The control bar: a row of word chips above the stage. A SIBLING of the stage, so it is never wiped or scaled; it lives outside the measured pixel space. */ .fdn-journey__paths { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); } .fdn-journey__pathbtn { appearance: none; -webkit-appearance: none; font: inherit; cursor: pointer; padding: var(--space-1) var(--space-3); border: var(--hair) solid var(--line); border-radius: var(--radius-pill); color: var(--mut); font-size: var(--text-2xs); font-weight: var(--weight-strong); letter-spacing: var(--tracking-label); text-transform: uppercase; white-space: nowrap; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .fdn-journey__pathbtn:hover { color: var(--ink-2); border-color: var(--line-2); } .fdn-journey__pathbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* active chip: raised ink + stronger hairline. The word + this lift + aria-pressed all carry the active state; colour is never the sole signal. */ .fdn-journey__pathbtn.is-on { color: var(--ink-2); border-color: var(--line-2); } @media (prefers-reduced-motion: reduce) { .fdn-journey__node, .fdn-journey__wire, .fdn-journey__arrowhead, .fdn-journey__elabel, .fdn-journey__loop-label, .fdn-journey__pathbtn { transition: none !important; } } /* B2 still mode twin (kept identical to the reduced-motion rule by lint-still-mode.mjs) */ :root[data-still] .fdn-journey__node, :root[data-still] .fdn-journey__wire, :root[data-still] .fdn-journey__arrowhead, :root[data-still] .fdn-journey__elabel, :root[data-still] .fdn-journey__loop-label, :root[data-still] .fdn-journey__pathbtn { transition: none !important; } /* --- Mobile: the SAME 2D diagram, scaled to fit ----------------------------- No reflow, no stacking, no hidden wires. The hydrator renders the full wide diagram at every width and, when the natural diagram is wider than the phone, scales the whole stage down with an inline transform so the entire flow is visible at a glance. The reader pinch-zooms to read individual node labels. .fdn-journey { overflow: hidden } above clips the scaled stage's layout box so the page never gains horizontal scroll. No block-specific mobile rule is needed: the layout is driven by the hydrator's inline transform + height, and every value is already a token that re-resolves in both themes. */ /* DARK THEME — nothing block-specific: every value above is a token that re-resolves under [data-theme="dark"]. The forward wire (--line-2) and the fainter back wire (--line, one step below) both re-resolve to stay visible on the near-black dark --paper; --line-fine would sink into it, so neither wire uses it. */ /* ===== parts/horizon.css ===== */ /* Foundational — Horizon: the living-light layer extended across the canvas. The glass header proved the path: a calm ambient light that drifts. Horizon carries that quality, faintly, to the whole surface — and lets the ONE element that matters (an accent figure, the live step) catch the light and breathe. Restraint is the rule: the field is present and calm, an autonomous drift that does not track the cursor (only the hero panel is cursor-aware, RF directive 2026-07-06) — a soft light, never a spotlight; only one element per view is lit. prefers-reduced-motion stills it. */ /* Ambient field — a present-and-calm signal light that drifts autonomously over the page. Wrap content in .fd-ambient; drop one .fd-ambient__field inside. JS writes --mx / --my (percent) with the same spring physics as the glass glow, but driven by a slow time-based drift instead of the cursor, canvas-wide and far fainter. The fallbacks are the at-rest position. */ .fd-ambient { position: relative; isolation: isolate; } .fd-ambient__field { /* Fixed to the viewport, not absolutely sized to the body box, so the drifting light stays a fixed on-screen size: it no longer stretches down a tall document where the glow would dilute to a faint full-height smear. */ position: fixed; inset: 0; z-index: 0; pointer-events: none; background: /* G4: gradient sized in viewport units so the lit ellipse is a fixed on-screen size independent of any element box; its centre rides the JS --mx / --my. */ radial-gradient(58vw 48vh at var(--mx, 50%) var(--my, 36%), var(--horizon-glow), transparent 70%), radial-gradient(72vw 60vh at 82% 6%, var(--horizon-tint), transparent 72%); /* No background transition. The spring loop already smooths the drift frame to frame; a CSS transition restarted on every rAF write only added ~1-2s of lag, which made the light feel sticky and delayed. */ } .fd-ambient > *:not(.fd-ambient__field) { position: relative; z-index: 1; } /* A lit element — soft breathing signal bloom + hairline ring. Use on the single element that matters (the live flow node, an active tile). Always paired with a word. */ .fd-lit { position: relative; } .fd-lit::after { content: ""; position: absolute; inset: calc(-1 * var(--hair)); border-radius: inherit; z-index: 0; pointer-events: none; box-shadow: 0 0 0 var(--hair) var(--signal-line), var(--bloom-now); animation: fd-breathe 6s var(--ease-inout) infinite; } .fd-lit > * { position: relative; z-index: 1; } @keyframes fd-breathe { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .fd-lit::after { animation: none !important; opacity: 0.85; } /* The ambient field is stilled live by the runtime under reduced motion (it parks the spring at rest); it carries no CSS transition to suppress here. */ } /* B2 still mode — the composer-set twin of the reduced-motion rest state above, triggered by ``. Byte-identical declarations, held in lockstep with the reduced-motion path by build/lint-still-mode.mjs. The ambient field is parked by the runtime's motionStilled() gate, so it needs no rule here either. */ :root[data-still] .fd-lit::after { animation: none !important; opacity: 0.85; } /* ===== parts/glass.css ===== */ /* Foundational — glass surface for the floating / alive layer ONLY. Header banner, sticky nav, floating dock, live indicators. A gentle light glass: a near-white panel over a diffused light-blue mesh, a bright top edge, and a faint signal glow that JS moves with fluid spring physics (the glow position is the CSS --mx / --my variables). */ .fd-glass { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--glass-surface); border: var(--hair) solid var(--glass-hair); border-top-color: var(--glass-edge); box-shadow: var(--glass-shadow); isolation: isolate; } /* Mesh — diffused light-blue pastels multiplied onto the near-white surface. The layer is pinned to the panel (inset:0) and clips its own children, so the decorative blobs can never report a box past the panel's right edge (which the overflow check reads per element). The blobs bleed left/top/bottom freely; only the right reach is held in, so the soft wash survives without false overflow. */ .fd-glass__mesh { position: absolute; inset: 0; z-index: 0; overflow: hidden; filter: blur(var(--gmesh-blur)) saturate(1.05); opacity: 0.85; pointer-events: none; } .fd-glass__mesh .mesh-blob { position: absolute; width: 60%; height: 60%; border-radius: 50%; mix-blend-mode: var(--gmesh-blend); will-change: transform; } .fd-glass__mesh .mesh-blob--1 { left: -4%; top: 2%; background: radial-gradient(circle, var(--gmesh-blob-1), transparent 66%); animation: mesh-drift-1 26s ease-in-out infinite; } .fd-glass__mesh .mesh-blob--2 { left: 36%; top: 10%; background: radial-gradient(circle, var(--gmesh-blob-2), transparent 66%); animation: mesh-drift-2 32s ease-in-out infinite; } .fd-glass__mesh .mesh-blob--3 { left: 22%; top: 44%; background: radial-gradient(circle, var(--gmesh-blob-3), transparent 66%); animation: mesh-drift-3 28s ease-in-out infinite; } .fd-glass__mesh .mesh-blob--4 { left: -6%; top: 48%; background: radial-gradient(circle, var(--gmesh-blob-4), transparent 66%); animation: mesh-drift-4 30s ease-in-out infinite; } /* Frosted veil — light; lets the pastel mesh read through */ .fd-glass__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, var(--glass-frost-1), var(--glass-frost-2)); -webkit-backdrop-filter: blur(var(--glass-frost-blur)); backdrop-filter: blur(var(--glass-frost-blur)); } /* Cursor-aware glow — a faint signal light over the frost. NOT a ripple. JS sets the --mx / --my runtime variables (percentages) on this element with fluid spring physics; the fallbacks below are the at-rest position. */ .fd-glass__glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(440px circle at var(--mx, 60%) var(--my, 32%), var(--glass-glow), transparent 60%); } /* Bright top edge highlight + resting specular sheen. The crisp inset line is the lit top edge; the gradient bakes a faint default specular into the resting state so the glass reads as "catching light" without waiting for the cursor-aware glow. Matches the .lg rim treatment (overlay.css): var(--glass-spec) fading out by ~34% of the height, blended so it only lifts. */ .fd-glass__edge { position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, var(--glass-spec), transparent 34%); mix-blend-mode: screen; box-shadow: inset 0 1px 0 var(--glass-edge); } .fd-glass__body { position: relative; z-index: 2; } @media (prefers-reduced-motion: reduce) { .fd-glass__mesh .mesh-blob { animation: none !important; } } /* B2 still mode twin (kept identical to the reduced-motion rule by lint-still-mode.mjs) */ :root[data-still] .fd-glass__mesh .mesh-blob { animation: none !important; } /* ===== parts/overlay.css ===== */ /* ============================================================ Foundational — Glass Overlay (.lg) [canonical] Pair with liquid-glass.js. Apply class "lg" to any FLOATING / live surface (nav bar, dock, status pill, hovering card) and give it its own border-radius — the engine shapes the refraction lens to it. Chromium → real edge refraction (SVG feDisplacementMap in backdrop-filter) Safari/FF → automatic frosted-blur fallback (engine sets .lg-fallback on ) Per-element tuning via data-attrs (read by liquid-glass.js): data-lg-scale refraction strength px (subtle ~28 · balanced ~56 · pronounced ~92) data-lg-radius corner radius the lens is shaped to (defaults to border-radius; "0" honoured) data-lg-blur backdrop blur px (default 2) Global look via the --glass-* tokens (tokens/mesh.css); --glass-sat tunes saturation. Consumer gotchas: real refraction is Chromium-only (Safari/Firefox get the frosted-blur fallback automatically); glass needs something behind it to bend, so keep reading content on flat opaque panels; an ancestor with opacity < 1 can swallow the effect (stacking context). ============================================================ */ .lg { position: relative; background: var(--glass-tint); border: var(--hair) solid var(--glass-hair); border-top-color: var(--glass-edge); box-shadow: var(--glass-shadow); isolation: isolate; } /* Specular highlight along the top edge — the "lit glass" cue */ .lg::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; background: linear-gradient(180deg, var(--glass-spec), transparent 34%); mix-blend-mode: screen; } /* Faint inner hairline + directional rim light: a crisp lit top edge and a faint light catch along the bottom inner edge, so the glass reads as lit from above (Apple liquid-glass dimensionality) rather than a flat translucent box. */ .lg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; box-shadow: inset 0 0 0 var(--hair) var(--glass-inner), /* faint structural hairline, all round */ inset 0 var(--hair) 0 var(--glass-rim-top), /* crisp lit top edge */ inset 0 calc(-1 * var(--hair)) 0 var(--glass-rim-bot); /* soft light catch on the bottom */ } .lg > * { position: relative; z-index: 2; } /* JS-INDEPENDENT legibility floor. The base .lg fill is ~42-46% translucent, so if liquid-glass.js is disabled, blocked (CSP/extension), or fails to load, the bare .lg surface would let content bleed through at near-half opacity with no blur and become mutually illegible. These two @supports rules give a pure-CSS floor that needs no JS and no .lg-fallback class: 1. where backdrop-filter is supported -> a frosted blur floor (legible), 2. where it is NOT supported -> an opaque tint (no bleed-through). JS stays a pure enhancement: liquid-glass.js sets backdrop-filter as an INLINE style for the Chromium refraction (and .lg-fallback .lg below supplies the frosted blur it chooses), and inline styles override these rules, so refraction still wins with zero regression when JS runs. */ @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .lg { -webkit-backdrop-filter: blur(var(--glass-fallback-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-fallback-blur)) saturate(var(--glass-sat)); } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .lg { background: var(--glass-tint-solid); } } /* Fallback where SVG-in-backdrop-filter is unsupported (Safari/Firefox). liquid-glass.js adds .lg-fallback to automatically. */ .lg-fallback .lg { -webkit-backdrop-filter: blur(var(--glass-fallback-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-fallback-blur)) saturate(var(--glass-sat)); } /* ============================================================ Overlay blocks — component CSS promoted from specimens. Shared scrim (.fdn-scrim / .fdn-scrim--end), close cross (.fdn-x) and buttons (.fdn-btn) live in controls.css; these rules add only what each overlay needs beyond those primitives. Tokens only. ============================================================ */ /* Block: 49-modal. A titled dialog that rides the floating layer above a contained .fdn-scrim. Reuses .fdn-x for close and .fdn-btn for actions. */ .fdn-modal { position: relative; z-index: 1; width: 100%; max-width: 360px; min-width: 0; box-shadow: var(--shadow-float); } .fdn-modal__head { display: flex; align-items: flex-start; gap: var(--space-4); } .fdn-modal__head .fdn-card__heading { flex: 1 1 auto; min-width: 0; } .fdn-modal__body { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; } .fdn-modal__text { font-size: var(--text-sm); color: var(--body); line-height: var(--leading-normal); text-wrap: pretty; margin: 0; } .fdn-modal__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--hair) solid var(--line); } /* Block: 50-drawer. A side sheet pinned to the right edge of a contained .fdn-scrim--end. Reuses .fdn-x for close. */ .fdn-drawer { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; width: 100%; max-width: 340px; border-left: var(--hair) solid var(--line-2); box-shadow: var(--shadow-float); } .fdn-drawer__head { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-5) var(--space-5) var(--space-4); border-bottom: var(--hair) solid var(--line); } .fdn-drawer__head .fdn-card__heading { flex: 1 1 auto; min-width: 0; } .fdn-drawer__body { display: flex; flex-direction: column; min-width: 0; padding: var(--space-2); } .fdn-drawer__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-width: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); color: var(--ink-2); font-size: var(--text-sm); text-decoration: none; transition: background var(--dur-snap) var(--ease-out); } .fdn-drawer__row + .fdn-drawer__row { border-top: var(--hair) solid var(--line-fine); } .fdn-drawer__row:hover { background: var(--line-fine); } .fdn-drawer__row span:first-child { min-width: 0; overflow-wrap: anywhere; } .fdn-drawer__val { flex: none; color: var(--mut); font-size: var(--text-2xs); font-weight: var(--weight-strong); letter-spacing: var(--tracking-tight); } /* Block: 51-popover. A trigger button and a small floating panel with a pointer, sized to stay within its anchor frame at any width. */ .fdn-pop { position: relative; display: inline-block; min-width: 0; } .fdn-pop__trigger { appearance: none; -webkit-appearance: none; font: inherit; font-size: var(--text-sm); font-weight: var(--weight-strong); display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; color: var(--ink-2); border: var(--hair) solid var(--line-2); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); } .fdn-pop__trigger::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-1px) rotate(45deg); color: var(--mut); } .fdn-pop__trigger:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .fdn-popover { position: absolute; left: 0; top: calc(100% + var(--space-3)); z-index: 1; width: 232px; max-width: 100%; min-width: 0; border: var(--hair) solid var(--line-2); border-radius: var(--radius-md); box-shadow: var(--shadow-float); padding: var(--space-4); } .fdn-popover::before { content: ""; position: absolute; top: -5px; left: var(--space-5); width: 9px; height: 9px; border-left: var(--hair) solid var(--line-2); border-top: var(--hair) solid var(--line-2); transform: rotate(45deg); } .fdn-popover__title { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-strong); letter-spacing: var(--tracking-tight); color: var(--ink-2); } .fdn-popover__text { margin: 0 0 var(--space-3); font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--body); text-wrap: pretty; } .fdn-popover__link { font-size: var(--text-xs); font-weight: var(--weight-strong); color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 2px; border-radius: var(--radius-sm); } .fdn-popover__link:hover { text-decoration-color: var(--accent); } .fdn-popover__link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* ===== parts/chip.css ===== */ /* Foundational — status chip (state) + live keyline (now). A chip always pairs a small dusty dot with a WORD. Never candy color. */ .fd-chip { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-strong); line-height: 1.3; white-space: nowrap; color: var(--ink-2); } .fd-chip__dot { width: var(--dot); height: var(--dot); border-radius: 50%; flex: none; } .fd-chip--ok .fd-chip__dot { background: var(--ok-dot); } .fd-chip--warn .fd-chip__dot { background: var(--warn-dot); } .fd-chip--blk .fd-chip__dot { background: var(--blk-dot); } .fd-chip--na .fd-chip__dot { background: var(--na-dot); } /* Live "now" beacon — a PULSING dot for emphasis / attention. Neutral blue (--signal) by default = "live, no status claim". Tier it to a status with .fd-now--ok / --warn / --blk on the wrapper (or standalone .fd-now__dot--ok / --warn / --blk on a bare dot) to ride the live-state beacon triad (green / yellow / red). Pulsing only draws the eye; the colour is still paired with a WORD, never colour alone. The calm static read layer (.fd-chip / .fdn-stat dots) stays muted and is deliberately NOT tiered here. */ .fd-now { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--label-size); font-weight: var(--label-weight); letter-spacing: var(--label-spacing); text-transform: uppercase; color: var(--signal); } .fd-now--ok { color: var(--state-ok); } .fd-now--warn { color: var(--state-warn); } .fd-now--blk { color: var(--state-blk); } .fd-now__dot { --now-color: var(--signal); width: var(--dot); height: var(--dot); border-radius: 50%; flex: none; background: var(--now-color); box-shadow: 0 0 0 0 color-mix(in srgb, var(--now-color) 45%, transparent); animation: fd-now-pulse 2.4s var(--ease-out) infinite; } .fd-now--ok .fd-now__dot, .fd-now__dot--ok { --now-color: var(--state-ok); } .fd-now--warn .fd-now__dot, .fd-now__dot--warn { --now-color: var(--state-warn); } .fd-now--blk .fd-now__dot, .fd-now__dot--blk { --now-color: var(--state-blk); } @keyframes fd-now-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--now-color) 40%, transparent); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @media (prefers-reduced-motion: reduce) { .fd-now__dot { animation: none !important; } } /* B2 still mode twin (kept identical to the reduced-motion rule by lint-still-mode.mjs) */ :root[data-still] .fd-now__dot { animation: none !important; } /* Neutral tag / label — distinct from the status .fd-chip above. A .fd-chip is a STATE primitive (a status dot + a word, --ok/--warn/--blk/--na). A .fd-tag carries NO status: it is a calm bordered pill for a plain label, category, or applied filter, where the word is the whole meaning. Used by the chip-set block (static labels) and the filter-bar block (selectable filters). */ .fd-tag { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-strong); line-height: 1.3; white-space: nowrap; color: var(--body); padding: var(--space-1) var(--space-3); border: var(--hair) solid var(--line-2); border-radius: var(--radius-pill); } /* Selectable filter tag — a .fd-tag that can be turned on. Render it as a