@mkbabb/glass-ui 4.2.0 → 5.0.0

package/dist/styles/tokens/scale-paper.css

@@ -1,493 +1 @@
-/* tokens/scale-paper.css
-   §11 interactive scales & focus · §12 paper textures · §13 gold · §14 rainbow · §16 timeline · §17 metric · §19 table density · §20 platform motion.
-   Carved from the tokens.css cascade root; @import-ed by tokens.css in
-   cascade order. Same :root cascade context as its siblings. */
-:root {
-    /* ═══════════════════════════════════════════════
-       §11 INTERACTIVE SCALES & FOCUS
-       ═══════════════════════════════════════════════ */
-    --scale-hover: 1.08;
-    /* AX.W52 — the restrained BUTTON hover lift. `--scale-hover` (1.08) is an
-       8% jump — emphatic for a marquee CTA, jarring as the general hover. The
-       button family (the audacious CTAs + `btn-interactive`) lifts on the
-       smaller `--scale-hover-btn` routed through `--spring-smooth` (the
-       sub-perceptual settle, not the snappy bounce), so the hover reads as ONE
-       coherent glide with the surface-leg cross-fade rather than a mechanical
-       pop. The dock keeps its proportionally-larger `--scale-hover-dock` (small
-       icon, bigger lift reads smaller).
-       AX.W54 Q3 — lifted 1.035 → 1.05: the 1.035 overshot DOWN (W52 tamed the
-       1.08 snap so hard the lift read as nothing), so the glass hover now reads
-       as THREE legs together on hover — the specular gleam waking, a perceptible
-       scale, and the bg/border cross-fade — distinguishable from rest BEFORE the
-       click. Still sub-perceptual-bounce on `--spring-smooth`; the magnitude
-       moved, the easing register did not. */
-    --scale-hover-btn: 1.05;
-    --scale-hover-dock: 1.1;
-    --scale-press: 0.96;
-
-    /* Press-scale rungs. `--scale-press` (0.96) is the canonical iOS Liquid
-       Glass press value every primitive reaches for unless it has a documented
-       reason (DESIGN.md §L3); `--scale-press-btn` aliases the slightly-softer
-       `--scale-press-sm` (0.97) the button + slider recipes consume.
-
-       AT.W7-dock-b — press canon. `--scale-press-dock` previously hard-coded a
-       deeper 0.92 (a second magic press value with no documented rationale),
-       so a dock control pressed visibly harder than every other primitive. It
-       now references the canonical `--scale-press` (0.96) — ONE source for the
-       press scale across the system. A consumer wanting the dock's old deeper
-       press overrides `--scale-press-dock` on the dock instance. */
-    --scale-press-dock: var(--scale-press);
-    --scale-press-sm: 0.97;
-    --scale-press-btn: var(--scale-press-sm);
-
-    /* AX.W53 — the SegmentedTabs travel-squish cap. The active indicator
-       (segmented/pill slider OR the underline rule) STRETCHES along its travel
-       axis as it glides between tabs, then settles to fit — the Material 3
-       ELASTIC / Apple Liquid-Glass "controls insist on animating themselves"
-       register. The deform is volume-preserving (stretch X, compress Y in lockstep:
-       `scale: var(--stretch) calc(1 / var(--stretch))`) so it reads as an elastic
-       warp, never a size pump. A consumer dials the elasticity (or to 1 for none)
-       without touching source.
-       The click travel-squish AND the liquid-tab pull-morph read this ONE cap (in
-       lockstep with the no-token floor DEFAULT_INDICATOR_MAX_STRETCH, the SOLE cap
-       source — constant + token never fork); a FAST pull visibly swells the pill so
-       the gel-squish READS as liquid — still capped LOW (the anti-taffy-pull bar;
-       the pill swells, never taffy-pulls).
-       BD.W-TABS-LIQUID — re-tuned 1.18 → 1.11. The `--tab-blob` area-inflation
-       channel now carries the "grow" (the 5-beat overshoot), so the per-axis stretch
-       drops: the FENCE is the COMPOSED visible bbox area `blob × stretch` ≤ ~1.14,
-       NOT the bare per-axis scalar. At blob ~1.045 (peak) × stretch ~1.11 (far jump)
-       the composed long-axis peak lands ≤ ~1.16 and the AREA (blob² since the squish
-       is volume-preserving) stays ≤ ~1.14 — lively, not taffy. */
-    --tab-indicator-max-stretch: 1.11;
-
-    /* BD.W-TABS-LIQUID — the area-inflation cap (the 5-beat blob's overshoot peak).
-       The 2nd `useLiquidFlex` channel drives `--tab-blob` toward this on the
-       grow-overshoot beat, then de-inflates to 1 at arrival (shrink-to-fit). Kept
-       LOW (~1.045) so the COMPOSED bbox area (blob × stretch, the volume-preserving
-       squish makes the area ≈ blob²) clears the ≤ ~1.14 anti-taffy fence. A consumer
-       dials it (or to 1 for no inflation) without touching source. */
-    --tab-indicator-blob-max: 1.045;
-    /* BA.W-TABS — the indicator's OWN travel clock, re-pointed off the generic
-       `--duration-normal` (0.3s, which dragged a ~190ms sub-pixel undershoot tail
-       past the ~100ms 90%-travel point — the R10-2 "too slow" read) onto the
-       CALIBRATED `--spring-snappy-duration` (the W-GLASS-CAL Unit 3 per-spring
-       2%-band envelope-settle clock for the snappy curve, ~0.34s). The glide +
-       squish both read this ONE clock so they cannot desync; consume, never
-       re-mint the spring-duration primitive (W-GLASS-CAL owns it). */
-    --tab-indicator-duration: var(--spring-snappy-duration);
-    --opacity-disabled: 0.5;
-    --opacity-icon-muted: 0.8;
-
-    --focus-ring-width: 2px;
-    --focus-ring-shadow: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--ring) 30%, transparent),
-        0 0 8px color-mix(in srgb, var(--ring) 15%, transparent);
-    --focus-ring: var(--focus-ring-shadow);
-
-    /* BB.W-INVALID-RING — the destructive twin of --focus-ring-shadow. The
-       aria-invalid ring is ONE register: every form control (Input/Textarea/
-       NumberField via `.input-pill`, SelectTrigger, ComboboxInput, TagsInput)
-       reads `box-shadow: var(--invalid-ring)` instead of re-spelling the recipe
-       inline. ONE geometry (the SAME `--focus-ring-width`), ONE tint knob
-       (`--invalid-ring-tint`, the documented retint axis), resolving
-       `var(--destructive)` so a dark `--destructive` re-anchor flows through. A
-       consumer retints every invalid ring library-wide from a single
-       `:root { --invalid-ring-tint: … }` override — the token-first axis
-       `--focus-ring-shadow` already grants the focus ring. */
-    --invalid-ring-tint: 35%;
-    --invalid-ring: 0 0 0 var(--focus-ring-width)
-        color-mix(in srgb, var(--destructive) var(--invalid-ring-tint), transparent);
-
-    /* BC.W-RADIO-FIX — the selection-control STATE register (the `--focus-ring-shadow`
-       / `--invalid-ring` precedent: one named register, read everywhere — never a
-       per-control magic literal). The checks family (Checkbox + RadioGroupItem) reads
-       these TWO tokens so a re-tint is ONE edit, library-wide.
-
-       • `--control-ring` — the UNCHECKED outline. Post-BC.W-BLACK-BAR the general glass
-         rim is ≤4% warm-ink (`--glass-border-resting`), which reads as a near-invisible
-         hairline on a 16px circle — too faint to tell a rest radio from its siblings. So
-         the selection atoms are the NAMED exception (recorded in BC.W-BLACK-BAR's fences):
-         a slightly-stronger ~12% warm-ink outline that reads as a DEFINED circle at 16px
-         without re-introducing the dark `--primary` hairline. Warm-ink-derived (no gray,
-         BA.W-NO-GRAY).
-       • `--control-checked-bg` — the SELECTED glass-tinted fill. The recipe is minted
-         ONCE here (the anti-paste bite: a second inline `color-mix(... --primary 88% ...)`
-         literal on a checks atom reds — the recipe IS the token). Mirrors the
-         glass-`--primary` over the floating tier the Checkbox already speaks, so the ring
-         goes outline → filled glass disc (a real material step), warm-not-saturated. */
-    --control-ring: color-mix(in srgb, var(--foreground) 12%, transparent);
-    --control-checked-bg: color-mix(in srgb, var(--primary) 88%, var(--glass-bg-floating));
-
-    /* ═══════════════════════════════════════════════
-       §12 PAPER TEXTURES
-       ═══════════════════════════════════════════════ */
-    /* Canonical subtle paper-texture opacity — restored from fourier-original
-       (`4df1a06:web/src/style.css:53-54`) after A.W3.5.ab confirmed the
-       heretofore `opacity='1'` URI rendered as an overt grain field in every
-       downstream consumer of `.paper-texture`. The SVG `opacity` attribute is
-       baked at parse-time and cannot read a CSS var, so the subtle value must
-       be inlined; if a consumer needs a heavier overlay, they should layer
-       a wrapper element with its own `opacity:`/`mix-blend-mode:` atop. */
-    --paper-clean-texture: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
-    --paper-aged-texture: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
-
-    /* BC.W-GRID-SIMPLE — the ONE engineering-graph-paper rhythm source. The
-       keyframes.js `EditorShell` magnitudes, re-expressed as `--grid-*` tokens:
-       a fine 1rem cell + a bolder 5rem major rule (the 5× engineering-graph
-       rhythm), each line a hairline-crisp single device-pixel. The pitch is
-       REM-RELATIVE — 1rem (16px at the default root) and 5rem (80px) divide
-       cleanly at DPR 1/2/3, so every line lands on a whole device-pixel column/
-       row (the anti-blur rule; the prior 28px/32px integer pitch landed on
-       sub-pixel boundaries at fractional-DPR zoom and the anti-aliaser softened
-       the 1px lines). The fine 3% is the user's "less busy substrate" — DELIBERATELY
-       BELOW the 10% legibility floor — and the major 11% is held STRICTLY ABOVE it
-       (the kf weight step). The line INK is a `color-mix(… var(--foreground) N%, …)`
-       so it re-tints with the theme by construction (warm-ink on light, lifting
-       off near-black on dark) — NO parallel `--grid-*-dark` family (the
-       `--foreground` flip re-resolves the mix; the cards.css dark-arm precedent).
-       A consumer dials it LARGER (`--grid-pitch: 1.25rem` / `--grid-major: 6.25rem`)
-       or quieter (the `--grid-line`/`--grid-line-major` strength knobs) at `:root`
-       — the token-first axis. This is the SINGLE rhythm source: the demo full-bleed
-       page grid (`.grid-bg`, story-hero.css) AND the library card-interior register
-       (`.paper-grid`, cards.css) both read it (the two-parallel-28px/32px-systems
-       fix). The LIQUID full-bleed sibling (`<PaperGrid>`, BC.W-VIZ-PAPERGRID)
-       re-uses the SAME rhythm — one pitch, two registers (static page-bg vs liquid). */
-    --grid-pitch: 1rem;
-    --grid-major: 5rem;
-    --grid-line: color-mix(in srgb, var(--foreground) 3%, transparent);
-    --grid-line-major: color-mix(in srgb, var(--foreground) 11%, transparent);
-
-    /* The library card-interior GEOMETRIC register (`.paper-grid`, cards.css) —
-       the document-register card's INTERIOR ground, felt THROUGH the glass tint.
-       It UNIFIES its pitch onto the shared `--grid-pitch` (the prior 32px literal
-       retired — ONE rhythm source) and keeps its OWN ambient through-card strength
-       register: the `--paper-grid-opacity` single knob (~0.08, the ask's "felt
-       THROUGH the card ~0.08"). DISTINCT from the page-bg 3%/11% tier above — a
-       card interior reads quieter than a full-bleed page wash — but the PITCH is
-       shared. The ink stays a `color-mix(… var(--foreground) N%, …)` (re-tints with
-       --foreground in lockstep, never a hardcoded literal — the no-gray floor); the
-       MAJOR rule rides `* 1.6` (the 0.08→0.128 weight step). The strength lives in
-       the ink alpha, not a layer `opacity`, because `.paper-grid` paints the grid on
-       the card's HOST `background-image` to avoid two-pseudo-budget contention with
-       the grain `::after` / specular `::before` (see cards.css). A STATIC raster —
-       gradient-stack `background-image`, one compositor-cached paint, never a
-       per-frame repaint. */
-    --paper-grid-opacity: 0.08;
-    --paper-grid-texture-size: var(--grid-pitch);
-    --paper-grid-line: color-mix(
-        in srgb,
-        var(--foreground) calc(var(--paper-grid-opacity) * 100%),
-        transparent
-    );
-    --paper-grid-line-major: color-mix(
-        in srgb,
-        var(--foreground) calc(var(--paper-grid-opacity) * 160%),
-        transparent
-    );
-    --paper-grid-texture:
-        linear-gradient(to right, var(--paper-grid-line-major) 1px, transparent 1px),
-        linear-gradient(to bottom, var(--paper-grid-line-major) 1px, transparent 1px),
-        linear-gradient(to right, var(--paper-grid-line) 1px, transparent 1px),
-        linear-gradient(to bottom, var(--paper-grid-line) 1px, transparent 1px);
-
-    /* ═══════════════════════════════════════════════
-       §13 GOLD (accent family kept for consumers using it)
-       ═══════════════════════════════════════════════ */
-    --gold: oklch(0.751 0.147 84.2);
-    --gold-light: oklch(0.890 0.183 96.1);
-    --gold-dark: oklch(0.599 0.132 64.2);
-    /* AY.W-PRIM-POLISH D1 — the saturated CTA plate the AW.W13 gold-CTA contract
-       names. A FIXED deep gold (mode-INVARIANT — the gold-CTA hover backplate must
-       be dark in BOTH modes so the white label clears ≥4.5:1; deepening toward the
-       mode-flipping `--foreground` brightened the dark plate to a cream-gold and
-       broke dark). ~`--gold-dark` deepened toward warm-ink → ~rgb(120,87,45),
-       6.5:1 white in light / 5.5:1 in dark. The opaque base of `btn-audacious-gold`
-       :hover. */
-    --gold-deep: oklch(0.487 0.103 63.0);
-
-    --color-gold: var(--gold);
-    --color-gold-light: var(--gold-light);
-    --color-gold-dark: var(--gold-dark);
-    --color-gold-deep: var(--gold-deep);
-
-    /* ═══════════════════════════════════════════════
-       §13b SILVER (the structure metal — BA.W-ATLAS-RECONCILE C-3, d6 register C)
-       ═══════════════════════════════════════════════ */
-    /* The cool polished-steel STRUCTURE quad — gold's mirror for the industrial
-       housing register (the InstrumentChassis `variant="structure"` consumer #2).
-       Gold ships; the structure metal never did. The cascade EXACTLY mirrors gold's
-       (scale-paper raw → bridges `--color-silver*` alias → both dark arms).
-
-       BA.W-NO-GRAY NAMED EXCEPTION (the ONE sanctioned cool-neutral). W-NO-GRAY
-       moved the library's NEUTRAL ladder to a warm OKLab H~70° register (no gray).
-       Silver is DELIBERATELY COOL near-achromatic (hue ~255, the blue-steel of a
-       milled panel) — it is NOT a neutral, it is a brand METAL identity (like gold).
-       Calibrated AGAINST the new warm floor: the very-low chroma (C ≤ 0.016) reads
-       as polished metal, not a tinted cast, and the cool hue distinguishes it from
-       the warm-cream glass plate so the structure register reads as a DIFFERENT
-       material, not a desaturated default. Recorded as the warm-floor exception in
-       the W-ATLAS-RECONCILE DELTA. */
-    --silver: oklch(0.760 0.012 255);
-    --silver-light: oklch(0.902 0.010 255);
-    --silver-dark: oklch(0.582 0.014 255);
-    /* The mode-INVARIANT deep structure plate (mirrors `--gold-deep`'s contract —
-       a fixed dark cool-steel so a white label clears ≥4.5:1 in BOTH modes; it does
-       NOT flip with `--foreground`). The would-be saturated CTA twin of the metal. */
-    --silver-deep: oklch(0.462 0.016 258);
-
-    --color-silver: var(--silver);
-    --color-silver-light: var(--silver-light);
-    --color-silver-dark: var(--silver-dark);
-    --color-silver-deep: var(--silver-deep);
-
-    /* ═══════════════════════════════════════════════
-       §13c BRONZE (the THIRD brand-metal — BB.W-METAL-SHIMMER)
-       ═══════════════════════════════════════════════ */
-    /* The warm-brown patina quad — the third member of the gold·silver·bronze
-       brand-metal TRIAD (the medal triad, the gilt/aged "third place" figure, the
-       record-badge register). Gold (warm-yellow ~84°) + silver (cool-steel ~255°)
-       are the two poles; bronze is the warm-amber-brown ~54° register between them.
-       The cascade EXACTLY mirrors gold's and silver's (scale-paper raw → bridges
-       `--color-bronze*` alias → both dark arms); `-deep` is mode-invariant.
-
-       BA.W-NO-GRAY brand-metal EXCEPTION — bronze is the THIRD metal on the SAME
-       sanction silver carries (the ONE cool-neutral exception). Bronze is a WARM
-       metal identity with chroma ABOVE the warm floor: each rung resolves OKLab
-       C 0.072-0.112 (far above the STRONG_FLOOR 0.020) at hue ~49-60°, so it reads
-       as polished bronze MATERIAL, never a desaturated brown CAST (the W-NO-GRAY
-       "warm-not-tinted" bar). It is NOT a neutral — a low-chroma bronze would BE a
-       neutral and break the brand-metal read; the chroma is the metal. The hue sits
-       between gold and red-orange so it distinguishes from a dark gold at the rim. */
-    --bronze: oklch(0.620 0.092 54.0);
-    --bronze-light: oklch(0.760 0.112 60.0);
-    --bronze-dark: oklch(0.500 0.082 50.0);
-    /* The mode-INVARIANT deep bronze plate (mirrors `--gold-deep`/`--silver-deep`'s
-       contract — a fixed dark bronze so a white label clears ≥4.5:1 in BOTH modes;
-       it does NOT flip with `--foreground`). 8.36:1 white in light / 4.79:1 in dark
-       on the dark-arm-lifted rungs. The would-be saturated CTA twin of the metal. */
-    --bronze-deep: oklch(0.430 0.072 50.0);
-
-    --color-bronze: var(--bronze);
-    --color-bronze-light: var(--bronze-light);
-    --color-bronze-dark: var(--bronze-dark);
-    --color-bronze-deep: var(--bronze-deep);
-
-    /* ═══════════════════════════════════════════════
-       §14 RAINBOW PALETTE — oklch (AV.W16 TW2; mode-independent, no .dark
-       mirror; hue preserved from the prior hsl() cadence)
-       ═══════════════════════════════════════════════ */
-    --rainbow-red: oklch(0.636 0.210 25.5);
-    --rainbow-orange: oklch(0.737 0.163 58.9);
-    --rainbow-yellow: oklch(0.900 0.183 103.7);
-    --rainbow-green: oklch(0.772 0.233 144.8);
-    --rainbow-blue: oklch(0.633 0.162 252.1);
-    --rainbow-indigo: oklch(0.566 0.206 294.1);
-    --rainbow-violet: oklch(0.684 0.250 327.9);
-
-    --rainbow-pastel-red: oklch(0.793 0.066 18.7);
-    --rainbow-pastel-orange: oklch(0.823 0.059 57.3);
-    --rainbow-pastel-yellow: oklch(0.889 0.068 98.1);
-    --rainbow-pastel-green: oklch(0.826 0.072 149.5);
-    --rainbow-pastel-blue: oklch(0.783 0.056 264.2);
-    --rainbow-pastel-indigo: oklch(0.772 0.062 300.2);
-    --rainbow-pastel-violet: oklch(0.799 0.070 314.4);
-
-    /* ═══════════════════════════════════════════════
-       §16 TIMELINE
-       Timeline primitive tokens. All three variants (scrubber +
-       segmented + continuous) compose these. Both segmented + continuous
-       arrays carry the same `TimelineSegment[]` data shape; only the
-       rendering geometry differs. See DESIGN.md `## Timeline Primitive`.
-       ═══════════════════════════════════════════════ */
-
-    /* Heights — per-variant rail thickness */
-    --timeline-scrubber-height: 0.5rem;       /*  8px — single-track scrubber */
-    --timeline-continuous-height: 0.75rem;    /* 12px — ONE pill, N regions */
-
-    /* Geometry — shared across all variants */
-    --timeline-dot-size: 0.875rem;            /* 14px — boundary dot diameter (pointer: fine) */
-    --timeline-dot-size-touch: 1.25rem;       /* 20px — boundary dot diameter (pointer: coarse) */
-    --timeline-touch-target: 44px;            /* AC.W6d F2.I-04 — WCAG 2.5.5 target-size floor.
-                                                 The `::before` halo around each dot extends to
-                                                 this dimension so finger-precision users meet
-                                                 the (target-size: 44×44 minimum) clause without
-                                                 the visible dot growing to that footprint at
-                                                 pointer: fine. */
-    --timeline-segment-flex: 1 1 0;           /* per-cell flex distribution (segmented) */
-
-    /* Boundary-dot glass knobs (Q.W4 Lane B — promoted from
-       ContinuousTimeline.vue SFC fallbacks; `3cb70db` minted these as a
-       private dialect). The continuous-variant dot is a GLASS primitive:
-       a translucent tinted fill over a backdrop blur with a hairline
-       ring. These knobs let consumers retune the resting glass + the
-       per-state tints without a `:deep()` reach.
-         fill            — resting translucent fill
-         blur            — backdrop blur tier behind the dot
-         ring            — hairline glass ring (border-color)
-         tint-current    — wash colour for the active-phase dot
-         tint-completed  — wash colour for the completed-phase dot
-         check-color     — completion-tick stroke (defaults to the
-                           completed tint) */
-    --timeline-dot-fill: var(--surface-tint-12);
-    --timeline-dot-blur: var(--glass-blur-quiet);
-    --timeline-dot-ring: var(--glass-border-floating);
-    --timeline-dot-tint-current: var(--accent, var(--foreground));
-    --timeline-dot-tint-completed: var(--success, var(--foreground));
-    --timeline-dot-check-color: var(--timeline-dot-tint-completed);
-
-    /* Continuous-variant specific — seam dividers between regions.
-       Set `--timeline-continuous-seam-opacity: 0` to suppress the
-       inter-region 1px dividers entirely. Default `0.25` reads as a
-       subtle hairline; the `--timeline-continuous-seam-color` knob lets
-       consumers override the seam tint independently of opacity. */
-    --timeline-continuous-seam-opacity: 0.25;
-    --timeline-continuous-seam-color: color-mix(
-        in srgb,
-        var(--foreground) calc(var(--timeline-continuous-seam-opacity) * 100%),
-        transparent
-    );
-
-    /* Per-segment default gradient fallback — applied when a segment
-       omits its `gradient` field. Consumers can override per-phase via
-       the `--timeline-segment-gradient-{key}` knobs below. */
-    --timeline-segment-default-gradient: linear-gradient(
-        90deg,
-        var(--surface-tint-15),
-        var(--surface-tint-25)
-    );
-
-    /* Per-phase gradient defaults — paint the canonical chart palette
-       at the gradient leading edge, fading to a 60%-opacity tail. The
-       speedtest consumer wires these via `gradient: "var(--timeline-segment-gradient-ping)"`
-       per segment; the same names work for any consumer who follows the
-       ping/download/upload/jitter taxonomy. */
-    --timeline-segment-gradient-ping: linear-gradient(
-        90deg,
-        var(--chart-ping),
-        color-mix(in srgb, var(--chart-ping) 60%, transparent)
-    );
-    --timeline-segment-gradient-download: linear-gradient(
-        90deg,
-        var(--chart-download),
-        color-mix(in srgb, var(--chart-download) 60%, transparent)
-    );
-    --timeline-segment-gradient-upload: linear-gradient(
-        90deg,
-        var(--chart-upload),
-        color-mix(in srgb, var(--chart-upload) 60%, transparent)
-    );
-    --timeline-segment-gradient-jitter: linear-gradient(
-        90deg,
-        var(--chart-jitter),
-        color-mix(in srgb, var(--chart-jitter) 60%, transparent)
-    );
-
-    /* ═══════════════════════════════════════════════
-       §17 METRIC
-
-       MetricRow / MetricStack value-clamp dialect. The declared values are the
-       `audacious` poster register — the hero-scale clamp for a single giant
-       number; MetricStack's `[data-register="result"]` selector overrides it
-       locally for the compact multi-row ledger. Three clamp arms each: `min`
-       (floor), `cqi` (the binding container-query middle term), `max`
-       (ceiling); unit carries min/max only (its cqi is a fixed 6cqi).
-       ═══════════════════════════════════════════════ */
-
-    /* Value register — audacious-poster hero clamp */
-    --metric-row-value-clamp-min: 4.5rem;
-    --metric-row-value-clamp-cqi: 34cqi;
-    --metric-row-value-clamp-max: var(--type-display-hero);
-
-    /* Unit register — one tier below the value it qualifies */
-    --metric-row-unit-clamp-min: 1.5rem;
-    --metric-row-unit-clamp-max: 3.25rem;
-
-    /* Label register — uppercase, the binding row-height term in the
-       compact `result` register */
-    --metric-row-label-clamp-min: 1.125rem;
-    --metric-row-label-clamp-cqi: 5cqi;
-    --metric-row-label-clamp-max: 2.75rem;
-
-    /* BB.W-CONTROL-TOKENS — the two CONSUMER-reach knobs (the no-`:deep`
-       precept, Design Axis 2). MetricRow internals a consumer must reach are
-       exposed as tokens, never an internal a `:deep()` overrides.
-
-       • `--metric-row-label-align` — the label `text-align`. Default `left`
-         (byte-identical to the prior render). A cert-grid consumer building a
-         labelled ledger sets `right` at `:root`/a parent/per-row for a
-         right-aligned fixed seam — cascades into `.metric-row__label` with no
-         `:deep()`.
-       • `--metric-row-icon-color` — the leading-glyph ink (the MetricCell
-         `iconColor`→IconChip precedent, mirrored as a token since MetricRow
-         ships a raw `<component :is>`). The per-row `phaseColor` prop seeds it
-         inline so today's consumers paint unchanged; un-set, the component
-         fallback (`inherit`) keeps the icon on the inherited cascade. A consumer
-         wanting a DISTINCT icon ink from the phase tint overrides it directly.
-
-       Both carry their byte-identical defaults — `left` (the prior render) /
-       `inherit` (the prior un-tinted glyph). Declaring them here keeps the
-       `--metric-row-*` family discoverable in one home; the component-level
-       `var(…, fallback)` read preserves the same default if the token is ever
-       un-declared (the defense-in-depth back-compat floor). A per-row
-       `phaseColor` prop still wins over the `:root` `--metric-row-icon-color`
-       (inline cascades higher), so today's phase-tinted icons are unchanged. */
-    --metric-row-label-align: left;
-    --metric-row-icon-color: inherit;
-
-    /* ═══════════════════════════════════════════════
-       §2.D INSTRUMENT-CLUSTER COMPOSITION RHYTHM
-
-       The instrument-chassis family owns the under-meter / progress-cluster
-       grammar.
-
-       • `--meter-progress-inset` — the negative-margin inset that pulls the
-         under-meter bar INTO the unpainted ring lane around the dial canvas
-         (~4% of meter-size). Consumed at `.phase-progress` via
-         `margin-block-start: calc(-1 * var(--meter-progress-inset))`. The
-         `--meter-size` reference resolves against the consumer's own
-         declaration; the 200px fallback keeps the calc well-defined.
-       • `--progress-stack-gap` — vertical rhythm between any two stacked
-         progress rails inside one cluster.
-       ═══════════════════════════════════════════════ */
-    --meter-progress-inset: calc(var(--meter-size, 200px) * 0.04);
-    --progress-stack-gap: clamp(0.1875rem, 0.4cqi, 0.375rem);
-
-    /* ═══════════════════════════════════════════════
-       §2.E CELEBRATION-TIER REGISTER
-
-       Shared peak for any "completion" / "thank-you" surface.
-
-       • `--celebration-row-rhythm` — gap between the cluster's rows (cqi-axis).
-       • `--text-celebration-headline-size` — the single designed peak both
-         celebration surfaces clamp toward (cqi-axis).
-       • `--complete-headline-size` — the per-consumer font-size hook a consumer
-         assigns the canon clamp to so its headline pegs at the shared peak;
-         the default falls back to a smaller hero-rung clamp.
-       ═══════════════════════════════════════════════ */
-    --celebration-row-rhythm: clamp(0.5rem, 1.6cqi, 1rem);
-    --text-celebration-headline-size: clamp(2.5rem, 12cqi, 9rem);
-    --complete-headline-size: clamp(2.25rem, 11cqi, 4rem);
-
-    /* ═══════════════════════════════════════════════
-       §19 TABLE DENSITY
-
-       A single unitless knob `--table-density` scales the cell padding +
-       header row height of the Table / DataTable primitive. Default `1`
-       resolves to 1rem cell padding + 3rem header height; 0.75 is a compact
-       admin table, 1.25 is comfortable/touch-friendly. The derived tokens are
-       read by the `table-cell` / `table-head` utilities; changing the knob
-       cascades instantly via CSS inheritance — no JS prop needed.
-       ═══════════════════════════════════════════════ */
-    --table-density: 1;
-    --table-cell-px: calc(1rem * var(--table-density));
-    --table-cell-py: calc(1rem * var(--table-density));
-    --table-head-h: calc(3rem * var(--table-density));
-    --table-head-px: calc(1rem * var(--table-density));
-
-    /* §20 PLATFORM MOTION (AQ.W5) — the scroll-driven/choreography + TOP-LAYER +
-       VIEW-TRANSITION + dock-spring motion knobs — carved WHOLE to
-       tokens/scroll-tokens.css at BB.W-CARVE4 (a contiguous tail carve at the §19/§20
-       seam; §20 is the file's last section, so the partial @import-s IMMEDIATELY
-       AFTER this one — the dist is byte-isomorphic). The paper/control/display/metal/
-       timeline/metric/table families above stay. */
-}
+:root { --scale-hover: 1.08; --scale-hover-btn: 1.05; --scale-hover-dock: 1.1; --scale-press: 0.96; --scale-press-dock: var(--scale-press); --scale-press-sm: 0.97; --scale-press-btn: var(--scale-press-sm); --tab-indicator-max-stretch: 1.11; --tab-indicator-blob-max: 1.045; --tab-indicator-duration: var(--spring-snappy-duration); --opacity-disabled: 0.5; --opacity-icon-muted: 0.8; --focus-ring-width: 2px; --focus-ring-shadow: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--focus-ring-color) 30%, transparent), 0 0 8px color-mix(in srgb, var(--focus-ring-color) 15%, transparent); --focus-ring: var(--focus-ring-shadow); --invalid-ring-tint: 35%; --invalid-ring: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--destructive) var(--invalid-ring-tint), transparent); --control-ring: color-mix(in srgb, var(--foreground) 12%, transparent); --control-checked-bg: color-mix(in srgb, var(--primary) 88%, var(--glass-bg-floating)); --paper-clean-texture: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); --paper-aged-texture: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"); --grid-pitch: 1rem; --grid-major: 5rem; --grid-line: color-mix(in srgb, var(--foreground) 3%, transparent); --grid-line-major: color-mix(in srgb, var(--foreground) 11%, transparent); --paper-grid-opacity: 0.08; --paper-grid-texture-size: var(--grid-pitch); --paper-grid-line: color-mix( in srgb, var(--foreground) calc(var(--paper-grid-opacity) * 100%), transparent ); --paper-grid-line-major: color-mix( in srgb, var(--foreground) calc(var(--paper-grid-opacity) * 160%), transparent ); --paper-grid-texture: linear-gradient(to right, var(--paper-grid-line-major) 1px, transparent 1px), linear-gradient(to bottom, var(--paper-grid-line-major) 1px, transparent 1px), linear-gradient(to right, var(--paper-grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--paper-grid-line) 1px, transparent 1px); --gold: oklch(0.751 0.147 84.2); --gold-light: oklch(0.890 0.183 96.1); --gold-dark: oklch(0.599 0.132 64.2); --gold-deep: oklch(0.487 0.103 63.0); --color-gold: var(--gold); --color-gold-light: var(--gold-light); --color-gold-dark: var(--gold-dark); --color-gold-deep: var(--gold-deep); --silver: oklch(0.760 0.012 255); --silver-light: oklch(0.902 0.010 255); --silver-dark: oklch(0.582 0.014 255); --silver-deep: oklch(0.462 0.016 258); --color-silver: var(--silver); --color-silver-light: var(--silver-light); --color-silver-dark: var(--silver-dark); --color-silver-deep: var(--silver-deep); --bronze: oklch(0.620 0.092 54.0); --bronze-light: oklch(0.760 0.112 60.0); --bronze-dark: oklch(0.500 0.082 50.0); --bronze-deep: oklch(0.430 0.072 50.0); --color-bronze: var(--bronze); --color-bronze-light: var(--bronze-light); --color-bronze-dark: var(--bronze-dark); --color-bronze-deep: var(--bronze-deep); --rainbow-red: oklch(0.636 0.210 25.5); --rainbow-orange: oklch(0.737 0.163 58.9); --rainbow-yellow: oklch(0.900 0.183 103.7); --rainbow-green: oklch(0.772 0.233 144.8); --rainbow-blue: oklch(0.633 0.162 252.1); --rainbow-indigo: oklch(0.566 0.206 294.1); --rainbow-violet: oklch(0.684 0.250 327.9); --rainbow-pastel-red: oklch(0.793 0.066 18.7); --rainbow-pastel-orange: oklch(0.823 0.059 57.3); --rainbow-pastel-yellow: oklch(0.889 0.068 98.1); --rainbow-pastel-green: oklch(0.826 0.072 149.5); --rainbow-pastel-blue: oklch(0.783 0.056 264.2); --rainbow-pastel-indigo: oklch(0.772 0.062 300.2); --rainbow-pastel-violet: oklch(0.799 0.070 314.4); --timeline-scrubber-height: 0.5rem; --timeline-continuous-height: 0.75rem; --timeline-dot-size: 0.875rem; --timeline-dot-size-touch: 1.25rem; --timeline-touch-target: 44px; --timeline-segment-flex: 1 1 0; --timeline-dot-fill: var(--surface-tint-12); --timeline-dot-blur: var(--glass-blur-quiet); --timeline-dot-ring: var(--glass-border-floating); --timeline-dot-tint-current: var(--accent, var(--foreground)); --timeline-dot-tint-completed: var(--success, var(--foreground)); --timeline-dot-check-color: var(--timeline-dot-tint-completed); --timeline-continuous-seam-opacity: 0.25; --timeline-continuous-seam-color: color-mix( in srgb, var(--foreground) calc(var(--timeline-continuous-seam-opacity) * 100%), transparent ); --timeline-segment-default-gradient: linear-gradient( 90deg, var(--surface-tint-15), var(--surface-tint-25) ); --timeline-segment-gradient-ping: linear-gradient( 90deg, var(--chart-ping), color-mix(in srgb, var(--chart-ping) 60%, transparent) ); --timeline-segment-gradient-download: linear-gradient( 90deg, var(--chart-download), color-mix(in srgb, var(--chart-download) 60%, transparent) ); --timeline-segment-gradient-upload: linear-gradient( 90deg, var(--chart-upload), color-mix(in srgb, var(--chart-upload) 60%, transparent) ); --timeline-segment-gradient-jitter: linear-gradient( 90deg, var(--chart-jitter), color-mix(in srgb, var(--chart-jitter) 60%, transparent) ); --metric-row-value-clamp-min: 4.5rem; --metric-row-value-clamp-cqi: 34cqi; --metric-row-value-clamp-max: var(--type-display-hero); --metric-row-unit-clamp-min: 1.5rem; --metric-row-unit-clamp-max: 3.25rem; --metric-row-label-clamp-min: 1.125rem; --metric-row-label-clamp-cqi: 5cqi; --metric-row-label-clamp-max: 2.75rem; --metric-row-label-align: left; --metric-row-icon-color: inherit; --meter-progress-inset: calc(var(--meter-size, 200px) * 0.04); --progress-stack-gap: clamp(0.1875rem, 0.4cqi, 0.375rem); --celebration-row-rhythm: clamp(0.5rem, 1.6cqi, 1rem); --text-celebration-headline-size: clamp(2.5rem, 12cqi, 9rem); --complete-headline-size: clamp(2.25rem, 11cqi, 4rem); --table-density: 1; --table-cell-px: calc(1rem * var(--table-density)); --table-cell-py: calc(1rem * var(--table-density)); --table-head-h: calc(3rem * var(--table-density)); --table-head-px: calc(1rem * var(--table-density)); }