@mkbabb/glass-ui 4.2.0 → 5.0.0

package/src/styles/animations.css

@@ -1,18 +1,7 @@
 /* Shared @keyframes — global animations used across projects */
 
-/* ── Floating panel entrance ── */
-@keyframes floating-panel-in {
-    from {
-        opacity: 0;
-        filter: blur(4px);
-        scale: 0.96;
-    }
-    to {
-        opacity: 1;
-        filter: blur(0);
-        scale: 1;
-    }
-}
+/* (BI.W-GLASS-DEDUP — the `floating-panel-in` entrance @keyframes retired with
+   floating-panel.css / `--animate-floating-panel-in`; FAM-9 clean break.) */
 
 /* ── Collapsible (reka-ui) ── */
 @keyframes collapsible-open {
@@ -301,6 +290,57 @@
     }
 }
 
+/* ── .glass-reveal EXIT (BG.W-OVERLAY-ENTER-PAINT / F5.R1) ──────────────────
+ *
+ * The reka-portaled-overlay (Dialog/Popover/DropdownMenu/…) EXIT MUST be a
+ * @keyframes animation, NOT a CSS transition. reka-ui's `usePresence` gates the
+ * unmount on `getComputedStyle(node).animationName`: it dispatches ANIMATION_OUT
+ * and awaits `animationstart`/`animationend`, with NO `transitionend` path — so a
+ * transition-only exit is torn down (~11ms, <1 frame) before it can paint (the
+ * paint-judge FAIL: Dialog+Popover exit painted 0 frames). The Sheet exit paints
+ * only because its `sheet-animate` (`animate-out`) is a keyframe reka can await;
+ * this gives the `.glass-reveal` recipe (glass/reveal.css) the SAME kind.
+ *
+ * `glass-reveal-out` is the enter bloom REVERSED: scale 1 → (0.88 × squish),
+ * opacity 1 → 0, filter blur(0) → blur — the SAME three coupled channels, on the
+ * no-overshoot `--ease-out` clock (a closing surface must never overshoot past
+ * gone, §6/W-MOTION-CANON P2). NO `translate` (the base/Dialog has none; a side
+ * popover's slide-out stays a transition — a different property that coexists,
+ * never clobbering a center Dialog's `-translate-x-1/2 -translate-y-1/2`). The
+ * `to` values MIRROR the `.glass-reveal[data-state="closed"]` static end-state so
+ * a non-supporting engine still lands correctly. Compositor-only (scale/opacity/
+ * filter — the proof:no-layout-animation floor). The custom-property `var()`s
+ * resolve on the animated `.glass-reveal` element (they are declared on its base
+ * rule). */
+@keyframes glass-reveal-out {
+    from {
+        scale: 1 1;
+        opacity: 1;
+        filter: blur(0);
+    }
+    to {
+        scale: calc(var(--glass-reveal-enter-scale, 0.88) * var(--lq-stretch-x, 1.06))
+            calc(var(--glass-reveal-enter-scale, 0.88) * var(--lq-stretch-y, 0.945));
+        opacity: 0;
+        filter: blur(var(--glass-reveal-blur, 4px));
+    }
+}
+
+/* The reduced-motion EXIT — fade ONLY (no transform/blur frames, the vestibular
+ * floor, WCAG 2.3.3). Still a keyframe reka can await (a transition-only fade
+ * would be torn down the same way, and the surface would vanish rather than fade),
+ * so the fade PAINTS under `prefers-reduced-motion: reduce`. The reveal.css PRM
+ * carve swaps `animation-name` to this while snapping scale/translate/filter to
+ * their endpoints. */
+@keyframes glass-reveal-out-reduced {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
 /* ── §TOP-LAYER ENTRY/EXIT (AQ.W5 §Design 2) ───────────────────────────────
  *
  * A pure-CSS entry/exit grammar for NATIVE top-layer surfaces — `[popover]`
@@ -342,16 +382,21 @@
            leg, glass/reveal.css). */
         filter: blur(var(--top-layer-enter-blur, 4px));
         transition-property: opacity, scale, filter, display, overlay;
-        /* BA.W-GLASS-CAL Unit 3 — the enter rides the bouncy spring's OWN settle
-           clock (`--spring-bouncy-duration`, the 2%-band envelope settle) rather
-           than the generic `--duration-normal`, so the emphatic dialog/popover
-           entrance bounce reads fully instead of being clipped at 0.3s. The blur
-           decongest rides the no-overshoot `--ease-out` (EFFECTS), the scale the
-           bouncy spring (SPATIAL) — the W-MOTION-CANON split. */
-        transition-duration: var(--spring-bouncy-duration),
-            var(--spring-bouncy-duration), var(--spring-bouncy-duration),
-            var(--spring-bouncy-duration), var(--spring-bouncy-duration);
-        transition-timing-function: var(--spring-bouncy), var(--spring-bouncy),
+        /* BI.W-REGISTER-TABLE — the FOURTH register RETIRED: the native `.glass-top-layer`
+           @starting-style enter is FOLDED onto the `enter-overlay` register bundle (the
+           SAME register the reka portaled overlays ride via `.glass-reveal` — one enter
+           grammar, no fourth recipe). It gains the register CLOCK (`--enter-overlay-clock`
+           = the parity-fixed --spring-snappy-duration) + spring (`--enter-overlay-spring`);
+           the scale/blur re-point to the register via the `--top-layer-enter-*` tokens
+           (scroll-tokens.css). The prior BA.W-GLASS-CAL bouncy-own-clock is superseded —
+           the native dialog/popover enter now matches the reka Dialog enter. The blur
+           decongest keeps the no-overshoot `--ease-out` (EFFECTS), the scale the register
+           spring (SPATIAL) — the W-MOTION-CANON split. HoverPopover (the live consumer)
+           re-points onto the register by inheriting the folded recipe. */
+        transition-duration: var(--enter-overlay-clock),
+            var(--enter-overlay-clock), var(--enter-overlay-clock),
+            var(--enter-overlay-clock), var(--enter-overlay-clock);
+        transition-timing-function: var(--enter-overlay-spring), var(--enter-overlay-spring),
             var(--ease-out), linear, linear;
         transition-behavior: allow-discrete;
     }
