@mkbabb/glass-ui 4.1.0 → 5.0.0

package/src/styles/segmented-tabs.css

@@ -54,19 +54,12 @@
     grid-auto-columns: 1fr;
     padding: var(--bouncy-track-trim);
     border-radius: var(--bouncy-track-radius);
-    /* BA.W-TABS — the pill track rides the glass quiet tier (the warm glass
-       material, the no-gray register) + a hairline edge. NOT a `--surface-tint`
-       gray plate (the R10-5 no-gray cut). */
-    background: var(--glass-bg-quiet);
-    backdrop-filter: var(--glass-blur-quiet);
-    -webkit-backdrop-filter: var(--glass-blur-quiet);
-    /* BC.W-TABS-IOS — the track hairline re-points off the `--border` ring (which read
-       dark over the cream plate — the D2 "black bar" on the strip top edge) onto the
-       BC.W-BLACK-BAR directional rim register: a bright top catch-light + a faint warm
-       under-shadow. The track is a thin warm-glass quiet capsule with a lit top edge,
-       never a dark hairline. The pill (above) carries the SAME rim plus the lift shadow
-       so it reads FORWARD; the track carries only the rim. */
-    box-shadow: var(--glass-rim-top), var(--glass-rim-bottom);
+    /* BD.W-TAB-IOS-CAPSULE — the warm-glass quiet surface + the rim + the iOS-27
+       sunken recess now live in the SHARED `.glass-capsule-track` register (the SFC
+       composes it onto the pill track). The track is a thin warm-glass quiet capsule
+       with a lit top edge + a recessed well, never a dark hairline, never gray. The
+       indicator (`.glass-capsule`) reads FORWARD off the SAME rim + the lift shadow.
+       The underline material does NOT compose the track (paper, no surface). */
 }
 
 /* ── The vertical orientation axis (the block stack) ── */
@@ -76,6 +69,33 @@
     grid-auto-flow: unset;
     grid-auto-columns: unset;
     align-items: stretch;
