@mkbabb/glass-ui 4.0.0 → 4.1.0

package/src/styles/tokens/scroll-tokens.css

@@ -0,0 +1,123 @@
+/* tokens/scroll-tokens.css
+   §20 PLATFORM MOTION (AQ.W5) — the native-platform motion substrate knobs.
+   Carved WHOLE from tokens/scale-paper.css at BB.W-CARVE4 to hold the no-god-module
+   bound (the paper/control/display/metal/timeline/metric/table families §11–§19 stay
+   in scale-paper.css; §20 is the file's last section, so this is a contiguous tail
+   carve at the §19/§20 seam). @import-ed by tokens.css in cascade order IMMEDIATELY
+   AFTER scale-paper.css — an adjacent same-selector :root{} block carrying the SAME
+   declarations in the SAME relative order, so the dist is byte-isomorphic.
+
+   The motion families, each read by a `@supports`-gated CSS recipe:
+   scroll-driven.css / scroll-choreography.css, animations.css (§TOP-LAYER),
+   view-transition.css — every visual knob a token so a consumer retunes without
+   editing library source. */
+:root {
+    /* 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. */
+    --scroll-progress-scroller: root;
+    --scroll-reveal-rise: 6px;
+    --scroll-reveal-range-end: 60%;
+
+    /* BB.W-SCROLL-MOTION — the scroll-CHOREOGRAPHY register knobs (the page-build /
+       section-cascade / scroll-pinned recipes in scroll-choreography.css). These
+       EXTEND the --scroll-reveal-* substrate above; the existing three are READ-ONLY
+       (the cascade COMPOSES them, it never re-tunes them). All distances are
+       compositor (transform) channels; the clocks are the per-spring settle clocks
+       (scheme-motion.css), threaded, never re-tuned. */
+    /* .scroll-build — the route-enter page-build (the chrome -> hero -> body
+       coordinated entrance). The rise is a touch deeper than the section cascade
+       (the page ASSEMBLES — a more pronounced settle), the step is the per-beat
+       coordinated stagger between the chrome, hero, and first-section beats. */
+    --scroll-build-rise: 1.5rem;
+    --scroll-build-step: 90ms;
+    /* .scroll-cascade — the orchestrated section cascade (the per-child view()
+       timeline, the spring-clocked coupled build). The rise lifts the bare
+       --scroll-reveal-rise 6px to a perceptible SOTA build; the range-end is the
+       reveal window (a touch tighter than the bare reveal so each section lands
+       crisply rather than dragging a long fade tail). The column-stagger delay is
+       the opt-in .scroll-cascade--columns grid-variant knob. */
+    --scroll-cascade-rise: 1.25rem;
+    --scroll-cascade-range-end: 45%;
+    --scroll-cascade-column-stagger: 60ms;
+    /* .scroll-pin — the fixed-stage-advances-time scroll-pinned register. The stage
+       height is the Nvh temporal space the sticky stage advances its phases across;
+       the phase windows are the scroll-progress fractions the stage's internal
+       phases key off (grid-reveal 0..45%, expand 45..90%, settle 90..100% — the
+       Codrops phased-sequence shape). */
+    --scroll-pin-stage-height: 320vh;
+    --scroll-pin-phase-reveal-end: 45%;
+    --scroll-pin-phase-expand-end: 90%;
+    --scroll-pin-lift: 2.5rem;
+
+    /* 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. */
+    --top-layer-enter-scale: 0.96;
+    --top-layer-backdrop-blur: 8px;
+    --top-layer-backdrop-dim: 0.5;
+
+    /* 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. */
+    --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.
+
+       BA.W-GLASS-CAL Unit 3 — the duration leg re-times off the generic
+       `--duration-fast` (0.2s) onto `--spring-smooth-duration` (0.36s, the
+       smooth spring's OWN 2%-band envelope settle), so the press transform plays
+       at its physical settle rather than a generic clock. */
+    --dock-press-spring: var(--spring-smooth-duration) var(--spring-smooth);
+}

package/src/styles/tokens/sizing-config.css

@@ -0,0 +1,110 @@
+/* tokens/sizing-config.css
+   §10 sizing tail — the MetricBadge stacked geometry + the Configurator family
+   (the density ladder, the AZ.W-HIERARCHY section/label/preset vocabulary, the
+   single-column stage floor, the dark-adaptive divider register, the section
+   tonal step) + the component-font override.
+   Carved (BC.W-CARVE6) from the tail of tokens/sizing.css to hold the 500-line
+   no-god-module bound; @import-ed by tokens.css IMMEDIATELY AFTER sizing.css at
+   sizing's own cascade slot — adjacent same-selector :root blocks resolve
+   identically, so the dist is byte-isomorphic.
+   See docs/precepts/design-idioms.md §cohesion-aware partials. */
+:root {
+    /* MetricBadge — stacked variant geometry. The 2-row stacked layout
+       (label / value+unit) wants a taller floor than the inline pill so the
+       label has breathing room above the baseline pair. T.W2.T2 +
+       audit B-spec §3.2 vertical-rhythm table land 42px (2.625rem) as the
+       min-height with 6px (0.375rem) block padding. The inline ladder
+       keeps its tight defaults via `--metric-badge-min-height` /
+       `--metric-badge-padding-block` (declared inline at the
+       `.metric-badge` selector). */
+    --metric-badge-min-height-stacked: 2.625rem;
+    --metric-badge-padding-block-stacked: 0.375rem;
+
+    /* Configurator — N.W2 Lane A density axis (4 rungs).
+       The `comfortable` rung restates the pre-N.W2 baked recipe exactly
+       (`gap-1.5 py-2` = 0.375rem / 0.5rem) so unparameterised consumers
+       see no visual change. `mobile` halves the vertical breathing room
+       for narrow-viewport studios; `spacious` doubles it for settings-
+       page hosts. See `<ConfiguratorRow>` scoped CSS for the attribute-
+       selector binding. */
+    --configurator-row-gap-mobile: 0.25rem;        /*  4px — tight */
+    --configurator-row-gap-compact: 0.3125rem;     /*  5px — slightly tighter */
+    --configurator-row-gap-comfortable: 0.375rem;  /*  6px — pre-N.W2 default */
+    --configurator-row-gap-spacious: 0.75rem;      /* 12px — generous */
+
+    --configurator-row-py-mobile: 0.25rem;         /*  4px — tight */
+    --configurator-row-py-compact: 0.375rem;       /*  6px — slightly tighter */
+    --configurator-row-py-comfortable: 0.5rem;     /*  8px — pre-N.W2 default */
+    --configurator-row-py-spacious: 0.875rem;      /* 14px — generous */
+
+    /* Configurator HIERARCHY VOCABULARY (AZ.W-HIERARCHY — D6-3). The three
+       NAMED registers the studios (blob, aurora) inherit instead of a flat
+       undifferentiated stack. DISTINCT from the density ladder above (which is
+       the per-row CADENCE, not the section/label/preset register).
+
+       1. Section register — the <ConfiguratorLayer> label reads as a SECTION,
+          not a row: the √φ subheading rung at weight 600, lifting off the prior
+          flat `text-small font-semibold`. */
+    --configurator-section-size: var(--type-subheading);  /* 20.4px — √φ section rung */
+    --configurator-section-weight: 600;                   /* the heading weight */
+
+    /* AZ.W-BLOB-REDRESS — the SINGLE-COLUMN stage-row FLOOR. Below `lg` the
+       Configurator stacks stage-over-aside; a percentage stage height against
+       an INDEFINITE auto-row resolves to 0 (the GooBlob hero painted 0×0 on a
+       phone). The single-column band's `grid-template-rows` floors the stage
+       row at this DEFINITE `minmax(…)` minimum so the percentage resolves;
+       the aside row takes the remainder and scrolls internally. */
+    --configurator-stage-min: 18rem;                      /* 288px — the mobile live-specimen stage floor */
+
+    /* 2. Preset-row PRIMARY-AFFORDANCE lift. The preset picker is the primary
+          interaction (C6-10); D6-3's defect is the preset row being spatially
+          CRAMPED. This token's binding SEMANTIC is the preset row's SPATIAL
+          rhythm — its block-padding / gap, NOT a font-weight — so the preset
+          row breathes ABOVE a body ConfiguratorRow. (The `-weight` name follows
+          the vocabulary's "register weight" framing; it lands on the padding/gap
+          slot of `.configurator-presets`, the heavier spatial cadence.) */
+    --configurator-preset-row-weight: 0.625rem;           /* 10px — > a body row's 8px py-comfortable */
+    --configurator-preset-row-gap: 0.5rem;                /*  8px — generous chip gap */
+
+    /* 3. The DIVIDER register — dark-adaptive (BA.W-CONFIG-CHASSIS.1 / CFG-4).
+       The section + inter-row dividers used to be inline `border-border/40` and
+       `border-border/30` Tailwind alphas; over the W-DARK-MATERIAL dark
+       `glass-floating` plate (a luminous transmissive material, --card L16) those
+       near-equal-luminance hairlines effectively VANISHED — "the sections run
+       together". This ONE token is consumed by every divider rule (the
+       <ConfiguratorLayer> section border, the dividers-prop inter-row border,
+       Configurator.vue's aside/preset/footer borders, configurator.css) so the
+       divider weight is retuned from a single override.
+
+       The dark-LIFTING arm is the load-bearing half: the divider must read on
+       BOTH plates. On LIGHT it is the resting `--border` warm-neutral at the
+       prior ~40% weight; on DARK it LIFTS off `--border` (L34 over the L16 plate
+       — too close) toward the `--foreground` warm-ink (L90) at a higher α, so a
+       visible luminance step survives the dark glass. `light-dark()` carries the
+       arm in ONE declaration (the same :root cascade context as the surface-tint
+       family; an engine without `light-dark()` falls back to the dark-arm.css
+       `.dark` floor minted in lockstep). The SECTION divider runs a touch
+       heavier than the inter-row hairline (a section reads as a section without
+       a second heading rung). */
+    --configurator-divider: light-dark(
+        color-mix(in srgb, var(--border) 55%, transparent),
+        color-mix(in srgb, var(--foreground) 22%, transparent)
+    );
+    --configurator-divider-section: light-dark(
+        color-mix(in srgb, var(--border) 70%, transparent),
+        color-mix(in srgb, var(--foreground) 30%, transparent)
+    );
+    /* The optional faint section-header tonal step — a whisper-light warm wash
+       behind a <ConfiguratorLayer> section so it reads as a grouped section
+       WITHOUT a new heading rung (within the W-HIERARCHY register). Default off
+       (transparent) on light where the hairline carries it; a faint
+       foreground-over-transparent lift on dark where the divider alone is
+       subtle. */
+    --configurator-section-tint: light-dark(
+        transparent,
+        color-mix(in srgb, var(--foreground) 3%, transparent)
+    );
+
+    /* Component font override (consumers override locally) */
+    --select-font: inherit;
+}

package/{dist/styles/tokens/offsets-sizing.css → src/styles/tokens/sizing.css}

@@ -1,101 +1,16 @@
-/* tokens/offsets-sizing.css
-   §9 animation offsets · §10 sizing (control heights, dropdown, carousel, stack-overlap, touch-target floor).
-   Carved from the tokens.css cascade root; @import-ed by tokens.css in
-   cascade order. Same :root cascade context as its siblings. */
+/* tokens/sizing.css
+   §10 sizing — the --ui-scale doctrine, control-height/font/glyph cohorts,
+   dropdown/carousel/stack-overlap, the dock geometry cascade (--dock-scale +
+   collapsed-pill + rail hairline + active-state ladder + iOS register + touch
+   floor), MetricBadge stacked geometry, the Configurator density + HIERARCHY
+   vocabulary, the single-column stage floor, the section tonal step, the
+   component-font override.
+   Carved (BB.W-CARVE3) from the former tokens/offsets-sizing.css §9/§10 split;
+   @import-ed by tokens.css immediately AFTER offsets.css at offsets-sizing's old
+   cascade slot — 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;
-       SegmentedTabs' `overflow="scroll"` strip overrides it to 0.5rem). It
-       SUPERSEDES `--mask-fade-width` (the scroll-BLIND `.scroll-fade-*` static
-       masks' knob). `--mask-fade-width` is RETIRE-COORDINATED: it survives this
-       wave because the static `.scroll-fade-*` utility blocks survive (so
-       W-CONFIG-CHASSIS's C2/C3 configurator columns still render mid-batch); it
-       retires in a CLEAN BREAK (no alias) at the orchestrator's Batch-2-close
-       commit alongside the static utilities, once C2/C3 have migrated onto the
-       primitive. */
-    --fade-scroll-width: 1rem;
-    --mask-fade-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);
-
-    --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). PopoverContent keeps its own
-       `--panel-padding-roomy` (1rem) for the prose-popover register. */
-    --panel-padding:       0.375rem;
-    --panel-padding-roomy: 1rem;
-    --chart-height-compact: 15rem;
-    --chart-height-default: 22.5rem;
-    --chart-height-large: 25rem;
-    --chart-margin: 1.25rem;
-    --paper-texture-size: 200px 200px;
-
-    /* Border opacity scale */
-    --border-opacity-light:  0.15;
-    --border-opacity-medium: 0.25;
-    --border-opacity-strong: 0.6;
-
     /* ═══════════════════════════════════════════════
        §10 SIZING
        ═══════════════════════════════════════════════ */
