@mkbabb/glass-ui 3.13.0 → 4.0.1

package/src/styles/tokens/offsets.css

@@ -0,0 +1,116 @@
+/* tokens/offsets.css
+   §9 animation offsets — hover-lift offsets, the layout tokens, the public
+   --fade-scroll-width ramp, the dock content-overflow caps, the chassis
+   max-block-size/mobile dial-reserve, the popover width, the panel inner-padding
+   rung, the chart geometry.
+   Carved (BB.W-CARVE3) from the former tokens/offsets-sizing.css §9/§10 split;
+   @import-ed by tokens.css at offsets-sizing's old cascade slot, immediately
+   before sizing.css — adjacent same-selector :root blocks resolve identically,
+   so the dist is byte-isomorphic. See docs/precepts/design-idioms.md
+   §cohesion-aware partials. */
+:root {
+    /* ═══════════════════════════════════════════════
+       §9  ANIMATION OFFSETS
+       ═══════════════════════════════════════════════ */
+    /* Hover lift offsets */
+    --lift-sm: -1px;
+    --lift-md: -2px;
+    --lift-lg: -4px;
+
+    /* Layout tokens */
+    /* BA.W-FADING-SCROLL — `--fade-scroll-width` is the public edge-fade ramp
+       width knob for `<FadingScroll>` (inheriting, retunable on any ancestor).
+       It superseded the scroll-BLIND `.scroll-fade-*` static masks' knob
+       `--mask-fade-width`, which retired in a CLEAN BREAK (no alias) at the
+       4.1.0 cut — BB.W-SCROLL-FADE-RETIRE — alongside the static utilities. */
+    --fade-scroll-width: 1rem;
+    /* J.W3.C — dock content overflow caps. When dock content exceeds
+       these dimensions, the inner `.dock-layers` (horizontal) /
+       `.glass-dock.vertical` (rail) container scrolls with a
+       `.scroll-fade-{x,y}` mask-fade so the boundary feathers rather
+       than cliffs. Defaults clamp to 80vw / 80vh capped at sensible
+       desktop widths; consumers override per-dock by setting either
+       token directly on a `.glass-dock` instance. User findings 1 + 5a. */
+    /* AX.W04 — `--dock-max-inline-size` is the canonical inline cap EVERY overflow
+       strategy reads: `overflow="scroll"` scrolls past it, and `overflow="wrap"`
+       wraps to N rows on the over-cap crossing (the dock shrink-wraps to content,
+       `max-inline-size` caps that intrinsic width at this token). The prior
+       `--dock-overflow-bp: 640px` viewport-breakpoint token (the magic-640
+       snap-back) is DELETED — the wrap is content-driven, not viewport-coupled, so
+       there is no breakpoint threshold to name. */
+    --dock-max-inline-size: min(80vw, 64rem);
+    --dock-max-block-size: min(80vh, 48rem);
+
+    /* AB.W1.T1 — chassis max-block-size guardrail.
+       Maximum block size a centred consumer-app card may consume while
+       preserving the inline dock footprint. The recipe subtracts the
+       consumer-owned `--dock-footer-space` (dock height + dock inset +
+       card-edge inset) and `--page-padding-top` from the dynamic viewport,
+       then takes one further rem of breathing room so the card never
+       butts the dock — the user mandate is `≥ 1rem visible gap above
+       dock`. Both consumer tokens carry safe fallbacks for callers that
+       have not declared them.
+
+       Consumers should shrink internal regions (meter, readout, timeline)
+       before falling back to scroll. This token is a guardrail against
+       chassis overflow, NOT a license to make the card scroll as the
+       default solution; clamp-first / no-scroll-first is the canon.
+       See DESIGN.md `## Chassis sizing — dock-adjusted viewport`. */
+    --chassis-max-block-size: calc(
+        100dvh
+        - var(--dock-footer-space, 5.75rem)
+        - var(--page-padding-top, 0rem)
+        - 1rem
+    );
+    /* R0G-2 (AO.W3/W4) — chassis mobile dial-reserve canon. instrument-
+       chassis.css's mobile breakpoint reserves the dial's final box from
+       frame 0 via these vars (with the same values as inline fallbacks, the
+       safety net). Token-first home so the vars resolve canonically. */
+    --instrument-dial-min-height-mobile: 24rem;
+    --instrument-dial-meter-reserve-mobile: minmax(0, 1fr);
+    /* BB.W-DESKTOP-RESERVE (B3) — the chassis WIDE-AXIS (desktop) dial reserve
+       canon, the complement of the mobile rung above. The mobile reflow
+       reserves the dial box from frame 0 via the rung above; the WIDE box axis
+       had NO library reserve, so on desktop a `1fr` meter row collapsed to its
+       pre-hydration intrinsic `<canvas>` size and grew on hydration, pushing
+       the results card + dock down (the measured desktop-1440 CLS the speedtest
+       App.vue interim authored a local `min-block-size` to cure). This rung is
+       the library home: the dial cell reserves its settled height from frame 0
+       on the wide axis, so the inner card mounts into an already-correct
+       envelope (CLS≈0, no post-hydration growth).
+
+       The default IS `--chassis-max-block-size` — the library's own
+       chassis-sizing guardrail (the dock-adjusted dynamic-viewport budget a
+       centred consumer card clamps to), a pure CSS calc that resolves at first
+       paint with NO JS. This is the DESKTOP DIAL: a consumer whose meter is a
+       different block-size retunes THIS token (the speedtest-specific value
+       stays in speedtest — presets-in-consumers). A consumer deletes its local
+       App.vue wide-axis interim once it consumes this rung. Both knobs are CSS
+       custom properties (token-first), the inline fallback in
+       instrument-chassis.css carries the contract if the token is unset. */
+    --instrument-dial-min-block-size-desktop: var(--chassis-max-block-size);
+
+    --max-width-input: 24rem;
+    --input-min-width-sm: 5rem;
+    --min-width-input-sm: var(--input-min-width-sm);
+    /* AU.W8b.4 — canonical popover width (Combobox list + anchor). Lifts the
+       `w-[200px]` arbitrary-value wrap to the `w-popover` @theme utility. */
+    --popover-width: 200px;
+    /* AZ.R5-4 — the ONE panel inner-padding rung (the consumer-verified "the
+       popover/dropdown content reads TIGHT" finding). The floating-panel +
+       DropdownMenuContent recipes read THIS token for their inner pad instead of
+       the prior hand-set `p-1`/literal, so a consumer retunes every teleported
+       menu/panel surface from one override. The comfortable default is `0.375rem`
+       (a half-rung over the prior 0.25rem tight floor — comfortable both modes
+       without over-padding a dense menu list). BB.W-CARD-PAD — the dead
+       `--panel-padding-roomy` (1rem) is DELETED here (clean break, no alias): it
+       had ZERO `var(--panel-padding-roomy)` consumers (the prose-popover register
+       it claimed to back never read it — PopoverContent paints `p-4` directly), so
+       it was an orphan declaration the golden-padding cut prunes. */
+    --panel-padding:       0.375rem;
+    --chart-height-compact: 15rem;
+    --chart-height-default: 22.5rem;
+    --chart-height-large: 25rem;
+    --chart-margin: 1.25rem;
+    --paper-texture-size: 200px 200px;
+}

