@nexub/themes 2.9.0 → 3.1.0

package/src/base.css

@@ -1,679 +1,16 @@
 /* @nexub/themes — base.css
-   Global resets, focus ring, body, scrollbar, reduced-motion.
+   Global resets, focus ring, body, scrollbar, reduced-motion (core.css), plus
+   the Nexub fonts and the ambient page backdrop.
    Import this once at the root of your app before light.css or dark.css. */
 
-/* Plus Jakarta Sans — the Nexub DS typeface. Self-hosted (OFL-1.1, from
-   Fontsource); variable weights 200–800, normal + italic. Subsets load on
-   demand via unicode-range, so only the glyphs a page uses are fetched. Every
-   file is big enough that bundlers emit it rather than inline a data: URL,
-   so `font-src 'self'` works (see scripts/build-fonts.mjs). */
+/* Plus Jakarta Sans and Inter — the Nexub DS typefaces. Self-hosted (OFL-1.1,
+   from Fontsource); variable weights, normal + italic. Subsets load on demand
+   via unicode-range, so only the glyphs a page uses are fetched. Every file is
+   big enough that bundlers emit it rather than inline a data: URL, so
+   `font-src 'self'` works (see scripts/build-fonts.mjs). */
 @import './fonts.css';
-@import '@nexub/tokens/css';
-@import '@nexub/tokens/css/roles';
-
-/* ─── Semantic shorthand aliases ───────────────────────────────────────────
-   Components reference these shorter names. They proxy the full token names
-   so you only need to update one place if the palette shifts.              */
-:root {
-  /* success */
-  --color-success-500:    var(--color-semantic-success-default);
-  --color-success-600:    var(--color-semantic-success-strong);
-  --color-success-bg:     var(--color-semantic-success-bg);
-  --color-success-border: var(--color-semantic-success-border);
-
-  /* error / danger */
-  --color-error-500:      var(--color-semantic-error-default);
-  --color-error-600:      var(--color-semantic-error-strong);
-  --color-error-bg:       var(--color-semantic-error-bg);
-  --color-error-border:   var(--color-semantic-error-border);
-  --color-danger-500:     var(--color-semantic-error-default);
-  --color-danger-600:     var(--color-semantic-error-strong);
-  --color-danger-bg:      var(--color-semantic-error-bg);
-  --color-danger-border:  var(--color-semantic-error-border);
-
-  /* warning */
-  --color-warning-500:    var(--color-semantic-warning-default);
-  --color-warning-600:    var(--color-semantic-warning-strong);
-  --color-warning-bg:     var(--color-semantic-warning-bg);
-  --color-warning-border: var(--color-semantic-warning-border);
-
-  /* info */
-  --color-info-500:       var(--color-semantic-info-default);
-  --color-info-600:       var(--color-semantic-info-strong);
-  --color-info-bg:        var(--color-semantic-info-bg);
-  --color-info-border:    var(--color-semantic-info-border);
-
-  /* Focus ring follows the theme's ring tokens (the tokens default is a fixed
-     white/blue pair, wrong in dark mode and brand themes). */
-  --shadow-focus: 0 0 0 2px var(--color-ring-offset), 0 0 0 4px var(--color-ring-default);
-
-  /* Form-control boundaries (WCAG 1.4.11 needs >= 3:1 against the page).
-     Separate from --color-border-default, which cards/dividers keep light. */
-  --color-border-input: var(--color-outline);
-
-  /* placeholder text (PKG-B01) */
-  --color-text-placeholder: var(--color-text-muted);
-
-  /* tone text aliases — used by Heading tone prop + HelperText (PKG-H01) */
-  /* -strong passes WCAG AA as text in both light (dark shade) and dark (light shade). */
-  --color-text-info:    var(--color-semantic-info-strong);
-  --color-text-success: var(--color-semantic-success-strong);
-  --color-text-warning: var(--color-semantic-warning-strong);
-  --color-text-danger:  var(--color-semantic-error-strong);
-
-  /* Solid fills under white text. Fixed palette tones (they do NOT flip in dark
-     mode): tone 40 vs white is >= 4.5:1 by HCT construction; hover = tone 30.
-     Brand themes override accent. Phase 2 moves components to on-* roles. */
-  --color-fill-primary:         var(--color-palette-primary-40);
-  --color-fill-primary-hover:   var(--color-palette-primary-30);
-  --color-fill-info:            var(--color-palette-info-40);
-  --color-fill-info-hover:      var(--color-palette-info-30);
-  --color-fill-success:         var(--color-palette-success-40);
-  --color-fill-success-hover:   var(--color-palette-success-30);
-  --color-fill-warning:         var(--color-palette-warning-40);
-  --color-fill-warning-hover:   var(--color-palette-warning-30);
-  --color-fill-danger:          var(--color-palette-error-40);
-  --color-fill-danger-hover:    var(--color-palette-error-30);
-  --color-fill-leap:            var(--color-palette-leap-40);
-  --color-fill-leap-hover:      var(--color-palette-leap-30);
-  --color-fill-bookub:          var(--color-palette-bookub-40);
-  --color-fill-bookub-hover:    var(--color-palette-bookub-30);
-  --color-fill-payub:           var(--color-palette-payub-40);
-  --color-fill-payub-hover:     var(--color-palette-payub-30);
-  --color-fill-founderub:       var(--color-palette-founderub-40);
-  --color-fill-founderub-hover: var(--color-palette-founderub-30);
-  --color-fill-accent:          var(--color-fill-primary);
-  --color-fill-accent-hover:    var(--color-fill-primary-hover);
-
-  /* scrim behind modal surfaces (Dialog, AlertDialog, Sheet/Drawer, CommandPalette) */
-  --color-overlay: rgb(0 0 0 / 0.5);
-
-  /* accent fallback — used without any brand theme applied (PKG-B03) */
-  --color-accent-500: var(--color-brand-primary-500);
-  --color-accent-600: var(--color-brand-primary-600);
-
-  /* brand tone shorthands — aliased from full token names (PKG-B02) */
-  --color-leap-50:          var(--color-accent-leap-50);
-  --color-leap-100:         var(--color-accent-leap-100);
-  --color-leap-500:         var(--color-accent-leap-500);
-  --color-leap-600:         var(--color-accent-leap-600);
-  --color-leap-700:         var(--color-accent-leap-700);
-  --color-leap-bg:          rgba(99, 102, 241, 0.10);
-  --color-leap-border:      rgba(99, 102, 241, 0.25);
-
-  --color-bookub-50:        var(--color-accent-bookub-50);
-  --color-bookub-100:       var(--color-accent-bookub-100);
-  --color-bookub-500:       var(--color-accent-bookub-500);
-  --color-bookub-600:       var(--color-accent-bookub-600);
-  --color-bookub-700:       var(--color-accent-bookub-700);
-  --color-bookub-bg:        rgba(16, 185, 129, 0.10);
-  --color-bookub-border:    rgba(16, 185, 129, 0.25);
-
-  --color-payub-50:         var(--color-accent-payub-50);
-  --color-payub-100:        var(--color-accent-payub-100);
-  --color-payub-500:        var(--color-accent-payub-500);
-  --color-payub-600:        var(--color-accent-payub-600);
-  --color-payub-700:        var(--color-accent-payub-700);
-  --color-payub-bg:         rgba(139, 92, 246, 0.10);
-  --color-payub-border:     rgba(139, 92, 246, 0.25);
-
-  --color-founderub-50:     var(--color-accent-founderub-50);
-  --color-founderub-100:    var(--color-accent-founderub-100);
-  --color-founderub-500:    var(--color-accent-founderub-500);
-  --color-founderub-600:    var(--color-accent-founderub-600);
-  --color-founderub-700:    var(--color-accent-founderub-700);
-  --color-founderub-bg:     rgba(245, 158, 11, 0.10);
-  --color-founderub-border: rgba(245, 158, 11, 0.25);
-}
-
-*, *::before, *::after {
-  box-sizing: border-box;
-  border-color: var(--color-border-default);
-}
-
-html {
-  font-family: var(--font-family-sans);
-  font-size: 16px;
-  line-height: 1.6;
-  color: var(--color-text-primary);
-  background-color: var(--color-bg-default);
-  scroll-behavior: smooth;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-size-adjust: 100%;
-  /* never fake bold/italic; Inter's optical sizes follow font-size */
-  font-synthesis: none;
-  font-optical-sizing: auto;
-}
-
-/* Form controls don't inherit fonts by default — without this, apps that
-   don't use Tailwind's preflight would render buttons/inputs in the system UI
-   font instead of Inter. */
-button, input, select, textarea, optgroup {
-  font-family: inherit;
-}
-
-/* Pointer cursor on buttons. Tailwind v3's preflight set it; v4's doesn't, so
-   this keeps Nexub buttons the same on both. Zero specificity (:where), so any
-   cursor-* utility and v3's preflight still win. */
-:where(button:not(:disabled), [role='button']:not(:disabled)) {
-  cursor: pointer;
-}
+@import './core.css';
 
 body {
-  min-height: 100vh;
-  margin: 0;
   background: var(--gradient-hero-ambient);
 }
