@mkbabb/glass-ui 3.12.0 → 4.0.0

package/src/styles/utilities.css

@@ -1,1318 +1,19 @@
-/* Shared utility classes */
-
-/* ── Popover/dropdown shared animation ──
-   `@utility` form (V.W3.T8 / A5 §5.9 standardisation): data-state animation
-   pair for popover-class containers (Popover, DropdownMenu, ContextMenu,
-   Tooltip, HoverCard, Select). Composed alongside `.slide-in-from-side`
-   for direction-keyed entries. */
-@utility popover-animate {
-    @apply data-[state=open]:animate-in data-[state=closed]:animate-out
-           data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0
-           data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95;
-
-    /* ── 3.11 §2i-bis — the popover rides the SPRING grammar, not the generic
-       tw-animate tween. Per the tokens.css EASING DOCTRINE: enter = spring
-       (`--spring-snappy`, the crisp floating-surface entry), exit = bezier
-       (`--ease-out`, an exit must never overshoot past gone). The four custom
-       properties are the consumer seam — override per host, never fork the
-       utility. PRM snaps both directions to a single frame. */
-    &[data-state="open"] {
-        animation-duration: var(--popover-enter-duration, 200ms);
-        animation-timing-function: var(--popover-enter-ease, var(--spring-snappy));
-    }
-    &[data-state="closed"] {
-        animation-duration: var(--popover-exit-duration, 100ms);
-        animation-timing-function: var(--popover-exit-ease, var(--ease-out));
-    }
-    @media (prefers-reduced-motion: reduce) {
-        &[data-state="open"],
-        &[data-state="closed"] {
-            animation-duration: 1ms;
-        }
-    }
-}
-
-/* ── Slide-in entry by side data-attr ──
-   `@utility` form (V.W3.T8). Side-keyed slide entry that pairs with
-   reka-ui's `data-side` (`top|right|bottom|left`). The animation
-   direction inverts each side so panels enter from outside the
-   anchor's edge. */
-@utility slide-in-from-side {
-    @apply data-[side=bottom]:slide-in-from-top-2
-           data-[side=left]:slide-in-from-right-2
-           data-[side=right]:slide-in-from-left-2
-           data-[side=top]:slide-in-from-bottom-2;
-}
-
-@layer components {
-    /* ── Section description (V.W3.T7) ──────────────────────────────
-       Canonical recipe for the `<Section>` primitive's description
-       paragraph. Composes the body type + muted-foreground color in
-       one declaration so consumers don't fight twMerge's
-       typography-class collapse. */
-    .section-description {
-        font-size: var(--type-body);
-        color: var(--muted-foreground);
-        line-height: 1.5;
-        text-wrap: pretty; /* AQ.W3 §W3.3 — prose-register orphan/river fix */
-    }
-
-    /* ── Labeled-field label (V.W3.T5 / A5 §5.5) ────────────────────
-       Canonical recipe for `<LabeledField>`'s tooltip-wrapped label
-       layer. Four sibling wrappers (LabeledInput, LabeledSelect,
-       LabeledSlider, LabeledSwitch) used to repeat this literal across
-       their templates; promoting it to a utility lets the parent SFC
-       own one canonical declaration. */
-    .labeled-field-label {
-        font-family: var(--font-display);
-        font-size: var(--type-body);
-        /* AQ.W4 §W3.1c — the label color reads the group-state variable so the
-           `:has(:user-invalid)` rule below reddens it (one source of the
-           override value, shared with the `.has-error` fallback class). */
-        color: var(--field-label-color, var(--muted-foreground));
-        cursor: help;
-    }
-
-    /* AQ.W4 §W3.1c — LabeledField group error highlight. When any descendant
-       control is `:user-invalid`, the whole field group marks (the label
-       reddens via `--field-label-color`, the error region reveals). Scoped to
-       `.labeled-field` — never `body`, never a bare element. `:has()` Baseline
-       Widely; the `.has-error` / `.has-valid` fallback classes (toggled by the
-       `useUserInvalidAria` fallback path) are the SOLE degradation for engines
-       without `:has()`/`:user-invalid` (not a live+dead alias). */
-    .labeled-field {
-        --field-label-color: var(--muted-foreground);
-    }
-    .labeled-field:has(:user-invalid),
-    .labeled-field.has-error {
-        --field-label-color: var(--destructive);
-    }
-
-    /* The error region: hidden at rest, revealed once a descendant is
-       `:user-invalid` (or the `.has-error` fallback class is set). Non-color
-       reinforcement for the validity tint — the error TEXT is the primary
-       cue, the border/bg shift the supplement (forms guide: never color
-       alone). */
-    .labeled-field-error {
-        display: none;
-        font-size: var(--type-small);
-        color: var(--destructive);
-        margin-block-start: 0.25rem;
-    }
-    .labeled-field:has(:user-invalid) .labeled-field-error,
-    .labeled-field.has-error .labeled-field-error {
-        display: block;
-    }
-    /* Hide the error text once the field reads valid (the user corrected it). */
-    .labeled-field:has(:user-valid) .labeled-field-error,
-    .labeled-field.has-valid .labeled-field-error {
-        display: none;
-    }
-
-    /* ── Popover-content recipe (V.W3.T3 / A5 §3.2) ─────────────────
-       Canonical recipe for floating-tier portal containers
-       (PopoverContent, DropdownMenuContent, SelectContent, etc.).
-       Covers radius + outline + popover-foreground; consumers compose
-       this with `.glass-floating` (bg + blur + border + shadow), with
-       `.popover-animate` (data-state animation), and with the per-host
-       z-rung. The floating-tier shadow comes from
-       `--glass-shadow-floating` via `.glass-floating`, replacing the
-       `shadow-md`/`shadow-lg` literals that bypassed the canonical
-       cascade. */
-    .popover-content {
-        border-radius: var(--radius-panel);
-        color: var(--popover-foreground);
-        outline: none;
-    }
-
-    /* ── Scrollbar ── */
-    .scrollbar-hidden {
-        scrollbar-width: none;
-    }
-    .scrollbar-hidden::-webkit-scrollbar {
-        display: none;
-    }
-
-    /* AQ.W3 §W3.4 — tokenized thin scrollbar. Standard `scrollbar-width` +
-       `scrollbar-color` (Baseline Widely, Chromium 121+) is the primary path,
-       reading `--scrollbar-{thumb,track}` (auto-dark via `--muted-foreground`).
-       The legacy `::-webkit-scrollbar` family is the SOLE fallback for older
-       WebKit/Blink, gated on `@supports not (scrollbar-color: auto)` so modern
-       engines never paint it — not a live+dead alias. */
-    .scrollbar-thin {
-        scrollbar-width: thin;
-        scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
-    }
-    @supports not (scrollbar-color: auto) {
-        .scrollbar-thin::-webkit-scrollbar {
-            width: 8px;
-            height: 8px;
-        }
-        .scrollbar-thin::-webkit-scrollbar-track {
-            background: var(--scrollbar-track);
-        }
-        .scrollbar-thin::-webkit-scrollbar-thumb {
-            background: var(--scrollbar-thumb);
-            border-radius: var(--radius-pill);
-        }
-    }
-
-    /* ── Focus ring — auto-activates on :focus-visible ── */
-    .focus-ring:focus-visible {
-        outline: none;
-        border-radius: var(--radius-pill);
-        box-shadow: var(--focus-ring-shadow);
-    }
-
-    /* D6.b — `focus-ring-gold`: the opt-in gilded focus ring. Overrides ONLY
-       `--focus-ring-color` (tokens.css) → the shared `--focus-ring-shadow`
-       re-resolves to gold for THIS element; the default ring elsewhere is
-       unchanged. Gold-as-state is the "you are here / this is live" mark — a
-       transient highlight (appears on focus-visible, gone on blur), so gold is
-       lawful here where a permanent gold furniture would not be. Mirror of the
-       `focus-ring` custom-property pattern: a consumer composes
-       `class="focus-ring focus-ring-gold"` to gild the ring on the active rung;
-       the resting mark keeps its structural color (the four-voice law: red is
-       identity, gold is distinction). */
-    .focus-ring-gold {
-        --focus-ring-color: var(--gold);
-    }
-
-    /* ── Hairline-accent — 0.5px catch-light + under-shadow pair ──
-       Composes the canonical `--border-hairline` token (tokens.css §
-       Glass-decorative). Adopt at any surface that wants the canonical
-       2-stop hairline (dock surfaces, instrument-chassis). Auto-mirrors
-       in dark via the .dark token override. */
-    .hairline-accent {
-        box-shadow: var(--border-hairline);
-    }
-
-    /* ── Interactive item (hover bg + focus ring + active scale) ── */
-    .interactive-item {
-        /* AQ.W3 §W3.2 identity base */
-        scale: 1;
-        border-radius: var(--radius-lg);
-        user-select: none;
-        transition:
-            background-color var(--duration-fast) var(--ease-standard),
-            color var(--duration-fast) var(--ease-standard),
-            border-color var(--duration-fast) var(--ease-standard),
-            box-shadow var(--duration-fast) var(--ease-standard),
-            scale var(--duration-fast) var(--ease-standard);
-    }
-    .interactive-item:hover {
-        background-color: color-mix(in srgb, var(--accent) 50%, transparent);
-    }
-    .interactive-item:focus-visible {
-        outline: none;
-        box-shadow: var(--focus-ring-shadow);
-    }
-    .interactive-item:active {
-        /* AW.W31.a — fold the residual literal press scale onto the canonical
-           `--scale-press*` cohort (the prior `0.98` was the sole per-atom press
-           literal surviving the W2/W3/W25 sweeps). `--scale-press-sm` (0.97) is
-           the soft press rung the button + slider recipes consume — ONE press
-           vocabulary, no per-atom literal. The 0.98→0.97 delta is sub-perceptual. */
-        scale: var(--scale-press-sm);
-    }
-    .interactive-item:disabled,
-    .interactive-item[data-disabled] {
-        pointer-events: none;
-        opacity: var(--opacity-disabled);
-        cursor: not-allowed;
-    }
-
-    /* ── Tap-squish — universal press-state choreography ──
-       AL-W10 SLIM (X6 §M-1 + Y7 §3 + DESIGN.md §L3). I compose this
-       class onto every interactive surface that wants the iOS tap-
-       squish idiom; the press scales to `--scale-press` (0.96, the
-       canonical iOS `.regular` control rung). I keep this as a single
-       canonical rung — NOT a 3-rung ladder. The one outlier I leave
-       alone is the button `0.97` (`--scale-press-btn`), which consumes
-       its own slightly-softer token directly. The dock control now
-       tracks the canonical `--scale-press` (0.96) too (AT.W7-dock-b
-       press canon — the prior deeper `0.92` was retired to ONE source).
-
-       AX.W52 §6 doctrine — the `scale` register is reconciled onto
-       `--spring-smooth` (was `--spring-snappy`), the ONE button/interactive
-       scale register the §6 easing doctrine records and the gate asserts
-       across `.btn-pill`/`.tap-squish`/`.glass-btn`/`btn-interactive`. At
-       ζ=0.86 `--spring-smooth` settles a press crisply with a sub-perceptual
-       (~0.5%) peak — no visible bounce — so press still reads alive while
-       hover reads as a smooth glide on the SAME spring.
-
-       The transition lists the SURFACE legs (bg/border/box-shadow/color/
-       opacity) on the bezier `--ease-standard` alongside the spring `scale`
-       leg — the SAME coherent set `.btn-pill` carries. This is load-bearing:
-       `.tap-squish` and `.btn-pill` are co-composed on the button base and
-       this `transition` shorthand would otherwise CLOBBER `.btn-pill`'s
-       surface legs down to a scale-only animation (the cascade bug that left
-       every button transitioning ONLY `scale` — the live-readback RED). With
-       both classes carrying the full set, whichever wins the surface cross-
-       fade survives. On a non-button press surface the extra legs are inert
-       unless that prop changes, in which case a smooth cross-fade is the
-       desired interactive read anyway.
-
-       Under PRM I retire the press transform entirely and lean on the
-       consumer's own hover/active bg-tint cascade to acknowledge the
-       press. */
-    .tap-squish {
-        /* AQ.W3 §W3.2 identity base */
-        scale: 1;
-        transition:
-            background-color var(--duration-fast) var(--ease-standard),
-            border-color var(--duration-fast) var(--ease-standard),
-            box-shadow var(--duration-fast) var(--ease-standard),
-            color var(--duration-fast) var(--ease-standard),
-            opacity var(--duration-fast) var(--ease-standard),
-            scale var(--duration-fast) var(--spring-smooth);
-        transform-origin: center center;
-    }
-    .tap-squish:active {
-        scale: var(--scale-press);
-    }
-    @media (prefers-reduced-motion: reduce) {
-        .tap-squish:active {
-            /* Reset to the longhand identity (not `transform: none`) so the
-               press scale is neutralized under PRM. */
-            scale: 1;
-        }
-    }
-
-    /* ── Status dot indicator ── */
-    .status-dot {
-        display: inline-block;
-        width: 0.5rem;
-        height: 0.5rem;
-        border-radius: var(--radius-pill);
-        flex-shrink: 0;
-        transition:
-            color var(--duration-fast) var(--ease-standard),
-            background var(--duration-fast) var(--ease-standard),
-            box-shadow var(--duration-fast) var(--ease-standard);
-    }
-    /* ── Depth text (layered offset stamp) ──
-       AW.W26 — composes the `--text-shadow-depth` @theme identity token (the
-       hard offset stack + soft ambient tail) instead of a hand-rolled multi-stop
-       literal. The token holds the stack inside the `@theme` defs (gate 4) and
-       re-tints under `.dark` via `--shadow`/`--shadow-color` BY CONSTRUCTION. */
-    .depth-text {
-        --depth-color-primary: var(--primary);
-
-        color: var(--depth-color-primary);
-        text-shadow: var(--text-shadow-depth);
-    }
-
-    /* ── 3D preserve ── */
-    .preserve-3d {
-        transform-style: preserve-3d;
-    }
-
-    /* ── iOS input font-size fix (prevent auto-zoom) ── */
-    .ios input,
-    .ios select,
-    .ios textarea,
-    .ios [contenteditable] {
-        font-size: max(1rem, 1em);
-    }
-
-    /* ── Scroll fade masks ──
-       Single-source `mask-image` (AV.W16 TW7): the `-webkit-` companion is
-       dropped — Tailwind v4's Lightning CSS build pipeline auto-prefixes per
-       the browserslist targets, mirroring the glass ladder's single-source
-       `backdrop-filter` (glass.css). NOTE: this is the consistency cut; it
-       does NOT conflict with W15's `@supports`-gated older-Safari mask
-       fallback (that fallback is the distinct case where the companion is
-       genuinely needed and W15 gates it). */
-    .scroll-fade-mask {
-        mask-image: linear-gradient(to right, transparent, black var(--mask-fade-width), black calc(100% - var(--mask-fade-width)), transparent);
-    }
-
-    .scroll-fade-top {
-        mask-image: linear-gradient(to bottom, transparent, black var(--mask-fade-width));
-    }
-
-    .scroll-fade-bottom {
-        mask-image: linear-gradient(to bottom, black calc(100% - var(--mask-fade-width)), transparent);
-    }
-
-    .scroll-fade-y {
-        mask-image: linear-gradient(to bottom, transparent, black var(--mask-fade-width), black calc(100% - var(--mask-fade-width)), transparent);
-    }
-
-    /* ── Deferred section — render-skip an offscreen subtree (AQ.W3 §5) ──────
-       `content-visibility: auto` skips layout/paint/style of an offscreen
-       subtree — the INP-under-load lever (fourier γ, muster, speedtest, words).
-       `contain-intrinsic-size: auto <estimate>` is measurement-safe: the `auto`
-       prefix makes the engine REMEMBER the last-rendered size (no scroll-jump on
-       re-entry); plain `<estimate>` freezes the section + thrashes the scrollbar
-       — the trap this closes. Estimate is token-driven (`--deferred-section-
-       size`, default 30rem). `.deferred-section--cached` →
-       `content-visibility: hidden` (always skipped, state CACHED — cheaper to
-       re-show than `display:none`). Baseline Widely; unsupporting engines render
-       normally. JS HOOK: the engine fires `contentvisibilityautostatechange`
-       { skipped } at the render-skip boundary — pair with `useRAFLoop`
-       pause/resume: `el.addEventListener('contentvisibilityautostatechange',
-       e => e.skipped ? loop.pause() : loop.resume())`. */
-    .deferred-section {
-        content-visibility: auto;
-        contain-intrinsic-size: auto var(--deferred-section-size, 30rem);
-    }
-    .deferred-section--cached {
-        content-visibility: hidden;
-        contain-intrinsic-size: auto var(--deferred-section-size, 30rem);
-    }
-
-    /* ── Card scroll-timeline host (AI.W1-α) ───────────────────────────────
-       Canonical scroll-overflow host that emits the `--card-scroll` named
-       scroll-timeline consumed by `<CardHeader shrink>`. Apply to the
-       scroll-overflow ancestor (typically the `<Card>` itself OR a wrapper
-       inside it that carries `overflow-y: auto`).
-
-       `contain: layout style paint` isolates the named timeline so child
-       animations respond to THIS host's scroll only — not to portal-
-       triggered layout shifts in ancestor containers (the load-bearing
-       isolation guarantee the value.js `PaneHeader.vue:18-29` comment
-       called out and the AI.W1 spec §1.2 ratified as canon).
-
-       Disambiguated from `.scroll-fade-*` (mask-image fade gradient at
-       the container's leading/trailing edge) — `.card-scroll-host` does
-       NOT paint any visual; it only emits the timeline. */
-    .card-scroll-host {
-        contain: layout style paint;
-        scroll-timeline: --card-scroll block;
-    }
-
-    /* ── Shimmer text effects ──
-       The text-fill + background-clip composition is load-bearing visual
-       (the gold gradient itself); only the `animation:` line is wrapped in
-       the PRM no-preference bracket so PRM users see the static gradient
-       without the slide animation. */
-    .gold-shimmer {
-        background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold-light), var(--color-gold), var(--color-gold-light), var(--color-gold-dark));
-        background-size: 250% 100%;
-        background-clip: text;
-        -webkit-background-clip: text;
-        color: transparent;
-    }
-    @media (prefers-reduced-motion: no-preference) {
-        .gold-shimmer {
-            animation: gold-shimmer-slide var(--duration-shimmer) linear infinite;
-        }
-    }
-
-    /* E7c — `.text-gilt`: the brand-polish ONE-SHOT seal, a FULL to-AND-fro round
-       trip. The gold gradient sweeps across ONCE (the press), catches the light,
-       and RECEDES to the figure's own resting ink — a pressed seal, not a marquee.
-
-       The defect this corrects: `.text-gilt` formerly set `color: transparent`
-       PERMANENTLY and ran the infinite `gold-shimmer-slide` `1 forwards`, so it
-       held its gilt terminal frame forever; the consumer then RIPPED the class off
-       on a `setTimeout`. But the gold gradient lives in `background-image`, which no
-       transition covers — so the gilt SNAPPED off in one frame (the broken to-and-fro
-       the user named). The recede was never authored at the library; it lived as a
-       JS class-yank in the consumer.
-
-       The fix is library-rooted: the RESTING state is the figure's OWN ink — `.text-gilt`
-       does NOT permanently null the color; only the `gold-shimmer-pulse` animation
-       drives `color`/`-webkit-text-fill-color` transparent (revealing the gradient
-       through `background-clip:text`) and BACK, over its own `--duration-seal`
-       (≈1.5s, NOT the 5s loop token), `ease-in-out`. The final keyframe IS rest, so
-       NO `forwards` and NO class-yank: the animation owns the whole envelope and the
-       gradient never snaps in a single frame. PRM users see no pass — the figure
-       just keeps its resting ink (no gilt sweep). */
-    .text-gilt {
-        background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold-light), var(--color-gold), var(--color-gold-light), var(--color-gold-dark));
-        background-size: 250% 100%;
-        background-clip: text;
-        -webkit-background-clip: text;
-        /* resting = the figure's own ink (currentColor); the animation, not this
-           rule, nulls it to reveal the gradient — so there is nothing to yank. */
-    }
-    @media (prefers-reduced-motion: no-preference) {
-        .text-gilt {
-            animation: gold-shimmer-pulse var(--duration-seal) var(--ease-standard) 1;
-        }
-    }
-
-    /* ── Keyboard key ── */
-    .kbd {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        min-height: 1.5rem;
-        min-width: 1.5rem;
-        padding: 0 0.375rem;
-        font-family: var(--font-mono);
-        font-size: var(--type-micro);
-        background: var(--muted);
-        border: 1px solid var(--border);
-        border-radius: var(--radius-sm);
-        box-shadow: 0 1px 0 1px color-mix(in srgb, var(--border) 30%, transparent);
-        line-height: 1;
-    }
-
-    /* ── Metric badge pill — compact glass label for numeric telemetry ── */
-    .metric-badge {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-        /* AQ.W3 §W3.2 identity base */
-        scale: 1;
-        gap: var(--metric-badge-gap, 0.125rem);
-        max-width: var(--metric-badge-max-width, 8rem);
-        min-height: var(--metric-badge-min-height, 1.5rem);
-        padding:
-            var(--metric-badge-padding-block, 0.125rem)
-            var(--metric-badge-padding-inline, 0.5rem);
-        overflow: hidden;
-        flex-shrink: 0;
-        line-height: 1;
-        /* Canonical 5-tier glass surface: the `quiet` rung paints the badge
-           plate at the `--glass-bg-quiet` α (0.50) with `--glass-blur-quiet`.
-           Reduced-transparency / no-backdrop-filter fallbacks propagate
-           through the lazy custom-property resolution that `glass.css`
-           sets up — the badge no longer bypasses the canon.
-           (Per audit U.W0.C-c §7.2.) */
-        border: 1px solid var(--metric-badge-border, var(--glass-border-quiet));
-        border-radius: var(--metric-badge-radius, var(--radius-badge, var(--radius-pill)));
-        background: var(--metric-badge-bg, var(--glass-bg-quiet));
-        backdrop-filter: var(--metric-badge-blur, var(--glass-blur-quiet));
-        box-shadow: var(--metric-badge-shadow, 0 1px 6px color-mix(in srgb, var(--shadow-color) 8%, transparent), var(--glass-highlight));
-        transition:
-            background var(--duration-fast) var(--ease-standard),
-            border-color var(--duration-fast) var(--ease-standard),
-            box-shadow var(--duration-fast) var(--ease-standard),
-            scale var(--duration-fast) var(--ease-standard);
-    }
-
-    .metric-badge > span {
-        line-height: 1;
-        /* AW.W26 — `wrap-anywhere` (overflow-wrap: anywhere) on the value slot:
-           a long metric value breaks WITHIN the badge rather than being clipped
-           by the host `overflow: hidden`. v4.1 `wrap-anywhere` / mwg css §7.
-           Scoped to the value span, NOT a universal selector (mwg perf caveat). */
-        overflow-wrap: anywhere;
-    }
-
-    .metric-badge:hover {
-        /* Hover lifts to the `resting` rung — one step up the canonical
-           ladder (audit U.W0.C-c §7.2). */
-        border-color: var(--metric-badge-hover-border, var(--glass-border-resting));
-        background: var(--metric-badge-hover-bg, var(--glass-bg-resting));
-        box-shadow: var(--metric-badge-hover-shadow, 0 2px 10px color-mix(in srgb, var(--shadow-color) 12%, transparent), var(--glass-highlight));
-        scale: var(--metric-badge-hover-scale, 1.02);
-    }
-
-    .metric-badge:active {
-        scale: var(--metric-badge-press-scale, 0.96);
-    }
-
-    .metric-badge:focus-visible {
-        outline: none;
-        box-shadow: var(--focus-ring-shadow);
-    }
-
-    /* Phase-finish catch-light — the quieter cousin of --glass-specular.
-       Speedtest toggles `data-just-resolved="true"` on a metric pill once
-       its phase completes; the badge briefly carries a 1px catch-light
-       streak at the top edge. Reads as the pill catching club lighting at
-       the moment its result resolves. */
-    .metric-badge[data-just-resolved="true"] {
-        box-shadow:
-            inset 0 1px 0 0 rgb(255 255 255 / 0.18),
-            var(--metric-badge-shadow,
-                0 1px 6px color-mix(in srgb, var(--shadow-color) 8%, transparent),
-                var(--glass-highlight));
-    }
-
-    /* ── Label-bearing variants ───────────────────────────────────────────
-       When the badge carries a `labelPosition`, the prose-style annotation
-       slot precedes the amount. Inline keeps the row baseline-aligned;
-       stacked breaks to a column with items flush-left. The label slot
-       carries its own tracked uppercase rules; the badge's max-width
-       relaxes so the wider register fits. */
-    .metric-badge--label-inline {
-        flex-direction: row;
-        align-items: baseline;
-        justify-content: flex-start;
-        gap: var(--metric-badge-label-gap, 0.375rem);
-        max-width: var(--metric-badge-label-max-width, none);
-        text-align: left;
-    }
-
-    .metric-badge--label-stacked {
-        flex-direction: column;
-        align-items: flex-start;
-        justify-content: center;
-        gap: var(--metric-badge-label-gap-stacked, 0.0625rem);
-        max-width: var(--metric-badge-label-max-width, none);
-        text-align: left;
-        min-height: var(--metric-badge-min-height-stacked, 2.625rem);
-        padding-block: var(--metric-badge-padding-block-stacked, 0.375rem);
-    }
-
-    /* T.W2.T2 — stacked variant pairs amount + unit on a single row (row 2)
-       below the label (row 1). The `.metric-badge__row` wrapper baseline-
-       aligns the value and unit so the quantity reads as one phrase, not as
-       three siblings split across three rows (the pre-T behaviour the
-       audit B-spec §2.1 flagged). */
-    .metric-badge--label-stacked .metric-badge__row {
-        display: inline-flex;
-        align-items: baseline;
-        gap: var(--metric-badge-row-gap-stacked, 0.25rem);
-    }
-
-    /* T.W2.T3 — MetricPill density modifiers. The pill is a thin composition
-       over MetricBadge with `labelPosition="stacked"` defaults; the density
-       knob adjusts block padding + horizontal padding so the pill reads at
-       the right register for its dock host. `spacious` is the default
-       (chassis-strip rhythm), `comfortable` keeps the tighter compact
-       register for densely-packed dock clusters. The selectors compose with
-       `.metric-badge--label-stacked` so the inline ladder remains untouched
-       — these are stacked-only refinements. */
-    .metric-pill[data-density="spacious"].metric-badge--label-stacked {
-        --metric-badge-padding-block-stacked: 0.5rem;
-        --metric-badge-padding-inline: 0.75rem;
-    }
-
-    .metric-pill[data-density="comfortable"].metric-badge--label-stacked {
-        --metric-badge-padding-block-stacked: 0.25rem;
-        --metric-badge-padding-inline: 0.5rem;
-    }
-
-    /* AS.W4 — @container style(--density) companion. A pill nested under a host
-       that sets `--density: comfortable | spacious` on a wrapping element picks
-       up the matching padding register with no `data-density` markup contract;
-       the attribute rules above stay the SOLE fallback (inv 47).
-       The inner `.metric-pill.metric-badge--label-stacked` selector (0,2,0) sits
-       just BELOW the `.metric-pill[data-density]…` attribute rules (0,3,0) — so a
-       pill carrying BOTH the attribute and a `--density` ancestor lands on the
-       attribute rule (same tokens, identical paint), while a pill with only the
-       ancestor token still resolves the right register (no competing rule sets
-       these padding custom props at higher weight in that case).
-
-       No `@supports` wrapper: unlike the sibling scroll-state recipe (which
-       probes `@supports (container-type: scroll-state)` — a probeable
-       container-type VALUE), style queries introduce no new `container-type`
-       value (every element is a style container by default), so there is no
-       clean declaration test for style-query support. This relies on
-       `@container style()`'s own graceful degradation: an engine without
-       style-query support parses the unknown at-rule as invalid, drops the
-       block, and keeps the `[data-density]` attribute base. (The earlier
-       `@supports (container-type: inline-size)` wrapper was wrong — it probed
-       SIZE-query support, a distinct feature with a distinct support timeline.) */
-    @container style(--density: spacious) {
-        .metric-pill.metric-badge--label-stacked {
-            --metric-badge-padding-block-stacked: 0.5rem;
-            --metric-badge-padding-inline: 0.75rem;
-        }
-    }
-    @container style(--density: comfortable) {
-        .metric-pill.metric-badge--label-stacked {
-            --metric-badge-padding-block-stacked: 0.25rem;
-            --metric-badge-padding-inline: 0.5rem;
-        }
-    }
-
-    .metric-badge__label {
-        letter-spacing: 0.18em;
-        line-height: 1;
-    }
-
-    /* Dual-slot default visibility (R2-spec):
-       The library renders both `--full` and `--abbr` siblings whenever both
-       props are passed. Default identity is the full label; the abbreviation
-       sits hidden until consumer container-query CSS flips it. The adjacent-
-       sibling selector preserves single-slot back-compat: when a consumer
-       passes only `abbreviation` (no `--full` sibling rendered), the abbr
-       reads at default visibility. */
-    .metric-badge__label--full + .metric-badge__label--abbr {
-        display: none;
-    }
-
-    /* sm-tier label tracking — tighter than the md/lg/xl 0.18em rung so the
-       compact register reads as a tighter annotation against the smaller
-       glyph rise. R2-spec D-Rec-2 (audit-D). */
-    .metric-badge[data-size="sm"] .metric-badge__label {
-        letter-spacing: 0.1em;
-    }
-
-    /* D6.b — `MetricBadge variant="record"`: the gilded record/peak value.
-       The highest-leverage gold moment on a DATA atlas — a tiny gilt pill on the
-       single record / peak / featured figure (the all-time-high, the top
-       district). Gold marks the SUPERLATIVE, exactly one per view: a gilt pill on
-       a single figure reads as a medal — civic and earned, not decorative.
-
-       The recipe composes ON the base `.metric-badge` glass plate (it is a
-       MODIFIER, never a replacement): a 1px `--gold-rim` tooled edge + `--gold-ink`
-       text + a FAINT gold wash (≤8% alpha — never an opaque gold fill, which would
-       read as a fourth DATA category and break one-color-one-meaning). The wash
-       sits over the badge's own `--glass-bg-quiet` plate via `color-mix`, so the
-       cream glass still reads through; the gold is the leaf, not the area.
-
-       `--gold-ink` clears cream-law ② (APCA |Lc| ≥ 45) on `--card` in both arms
-       (proof:gold-ink-contrast), and the faint wash only lightens the plate it
-       sits on, so the ink stays legible. */
-    .metric-badge--record {
-        border-color: var(--gold-rim);
-        background:
-            linear-gradient(
-                0deg,
-                color-mix(in oklab, var(--gold) 8%, transparent),
-                color-mix(in oklab, var(--gold) 8%, transparent)
-            ),
-            var(--metric-badge-bg, var(--glass-bg-quiet));
-        box-shadow:
-            inset 0 0 0 1px var(--gold-rim),
-            inset 0 0.5px 0 0
-                color-mix(in oklab, var(--gold-light) 30%, transparent),
-            0 1px 6px color-mix(in srgb, var(--shadow-color) 8%, transparent);
-    }
-
-    /* The record value reads in legible gold ink (the medal numeral). Scoped to
-       the amount slot so the unit/label keep their muted register — the gold is
-       on the figure, not the furniture. */
-    .metric-badge--record .metric-badge__amount {
-        color: var(--gold-ink);
-    }
-
-    .metric-badge--record:hover {
-        /* Hover deepens the rim to full `--gold` and lifts the wash one rung —
-           the gilt edge catches a touch more light, never a fill. */
-        border-color: var(--gold);
-        box-shadow:
-            inset 0 0 0 1px var(--gold),
-            inset 0 0.5px 0 0
-                color-mix(in oklab, var(--gold-light) 40%, transparent),
-            0 2px 10px color-mix(in srgb, var(--shadow-color) 12%, transparent);
-    }
-
-    /* Q.W3 Lane A — the `.glass-dock[data-density="…"]` density rungs that
-       set `--dock-tab-h` + `--dock-label-size` were consolidated into
-       `dock.css` (their canonical dock-styles home). They formerly lived
-       here and resolved only by the index.css import order (utilities.css
-       after dock.css); the cascade-order dependency is now gone. */
-
-    /* ── Input bar — glassmorphic inline input container ──
-       Composes the canonical `floating` glass rung (--glass-bg-floating
-       ≈ 80% α, --glass-blur-floating ≈ 24px) — same surface read as the
-       prior raw composition but routed through the canonical 5-tier
-       ladder so PRT / no-backdrop-filter fallbacks propagate cleanly.
-       (Per audit U.W0.C-c §7.2.) */
-    .input-bar {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        border-radius: var(--radius-2xl);
-        border: 1px solid var(--glass-border-floating);
-        background: var(--glass-bg-floating);
-        backdrop-filter: var(--glass-blur-floating);
-
-        padding: 0 0.75rem;
-        height: 2.25rem;
-        max-width: var(--max-width-input);
-        width: 100%;
-        transition:
-            box-shadow var(--duration-fast) var(--ease-standard),
-            border-color var(--duration-fast) var(--ease-standard);
-    }
-    .input-bar:focus-within {
-        box-shadow: var(--focus-ring-shadow);
-        border-color: var(--border);
-    }
-
-    .input-bar-field {
-        font-family: var(--font-mono, monospace);
-        font-size: var(--type-small);
-        background: transparent;
-        border: none;
-        outline: none;
-        flex: 1;
-        min-width: 0;
-    }
-    .input-bar-field::placeholder {
-        color: color-mix(in srgb, var(--muted-foreground) 50%, transparent);
-    }
-
-    /* ── Hover lift — translate-y + shadow on hover (3 levels) ──
-       The shared transition is expressed once over the family; the three
-       :hover rules carry the per-level translate + shadow. */
-    :where(.hover-lift, .hover-lift-md, .hover-lift-lg) {
-        /* Individual-transform identity base (AQ.W3 §W3.2) — `translate: 0` at
-           rest mints the stacking context once so the hover lift does not
-           flicker it into being. */
-        translate: 0;
-        transition-property: translate, box-shadow;
-        transition-duration: var(--duration-normal);
-        transition-timing-function: var(--ease-standard);
-    }
-    .hover-lift:hover:not(:disabled):not([aria-disabled='true']) {
-        translate: 0 var(--lift-sm);
-        box-shadow: var(--shadow-md);
-    }
-    .hover-lift-md:hover:not(:disabled):not([aria-disabled='true']) {
-        translate: 0 var(--lift-md);
-        box-shadow: var(--shadow-md);
-    }
-    .hover-lift-lg:hover:not(:disabled):not([aria-disabled='true']) {
-        translate: 0 var(--lift-lg);
-        box-shadow: var(--shadow-lg);
-    }
-
-    /* ── Cartoon shadows — token-driven box-shadow + bezel border + lift ──
-       The box-shadow stack reads from the canonical
-       `--shadow-cartoon-{sm,md,lg}` rungs declared at tokens.css:304-312.
-       Those rungs use `color-mix(in srgb, var(--shadow-color) N%, transparent)`
-       so dark-mode flips the cast through `--shadow-color` automatically.
-       The 2px bezel border + translateY are the cartoon-stamp geometry
-       atop the canonical depth — kept here so a single class delivers
-       the whole cartoon read.
-       (Per audit U.W0.C-c §1.3 / Union 1 — collapses the dual-system
-       drift onto the token-driven shadow.) */
-    :where(.shadow-cartoon-sm, .shadow-cartoon-md, .shadow-cartoon-lg) {
-        border: 2px solid var(--border);
-    }
-    /* Static cartoon-stamp lift (AQ.W3 §W3.2). NOT state-driven, so the
-       identity base is not strictly required, but the `translate:` longhand
-       keeps the family uniform with the state-driven sites above. */
-    .shadow-cartoon-sm {
-        box-shadow: var(--shadow-cartoon-sm);
-        translate: 0 -1px;
-    }
-    .shadow-cartoon-md {
-        box-shadow: var(--shadow-cartoon-md);
-        translate: 0 -1px;
-    }
-    .shadow-cartoon-lg {
-        box-shadow: var(--shadow-cartoon-lg);
-        translate: 0 -2px;
-    }
-
-    /* ── Divider utilities ── */
-    .divider-h {
-        height: 2px;
-        background: linear-gradient(
-            to right,
-            transparent 1%,
-            var(--border) 8%,
-            var(--border) 92%,
-            transparent 99%
-        );
-    }
-
-    .divider-h-tapered {
-        height: 2px;
-        background: linear-gradient(
-            to right,
-            transparent 3%,
-            var(--border) 15%,
-            var(--border) 85%,
-            transparent 97%
-        );
-    }
-
-}
-
-/* ── Hover scale (O.W6 Lane C) ──
-   Canonical hover-transform utility consuming the `--scale-hover` token
-   (tokens.css §11). Promoted from consumer-side `hover:scale-105`
-   recipe — 13 sites in keyframes.js demo + 9 sites in words/frontend
-   per O11/d L3 + O11/a I4. Single-token recipe (no ladder); the dual
-   `--scale-press-{xs..lg}` ladder discussion is the press-axis cohort
-   (O-N-7), not hover. Consumers reach the utility via
-   `class="scale-on-hover"`; transition + easing bind to the canonical
-   `--duration-fast` + `--ease-standard` tokens. */
-@utility scale-on-hover {
-    /* Individual-transform identity base (AQ.W3 §W3.2). Transition the `scale`
-       longhand (not `transform`) so the migrated hover scale animates.
-       AX.W52 §6 doctrine — the `scale` transform leg rides `--spring-smooth`
-       (the settle register), NOT the bezier `--ease-standard` (a transform on a
-       bezier reads mechanical; springs read alive on transform). */
-    scale: 1;
-    transition: scale var(--duration-fast) var(--spring-smooth);
-
-    &:hover {
-        scale: var(--scale-hover);
-    }
-}
-
-/* ── Twin-line divider — the chassis catch-light / under-shadow groove ───────
-   AW.W15 DRY extraction. The twin-line idiom (a 1px white catch-light over a
-   1px black under-shadow reading as one engraved hairline groove) is the
-   chassis-divider signature. The exact light/dark α pair was DUPLICATED in
-   `instrument-chassis.css` (`.bezel-line.top`/`.bottom`) and `instrument-rail.css`
-   (the sibling `::before`/`::after`). This utility is the SINGLE source of that
-   α pair: it publishes `--twin-line-catch` (the top catch-light) and
-   `--twin-line-shadow` (the bottom under-shadow) as cascade tokens, dark-adaptive
-   by construction (the `.dark &` arm re-resolves them). Both consumers read the
-   tokens; a retint touches one rule. Real DRY, ≥2 consumers. */
-@utility twin-line-divider {
-    --twin-line-catch: rgb(255 255 255 / 0.10);
-    --twin-line-shadow: rgb(0 0 0 / 0.12);
-
-    :where(.dark) & {
-        --twin-line-catch: rgb(255 255 255 / 0.06);
-        --twin-line-shadow: rgb(0 0 0 / 0.18);
-    }
-}
-
-/* ── Control transition recipe (AU.W8b.4) ───────────────────────────────
-   Shared compound transition for interactive controls that animate their
-   surface (background-color/color/box-shadow/border-color) on the four-state
-   contract. Replaces the per-site
-   `transition-[background-color,color,box-shadow,border-color] duration-[var(--duration-fast)] ease-[var(--ease-standard)]`
-   arbitrary wraps at ≥2 sites (TabsTrigger, SelectTrigger, Toggle `card`
-   variant). Binds the canonical --duration-fast + --ease-standard tokens. */
-@utility transition-control {
-    transition-property: background-color, color, box-shadow, border-color;
-    transition-duration: var(--duration-fast);
-    transition-timing-function: var(--ease-standard);
-}
-
-/* ── Collapse transition recipe (AU.W8b.4) ──────────────────────────────
-   Shared height+opacity transition for reka-ui collapse surfaces (Accordion
-   content, Collapsible content). Replaces the per-site `transition-[height,opacity]`
-   wrap at ≥2 sites. The duration/easing rides the data-state
-   `animate-accordion-*`/`animate-collapsible-*` keyframes (this only declares
-   WHICH properties transition; the keyframes own the timing). */
-@utility transition-collapse {
-    transition-property: height, opacity;
-}
-
-/* ── Sheet/drawer slide-out animation grammar ──
-   Mirror of `.popover-animate` for sheet/drawer panels. Pairs with
-   `slide-in-from-{top,right,bottom,left}-N` to compose side-keyed entries.
-   The open path uses --duration-panel (slow, deliberate); the close path
-   uses --duration-fast so dismiss feels snappy. R5 vocab.γ gap row 6;
-   consumed by W2.A sheet/drawer migration. */
-@utility sheet-animate {
-    @apply data-[state=open]:animate-in data-[state=closed]:animate-out
-           data-[state=open]:fade-in data-[state=closed]:fade-out
-           data-[state=open]:duration-[var(--duration-panel)]
-           data-[state=closed]:duration-[var(--duration-fast)];
-}
-
-/* ── Audacious primary CTA recipe ────────────────────────────────────────
-   Composes three at-rest marks (top-highlight via --glass-highlight, bottom
-   under-shadow via --border-hairline, baseline glass) with three disco accents
-   on hover (specular swap via --glass-specular, sparkle sweep via the ::after
-   star, disco-grain via --paper-clean-texture blended with a --primary radial).
-   Disco fires on hover only — at rest the button reads as a restrained glass
-   surface. Pair with `bg-primary text-primary-foreground`; the utility owns
-   the texture/highlight/sparkle composition only. */
-@utility btn-audacious {
-    position: relative;
-    isolation: isolate;
-    overflow: hidden;
-    border: 1px solid var(--glass-border-quiet);
-    box-shadow:
-        var(--border-hairline),
-        var(--glass-highlight);
-    transition:
-        background var(--duration-fast) var(--ease-standard),
-        color var(--duration-fast) var(--ease-standard),
-        transform var(--duration-fast) var(--ease-standard),
-        box-shadow var(--duration-fast) var(--ease-standard),
-        --ripple-radius var(--motion-duration-ripple, 340ms) var(--ease-out-expo);
-
-    /* Hover composition: paper-grain texture overlaid on a soft
-       --primary radial, with the specular catch-light replacing the
-       resting hairline highlight. The radial uses --primary at 18%
-       — same alpha rung the dock primary tier consumes for phase
-       tinting, just bound to the canonical CTA color instead. */
-    &:hover:not(:disabled) {
-        background-image:
-            var(--paper-clean-texture),
-            radial-gradient(
-                ellipse at 30% 30%,
-                color-mix(in srgb, var(--primary) 18%, transparent),
-                transparent 70%
-            );
-        background-blend-mode: overlay, normal;
-        background-size: var(--paper-texture-size), auto;
-        box-shadow:
-            var(--glass-specular),
-            0 0.5px 0 0 rgb(0 0 0 / 0.06);
-    }
-
-    /* AI.W4-M.2 (Q5 — G-AI-D27 ratified) — press-ripple via a typed
-       `--ripple-radius` length custom property. The `::before`
-       element paints a radial gradient whose stop radius equals the
-       typed length; the `:active` rule sets the length to the cap
-       (`--ripple-radius-max`, 12rem), and the host's transition
-       (above) interpolates the radius via the @property registration
-       (tokens.css §18). Release returns the length to its 0px initial
-       value and the ripple retires. The ripple paints at z-index 0
-       (above the host's background, below the slot content which sits
-       in the default 0 stacking context but with text inheriting the
-       slot's foreground colour). */
-    &::before {
-        content: "";
-        position: absolute;
-        inset: 0;
-        pointer-events: none;
-        z-index: 0;
-        border-radius: inherit;
-        background: radial-gradient(
-            circle at center,
-            color-mix(in srgb, var(--primary-foreground, hsl(0 0% 100%)) 35%, transparent) 0,
-            color-mix(in srgb, var(--primary-foreground, hsl(0 0% 100%)) 18%, transparent)
-                calc(var(--ripple-radius, 0px) * 0.55),
-            transparent var(--ripple-radius, 0px)
-        );
-        transition: inherit;
-        will-change: background;
-    }
-
-    &:active:not(:disabled) {
-        --ripple-radius: var(--ripple-radius-max, 12rem);
-    }
-
-    /* D6.b — the disco-star EXCISED. The `::after { content:"✦" }` glyph and
-       its `&:hover::after { animation: sparkle-sweep … }` trigger are gone (the
-       user's named removal: "remove the disco star from all glass-ui elements").
-       A primary action now announces itself by SETTLING into a richer surface,
-       not by emitting a sparkle: the whole hover affirmation rides the existing
-       `&:hover` specular catch-light box-shadow (`--glass-specular`, above) —
-       honest physics, not casino-skeuomorphism. Gold CTAs add the
-       `btn-gold-bg-sweep` metal-catch (a metal catching light is honest; a star
-       is not). One garish gesture out, zero garish gestures in. The
-       `sparkle-sweep` keyframe is TOMBSTONED in animations.css (empty body,
-       full delete in 3.11); `--duration-sparkle` is `@deprecated` in tokens.css. */
-
-    /* PRM bracket — the press-ripple retires; the press still reads
-       via the audacious recipe's transform/scale beat (the ripple is
-       affirmation atop affirmation). */
-    @media (prefers-reduced-motion: reduce) {
-        transition:
-            background var(--duration-fast) var(--ease-standard),
-            color var(--duration-fast) var(--ease-standard),
-            transform var(--duration-fast) var(--ease-standard),
-            box-shadow var(--duration-fast) var(--ease-standard);
-
-        &:active:not(:disabled) {
-            --ripple-radius: 0px;
-        }
-    }
-}
-
-/* ── Gold CTA shimmer modifier — AN.R0 D9 ───────────────────────────────
-   `btn-audacious-gold` extends `btn-audacious` with a gold sweep shimmer
-   on hover. Pair as `btn-audacious btn-audacious-gold` (or use the Button
-   `variant="gold-audacious"` which composes both). The hover shimmer is a
-   translucent linear-gradient sweep (low alpha — tasteful, not garish)
-   that slides left-to-right via the existing `gold-shimmer-slide` keyframe
-   (animations.css). The gold gradient uses the canonical `--color-gold-*`
-   token triad (tokens.css §13).
-
-   Design register:
-   • PRM no-preference: the gold sweep IS the gold-CTA affirmation — a metal
-     catching light is honest physics (the disco-star is gone, D6.b).
-   • PRM reduce: static gold tint shows on hover; no animation.
-   • The gold shimmer is a background-image layer ABOVE the existing
-     btn-audacious paper-grain + primary-radial layers, blended with
-     `overlay` so the glass substrate reads through at partial opacity.
-   • The `::before` ripple from btn-audacious is unchanged; the `::after`
-     sparkle is EXCISED (D6.b) — this modifier only retunes the hover layers.
-   • Consumer applies: `<Button variant="gold-audacious">Next →</Button>` */
-@utility btn-audacious-gold {
-    /* At rest: a faint warm gold tint over the glass surface reads as "warm
-       glass" without announcing the hover state prematurely. */
-    background-image:
-        linear-gradient(
-            135deg,
-            color-mix(in srgb, var(--color-gold) 8%, transparent),
-            color-mix(in srgb, var(--color-gold-light) 5%, transparent) 50%,
-            color-mix(in srgb, var(--color-gold) 8%, transparent)
-        );
-
-    /* Hover: deepen the plate to a SATURATED gold the white label clears (AW.W13
-       names a "saturated gold backplate"; the D1 fix). The bottom layer is the
-       OPAQUE fixed deep gold (`--color-gold-deep`, mode-INVARIANT) — a solid plate
-       at ~6.5:1 (light) / ~5.5:1 (dark) against white, well below the ~0.18
-       luminance floor white text needs for ≥4.5:1 (was a translucent 22-30% wash
-       over near-cream glass → 1.29:1 white-on-pale-gold). The plate is FIXED-dark
-       in both modes — deepening toward the mode-flipping `--foreground` brightened
-       the dark plate to a cream-gold; `--color-gold-deep` does not flip. The
-       shimmer sweep rides ABOVE as a LOW-alpha gold gradient (normal blend, ≤18% —
-       it textures the plate without brightening it past the floor), and the
-       paper-grain overlays for the disco facet. */
-    &:hover:not(:disabled) {
-        background-image:
-            var(--paper-clean-texture),
-            linear-gradient(
-                90deg,
-                transparent 0%,
-                color-mix(in srgb, var(--color-gold) 14%, transparent) 25%,
-                color-mix(in srgb, var(--color-gold) 18%, transparent) 50%,
-                color-mix(in srgb, var(--color-gold) 14%, transparent) 75%,
-                transparent 100%
-            ),
-            linear-gradient(
-                135deg,
-                var(--color-gold-deep),
-                color-mix(in srgb, var(--color-gold-deep), var(--color-gold-dark) 18%) 50%,
-                var(--color-gold-deep)
-            );
-        background-blend-mode: overlay, normal, normal;
-        background-size: var(--paper-texture-size), 250% 100%, 100% 100%;
-        background-position: 0 0, 100% 0, 0 0;
-        box-shadow:
-            var(--glass-specular),
-            0 0 0 1px color-mix(in srgb, var(--color-gold-dark) 40%, transparent),
-            0 0.5px 0 0 rgb(0 0 0 / 0.06);
-    }
-
-    @media (prefers-reduced-motion: no-preference) {
-        &:hover:not(:disabled) {
-            animation: btn-gold-bg-sweep var(--duration-shimmer) linear infinite;
-        }
-    }
-}
-
-/* Background-position sweep for the gold CTA hover shimmer.
-   Distinct from `gold-shimmer-slide` (which animates background-position for
-   a text-clip gradient). This variant sweeps the `background-position` of the
-   250% wide gradient across the button's bounding box. */
-@keyframes btn-gold-bg-sweep {
-    0%   { background-position: 0 0, 100% 0, 0 0; }
-    100% { background-position: 0 0, -100% 0, 0 0; }
-}
-
-/* ── Table density utilities — AN.R0 ─────────────────────────────────────
-   `table-cell` and `table-head` replace the former Tailwind `p-4` / `h-12`
-   literals in TableCell.vue / TableHead.vue. Both read `--table-density`
-   (tokens.css §19) so a single CSS-var assignment on a wrapping element
-   scales all row padding + header height simultaneously. Default density=1
-   resolves to the identical geometry as the previous Tailwind literals. */
-@utility table-cell {
-    padding-inline: var(--table-cell-px, 1rem);
-    padding-block: var(--table-cell-py, 1rem);
-}
-
-@utility table-head {
-    height: var(--table-head-h, 3rem);
-    padding-inline: var(--table-head-px, 1rem);
-}
-
-/* ── Rainbow gradient backgrounds ───────────────────────────────────────
-   `.rainbow-vivid` + `.rainbow-pastel` paint a left-to-right 7-stop spectrum
-   from the canonical `--rainbow-*` / `--rainbow-pastel-*` token families
-   (tokens.css §14). Consumed by keyframes.js's `AnimationMenuBar.vue` round
-   play button — `rainbow-vivid` (playing) / `rainbow-pastel` (idle). */
-@utility rainbow-vivid {
-    background: linear-gradient(
-        to right,
-        var(--rainbow-red),
-        var(--rainbow-orange),
-        var(--rainbow-yellow),
-        var(--rainbow-green),
-        var(--rainbow-blue),
-        var(--rainbow-indigo),
-        var(--rainbow-violet)
-    );
-}
-
-@utility rainbow-pastel {
-    background: linear-gradient(
-        to right,
-        var(--rainbow-pastel-red),
-        var(--rainbow-pastel-orange),
-        var(--rainbow-pastel-yellow),
-        var(--rainbow-pastel-green),
-        var(--rainbow-pastel-blue),
-        var(--rainbow-pastel-indigo),
-        var(--rainbow-pastel-violet)
-    );
-}
-
-/* ── Text-highlight paint (CSS Custom Highlight API) ─────────────────────
-   The default `::highlight()` paint for the `useTextHighlight` composable
-   (composables/motion; the `/motion-core` subpath, AX.W37). A named `Highlight`
-   registered in `CSS.highlights`
-   under one of these keys paints its `Range` set without a `<mark>` wrapper.
-   Token-bridged: the search mark reads the canonical pastel-yellow rainbow
-   token at a soft alpha; the equation/variable mark reads `--primary`. Both
-   axes are overridable via the `--text-highlight-*` custom properties. */
-::highlight(glass-search-mark) {
-    background-color: var(
-        --text-highlight-search-bg,
-        color-mix(in srgb, var(--rainbow-pastel-yellow) 55%, transparent)
-    );
-    color: var(--text-highlight-search-fg, inherit);
-}
-::highlight(glass-mark) {
-    background-color: var(
-        --text-highlight-bg,
-        color-mix(in srgb, var(--primary) 18%, transparent)
-    );
-    color: var(--text-highlight-fg, inherit);
-}
-
-/* ── Interactive-button four-state recipe ────────────────────────────────
-   `.btn-interactive` carries the canonical "Button-with-spring-hover"
-   four-state contract — transition + hover-scale + active-press + disabled-
-   opacity + focus-ring fade-in. The Button primitive's variants emit the four
-   states except `hover:scale-*`; this is the canonical opt-in that adds the
-   spring-hover lift. Consumed by keyframes.js at 7 sites.
-
-   AX.W52 §6 — the hover lift is the restrained `--scale-hover-btn` (1.05, NOT
-   the emphatic 1.08 `--scale-hover`) routed through `--spring-smooth` — the ONE
-   button scale register the §6 doctrine records and the gate asserts across
-   `.btn-pill`/`.tap-squish`/`.glass-btn`/`btn-interactive`. The surface legs
-   stay on the bezier `--ease-standard` (a colour cross-fade reads as a wobble
-   on a spring); only the `scale` transform leg springs. */
-@utility btn-interactive {
-    /* AQ.W3 §W3.2 identity base */
-    scale: 1;
-    transition:
-        background-color var(--duration-fast) var(--ease-standard),
-        color var(--duration-fast) var(--ease-standard),
-        scale var(--duration-fast) var(--spring-smooth),
-        opacity var(--duration-fast) var(--ease-standard);
-
-    &:hover {
-        scale: var(--scale-hover-btn);
-    }
-
-    &:active {
-        scale: var(--scale-press);
-    }
-
-    &:disabled {
-        opacity: var(--opacity-disabled);
-        pointer-events: none;
-    }
-
-    &:focus-visible {
-        box-shadow: var(--focus-ring-shadow);
-        outline: none;
-        /* Fade in; base state has no box-shadow transition → instant
-           removal. The `scale` leg keeps the `--spring-smooth` register. */
-        transition:
-            background-color var(--duration-fast) var(--ease-standard),
-            color var(--duration-fast) var(--ease-standard),
-            scale var(--duration-fast) var(--spring-smooth),
-            opacity var(--duration-fast) var(--ease-standard),
-            box-shadow var(--duration-fast) var(--ease-standard);
-    }
-}
-
-/* ── Reduced motion: nuanced — preserve opacity, remove spatial motion ── */
-@media (prefers-reduced-motion: reduce) {
-    *:not([data-allow-motion]) {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-    }
-
-    /* Keep opacity transitions (safe, non-spatial) but shorten */
-    *:not([data-allow-motion]) {
-        transition-duration: 0.1s !important;
-        transition-property: opacity, color, background-color, border-color, box-shadow !important;
-    }
-
-    /* Reduced-motion OVERRIDES the `data-allow-motion` theme-flip carve. That
-       carve (utilities.css `.no-transition` block) lets a control keep its OWN
-       authored spatial animation through the flip storm — but a user who asks for
-       reduced motion outranks any per-element motion-allow. So motion-allowed
-       elements ALSO snap their spatial (transform) transition + any animation here;
-       accessibility is absolute. (The DarkModeToggle icon animates through a flip
-       under full motion, and SNAPS under PRM — both arms gated.) */
-    [data-allow-motion] {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        transition-duration: 0.01ms !important;
-    }
-}
-
-/* ── No-transition class (for theme switches, etc.) ──────────────────────────
-   The theme-flip transition-suppression storm: `useGlobalDark.toggleDark()` adds
-   `.no-transition` to `<html>` for the flip's single style recalc so the page's
-   incidental transitions (colour cross-fades, glass surfaces) don't jank, then
-   rAF-removes it. The kill is BLANKET by design — every descendant snaps.
-
-   THE CARVE (`*:not([data-allow-motion])`): an element may declare
-   `data-allow-motion` to keep its OWN authored transition through the flip — the
-   suppression is for INCIDENTAL motion, never a control whose whole purpose IS an
-   animation (the DarkModeToggle's half-turn icon spring). This reuses the same
-   carve attribute the reduced-motion block reads, generalized into a single
-   "motion-allowed-during-suppression" capability (any element may opt in; no
-   toggle-special-case, no `!important` re-enable arms race). Reduced-motion still
-   OVERRIDES this carve — see the PRM block above: `[data-allow-motion]` spatial
-   transitions snap under `prefers-reduced-motion` (accessibility is absolute). */
-html.no-transition,
-html.no-transition *:not([data-allow-motion]),
-html.no-transition *:not([data-allow-motion])::before,
-html.no-transition *:not([data-allow-motion])::after {
-    transition-duration: 0s !important;
-}
-
-/* ── Forced-colors focus + silhouette rung (AQ.W2 §5 · generalized AX.W36) ────
-   Windows High Contrast / forced-colors mode STRIPS `box-shadow` — so the
-   glass focus rings (box-shadow + `outline: none`) vanish, leaving keyboard
-   users with no visible focus. Restore a real `outline` keyed to the system
-   `Highlight` color (outline survives forced-colors; box-shadow does not). The
-   box-shadow ring stays the primary in normal mode (it carries the glass
-   aesthetic) — these two are mutually exclusive by media query, NOT a parallel
-   path.
-
-   AX.W36 — the focus-survival selector set is GENERALIZED to the broader
-   interactive surface: the dock CONTROLS (`.dock-icon-button` / `.dock-tab-button`
-   / `.dock-select-trigger` / `.dock-dropdown-trigger`) + the pill button base
-   (`.btn-pill`) all carry a box-shadow focus ring (dock.css / utilities.css) that
-   vanishes under WHC just like the original five. This is the SAME `Highlight`
-   outline rung extended to cover them — ONE block, ONE path (the glass-language
-   structure-survival skin for the tier panes / StatusDot / floating surfaces lives
-   co-located with the ladder it skins, in glass.css).
-
-   `forced-color-adjust: none` is deliberately NOT used — glass-ui's glassmorphic
-   chrome is decorative and yields to the user's forced palette (css forced-colors
-   guidance). Baseline Widely Available; this IS the fallback mechanism (it only
-   activates under forced-colors), so no nested guard. */
-@media (forced-colors: active) {
-    .focus-ring:focus-visible,
-    .glass-btn:focus-visible,
-    .interactive-item:focus-visible,
-    .btn-pill:focus-visible,
-    .dock-icon-button:focus-visible,
-    .dock-tab-button:focus-visible,
-    .dock-select-trigger:focus-visible,
-    .dock-dropdown-trigger:focus-visible,
-    .input-pill:focus,
-    .input-pill:focus-visible {
-        outline: 2px solid Highlight;
-        outline-offset: 2px;
-    }
-
-    /* Structural edges borne ONLY by box-shadow (the hairline catch-light + the
-       dock SHELL pill edge) also vanish — restore a real border so the silhouette
-       survives. CanvasText is the system text/border color. The `.glass-dock`
-       shell is OUT of the glass-material group BY DESIGN (it hand-rolls a parallel
-       surface — see glass.css), so it keeps its WHC edge HERE; the five-rung ladder
-       + `.glass-card` get their WHC border from the co-located glass-language skin
-       in glass.css (one source per surface family, no double-declaration). */
-    .hairline-accent,
-    .glass-dock {
-        border: 1px solid CanvasText;
-    }
-}
-
-/* ── Coarse-pointer touch-target floor (AQ.W3 §7) ───────────────────────────
-   General-surface companion to the dock-scoped R0G-6 floor (dock.css). On
-   coarse pointers the small icon-button/trigger surfaces OUTSIDE the dock lift
-   to the WCAG 2.5.5 (44px) minimum — ONE amendment retiring the per-consumer
-   `min-h-[44px]` one-liners. Token-driven (`--touch-target`); fine-pointer
-   byte-identical. Targets `Button size="icon"` (via the `data-size="icon"`
-   attr Button.vue reflects), ExpandableContainer + SegmentedTabs (responsive
-   mobile Select) triggers.
-   `min-block/inline-size` only RAISES — a larger explicit size is never lost. */
-@media (pointer: coarse) {
-    [data-size="icon"],
-    .expandable-container__trigger,
-    .segmented-tabs__trigger {
-        min-block-size: var(--touch-target, 2.75rem);
-        min-inline-size: var(--touch-target, 2.75rem);
-    }
-}
+/* Shared utility classes
+ *
+ * ── Thin @import ROOT (cohesion-aware carve) ───────────────────────────────
+ * The utility body is carved into cohesive `utilities/*.css` partials (each
+ * under the 500-line no-god-module bound), @import-ed below in CASCADE ORDER.
+ * The leading @utility animation pair, the @layer components block (split at
+ * the metric-badge seam into two adjacent same-layer blocks — isomorphic), the
+ * @utility button cluster, and the a11y @media overrides keep their source
+ * order so the cascade is unchanged. See docs/precepts/design-idioms.md
+ * §cohesion-aware partials.
+ */
+
+/* CSS @import rules must precede every other rule. The five partials @import in
+   cascade order: */
+@import "./utilities/animate.css";
+@import "./utilities/base.css";
+@import "./utilities/components.css";
+@import "./utilities/btn.css";
+@import "./utilities/a11y-overrides.css";