+    /* BI.W-RADIUS-GRAMMAR (Law 2 — capsule-vs-card). A COLUMN-STACK track cannot
+       wear the horizontal arm's stadium `--radius-tab` (= --radius-pill = 9999px):
+       on a tall multi-row box the stadium clamps its end-caps to a ~46px half-height
+       balloon (the live-measured 10003px→46px defect, UF-A2/FAM-4). The vertical arm
+       re-binds the family radius var onto the BOUNDED `--radius-strip` (≈12px); the
+       shipped concentric track calc (`--bouncy-track-radius`, above) re-resolves the
+       track corner off it for free. The horizontal `.segmented-tabs` is byte-untouched
+       (its single-row pill stays a legal stadium — the pill-in-pill exemption). */
+    --bouncy-slider-radius: var(--radius-strip);
+    /* Law 1 — the concentric relay. The vertical track is the concentric CONTAINER:
+       it publishes its resolved outer radius as `--radius-ctx` + its trim inset as
+       `--radius-inset`, and the indicator (the nested surface) derives its arc below.
+       This GENERALIZES the shipped per-surface `.containerConcentric` idiom onto the
+       named Law-1 contract (Ruling 11 site #2), so the relay is LIVE not dead-on-mint. */
+    --radius-ctx: var(--bouncy-track-radius);
+    --radius-inset: var(--bouncy-track-trim);
+}
+
+/* The vertical indicator arc is the concentric INNER of the track — it reads the
+   Law-1 relay `inner = max(floor, ctx − inset)` (= --radius-strip, the shipped calc
+   value routed through the named contract). Specificity (0,2,0) wins the base
+   `.segmented-indicator` (0,1,0) `border-radius: var(--bouncy-slider-radius)`. */
+.segmented-tabs--vertical .segmented-indicator {
+    border-radius: max(
+        var(--radius-floor),
+        calc(var(--radius-ctx) - var(--radius-inset))
+    );
 }
 
 @media (min-width: 640px) {
@@ -90,35 +110,70 @@
 /* ── The shared indicator body (the PILL plate) ── */
 .segmented-indicator {
     position: absolute;
-    /* BC.W-TABS-IOS — the active pill is the iOS-27 / value.js DISTINCT LIFTED PLATE,
-       not a +30%-α same-hue brightness step. The fill reads the SHARED element-level
-       oklab-tinted floating pair (surfaces.css `:where(.btn-glass, .segmented-indicator)`)
-       — over a bright field it darkens-to-legible, over a calm field it stays
-       warm-cream/near-white (the W55 adaptive register reaching the pill, the "raised
-       near-white plate" the user pinned). The FORWARD-ness comes from the rim + lift
-       below, NOT from cranking the same-hue alpha. */
-    background: var(--glass-bg-floating-tinted);
-    backdrop-filter: var(--glass-blur-floating);
-    -webkit-backdrop-filter: var(--glass-blur-floating);
+    /* BD.W-TAB-IOS-CAPSULE — the active pill COMPOSES the shared `.glass-capsule`
+       (the SFC adds the class). The warm-floor fill (`--glass-bg-floating-tinted`
+       composed toward the warm-floor source, meanChroma ≥ 0.02 both modes — never
+       gray), the floating blur, the directional rim + the lift under-shadow ALL live
+       there now, ONE recipe ≥3 consumers. This block keeps only the position +
+       inset + the indicator-local stadium radius + the motion transform. */
     z-index: 0;
     inset-block: var(--bouncy-track-trim);
     border-radius: var(--bouncy-slider-radius);
-    /* BC.W-TABS-IOS — the lifted-plate composite: the BC.W-BLACK-BAR directional rim
-       (bright top catch-light `--glass-rim-top` + warm bottom under-shadow
-       `--glass-rim-bottom` — the iOS-27 top-light/bottom-shadow thickness the track does
-       NOT carry, the FORWARD-ness device, NEVER the dark D2 hairline) PLUS a real layered
-       glass under-shadow (`--glass-shadow-floating`) lifting the plate ~2-3px off the
-       quiet track. Replaces the HEAD weak `0 1px 3px rgba(0,0,0,0.08)` + the 30%-border
-       dark ring (the same-hue low-contrast plate that read "not glassy"). */
-    box-shadow:
-        var(--glass-rim-top),
-        var(--glass-rim-bottom),
-        var(--glass-shadow-floating);
-    /* The volume-preserving travel-squish: stretch along X, compress Y in
-       inverse proportion. `transform-origin: center` → a symmetric width-flex
-       as it travels (the indicator grows wider mid-travel, settles to fit). */
+    /* BD.W-TABS-LIQUID — the COMPOSED transform write: the area-inflation BLOB
+       (uniform, both axes, `--tab-blob` driven imperatively by the 2nd
+       `useLiquidFlex` channel — grow→overshoot→shrink) × the volume-preserving
+       travel-squish (`--stretch`, reciprocal). `transform-origin: center` → the blob
+       grows from center (the label stays put) and the squish stays center-pinned. */
+    transform-origin: center;
+    scale: calc(var(--tab-blob, 1) * var(--stretch))
+        calc(var(--tab-blob, 1) / var(--stretch));
+}
+
+/* BI.W-TABS-FACTOR — the indicator PLATE. The glass fill (`.glass-capsule`) + the
+   refraction (`.glass-lens`) live on this nested plate so the eyeglass two-rest-state
+   block-proud magnify rides its OWN compositor channel: `transform: scaleY(var(--eyeglass-y))`
+   — NOT the outer's `scale` (the travel-squish) nor its `transform` (the glide/drag), so
+   the per-frame `useLeadTrail` write of `--eyeglass-live-t` is never lagged by their
+   transitions. The plate fills the shell (`inset: 0`); the outer squish/glide scale +
+   translate compose over it (the outer scale scales the plate too — squish × magnify).
+   `--eyeglass-y` defaults 1 (the flat slot-fill capsule — the degrade / non-eyeglass
+   floor); the eyeglass scope (segmented-tabs-drag.css) drives the two-rest-state calc.
+   NO transition on the plate transform — the useLeadTrail integrator is the animator on
+   the live path; the `@property --eyeglass-live-t` covers the discrete/degrade path. */
+.segmented-indicator__plate {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
     transform-origin: center;
-    scale: var(--stretch) calc(1 / var(--stretch));
+    transform: scaleY(var(--eyeglass-y, 1));
+}
+
+/* BD.W-TABS-LIQUID — the COMMIT accent-flood (T4, opt-in). A momentary full-capsule
+   wash of `--glass-accent`, driven by `--tab-flood-t` (0→1→0), that TRAILS the
+   spatial glide a beat then clears (EFFECTS-after-SPATIAL). `isolation: isolate` on
+   the host so the `plus-lighter` blend composites the flood against the capsule
+   only (not the page); the gradient is `in srgb` (additive bloom, NOT oklab). The
+   accent is a CONSUMER accent — default `--glass-accent: transparent` → byte-
+   identical rest, provable no-op. The SAME register dock-tabs adopt (dormant at
+   `--tab-flood-t: 0`). */
+.segmented-indicator {
+    isolation: isolate;
+}
+@supports (mix-blend-mode: plus-lighter) {
+    .segmented-indicator::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        pointer-events: none;
+        background: radial-gradient(
+            120% 140% at 50% 50%,
+            color-mix(in srgb, var(--glass-accent, transparent) 55%, transparent),
+            transparent 70%
+        );
+        mix-blend-mode: plus-lighter;
+        opacity: var(--tab-flood-t, 0);
+    }
 }
 
 /* Vertical: the indicator deforms on the BLOCK axis (compress X / stretch Y) and
@@ -126,67 +181,50 @@
 .segmented-tabs--vertical .segmented-indicator {
     inset-block: auto;
     inset-inline: var(--bouncy-track-trim);
-    scale: calc(1 / var(--stretch)) var(--stretch);
+    /* BD.W-TABS-LIQUID — the vertical arm mirrors the blob × squish: the block axis
+       carries the stretch, the inline axis its reciprocal, both uniformly inflated. */
+    scale: calc(var(--tab-blob, 1) / var(--stretch))
+        calc(var(--tab-blob, 1) * var(--stretch));
 }
 
 @media (prefers-reduced-motion: no-preference) {
     .segmented-indicator {
-        /* ONE composited transform pair (translate+scale) on ONE calibrated
-           clock — the glide + the squish share `--tab-indicator-duration` so they
-           cannot desync (the R10-2 multi-property-desync class collapsed). */
-        transition: scale var(--tab-indicator-duration) var(--spring-snappy);
+        /* BD.W-TABS-LIQUID — the composed `scale` (`--tab-blob × --stretch`) rides the
+           DEPENDED `--ease-cartoon-punch` curve (the booked Band-0 token, CONSUMED
+           never minted) so the 5-beat blob anticipates (the curve's pre-dip < 0),
+           overshoots past the destination footprint (peaks > 1), then settles soft.
+           The discrete imperative `--tab-blob` writes (open/release) INTERPOLATE on
+           this clock via the `@property` registration — no snap-flicker. ONE clock,
+           ONE composited transform pair — the glide (inset) + the squish + the blob
+           cannot desync. The `--tab-flood-t` accent-flood trails a beat after. */
+        transition: scale var(--tab-indicator-duration) var(--ease-cartoon-punch);
     }
 }
 