@@ -207,6 +122,24 @@
     --dropdown-text-secondary: var(--control-text-sm);
     --dropdown-input-height:   var(--control-h-md);
 
+    /* ── The search-family magnitude rungs (BC.W-SEARCH-CUSTOM) ───────────────
+       The SearchBar/FuzzySearch compound surfaces read these indirection rungs
+       for the glyph / icon-button / result-label magnitudes — so a consumer
+       retunes the WHOLE search family from ONE `:root` override, not a fork of
+       per-element px literals (`w-3.5 h-3.5`, `!h-6 !w-6`, `text-[0.6rem]`). Each
+       DEFAULTS to the existing cohort it replaces, so the bare search surface is
+       byte-identical to HEAD (the substitution-vs-redeclaration discipline — the
+       NAME is search-local, the magnitude stays the `--ui-glyph`/`--control-*`
+       source). NO parallel magnitude ladder: these are aliases onto the cohort.
+         • PRIMARY result label / field font  → `--control-text` (the `text-sm` register).
+         • SECONDARY type-Badge / footnote    → `--control-text-sm` (the `text-xs` register).
+         • the search/clear/expand glyph       → `--ui-glyph-sm` (the chrome 1.4 glyph).
+         • the icon-button hit-box            → `--control-h-xs` (the HEAD `h-6`/`h-7`). */
+    --search-icon-size:           var(--ui-glyph-sm);
+    --search-button-size:         var(--control-h-xs);
+    --search-result-text:         var(--control-text);
+    --search-result-text-secondary: var(--control-text-sm);
+
     --size-icon-btn: 2.5rem;
     --icon-xs: 0.75rem;
     --icon-sm: 0.875rem;