@@ -393,6 +438,20 @@
             var(--background) calc(var(--top-layer-backdrop-dim, 0.5) * 100%),
             transparent
         );
+        /* SCRIM COUPLES TO LAUNCH (BG.W-OVERLAY-ENTER-PAINT / F5.R1) — the ENTER dim
+           rides its OWN launch-coupled clock (`--top-layer-backdrop-in`, a fast
+           no-overshoot `--ease-out`) so the scrim reaches ≥80% of its target dim
+           within ~100ms of launch, coupled to the panel window rather than trailing
+           the panel on the slower `--duration-normal`/`--ease-standard` clock (the
+           HEAD defect: the scrim decoupled + dimmed over ~400ms AFTER the panel
+           seated). This ENTER transition is read from the [open] after-change state;
+           the base `::backdrop` transition stays the EXIT clock — released cleanly
+           WITH the panel, no overshoot past gone. The `@starting-style` from-state
+           makes the dim interpolate from transparent (the discrete allow-discrete
+           display/overlay legs stay). */
+        transition: display var(--top-layer-backdrop-in, 0.15s) allow-discrete,
+                    overlay var(--top-layer-backdrop-in, 0.15s) allow-discrete,
+                    background-color var(--top-layer-backdrop-in, 0.15s) var(--ease-out);
         @starting-style {
             background-color: color-mix(in srgb, var(--background) 0%, transparent);
         }

package/src/styles/card-scroll.css

