@mkbabb/glass-ui 4.2.0 → 5.0.0

package/src/styles/dock/overflow.css

@@ -1,81 +1,121 @@
 /* dock/overflow.css — the OVER-cap overflow strategies (AX.W06 carve).
  *
  * Carved from the dock.css god-module (slice 25). This partial owns the
- * `overflow=` axis: the `overflow="scroll"` inline/block scroll ports
- * (`.dock-scroll-x` / `.dock-scroll-y`, hidden scrollbar, momentum-trapped), the
- * W04 CONTENT-DRIVEN `overflow="wrap"` intrinsic-flex recipe (the
- * `.dock-overflow-wrap` pill↔card radius + floating-tier elevation morph on the
- * ONE `--dock-expand-t` scalar — RELOCATED verbatim, never re-authored), and the
- * W45 D15 single coarse-pointer `--dock-scale` multiplier.
+ * `overflow=` axis: the HORIZONTAL inline scroll port (`.dock-scroll-x`, hidden
+ * scrollbar, momentum-trapped), the W04 CONTENT-DRIVEN `overflow="wrap"`
+ * intrinsic-flex recipe (the `.dock-overflow-wrap` pill↔card radius + floating-
+ * tier elevation morph on the ONE `--dock-expand-t` scalar — RELOCATED verbatim,
+ * never re-authored), and the W45 D15 single coarse-pointer `--dock-scale`
+ * multiplier.
  *
- * @import-ed by dock.css in cascade order, in the SAME `@layer components` — the
- * carve is isomorphic (same layer, same source order → ZERO visual delta). */
+ * BI.W-DOCK-OVERFLOW — the GREENFIELD native scroll track (PASS-1 §2.5). A capped
+ * axis is INTRINSICALLY a scroll axis: `.dock-scroll-x` is emitted on EVERY
+ * horizontal dock (scrollClass in useDockShellProps), and the VERTICAL block-axis
+ * scroll folds into the unconditional cap-derived rule in shell.css. The clip-era
+ * band-aids RETIRE (clean break): the cross-axis `overflow-clip-margin` fudge + the
+ * NO-OP `overflow-y: clip` pin + the `.dock-layers` re-clip are GONE — post-SPINE the
+ * L0 `.dock-plate` `clip-path` owns the silhouette, the L1 controls run is
+ * `overflow: visible`, and the scroll port clips ONLY its own over-cap inline content.
+ * Two EXCLUSIVE modes (PASS-4B ruling 1, never composed): FITS (`:not([data-dock-
+ * overflow])`) is `overflow-x: visible` + `mask-image: none` (the fisheye's branch);
+ * OVERFLOW (`[data-dock-overflow]`, set by `useDockOverflowFit`'s RO) is
+ * `overflow-x: auto` + the `<FadingScroll>` edge mask, fisheye OFF. The cross axis is
+ * honestly `visible` (the ring-room reserved via the `--dock-scroll-safe-inset`
+ * padding/negative-margin no-clip idiom — T-52 b), and `scroll-padding-inline` gutters
+ * the `scrollIntoView` recenter.
+ *
+ * @import-ed by dock.css in cascade order, in the SAME `@layer components`. */
 
 @layer components {
-    /* ── Scroll-on-overflow opt-in (GlassDock `overflow="scroll"`) ───────
-       The default contract grows-to-fit then overflows visibly past the
-       axis cap. `overflow="scroll"` instead makes the dock the scroll port
-       on its layout axis, pairing the existing cap with a hidden-scrollbar
-       scroll region so over-cap content stays reachable. The rounded pill
-       masks the scroll edge; both axes keep their cap. */
+    /* ── The native inline scroll TRACK (BI.W-DOCK-OVERFLOW, PASS-1 §2.5) ──
+       The GREENFIELD overflow facility: a DISTINCT inner scroll track. The
+       clip-era band-aids are GONE (the `overflow-clip-margin` cross-axis fudge +
+       the NO-OP `overflow-y: clip` pin + the `.dock-layers` re-clip that fought
+       the SPINE L1 `overflow: visible` run) — the plate's `clip-path` (dock.css)
+       owns the dock silhouette, the L1 controls run is `overflow: visible`, and
+       the scroll port clips ONLY its own over-cap content on the inline axis.
+       Two EXCLUSIVE modes, NEVER composed (PASS-4B ruling 1):
 
-    /* Inline axis (horizontal docks). The active layer becomes the scroll
-       port: `min-width: 0` releases the flex item's `min-content` floor so
-       it can shrink under the clamped `.dock-layers` track, then `overflow-x:
-       auto` scrolls its over-cap content. `.dock-layers` must KEEP clipping
-       so the pill's rounded edge masks the scroll boundary — hence the
-       grow-mode `overflow-x: visible` (`.dock-layers`, above) is overridden
-       back to `hidden` here. */
-    .glass-dock.dock-scroll-x.expanded:not(.dock-overflow-wrap) > .dock-layers {
-        overflow-x: hidden;
-    }
+         • FITS (default — `:not([data-dock-overflow])`): the row fits the cap, so
+           the port is `overflow-x: visible` (no scroll) and its `mask-image` is
+           `none` (T-52 a — no fade, no 0px-fade transparent-stop shave). The
+           fits-branch fisheye (fisheye.css) is FREE to scale its hump over the
+           `overflow: visible` L1 run.
+         • OVERFLOW (`[data-dock-overflow]`, set by `useDockOverflowFit`'s RO — ZERO
+           scroll listener, G9/O5): the row exceeds the cap, so the port is
+           `overflow-x: auto` (native inline scroll) with the `<FadingScroll>` edge
+           mask; fisheye is OFF (the `:not([data-dock-overflow])` gate). */
 
-    .glass-dock.dock-scroll-x .dock-layer--full {
+    /* min-width:0 releases the flex `min-content` floor so the active full layer
+       can shrink under the `--dock-max-inline-size`-clamped `.dock-layers` track
+       and become the scroll port on the overflow branch. */
+    .glass-dock.dock-scroll-x:not(.dock-overflow-wrap) .dock-layer--full {
         min-width: 0;
+        /* FITS default: no scroll, no mask — the cross axis is honestly `visible`
+           (SPINE: nothing clips the L1 run). T-52(a): `mask-image: none` at rest so
+           the 0px-fade transparent stop can never antialias-shave a flush item's
+           focus-ring arc. */
+        overflow-x: visible;
+        overflow-y: visible;
+        mask-image: none;
+    }
+
+    /* OVERFLOW branch — the native scroll track + the FadingScroll edge mask. */
+    .glass-dock.dock-scroll-x[data-dock-overflow]:not(.dock-overflow-wrap)
+        .dock-layer--full {
         overflow-x: auto;
-        /* BA.W-DOCK-GEOMETRY (DC-1) — PIN the CROSS (block) axis explicitly
-           `visible`. A single-axis `overflow-x: auto` makes the OTHER axis compute
-           from `visible` to `auto` (the MDN single-axis-clip-degrades caveat), so
-           the 40px-tall block axis would clip the 1.1× hover / full active control
-           circle top+bottom — the lozenge. Pinning `overflow-y: visible` keeps the
-           block axis genuinely un-clipped so a control's inset plate paints past the
-           track; the inline scroll port (the real over-cap content axis) is
-           untouched. */
+        /* The cross (block) axis is honestly `visible` in SOURCE. `overflow-x: auto`
+           spec-forces the computed cross axis to a clip, so the RING-ROOM is reserved
+           the canonical no-clip scroll-strip way (T-52 b): a `--dock-scroll-safe-inset`
+           PADDING on all sides (the flush item's focus ring paints INSIDE the padded
+           clip box — all four arcs whole) pulled back by an EQUAL negative MARGIN so
+           the dock's own layout is byte-unchanged. The inline pad ALSO reserves the
+           first/last item's inline ring arc + anchors the mask AA seam in the gutter,
+           so even at a scroll extreme (fade 0) a flush item is never shaved. */
         overflow-y: visible;
+        padding: var(--dock-scroll-safe-inset);
+        margin: calc(-1 * var(--dock-scroll-safe-inset));
+        /* The recenter gutter — `scrollIntoView({inline:'nearest'})` (useSelectionGroup,
+           on every select) lands a selected member with ≥1px port slack (O1). */
+        scroll-padding-inline: var(--dock-scroll-gutter);
         scrollbar-width: none;
-        /* Trap the inline-scroll momentum at the dock's own boundary so a
-           wheel/trackpad gesture that bottoms out the pill does NOT chain into
-           scrolling the page behind it (the dock is a self-contained scroll
-           port, not a window into the route scroller). */
+        /* Trap the inline-scroll momentum at the dock's own boundary so a wheel /
+           trackpad gesture that bottoms out the pill does NOT chain into scrolling the
+           page behind it (the dock is a self-contained scroll port). */
         overscroll-behavior-x: contain;
+        /* The `<FadingScroll>` edge mask, reached BY NAME (the SAME `gl-fade-start-in`/
+           `gl-fade-end-out` keyframes the component drives off `scroll(self inline)` —
+           ZERO new recipe). Painted ONLY on this overflow branch, so at rest (fits) the
+           mask is `none` (T-52 a). On the overflow branch there is ALWAYS trailing OR
+           leading overflow, so at least one fade is active by construction. Not
+           PRM-gated (a legibility cue — it stops interpolating under reduce, the
+           discrete edge-presence stays correct). */
+        mask-image: linear-gradient(
+            to right,
+            transparent 0,
+            black var(--fade-start, 0px),
+            black calc(100% - var(--fade-end, 0px)),
+            transparent 100%
+        );
+        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%;
     }
 
-    .glass-dock.dock-scroll-x .dock-layer--full::-webkit-scrollbar {
+    .glass-dock.dock-scroll-x[data-dock-overflow]:not(.dock-overflow-wrap)
+        .dock-layer--full::-webkit-scrollbar {
         display: none;
     }
 
-    /* Block axis (vertical rails). The root keeps its `max-block-size` cap
-       and scrolls its over-cap children — cap + scroll is the correct
-       pairing the grow-mode contract split apart. Ties the
-       `.vertical.always-expanded` visible default on specificity and wins on
-       source order. */
-    .glass-dock.vertical.dock-scroll-y {
-        overflow-y: auto;
-        /* BA.W-DOCK-GEOMETRY (DC-1) — PIN the CROSS (inline) axis explicitly
-           `visible` (the vertical-dock twin of the horizontal pin above). A
-           single-axis `overflow-y: auto` would compute the inline axis from
-           `visible` to `auto`, clipping a vertical control's inset plate left+right.
-           The block scroll port (the real over-cap axis) is untouched. */
-        overflow-x: visible;
-        scrollbar-width: none;
-        /* Same momentum-trap as the inline port — a rail that bottoms out must
-           not chain its remaining wheel delta into the page scroller behind it. */
-        overscroll-behavior-y: contain;
-    }
-
-    .glass-dock.vertical.dock-scroll-y::-webkit-scrollbar {
-        display: none;
-    }
+    /* The VERTICAL block-axis scroll port lives in shell.css (the unconditional
+       cap-derived `.glass-dock.vertical…:not([data-morphing])` rule) — the
+       `.dock-scroll-y` opt-in class is RETIRED here (BG.W-DOCK-CAP-SCROLL-FADE,
+       clean break: a capped vertical axis is intrinsically a scroll axis, ONE
+       home, no second opt-in port). */
 
     /* ── `overflow="wrap"` recipe — CONTENT-DRIVEN intrinsic flex reflow ──
        (AX.W04 F0). Parallel to the `.dock-scroll-{x,y}` hooks the
@@ -117,7 +157,7 @@
         border-radius: calc(
             var(--radius-pill) +
                 (var(--dock-card-radius) - var(--radius-pill)) *
-                var(--dock-expand-t, 1)
+                var(--dock-expand-t)
         );
 
         /* F1 — the card-tier elevation morph ("material thickens as glass flexes
@@ -134,13 +174,13 @@
            the full floating stack grounds the multi-row silhouette. The per-layer
            recipe mirrors `--shadow-dock-wrap` (= `--shadow-xl` + `--glass-material-rim`
            + `--glass-under-shadow-vivid`) so the token stays the source-of-record. */
-        --dock-wrap-elev: calc(var(--dock-expand-t, 1) * 100%);
+        --dock-wrap-elev: calc(var(--dock-expand-t) * 100%);
         box-shadow:
             var(--glass-edge-light),
             var(--shadow-dock-override, var(--shadow-dock)),
             0 8px 24px color-mix(in srgb, var(--shadow-color) calc(0.14 * var(--dock-wrap-elev)), transparent),
             0 0 0 0.5px color-mix(in srgb, var(--shadow-color) calc(0.05 * var(--dock-wrap-elev)), transparent),
-            0 8px 32px -4px color-mix(in srgb, oklch(0 0 0 / 0.12) var(--dock-wrap-elev), transparent);
+            calc(8px * var(--glass-key-direction)) 8px 32px -4px color-mix(in srgb, oklch(0 0 0 / 0.12) var(--dock-wrap-elev), transparent);
     }
 
     .glass-dock.dock-overflow-wrap .dock-layer--full {
@@ -202,12 +242,12 @@
            surfaces (a routed gear, no dock ancestor) that read it directly.
        Fine pointer byte-identical (`--ui-scale` stays 1).
 
-       AP.W3 R0G-6 — selector is `.glass-dock[data-density]`, not bare `.glass-dock`:
+       AP.W3 R0G-6 — selector is `.glass-dock[data-size]`, not bare `.glass-dock`:
        the always-present density setter (0,2,0) would shadow a bare (0,1,0) rule. The
        presence-selector (0,2,0) wins by source order, lifting `--dock-local-scale` +
        the floor so the cascade re-resolves at touch scale. */
     @media (pointer: coarse) {
-        .glass-dock[data-density] {
+        .glass-dock[data-size] {
             /* R5-2 — the coarse-register DEFAULT lives in the FALLBACK, NOT a
                hard-pin. The coarse dock painted ~22% too big (the global
                --ui-coarse-scale 1.5 → an ~80px collapsed pill). The dock-layer
@@ -249,7 +289,7 @@
                the resolution element moves so the lifted --dock-scale flows in.
                BB.W-PERF-PRODUCER A′-6 — --dock-icon-glyph is now a RATIO of the
                density-painted --dock-layer-height (offsets-sizing.css + the density.css
-               [data-density] re-resolve). This coarse block @imports AFTER density.css
+               [data-size] re-resolve). This coarse block @imports AFTER density.css
                in the SAME @layer at the SAME specificity, so its --dock-icon-glyph
                source-order-WINS on coarse pointers — it MUST carry the density-aware
                formula too (the flat `1.25rem * --dock-scale` here would re-freeze the
@@ -277,7 +317,7 @@
             --dock-collapsed-padding: calc(0.25rem * var(--dock-scale));
             --dock-layer-tab-size: calc(1.75rem * var(--dock-scale));
             /* --dock-collapsed-summary-min-size derives from --dock-layer-height (the
-               density-resolved control height on .glass-dock[data-density]) — but its
+               density-resolved control height on .glass-dock[data-size]) — but its
                :root definition reads --dock-layer-height at :root, where density.css
                never sets it, so it froze at the inline 2.5rem fallback × 0.85 = 34px
                (the pre-existing freeze, independent of R5-2). Re-resolving it HERE reads

package/src/styles/dock/popover.css

@@ -0,0 +1,249 @@
+/* dock/popover.css — BI.W-DOCK-ESCAPE — the top-layer dock popover fan.
+ *
+ * The dock's satellite fan / facet strip renders as a native `popover` surface promoted to
+ * the TOP LAYER on show (`useDockPopover` — the JS one-shot placement). The top layer is
+ * exempt from ancestor `overflow`/`clip`/`contain`/`transform`/`filter` BY SPEC, so the fan
+ * paints OVER the dock body past every former clip line — the retired `.glass-dock-frame`
+ * `display:contents` escape + the `railProjection.ts` φ²-crossing ring math are gone (there
+ * is nothing to escape from once the surface is in the top layer). The dock box is
+ * INVIOLATE: the fan is a fixed-positioned top-layer element that feeds NO size into it.
+ *
+ * PLACEMENT is the JS one-shot ONLY (`position: fixed; top/left` written by useDockPopover
+ * off `getBoundingClientRect`). This file owns the SURFACE + layout + the enter/exit bloom —
+ * NEVER `anchor-name`/`position-anchor`/`@position-try` (the banked native arm is absent;
+ * the SAF-1 Safari-transform-chain fence holds by construction).
+ *
+ * @import-ed by dock.css into the SAME `@layer components` as the other partials. */
+@layer components {
+    :root {
+        /* The macOS-stack tuning tokens (re-expressed via @theme — Tailwind-first). */
+        --dock-stack-stagger: 26ms; /* the per-member fan delay (× var(--i)) */
+        --dock-stack-gap: calc(0.375rem * var(--dock-scale, 1));
+        --dock-stack-member-size: calc(2rem * var(--dock-scale, 1));
+        /* The per-facet accent strength (facets mode) — the BB.W-GLASS-ACCENT ≤55% rim
+           ceiling whisper; the warm-cream core + AA legibility survive. A consumer retunes
+           the carousel's accent intensity from one `:root`/scope override. */
+        --dock-facet-accent-strength: 48%;
+        /* KEPT for density.css's `--dock-content-safe-inset` content-gutter key: the fan's
+           outward reach the demo `<main>` scroll-padding clears from the content side. The
+           fan is top-layer (never inflates the dock), but a bottom/side dock still overhangs
+           its gutter, so the content reserve remains ~3 member cells. */
+        --dock-rail-extend-length: calc(
+            3 * var(--dock-stack-member-size) + 2 * var(--dock-stack-gap)
+        );
+    }
+
+    /* ── The in-flow anchor cluster ─────────────────────────────────────────────────
+       The `.dock-stack` root holds the CORE anchor (a normal dock control) in flow — ZERO
+       gutter presence, ZERO box growth. The fan is the top-layer popover below. */
+    .dock-stack {
+        display: inline-flex;
+        align-items: center;
+    }
+    .dock-stack-core {
+        flex: 0 0 auto;
+    }
+
+    /* ── THE FAN — the top-layer popover surface ────────────────────────────────────
+       Reset the UA popover box (centered `inset:0; margin:auto`) so the JS one-shot
+       `top`/`left` win, and paint the floating glass strip. NO anchor CSS. */
+    .dock-stack-fan[popover] {
+        margin: 0;
+        inset: auto;
+        border: 0;
+        padding: calc(0.25rem * var(--dock-scale, 1));
+        background: transparent;
+        overflow: visible;
+        display: flex;
+        gap: var(--dock-stack-gap);
+        /* The enter/exit BLOOM — compositor-only (scale/opacity), on the --spring-dock
+           clock, from the anchor edge. `@starting-style` + `allow-discrete` carry the
+           native popover display:none↔flex transition (the modern top-layer entrance —
+           NO class-toggle race). */
+        opacity: 0;
+        scale: 0.92;
+        transition:
+            opacity var(--duration-fast) var(--ease-out),
+            scale var(--spring-dock-duration) var(--spring-dock),
+            overlay var(--spring-dock-duration) allow-discrete,
+            display var(--spring-dock-duration) allow-discrete;
+    }
+    .dock-stack-fan[popover]:popover-open {
+        opacity: 1;
+        scale: 1;
+    }
+    @starting-style {
+        .dock-stack-fan[popover]:popover-open {
+            opacity: 0;
+            scale: 0.92;
+        }
+    }
+    /* Fan from the anchor edge — vertical dock fans a ROW to the inline-end, a horizontal
+       (bottom) dock fans a COLUMN upward. The transform-origin biases the bloom toward the
+       anchor. */
+    .dock-stack-fan.vertical {
+        flex-direction: row;
+        align-items: center;
+        transform-origin: left center;
+    }
+    .dock-stack-fan:not(.vertical) {
+        flex-direction: column;
+        align-items: center;
+        transform-origin: center bottom;
+    }
+    .dock-stack-fan-scroll {
+        display: flex;
+        gap: var(--dock-stack-gap);
+    }
+    .dock-stack-fan.vertical .dock-stack-fan-scroll {
+        flex-direction: row;
+    }
+    .dock-stack-fan:not(.vertical) .dock-stack-fan-scroll {
+        flex-direction: column;
+    }
+    .dock-stack-fan[data-wrap] .dock-stack-fan-scroll {
+        flex-wrap: wrap;
+        max-inline-size: calc(
+            var(--dock-stack-member-size) * 3 + var(--dock-stack-gap) * 2 +
+                calc(0.5rem * var(--dock-scale, 1))
+        );
+    }
+
+    /* ── The members — FULLY-VISIBLE glass icons (never shadowed half-tucked chips) ──
+       Each member is a `--glass-bg-floating` tier icon with the catch-light rim. They
+       stagger IN on the fan bloom (per-member `--i` delay). */
+    .dock-stack-fan .dock-stack-member {
+        flex: 0 0 auto;
+        inline-size: var(--dock-stack-member-size);
+        block-size: var(--dock-stack-member-size);
+        background: var(--glass-bg-floating);
+        backdrop-filter: var(--glass-blur-floating);
+        -webkit-backdrop-filter: var(--glass-blur-floating);
+        box-shadow:
+            var(--glass-edge-light),
+            var(--glass-specular),
+            0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 22%, transparent);
+        border-radius: var(--radius-pill);
+        color: color-mix(in srgb, var(--dock-fg-on-aurora, var(--foreground)) 88%, transparent);
+        /* the per-member stagger IN — compositor-only opacity/scale, delayed by reading
+           order (the fan bloom carries the group; this adds the cascade). */
+        opacity: 0;
+        scale: 0.7;
+        transition:
+            opacity var(--duration-fast) var(--ease-out)
+                calc(var(--dock-stack-stagger) * var(--i, 0)),
+            scale var(--spring-dock-duration) var(--spring-dock)
+                calc(var(--dock-stack-stagger) * var(--i, 0)),
+            background-color var(--duration-fast) var(--ease-standard),
+            box-shadow var(--duration-fast) var(--ease-standard);
+    }
+    .dock-stack-fan:popover-open .dock-stack-member {
+        opacity: 1;
+        scale: 1;
+    }
+    @starting-style {
+        .dock-stack-fan:popover-open .dock-stack-member {
+            opacity: 0;
+            scale: 0.7;
+        }
+    }
+    .dark .dock-stack-fan .dock-stack-member {
+        box-shadow:
+            var(--glass-edge-light-dark),
+            var(--glass-specular-dark),
+            0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 30%, transparent);
+    }
+    /* The hover/active register — the plate firms, the glyph wakes (the selected-reads-as-
+       glass tier, W-REGISTER-IOS; NEVER a saturated brand hue). */
+    .dock-stack-fan .dock-stack-member:hover {
+        background: var(--dock-control-hover-bg, var(--glass-bg-resting));
+        color: var(--dock-fg-on-aurora, var(--foreground));
+    }
+    .dock-stack-fan .dock-stack-member.is-active {
+        background: var(--dock-control-active-bg, var(--glass-bg-floating));
+        color: var(--dock-fg-on-aurora, var(--foreground));
+        box-shadow:
+            var(--glass-edge-light),
+            var(--glass-specular),
+            0 0 0 1px color-mix(in srgb, var(--foreground) 12%, transparent),
+            0 3px 8px -2px color-mix(in srgb, var(--shadow-color) 28%, transparent);
+    }
+    .dark .dock-stack-fan .dock-stack-member.is-active {
+        box-shadow:
+            var(--glass-edge-light-dark),
+            var(--glass-specular-dark),
+            0 0 0 1px color-mix(in srgb, var(--foreground) 18%, transparent),
+            0 3px 8px -2px color-mix(in srgb, var(--shadow-color) 36%, transparent);
+    }
+    .dock-stack-fan .dock-stack-member svg {
+        inline-size: 0.875rem;
+        block-size: 0.875rem;
+        flex-shrink: 0;
+    }
+
+    /* ── The FACET-carousel mode (BB.W-GLASS-ACCENT) ─────────────────────────────────
+       Each chip carries its OWN `--glass-accent` hue (written per-chip by DockStack in
+       facets mode), so the strip reads as a row of distinct accent-tinted contexts — the
+       accent mixes into the rim + a soft chromatic glint (the SAME `color-mix(in oklab, …)`
+       seam `glass/rim.css` composes; NOT a plate fill). At the resting transparent/0%
+       no-op this is byte-identical to the stack member (presets-in-consumers — the facet
+       hue is the consumer's context color, never a library token). */
+    .dock-stack-fan .dock-facet-chip {
+        --dock-facet-rim-ink: color-mix(
+            in oklab,
+            var(--glass-rim-ink, hsl(0 0% 100% / 0.3)),
+            var(--glass-accent) var(--glass-accent-strength, 0%)
+        );
+        box-shadow:
+            inset 0 1px 0 var(--dock-facet-rim-ink),
+            var(--glass-specular),
+            0 0 0 1px color-mix(in oklab, transparent, var(--glass-accent) var(--glass-accent-strength, 0%)),
+            0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 22%, transparent);
+    }
+    .dark .dock-stack-fan .dock-facet-chip {
+        --dock-facet-rim-ink: color-mix(
+            in oklab,
+            var(--glass-rim-ink, hsl(0 0% 100% / 0.4)),
+            var(--glass-accent) var(--glass-accent-strength, 0%)
+        );
+        box-shadow:
+            inset 0 1px 0 var(--dock-facet-rim-ink),
+            var(--glass-specular-dark),
+            0 0 0 1px color-mix(in oklab, transparent, var(--glass-accent) var(--glass-accent-strength, 0%)),
+            0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 30%, transparent);
+    }
+    .dock-stack-fan .dock-facet-chip.is-active {
+        background: var(--dock-control-active-bg, var(--glass-bg-floating));
+        box-shadow:
+            inset 0 1px 0 var(--dock-facet-rim-ink),
+            var(--glass-specular),
+            0 0 0 1px color-mix(in oklab, color-mix(in srgb, var(--foreground) 12%, transparent), var(--glass-accent) var(--glass-accent-strength, 0%)),
+            0 3px 8px -2px color-mix(in srgb, var(--shadow-color) 28%, transparent);
+    }
+    .dark .dock-stack-fan .dock-facet-chip.is-active {
+        box-shadow:
+            inset 0 1px 0 var(--dock-facet-rim-ink),
+            var(--glass-specular-dark),
+            0 0 0 1px color-mix(in oklab, color-mix(in srgb, var(--foreground) 18%, transparent), var(--glass-accent) var(--glass-accent-strength, 0%)),
+            0 3px 8px -2px color-mix(in srgb, var(--shadow-color) 36%, transparent);
+    }
+
+    /* PRM — the fan SNAPS to terminal (the fade survives, the transform + stagger drop —
+       P6 / proof:no-layout-animation PRM carve). */
+    @media (prefers-reduced-motion: reduce) {
+        .dock-stack-fan[popover] {
+            scale: 1;
+            transition:
+                opacity var(--duration-fast) linear,
+                overlay var(--duration-fast) allow-discrete,
+                display var(--duration-fast) allow-discrete;
+        }
+        .dock-stack-fan .dock-stack-member {
+            scale: 1;
+            transition:
+                opacity var(--duration-fast) linear,
+                background-color var(--duration-fast) var(--ease-standard),
+                box-shadow var(--duration-fast) var(--ease-standard);
+        }
+    }
+}