@mkbabb/glass-ui 0.2.0 → 2.0.0

package/dist/styles/utilities.css

@@ -0,0 +1,893 @@
+/* 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;
+}
+
+/* ── 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;
+    }
+
+    /* ── 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);
+        color: var(--muted-foreground);
+        cursor: help;
+    }
+
+    /* ── 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;
+    }
+
+    .scrollbar-thin {
+        scrollbar-width: thin;
+        scrollbar-color: color-mix(in srgb, var(--muted-foreground) 25%, transparent) transparent;
+    }
+
+    /* ── Focus ring — auto-activates on :focus-visible ── */
+    .focus-ring:focus-visible {
+        outline: none;
+        border-radius: var(--radius-pill);
+        box-shadow: var(--focus-ring-shadow);
+    }
+
+    /* ── 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 {
+        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),
+            transform 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 {
+        transform: scale(0.98);
+    }
+    .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) and the spring carries
+       the return via `--spring-snappy` (the §L3 release-spring
+       contract). I keep this as a single canonical rung — NOT a
+       3-rung ladder. The outliers I leave alone are button `0.97` and
+       dock control `0.92`, which consume their own scale tokens
+       directly.
+
+       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 {
+        transition: transform var(--duration-fast) var(--spring-snappy);
+        transform-origin: center center;
+    }
+    .tap-squish:active {
+        transform: scale(var(--scale-press));
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .tap-squish:active {
+            transform: none;
+        }
+    }
+
+    /* ── 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 shadow with customizable colors) ── */
+    .depth-text {
+        --depth-color-primary: var(--primary);
+        --depth-color-shadow: var(--shadow);
+
+        color: var(--depth-color-primary);
+        text-shadow:
+            1px 1px 0 var(--depth-color-shadow),
+            2px 2px 0 var(--depth-color-shadow),
+            3px 3px 0 var(--depth-color-shadow),
+            4px 4px 0 var(--depth-color-shadow),
+            5px 5px 0 var(--depth-color-shadow),
+            5px 5px 1px color-mix(in srgb, var(--shadow-color) 10%, transparent),
+            2px 2px 2px color-mix(in srgb, var(--shadow-color) 20%, transparent),
+            4px 4px 5px color-mix(in srgb, var(--shadow-color) 25%, transparent),
+            6px 6px 10px color-mix(in srgb, var(--shadow-color) 15%, transparent);
+    }
+
+    /* ── 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 ── */
+    .scroll-fade-mask {
+        mask-image: linear-gradient(to right, transparent, black var(--mask-fade-width), black calc(100% - var(--mask-fade-width)), transparent);
+        -webkit-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));
+        -webkit-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);
+        -webkit-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);
+        -webkit-mask-image: linear-gradient(to bottom, transparent, black var(--mask-fade-width), black calc(100% - var(--mask-fade-width)), transparent);
+    }
+
+    /* ── 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;
+        }
+    }
+
+    /* ── 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;
+        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),
+            transform var(--duration-fast) var(--ease-standard);
+    }
+
+    .metric-badge > span {
+        line-height: 1;
+    }
+
+    .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));
+        transform: scale(var(--metric-badge-hover-scale, 1.02));
+    }
+
+    .metric-badge:active {
+        transform: 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;
+    }
+
+    .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;
+    }
+
+    /* 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) ── */
+    .hover-lift {
+        transition-property: transform, box-shadow;
+        transition-duration: var(--duration-normal);
+        transition-timing-function: var(--ease-standard);
+    }
+    .hover-lift:hover:not(:disabled):not([aria-disabled='true']) {
+        transform: translateY(var(--lift-sm));
+        box-shadow: var(--shadow-md);
+    }
+
+    .hover-lift-md {
+        transition-property: transform, box-shadow;
+        transition-duration: var(--duration-normal);
+        transition-timing-function: var(--ease-standard);
+    }
+    .hover-lift-md:hover:not(:disabled):not([aria-disabled='true']) {
+        transform: translateY(var(--lift-md));
+        box-shadow: var(--shadow-md);
+    }
+
+    .hover-lift-lg {
+        transition-property: transform, box-shadow;
+        transition-duration: var(--duration-normal);
+        transition-timing-function: var(--ease-standard);
+    }
+    .hover-lift-lg:hover:not(:disabled):not([aria-disabled='true']) {
+        transform: translateY(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.) */
+    .shadow-cartoon-sm {
+        box-shadow: var(--shadow-cartoon-sm);
+        border: 2px solid var(--border);
+        transform: translateY(-1px);
+    }
+
+    .shadow-cartoon-md {
+        box-shadow: var(--shadow-cartoon-md);
+        border: 2px solid var(--border);
+        transform: translateY(-1px);
+    }
+
+    .shadow-cartoon-lg {
+        box-shadow: var(--shadow-cartoon-lg);
+        border: 2px solid var(--border);
+        transform: translateY(-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 {
+    @apply transition-transform duration-fast ease-standard;
+
+    &:hover {
+        transform: scale(var(--scale-hover));
+    }
+}
+
+/* ── 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 (K.W6 HEADLINE) ────────────────────
+   Lifted from `dock.css` `.dock-tab-button[data-tier="primary"]` per
+   K.W6 spec §3 (Option B — drop phase-tinting from the canonical
+   variant; phase-tint stays as a dock-local extension). Composes three
+   at-rest marks (top-highlight via --glass-highlight, bottom under-shadow
+   via --border-hairline, baseline glass via --card surface) 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). Reservation: disco fires on hover
+   only — at rest the button reads as a Vignelli-restrained composed
+   glass surface.
+
+   Pair with `bg-primary text-primary-foreground` for the canonical
+   Button variant; 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);
+    }
+
+    /* Sparkle glyph — hidden at rest, animated on hover. The star
+       sweeps diagonally from top-left to bottom-right per the canonical
+       sparkle-sweep keyframe (animations.css). */
+    &::after {
+        content: "✦";
+        position: absolute;
+        top: 0.25rem;
+        left: 0.5rem;
+        color: hsl(0 0% 100% / 0.7);
+        font-size: 0.75rem;
+        line-height: 1;
+        pointer-events: none;
+        opacity: 0;
+        will-change: transform, opacity;
+        z-index: 1;
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+        &:hover::after {
+            animation: sparkle-sweep var(--duration-sparkle) var(--ease-out-expo);
+        }
+    }
+
+    /* 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: shimmer sweeps continuously at `--duration-shimmer`
+     rate; the sparkle-sweep (from btn-audacious) coexists on hover.
+   • 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 and `::after` sparkle from btn-audacious are
+     unchanged; this modifier only retunes the hover background 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: replace the audacious primary-radial with a gold sweep shimmer.
+       The shimmer gradient rides above the paper-grain texture; the `overlay`
+       blend-mode concentrates the gold on bright grain facets and recedes on
+       dark ones — the same lens metaphor as the btn-audacious primary radial. */
+    &:hover:not(:disabled) {
+        background-image:
+            var(--paper-clean-texture),
+            linear-gradient(
+                90deg,
+                transparent 0%,
+                color-mix(in srgb, var(--color-gold-dark) 22%, transparent) 25%,
+                color-mix(in srgb, var(--color-gold-light) 30%, transparent) 50%,
+                color-mix(in srgb, var(--color-gold-dark) 22%, transparent) 75%,
+                transparent 100%
+            );
+        background-blend-mode: overlay, normal;
+        background-size: var(--paper-texture-size), 250% 100%;
+        background-position: 0 0, 100% 0;
+        box-shadow:
+            var(--glass-specular),
+            0 0 0 1px color-mix(in srgb, var(--color-gold) 30%, 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; }
+    100% { background-position: 0 0, -100% 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 (Q.W3 Lane E re-promote) ──────────────
+   `.rainbow-vivid` + `.rainbow-pastel` paint a left-to-right 7-stop spectrum
+   from the canonical `--rainbow-*` / `--rainbow-pastel-*` token families
+   (tokens.css §14). They were retired at `b0debec` (D.W2.D, 2026-04-30)
+   under a zero-consumer audit that did not include keyframes.js in its
+   sweep corpus — keyframes.js's `AnimationMenuBar.vue` round play button
+   composes `rainbow-vivid` (playing) / `rainbow-pastel` (idle) and silently
+   lost its gradient when the recipes left the library. The `--rainbow-*`
+   color tokens survived the retiral; only the class recipes were dropped.
+
+   Re-promoted as `@utility` recipes — the token half is canonical, so the
+   class form that paints it belongs alongside it. Not a backwards-compat
+   alias: it is a substrate REVERT, the revert IS the consumer rediscovery
+   (≥ 1 consumer exists post-revert, satisfying L invariant 8). Faithful
+   to the pre-`b0debec` recipe bodies. */
+@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)
+    );
+}
+
+/* ── Interactive-button four-state recipe (Q.W3 Lane E re-promote) ───────
+   `.btn-interactive` carries the canonical "Button-with-spring-hover"
+   four-state contract — transition + hover-scale (`--scale-hover`) +
+   active-press (`--scale-press`) + disabled-opacity (`--opacity-disabled`)
+   + focus-ring fade-in. Same shape as `.btn-audacious` (a composition-only
+   recipe a Button variant opts into). Retired at `b0debec` (D.W2.D)
+   alongside the rainbow recipes under the same incomplete audit corpus;
+   keyframes.js consumes it at 7 sites (CubeScene, EasingScene, demo/cube,
+   AnimationControlsGroup RIBBON_BUTTON_CLASS, PlaybackRibbon Reverse).
+
+   The Button primitive's own variants emit the four states except
+   `hover:scale-*` — `.btn-interactive` is the canonical opt-in that adds
+   the spring-hover lift. Faithful to the pre-`b0debec` recipe body. */
+@utility btn-interactive {
+    transition:
+        background-color var(--duration-fast) var(--ease-standard),
+        color var(--duration-fast) var(--ease-standard),
+        transform var(--duration-fast) var(--ease-standard),
+        opacity var(--duration-fast) var(--ease-standard);
+
+    &:hover {
+        transform: scale(var(--scale-hover));
+    }
+
+    &:active {
+        transform: 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 */
+        transition:
+            background-color var(--duration-fast) var(--ease-standard),
+            color var(--duration-fast) var(--ease-standard),
+            transform var(--duration-fast) var(--ease-standard),
+            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;
+    }
+}
+
+/* ── No-transition class (for theme switches, etc.) ── */
+html.no-transition,
+html.no-transition *,
+html.no-transition *::before,
+html.no-transition *::after {
+    transition-duration: 0s !important;
+}