@@ -0,0 +1,189 @@
+/* ─────────────────────────────────────────────────────────────────────────────
+ * card-scroll.css — the EXTERNALIZED <CardHeader shrink> scroll-choreography
+ * (BG.W-SCROLL-SHRINK-UNIFY — the card scroll-shrink lifted out of the
+ * CardHeader.vue <style scoped> block into ONE global, un-hashed home).
+ *
+ * WHY EXTERNAL (the encapsulation restore): the choreography WAS a scoped SFC
+ * block whose @keyframes names were Vue-scope-HASHED and whose slotted-content
+ * lanes needed the :slotted() escape. Externalized here it is un-hashed AND
+ * reaches the light-DOM slotted <CardTitle>/<CardDescription> via a PLAIN
+ * descendant selector (a GLOBAL file carries no data-v-… scope hash, so the
+ * plain `.card-header--shrink > [data-slot=…]` is the CORRECT form — it matches
+ * the slotted child with no hash to require).
+ *
+ * THE DRY FOLD (the UNIFY): the lane-2 title SCALE leg is shared with the
+ * page/hero large-title collapse (demo/stories/story-hero.css) via ONE
+ * @keyframes title-collapse — the card supplies --title-collapse-scale: 0.695
+ * (= --card-title-shrink-ratio), the page/hero supply 0.82. Only the SCALE leg
+ * is shared (a byte-identical scale-only keyframe); the hero keeps its OWN
+ * translate leg (story-hero-shrink-lift). NOT "one keyframe family" — one shared
+ * scale keyframe + per-surface translate.
+ *
+ * COMPOSITOR-ONLY (BB.W-CARD-COMPOSITE — the proof:no-layout-animation floor):
+ * every lane animates scale / transform / opacity ONLY — ZERO reflow per scroll
+ * frame (the A'-3 CLS 1.03 defect made structurally impossible). The scrub ease
+ * is the NO-OVERSHOOT --card-shrink-ease (re-pointed OFF the retired
+ * --ease-cartoon-punch — a scroll SCRUB must be monotonic; an anticipation-pop /
+ * overshoot on a scrub is the §12-LAWS proportion fence: cartoon-punch belongs
+ * on STATE-CHANGE beats, never a scroll scrub, and a non-monotonic curve breaks
+ * the monotonic-scrub bar).
+ *
+ * PRM is the OUTER gate (§Scope 4): the whole
+ * @supports (animation-timeline: scroll()) block sits under
+ * prefers-reduced-motion: no-preference, so under reduce NO scroll animation
+ * binds AT ALL and the header renders in its terminal rest state (full top
+ * space, full title size, full description visibility). No JS fallback + no
+ * `animation-duration: 0.01ms` stub is needed — the outer gate is the primary
+ * AND complete contract.
+ *
+ * REQUIRED ANCESTOR: `.card-scroll-host` on the scroll-overflow ancestor (the
+ * <ScrollCard> owns it) emits the --card-scroll named scroll-timeline. Without
+ * that host the named timeline never emits and the choreography sits idle.
+ * ───────────────────────────────────────────────────────────────────────────── */
+
+.card-header--shrink {
+    /* --card-title-shrink-ratio is the lane-2 scale ratio pinned from the resolved
+       type tokens at the default scale: --type-prose floor (18px) ÷ --type-heading
+       (25.9px) ≈ 0.695. A STATIC scalar (NEVER a per-frame font-size re-measure);
+       --type-prose is a clamp() so the ratio cannot be CSS-divided live — it is the
+       pinned reference knob. It feeds the shared @keyframes title-collapse via
+       --title-collapse-scale (a consumer whose --ui-scale moves the tokens off this
+       ratio overrides --card-title-shrink-ratio, a NAMED knob — never a fallback to a
+       font-size animation). */
+    --card-title-shrink-ratio: 0.695;
+    --title-collapse-scale: var(--card-title-shrink-ratio);
+    /* the scrub ease is NO-OVERSHOOT: a scroll scrub maps scroll → animation-progress
+       monotonically, so the timing function must be strictly monotone (the retired
+       --ease-cartoon-punch anticipation/overshoot made the title scale up-then-down
+       past a scroll point — the non-monotonic-scrub defect). */
+    --card-shrink-ease: var(--ease-out, linear);
+    /* the stuck-header backplate reads a KEYED warm-glass floating plate (the same
+       --glass-tint-* warm-admit seam the card body reads — the W55 tinted floating
+       rung). Card-LOCAL re-point of --card-header-bg (the shared shadow.css token is
+       READ-ONLY); a consumer override on the host still wins (higher specificity /
+       inline). */
+    --card-header-bg: color-mix(
+        in oklab,
+        var(--glass-bg-floating),
+        var(--glass-tint-source) var(--glass-tint-strength)
+    );
+    position: relative;
+    transform-origin: top;
+}
+
+/* lane 4 base — the stuck-header background is a scroll-driven LIFT, not a static
+   tint. A ::before BACKPLATE carries the --card-header-bg tint and fades
+   opacity: 0 → 1 on the --card-scroll timeline, so a stuck header reads transparent
+   over the body at scroll-top and lifts to the painted tint as it sticks. The
+   opacity channel is compositor-safe; the backplate sits BEHIND the slotted content
+   (z-index 0), so it never occludes the title/description. */
+.card-header--shrink::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    background: var(--card-header-bg);
+    opacity: 0;
+    border-radius: inherit;
+    pointer-events: none;
+}
+
+/* the slotted content sits ABOVE the scroll-driven backplate. */
+.card-header--shrink > * {
+    position: relative;
+    z-index: 1;
+}
+
+/* lane-3 base: the description is a transform-collapsible block. transform-origin:
+   top so the scaleY collapse retires it UPWARD (toward the title), not toward its
+   own center. */
+.card-header--shrink > [data-slot="card-description"] {
+    transform-origin: top;
+    will-change: transform, opacity;
+}
+
+/* ── The keyframes (un-hashed, global) — every step animates a compositor-safe
+   channel ONLY (scale / transform / opacity), the proof:no-layout-animation floor. ── */
+
+/* THE SHARED scale keyframe (BG.W-SCROLL-SHRINK-UNIFY) — the card title lane AND the
+   page/hero large-title collapse both ride this ONE keyframe, each supplying its own
+   --title-collapse-scale (card 0.695 / page-hero 0.82). The `scale:` LONGHAND (not the
+   `transform` shorthand) so it stacks independently of any per-surface `translate`
+   leg — the scroll-choreography.css `.scroll-pin` longhand idiom. transform-origin is
+   set per-consumer on the animated element (left top on the card title). */
+@keyframes title-collapse {
+    to {
+        scale: var(--title-collapse-scale, 0.82);
+    }
+}
+
+/* lane 1 — header content compress: the header content slides up via translateY so
+   the top breathing room visually compresses; the header BOX keeps its layout size
+   (no padding reflow). */
+@keyframes card-header-shrink {
+    from {
+        transform: translateY(0);
+    }
+    to {
+        transform: translateY(-0.5rem);
+    }
+}
+
+/* lane 4 — the scroll-driven header background LIFT (opacity on the backplate). */
+@keyframes card-header-bg-lift {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+/* lane 3 — description retire: opacity fade + scaleY collapse (origin top), the
+   real-estate reclaim COMPOSITED (never a grid-template-rows relayout). */
+@keyframes card-desc-shrink {
+    from {
+        opacity: 1;
+        transform: scaleY(1);
+    }
+    to {
+        opacity: 0;
+        transform: scaleY(0);
+    }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    @supports (animation-timeline: scroll()) {
+        /* lane 1 — header content compress. */
+        .card-header--shrink {
+            animation: card-header-shrink var(--card-shrink-ease) both;
+            animation-timeline: --card-scroll;
+            animation-range: 0px 120px;
+        }
+
+        /* lane 4 — the scroll-driven header background LIFT. */
+        .card-header--shrink::before {
+            animation: card-header-bg-lift var(--card-shrink-ease) both;
+            animation-timeline: --card-scroll;
+            animation-range: 0px 120px;
+        }
+
+        /* lane 2 — title shrink-in-place via the SHARED title-collapse SCALE keyframe;
+           the text run lays out ONCE at --type-heading, the scroll-timeline only
+           composites the scale (transform-origin left top anchors the leading edge). */
+        .card-header--shrink > [data-slot="card-title"] {
+            animation: title-collapse var(--card-shrink-ease) both;
+            animation-timeline: --card-scroll;
+            animation-range: 0px 120px;
+            transform-origin: left top;
+        }
+
+        /* lane 3 — description retire (opacity fade + scaleY collapse), the faster
+           0..80px cliff (description retires before the header fully settles). */
+        .card-header--shrink > [data-slot="card-description"] {
+            animation: card-desc-shrink var(--card-shrink-ease) both;
+            animation-timeline: --card-scroll;
+            animation-range: 0px 80px;
+        }
+    }
+}

package/src/styles/cards.css

@@ -57,7 +57,14 @@
        (the K-AA carve). Under `prefers-contrast: more` the screen blend is dropped
        (the catch is decoration, the edge is the legibility asset). */
     [data-slot="card"][data-surface="glass"]:not(.paper-grid) {
-        background-blend-mode: screen, normal;
+        /* F2.R1 W-DARK-READABILITY-REPAIR — the blend is TOKENIZED so the dark arm
+           (tokens/dark-arm.css, the `--card-field-floor-blend` re-point) swaps the
+           light `screen` LIFT for a dark `normal` SINK. In dark the near-white amber
+           key screen-blended into a hot in-card lamp (value.js card-lighting-forensics
+           artifact 1); the dark arm blends NORMAL so the warm underlayer sinks INTO the
+           deep plate instead of lifting it toward the cream label. Light default is
+           byte-identical (unset token → the `screen, normal` fallback). */
+        background-blend-mode: var(--card-field-floor-blend, screen, normal);
     }
     @media (prefers-contrast: more) {
         [data-slot="card"][data-surface="glass"]:not(.paper-grid) {
@@ -100,7 +107,14 @@
            UNDERLAYER (one radial, amber-key toward the upper-right `--glass-key`,
            the field fallback). Both fade to a warm 0-alpha — NEVER bare
            `transparent` (the WebKit black-premultiply hole, build-trap-(d)). */
-        background-image:
+        /* F2.R1 W-DARK-READABILITY-REPAIR — TOKENIZED so the dark arm swaps the two
+           hot light-amber screen radials (L≈0.9-0.96) for ONE damped warm-DARK sink
+           (tokens/dark-arm.css `--card-field-floor-image`). Light default is the two
+           radials below (unset token → byte-identical light paint). Machine-locked by
+           `proof:glass` dark-legibility DL1 (the composited hot-zone label clears AA +
+           APCA over the dark plate). */
+        background-image: var(
+            --card-field-floor-image,
             radial-gradient(
                 60% 55% at 80% 16%,
                 oklch(0.96 0.04 78 / 0.5),
@@ -110,7 +124,8 @@
                 120% 110% at 78% 22%,
                 oklch(0.9 0.075 72 / 0.5),
                 oklch(0.9 0.075 72 / 0) 70%
-            );
+            )
+        );
     }
 
     /* The presence-behind gate — under an ancestor field, the card reads the REAL
@@ -122,11 +137,18 @@
         background-image: none;
     }
 
-    /* Paper texture overlay */
+    /* Paper texture overlay — a PAPER surface reads the ONE warm raster tooth
+       (BG.W-PAPER-TEXTURE-UNIFY), not the grey `--paper-clean-texture` whisper.
+       The tooth carries its warmth at SOURCE, so the `background-blend-mode`
+       multiply (light) / screen (dark) sinks/lifts the WARM fiber into the plate.
+       Reads the paper tile period (`--paper-grain-tile`), not the 200px glass-
+       grain whisper size. The `--paper-clean-texture` name is retained only for
+       the disjoint GLASS-grain system (glass/grain-overlay.css / dock/shell.css)
+       — the register fence (paper is warm material, glass is a neutral whisper). */
     .paper-texture {
-        background-image: var(--paper-clean-texture);
+        background-image: var(--paper-grain-tooth);
         background-repeat: repeat;
-        background-size: var(--paper-texture-size);
+        background-size: var(--paper-grain-tile);
         background-blend-mode: multiply;
     }
 
@@ -380,6 +402,23 @@
     will-change: translate, scale;
 }
 