package/src/styles/tokens/on-glass-fg.css

@@ -0,0 +1,39 @@
+/* tokens/on-glass-fg.css
+   The surface-aware FOREGROUND register (BB.W-ON-GLASS-FG — N13). Carved out of
+   tokens/glass.css to keep that partial under the no-god-module bound; @import-ed
+   by tokens.css in cascade order AFTER glass.css (the rungs derive against the
+   glass-bg-quiet composite, so they must resolve after the §8 ladder). Same :root
+   cascade context as its sibling token partials.
+
+   A THREE-RUNG on-glass family whose contrast TARGET is the COMPOSITED content-
+   tier glass FILL, not the canvas. The glass-first MAXIMAL default (AX.W54) makes
+   a caption/well/track rendering over a TRANSLUCENT content plate the common case;
+   --muted-foreground (= --neutral-5, "AA vs page") collapses on its OWN surface
+   (the speedtest ask measured 1.15-3.29:1 in dark theme — the "whisper collapse").
+
+   This is the THIRD state the BA adaptive-glass seam never expressed (the SAME
+   --glass-tint-* cascade context, NOT a fork): (a) bright/darkened plate → full
+   ink (the @container bright bucket + the overlay band, shipped — glass/ladder.css);
+   (b) opaque canvas → page-muted (--neutral-5, kept); (c) THIS — calm translucent
+   glass plate → a register BETWEEN page-muted and full-ink (legible-AND-subordinate;
+   a caption stays quieter than body ink WHILE clearing AA on the composited plate).
+
+   The values are DERIVED against the LIBRARY composite (--card over --neutral-0
+   through --glass-bg-quiet at --glass-tint-strength-floor), warm-amber (the BA.W-
+   NO-GRAY identity, OKLab gray floor cleared at the warm hue) — NOT copied from
+   the slides deck.css §1 reference (the deck's NC-State-red warm-cream literals
+   hsl(24 6% 44%)/hsl(45 12% 64%) are a CONSUMER divergence; the library re-derives).
+   NO ppmycota/demo hue. The page-muted register (--muted-foreground/-strong) is
+   UNTOUCHED — the on-glass rungs are NET-NEW; the glass/ladder.css calm-tier rule
+   re-points --muted-foreground → these on the engaged plate, no per-site edit.
+
+   PLAIN PER-MODE ARM idiom (light here, dark in tokens/dark-arm.css) — NOT
+   light-dark(): the house pattern every explicit-color token follows (a re-
+   resolution under .dark, not a single-declaration light-dark() that an inset-
+   shadow downstream could collapse — the light-dark() inset-shadow trap). */
+:root {
+    --on-glass-muted:        hsl(30 26% 35%);   /* the muted caption rung over the composited cream plate (5.76:1 vs plate; darker than --neutral-5 L40) */
+    --on-glass-muted-strong: hsl(28 28% 28%);   /* the -strong secondary rung, one step more present (7.79:1 vs plate) */
+    --input-on-glass:        hsl(36 40% 92%);   /* the form-well fill over glass — grounded warm so the input TEXT (--foreground) reads against a stable base (14.9:1) */
+    --progress-track-on-glass: hsl(34 24% 84%); /* the recessed meter track over glass — a warm channel distinct from the fill silhouette */
+}