-
-/* Focus ring: one ring for everything. The outline follows border-radius, so
-   it hugs capsules and fields. Contrast >= 3:1 on every surface (ring = primary). */
-:focus-visible {
-  outline: 3px solid var(--color-ring-default);
-  outline-offset: 2px;
-}
-
-@media (forced-colors: active) {
-  :focus-visible { outline-color: Highlight; }
-}
-
-/* Headings: brand display face, balanced wrapping */
-h1, h2, h3, h4, h5, h6 {
-  margin: 0;
-  font-family: var(--font-family-display);
-  font-weight: var(--font-weight-bold);
-  line-height: 1.2;
-  color: var(--color-text-primary);
-  text-wrap: balance;
-}
-
-/* Paragraphs / lists */
-p, ul, ol {
-  margin: 0;
-}
-
-p {
-  text-wrap: pretty;
-}
-
-/* Links */
-a {
-  color: var(--color-text-link);
-  text-decoration: underline;
-  text-underline-offset: 0.3em;
-}
-
-a:hover {
-  opacity: 0.8;
-}
-
-/* Images */
-img, video, svg {
-  display: block;
-  max-width: 100%;
-}
-
-/* Code */
-code, kbd, pre, samp {
-  font-family: var(--font-family-mono);
-  font-size: 0.875em;
-}
-
-/* Selection */
-::selection {
-  background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
-  color: var(--color-text-primary);
-}
-
-/* Scrollbar (webkit) */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: var(--color-bg-subtle);
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--color-border-strong);
-  border-radius: var(--radius-full);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--color-text-muted);
-}
-
-/* Reduced motion */
-/* Reduced motion: everything is instant, except the designed fallbacks
-   (nx-motion, nx-reveal), which keep their crossfade with no travel. */
-@media (prefers-reduced-motion: reduce) {
-  *:not(.nx-motion, .nx-reveal), *::before, *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-}
-
-/* ─── State layer (Calm Depth §4.2) ──────────────────────────────────────────
-   An overlay of the element's own text color (its on-* role) at the
-   --state-* opacity, so hover/focus/press read correctly on any fill, theme,
-   brand or glass. The ::before paints above the background, below content. */
-.nx-state-layer { position: relative; isolation: isolate; }
-.nx-state-layer::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  border-radius: inherit;
-  background: currentColor;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity var(--motion-spring-effects-fast-duration) var(--motion-spring-effects-fast-easing);
-}
-.nx-state-layer:hover::before { opacity: var(--state-hover); }
-.nx-state-layer:focus-visible::before { opacity: var(--state-focus); }
-.nx-state-layer:active::before { opacity: var(--state-pressed); }
-.nx-state-layer:is(:disabled, [aria-disabled='true'], [data-disabled])::before { opacity: 0; }
-
-/* Press feedback: a fast spatial spring, no ripple. */
-.nx-press {
-  transition: transform var(--motion-spring-spatial-fast-duration) var(--motion-spring-spatial-fast-easing);
-}
-.nx-press:active:not(:disabled, [aria-disabled='true'], [data-disabled]) { transform: scale(0.97); }
-
-/* ─── Enter / exit (overlays, menus, tooltips, toasts) ───────────────────────
-   Opacity rides the effects spring; position and scale ride the spatial
-   spring, so a little overshoot reads as physical without flashing.
-   Keyframes, not transitions: Radix keeps closing content mounted until its
-   exit animation ends. Standalone translate/scale compose with the
-   component's own transform (e.g. a centred dialog's -50% offsets).
-   Modifiers set where the layer comes from: --nx-x, --nx-y, --nx-scale. */
-@keyframes nx-fade-in { from { opacity: 0; } }
-@keyframes nx-fade-out { to { opacity: 0; } }
-@keyframes nx-move-in { from { translate: var(--nx-x, 0) var(--nx-y, 0); scale: var(--nx-scale, 1); } }
-@keyframes nx-move-out { to { translate: var(--nx-x, 0) var(--nx-y, 0); scale: var(--nx-scale, 1); } }
-
-.nx-motion:is([data-state='open'], [data-state='delayed-open'], [data-state='instant-open'], [data-motion^='from-']) {
-  animation:
-    nx-fade-in var(--motion-spring-effects-default-duration) var(--motion-spring-effects-default-easing),
-    nx-move-in var(--motion-spring-spatial-default-duration) var(--motion-spring-spatial-default-easing);
-}
-/* Exit is quicker than enter and never overshoots. */
-.nx-motion:is([data-state='closed'], [data-motion^='to-']) {
-  animation:
-    nx-fade-out var(--motion-spring-effects-fast-duration) var(--motion-spring-effects-fast-easing) forwards,
-    nx-move-out var(--motion-spring-effects-fast-duration) var(--motion-spring-effects-fast-easing) forwards;
-}
-
-/* Floating layers grow from their trigger: a small scale plus a 4px nudge
-   away from the side they open on (Radix sets data-side). Components set
-   transform-origin to Radix's --radix-*-transform-origin. */
-.nx-pop { --nx-scale: 0.96; }
-.nx-pop[data-side='bottom'] { --nx-y: -4px; }
-.nx-pop[data-side='top'] { --nx-y: 4px; }
-.nx-pop[data-side='left'] { --nx-x: 4px; }
-.nx-pop[data-side='right'] { --nx-x: -4px; }
-/* Modal dialogs rise slightly as they scale in. */
-.nx-dialog { --nx-scale: 0.96; --nx-y: 8px; }
-/* NavigationMenu content slides in from the item's direction. */
-.nx-motion:is([data-motion='from-start'], [data-motion='to-start']) { --nx-x: -24px; }
-.nx-motion:is([data-motion='from-end'], [data-motion='to-end']) { --nx-x: 24px; }
-
-/* Reduced motion: a designed fallback, not a cut. Keep the crossfade, drop
-   the travel and scale. */
-@media (prefers-reduced-motion: reduce) {
-  .nx-motion { --nx-x: 0px !important; --nx-y: 0px !important; --nx-scale: 1 !important; }
-}
-
-/* Stagger: children of .nx-stagger rise in one after another (40ms apart, up
-   to the 12th; later ones arrive with the 12th). Set --nx-stagger to change
-   the step. Re-key the parent to replay. */
-.nx-stagger > * {
-  --nx-y: 8px;
-  animation:
-    nx-fade-in var(--motion-spring-effects-default-duration) var(--motion-spring-effects-default-easing) both,
-    nx-move-in var(--motion-spring-spatial-default-duration) var(--motion-spring-spatial-default-easing) both;
-  animation-delay: calc(var(--nx-i, 0) * var(--nx-stagger, 40ms));
-}
-.nx-stagger > :nth-child(2) { --nx-i: 1; }
-.nx-stagger > :nth-child(3) { --nx-i: 2; }
-.nx-stagger > :nth-child(4) { --nx-i: 3; }
-.nx-stagger > :nth-child(5) { --nx-i: 4; }
-.nx-stagger > :nth-child(6) { --nx-i: 5; }
-.nx-stagger > :nth-child(7) { --nx-i: 6; }
-.nx-stagger > :nth-child(8) { --nx-i: 7; }
-.nx-stagger > :nth-child(9) { --nx-i: 8; }
-.nx-stagger > :nth-child(10) { --nx-i: 9; }
-.nx-stagger > :nth-child(11) { --nx-i: 10; }
-.nx-stagger > :nth-child(n + 12) { --nx-i: 11; }
-
-/* ListTransition items: grow in from zero height and fade in; exit collapses
-   and fades (quicker, no overshoot). Rows animate via grid-template-rows so
-   the item needs no measured height. */
-.nx-list-item { display: grid; grid-template-rows: 1fr; }
-.nx-list-item-inner { min-height: 0; overflow: hidden; }
-@keyframes nx-rows-in { from { grid-template-rows: 0fr; } }
-@keyframes nx-rows-out { to { grid-template-rows: 0fr; } }
-.nx-list-item[data-state='enter'] {
-  animation:
-    nx-rows-in var(--motion-spring-spatial-default-duration) var(--motion-spring-spatial-default-easing),
-    nx-fade-in var(--motion-spring-effects-default-duration) var(--motion-spring-effects-default-easing);
-}
-.nx-list-item[data-state='exit'] {
-  pointer-events: none;
-  animation:
-    nx-rows-out var(--motion-spring-effects-default-duration) var(--motion-spring-effects-default-easing) forwards,
-    nx-fade-out var(--motion-spring-effects-fast-duration) var(--motion-spring-effects-fast-easing) forwards;
-}
-
-/* SkeletonSwap: skeleton and content share one grid cell and crossfade. */
-.nx-swap { display: grid; }
-.nx-swap > * { grid-area: 1 / 1; min-width: 0; }
-.nx-swap-in { animation: nx-fade-in var(--motion-spring-effects-default-duration) var(--motion-spring-effects-default-easing) both; }
-.nx-swap-out {
-  pointer-events: none;
-  animation: nx-fade-out var(--motion-spring-effects-default-duration) var(--motion-spring-effects-default-easing) forwards;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .nx-stagger > * { --nx-y: 0px; animation-delay: 0s; }
-  .nx-list-item[data-state='enter'] { animation: nx-fade-in var(--motion-spring-effects-default-duration) var(--motion-spring-effects-default-easing); }
-  .nx-list-item[data-state='exit'] { animation: nx-fade-out var(--motion-spring-effects-fast-duration) var(--motion-spring-effects-fast-easing) forwards; }
-}
-
-/* ─── Cards: lift, press, sheen ──────────────────────────────────────────────
-   Lift: hover raises 2px on the spatial spring with elevation 1 → 2; leaving
-   settles faster on the effects spring (a transition uses the *destination*
-   state's timing). Press sinks to 0.99. Hover only where a real pointer
-   hovers, so touch never gets a stuck lift. */
-.nx-lift {
-  transition:
-    translate var(--motion-spring-effects-fast-duration) var(--motion-spring-effects-fast-easing),
-    scale var(--motion-spring-effects-fast-duration) var(--motion-spring-effects-fast-easing),
-    box-shadow var(--motion-spring-effects-fast-duration) var(--motion-spring-effects-fast-easing);
-}
-@media (hover: hover) {
-  .nx-lift:hover {
-    translate: 0 -2px;
-    transition:
-      translate var(--motion-spring-spatial-default-duration) var(--motion-spring-spatial-default-easing),
-      scale var(--motion-spring-spatial-fast-duration) var(--motion-spring-spatial-fast-easing),
-      box-shadow var(--motion-spring-effects-default-duration) var(--motion-spring-effects-default-easing);
-  }
-  /* Glass keeps its own shadow (it carries the specular edge). */
-  .nx-lift:not([data-material='glass']):hover { box-shadow: var(--elevation-2); }
-}
-.nx-lift:active { translate: 0 0; scale: 0.99; }
-@media (prefers-reduced-motion: reduce) {
-  .nx-lift:hover, .nx-lift:active { translate: none; scale: none; }
-}
-
-/* Sheen (opt-in): a soft light that follows the pointer across the surface,
-   plus a brighter rim where the pointer is nearest the edge. JS sets
-   --nx-mx/--nx-my through the CSSOM (CSP-safe); --nx-sheen fades it in.
-   Primary-tinted on light surfaces, white on dark and on glass. Off for touch
-   (no hover), reduced motion and reduced transparency. */
-@property --nx-sheen { syntax: '<number>'; inherits: true; initial-value: 0; }
-.nx-sheen {
-  position: relative;
-  --nx-sheen-tint: light-dark(var(--color-primary), #fff);
-  background-image: radial-gradient(
-    28rem circle at var(--nx-mx, 50%) var(--nx-my, 0%),
-    color-mix(in srgb, var(--nx-sheen-tint) calc(var(--nx-sheen) * 9%), transparent),
-    transparent 70%
-  );
-  transition: --nx-sheen var(--motion-spring-effects-fast-duration) var(--motion-spring-effects-fast-easing);
-}
-.nx-sheen::after {
-  content: '';
-  position: absolute;
-  inset: -1px;
-  padding: 1px;
-  border-radius: inherit;
-  pointer-events: none;
-  background: radial-gradient(
-    14rem circle at var(--nx-mx, 50%) var(--nx-my, 0%),
-    color-mix(in srgb, var(--nx-sheen-tint) calc(var(--nx-sheen) * 70%), transparent),
-    transparent 70%
-  );
-  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-  -webkit-mask-composite: xor;
-  mask-composite: exclude;
-}
-[data-material='glass'].nx-sheen { --nx-sheen-tint: #fff; }
-/* On a sheen surface the light is the hover feedback; the grey state layer
-   would wash it out. Press still darkens. */
-.nx-sheen.nx-state-layer:hover:not(:active)::before { opacity: 0; }
-@media (hover: hover) and (prefers-reduced-motion: no-preference) {
-  .nx-sheen:hover {
-    --nx-sheen: 1;
-    transition: --nx-sheen var(--motion-spring-effects-default-duration) var(--motion-spring-effects-default-easing);
-  }
-}
-@media (prefers-reduced-transparency: reduce) {
-  .nx-sheen { background-image: none; }
-  .nx-sheen::after { display: none; }
-}
-
-/* ─── AI: thinking indicator ─────────────────────────────────────────────────
-   nx-morph: a small shape that breathes between a circle and a soft squircle
-   on the expressive spring. nx-shimmer: a decorative light sweep across label
-   text (the text stays in the DOM). Reduced motion: both static. */
-@keyframes nx-morph {
-  from { border-radius: 50%; rotate: 0deg; }
-  to { border-radius: 38% 62% 38% 62% / 62% 38% 62% 38%; rotate: 90deg; }
-}
-@keyframes nx-shimmer {
-  from { background-position: 100% 0; }
-  to { background-position: -100% 0; }
-}
-@media (prefers-reduced-motion: no-preference) {
-  .nx-morph {
-    animation: nx-morph calc(var(--motion-spring-expressive-slow-duration) * 2)
-      var(--motion-spring-expressive-slow-easing) infinite alternate;
-  }
-  .nx-shimmer {
-    background-image: linear-gradient(90deg,
-      currentColor 0%, currentColor 40%, var(--color-on-surface) 50%, currentColor 60%, currentColor 100%);
-    background-size: 200% 100%;
-    -webkit-background-clip: text;
-    background-clip: text;
-    -webkit-text-fill-color: transparent;
-    /* A steady sweep: linear, not a spring (a spring would pulse each loop). */
-    animation: nx-shimmer 2s linear infinite;
-  }
-}
-@media (forced-colors: active) {
-  .nx-shimmer { background: none; -webkit-text-fill-color: currentColor; }
-}
-
-/* Streaming caret: a steady blink while text is arriving. */
-@keyframes nx-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
-.nx-caret { animation: nx-caret 1s steps(1, end) infinite; }
-@media (prefers-reduced-motion: reduce) {
-  .nx-caret { animation: none; }
-}
-
-/* ─── Touch targets ─────────────────────────────────────────────────────────
-   Small controls keep their visual size but get an invisible 44×44 hit area
-   on touch screens (Apple HIG, WCAG 2.5.5). Uses ::after; the state layer
-   uses ::before. */
-@media (pointer: coarse) {
-  .nx-hit { position: relative; }
-  .nx-hit::after {
-    content: '';
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    width: max(100%, 44px);
-    height: max(100%, 44px);
-    translate: -50% -50%;
-  }
-}
-
-/* ─── Micro-moments ──────────────────────────────────────────────────────────
-   Reveal: content replacing a skeleton crossfades in (no travel). */
-.nx-reveal {
-  animation: nx-fade-in var(--motion-spring-effects-default-duration) var(--motion-spring-effects-default-easing);
-}
-/* Check draw: a checkmark path (pathLength="1") draws itself in. */
-@keyframes nx-draw { from { stroke-dashoffset: 1; } }
-.nx-check-draw {
-  stroke-dasharray: 1;
-  animation: nx-draw var(--motion-spring-effects-default-duration) var(--motion-spring-effects-default-easing);
-}
-@media (prefers-reduced-motion: reduce) {
-  .nx-check-draw { animation: none; }
-}
-/* Shake: a short horizontal "no" on the spatial-fast spring (async Button error). */
-@keyframes nx-shake {
-  0%, 100% { translate: 0; }
-  20% { translate: -4px; }
-  40% { translate: 4px; }
-  60% { translate: -3px; }
-  80% { translate: 2px; }
-}
-.nx-shake {
-  animation: nx-shake var(--motion-spring-spatial-fast-duration) var(--motion-spring-spatial-fast-easing);
-}
-@media (prefers-reduced-motion: reduce) {
-  .nx-shake { animation: none; }
-}
-
-/* ─── Density ────────────────────────────────────────────────────────────────
-   Compact shifts every control one step down the ladder (md 40 → 32). */
-[data-density='compact'] {
-  --size-control-xs: 20px;
-  --size-control-sm: 24px;
-  --size-control-md: 32px;
-  --size-control-lg: 40px;
-  --size-control-xl: 48px;
-}
-
-/* Logo-scroll marquee keyframe (used by LogoWall) */
-@keyframes logo-scroll {
-  from { transform: translateX(0); }
-  to   { transform: translateX(-50%); }
-}
-
-/* ─── App header (@nexub/patterns AppHeader) ─────────────────────────────────
-   One height for the fixed top header everywhere. Offset layouts with
-   var(--app-header-height); AppHeader's own spacer already does in flow. */
-:root { --app-header-height: 64px; }
-/* condense: scroll-driven, no JS. The page spacer stays 64px; only the bar
-   tightens. Glass keeps its own shadow. */
-@keyframes nx-condense { to { height: 52px; } }
-@keyframes nx-condense-lift { to { height: 52px; box-shadow: var(--elevation-1); } }
-@supports (animation-timeline: scroll()) {
-  [data-condense] {
-    animation: nx-condense-lift linear both;
-    animation-timeline: scroll(root);
-    animation-range: 0 64px;
-  }
-  [data-condense][data-material='glass'] { animation-name: nx-condense; }
-}
-
-/* ─── Scroll lock (Sheet scrollLock="class") ─────────────────────────────────
-   A CSP-safe page scroll lock: @nexub/react toggles these classes on <html>
-   instead of injecting a <style> tag. The gutter class keeps the scrollbar's
-   space so the page doesn't shift sideways. */
-html.nexub-scroll-lock { overflow: hidden; }
-html.nexub-scroll-lock.nexub-scroll-gutter { scrollbar-gutter: stable; }
-
-/* ─── Nexub mark gradient stops (<NexubMark variant="color">, <Logo>) ───────
-   Classes instead of style= attributes, which a strict CSP blocks in
-   server-rendered HTML. */
-/* nexub-mark-stops:start — generated by packages/brand/scripts/build-assets.mjs */
-.nxm-s-1{stop-color:var(--color-brand-mark-1)}
-.nxm-s-2{stop-color:var(--color-brand-mark-2)}
-.nxm-s-3{stop-color:var(--color-brand-mark-3)}
-.nxm-s-4{stop-color:var(--color-brand-mark-4)}
-.nxm-s-5{stop-color:var(--color-brand-mark-5)}
-.nxm-s-6{stop-color:var(--color-brand-mark-6)}
-.nxm-s-7{stop-color:var(--color-brand-mark-7)}
-.nxm-s-8{stop-color:var(--color-brand-mark-8)}
-.nxm-s-9{stop-color:var(--color-brand-mark-9)}
-.nxm-s-10{stop-color:var(--color-brand-mark-10)}
-.nxm-s-11{stop-color:var(--color-brand-mark-11)}
-.nxm-s-12{stop-color:var(--color-brand-mark-12)}
-.nxm-s-13{stop-color:var(--color-brand-mark-13)}
-.nxm-s-14{stop-color:var(--color-brand-mark-14)}
-.nxm-s-15{stop-color:var(--color-brand-mark-15)}
-.nxm-s-16{stop-color:var(--color-brand-mark-16)}
-.nxm-s-17{stop-color:var(--color-brand-mark-17)}
-.nxm-s-18{stop-color:var(--color-brand-mark-18)}
-.nxm-s-19{stop-color:var(--color-brand-mark-19)}
-.nxm-s-20{stop-color:var(--color-brand-mark-20)}
-.nxm-s-21{stop-color:var(--color-brand-mark-21)}
-.nxm-s-22{stop-color:var(--color-brand-mark-22)}
-.nxm-s-23{stop-color:var(--color-brand-mark-23)}
-.nxm-s-24{stop-color:var(--color-brand-mark-24)}
-.nxm-s-25{stop-color:var(--color-brand-mark-25)}
-.nxm-s-26{stop-color:var(--color-brand-mark-26)}
-.nxm-s-27{stop-color:var(--color-brand-mark-27)}
-.nxm-s-28{stop-color:var(--color-brand-mark-28)}
-.nxm-s-29{stop-color:var(--color-brand-mark-29)}
-.nxm-s-30{stop-color:var(--color-brand-mark-30)}
-.nxm-s-31{stop-color:var(--color-brand-mark-31)}
-.nxm-s-32{stop-color:var(--color-brand-mark-32)}
-.nxm-s-33{stop-color:var(--color-brand-mark-33)}
-.nxm-s-34{stop-color:var(--color-brand-mark-34)}
-.nxm-s-35{stop-color:var(--color-brand-mark-35)}
-.nxm-s-36{stop-color:var(--color-brand-mark-36)}
-.nxm-s-37{stop-color:var(--color-brand-mark-37)}
-.nxm-s-38{stop-color:var(--color-brand-mark-38)}
-.nxm-s-39{stop-color:var(--color-brand-mark-39)}
-.nxm-s-40{stop-color:var(--color-brand-mark-40)}
-.nxm-s-41{stop-color:var(--color-brand-mark-41)}
-.nxm-s-42{stop-color:var(--color-brand-mark-42)}
-.nxm-s-43{stop-color:var(--color-brand-mark-43)}
-.nxm-s-44{stop-color:var(--color-brand-mark-44)}
-.nxm-s-45{stop-color:var(--color-brand-mark-45)}
-.nxm-s-46{stop-color:var(--color-brand-mark-46)}
-.nxm-s-47{stop-color:var(--color-brand-mark-47)}
-.nxm-o-0{stop-opacity:0}
-/* nexub-mark-stops:end */
-
-/* ─── Radix ScrollArea / Select viewports ────────────────────────────────────
-   Radix renders these rules in a <style> tag, which a strict CSP blocks. The
-   same rules here keep the native scrollbar hidden either way. */
-[data-radix-scroll-area-viewport],[data-radix-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
-[data-radix-scroll-area-viewport]::-webkit-scrollbar,[data-radix-select-viewport]::-webkit-scrollbar{display:none}
-
-/* ─── Drawer / Sheet (vaul 1.1.2) ─────────────────────────────────────────────
-   vaul's own styles. vaul normally injects these in a <style> tag when
-   @nexub/react loads, which strict CSP pages block; @nexub/react strips that
-   and ships them here instead. Verbatim copy: the @nexub/react build fails if
-   it no longer matches vaul. One rule is left out: vaul's invalid
-   `[data-vaul-handle-hitarea]:{…}` media rule, which browsers ignore and strict
-   CSS parsers (lightningcss, Turbopack) reject. */
-[data-vaul-drawer]{touch-action:none;will-change:transform;transition:transform .5s cubic-bezier(.32, .72, 0, 1);animation-duration:.5s;animation-timing-function:cubic-bezier(0.32,0.72,0,1)}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=bottom][data-state=open]{animation-name:slideFromBottom}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=bottom][data-state=closed]{animation-name:slideToBottom}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=top][data-state=open]{animation-name:slideFromTop}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=top][data-state=closed]{animation-name:slideToTop}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=left][data-state=open]{animation-name:slideFromLeft}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=left][data-state=closed]{animation-name:slideToLeft}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=right][data-state=open]{animation-name:slideFromRight}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=right][data-state=closed]{animation-name:slideToRight}[data-vaul-drawer][data-vaul-snap-points=true][data-vaul-drawer-direction=bottom]{transform:translate3d(0,var(--initial-transform,100%),0)}[data-vaul-drawer][data-vaul-snap-points=true][data-vaul-drawer-direction=top]{transform:translate3d(0,calc(var(--initial-transform,100%) * -1),0)}[data-vaul-drawer][data-vaul-snap-points=true][data-vaul-drawer-direction=left]{transform:translate3d(calc(var(--initial-transform,100%) * -1),0,0)}[data-vaul-drawer][data-vaul-snap-points=true][data-vaul-drawer-direction=right]{transform:translate3d(var(--initial-transform,100%),0,0)}[data-vaul-drawer][data-vaul-delayed-snap-points=true][data-vaul-drawer-direction=top]{transform:translate3d(0,var(--snap-point-height,0),0)}[data-vaul-drawer][data-vaul-delayed-snap-points=true][data-vaul-drawer-direction=bottom]{transform:translate3d(0,var(--snap-point-height,0),0)}[data-vaul-drawer][data-vaul-delayed-snap-points=true][data-vaul-drawer-direction=left]{transform:translate3d(var(--snap-point-height,0),0,0)}[data-vaul-drawer][data-vaul-delayed-snap-points=true][data-vaul-drawer-direction=right]{transform:translate3d(var(--snap-point-height,0),0,0)}[data-vaul-overlay][data-vaul-snap-points=false]{animation-duration:.5s;animation-timing-function:cubic-bezier(0.32,0.72,0,1)}[data-vaul-overlay][data-vaul-snap-points=false][data-state=open]{animation-name:fadeIn}[data-vaul-overlay][data-state=closed]{animation-name:fadeOut}[data-vaul-animate=false]{animation:none!important}[data-vaul-overlay][data-vaul-snap-points=true]{opacity:0;transition:opacity .5s cubic-bezier(.32, .72, 0, 1)}[data-vaul-overlay][data-vaul-snap-points=true]{opacity:1}[data-vaul-drawer]:not([data-vaul-custom-container=true])::after{content:'';position:absolute;background:inherit;background-color:inherit}[data-vaul-drawer][data-vaul-drawer-direction=top]::after{top:initial;bottom:100%;left:0;right:0;height:200%}[data-vaul-drawer][data-vaul-drawer-direction=bottom]::after{top:100%;bottom:initial;left:0;right:0;height:200%}[data-vaul-drawer][data-vaul-drawer-direction=left]::after{left:initial;right:100%;top:0;bottom:0;width:200%}[data-vaul-drawer][data-vaul-drawer-direction=right]::after{left:100%;right:initial;top:0;bottom:0;width:200%}[data-vaul-overlay][data-vaul-snap-points=true]:not([data-vaul-snap-points-overlay=true]):not(
-[data-state=closed]
-){opacity:0}[data-vaul-overlay][data-vaul-snap-points-overlay=true]{opacity:1}[data-vaul-handle]{display:block;position:relative;opacity:.7;background:#e2e2e4;margin-left:auto;margin-right:auto;height:5px;width:32px;border-radius:1rem;touch-action:pan-y}[data-vaul-handle]:active,[data-vaul-handle]:hover{opacity:1}[data-vaul-handle-hitarea]{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100%,2.75rem);height:max(100%,2.75rem);touch-action:inherit}@media (hover:hover) and (pointer:fine){[data-vaul-drawer]{user-select:none}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{to{opacity:0}}@keyframes slideFromBottom{from{transform:translate3d(0,var(--initial-transform,100%),0)}to{transform:translate3d(0,0,0)}}@keyframes slideToBottom{to{transform:translate3d(0,var(--initial-transform,100%),0)}}@keyframes slideFromTop{from{transform:translate3d(0,calc(var(--initial-transform,100%) * -1),0)}to{transform:translate3d(0,0,0)}}@keyframes slideToTop{to{transform:translate3d(0,calc(var(--initial-transform,100%) * -1),0)}}@keyframes slideFromLeft{from{transform:translate3d(calc(var(--initial-transform,100%) * -1),0,0)}to{transform:translate3d(0,0,0)}}@keyframes slideToLeft{to{transform:translate3d(calc(var(--initial-transform,100%) * -1),0,0)}}@keyframes slideFromRight{from{transform:translate3d(var(--initial-transform,100%),0,0)}to{transform:translate3d(0,0,0)}}@keyframes slideToRight{to{transform:translate3d(var(--initial-transform,100%),0,0)}}
-
-/* Drawer / Sheet on our springs. vaul's copy above stays verbatim (tsup checks
-   it); these override its .5s iOS curve. Enter rides spatial, exit is quicker
-   on effects and never overshoots. Placed after vaul's rules so ties win. */
-.nx-drawer[data-vaul-drawer][data-vaul-snap-points='false'] {
-  animation-duration: var(--motion-spring-spatial-default-duration);
-  animation-timing-function: var(--motion-spring-spatial-default-easing);
-}
-.nx-drawer[data-vaul-drawer][data-vaul-snap-points='false'][data-state='closed'] {
-  animation-duration: var(--motion-spring-effects-default-duration);
-  animation-timing-function: var(--motion-spring-effects-default-easing);
-}
-.nx-drawer-overlay[data-vaul-overlay][data-vaul-snap-points='false'] {
-  animation-duration: var(--motion-spring-effects-default-duration);
-  animation-timing-function: var(--motion-spring-effects-default-easing);
-}
-.nx-drawer-overlay[data-vaul-overlay][data-state='closed'] {
-  animation-duration: var(--motion-spring-effects-fast-duration);
-  animation-timing-function: var(--motion-spring-effects-fast-easing);
-}
-/* Reduced motion: the panel fades instead of sliding. */
-@media (prefers-reduced-motion: reduce) {
-  .nx-drawer[data-vaul-drawer][data-vaul-snap-points='false'][data-state='open'] { animation-name: fadeIn; }
-  .nx-drawer[data-vaul-drawer][data-vaul-snap-points='false'][data-state='closed'] { animation-name: fadeOut; }
-}