+/* ── BI.W-SHADOW-GRAMMAR (Law 4) — the offset-stamp requires a CARD silhouette ──
+   The hard 0-blur `--shadow-cartoon-*` offset stamp is a card-silhouette grammar: on
+   a CARD it tucks under the corner radius, but on a CAPSULE/PILL host the hard
+   directional stamp pokes off the stadium along the bottom-left arc = the lopsided
+   crescent (UF-A8/A9 — the loud `primary-audacious`/`gold-audacious` `-audacious`
+   CTAs, ss-08/ss-26). So the `.btn-punch` pill cast RE-POINTS the inert child's stamp
+   to a SOFT radius-following drop (`--shadow-lg`): the punch WEIGHT re-lands on the
+   soft drop + the press-squish + the specular gleam (the BD.W-CARTOON-PUNCH weight
+   SURVIVES — the ratified judgment), WITHOUT the hard offset crescent. The cast still
+   TRAVELS down-left on press (`--cartoon-press-t` drives translate/scale over the soft
+   drop) — the caster punch, minus the crescent. The hard offset stamp stays legal ONLY
+   under a card-radius ancestor (`.cartoon-surface`, the Card `surface="cartoon"`
+   register above). Law-4 GREEN condition of proof:geometry-grammar. */
+.btn-punch .cartoon-cast {
+    box-shadow: var(--shadow-lg);
+}
+
 /* BD.W-CARTOON-CASTER — PRM/PRT carve. Under reduced-motion `--motion-weight: 0`
    zeroes travel/spread/squash/lag in ONE assignment (every `calc(… * --motion-weight)`
    collapses to rest); the transition is killed. The static bold cel STAMP persists

package/src/styles/completion-seal.css

@@ -37,6 +37,39 @@
     transform: scale(var(--seal-scale, 1));
 }
 
+/* The PERSONAL-BEST earned-gold garnish (BG.W-SEAL-DISC) — a result that beat the user's
+   historical best re-points the seal ink onto the brighter earned-gold register. The seal
+   mints NO new gold literal — `--seal-best` COMPOSES the gold FAMILY (`--color-gold-light`,
+   the brighter earned gold), so a consumer re-tuning the gold family re-tunes the
+   best-garnish in lockstep (the earned-gold register has ONE home; the Q2 no-re-author
+   fence). Gold is EARNED — the personal-best coin reads a touch brighter, never a new
+   hue. */
+.completion-seal[data-best] {
+    --seal-best: var(--color-gold-light, var(--gold-light));
+    --seal-ink: var(--seal-best);
+}
+
+/* The DISC gesture — the composed earned-coin (disc→ring→check). The three layers stagger
+   on animation-delay off ONE gold-draw mechanism; the sequencing clocks are token-first
+   (a consumer retunes the cadence). The disc FACE lands, then the ring draws around it,
+   then the check draws inside. */
+.completion-seal[data-shape="disc"] {
+    --seal-ring-delay: var(--spring-snappy-duration, 0.34s);
+    --seal-check-delay: calc(var(--spring-snappy-duration, 0.34s) * 2);
+}
+
+/* The disc FACE — the earned-coin the ring draws around. A translucent glass-gold coin
+   (the warm-cream liquid-glass identity — NOT an opaque slab) so the ring + check read as
+   saturated gold ON the whisper-gold face. The fill defaults visible so a non-animating /
+   PRM / non-supporting seal shows the settled coin. Token-first (`--seal-disc-fill`). */
+.completion-seal__disc {
+    fill: var(
+        --seal-disc-fill,
+        color-mix(in oklab, var(--seal-ink), transparent 82%)
+    );
+    stroke: none;
+}
+
 /* The hero-scale gold-draw glyph — an SVG <path>/<circle> stroked in `--seal-ink`. The
    stroke INKS itself via the `--seal-draw` wipe (a stroke-dashoffset paint, never a
    fade). The glint reads the W-AX-METAL-GLOW catch-light (composed, not re-authored). */