-/* Fallback (JS-measured) path — the indicator is moved by inline
-   `transform`/`width` writes; animate those alongside the squish scale on the ONE
-   calibrated clock. */
+/* The JS-measured indicator glide — the indicator is moved by inline `transform`/
+   `width` writes; animate those alongside the squish scale on the ONE calibrated clock.
+   BI.W-TABS-FACTOR — the pill IS the eyeglass loupe by default, so its travel rides the
+   `--spring-eyeglass` curve (the measured Find My loupe register, SPRING_PRESETS
+   `eyeglass` — snappy-class speed 0.36 / dock-class give ζ0.64; TABS-GLASS-LADDER §8.2)
+   on the same calibrated `--tab-indicator-duration` clock (unchanged — the underline
+   paper material keeps `--spring-snappy`). This is the eyeglass row's CSS consumer (the
+   ≥2-consumer bar: this glide + the JS `useEyeglassLive` release). */
 .segmented-indicator--js {
     transition:
-        transform var(--tab-indicator-duration) var(--spring-snappy),
-        width var(--tab-indicator-duration) var(--spring-snappy),
-        height var(--tab-indicator-duration) var(--spring-snappy),
-        scale var(--tab-indicator-duration) var(--spring-snappy),
+        transform var(--tab-indicator-duration) var(--spring-eyeglass),
+        width var(--tab-indicator-duration) var(--spring-eyeglass),
+        height var(--tab-indicator-duration) var(--spring-eyeglass),
+        scale var(--tab-indicator-duration) var(--spring-eyeglass),
         opacity var(--duration-fast) ease;
 }
 
