@mkbabb/glass-ui 4.2.0 → 6.0.0

package/dist/styles/motion/morph-field.css

@@ -1,229 +0,0 @@
-/* motion/morph-field.css — BD.W-MORPH-FIELD-WELD — the ONE morph-field RECIPE.
- *
- * The body / neck / waist recipe + the DEDICATED squish channel every `useMorphField`
- * consumer paints over. The weld JS (useMorphField.ts) writes the drive-derived custom
- * properties once per frame (`--morph-squish`, `--morph-neck-girth`, `--morph-neck-gap`,
- * `--morph-k`, `--morph-waist`, `--morph-specular-angle`); this sheet projects them onto
- * the body + neck silhouettes. The MORPH_SIGNATURES rows live in the JS (motion-named
- * DATA); this sheet is signature-agnostic — it paints whatever the masses carry.
- *
- * THE DEDICATED SQUISH CHANNEL (the dock-core hardening fence). The volume-preserving
- * squish writes `--morph-squish`, NEVER `--stretch` (the 6-JS-owner + the
- * `--dock-morph-max-stretch:1.14` clobber). A morph that ALSO rides --stretch (the dock
- * collapse) keeps its own channel; the weld owns this one. Registered @property so a bare
- * var() INTERPOLATES the ramp (the --dock-morph-t precedent).
- *
- * DETERMINISM (motion-canon P5 / the M5 scalar-binding). Every axis below is
- * `f(var(--morph-*))` (the weld's drive-derived writes) — NEVER a CSS animation/transition
- * with its own clock. A frame at a given drive value is byte-reproducible. Compositor-only
- * (transform / scale / clip-path / opacity / --* — ZERO animated layout property).
- *
- * THE CARTOON PUNCH (welded IN, gated on the SHIPPED Band-0 tokens). The body squash rides
- * `--morph-squish × --motion-weight`; the ink cast rides the `--shadow-cartoon-*` rung
- * (never a hex literal, never an animated box-shadow); the neck specular-sweep lags the
- * geometry (follow-through). `--motion-weight` and `--ease-cartoon-punch` are SHIPPED (P1,
- * scheme-motion.css), so the punch is LIVE (not skipped); PRM zeroes --motion-weight → the
- * squash/arc/cast collapse in ONE assignment.
- *
- * CROSS-ENGINE (§L7). The goo `<filter>` is the ONE `<GooFilter>` mount's REGULAR
- * `filter:url(#…)` (NEVER backdrop-filter — bug 245510), applied on a SIBLING goo LAYER,
- * never an ANCESTOR of glass (an ancestor filter kills backdrop-filter on descendants in
- * both engines). The clip-path hourglass waist is the Tier-C cross-engine FLOOR under the
- * filter — a concave waist on BOTH engines before any blur fuses it. The filter is gated to
- * `[data-morphing]` (never a steady-state re-blur — the Safari budget fence). */
-
-/* The dedicated squish channel + the neck-drive channels — typed INHERITING @property so a
-   bare var() INTERPOLATES (the --dock-morph-t/--neck-t precedent). The weld writes them on
-   the host; descendant bodies + neck read the inheriting values. */
-@property --morph-squish {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 1;
-}
-@property --morph-neck-girth {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 0;
-}
-@property --morph-k {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 1;
-}
-@property --morph-waist {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 1;
-}
-@property --morph-specular-angle {
-    syntax: "<angle>";
-    inherits: true;
-    initial-value: 0deg;
-}
-
-@layer components {
-    /* The morph FIELD host — the sibling goo LAYER the filter applies to (never an
-       ancestor of glass). The weld writes the drive-derived channels here; the bodies +
-       neck live under it and read the inheriting values. The filter engages ONLY while the
-       morph is in-flight (`[data-morphing]`) — crisp at rest, gooey during the merge. */
-    .morph-field {
-        position: relative;
-        pointer-events: none;
-        /* isolation keeps the blur/threshold scoped to the masses, not the page behind. */
-        isolation: isolate;
-        filter: none;
-    }
-    /* Gate the goo filter to the in-flight window — the §L7 Safari budget fence (no
-       steady-state re-blur). The weld sets `[data-morphing]` on the host (or the consumer
-       does). The filter id is the consumer's tuned instance off the ONE <GooFilter> mount
-       (`url(#glass-goo)` / `url(#pager-goo)` / `url(#dock-morph-goo)` / `url(#morph-goo)`),
-       passed via `--morph-goo-filter`. The REGULAR filter property (Safari-correct). */
-    [data-morphing].morph-field,
-    [data-morphing] .morph-field {
-        filter: var(--morph-goo-filter, url(#morph-goo));
-    }
-
-    /* A morph BODY — a warm-cream domed-droplet mass the weld translates/squashes. The fill
-       is the SAME six-layer warm-glass register the whole library reads (NEVER gray — the
-       transparent-plate bug the showcase had is exactly this fill being absent). The
-       transform is written INLINE by the weld (translate + scale); this sheet supplies the
-       resting silhouette + fill + the cast. */
-    .morph-body {
-        position: absolute;
-        border-radius: 999px;
-        /* the warm-cream domed droplet — a soft radial so the goo threshold reads a domed
-           mass, not a flat slab; transmissive (~0.55-0.80 α) so the colorful field reads
-           THROUGH it. Reads the shared --glass-* cohort (warm-cream identity, both modes). */
-        background: radial-gradient(
-            120% 120% at 50% 38%,
-            var(--glass-bg-floating, color-mix(in oklab, var(--card), white 8%)) 0%,
-            var(--glass-bg-resting, var(--card)) 62%,
-            color-mix(in oklab, var(--card), var(--foreground) 6%) 100%
-        );
-        /* a 1px inner catch-light rim (the §3 defined edge) — the crisp metaball rim. */
-        box-shadow: inset 0 1px 0 0 color-mix(in oklab, white 22%, transparent);
-        overflow: clip;
-        transform-origin: center;
-        will-change: transform;
-    }
-
-    /* The welling NECK — the concave-throat filament between the two outermost bodies. Its
-       girth WELLS on `--morph-neck-girth` (peak mid, ~0 at the ends → no ghost throat at
-       rest) and its clip-path carves the structural hourglass waist (the Tier-C floor, both
-       engines, BEFORE the filter fuses it). The weld writes its transform inline (translate
-       + scaleX span + scaleY girth); this sheet supplies the fill + the waist clip + the
-       specular sweep. */
-    .morph-neck {
-        position: absolute;
-        border-radius: 999px;
-        background: radial-gradient(
-            130% 130% at 50% 40%,
-            var(--glass-bg-floating, color-mix(in oklab, var(--card), white 8%)) 0%,
-            var(--glass-bg-resting, var(--card)) 70%,
-            color-mix(in oklab, var(--card), var(--foreground) 6%) 100%
-        );
-        /* THE CONCAVE WAIST — the clip-path hourglass pinches the throat toward the
-           centerline as the gap-fraction k narrows (the structural local-minimum waist read
-           on BOTH engines before the blur). The inset GROWS from the rim as the waist
-           tightens (`1 - --morph-waist`), `round 999px` so the throat is a gel capsule. */
-        --neck-pinch: calc((1 - clamp(0, var(--morph-waist, 1), 1)) * 42%);
-        clip-path: inset(var(--neck-pinch) 0 var(--neck-pinch) 0 round 999px);
-        /* the neck is visible EXACTLY while it wells (the opacity is the girth). */
-        opacity: var(--morph-neck-girth, 0);
-        transform-origin: center;
-        overflow: clip;
-        will-change: transform, clip-path, opacity;
-    }
-
-    /* THE NECK SPECULAR-SWEEP (follow-through) — a moving catch-light bending along the
-       throat as it stretches, reading the SHARED --glass-specular-core cohort (NO fork).
-       The conic angle LAGS the geometry (`--morph-specular-angle` carries the 60° trail the
-       weld writes). plus-lighter additive; a non-supporting engine degrades to a plain warm
-       overlay. */
-    .morph-neck::after {
-        content: "";
-        position: absolute;
-        inset: 0;
-        border-radius: 999px;
-        pointer-events: none;
-        background: conic-gradient(
-            from var(--morph-specular-angle, 0deg) at 50% 50%,
-            transparent 0deg,
-            color-mix(
-                in srgb,
-                var(--glass-specular-core, hsl(40 35% 92%)) 55%,
-                transparent
-            ) 18deg,
-            transparent 60deg,
-            transparent 360deg
-        );
-        opacity: calc(
-            var(--glass-specular-intensity-rest, 0.12) +
-                clamp(0, var(--morph-neck-girth, 0), 1) * 0.18
-        );
-        mix-blend-mode: plus-lighter;
-        will-change: opacity;
-    }
-
-    /* THE 1940s INK CAST (solid drawing — the most ALIVE detail). A `::after` caster on the
-       FIELD that slides OPPOSITE the morph motion and DEEPENS mid-merge, pooling darkest at
-       the thinnest waist (the mass is heaviest where the neck is thinnest). On the REAL
-       `--shadow-cartoon-*` rung (never a hex, never an animated box-shadow — a compositor
-       translate of a soft radial). Gated on `--motion-weight` so PRM zeroes it. */
-    .morph-field::after {
-        content: "";
-        position: absolute;
-        inset: 0;
-        z-index: -1;
-        pointer-events: none;
-        border-radius: inherit;
-        /* the cast plane reads the cartoon shadow rung (the cards.css cohort) — a soft warm
-           ink pool that deepens as the waist thins. No hex; reads --shadow-color. */
-        background: radial-gradient(
-            60% 40% at 50% 60%,
-            color-mix(
-                    in srgb,
-                    var(--shadow-color, var(--foreground))
-                        calc(
-                            (18% + (1 - clamp(0, var(--morph-waist, 1), 1)) * 22%) *
-                                var(--motion-weight, 0)
-                        ),
-                    transparent
-                )
-                0%,
-            transparent 72%
-        );
-        /* slide OPPOSITE the morph — the cast trails the mass. The offset is the neck girth
-           × weight (deepest at mid-merge), on the cross axis. Compositor translate only. */
-        translate: 0
-            calc(var(--morph-neck-girth, 0) * 6px * var(--motion-weight, 0));
-        will-change: transform, background;
-    }
-
-    /* PRM (motion-canon P6 / §L5) — the goo layer drops, the neck never paints, the cast +
-       sweep are static-off; --motion-weight 0 (the :root PRM carve in scheme-motion.css)
-       already zeroes the squash/arc/cast amplitude. The morph still CONFIRMS (the weld's
-       seat() places one resting mass at the endpoint). */
-    @media (prefers-reduced-motion: reduce) {
-        [data-morphing].morph-field,
-        [data-morphing] .morph-field {
-            filter: none;
-        }
-        .morph-neck,
-        .morph-neck::after,
-        .morph-field::after {
-            display: none;
-        }
-    }
-
-    /* @supports floor — no `filter:url()` (the WebKit teardrop floor / a gap engine): the
-       clip-path hourglass waist on .morph-neck is the structural cross-engine FLOOR; the
-       bodies + the welling neck still read as a metaball via the clip-path waist alone (no
-       filter fuse). The morph degrades by SOFTENING, never to a non-morph crossfade. */
-    @supports not (filter: url("#morph-goo")) {
-        [data-morphing].morph-field,
-        [data-morphing] .morph-field {
-            filter: none;
-        }
-    }
-}

package/dist/styles/segmented-tabs.css

@@ -1,447 +0,0 @@
-/* ════════════════════════════════════════════════════════════════════════
-   The standardized SegmentedTabs grammar (BA.W-TABS). ONE indicator engine,
-   TWO materials, ONE orientation axis.
-
-     · PILL    (DEFAULT) — THE GLASS MATERIAL. The track rides `--glass-bg-quiet`
-                 + a hairline edge; the active indicator is the selected-reads-as-
-                 glass plate (`--glass-bg-floating`, the W-REGISTER-IOS tier — a
-                 glass tint FORWARD of the track, NEVER a saturated hue, never an
-                 opaque `bg-card`). It GLIDES + SQUISHES. Absorbs the retired
-                 `segmented` value (one register — the user kept it by name).
-     · UNDERLINE — THE PAPER MATERIAL. NO plate, NO blur, NO track surface — the
-                 2px `--foreground` ink hairline riding the shared `.paper-ink-mark`
-                 register (W-SURFACE-AXIS mints it; CONSUMED here, never re-minted).
-                 The engine drives the hairline's inline position/width only. It
-                 SLIDES (no squish — a hairline does not deform).
-
-   ORIENTATION is axis-derived (horizontal default · vertical). The vertical
-   indicator tracks the BLOCK axis (the R10-2 horizontal-only-utilities slab class
-   is structurally impossible — the engine keys off a computed `dim`). Vertical
-   underline = the leading-edge ink rail (the math-paper `border-l` read).
-
-   Carved out of the SFC `<style scoped>` into a styles/ partial (the drawer.css
-   precedent), `@import`-ed into styles/index.css in cascade order. Every selector
-   is class/attribute-based (no Vue `data-v-*` scope hash), so the rules paint
-   un-scoped — the `.segmented-tabs`-family classes the template emits carry them.
-
-   `--bouncy-track-trim` is the token the track padding, the indicator
-   `inset-block`, AND the `anchor()` offset all read so they cannot drift (the W20
-   magic-number lock). `--stretch` is the JS-written travel-squish scalar (1 at
-   rest); the indicator pairs it reciprocally (stretch X, compress Y →
-   volume-preserving). The glide + squish read ONE clock — `--tab-indicator-duration`
-   (= `--spring-snappy-duration`, the W-GLASS-CAL calibrated snappy settle, ~0.34s)
-   — so the channels cannot desync and the generic-300ms sub-pixel tail is gone.
-   ════════════════════════════════════════════════════════════════════════ */
-
-/* ── The PILL track (the glass material — DEFAULT) ── */
-.segmented-tabs {
-    --bouncy-track-trim: 0.1875rem;
-    /* BC.W-TABS-IOS — the iOS-27 stadium register. The pill reads the role-bearing
-       `--radius-tab` (= --radius-pill = 9999px) — on a short pill box this clamps to
-       half-height → a TRUE stadium end-cap (not the squared `0.3125rem` rounded-rect
-       the HEAD shipped). The TRACK corner is CONCENTRIC with the pill (Apple's
-       `.containerConcentric`): the pill radius + the trim inset, so a stadium pill
-       sits inside a near-stadium track. No breakpoint radius bump — a stadium does
-       not change radius across viewports (clean break, the 640px radius lines gone). */
-    --bouncy-slider-radius: var(--radius-tab);
-    --bouncy-track-radius: calc(var(--bouncy-slider-radius) + var(--bouncy-track-trim));
-    /* The travel-squish axis — 1 at rest; useTabIndicator writes it transiently
-       on selection, the indicator pairs it volume-preserving. */
-    --stretch: 1;
-    position: relative;
-    display: inline-grid;
-    grid-auto-flow: column;
-    grid-auto-columns: 1fr;
-    padding: var(--bouncy-track-trim);
-    border-radius: var(--bouncy-track-radius);
-    /* 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) ── */
-.segmented-tabs--vertical {
-    display: inline-flex;
-    flex-direction: column;
-    grid-auto-flow: unset;
-    grid-auto-columns: unset;
-    align-items: stretch;
-}
-
-@media (min-width: 640px) {
-    .segmented-tabs {
-        /* BC.W-TABS-IOS — only the trim (pad) axis bumps at the wider breakpoint; the
-           radius is the viewport-invariant stadium (--radius-tab), so the corner
-           track-radius re-resolves concentric off the bigger trim by construction. */
-        --bouncy-track-trim: 0.25rem;
-    }
-}
-
-/* ── The shared indicator body (the PILL plate) ── */
-.segmented-indicator {
-    position: absolute;
-    /* 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);
-    /* 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));
-}
-
-/* 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
-   pads on the inline axis instead. */
-.segmented-tabs--vertical .segmented-indicator {
-    inset-block: auto;
-    inset-inline: var(--bouncy-track-trim);
-    /* 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 {
-        /* 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. */
-.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),
-        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;
-    }
-}
-
-@media (min-width: 640px) {
-    .segmented-indicator {
-        /* BC.W-TABS-IOS — only the inset (trim) axis bumps; the radius stays the
-           viewport-invariant stadium (`--bouncy-slider-radius` = --radius-tab). The
-           HEAD `border-radius: 0.375rem` px-literal that squared the pill is GONE. */
-        inset-block: 0.25rem;
-    }
-    .segmented-tabs--vertical .segmented-indicator {
-        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);
-        }
-    }
-}
-
-/* ── The tab buttons ── */
-.segmented-tab {
-    position: relative;
-    z-index: 10;
-    border: none;
-    background: none;
-    font-weight: 500;
-    cursor: pointer;
-    white-space: nowrap;
-    padding: 0.25rem 0.625rem;
-    border-radius: 0.3125rem;
-    font: inherit;
-    font-size: 0.8125rem;
-    color: var(--muted-foreground);
-    /* 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). */
-    scale: 1;
-    translate: 0;
-}
-
-@media (min-width: 640px) {
-    .segmented-tab {
-        padding: 0.3125rem 0.75rem;
-        font-size: 0.875rem;
-    }
-}
-
-.segmented-tab[aria-pressed="true"],
-.segmented-tab[aria-selected="true"] {
-    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;
-    pointer-events: none;
-    filter: blur(0.5px);
-}
-
-/* ── Underline variant ── (THE PAPER MATERIAL — the panel-nav `role=tablist` strip)
-   NO plate, NO blur, NO track surface — only the ink hairline paints. */
-.segmented-tabs--underline {
-    display: flex;
-    grid-auto-flow: unset;
-    grid-auto-columns: unset;
-    gap: 0.25rem;
-    padding: 0;
-    background: none;
-    -webkit-backdrop-filter: none;
-
-    backdrop-filter: none;
-    -webkit-backdrop-filter: none;
-    box-shadow: none;
-    border-radius: 0;
-    /* BA.W-SURFACE-AXIS scope 8 — the underline indicator COMPOSES the shared
-       `.paper-ink-mark` PAPER ink-hairline register (the 2px --foreground ink mark
-       on a paper surface — no plate, no blur, no glass). The register tokens are
-       declared here on the host; the `::before` pseudo reads them. ≥2 consumers
-       with the math-paper section rail (a HORIZONTAL underline here, a VERTICAL
-       left-edge rail there — the SAME mark register, parameterized weight/color).
-       The register itself lives in glass/surface-axis.css (CONSUMED, never
-       re-minted — a shape gap triumvirates at the minting wave). */
-    --paper-ink-mark-weight: 2px;
-    --paper-ink-mark-color: var(--foreground);
-}
-
-/* Vertical underline = the leading-edge ink rail (the math-paper `border-l` read).
-   The hairline runs the block extent of the active tab on its inline-start edge. */
-.segmented-tabs--underline.segmented-tabs--vertical {
-    flex-direction: column;
-    align-items: stretch;
-}
-
-/* The active tab is the anchor the underline rule tethers to. */
-.segmented-tabs--underline .segmented-tab[aria-selected="true"] {
-    anchor-name: --gl-tab-active;
-}
-
-/* The underline indicator pseudo, position-anchored to the active tab; the
-   browser interpolates `inset` between anchors on selection on the ONE calibrated
-   clock, and the `scale` reads the same `--stretch` squish the slider does (one
-   indicator grammar). */
-.segmented-tabs--underline::before {
-    content: "";
-    position: absolute;
-    position-anchor: --gl-tab-active;
-    /* BA.W-SURFACE-AXIS scope 8 — the 2px ink mark reads the shared
-       `.paper-ink-mark` register (weight + --foreground ink) the host declares. */
-    inset-block-start: calc(anchor(bottom) - var(--paper-ink-mark-weight, 2px));
-    inset-inline-start: anchor(left);
-    inset-inline-end: anchor(right);
-    block-size: var(--paper-ink-mark-weight, 2px);
-    background: var(--paper-ink-mark-color, var(--foreground));
-    border-radius: var(--radius-sm);
-    transform-origin: center;
-    scale: var(--stretch) 1;
-}
-
-/* Vertical underline pseudo — the ink mark is a VERTICAL leading-edge rail (the
-   `border-l` read): a 2px-wide column on the active tab's inline-start edge,
-   running its full block extent. */
-.segmented-tabs--underline.segmented-tabs--vertical::before {
-    inset-block-start: anchor(top);
-    inset-block-end: anchor(bottom);
-    inset-inline-start: calc(anchor(left) - var(--paper-ink-mark-weight, 2px));
-    inset-inline-end: auto;
-    block-size: auto;
-    inline-size: var(--paper-ink-mark-weight, 2px);
-    scale: 1 var(--stretch);
-}
-
-@media (prefers-reduced-motion: no-preference) {
-    .segmented-tabs--underline::before {
-        /* control register — the glide + the squish on the ONE calibrated clock. */
-        transition:
-            inset var(--tab-indicator-duration) var(--spring-snappy),
-            scale var(--tab-indicator-duration) var(--spring-snappy);
-    }
-}
-
-/* Fallback — static underline when anchor positioning is absent. */
-@supports not (position-anchor: --x) {
-    .segmented-tabs--underline::before {
-        display: none;
-    }
-    .segmented-tabs--underline .segmented-tab[aria-selected="true"] {
-        border-bottom: var(--paper-ink-mark-weight, 2px) solid var(--foreground);
-    }
-    .segmented-tabs--underline.segmented-tabs--vertical .segmented-tab[aria-selected="true"] {
-        border-bottom: none;
-        border-inline-start: var(--paper-ink-mark-weight, 2px) solid var(--foreground);
-    }
-}
-
-.segmented-tabs--underline .segmented-tab {
-    padding: 0.375rem 0.75rem;
-    /* BC.W-UNDERLINE-TUNE — the audacious editorial label voice. The underline is
-       the PAPER/editorial material (BA.W-TABS), so its labels carry the √φ display
-       register, NOT the small 0.8125rem control size the PILL labels keep (the
-       two-voice fence — the pill is a compact control, the underline is an editorial
-       nav head). `--type-subheading` (1.272rem / 20.4px, the √φ rung) + the Apple
-       display tracking `--type-tracking-display` (−1.5%) are the BB.W-DISPLAY-TRACKING
-       ladder rungs CONSUMED here (never re-minted), the same pairing the semantic
-       display rungs ride. A confident editorial strip, not a default Tailwind row. */
-    font-size: var(--type-subheading);
-    letter-spacing: var(--type-tracking-display);
-    border-radius: 0.25rem;
-    /* The tab-text colour cross-fade rides the fast generic clock (the §6 doctrine
-       — a colour shift is a bezier ease, never a spring), matching the pill tab
-       buttons. The INDICATOR glide is the only channel on the calibrated spring
-       clock. */
-    transition: color var(--duration-fast) ease;
-}
-
-.segmented-tabs--underline.segmented-tabs--vertical .segmented-tab {
-    text-align: start;
-}
-
-.segmented-tabs--underline .segmented-tab:hover {
-    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;
-    /* BD.W-TAB-IOS-CAPSULE C7 — the grabbed-state catch-light COMPOSES the SHARED
-       specular-lift step declared ONCE in glass/glass-capsule.css (the
-       `.glass-capsule-hover:hover, .glass-drag-lift { --glass-specular }` group), NOT
-       a parallel `--glass-specular` fork. This block carries only the grabbing-distinct
-       bits (the grab cursor + the `will-change` hint). */
-}