@@ -78,11 +111,13 @@
    fully-drawn mark, the @property initial-values). The draw is NOT a loop — a single
    pass each on the stroke-reveal + the settle + the glint. */
 @media (prefers-reduced-motion: no-preference) {
+    /* Every shape's coin lands with the settle overshoot (the root scale, all shapes). */
     .completion-seal[data-play] {
         animation: completion-seal-settle var(--spring-bouncy-duration, 0.57s)
             var(--spring-bouncy) both;
     }
-    .completion-seal[data-play] .completion-seal__mark {
+    /* The single-mark shapes (check / ring / wordmark) — the ONE draw + settle-glint. */
+    .completion-seal:not([data-shape="disc"])[data-play] .completion-seal__mark {
         animation:
             completion-seal-draw var(--spring-snappy-duration, 0.34s)
                 var(--ease-out, ease-out) both,
@@ -90,6 +125,31 @@
                 var(--ease-out, ease-out)
                 var(--spring-snappy-duration, 0.34s) both;
     }
+
+    /* The disc gesture — the three layers stagger disc→ring→check on the ONE draw
+       mechanism (the staggered animation-delays sequence same-clock passes; no fourth
+       recipe). The FACE fades in (opacity), the ring draws around it, then the check
+       draws inside + glints once on its own arrival. */
+    .completion-seal[data-shape="disc"][data-play] .completion-seal__disc {
+        animation: completion-seal-disc-in var(--spring-snappy-duration, 0.34s)
+            var(--ease-out, ease-out) both;
+    }
+    .completion-seal[data-shape="disc"][data-play] .completion-seal__ring {
+        animation: completion-seal-draw var(--spring-snappy-duration, 0.34s)
+            var(--ease-out, ease-out) var(--seal-ring-delay, 0.34s) both;
+    }
+    .completion-seal[data-shape="disc"][data-play] .completion-seal__check {
+        animation:
+            completion-seal-draw var(--spring-snappy-duration, 0.34s)
+                var(--ease-out, ease-out) var(--seal-check-delay, 0.68s) both,
+            completion-seal-glint var(--spring-snappy-duration, 0.34s)
+                var(--ease-out, ease-out)
+                calc(
+                    var(--seal-check-delay, 0.68s) +
+                        var(--spring-snappy-duration, 0.34s)
+                )
+                both;
+    }
 }
 
 /* The stroke-reveal: the gold INKS itself 0→full (a stroke-dashoffset paint wipe — the
@@ -103,6 +163,20 @@
     }
 }
 
+/* The disc FACE materialize (BG.W-SEAL-DISC) — the earned-coin face fades in before the
+   ring draws around it (the first beat of the disc→ring→check gesture). Compositor-only
+   (opacity — a paint channel, NO layout property). `both` fill holds the settled visible
+   face; under PRM (this whole @media block is inert) the face is the static visible coin
+   (the disc's CSS default opacity 1). */
+@keyframes completion-seal-disc-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
 /* The settle: the seal lands with a small overshoot (the SPATIAL enter-bounce). The
    transform scale rides the `--seal-scale` spring; the keyframe nudges the scale once
    (the §6 calm overshoot — an ENTER may overshoot on arrival). Compositor-only. */

package/src/styles/configurator.css

@@ -13,6 +13,18 @@
  * Tailwind utility on the preset-row wrapper.
  */
 
+/* BI.W-CONFIG-IN-SHEET — the ONE section-vs-chrome inline padding anchor + the
+ * inter-section card gap. `--configurator-pad-inline` is the SINGLE inline anchor
+ * BOTH the sheet chrome (SheetHeader/footer) AND the section rows read, so the
+ * section content aligns with the chrome content (UF-A5/GEO-9: the section body no
+ * longer indents 12px while the chrome sits at 24px). Inheriting on :root so the
+ * gear sheet's `px-(--configurator-pad-inline)` chrome utilities resolve it; a
+ * consumer retunes the whole chassis inline rhythm from one override. */
+:root {
+    --configurator-pad-inline: 1rem; /* 16px — the unified section+chrome inline anchor */
+    --configurator-section-gap: 0.5rem; /* 8px — the inter-section card breath */
+}
+
 /* 1. Section register — the <ConfiguratorLayer> header label reads as a SECTION
  *    (√φ subheading, 20.4px / 600), NOT a row. Replaces the flat
  *    `text-small font-semibold text-foreground` span (D6-3: "section labels read
@@ -65,6 +77,41 @@
 .configurator-layer {
     border-color: var(--configurator-divider-section);
     background-color: var(--configurator-section-tint);
+    /* BI.W-CONFIG-IN-SHEET (Law 1 — the concentric-radius RELAY reader; ruling 11,
+     * sites #1 + #3). A multi-row section wears a CARD radius, never a flush-square
+     * hairline block (UF-A4 / Law 2). The section derives its own corner concentric
+     * with its PARENT ctx — the <Configurator> root (site #1, publishes
+     * --radius-ctx=--radius-panel) OR the gear Sheet (site #3, W-SHEET-RADIUS
+     * publishes --radius-ctx=--radius-dialog) — across the parent's inner pad:
+     *   border-radius = max(floor, ctx − inset)
+     * so the inner corner stays concentric with the outer and never rounds below the
+     * 4px floor. This SUPERSEDES the prior "no per-section radius / flush border-b"
+     * contract (ConfiguratorLayer.vue) — a clean break: the section is now a full
+     * (all-side) bordered card, not a bottom-hairline-divided flat block. NO
+     * `overflow: hidden` on the card: the section-header trigger's OUTSET `.focus-ring`
+     * (box-shadow) must NOT be clipped by the card box (a keyboard-a11y regression), and
+     * at the concentric card radius the header hover-fill's rounded-corner poke is
+     * sub-perceptual — the rounded border + section tint carry the card read. */
+    border-radius: max(
+        var(--radius-floor),
+        calc(var(--radius-ctx) - var(--radius-inset))
+    );
+}
+/* The inter-section card breath — a gap between stacked section cards (replacing the
+ * retired flush `border-b last:border-b-0` divider). Adjacent-sibling so only the
+ * INTER-section seams get the gap; the first card stays flush to its container top. */
+.configurator-layer + .configurator-layer {
+    margin-block-start: var(--configurator-section-gap);
+}
+/* The ONE inline-padding anchor (BI.W-CONFIG-IN-SHEET) — the section header trigger
+ * AND the section body read var(--configurator-pad-inline), the SAME anchor the sheet
+ * chrome reads, so the section content aligns with the chrome content (UF-A5/GEO-9).
+ * The section SFC drops its raw `px-3` (12px) literal; the vertical `py-2` stays. */
+.configurator-layer-trigger {
+    padding-inline: var(--configurator-pad-inline);
+}
+.configurator-layer-body {
+    padding-inline: var(--configurator-pad-inline);
 }
 .configurator-layer-body[data-dividers] > * + * {
     border-color: var(--configurator-divider);
@@ -206,6 +253,19 @@
      * fill + rim + cast all carry from .glass-capsule. */
 }
 
