@mkbabb/glass-ui 3.12.0 → 4.0.0

package/src/styles/utilities/btn.css

@@ -0,0 +1,218 @@
+/* utilities/btn.css
+   The interactive/button @utility cluster — scale-on-hover, twin-line-divider, transition-control/collapse, sheet-animate, table-cell/head density, rainbow-vivid/pastel, the text-highlight paint, and btn-interactive. (The btn-audacious/btn-audacious-gold disco recipes + the btn-gold-bg-sweep keyframes were RETIRED at BA.W-GLASS-CAL.)
+   Carved from the utilities.css cascade root; @import-ed by utilities.css in
+   cascade order. See docs/precepts/design-idioms.md §cohesion-aware partials. */
+/* ── 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(--spring-smooth-duration) 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. 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). `instrument-chassis.css`
+   (`.bezel-line.top`/`.bottom`) `@apply`s it and reads the tokens; a retint
+   touches one rule. (The prior `instrument-rail.css` co-consumer retired at
+   AZ.W-PRUNE2 with its component — the α pair stays canonicalised here.) */
+@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)];
+}
+
+/* ── Calm CTA register (BA.W-GLASS-CAL, H2a — the disco retired) ──────────
+   The `@utility btn-audacious` + `@utility btn-audacious-gold` recipes + the
+   `@keyframes btn-gold-bg-sweep` are RETIRED (clean break, no alias). The user
+   removed the "disco effect" wholesale: the sparkle `::after` glyph, the
+   disco-grain hover (`--paper-clean-texture` + `--primary`/gold radial), the
+   gold-sweep shimmer, and the typed `--ripple-radius` press-ripple are GONE.
+
+   The `primary-audacious`/`gold-audacious` Button variants (button/index.ts)
+   now collapse onto the calm glass-first register — the `glass-wash`/`btn-glass`
+   surface + the `--glass-specular` edge catch-light, hover/press on the §6
+   doctrine (surface→`--ease-standard`, scale→`--spring-smooth`). `gold-audacious`
+   keeps a STATIC warm-gold tint (no animated sweep). The fenced-out GOOD pops
+   (`.gold-shimmer` static text gradient, the specular gleam, the press-scale)
+   STAY — they were never disco. */
+
+/* ── 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 demo transport chrome —
+   `TransportDock.vue` / `RibbonBar.vue` bind `rainbow-vivid` (playing/active)
+   vs `rainbow-pastel` (idle) on the play + Apply buttons (re-confirmed live at
+   AZ.W-PRUNE2 E4-2). */
+@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(--spring-smooth-duration) 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(--spring-smooth-duration) var(--spring-smooth),
+            opacity var(--duration-fast) var(--ease-standard),
+            box-shadow var(--duration-fast) var(--ease-standard);
+    }
+}

package/src/styles/utilities/components.css

@@ -0,0 +1,317 @@
+/* utilities/components.css
+   The @layer components component half — metric-badge pill + label-bearing variants, the glassmorphic input-bar, hover-lift levels, cartoon shadows, divider utilities.
+   Carved from the utilities.css cascade root; @import-ed by utilities.css in
+   cascade order. See docs/precepts/design-idioms.md §cohesion-aware partials. */
+@layer components {
+    /* ── 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;
+    }
+
+    /* 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%
+        );
+    }
+
+}