-/* Anchor path — the indicator tethers to the active button's `anchor-name`.
-   `inset` reads the anchor's edges; the browser interpolates `inset` between
-   buttons on selection (the glide), and the JS `--stretch` write deforms it
-   (the squish) on the SAME calibrated clock. */
-@supports (position-anchor: --x) {
-    .segmented-indicator--anchor {
-        position-anchor: --gl-tab-active;
-        /* The four edge longhands tether to the active button's anchor edges (the
-           inline-trimmed band over the full anchor block extent). NO `inset-block:
-           auto` shorthand here — it would reset the block longhands above it to auto
-           and collapse the indicator to height 0 (the live-found clobber). */
-        inset-block-start: calc(anchor(top) + 0.1875rem);
-        inset-block-end: calc(anchor(bottom) + 0.1875rem);
-        inset-inline-start: anchor(left);
-        inset-inline-end: anchor(right);
-        opacity: 1;
-    }
-    /* Vertical: the anchor band runs the FULL block extent of the active button
-       (the indicator tracks the column, not the row) with the inline axis trimmed. */
-    .segmented-tabs--vertical .segmented-indicator--anchor {
-        inset-block-start: anchor(top);
-        inset-block-end: anchor(bottom);
-        inset-inline-start: calc(anchor(left) + 0.1875rem);
-        inset-inline-end: calc(anchor(right) + 0.1875rem);
-    }
-    @media (prefers-reduced-motion: no-preference) {
-        .segmented-indicator--anchor {
-            transition:
-                inset var(--tab-indicator-duration) var(--spring-snappy),
-                scale var(--tab-indicator-duration) var(--spring-snappy);
-        }
-    }
-    .segmented-tabs:not(.segmented-tabs--underline) .segmented-tab[aria-pressed="true"],
-    .segmented-tabs:not(.segmented-tabs--underline) .segmented-tab[aria-selected="true"] {
-        anchor-name: --gl-tab-active;
-    }
-}
+/* BI.W-DOCK-CONTROLS — the PILL `.segmented-indicator--anchor` CSS-anchor branch
+   is RETIRED (DEFINITION-ABSENT). The pill indicator now rides the ONE JS-measured
+   writer (`useSelectionIndicator`) on every engine — Chrome and Safari paint the
+   same pixels by construction, so the CSS `position-anchor` glide path (which only
+   fired on anchor-supporting engines) is dead. The underline material keeps its
+   own `anchor-name`/`::before` indicator below (a distinct paper-material indicator,
+   not the pill writer). */
 
 @media (min-width: 640px) {
     .segmented-indicator {
@@ -199,18 +237,8 @@
         inset-block: auto;
         inset-inline: 0.25rem;
     }
-    @supports (position-anchor: --x) {
-        .segmented-indicator--anchor {
-            inset-block-start: calc(anchor(top) + 0.25rem);
-            inset-block-end: calc(anchor(bottom) + 0.25rem);
-        }
-        .segmented-tabs--vertical .segmented-indicator--anchor {
-            inset-block-start: anchor(top);
-            inset-block-end: anchor(bottom);
-            inset-inline-start: calc(anchor(left) + 0.25rem);
-            inset-inline-end: calc(anchor(right) + 0.25rem);
-        }
-    }
+    /* BI.W-DOCK-CONTROLS — the pill `.segmented-indicator--anchor` breakpoint trim
+       retired with the anchor branch (the ONE JS writer carries the inset). */
 }
 
 /* ── The tab buttons ── */
@@ -227,7 +255,13 @@
     font: inherit;
     font-size: 0.8125rem;
     color: var(--muted-foreground);