@@ -283,8 +216,44 @@
     /* Library glyph ownership — `.dock-icon-button > svg` reads this so the dock
        icon glyph scales WITH the box (mirroring `.dark-mode-toggle-button > svg`).
        A consumer-passed explicit lucide size class still WINS (utility layer >
-       component layer); this is a DEFAULT, not a ceiling. */
-    --dock-icon-glyph: calc(1.25rem * var(--dock-scale));
+       component layer); this is a DEFAULT, not a ceiling.
+
+       BB.W-PERF-PRODUCER A′-6 — the glyph rides the per-DENSITY box, not a flat rem.
+       The value.js D5-1 companion trace: `density="spacious"` grew the shelf + pad +
+       gap but the glyph stayed 1.25rem (it rode `--dock-scale` only, NOT the
+       per-density `--dock-layer-height` axis density.css scales). Now the glyph is a
+       RATIO of `--dock-layer-height` (`--dock-icon-glyph-ratio`, default 0.5 → a
+       2rem control → a 1rem glyph at compact, a 2.5rem control → 1.25rem at
+       comfortable, lockstep up the rungs). The `--dock-scale` coarse thread is
+       PRESERVED transitively — `--dock-layer-height` already rides it (density.css).
+       The WCAG glyph-floor holds via `max(…, --dock-icon-glyph-floor)` (a 16px floor
+       so a sub-1 density/coarse register can never drop the glyph below the legible
+       minimum). NOTE: `--dock-layer-height` is painted ONLY on `.glass-dock[data-density]`
+       (density.css) — at `:root` it is the inline fallback below, so this `:root`
+       declaration resolves the fallback ladder; density.css RE-RESOLVES `--dock-icon-glyph`
+       inside each `[data-density]` scope so the density-painted height flows in (the
+       substitution-vs-inheritance trap the overflow.css R5-1 sweep documents). The
+       toggle mirror `.dark-mode-toggle-button > svg` reads the SAME `--dock-icon-glyph`
+       so both glyphs move onto the density axis together. */
+    --dock-icon-glyph-ratio: 0.5;
+    --dock-icon-glyph-floor: 1rem;
+    --dock-icon-glyph: max(
+        calc(var(--dock-layer-height, calc(2.5rem * var(--dock-scale))) * var(--dock-icon-glyph-ratio)),
+        var(--dock-icon-glyph-floor)
+    );
+
+    /* BC.W-DOCK-ENGINE move 3 (the Atlas A-9 fold) — `--dock-control-glyph-size` is
+       the ONE in-dock control-glyph retint knob (the dark-toggle SVG `width`/`height`
+       + the `--dark-mode-toggle-padding` inset BOTH read it), defaulting to the
+       `--dock-scale`-keyed `--dock-icon-glyph` the nav icons paint so the docked
+       toggle is optically uniform out of the box. Like `--dock-icon-glyph` this
+       `:root` declaration resolves the fallback ladder; density.css RE-RESOLVES it
+       inside each `[data-density]` scope and overflow.css RE-DECLARES it in the
+       coarse block, so the density-painted + coarse-scaled `--dock-icon-glyph` flows
+       in (the substitution-vs-inheritance trap closed on all three registers — a
+       `:root`-only knob would freeze at the `:root` `--dock-scale` while the glyph
+       lifts). ONE knob; no per-size literal, no `!important`. */
+    --dock-control-glyph-size: var(--dock-icon-glyph);
 
     /* AX.W45-TUNE Q1 — the COLLAPSED-pill floor tokens. The collapsed summary
        used to fall to `--dock-layer-height` (the FULL control height, ~2.5rem) for
@@ -377,12 +346,9 @@
        `--dock-rail-extend-length` (declared in rail-extend.css) was RE-SEMANTICIZED:
        it is no longer a one-way connector length but the SYMMETRIC per-side overrun of
        the seam line (the line's cross-extent = dock extent + 2× the knob, centered on
-       the seam). `--dock-rail-retract-stub` is the residual protrusion FRACTION the
-       chips leave past the dock edge on collapse (the macOS fan-out "retract INTO the
-       rail leaving a slight protrusion"; 0 = fully retracted, 1 = no retract). The
-       `--dock-section-zone-gap` is the inter-control rhythm inside a <DockSection> zone
-       (defaults to the dock's own `--dock-gap`, so the section grouping adds no box). */
-    --dock-rail-retract-stub: 0.35;
+       the seam). The `--dock-section-zone-gap` is the inter-control rhythm inside a
+       <DockSection> zone (defaults to the dock's own `--dock-gap`, so the section
+       grouping adds no box). */
     --dock-section-zone-gap: var(--dock-gap, 0.25rem);
 
     /* Dock active-state ladder (O.W6 Lane B)
@@ -451,6 +417,21 @@
        WCAG 2.5.5 floor on touch devices. */
     --dock-touch-target: 2.75rem; /* 44px */
 