+/* BG.W-PRESET-RIBBON-TOP (F7.6) — the LARGE full-width TOP RIBBON tile floor. When
+ * the gallery is pinned up-top (data-gallery="top") the presets span the whole studio
+ * width, not the 360px aside gutter, so the tiles read one rung LARGER than the aside
+ * form — the "LARGE ribbon" the aurora studio wants. Still the SAME
+ * .configurator-preset-tile card (no new material, the warm-glass capsule + cast carry
+ * from the base rule); only the inline-size floor lifts, and it is scoped to the top
+ * placement so the aside inspector idiom stays byte-unchanged. The clamp MIN (200px)
+ * clears the ≥72px LARGE-ribbon floor with headroom; the FadingScroll port (the
+ * .configurator-gallery-track) still clips the horizontal overflow. */
+[data-slot="configurator"][data-gallery="top"] .configurator-preset-tile {
+    inline-size: clamp(200px, 20vw, 288px);
+}
+
 /* The §3 field-well — the device-free `auroraFallbackGround` background-image is
  * set inline per tile; this rule sets the cover sizing + the rounded inner crown.
  * The well is the COLOURFUL field; the warm-glass capsule frames it. */
@@ -248,7 +308,9 @@
  * Composes with the capsule's own rim; the cast deepens to `-lg` in the SFC. */
 .configurator-preset-tile.is-active {
     box-shadow:
-        inset 0 0 0 2px var(--ring),
+        /* BG.W-DESHADCN — the active-tile crown reads the renamed house
+           `--focus-ring-color` (off the shadcn `--ring`; value unchanged). */
+        inset 0 0 0 2px var(--focus-ring-color),
         var(--shadow-cartoon-lg);
 }