-    transition: color var(--duration-fast) ease;
+    /* BD.W-TABS-LIQUID — the glyph scale-pop (overlapping action / follow-through):
+       the label settles AFTER the capsule (the child trails the parent). The `scale`
+       channel rides the snappy spring with a 60ms delay so it OVERLAPS the capsule
+       arrival; the colour cross-fade stays on the fast bezier. */
+    transition:
+        color var(--duration-fast) ease,
+        scale var(--spring-snappy-duration) var(--spring-snappy) 60ms;
     /* AQ.W3 identity base — keep `scale:1; translate:0` so a hover/press
        transform never mints a stacking context that severs `anchor()`
        resolution (the WAAPI press writes `transform` transiently — harmless). */
@@ -247,6 +281,19 @@
     color: var(--foreground);
 }
 
+/* BD.W-TABS-LIQUID — the glyph scale-pop on the PILL selection. The live selection
+   model is `aria-pressed` (the pill is a ToggleGroup-shaped surface — verified in
+   SegmentedTabs.vue, NOT `aria-selected` which the underline paper material uses).
+   The pop magnitude DEPENDS `--motion-weight` (the booked Band-0 token, CONSUMED):
+   `calc(1 + 0.06 × --motion-weight)` → ~+3.7% at rest weight 0.618, and exactly 1
+   under PRM (`--motion-weight: 0`). The 60ms transition delay (above) settles it a
+   beat after the capsule arrives (overlapping action). The underline label does NOT
+   pop (paper ink, no inflation — the material fence). */
+.segmented-tabs:not(.segmented-tabs--underline)
+    .segmented-tab[aria-pressed="true"] {
+    scale: calc(1 + 0.06 * var(--motion-weight));
+}
+
 .segmented-tab.is-disabled {
     opacity: 0.4;
     cursor: not-allowed;
@@ -375,33 +422,3 @@
     color: color-mix(in oklab, var(--foreground) 70%, transparent);
 }
 
-/* ════════════════════════════════════════════════════════════════════════
-   BB.W-DRAG-MORPH — the `.glass-drag-lift` decoration (the pull affordance).
-
-   The `useDragMorph` consumer adds this class to the morph element while
-   `dragging` is true (the SegmentedTabs `:draggable` indicator; the
-   DockLayerGroup pull rail). It is the visual "this is grabbable + grabbed"
-   affordance — the GRAB cursor + a sub-perceptual `--glass-specular` catch-light
-   lift + the `will-change: transform` compositor hint that promotes the lozenge
-   to its own layer for the 1:1 follow. It carries NO transform itself (the
-   translate + squish are the primitive's own `translate`/`--stretch` writes, the
-   §6 compositor channels); this class only paints the affordance + the hint.
-
-   The grab cursor sits on the morph element AT REST too (a draggable indicator
-   reads grabbable before the grab), so `.glass-drag-grabbable` marks the rest
-   affordance and `.glass-drag-lift` adds the grabbing state. PRM does not gate
-   the cursor/hint (they are not motion); the lift is a static specular nudge. */
-.glass-drag-grabbable {
-    cursor: grab;
-    touch-action: none;
-}
-
-.glass-drag-lift {
-    cursor: grabbing;
-    /* Promote to its own compositor layer for the 1:1 follow (the translate write
-       is compositor-only; the hint keeps the plate off the main-thread paint). */
-    will-change: transform;
-    /* Sub-perceptual catch-light lift — the grabbed lozenge reads a hair brighter
-       at its specular edge (the W-GLASS-CAL specular register, disco-FREE). */
-    --glass-specular: 0.1;
-}

package/src/styles/select.css

@@ -48,3 +48,154 @@
        precompiled contract). */
     overflow-y: auto;
 }