+    /* BC.W-AX-DOCK-COCKPIT — the dock LABEL-tracks-CONTROL ratio (the
+       dock-oversize chronic close, speedtest A-9). The `dock-label`
+       (typography/semantic.css) sizes its font as a PROPORTION of the
+       control height — `calc(var(--dock-control-size) * var(--dock-label-ratio))`
+       — so a tighter control (the `[data-preset="cockpit"]` 2.75rem floor with
+       compact chrome) carries a proportionally tighter label, never the fixed
+       `--type-subheading` rung that read OVERSIZE on a tight pill. The default
+       reproduces `--type-subheading` (1.272rem) at the comfortable `2.5rem`
+       control (1.272 / 2.5 = 0.5088) so the bare default is byte-near-identical
+       — opt into the cockpit preset (or override this knob from `:root`/the
+       `[data-preset]` scope) to retune the whole dock label family in ONE write.
+       The explicit `--dock-label-size` knob STILL wins when set (the dock.css
+       audacious-mobile carve precedent, KEPT — the ratio is the FALLBACK). */
+    --dock-label-ratio: 0.5088;
+
     /* AQ.W3 §7 — canonical WCAG 2.5.5 (44px) touch-target floor for the
        NON-dock coarse-pointer surfaces (`Button size="icon"`,
        ExpandableContainer triggers, SegmentedTabs responsive mobile trigger). One
@@ -460,103 +441,10 @@
        dock floor and the general floor can be retuned independently. */
     --touch-target: 2.75rem; /* 44px */
 