package/src/styles/tokens/property-regs.css

@@ -30,10 +30,9 @@
      wrapper that reads it for a sympathetic tint (matches the
      `--phase-color` inheritance pattern).
 
-   • --ripple-radius (length) — the `btn-audacious` press ripple
-     radial. `inherits: false` because each button owns its own
-     ripple state (a hovered parent must not push a ripple-radius
-     onto a non-pressed child).
+   • --ripple-radius — RETIRED at BA.W-GLASS-CAL (H2a) with the disco recipe
+     family: the typed press-ripple was `btn-audacious`-private and has no
+     surviving consumer (the calm CTA register's press is the §6 scale beat).
    ═══════════════════════════════════════════════ */
 
 @property --progress-crescendo {
@@ -42,16 +41,25 @@
     initial-value: 0%;
 }
 
-@property --phase-tint-amount {
+/* BB.W-BORDER-PROGRESS — the masked-conic BORDER ring's sweep fill. The conic
+   gradient (border-progress.css) reads `--border-progress-fill` as the swept
+   extent (`conic-gradient(…, transparent var(--border-progress-fill), …)`), so a
+   determinate progress INTERPOLATES the border ring (a bare unregistered var()
+   snaps the sweep; the registered typed <percentage> lets the engine animate the
+   gradient stop). `inherits: false` — each ring owns its own fill (the per-surface
+   ownership the specular cohort uses; a ringed parent must not push its fill onto a
+   child). `initial-value: 0%` is the safe resting ring (the unregistered fallback
+   paints it; the cross-fade collapses to it on a non-supporting engine). */
+@property --border-progress-fill {
     syntax: "<percentage>";
-    inherits: true;
+    inherits: false;
     initial-value: 0%;
 }
 
-@property --ripple-radius {
-    syntax: "<length>";
-    inherits: false;
-    initial-value: 0px;
+@property --phase-tint-amount {
+    syntax: "<percentage>";
+    inherits: true;
+    initial-value: 0%;
 }
 
 /* ═══════════════════════════════════════════════
@@ -98,6 +106,71 @@
     initial-value: 0;
 }
 
+/* BB.W-LENSING — the per-surface EDGE-glint angle channel. `--specular-angle` is
+   the pointer angle-from-center the edge-glint conic sweep reads (material.css);
+   `useSpecularPointer` writes it (the angle feed). `inherits: false` — the
+   per-element ownership discipline of the specular cohort above (each pseudo owns
+   its typed value; a parent's angle must never bleed into a child glass surface).
+   `initial-value: 0deg` is the static rest position (the rim glint sits top when
+   unwired — no ambient drift, no blowout). */
+@property --specular-angle {
+    syntax: "<angle>";
+    inherits: false;
+    initial-value: 0deg;
+}
+
+/* BB.W-LENSING `--glass-refract` axis — RETIRED (DDR-LENS-BAKE, glass-refract.css).
+   The axis drove the `feDisplacementMap` `scale` by splicing `var(--glass-refract)`
+   between a head/tail `url()` pair. That construction never parsed as a
+   `backdrop-filter` (it emitted three tokens, not one url) AND broke consumer bundlers
+   (the tail `url("'…")` mis-resolved as a file path); a CSS url() string token cannot
+   carry a substituted `var()`, so a dynamic `scale` inside the mandatory single
+   self-contained data-URI is structurally impossible. The `scale` is now BAKED at 28
+   (the resting bend, byte-identical) — no axis, no `@property` reg. */
+
+/* BB.W-GLASS-ACCENT — the THIRD disjoint glass axis: the per-INSTANCE
+   CHROMATIC-RIM tint. `--glass-accent` is a complete `<color>` (a consumer DATA
+   hue) that OKLab-tints a glass surface's RIM (the `--glass-material-rim` inset
+   ring + the per-rung `--glass-border-*`) and the `::before` specular catch-light
+   CORE — so the §F1 data-keyed colored hover (a chart cell whose surface glows
+   with that datum's series hue) is a ONE-LINE seam (`--glass-accent: <hue>;
+   --glass-accent-strength: <N%>` on the instance), not a hand-threaded
+   `border-color` + inline catch-light per consumer.
+
+   DISTINCT-not-fork of W55's `--glass-tint-source` (the WHOLE-PLATE BACKGROUND
+   legibility darken toward `--glass-tint-ink`): the accent is the RIM+GLINT
+   chromatic DECORATION axis (toward a consumer DATA hue, per-instance), it NEVER
+   writes the W55 cohort and NEVER tints the plate background. Three disjoint glass
+   axes: LEVEL (opacity+blur, AX.W54) · TINT (whole-plate legibility, W55) · ACCENT
+   (per-instance chromatic rim+glint, this wave).
+
+   • --glass-accent (<color>) — the consumer data hue. `inherits: true` (the
+     `--glass-level`-style cascading scalar — a host sets it on an ancestor to tint
+     a sub-tree; a consumer sets it per-INSTANCE on the surface). `initial-value:
+     transparent` is the NEUTRAL IDENTITY: a `color-mix(in oklab, X, transparent N)`
+     is byte-identical X at the resting end, so an UNSET surface paints exactly
+     today's warm-ink rim + warm-cream catch-light (the W2 neutral-fallback floor).
+
+   • --glass-accent-strength (<percentage>) — the bounded knob. `inherits: true`
+     (rides the accent down the same sub-tree). `initial-value: 0%` so the mix is a
+     provable no-op when unset (`color-mix(in oklab, X, <accent> 0%)` === X). The
+     consumer-set ceiling is a WHISPER at the rim, not a flooded plate — the demo
+     specimens engage ~40-55% (the rim/glint reads the hue while the warm-cream core
+     + the AA legibility survive; the `--glass-tint-strength-aa` ≤24% bounding
+     precedent, lifted here because the accent rides the THIN rim/glint not the
+     whole plate). A malformed override CLAMPS to 0% (the typed fail-safe). */
+@property --glass-accent {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: transparent;
+}
+
+@property --glass-accent-strength {
+    syntax: "<percentage>";
+    inherits: true;
+    initial-value: 0%;
+}
+
 /* AX.W54 — the GLASS-FIRST single knob. `--glass-level` is the ONE clarity
    scalar threaded through BOTH glass ladders at their single sites (the
    `--glass-bg-*` opacity recipe + the `--glass-blur-*` radii). It is a typed,
@@ -121,6 +194,27 @@
     initial-value: 1;
 }
 
+/* BB.W-DEEP-GLASS — the OPT-IN deep-glass DEPTH scalar. `--glass-depth` is the
+   `--glass-level` TWIN for the deep tier: a typed INHERITING <number> so a host
+   sets it on any ancestor to retune the deep tier's depth (the cascading-scalar
+   idiom, distinct from the per-element `inherits: false` specular cohort). The
+   deep recipe (tokens/glass-deep.css) LERPs both the blur radius AND the saturate
+   between the calm `floating` endpoint (depth 0 ≡ the calm ceiling) and the Apple-
+   deep endpoint (depth 1 ≡ saturate 1.5 / blur 16px), so the deep blur is
+   `--glass-depth`-DRIVEN (the D1 axis assert — never a baked literal) and animates
+   smoothly. `initial-value: 1` is the resting deep magnitude: a `.glass-deep`
+   surface paints at the full Apple-deep register by default; a consumer dials
+   `--glass-depth: 0.5` to land it half-way to the calm floating rung. SEPARATE
+   from `--glass-level` (opacity+blur clarity), `--glass-tint-*` (legibility), and
+   `--glass-refract` (lens displacement) — the disjoint depth axis. The deep tier
+   COMPOSES `--glass-level` too (the deep blur scales it), so the opaque escape +
+   the a11y brackets reach the deep plate through the ONE level path. */
+@property --glass-depth {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 1;
+}
+
 /* AX.W51 D18 — the master comfortable-sizing scalar registered typed. The
    `<number>` syntax guarantees `calc(<base> * var(--ui-scale))` is always valid (a
    malformed override CLAMPS to the initial value 1, not an invalidated calc — the
@@ -159,6 +253,13 @@
     --glass-specular-intensity-rest: 0;
     --glass-specular-intensity-hover: 0.1;
     --glass-specular-intensity-active: 0.16;
+    /* BB.W-BUTTON-GLASS (d) — the BUTTON-SCOPED hover gleam bump. The lit glass
+       button should read a notch brighter at the grazing edge than the global
+       hover whisper (0.10). `.btn-glass` re-points its own
+       `--glass-specular-intensity-hover` to this knob (surfaces.css), so ONLY the
+       button lifts — the global cohort above is UNTOUCHED. A consumer retints the
+       button gleam from this ONE override. */
+    --glass-specular-btn-hover: 0.14;
 }
 
 /* Over the deep canvas `plus-lighter` still lifts, so the dark arm runs a touch
@@ -166,4 +267,23 @@
 .dark {
     --glass-specular-intensity-hover: 0.08;
     --glass-specular-intensity-active: 0.12;
+    /* The button bump rides a touch softer in dark too (the dark hover is 0.08;
+       the button reads ~0.11, still a notch above the global whisper). */
+    --glass-specular-btn-hover: 0.11;
+}
+
+/* BB.W-BUTTON-GLASS (b)/(e) — the press DRIVE scalar. ONE typed 0..1 custom
+   property Button.vue writes off the `useSpringPress` spring (0 released → 1
+   pressed, with the ~5% overshoot the spring carries). It is the SINGLE drive the
+   press SQUISH (the `useLiquidFlex` reciprocal X/Y deform), the coupled specular/
+   brightness lift, and the optional `.glass-refract` lens-swell all read — the "one
+   drive, the glass deforms under press" read. Registered typed so a `transition`/
+   downstream `calc()` interpolates the VALUE (number), not the text. `inherits:
+   true` so the host-written value reaches the `.glass-material::before` pseudo +
+   the coupled rules. `initial-value: 0` so an unwired/SSR button is the static
+   rest frame (the no-JS CSS `.tap-squish` scale floor still presses). */
+@property --glass-btn-press-t {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 0;
 }

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

@@ -51,6 +51,14 @@
        wants a whisper of squish, not a bounce. A consumer dials the elasticity
        (or to 1 for none) without touching source. */
     --tab-indicator-max-stretch: 1.08;
+    /* 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;
 
@@ -59,6 +67,20 @@
         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);
+
     /* ═══════════════════════════════════════════════
        §12 PAPER TEXTURES
        ═══════════════════════════════════════════════ */
@@ -72,6 +94,45 @@
     --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");
 
+    /* BB.W-PAPER-GRID-TEXTURE — the GEOMETRIC half of the paper-cascade, the
+       peer of the organic turbulence above. Where `--paper-*-texture` are
+       feTurbulence grain fields, this is a two-frequency engineering-paper
+       grid: a 32px MINOR cell + a 128px MAJOR rule (the 4×-major blueprint
+       vocabulary the demo `.story-bg-grid` speaks, re-expressed as a library
+       token so a document-register card can opt its INTERIOR ground into the
+       line-field, not only the page margin). Unlike the organic SVG textures
+       (a baked-at-parse `opacity` URI), the grid is a STATIC `background-image`
+       gradient-STACK — a one-time compositor-cached paint, NEVER a per-frame
+       repaint. The line INK reads a `color-mix(… var(--foreground) N%, …)` so
+       it composes against the warm ink identity and re-tints with `--foreground`
+       in lockstep — never a hardcoded `hsl()` (the no-gray / token-first
+       floor). The ambient through-card strength is the ONE knob
+       `--paper-grid-opacity` (~0.08, the ask's "felt THROUGH the card ~0.08"):
+       the MINOR line ink scales off it directly and the MAJOR rule rides
+       `* 1.6` (the demo's 7%→12% engineering-paper weight step), so a consumer
+       retunes the whole grid from the single strength knob. (The strength lives
+       in the ink alpha, not a layer `opacity`, because the utility paints the
+       grid on the card's HOST `background-image` to avoid the two-pseudo-budget
+       contention with the grain `::after` / specular `::before` — see
+       cards.css.) */
+    --paper-grid-opacity: 0.08;
+    --paper-grid-texture-size: 32px;
+    --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)
        ═══════════════════════════════════════════════ */