+
+/* ════════════════════════════════════════════════════════════════════════
+   BD.W-SELECT-WELL (P4 select-forms) — the welling WARM-GLASS listbox + the
+   keyed warm control EDGE. The Select is the REFERENCE consumer of the shared
+   field + capsule + accent + reveal union — every leg COMPOSES a shipped/sibling
+   register, ZERO new component, ZERO fork.
+
+   The three legs that live HERE (the consumer side):
+     · .glass-control-edge — the keyed two-stop warm rim every form control reads
+       so it has a DEFINED edge over the field (fixes the trigger box-shadow:none
+       cream-on-cream melt). Composes the SHIPPED `--glass-rim-top`/`--glass-rim-
+       bottom` keyed pair (the `--glass-key` upper-right cel key) — NOT a select-
+       private border, NOT a re-minted rim.
+     · the menu plate WARM FLOOR + α-drop — the menu reads the SHIPPED warm-capsule
+       floor (`--glass-capsule-warm` at `--glass-capsule-warm-floor`, the proven
+       meanChroma ≥ 0.02 source) so it is warm-cream even over a flat page, AND the
+       plate α drops so the warmed source + the portal field TRANSMIT.
+     · the portal warm FIELD — a clipped menu-local layer carrying the route's
+       `--field-h` (re-emitted on the portal root) so the menu transmits its route
+       identity even where the page field is faint behind the body plate.
+   ════════════════════════════════════════════════════════════════════════ */
+@layer components {
+    /* ── .glass-control-edge — the keyed warm control rim (the cream-on-cream fix) ──
+       The form controls read `.control-surface` / `.input-pill` (control-surfaces.css)
+       which carry a border + fill but `box-shadow: none` — so over a warm cream field
+       the trigger's 1.5px border melts and the control reads as a flat cream smudge.
+       This register adds the SHIPPED keyed two-stop directional rim (the bright top/
+       right catch-light + the faint warm bottom/left under-shadow, `--glass-key` upper-
+       right) so the control reads as a lifted glass plate with a defined warm edge over
+       the field. ONE register, ≥8 consumers (Select trigger + Input/Textarea/NumberField
+       pill + Checkbox/Radio + Switch track + Combobox anchor) — the DRY bar cleared by
+       construction. Composed (not re-declared): the rim is the SAME `--glass-rim-top`/
+       `--glass-rim-bottom` pair `.glass-capsule` reads, so `--glass-key` re-points BOTH
+       the capsule and the control edge from ONE handle (cel coherence). */
+    .glass-control-edge {
+        box-shadow:
+            var(--glass-rim-top),
+            var(--glass-rim-bottom);
+    }
+    /* Compose the keyed edge UNDER any control-owned ring/shadow: a control with its
+       OWN box-shadow (the Switch thumb, the focus ring on the pill) layers its shadow
+       FIRST, then the rim — the rim is the resting silhouette, the ring is the focus
+       overlay (the pill's `:focus-visible` box-shadow wins by source order + its own
+       rule). The rim travels with the control on the SHARED bezier (the pill/control-
+       surface already transition box-shadow on `--ease-standard`). */
+
+    /* ── The menu plate WARM FLOOR + α-drop (the un-gray amplifier) ──
+       The floating recipe (`.glass-floating`, ladder.css) composes
+       `color-mix(--glass-bg-floating, --glass-tint-source --glass-tint-strength)`,
+       and `--glass-tint-strength` floors at 0% at calm rest — so the menu plate is
+       near-gray-flat. RE-POINT the menu fill to compose the SHIPPED warm-capsule floor
+       (`--glass-capsule-warm` at `--glass-capsule-warm-floor`, the proven meanChroma
+       ≥ 0.02 source — the SAME token the tab capsule reads, DRY) ON TOP of the floating
+       tint, AND drop the plate α so the warmed source + the portal field TRANSMIT and
+       give real L-variance (the menu is warm GLASS, never an opaque cream slab). The
+       six-layer rim/blur/shadow composite is UNTOUCHED — only the FILL admit changes. */
+    [data-slot="select-content"],
+    [data-slot="combobox-list"] {
+        /* The α-drop seam: a consumer can re-solidify via `--select-plate-alpha: 1`.
+           Default 0.90 (light) drops the ~0.80α floating base to ~0.72 effective (the
+           amendment's transmit target) so the warmed source + the portal field show
+           through while the plate keeps body. The dark arm keeps more body (see .dark
+           below). The combobox list is the SAME overlay-family warm-glass plate
+           (DRY — one warm-floor register for both portalled pickers). */
+        --select-plate-alpha: 0.90;
+        background: color-mix(
+            in oklab,
+            color-mix(
+                in oklab,
+                var(--glass-bg-floating-tinted, var(--glass-bg-floating)),
+                var(--glass-capsule-warm) var(--glass-capsule-warm-floor)
+            ),
+            transparent calc((1 - var(--select-plate-alpha)) * 100%)
+        );
+        /* the cartoon weight — the SHIPPED `--shadow-cartoon-lg` warm cel stamp UNDER
+           the floating elevation so the panel reads as a physical card lifted off the
+           page. Composed onto the floating box-shadow stack via the plate's own rule
+           (the floating tier's `--glass-material-rim` + shadows stay; this ADDS the
+           cartoon under-stamp). Static, PRM-immune. */
+        box-shadow:
+            var(--glass-material-rim),
+            var(--glass-under-shadow-vivid),
+            var(--glass-shadow-floating),
+            var(--shadow-cartoon-lg);
+    }
+    .dark [data-slot="select-content"],
+    .dark [data-slot="combobox-list"] {
+        /* dark glass needs more body — the warm field reads as a glow band, not a wash
+           lost in near-black; keep the fill nearly solid so the dark menu has presence.
+           PLAIN per-mode arm (not a light-dark() fragment — the inset-shadow trap, and
+           the box-shadow above carries no inset leg but the discipline holds). */
+        --select-plate-alpha: 0.94;
+    }
+
+    /* ── .glass-field-portal — the portal-local warm field (route identity) ──
+       The menu portals to <body>, OUTSIDE the route's field, so its `backdrop-filter`
+       has nothing warm to transmit. A clipped menu-local layer BEHIND the plate (z -1,
+       NO backdrop-filter on it — glass-cannot-sample-glass avoided by construction)
+       paints a 3-stop warm spine keyed to the route's `--field-h` (re-emitted on the
+       portal root via `data-field-palette` → `--field-h`). `inset: 0` (clipped INSIDE
+       — the blur bends it THROUGH the plate as real L-variance, NOT an `inset:-20%`
+       halo leaking around the box). Defaults to `--field-h: 48` (forms terracotta)
+       when the route does not re-emit, so a bare Select still reads warm. */
+    .glass-field-portal {
+        position: relative;
+    }
+    .glass-field-portal::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+        pointer-events: none;
+        border-radius: inherit;
+        background:
+            radial-gradient(70% 60% at 24% 22%,
+                oklch(0.92 0.08 var(--field-h, 48) / 0.55), transparent 72%),
+            radial-gradient(64% 58% at 82% 80%,
+                oklch(0.88 0.07 calc(var(--field-h, 48) + 18) / 0.50), transparent 70%),
+            radial-gradient(60% 62% at 60% 40%,
+                oklch(0.90 0.06 calc(var(--field-h, 48) - 14) / 0.48), transparent 74%);
+    }
+    /* DARK arm (PLAIN per-mode, not :global()/light-dark()) — the dark field stops lift
+       to a real glow band (oklch L ~0.22–0.30, higher chroma) so the field-thesis is met
+       in dark, not a wash lost in near-black. */
+    .dark .glass-field-portal::before {
+        background:
+            radial-gradient(70% 60% at 24% 22%,
+                oklch(0.30 0.10 var(--field-h, 48) / 0.55), transparent 72%),
+            radial-gradient(64% 58% at 82% 80%,
+                oklch(0.26 0.09 calc(var(--field-h, 48) + 18) / 0.50), transparent 70%),
+            radial-gradient(60% 62% at 60% 40%,
+                oklch(0.28 0.08 calc(var(--field-h, 48) - 14) / 0.48), transparent 74%);
+    }
+    /* honest-degraded arm — engines without oklch() get an hsl warm spine, never gray. */
+    @supports not (color: oklch(0.9 0.08 48)) {
+        .glass-field-portal::before {
+            background: radial-gradient(70% 60% at 24% 22%,
+                hsl(var(--field-h, 48) 60% 88% / 0.5), transparent 72%);
+        }
+        .dark .glass-field-portal::before {
+            background: radial-gradient(70% 60% at 24% 22%,
+                hsl(var(--field-h, 48) 45% 26% / 0.55), transparent 72%);
+        }
+    }
+}
+
+/* ── PRM is colour-static here — the field + floor + edge + cartoon shadow are PAINT,
+   not motion, so they REMAIN under `prefers-reduced-motion: reduce` (un-gray and
+   selection-legibility need no motion). The reveal/pour/chevron motion legs are
+   carved in their own home recipes (reveal.css / menu.css) — this consumer file
+   introduces no motion to gate. */