-    /* MetricBadge — stacked variant geometry. The 2-row stacked layout
-       (label / value+unit) wants a taller floor than the inline pill so the
-       label has breathing room above the baseline pair. T.W2.T2 +
-       audit B-spec §3.2 vertical-rhythm table land 42px (2.625rem) as the
-       min-height with 6px (0.375rem) block padding. The inline ladder
-       keeps its tight defaults via `--metric-badge-min-height` /
-       `--metric-badge-padding-block` (declared inline at the
-       `.metric-badge` selector). */
-    --metric-badge-min-height-stacked: 2.625rem;
-    --metric-badge-padding-block-stacked: 0.375rem;
-
-    /* Configurator — N.W2 Lane A density axis (4 rungs).
-       The `comfortable` rung restates the pre-N.W2 baked recipe exactly
-       (`gap-1.5 py-2` = 0.375rem / 0.5rem) so unparameterised consumers
-       see no visual change. `mobile` halves the vertical breathing room
-       for narrow-viewport studios; `spacious` doubles it for settings-
-       page hosts. See `<ConfiguratorRow>` scoped CSS for the attribute-
-       selector binding. */
-    --configurator-row-gap-mobile: 0.25rem;        /*  4px — tight */
-    --configurator-row-gap-compact: 0.3125rem;     /*  5px — slightly tighter */
-    --configurator-row-gap-comfortable: 0.375rem;  /*  6px — pre-N.W2 default */
-    --configurator-row-gap-spacious: 0.75rem;      /* 12px — generous */
-
-    --configurator-row-py-mobile: 0.25rem;         /*  4px — tight */
-    --configurator-row-py-compact: 0.375rem;       /*  6px — slightly tighter */
-    --configurator-row-py-comfortable: 0.5rem;     /*  8px — pre-N.W2 default */
-    --configurator-row-py-spacious: 0.875rem;      /* 14px — generous */
-
-    /* Configurator HIERARCHY VOCABULARY (AZ.W-HIERARCHY — D6-3). The three
-       NAMED registers the studios (blob, aurora) inherit instead of a flat
-       undifferentiated stack. DISTINCT from the density ladder above (which is
-       the per-row CADENCE, not the section/label/preset register).
-
-       1. Section register — the <ConfiguratorLayer> label reads as a SECTION,
-          not a row: the √φ subheading rung at weight 600, lifting off the prior
-          flat `text-small font-semibold`. */
-    --configurator-section-size: var(--type-subheading);  /* 20.4px — √φ section rung */
-    --configurator-section-weight: 600;                   /* the heading weight */
-
-    /* AZ.W-BLOB-REDRESS — the SINGLE-COLUMN stage-row FLOOR. Below `lg` the
-       Configurator stacks stage-over-aside; a percentage stage height against
-       an INDEFINITE auto-row resolves to 0 (the GooBlob hero painted 0×0 on a
-       phone). The single-column band's `grid-template-rows` floors the stage
-       row at this DEFINITE `minmax(…)` minimum so the percentage resolves;
-       the aside row takes the remainder and scrolls internally. */
-    --configurator-stage-min: 18rem;                      /* 288px — the mobile live-specimen stage floor */
-
-    /* 2. Preset-row PRIMARY-AFFORDANCE lift. The preset picker is the primary
-          interaction (C6-10); D6-3's defect is the preset row being spatially
-          CRAMPED. This token's binding SEMANTIC is the preset row's SPATIAL
-          rhythm — its block-padding / gap, NOT a font-weight — so the preset
-          row breathes ABOVE a body ConfiguratorRow. (The `-weight` name follows
-          the vocabulary's "register weight" framing; it lands on the padding/gap
-          slot of `.configurator-presets`, the heavier spatial cadence.) */
-    --configurator-preset-row-weight: 0.625rem;           /* 10px — > a body row's 8px py-comfortable */
-    --configurator-preset-row-gap: 0.5rem;                /*  8px — generous chip gap */
-
-    /* 3. The DIVIDER register — dark-adaptive (BA.W-CONFIG-CHASSIS.1 / CFG-4).
-       The section + inter-row dividers used to be inline `border-border/40` and
-       `border-border/30` Tailwind alphas; over the W-DARK-MATERIAL dark
-       `glass-floating` plate (a luminous transmissive material, --card L16) those
-       near-equal-luminance hairlines effectively VANISHED — "the sections run
-       together". This ONE token is consumed by every divider rule (the
-       <ConfiguratorLayer> section border, the dividers-prop inter-row border,
-       Configurator.vue's aside/preset/footer borders, configurator.css) so the
-       divider weight is retuned from a single override.
-
-       The dark-LIFTING arm is the load-bearing half: the divider must read on
-       BOTH plates. On LIGHT it is the resting `--border` warm-neutral at the
-       prior ~40% weight; on DARK it LIFTS off `--border` (L34 over the L16 plate
-       — too close) toward the `--foreground` warm-ink (L90) at a higher α, so a
-       visible luminance step survives the dark glass. `light-dark()` carries the
-       arm in ONE declaration (the same :root cascade context as the surface-tint
-       family; an engine without `light-dark()` falls back to the dark-arm.css
-       `.dark` floor minted in lockstep). The SECTION divider runs a touch
-       heavier than the inter-row hairline (a section reads as a section without
-       a second heading rung). */
-    --configurator-divider: light-dark(
-        color-mix(in srgb, var(--border) 55%, transparent),
-        color-mix(in srgb, var(--foreground) 22%, transparent)
-    );
-    --configurator-divider-section: light-dark(
-        color-mix(in srgb, var(--border) 70%, transparent),
-        color-mix(in srgb, var(--foreground) 30%, transparent)
-    );
-    /* The optional faint section-header tonal step — a whisper-light warm wash
-       behind a <ConfiguratorLayer> section so it reads as a grouped section
-       WITHOUT a new heading rung (within the W-HIERARCHY register). Default off
-       (transparent) on light where the hairline carries it; a faint
-       foreground-over-transparent lift on dark where the divider alone is
-       subtle. */
-    --configurator-section-tint: light-dark(
-        transparent,
-        color-mix(in srgb, var(--foreground) 3%, transparent)
-    );
-
-    /* Component font override (consumers override locally) */
-    --select-font: inherit;
-
+    /* The MetricBadge stacked geometry + the Configurator family (density ladder,
+       AZ.W-HIERARCHY section/label/preset vocabulary, stage-floor, dark-adaptive
+       divider register, section tonal step) + the --select-font override are carved
+       into tokens/sizing-config.css (a cohesive §10 tail, the no-god-module re-drain)
+       — @import-ed by tokens.css IMMEDIATELY AFTER sizing.css (adjacent same-selector
+       :root blocks, byte-isomorphic). */
 }