@@ -92,6 +153,68 @@
     --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)
@@ -229,6 +352,32 @@
     --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
 
@@ -279,88 +428,10 @@
     --table-head-h: calc(3rem * var(--table-density));
     --table-head-px: calc(1rem * var(--table-density));
 
-    /* ═══════════════════════════════════════════════
-       §20 PLATFORM MOTION (AQ.W5)
-
-       The native-platform motion substrate axes. Three families, each read
-       by a `@supports`-gated CSS recipe in `scroll-driven.css`,
-       `animations.css` (§TOP-LAYER), and `view-transition.css` — every visual
-       knob a token so a consumer retunes without editing library source.
-
-       SCROLL-DRIVEN (scroll-driven.css). Values mirror the JS-fallback
-       composable defaults (`useScrollProgress` / `useStaggerReveal`) so the
-       native CSS path and the fallback path read identically — no visual seam
-       at the `@supports` boundary.
-
-       TOP-LAYER (animations.css §TOP-LAYER). The `@starting-style` entry/exit
-       grammar for native `<dialog>` / `[popover]` glass surfaces. The backdrop dim
-       uses the house alpha-derivative `color-mix(in srgb, var(--background) Npct,
-       transparent)` (AZ.W-ADAPTIVE-AUTO A5-1). It is NOT the `hsl(var(--background)
-       / α)` channel form: `--background` is a COMPLETE `hsl()` color
-       (`= hsl(48 12% 98%)`), so `hsl(var(--background) / α)` double-wraps to
-       `hsl(hsl(…) / α)` — invalid, never paints (the modal dim was silently dead).
-       The genuine channel form would require `--background` declared as a bare
-       `H S% L%` triple, which it never is — hence the alpha-derivative mix.
-
-       VIEW-TRANSITION (view-transition.css). The shared `.gl-list-item` group
-       recipe + the `--vt-*` axes the `useViewTransition` substrate consumers
-       (dock layer swap, muster J's verdict re-rank) tune their swap against.
-       ═══════════════════════════════════════════════ */
-    --scroll-progress-scroller: root;
-    --scroll-reveal-rise: 6px;
-    --scroll-reveal-range-end: 60%;
-
-    --top-layer-enter-scale: 0.96;
-    --top-layer-backdrop-blur: 8px;
-    --top-layer-backdrop-dim: 0.5;
-
-    --vt-duration: var(--duration-normal);
-    /* AX.W05 — ONE iOS-spring vocabulary: every spring-flavored transition reads
-       a governed `--spring-*` register. The legacy apple-spring cubic-bezier
-       (+27.5% overshoot) was a SECOND authority beside the regen `--spring-*`
-       cohort; it is EXCISED. Its emphatic-overshoot register maps to the playful
-       `--spring-bouncy` (the closest `linear()` overshoot stop-set), so the VT
-       default + the cards/top-layer transitions share one spring primitive
-       (CPU + GPU sample the same curve). No cubic-bezier fallback seed survives —
-       the `linear()` spring degrades to `ease` where `linear()` is unsupported. */
-    --vt-ease: var(--spring-bouncy);
-    --vt-rise: 8px;
-
-    /* AT.W6-dock-c / AU.W8 — the dock layer-swap morph timing, minted ONCE so
-       both engine paths are timing-IDENTICAL: the FLIP fallback (via
-       `--dock-motion-resize`), the native View-Transition group (its
-       `animation-timing-function`), AND the runtime SpringProgress driver
-       (AU.W8.3) consume this same `(0.32, 0.7)` source curve. Retires the AQ.W6
-       fork where the VT path ran `--vt-ease` (apple-spring, +27.5% overshoot)
-       while the FLIP ran the snappy spring. `--vt-ease` still defaults the
-       other VT recipes (`.gl-list-item`).
-
-       AU.W8 — RETARGET snappy → dock. `--spring-snappy` (ζ=0.65, +6.8%) read as
-       mechanical: a stiff plateau at ~48% with too little overshoot to feel
-       alive ("not iOS-smooth"). AW.W2 then retuned the dock spring to the
-       iOS-control register: `--spring-dock` ((0.32, 0.7), ~+4.6%) settles snappy
-       with a restrained overshoot — the felt iOS dock morph, off the prior
-       playful +18.5% register. The runtime driver's DOCK_SPRING const MIRRORS the
-       (0.32, 0.7) PRESETS row, so the CSS token and the JS-driven morph are
-       bit-identical. */
-    --dock-resize-spring: var(--spring-dock);
-
-    /* AT.W7-dock-b — dock-control press micro-feedback spring. A TRANSFORM-ONLY
-       spring (`scale`/`rotate`) the dock controls apply to their hover/press
-       activation so the squish reads with a touch of spring-back rather than a
-       flat ease. STRICTLY transform-scoped: it must never touch the surface-tier
-       `[data-held]` fades (background/border/box-shadow), which stay on
-       `--duration-fast var(--ease-standard)`. The duration pairs with
-       `--duration-fast`; consumers retune the whole feel via this one token.
-
-       AY.W-DOCK2 (D6) — the register is `--spring-smooth`, the §6 easing-doctrine
-       transform-press register (tokens.css §2: transform hover/press/active →
-       `--spring-smooth`/`--spring-snappy`, NEVER `--spring-bouncy`; a press must
-       settle, never overshoot into a visible bounce). The prior `--spring-bouncy`
-       ROOT default was off-doctrine, shadowed for the four named controls by a
-       per-surface re-point in dock-controls.css — the exact per-surface fork the
-       doctrine kills. The re-point is now a DEAD byte-identical redeclaration and is
-       DELETED; the ROOT token IS the doctrine register, so any other consumer of
-       `--dock-press-spring` inherits the correct smooth register. */
-    --dock-press-spring: var(--duration-fast) var(--spring-smooth);
+    /* §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. */
 }