@mkbabb/glass-ui 4.0.0 → 4.1.0

package/src/styles/typography/semantic.css

@@ -24,7 +24,7 @@ body {
     font-family: var(--font-display);
     font-size: var(--type-display-audacious);
     line-height: var(--type-leading-display);
-    letter-spacing: var(--type-tracking-tight);
+    letter-spacing: var(--type-tracking-display);
     font-optical-sizing: auto;
     font-weight: 600;
     /* AQ.W3 §W3.3 — balance multi-line display headlines. Text-only (no box) so
@@ -60,7 +60,7 @@ body {
     font-family: var(--font-display);
     font-size: var(--type-display-hero);
     line-height: var(--type-leading-display);
-    letter-spacing: var(--type-tracking-tight);
+    letter-spacing: var(--type-tracking-display);
     font-optical-sizing: auto;
     font-weight: 600;
     text-wrap: balance; /* AQ.W3 §W3.3 */
@@ -70,7 +70,7 @@ body {
     font-family: var(--font-display);
     font-size: var(--type-display-mega);
     line-height: var(--type-leading-display);
-    letter-spacing: var(--type-tracking-tight);
+    letter-spacing: var(--type-tracking-display);
     font-optical-sizing: auto;
     font-weight: 600;
     text-wrap: balance; /* AQ.W3 §W3.3 */
@@ -80,7 +80,7 @@ body {
     font-family: var(--font-display);
     font-size: var(--type-display-5);
     line-height: var(--type-leading-display);
-    letter-spacing: var(--type-tracking-tight);
+    letter-spacing: var(--type-tracking-display);
     font-optical-sizing: auto;
     font-weight: 600;
     text-wrap: balance; /* AQ.W3 §W3.3 */
@@ -90,7 +90,7 @@ body {
     font-family: var(--font-display);
     font-size: var(--type-display-4);
     line-height: var(--type-leading-display);
-    letter-spacing: var(--type-tracking-tight);
+    letter-spacing: var(--type-tracking-display);
     font-optical-sizing: auto;
     font-weight: 600;
     text-wrap: balance; /* AQ.W3 §W3.3 */
@@ -100,7 +100,7 @@ body {
     font-family: var(--font-display);
     font-size: var(--type-display-3);
     line-height: var(--type-leading-display);
-    letter-spacing: var(--type-tracking-tight);
+    letter-spacing: var(--type-tracking-display);
     font-optical-sizing: auto;
     font-weight: 600;
     text-wrap: balance; /* AQ.W3 §W3.3 */
@@ -110,7 +110,7 @@ body {
     font-family: var(--font-display);
     font-size: var(--type-display-2);
     line-height: var(--type-leading-display);
-    letter-spacing: var(--type-tracking-tight);
+    letter-spacing: var(--type-tracking-display);
     font-optical-sizing: auto;
     font-weight: 600;
     text-wrap: balance; /* AQ.W3 §W3.3 */
@@ -120,7 +120,7 @@ body {
     font-family: var(--font-display);
     font-size: var(--type-display-1);
     line-height: var(--type-leading-display);
-    letter-spacing: var(--type-tracking-tight);
+    letter-spacing: var(--type-tracking-display);
     font-optical-sizing: auto;
     font-weight: 600;
     text-wrap: balance; /* AQ.W3 §W3.3 */
@@ -157,13 +157,26 @@ body {
 /* Canonical dock control label register — text labels INSIDE
    `.dock-tab-button` (Start, Next, Submit, …) that want an emphatic character
    without `.text-heading`'s `font-weight: 700` (which reads as literal bold in
-   a dock pill). Composes the `--dock-label-size` knob when set (dock.css
-   audacious mobile carve), else `--type-subheading`. Weight 400 — Plus Jakarta
-   reads heavier than its numeric weight at pill size, so regular is the
-   not-bold register. */
+   a dock pill). Weight 400 — Plus Jakarta reads heavier than its numeric weight
+   at pill size, so regular is the not-bold register.
+
+   BC.W-AX-DOCK-COCKPIT — the label TRACKS the control height by ratio (the
+   dock-oversize chronic close, speedtest A-9): the font is a PROPORTION of the
+   control (`calc(var(--dock-control-size) * var(--dock-label-ratio))`) so a
+   tighter control (the `[data-preset="cockpit"]` 2.75rem floor + compact chrome)
+   carries a proportionally tighter label — never the fixed `--type-subheading`
+   rung that read OVERSIZE on a tight pill. The explicit `--dock-label-size` knob
+   STILL wins when set (the dock.css audacious-mobile carve precedent, KEPT — the
+   ratio is the FALLBACK). The `--dock-label-ratio` default reproduces
+   `--type-subheading` at the comfortable `2.5rem` control (sizing.css), so the
+   bare default is byte-near-identical; the `--dock-control-size` fallback `2.5rem`
+   mirrors the comfortable rung for a label outside a density-painted scope. */
 @utility dock-label {
     font-family: var(--font-text);
-    font-size: var(--dock-label-size, var(--type-subheading));
+    font-size: var(
+        --dock-label-size,
+        calc(var(--dock-control-size, 2.5rem) * var(--dock-label-ratio))
+    );
     line-height: var(--type-leading-body);
     font-weight: 400;
     letter-spacing: var(--type-tracking-normal);

package/src/styles/typography/utilities.css

@@ -26,12 +26,24 @@
 /* ═══════════════════════════════════════════════
    MONO variants
    ═══════════════════════════════════════════════ */
+/* BB.W-EYEBROW-UNION — THE canonical mono-caption EYEBROW vocabulary, declared
+   ONCE. The pure color-agnostic register: mono · caption-size · uppercase ·
+   tracking-CAPS. The prior drift (tracking-WIDER 0.05em, weight-500, both off the
+   `.section-label` canon-by-usage) is RECONCILED onto the canon's secondary axes
+   (clean break, no alias): the tracking folds to `--type-tracking-caps` (0.1em),
+   the weight-500 drops (a per-use choice a site states inline via `font-medium`,
+   not a fork in the eyebrow register), and color stays UNBAKED so a consumer
+   pairs any ink (`text-foreground`/`text-muted-foreground`/an accent) — the 17
+   `text-mono-caption text-foreground` sites keep their ink. `.section-label`
+   (below) COMPOSES this vocabulary + bakes the muted ink (the colored canon);
+   the menu caption reads the `--menu-section-*` knobs that DEFAULT to these same
+   tokens (the sanctioned override layer). proof:eyebrow-union locks the
+   single-source-ness. */
 @utility text-mono-caption {
     font-family: var(--font-mono);
     font-size: var(--type-caption);
-    letter-spacing: var(--type-tracking-wider);
+    letter-spacing: var(--type-tracking-caps);
     text-transform: uppercase;
-    font-weight: 500;
 }
 
 @utility text-mono-small {
@@ -110,13 +122,16 @@
         }
     }
 
-    /* Section label (mono, small caps) */
+    /* Section label (mono, small caps) — the COLORED eyebrow canon. Composes the
+       ONE `text-mono-caption` vocabulary (mono · caption · uppercase ·
+       tracking-caps) + bakes the muted ink. BB.W-EYEBROW-UNION: this is the
+       canon-by-usage register (the StorySection eyebrow column + Section.vue's
+       `label` tone + the `.section-label--tinted` accent build on it); it now
+       COMPOSES the vocabulary rather than re-declaring it, so a tracking/size
+       change to the eyebrow is ONE edit (the `text-mono-caption` rule). */
     .section-label {
-        font-family: var(--font-mono);
-        font-size: var(--type-caption);
+        @apply text-mono-caption;
         color: var(--muted-foreground);
-        text-transform: uppercase;
-        letter-spacing: var(--type-tracking-caps);
     }
 
     /* Section-accent eyebrow (AZ.W-SUFFUSE D3-7 / D1-8). ONE coherent

package/src/styles/utilities/a11y-overrides.css

@@ -114,7 +114,7 @@ html.no-transition *:not([data-allow-motion])::after {
    `min-block/inline-size` only RAISES — a larger explicit size is never lost. */
 @media (pointer: coarse) {
     [data-size="icon"],
-    .expandable-container__trigger,
+    [data-part="trigger"],
     .segmented-tabs__trigger {
         min-block-size: var(--touch-target, 2.75rem);
         min-inline-size: var(--touch-target, 2.75rem);
@@ -160,10 +160,25 @@ html.no-transition *:not([data-allow-motion])::after {
             translate: -50% -50%;
             min-width: var(--touch-target, 2.75rem);
             min-height: var(--touch-target, 2.75rem);
-            /* Inherit the host's pointer-events so a tap within the halo
-               registers on the atom; the overlay itself is decorative (no
-               paint), so it never occludes the host's own interaction. */
-            pointer-events: auto;
+            /* BC.W-RADIO-FIX — the swallow-fix (the §F headline binding bug).
+               An absolutely-positioned `::before` over the atom with
+               `pointer-events: auto` becomes the topmost hit target across the
+               whole 44px box and INTERCEPTS the real pointer event before it
+               reaches the host's listener — reka's RadioGroupItem / Checkbox /
+               Switch / SliderRoot bind their toggle/drag handler on the HOST
+               button (Radio.vue `onClick`), and the swallowing overlay was the
+               root of "radios don't work" (a synthetic .click() on the host
+               still fired, but a real coarse tap landed on the pseudo and
+               no-op'd). `pointer-events: none` frees the pointer to fall
+               through to the host so the tap reaches reka on EVERY input path,
+               while the 44px GEOMETRY still satisfies the WCAG-2.5.5 readback
+               (getComputedStyle reads min-width/height, not pointer-events —
+               the hit FLOOR is the box, never a pointer-swallowing overlay).
+               The same integrity discipline `useDockClickIntegrity` applies to
+               the dock + the Slider's own `.slider-thumb.touch-hit-area::before`
+               override already discovered (AY.W-SCALE2) — now ONE source for
+               the whole six-atom hit-area family. */
+            pointer-events: none;
         }
     }
 }

package/src/styles/utilities/animate.css

@@ -1,26 +1,29 @@
 /* utilities/animate.css
-   The popover/dropdown shared @utility animation pair — popover-animate + slide-in-from-side (the data-state / data-side entry choreography for popover-class containers). FIRST (before the @layer components block, matching source order).
-   Carved from the utilities.css cascade root; @import-ed by utilities.css in
-   cascade order. See docs/precepts/design-idioms.md §cohesion-aware partials. */
-/* ── Popover/dropdown shared animation ──
-   `@utility` form (V.W3.T8 / A5 §5.9 standardisation): data-state animation
-   pair for popover-class containers (Popover, DropdownMenu, ContextMenu,
-   Tooltip, HoverCard, Select). Composed alongside `.slide-in-from-side`
-   for direction-keyed entries. */
-@utility popover-animate {
-    @apply data-[state=open]:animate-in data-[state=closed]:animate-out
-           data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0
-           data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95;
-}
+   BB.W-LIQUID-REVEAL — the popover/dropdown shared enter recipe RETIRED.
+   @import-ed by utilities.css in cascade order. See
+   docs/precepts/design-idioms.md §cohesion-aware partials. */
 
-/* ── Slide-in entry by side data-attr ──
-   `@utility` form (V.W3.T8). Side-keyed slide entry that pairs with
-   reka-ui's `data-side` (`top|right|bottom|left`). The animation
-   direction inverts each side so panels enter from outside the
-   anchor's edge. */
-@utility slide-in-from-side {
-    @apply data-[side=bottom]:slide-in-from-top-2
-           data-[side=left]:slide-in-from-right-2
-           data-[side=right]:slide-in-from-left-2
-           data-[side=top]:slide-in-from-bottom-2;
-}
+/* ── RETIRED at BB.W-LIQUID-REVEAL (clean break, no alias — BB inv-7 no-legacy) ──
+ *
+ * `@utility popover-animate` (the tw-animate-css fixed-bezier zoom-95 + fade-0 enter)
+ * AND `@utility slide-in-from-side` (the data-side directional slide) are DELETED.
+ * They were the generic cubic-bezier zoom-95 over the same `--duration-normal` wall
+ * clock for every surface — "presses spring, reveals don't" (the §6/W-MOTION-CANON
+ * half-applied enter). The SPRING-CLOCKED LIQUID-ENTER recipe `.glass-reveal`
+ * (src/styles/glass/reveal.css) REPLACES both:
+ *   - the scale+fade ride `--spring-snappy` + `--spring-snappy-duration` (the
+ *     W-GLASS-CAL Unit 3 per-spring clock) with the coupled `filter: blur(4px)→0`
+ *     light-bending decongest (the iOS-27 bloom);
+ *   - the directional `slide-in-from-side` folds onto `.glass-reveal`'s `data-side`
+ *     compositor `translate` leg (on the SAME spring clock).
+ *
+ * The ≥8 reka portaled overlays (Dialog/Popover/Tooltip/HoverCard/DropdownMenu/
+ * ContextMenu/Combobox/Select) compose `.glass-reveal` directly; the
+ * `useLiquidReveal` JS leaf (composables/motion/useLiquidReveal.ts) is the
+ * source-rect bloom REFINEMENT (the dialog-from-button / dock-from-pill case).
+ *
+ * Do NOT re-add an unlayered `@utility popover-animate`/`slide-in-from-side` — the
+ * recipe is `@layer components` `.glass-reveal`; an unlayered utility would win the
+ * cascade over it (the AZ dock-rail `@layer`-loses-to-utility trap). Machine-locked
+ * by proof:liquid-reveal R3 (the negative — no enrolled surface retains
+ * popover-animate). */

package/src/styles/utilities/base-misc.css

@@ -0,0 +1,307 @@
+/* utilities/base-misc.css
+   The @layer components FORM/INTERACTION TAIL — status-dot, depth-text,
+   preserve-3d, ios input fix, fading-scroll (scroll-state-driven edge fade) +
+   the @supports (animation-timeline: scroll()) native path, deferred-section,
+   card-scroll-host, gold-shimmer, kbd.
+   BB.W-CARVE3 carved this off utilities/base.css (the post-tap-squish tail) so
+   each partial stays under the no-god-module 500-line bound. @import-ed by
+   utilities.css IMMEDIATELY AFTER base.css — two adjacent same-`@layer
+   components` blocks compose identically, so the dist is byte-isomorphic. The
+   @property --fade-start/--fade-end registrations the .fading-scroll rules read
+   stay in base.css (source-order BEFORE this partial). See
+   docs/precepts/design-idioms.md §cohesion-aware partials. */
+
+@layer components {
+    /* ── Status dot indicator ── */
+    .status-dot {
+        display: inline-block;
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: var(--radius-pill);
+        flex-shrink: 0;
+        transition:
+            color var(--duration-fast) var(--ease-standard),
+            background var(--duration-fast) var(--ease-standard),
+            box-shadow var(--duration-fast) var(--ease-standard);
+    }
+    /* ── Depth text (layered offset stamp) ──
+       AW.W26 — composes the `--text-shadow-depth` @theme identity token (the
+       hard offset stack + soft ambient tail) instead of a hand-rolled multi-stop
+       literal. The token holds the stack inside the `@theme` defs (gate 4) and
+       re-tints under `.dark` via `--shadow`/`--shadow-color` BY CONSTRUCTION. */
+    .depth-text {
+        --depth-color-primary: var(--primary);
+
+        color: var(--depth-color-primary);
+        text-shadow: var(--text-shadow-depth);
+    }
+
+    /* ── 3D preserve ── */
+    .preserve-3d {
+        transform-style: preserve-3d;
+    }
+
+    /* ── iOS input font-size fix (prevent auto-zoom) ── */
+    .ios input,
+    .ios select,
+    .ios textarea,
+    .ios [contenteditable] {
+        font-size: max(1rem, 1em);
+    }
+
+    /* ── Fading scroll — the scroll-STATE-driven edge fade (BA.W-FADING-SCROLL) ──
+       `<FadingScroll>`'s recipe. Each edge's ramp width is a registered
+       `--fade-start` / `--fade-end` custom (above, default 0px = SHARP), driven
+       by the
+       `scroll(self)` timeline so the start edge feathers only past `scroll > 0`
+       and the end edge only while trailing overflow remains.
+
+       The root IS the scroll port (the component sets overflow via the consumer's
+       utilities — `overflow-x-auto` / `overflow-y-auto` come from the class the
+       consumer passes; the axis floor below sets the OTHER axis). The 4-stop
+       mask reads the two customs; at rest both are 0px so the gradient is a flat
+       opaque pass-through (no feather). */
+    .fading-scroll {
+        /* The base mask is axis-specialized by the modifier classes below. The
+           default-x case uses the inline ramp; the y case the block ramp. */
+        mask-image: linear-gradient(
+            to right,
+            transparent 0,
+            black var(--fade-start),
+            black calc(100% - var(--fade-end)),
+            transparent 100%
+        );
+    }
+    .fading-scroll--x {
+        overflow-x: auto;
+        mask-image: linear-gradient(
+            to right,
+            transparent 0,
+            black var(--fade-start),
+            black calc(100% - var(--fade-end)),
+            transparent 100%
+        );
+    }
+    .fading-scroll--y {
+        overflow-y: auto;
+        mask-image: linear-gradient(
+            to bottom,
+            transparent 0,
+            black var(--fade-start),
+            black calc(100% - var(--fade-end)),
+            transparent 100%
+        );
+    }
+
+    /* The NATIVE primary path: drive the per-edge customs off a `scroll(self)`
+       timeline — ZERO JS on a supporting engine (the `scroll-driven.css` /
+       Baseline-Newly-Available bar). UNLIKE `scroll-driven.css` this is NOT
+       wrapped in `prefers-reduced-motion: no-preference` — the fade is a
+       LEGIBILITY cue, not motion, so it stays present under PRM (it merely stops
+       interpolating; the discrete overflow-edge presence stays correct, and the
+       registered customs make even the static endpoints land right). */
+    @supports (animation-timeline: scroll()) {
+        /* The start edge: from sharp (0) to feathered, completing within the
+           first `--fade-scroll-width` of scroll — so at `scroll = 0` the start is
+           SHARP and it ramps in only once the user genuinely scrolls past. */
+        @keyframes gl-fade-start-in {
+            from {
+                --fade-start: 0px;
+            }
+            to {
+                --fade-start: var(--fade-scroll-width);
+            }
+        }
+        /* The end edge: feathered while trailing overflow remains, ramping OUT to
+           sharp over the last `--fade-scroll-width` of scroll — so at the scroll
+           end (no trailing overflow) the end is SHARP. */
+        @keyframes gl-fade-end-out {
+            from {
+                --fade-end: var(--fade-scroll-width);
+            }
+            to {
+                --fade-end: 0px;
+            }
+        }
+        /* x axis — `scroll(self inline)`; two animations on the ONE element, each
+           gated by `animation-range` to the start / end sliver of the scroll
+           distance. `fadeStart`/`fadeEnd` props toggle their respective
+           animation off via the `[data-fade-*]` presence attrs. */
+        .fading-scroll--x[data-fade-start] {
+            animation: gl-fade-start-in linear both;
+            animation-timeline: scroll(self inline);
+            animation-range: 0 var(--fade-scroll-width);
+        }
+        .fading-scroll--x[data-fade-end] {
+            animation: gl-fade-end-out linear both;
+            animation-timeline: scroll(self inline);
+            animation-range: calc(100% - var(--fade-scroll-width)) 100%;
+        }
+        /* BOTH edges on one element compose as two named animations. */
+        .fading-scroll--x[data-fade-start][data-fade-end] {
+            animation:
+                gl-fade-start-in linear both,
+                gl-fade-end-out linear both;
+            animation-timeline: scroll(self inline), scroll(self inline);
+            animation-range:
+                0 var(--fade-scroll-width),
+                calc(100% - var(--fade-scroll-width)) 100%;
+        }
+        /* y axis — `scroll(self block)`. */
+        .fading-scroll--y[data-fade-start] {
+            animation: gl-fade-start-in linear both;
+            animation-timeline: scroll(self block);
+            animation-range: 0 var(--fade-scroll-width);
+        }
+        .fading-scroll--y[data-fade-end] {
+            animation: gl-fade-end-out linear both;
+            animation-timeline: scroll(self block);
+            animation-range: calc(100% - var(--fade-scroll-width)) 100%;
+        }
+        .fading-scroll--y[data-fade-start][data-fade-end] {
+            animation:
+                gl-fade-start-in linear both,
+                gl-fade-end-out linear both;
+            animation-timeline: scroll(self block), scroll(self block);
+            animation-range:
+                0 var(--fade-scroll-width),
+                calc(100% - var(--fade-scroll-width)) 100%;
+        }
+    }
+
+    /* ── Deferred section — render-skip an offscreen subtree (AQ.W3 §5) ──────
+       `content-visibility: auto` skips layout/paint/style of an offscreen
+       subtree — the INP-under-load lever (fourier γ, muster, speedtest, words).
+       `contain-intrinsic-size: auto <estimate>` is measurement-safe: the `auto`
+       prefix makes the engine REMEMBER the last-rendered size (no scroll-jump on
+       re-entry); plain `<estimate>` freezes the section + thrashes the scrollbar
+       — the trap this closes. Estimate is token-driven (`--deferred-section-
+       size`, default 30rem). `.deferred-section--cached` →
+       `content-visibility: hidden` (always skipped, state CACHED — cheaper to
+       re-show than `display:none`). Baseline Widely; unsupporting engines render
+       normally. JS HOOK: the engine fires `contentvisibilityautostatechange`
+       { skipped } at the render-skip boundary — pair with `useRAFLoop`
+       pause/resume: `el.addEventListener('contentvisibilityautostatechange',
+       e => e.skipped ? loop.pause() : loop.resume())`. */
+    .deferred-section {
+        content-visibility: auto;
+        contain-intrinsic-size: auto var(--deferred-section-size, 30rem);
+    }
+    .deferred-section--cached {
+        content-visibility: hidden;
+        contain-intrinsic-size: auto var(--deferred-section-size, 30rem);
+    }
+
+    /* ── Card scroll-timeline host (AI.W1-α) ───────────────────────────────
+       Canonical scroll-overflow host that emits the `--card-scroll` named
+       scroll-timeline consumed by `<CardHeader shrink>`. Apply to the
+       scroll-overflow ancestor (typically the `<Card>` itself OR a wrapper
+       inside it that carries `overflow-y: auto`).
+
+       `contain: layout style paint` isolates the named timeline so child
+       animations respond to THIS host's scroll only — not to portal-
+       triggered layout shifts in ancestor containers (the load-bearing
+       isolation guarantee the value.js `PaneHeader.vue:18-29` comment
+       called out and the AI.W1 spec §1.2 ratified as canon).
+
+       Disambiguated from `.fading-scroll` (the `<FadingScroll>` mask-image
+       edge fade at the container's leading/trailing edge) — `.card-scroll-host`
+       does NOT paint any visual; it only emits the timeline. */
+    .card-scroll-host {
+        contain: layout style paint;
+        scroll-timeline: --card-scroll block;
+    }
+
+    /* ── Stable scroll gutter — the no-shift discipline for overlay-hosting
+       route scrollers (BC.W-DROPDOWN-FIX) ──────────────────────────────────
+       An app-shell route scroller that hosts portaled picker/menu overlays
+       (Select / DropdownMenu / any reka overlay that locks body scroll on open)
+       RESERVES a stable scrollbar gutter so the lock-induced scrollbar removal
+       removes no layout space — the centred content does not reflow and the
+       trigger does not twitch left/right (USER-DEFECTS §F, the classic
+       space-taking-scrollbar reflow).
+
+       PRESETS-IN-CONSUMERS: the library ships the named discipline; the CONSUMER
+       app-shell opts its OWN route scroller in (the demo `.demo-main-scroller`
+       is the reference adoption). glass-ui does not force `scrollbar-gutter` on
+       every consumer's scroller — it provides this utility + the canon note.
+
+       Baseline-newly-available: Chrome 94+, Firefox 97+, Safari 18.2+ — a
+       non-supporting engine ignores the property (the gutter just isn't
+       reserved, the legacy behaviour). */
+    .scroll-gutter-stable {
+        scrollbar-gutter: stable;
+    }
+
+    /* ── Shimmer text effects ──
+       BB.W-METAL-SHIMMER — the gold-only `gold-shimmer-slide` is RETIRED (clean
+       break, no alias); `.gold-shimmer` re-points onto the metal-PARAMETERIZED
+       `metal-shimmer-sweep` keyframe with `--metal-shimmer-color: gold`. The gold
+       gradient stops + the `background-size`/`background-clip` + the PRM bracket are
+       byte-PRESERVED — the gold READ is unchanged; only the keyframe NAME generalizes.
+       The text-fill + background-clip composition is load-bearing visual (the gold
+       gradient itself); only the `animation:` line is wrapped in the PRM no-preference
+       bracket so PRM users see the static gradient without the slide. */
+    .gold-shimmer {
+        --metal-shimmer-color: gold;
+        background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold-light), var(--color-gold), var(--color-gold-light), var(--color-gold-dark));
+        background-size: 250% 100%;
+        background-clip: text;
+        -webkit-background-clip: text;
+        color: transparent;
+    }
+    @media (prefers-reduced-motion: no-preference) {
+        .gold-shimmer {
+            animation: metal-shimmer-sweep var(--duration-shimmer) linear infinite;
+        }
+    }
+
+    /* ── Keyboard key ── */
+    .kbd {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 1.5rem;
+        min-width: 1.5rem;
+        padding: 0 0.375rem;
+        font-family: var(--font-mono);
+        font-size: var(--type-micro);
+        background: var(--muted);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-sm);
+        box-shadow: 0 1px 0 1px color-mix(in srgb, var(--border) 30%, transparent);
+        line-height: 1;
+    }
+
+}
+
+/* ── @utility ghost-slot (BC.W-GHOST-DASHED) ────────────────────────────────
+   The ONE dashed-outline placeholder register: everywhere a slot is empty / a
+   thing is a placeholder / an affordance is "add something here", the surface
+   reads this — a dashed-outline plate, consistently rounded (--radius-card),
+   calm-muted, that reads unmistakably "this is a placeholder, not a filled
+   surface." The 6 ad-hoc `rounded-{md,2xl,card} border border-dashed
+   border-border bg-{card,background}` forks (three radii, three hosts, three
+   pads) COLLAPSE onto this ONE register: ONE radius, ONE faint-wash host, ONE
+   muted ink, ONE warm dashed hairline.
+
+   WARM-NOT-GREY (BA.W-NO-GRAY): the dashed hairline is the warm-ink at 22%
+   (a color-mix off --foreground, the warm identity), NEVER a grey
+   `border-border` — the ghost must read warm-material, not grey.
+
+   GLASS-ADJACENT, not opaque: the host is a faint glass-wash (the rebuilt W55
+   material reads THROUGH it), NOT a flat opaque `bg-card` slab — so the ghost
+   reads "empty," not "filled," and the D1 grey-plate regression cannot re-enter
+   through the placeholder.
+
+   THE FENCE (binding both ways): this is the RECTANGULAR-placeholder register.
+   The `WatercolorDot variant="ghost"` (the seeded-blob SILHOUETTE traced as a
+   dashed stroke — the empty-PALETTE-slot affordance) is a DISTINCT register;
+   neither forks the other. .ghost-slot is never applied to a blob-silhouette
+   slot, and the watercolor ghost never adopts this rectangle recipe. */
+@utility ghost-slot {
+    border: 1px dashed color-mix(in srgb, var(--foreground) 22%, transparent);
+    border-radius: var(--radius-card);
+    background: color-mix(in oklab, var(--glass-bg-wash), transparent 40%);
+    color: var(--muted-foreground);
+}