package/src/styles/tokens.css

@@ -21,14 +21,25 @@
  * (registrations + the specular magnitude cohort that reads them).
  */
 
-/* CSS @import rules must precede every other rule. The nine partials @import in
-   cascade order: */
+/* CSS @import rules must precede every other rule. The ten partials @import in
+   cascade order (offsets-sizing.css was carved into offsets.css + sizing.css at
+   BB.W-CARVE3 — adjacent same-selector :root blocks at the same cascade slot): */
 @import "./tokens/scheme-motion.css";
 @import "./tokens/color-radius.css";
 @import "./tokens/shadow.css";
 @import "./tokens/glass.css";
-@import "./tokens/offsets-sizing.css";
+@import "./tokens/glass-fx.css";
+@import "./tokens/glass-deep.css";
+@import "./tokens/on-glass-fg.css";
+@import "./tokens/offsets.css";
+@import "./tokens/sizing.css";
+/* BC.W-CARVE6 — sizing.css's §10 tail (MetricBadge stacked geometry + the
+   Configurator density/HIERARCHY/divider family + the --select-font override)
+   carved into sizing-config.css to hold the 500-line bound, @import-ed IMMEDIATELY
+   AFTER sizing.css (adjacent same-selector :root blocks — byte-isomorphic). */
+@import "./tokens/sizing-config.css";
 @import "./tokens/scale-paper.css";
+@import "./tokens/scroll-tokens.css";
 @import "./tokens/light-dark.css";
 @import "./tokens/dark-arm.css";
 @import "./tokens/property-regs.css";