/* what: CEDUIX UI stylesheet — 96-token LLM-optimal component framework + chart engine, single file
   concepts: css, design-system, oklch, color-mix, light-dark, layer, property, components, tokens, charts
   ═══════════════════════════════════════════════════════════
   CEDUIX UI  v1.5.0  —  The LLM-Optimal Component Framework
   One attribute. Every component. Zero imports.
   Part of CEDUIX (~/dev/ceduix/)  ·  MIT License
   ═══════════════════════════════════════════════════════════
   USAGE:  <div ui="card elevated">...</div>
   VOCAB:  100 words  ·  max 4 per ui attribute
   CHARTS: ced.chart(el, data, keys) — line/area/bar/scatter/pie
   ═══════════════════════════════════════════════════════════
   v1.5.0: Blog reading surface — three composable tokens.
           `ui="hero"` recipe (cover+center+stack+stagger in one
           word), `ui="reading-progress"` (sticky 2px accent bar
           driven by scroll position via --progress custom prop),
           `ui="drop-cap"` (::first-letter editorial drop-cap on
           prose first paragraph, gradient-clipped to --ac).
           Designed for cedricflodin/blog + ceduix showcase —
           NOT for NervIQ customer-pages (kept narrow on purpose).
   v1.4.0: Premium polish — refined button (gradient + inset
           highlight + Outfit medium), glass-nav with warm soft
           shadow, warm-tinted card shadows (NervIQ family),
           new `ui="premium"` modifier with shimmer reveal +
           accent-glow hover, enhanced `ui="glass"` (40px blur +
           saturate 180% + inset glow), tabular-nums extended
           to stat/metric/num/td. Cascade-overrides v1.3.1
           baselines from inside @layer ceduix.
   v1.3.1: Outfit-first display + body, Inter fallback (matches
           NervIQ SPA family across the managed-repo fleet).
           Consumers MUST load both via Google Fonts:
             family=Inter:wght@300;400;500;600
             family=Outfit:wght@300;400;500;600;700
           --f-mono stays Inter — eyebrow/code keep small-caps feel.
   v1.3: ced-charts merged — 12-color palette, glass tooltip,
         synced crosshair, legend toggle, heatmap
   v1.2: +13 platform-native primitives (dialog, popover,
         tabs, accordion, switch, progress, skeleton,
         avatar, breadcrumb, table)
   v1.1: @layer, OKLCH, color-mix(), light-dark(),
         @starting-style, @property
   ═══════════════════════════════════════════════════════════ */

/* ── @property — smooth animated theme transitions ───────── */
@property --bg-base  { syntax: '<color>'; inherits: true; initial-value: oklch(0.97 0.006 80); }
@property --tx-base  { syntax: '<color>'; inherits: true; initial-value: oklch(0.18 0.010 70); }
@property --ac-base  { syntax: '<color>'; inherits: true; initial-value: oklch(0.50 0.12 70); }
@property --ok-base  { syntax: '<color>'; inherits: true; initial-value: oklch(0.70 0.134 166); }
@property --wr-base  { syntax: '<color>'; inherits: true; initial-value: oklch(0.76 0.152 75); }
@property --er-base  { syntax: '<color>'; inherits: true; initial-value: oklch(0.62 0.205 26); }
@property --in-base  { syntax: '<color>'; inherits: true; initial-value: oklch(0.65 0.161 257); }

/* ── @property --hue — parametric color engine ──────────────
   Change ONE number → entire accent palette recomputes.
   Animatable: transition --hue smoothly between brand colors.
   No framework can do this. OKLCH hue rotation is perceptually uniform.
   --hue: 70 = gold, 200 = ocean, 340 = rose, 140 = forest, 270 = violet */
@property --hue { syntax: '<number>'; inherits: true; initial-value: 70; }

@layer ceduix {

/* ── TOKENS ───────────────────────────────────────────────── */
:root {
  color-scheme: light dark;

  /* Spacing */
  --s-1:.25rem;  --s-2:.5rem;   --s-3:.75rem;  --s-4:1rem;
  --s-5:1.25rem; --s-6:1.5rem;  --s-8:2rem;    --s-10:2.5rem;
  --s-12:3rem;   --s-16:4rem;   --s-20:5rem;   --s-24:6rem;

  /* Base colors (OKLCH) — cream white, warm dark, gold
     Fallback: light-mode value for browsers without light-dark() (~13%) */
  --bg-base:  oklch(0.97 0.006 80);
  --bg-base:  light-dark(oklch(0.97 0.006 80), oklch(0.16 0.015 70));
  --tx-base:  oklch(0.18 0.010 70);
  --tx-base:  light-dark(oklch(0.18 0.010 70), oklch(0.92 0.010 82));
  /* Accent derived from --hue (parametric). Change --hue → new palette. */
  --ac-base:  oklch(0.50 0.12 var(--hue));
  --ac-base:  light-dark(oklch(0.50 0.12 var(--hue)), oklch(0.73 0.089 var(--hue)));

  /* Harmony colors — computed from --hue, no manual palette needed */
  --comp:    oklch(0.65 0.08 calc(var(--hue) + 180));
  --analog1: oklch(0.70 0.07 calc(var(--hue) + 30));
  --analog2: oklch(0.70 0.07 calc(var(--hue) - 30));
  --ok-base:  oklch(0.70 0.134 166);
  --wr-base:  oklch(0.76 0.152 75);
  --er-base:  oklch(0.62 0.205 26);
  --in-base:  oklch(0.65 0.161 257);

  /* Derived: backgrounds */
  --bg-0: var(--bg-base);
  --bg-1: color-mix(in oklch, var(--bg-base), var(--tx-base) 4%);
  --bg-2: color-mix(in oklch, var(--bg-base), var(--tx-base) 8%);
  --bg-3: color-mix(in oklch, var(--bg-base), var(--tx-base) 12%);
  --bg-4: color-mix(in oklch, var(--bg-base), var(--tx-base) 17%);

  /* Derived: borders */
  --bdr-0: color-mix(in oklch, var(--tx-base) 4%, transparent);
  --bdr-1: color-mix(in oklch, var(--tx-base) 8%, transparent);
  --bdr-2: color-mix(in oklch, var(--tx-base) 14%, transparent);
  --bdr-3: color-mix(in oklch, var(--tx-base) 22%, transparent);

  /* Derived: text */
  --tx-0: var(--tx-base);
  --tx-1: color-mix(in oklch, var(--tx-base) 75%, var(--bg-base));
  --tx-2: color-mix(in oklch, var(--tx-base) 50%, var(--bg-base));
  --tx-3: color-mix(in oklch, var(--tx-base) 32%, var(--bg-base));

  /* Derived: accent */
  --ac:    var(--ac-base);
  --ac-hi: color-mix(in oklch, var(--ac-base), white 20%);
  --ac-lo: color-mix(in oklch, var(--ac-base), black 30%);
  --ac-bg: color-mix(in oklch, var(--ac-base) 10%, transparent);
  --ac-gl: color-mix(in oklch, var(--ac-base) 18%, transparent);

  /* Derived: semantic */
  --ok: var(--ok-base);  --ok-bg: color-mix(in oklch, var(--ok-base) 10%, transparent);
  --wr: var(--wr-base);  --wr-bg: color-mix(in oklch, var(--wr-base) 10%, transparent);
  --er: var(--er-base);  --er-bg: color-mix(in oklch, var(--er-base) 10%, transparent);
  --in: var(--in-base);  --in-bg: color-mix(in oklch, var(--in-base) 10%, transparent);

  /* Chart palette — 12 series colors for ced-charts */
  --ch-1:#3b82f6; --ch-2:#ef4444; --ch-3:#22c55e; --ch-4:#f59e0b;
  --ch-5:#8b5cf6; --ch-6:#ec4899; --ch-7:#06b6d4; --ch-8:#f97316;
  --ch-9:#14b8a6; --ch-10:#a855f7; --ch-11:#6366f1; --ch-12:#84cc16;
  /* Chart chrome — dark glass tooltip, subtle grid (premium look) */
  --ch-grid: rgba(255,255,255,.08);
  --ch-grid: light-dark(rgba(26,21,16,.10), rgba(255,255,255,.08));
  --ch-axis: rgba(255,255,255,.75);
  --ch-axis: light-dark(rgba(26,21,16,.75), rgba(255,255,255,.75));
  --ch-tip-bg: rgba(9,8,13,.82);
  --ch-tip-bg: light-dark(rgba(9,8,13,.82), rgba(9,8,13,.88));
  --ch-tip-bdr: rgba(255,255,255,.10);
  --ch-tip-bdr: light-dark(rgba(196,162,101,.12), rgba(255,255,255,.10));

  /* Radii */
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:18px;

  /* Fonts — Outfit-first display + body (humanist, tabular-nums via OpenType),
     Inter fallback if Outfit fails to load, then system-ui.
     --f-mono stays Inter so eyebrow + inline code keep the small-caps feel
     Outfit can't match. Single visual family across the managed-repo fleet:
     ceduix attribute pages + NervIQ shadcn SPAs both resolve to Outfit. */
  --f-ui:'Outfit','Inter',system-ui,sans-serif;
  --f-mono:'Inter',system-ui,sans-serif;
  --f-disp:'Outfit','Inter',system-ui,sans-serif;

  /* Shadows — light-dark for appropriate depth (fallback: light values) */
  --sh-sm: 0 1px 3px oklch(0 0 0/.15);
  --sh-sm: light-dark(0 1px 3px oklch(0 0 0/.15), 0 1px 3px oklch(0 0 0/.5));
  --sh-md: 0 4px 16px oklch(0 0 0/.12);
  --sh-md: light-dark(
    0 4px 16px oklch(0 0 0/.12) ,
    0 4px 16px oklch(0 0 0/.6)
  );
  --sh-lg: 0 12px 48px oklch(0 0 0/.15);
  --sh-lg: light-dark(
    0 12px 48px oklch(0 0 0/.15),
    0 12px 48px oklch(0 0 0/.7)
  );
  --sh-ac: 0 0 0 1px var(--ac-lo), 0 4px 24px var(--ac-gl);

  /* Glass */
  --glass-bg: oklch(0.16 0.030 261 / 0.75);
  --glass-bdr: color-mix(in oklch, var(--ac-base) 8%, transparent);

  /* Motion */
  --ease:cubic-bezier(0.16,1,0.3,1);
  --t-fast:.12s; --t-mid:.22s; --t-slow:.4s;

  /* Theme + hue transition — animate between brand palettes */
  transition: --bg-base var(--t-slow) var(--ease),
              --tx-base var(--t-slow) var(--ease),
              --ac-base var(--t-slow) var(--ease),
              --hue var(--t-slow) var(--ease);
}

/* ── DENSITY — one attribute reshapes entire UI ──────────── */
/* No framework does this. compact for dashboards, spacious for landing. */
[data-density="compact"] {
  --s-1:.15rem; --s-2:.35rem; --s-3:.5rem;  --s-4:.7rem;
  --s-5:.9rem;  --s-6:1.1rem; --s-8:1.5rem; --s-10:1.85rem;
  --s-12:2.25rem; --s-16:3rem; --s-20:3.75rem; --s-24:4.5rem;
  font-size:.875rem; --r-sm:3px; --r-md:6px; --r-lg:8px; --r-xl:12px;
}
[data-density="spacious"] {
  --s-1:.35rem; --s-2:.65rem; --s-3:1rem;  --s-4:1.35rem;
  --s-5:1.65rem; --s-6:2rem;  --s-8:2.75rem; --s-10:3.5rem;
  --s-12:4rem; --s-16:5.5rem; --s-20:7rem; --s-24:8.5rem;
  font-size:1.1rem; --r-sm:6px; --r-md:12px; --r-lg:16px; --r-xl:24px;
}

/* ── CONTAINER-ADAPTIVE — components reshape to their container ── */
/* Layouts become container query contexts. Children adapt to container, not viewport. */
[ui~="grid"],
[ui~="sidebar"],
[ui~="contain"]  { container-type:inline-size }

@container (max-width:24rem) {
  [ui~="cluster"]  { flex-direction:column;align-items:stretch }
  [ui~="stat"]     { font-size:clamp(1.5rem,3vw,2rem) }
  [ui~="heading"]  { font-size:1.2rem }
  [ui~="button"]   { width:100% }
}

/* ── RESET ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img,svg{display:block;max-width:100%}
button{cursor:pointer;border:none;background:none;font:inherit}
input,select,textarea{font:inherit}

/* ── PAGE ─────────────────────────────────────────────────── */
[ui~="page"]{
  font-family:var(--f-ui);font-size:1rem;line-height:1.6;
  color:var(--tx-0);background:var(--bg-0);min-height:100vh;
}

/* ── LAYOUT ───────────────────────────────────────────────── */
[ui~="stack"]   {display:flex;flex-direction:column;gap:var(--s-4)}
[ui~="cluster"] {display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}
[ui~="grid"]    {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr));gap:var(--s-4)}
[ui~="center"]  {display:grid;place-items:center;text-align:center}
[ui~="sidebar"] {display:grid;grid-template-columns:auto 1fr;align-items:start}
[ui~="cover"]   {display:flex;flex-direction:column;min-height:100vh}
[ui~="section"] {padding:var(--s-16) clamp(var(--s-6),5vw,var(--s-16))}
[ui~="contain"] {max-width:72rem;margin-inline:auto;width:100%}

/* Gap modifiers */
[ui~="sm"] {gap:var(--s-2)}
[ui~="md"] {gap:var(--s-4)}
[ui~="lg"] {gap:var(--s-8)}
[ui~="xl"] {gap:var(--s-12)}

/* Flex alignment modifiers */
[ui~="between"] {justify-content:space-between}
[ui~="end"]     {justify-content:flex-end}

/* Spacing modifiers */
[ui~="pad"]     {padding-block:var(--s-8)}
[ui~="loose"]   {gap:var(--s-8)}
[ui~="tight"]   {gap:.4rem}

/* Opacity modifiers */
[ui~="dim"]     {opacity:.6}
[ui~="faint"]   {opacity:.35}

/* Button size modifiers */
[ui~="button"][ui~="sm"] {padding:.25rem .75rem;font-size:.8rem}
[ui~="button"][ui~="xs"] {padding:.15rem .6rem;font-size:.75rem}

/* Data cell tokens (use on BOTH <th> and <td> — alignment must match) */
[ui~="num"]  {text-align:right;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
[ui~="addr"] {font-size:.75rem;color:var(--tx-3);white-space:nowrap}

/* ── SURFACES ─────────────────────────────────────────────── */
[ui~="card"] {
  background:var(--bg-2);border:1px solid var(--bdr-1);
  border-radius:var(--r-lg);padding:var(--s-6);
  transition:border-color var(--t-mid) var(--ease);
}
[ui~="card"]:hover{border-color:var(--bdr-2)}
[ui~="panel"] {
  background:var(--bg-1);border:1px solid var(--bdr-1);
  border-radius:var(--r-xl);padding:var(--s-8);
}
[ui~="sheet"] {
  background:var(--bg-3);border-radius:var(--r-md);padding:var(--s-4);
}
[ui~="overlay"] {
  background:color-mix(in oklch, var(--bg-0) 85%, transparent);
  backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid var(--bdr-2);border-radius:var(--r-xl);

  /* @starting-style — native entry transition */
  transition: opacity var(--t-slow) var(--ease),
              transform var(--t-slow) var(--ease),
              display var(--t-slow) var(--ease) allow-discrete;
  @starting-style {
    opacity:0;
    transform:translateY(0.5rem) scale(0.98);
  }
}

/* Surface modifiers */
[ui~="elevated"] {box-shadow:var(--sh-md)}
[ui~="raised"]   {box-shadow:var(--sh-lg)}
[ui~="accent"]   {border-color:var(--ac-lo)!important;box-shadow:var(--sh-ac)}
[ui~="muted"]    {background:var(--bg-1);border-color:var(--bdr-0)}
[ui~="ghost"]    {background:transparent;border-color:transparent}
[ui~="outline"]  {background:transparent;border:1px solid var(--bdr-2)}
[ui~="glass"]    {background:var(--glass-bg,color-mix(in oklch, var(--bg-0) 75%, transparent));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-bdr,var(--bdr-1));box-shadow:0 4px 24px -2px oklch(0 0 0/.3)}

/* ── TYPOGRAPHY ───────────────────────────────────────────── */
[ui~="heading"] {
  font-family:var(--f-ui);font-size:clamp(1.5rem,3vw,2.25rem);
  font-weight:600;line-height:1.15;letter-spacing:-.02em;color:var(--tx-0);margin:0;
  text-wrap:balance;
}
[ui~="heading"][ui~="sm"] {font-size:1.1rem}
[ui~="heading"][ui~="lg"] {font-size:clamp(2rem,5vw,3.5rem);letter-spacing:-.03em}
[ui~="heading"][ui~="xl"] {font-size:clamp(2.5rem,7vw,5rem);letter-spacing:-.04em}

[ui~="subheading"] {
  font-size:clamp(1.1rem,2vw,1.4rem);font-weight:500;
  line-height:1.3;letter-spacing:-.015em;color:var(--tx-0);margin:0;
  text-wrap:balance;
}
[ui~="eyebrow"] {
  font-family:var(--f-mono);font-size:.65rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ac);
}
[ui~="body"]    {font-size:.9rem;line-height:1.7;color:var(--tx-1);font-weight:300;text-wrap:pretty}
[ui~="caption"] {font-size:.75rem;line-height:1.5;color:var(--tx-2);letter-spacing:.02em}
[ui~="caption"][ui~="outline"] {display:inline-flex;align-items:center;padding:.15em .55em;border-radius:var(--r-sm)}
[ui~="code"] {
  font-family:var(--f-mono);font-size:.82em;
  background:var(--bg-3);border:1px solid var(--bdr-1);
  border-radius:var(--r-sm);padding:.1em .4em;color:var(--ac-hi);
}
pre[ui~="code"] {
  padding:var(--s-5);font-size:.8rem;overflow-x:auto;
  border-radius:var(--r-lg);line-height:1.7;color:var(--tx-1);
}

/* ── BUTTON ───────────────────────────────────────────────── */
[ui~="button"] {
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  font-family:var(--f-ui);font-size:.875rem;font-weight:500;
  padding:.55em 1.2em;border-radius:var(--r-md);
  background:var(--ac);color:var(--bg-0);border:1px solid transparent;
  transition:background var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease);
  white-space:nowrap;user-select:none;letter-spacing:.01em;
}
[ui~="button"]:hover  {background:var(--ac-hi);transform:translateY(-1px);box-shadow:0 4px 16px var(--ac-gl)}
[ui~="button"]:active {transform:translateY(0);box-shadow:none}
[ui~="button"]:focus-visible {outline:2px solid var(--ac);outline-offset:2px}

[ui~="button"][ui~="outline"] {background:transparent;color:var(--tx-0);border-color:var(--bdr-2)}
[ui~="button"][ui~="outline"]:hover {border-color:var(--bdr-3);background:var(--bg-3)}
[ui~="button"][ui~="solid"]   {background:var(--ac);color:var(--bg-0);border-color:transparent}
[ui~="button"][ui~="solid"]:hover {background:var(--ac-hi)}
[ui~="button"][ui~="ghost"]   {background:transparent;color:var(--tx-1);border-color:transparent}
[ui~="button"][ui~="ghost"]:hover {background:var(--bg-3);color:var(--tx-0)}
[ui~="button"][ui~="muted"]   {background:var(--bg-3);color:var(--tx-1);border-color:var(--bdr-1)}
[ui~="button"][ui~="muted"]:hover {background:var(--bg-4);color:var(--tx-0)}
[ui~="button"][ui~="danger"]  {background:var(--er);color:var(--bg-0)}
[ui~="button"][ui~="danger"]:hover {background:color-mix(in oklch, var(--er-base), white 15%)}

[ui~="button"][ui~="sm"] {font-size:.78rem;padding:.4em .9em;border-radius:var(--r-sm)}
[ui~="button"][ui~="lg"] {font-size:1rem;padding:.7em 1.6em;border-radius:var(--r-lg)}
[ui~="button"]:disabled,[ui~="button"][aria-disabled="true"]{opacity:.4;pointer-events:none;filter:grayscale(.5)}

/* ── INPUT ────────────────────────────────────────────────── */
[ui~="input"] {
  display:block;width:100%;font-family:var(--f-ui);font-size:.875rem;
  padding:.6em .9em;background:var(--bg-2);color:var(--tx-0);
  border:1px solid var(--bdr-2);border-radius:var(--r-md);outline:none;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
[ui~="input"]:focus-visible {border-color:var(--ac-lo);box-shadow:0 0 0 3px var(--ac-bg)}
[ui~="input"]::placeholder {color:var(--tx-3)}
[ui~="input"]:disabled {opacity:.5;cursor:not-allowed;background:var(--bg-1)}


/* ── ALERT ────────────────────────────────────────────────── */
[ui~="alert"] {
  padding:var(--s-4) var(--s-5);border-radius:var(--r-lg);
  font-size:.875rem;line-height:1.6;
  background:var(--in-bg);color:var(--tx-1);border:1px solid color-mix(in oklch, var(--in-base) 20%, transparent);
  display:flex;gap:var(--s-3);align-items:flex-start;
}
[ui~="alert"][ui~="success"] {background:var(--ok-bg);border-color:color-mix(in oklch, var(--ok-base) 20%, transparent)}
[ui~="alert"][ui~="warning"] {background:var(--wr-bg);border-color:color-mix(in oklch, var(--wr-base) 20%, transparent)}
[ui~="alert"][ui~="danger"]  {background:var(--er-bg);border-color:color-mix(in oklch, var(--er-base) 20%, transparent)}
[ui~="alert"][ui~="info"]    {background:var(--in-bg);border-color:color-mix(in oklch, var(--in-base) 20%, transparent)}

/* ── STAT ─────────────────────────────────────────────────── */
[ui~="stat"] {
  font-family:var(--f-disp);font-size:clamp(2rem,4vw,2.75rem);
  font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--tx-0);
}
/* ── METRIC — sensor/data numeric display (Inter, tabular) ── */
[ui~="metric"] {
  font-family:var(--f-ui);font-size:1.75rem;font-weight:600;
  font-variant-numeric:tabular-nums;line-height:1;color:var(--tx-0);
}
@container (max-width:24rem) {
  [ui~="metric"] { font-size:1.25rem }
}

/* ── NAV ──────────────────────────────────────────────────── */
[ui~="nav"] {
  display:flex;align-items:center;gap:var(--s-8);
  padding:var(--s-4) clamp(var(--s-6),5vw,var(--s-16));
  border-bottom:1px solid var(--bdr-1);
  position:sticky;top:0;z-index:100;
  background:color-mix(in oklch, var(--bg-0) 85%, transparent);
  backdrop-filter:blur(20px) saturate(1.5);
}
[ui~="nav-spacer"]{flex:1}

/* ── DIVIDER ──────────────────────────────────────────────── */
[ui~="divider"] {
  height:1px;width:100%;
  background:linear-gradient(to right,transparent,var(--bdr-2) 30%,var(--bdr-2) 70%,transparent);
}

/* ── ANIMATIONS ───────────────────────────────────────────── */
@keyframes ceduix-in {from{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:none}}
@keyframes ceduix-pulse {0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}

[ui~="animate"]{animation:ceduix-in .7s var(--ease) both}
[ui~="animate"][ui~="d1"]{animation-delay:.1s}
[ui~="animate"][ui~="d2"]{animation-delay:.2s}
[ui~="animate"][ui~="d3"]{animation-delay:.3s}
[ui~="animate"][ui~="d4"]{animation-delay:.4s}
[ui~="animate"][ui~="d5"]{animation-delay:.5s}
[ui~="animate"][ui~="d6"]{animation-delay:.6s}
[ui~="animate"][ui~="d7"]{animation-delay:.7s}
[ui~="animate"][ui~="d8"]{animation-delay:.8s}

[ui~="reveal"]{opacity:0;transform:translateY(2rem);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[ui~="reveal"][ui~="from-left"]{transform:translateX(-2rem)}
[ui~="reveal"][ui~="from-right"]{transform:translateX(2rem)}
[ui~="reveal"][ui~="from-down"]{transform:translateY(-2rem)}
[ui~="reveal"][ui~="fade"]{transform:none}
[ui~="reveal"].in-view{opacity:1;transform:none}
[ui~="reveal"][ui~="d1"].in-view{transition-delay:.1s}
[ui~="reveal"][ui~="d2"].in-view{transition-delay:.2s}
[ui~="reveal"][ui~="d3"].in-view{transition-delay:.3s}
[ui~="reveal"][ui~="d4"].in-view{transition-delay:.4s}
[ui~="reveal"][ui~="d5"].in-view{transition-delay:.5s}
[ui~="reveal"][ui~="d6"].in-view{transition-delay:.6s}
[ui~="reveal"][ui~="d7"].in-view{transition-delay:.7s}
[ui~="reveal"][ui~="d8"].in-view{transition-delay:.8s}

/* ── PROSE (markdown article rendering) ───────────────────── */
[ui~="prose"]{font-family:var(--f-ui);font-size:1rem;line-height:1.75;color:var(--tx-1);text-wrap:pretty}
[ui~="prose"] h1{font-size:2rem;font-weight:700;color:var(--tx-0);margin:2em 0 .5em;line-height:1.2;text-wrap:balance}
[ui~="prose"] h2{font-size:1.5rem;font-weight:600;color:var(--tx-0);margin:1.75em 0 .5em;line-height:1.25;text-wrap:balance}
[ui~="prose"] h3{font-size:1.25rem;font-weight:600;color:var(--tx-0);margin:1.5em 0 .5em;line-height:1.3;text-wrap:balance}
[ui~="prose"] h4{font-size:1rem;font-weight:600;color:var(--tx-0);margin:1.25em 0 .5em;text-wrap:balance}
[ui~="prose"] p{margin:.75em 0}
[ui~="prose"] a{color:var(--ac);text-decoration:underline;text-underline-offset:3px}
[ui~="prose"] a:hover{color:var(--ac-hi)}
[ui~="prose"] a:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
[ui~="prose"] strong{color:var(--tx-0);font-weight:600}
[ui~="prose"] ul,[ui~="prose"] ol{margin:.75em 0;padding-inline-start:1.5em}
[ui~="prose"] li{margin:.25em 0}
[ui~="prose"] li::marker{color:var(--tx-3)}
[ui~="prose"] blockquote{border-inline-start:3px solid var(--ac-lo);padding:.5em 0 .5em 1.25em;margin:1em 0;color:var(--tx-2);font-style:italic}
[ui~="prose"] code{font-family:var(--f-mono);font-size:.875em;background:var(--bg-2);padding:.15em .35em;border-radius:var(--r-sm)}
[ui~="prose"] pre{background:var(--bg-1);border:1px solid var(--bdr-1);border-radius:var(--r-lg);padding:var(--s-4);overflow-x:auto;margin:1em 0}
[ui~="prose"] pre code{background:none;padding:0;font-size:.85em;line-height:1.6}
[ui~="prose"] hr{border:none;height:1px;background:var(--bdr-2);margin:2em 0}
[ui~="prose"] img{max-width:100%;height:auto;border-radius:var(--r-lg);margin:1.5em 0}
[ui~="prose"] table{width:100%;border-collapse:collapse;margin:1em 0;font-size:.9em}
[ui~="prose"] th{text-align:left;font-weight:600;color:var(--tx-0);padding:.5em;border-bottom:2px solid var(--bdr-2)}
[ui~="prose"] td{padding:.5em;border-bottom:1px solid var(--bdr-1)}

/* ── DIALOG (native <dialog>) ────────────────────────────── */
[ui~="dialog"] {
  background:var(--bg-2);color:var(--tx-0);
  border:1px solid var(--bdr-2);border-radius:var(--r-xl);
  padding:var(--s-8);max-width:32rem;width:calc(100% - var(--s-8));
  box-shadow:var(--sh-lg);
  transition:opacity var(--t-slow) var(--ease),
             transform var(--t-slow) var(--ease),
             overlay var(--t-slow) var(--ease) allow-discrete,
             display var(--t-slow) var(--ease) allow-discrete;
}
[ui~="dialog"][open] {
  @starting-style { opacity:0; transform:translateY(1rem) scale(0.96); }
}
[ui~="dialog"]::backdrop {
  background:oklch(0.10 0.02 260 / 0.7);
  backdrop-filter:blur(6px);
  transition:opacity var(--t-slow) var(--ease),
             display var(--t-slow) var(--ease) allow-discrete;
}
[ui~="dialog"][open]::backdrop {
  @starting-style { opacity:0; }
}

/* ── POPOVER (native [popover]) ──────────────────────────── */
[ui~="popover"] {
  background:var(--bg-2);color:var(--tx-0);
  border:1px solid var(--bdr-2);border-radius:var(--r-lg);
  padding:var(--s-4);box-shadow:var(--sh-md);
  margin:0;inset:unset;
  transition:opacity var(--t-mid) var(--ease),
             transform var(--t-mid) var(--ease),
             overlay var(--t-mid) var(--ease) allow-discrete,
             display var(--t-mid) var(--ease) allow-discrete;
  @starting-style { opacity:0; transform:translateY(-0.5rem); }
}

/* ── TABS (CSS-only via radio + :has) ────────────────────── */
[ui~="tabs"] {
  display:flex;flex-direction:column;
}
[ui~="tab-list"] {
  display:flex;gap:0;border-bottom:1px solid var(--bdr-1);
}
[ui~="tab-list"] input[type="radio"] { position:absolute;opacity:0;pointer-events:none }
[ui~="tab"] {
  padding:var(--s-3) var(--s-5);
  font-family:var(--f-ui);font-size:.875rem;font-weight:500;
  color:var(--tx-2);cursor:pointer;
  border-bottom:2px solid transparent;margin-block-end:-1px;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
  user-select:none;
}
[ui~="tab"]:hover { color:var(--tx-1) }
input:checked + [ui~="tab"],
[ui~="tab"][aria-selected="true"] {
  color:var(--ac);border-bottom-color:var(--ac);
}
input:focus-visible + [ui~="tab"] { outline:2px solid var(--ac);outline-offset:2px }
/* Tab panels — use <nav ui="tab-list"> (not div) so nth-of-type counts correctly */
[ui~="tab-panel"] { display:none;padding:var(--s-6) 0 }
[ui~="tabs"]:not(:has(input:checked)) > [ui~="tab-panel"]:first-of-type { display:block }
[ui~="tabs"]:has([ui~="tab-list"] > input:nth-of-type(1):checked) > [ui~="tab-panel"]{display:none}
[ui~="tabs"]:has([ui~="tab-list"] > input:nth-of-type(1):checked) > [ui~="tab-panel"]:nth-of-type(1){display:block}
[ui~="tabs"]:has([ui~="tab-list"] > input:nth-of-type(2):checked) > [ui~="tab-panel"]{display:none}
[ui~="tabs"]:has([ui~="tab-list"] > input:nth-of-type(2):checked) > [ui~="tab-panel"]:nth-of-type(2){display:block}
[ui~="tabs"]:has([ui~="tab-list"] > input:nth-of-type(3):checked) > [ui~="tab-panel"]{display:none}
[ui~="tabs"]:has([ui~="tab-list"] > input:nth-of-type(3):checked) > [ui~="tab-panel"]:nth-of-type(3){display:block}
[ui~="tabs"]:has([ui~="tab-list"] > input:nth-of-type(4):checked) > [ui~="tab-panel"]{display:none}
[ui~="tabs"]:has([ui~="tab-list"] > input:nth-of-type(4):checked) > [ui~="tab-panel"]:nth-of-type(4){display:block}

/* ── ACCORDION (native <details>) ────────────────────────── */
[ui~="accordion"] {
  border:1px solid var(--bdr-1);border-radius:var(--r-lg);
  overflow:hidden;
}
[ui~="accordion"] + [ui~="accordion"] { margin-top:-1px }
[ui~="accordion"] summary {
  padding:var(--s-4) var(--s-5);
  font-family:var(--f-ui);font-size:.875rem;font-weight:500;
  color:var(--tx-0);cursor:pointer;
  list-style:none;display:flex;align-items:center;justify-content:space-between;
  background:var(--bg-1);
  transition:background var(--t-fast) var(--ease);
}
[ui~="accordion"] summary:hover { background:var(--bg-2) }
[ui~="accordion"] summary:focus-visible { outline:2px solid var(--ac);outline-offset:-2px }
[ui~="accordion"] summary::after {
  content:'+';font-family:var(--f-mono);font-size:1rem;color:var(--tx-2);
  transition:transform var(--t-mid) var(--ease);
}
[ui~="accordion"][open] summary::after { content:'−' }
[ui~="accordion"] summary::-webkit-details-marker { display:none }
[ui~="accordion"] > :not(summary) {
  padding:var(--s-4) var(--s-5);
  font-size:.875rem;line-height:1.7;color:var(--tx-1);
  background:var(--bg-0);
}

/* ── SWITCH (styled checkbox toggle) ─────────────────────── */
[ui~="switch"] {
  display:inline-flex;align-items:center;gap:var(--s-3);
  cursor:pointer;user-select:none;
  font-family:var(--f-ui);font-size:.875rem;color:var(--tx-1);
}
[ui~="switch"] input {
  appearance:none;-webkit-appearance:none;
  width:2.5rem;height:1.375rem;
  background:var(--bg-4);border-radius:var(--r-md);
  position:relative;cursor:pointer;flex-shrink:0;
  transition:background var(--t-fast) var(--ease);
}
[ui~="switch"] input::before {
  content:'';position:absolute;top:2px;inset-inline-start:2px;
  width:1rem;height:1rem;border-radius:var(--r-sm);
  background:var(--tx-1);
  transition:transform var(--t-mid) var(--ease),background var(--t-fast) var(--ease);
}
[ui~="switch"] input:checked { background:var(--ac) }
[ui~="switch"] input:checked::before { transform:translateX(1.125rem);background:var(--bg-0) }
[ui~="switch"] input:focus-visible { outline:2px solid var(--ac);outline-offset:2px }
[ui~="switch"] input:disabled { opacity:.4;cursor:not-allowed }
[ui~="switch"]:has(input:disabled) { cursor:not-allowed;opacity:.5 }

/* ── PROGRESS ────────────────────────────────────────────── */
[ui~="progress"] {
  appearance:none;-webkit-appearance:none;
  width:100%;height:6px;border:none;border-radius:var(--r-md);
  background:var(--bg-3);overflow:hidden;
}
[ui~="progress"]::-webkit-progress-bar { background:var(--bg-3);border-radius:var(--r-md) }
[ui~="progress"]::-webkit-progress-value { background:var(--ac);border-radius:var(--r-md);transition:width var(--t-mid) var(--ease) }
[ui~="progress"]::-moz-progress-bar { background:var(--ac);border-radius:var(--r-md) }
[ui~="progress"][ui~="success"]::-webkit-progress-value,[ui~="progress"][ui~="success"]::-moz-progress-bar{background:var(--ok)}
[ui~="progress"][ui~="warning"]::-webkit-progress-value,[ui~="progress"][ui~="warning"]::-moz-progress-bar{background:var(--wr)}
[ui~="progress"][ui~="danger"]::-webkit-progress-value,[ui~="progress"][ui~="danger"]::-moz-progress-bar{background:var(--er)}
[ui~="progress"][ui~="lg"] { height:10px }
[ui~="progress"][ui~="sm"] { height:3px }

/* ── SKELETON (loading placeholder) ──────────────────────── */
@keyframes ceduix-shimmer {
  from { background-position:-200% center }
  to   { background-position:200% center }
}
[ui~="skeleton"] {
  background:linear-gradient(90deg,var(--bg-2) 25%,var(--bg-4) 50%,var(--bg-2) 75%);
  background-size:200% 100%;
  animation:ceduix-shimmer 1.8s ease-in-out infinite;
  border-radius:var(--r-md);color:transparent !important;
  user-select:none;pointer-events:none;
}
[ui~="skeleton"]::before,[ui~="skeleton"]::after{display:none}
[ui~="skeleton"] * { visibility:hidden }

/* ── AVATAR ──────────────────────────────────────────────── */
[ui~="avatar"] {
  display:inline-flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;border-radius:var(--r-lg);overflow:hidden;flex-shrink:0;
  background:var(--ac-bg);color:var(--ac);
  font-family:var(--f-ui);font-size:.875rem;font-weight:600;
  border:2px solid var(--bdr-1);
}
[ui~="avatar"] img { width:100%;height:100%;object-fit:cover }
[ui~="avatar"][ui~="sm"] { width:2rem;height:2rem;font-size:.7rem }
[ui~="avatar"][ui~="lg"] { width:3.5rem;height:3.5rem;font-size:1.2rem }
[ui~="avatar"][ui~="xl"] { width:5rem;height:5rem;font-size:1.6rem }

/* ── BREADCRUMB ──────────────────────────────────────────── */
[ui~="breadcrumb"] {
  display:flex;align-items:center;gap:var(--s-2);
  font-family:var(--f-ui);font-size:.8rem;color:var(--tx-2);
}
[ui~="breadcrumb"] a { color:var(--tx-2);text-decoration:none;transition:color var(--t-fast) var(--ease) }
[ui~="breadcrumb"] a:hover { color:var(--ac) }
[ui~="breadcrumb"] a:focus-visible { outline:2px solid var(--ac);outline-offset:2px }
[ui~="breadcrumb"] span:last-child,
[ui~="breadcrumb"] a:last-child { color:var(--tx-0);font-weight:500 }
[ui~="breadcrumb"] > :not(:last-child)::after {
  content:'/';margin-inline-start:var(--s-2);color:var(--tx-3);pointer-events:none;
}

/* ── TABLE ───────────────────────────────────────────────── */
/* Header alignment MUST match cell alignment. Text left, numbers right.
   No vertical borders. No center alignment. Opt-in stripe via token.
   40px default row, 32px compact. Uppercase headers. Sticky. */
[ui~="table"] {
  width:fit-content;max-width:100%;margin-inline:auto;
  border-collapse:collapse;font-family:var(--f-ui);font-size:.875rem;line-height:1.25;
}
[ui~="table"][ui~="full"] { width:100% }
[ui~="table"] th {
  text-align:left;font-weight:600;color:var(--tx-2);
  padding:0 var(--s-4);height:2.5rem;vertical-align:middle;
  border-bottom:2px solid var(--bdr-3);
  font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  position:sticky;top:0;z-index:1;background:var(--bg-0);
}
[ui~="table"] td {
  text-align:left;
  padding:0 var(--s-4);height:2.5rem;vertical-align:middle;
  border-bottom:1px solid var(--bdr-1);
  color:var(--tx-0);white-space:nowrap;max-width:30rem;overflow:hidden;text-overflow:ellipsis;
  transition:background var(--t-fast) var(--ease);
}
[ui~="table"] tr:hover td { background:var(--bg-2) }
[ui~="table"][ui~="stripe"] tbody tr:nth-child(even) td { background:var(--bg-2) }
[ui~="table"][ui~="stripe"] tbody tr:hover td { background:var(--bg-3) }
[ui~="table"] tr[aria-selected="true"] td,[ui~="table"] tr[data-selected] td { background:var(--ac-bg) }
[ui~="table"] tbody tr:last-child td { border-bottom:0 }
[ui~="table"][ui~="accent"] th { color:var(--ac);border-bottom-color:var(--ac-lo) }
/* Sort — inline arrow, muted when idle, accent when active */
[ui~="table"] th[data-sort] { cursor:pointer;user-select:none;transition:color var(--t-fast) var(--ease) }
[ui~="table"] th[data-sort]:hover { color:var(--ac) }
[ui~="table"] th[data-sort]:focus-visible { outline:2px solid var(--ac);outline-offset:-2px }
[ui~="table"] th[data-sort]::after { content:'\2195';margin-inline-start:.3em;font-size:.8em;opacity:.38;transition:color var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease) }
[ui~="table"] th[data-sort="asc"]::after { content:'\2191';color:var(--ac);opacity:1 }
[ui~="table"] th[data-sort="desc"]::after { content:'\2193';color:var(--ac);opacity:1 }
/* Group rows */
[ui~="table"] tr[ui~="group"] { cursor:pointer;background:var(--bg-2);font-weight:600;transition:background var(--t-fast) var(--ease) }
[ui~="table"] tr[ui~="group"]:hover { background:var(--bg-3) }
[ui~="table"] tr[ui~="group"] td { padding:0 var(--s-4);height:2.5rem }
[ui~="table"] tr[ui~="muted"] { opacity:.6 }
[ui~="table"] :is(td,th)[ui~="num"] { text-align:right }
/* Density — via data-density on table or parent */
[data-density="compact"] [ui~="table"] th,
[data-density="compact"] [ui~="table"] td { height:2rem;padding:0 var(--s-3) }

/* ── SCROLL CONTAINER ──────────────────────────────────────── */
[ui~="scroll"] { max-height:var(--scroll-h, 70vh);overflow-y:auto }

/* ── TOGGLE (expand/collapse indicator) ────────────────────── */
[ui~="toggle"] { font-size:.75rem;color:var(--tx-2);margin-inline-end:var(--s-1);transition:transform var(--t-fast) var(--ease);display:inline-block }
[ui~="toggle"][aria-expanded="true"] { transform:rotate(90deg) }
[ui~="toggle"]:focus-visible { outline:2px solid var(--ac);outline-offset:2px }

/* ── ASIDE (inline secondary text) ─────────────────────────── */
[ui~="aside"] { font-size:.75rem;font-weight:400;color:var(--tx-2);margin-inline-start:var(--s-2) }

/* ── PRIORITY INDICATOR ────────────────────────────────────── */
[ui~="pri"] {
  padding:var(--s-1) var(--s-2);border-radius:var(--r-sm);border:1px solid var(--bdr-1);
  background:none;cursor:pointer;font-size:.75rem;font-weight:600;
  transition:all var(--t-fast) var(--ease);line-height:1
}
[ui~="pri"]:hover { transform:scale(1.1) }
[ui~="pri"]:focus-visible { outline:2px solid var(--ac);outline-offset:2px }
[ui~="pri"][data-pri="P0"] { color:var(--er);border-color:var(--er) }
[ui~="pri"][data-pri="P0"][ui~="active"] { background:var(--er);color:var(--bg-0) }
[ui~="pri"][data-pri="P1"] { color:var(--wr);border-color:var(--wr) }
[ui~="pri"][data-pri="P1"][ui~="active"] { background:var(--wr);color:var(--bg-0) }
[ui~="pri"][data-pri="P2"] { color:var(--tx-1);border-color:var(--bdr-2) }
[ui~="pri"][data-pri="P2"][ui~="active"] { background:var(--tx-1);color:var(--bg-0) }
[ui~="pri"][data-pri="P3"] { color:var(--tx-2);border-color:var(--bdr-1) }
[ui~="pri"][data-pri="P3"][ui~="active"] { background:var(--tx-2);color:var(--bg-0) }

/* ── FORM VALIDATION (CSS-only, no JS) ───────────────────── */
/* :user-invalid fires AFTER user interaction — no flash on load.
   Replaces React Hook Form visual feedback entirely. */
[ui~="input"]:user-valid { border-color:color-mix(in oklch, var(--ok-base) 40%, transparent) }
[ui~="input"]:user-invalid {
  border-color:var(--er);
  box-shadow:0 0 0 3px var(--er-bg);
}
[ui~="input"]:user-invalid + [ui~="caption"] { color:var(--er) }
[ui~="input"]:user-valid + [ui~="caption"] { color:var(--ok) }
/* Auto-disable submit when form has invalid inputs — zero JS */
form:has([ui~="input"]:user-invalid) [ui~="button"][type="submit"] {
  opacity:0.4;pointer-events:none;filter:grayscale(0.5);
}

/* ── AUTO-STAGGER — position-aware animation ─────────────── */
/* Eliminates manual d1, d2, d3... Just wrap: ui="grid stagger"
   Children auto-delay based on position. Up to 12 items. */
[ui~="stagger"] > * {
  animation:ceduix-in .6s var(--ease) both;
  animation-play-state:paused;
}
[ui~="stagger"].in-view > * {
  animation-play-state:running;
}
[ui~="stagger"] > :nth-child(1)  { animation-delay:0s }
[ui~="stagger"] > :nth-child(2)  { animation-delay:.06s }
[ui~="stagger"] > :nth-child(3)  { animation-delay:.12s }
[ui~="stagger"] > :nth-child(4)  { animation-delay:.18s }
[ui~="stagger"] > :nth-child(5)  { animation-delay:.24s }
[ui~="stagger"] > :nth-child(6)  { animation-delay:.30s }
[ui~="stagger"] > :nth-child(7)  { animation-delay:.36s }
[ui~="stagger"] > :nth-child(8)  { animation-delay:.42s }
[ui~="stagger"] > :nth-child(9)  { animation-delay:.48s }
[ui~="stagger"] > :nth-child(10) { animation-delay:.54s }
[ui~="stagger"] > :nth-child(11) { animation-delay:.60s }
[ui~="stagger"] > :nth-child(12) { animation-delay:.66s }

/* ── CLAMP — progressive disclosure ──────────────────────── */
/* Truncate long text to N lines. Default 3. Override with style="--lines:5" */
[ui~="clamp"] {
  display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:var(--lines, 3);overflow:hidden;
}

/* ── UTILS ────────────────────────────────────────────────── */
[ui~="dot"]{display:inline-flex;align-items:center;gap:var(--s-2)}
[ui~="dot"]::before{content:"";width:.45em;height:.45em;border-radius:999px;background:currentColor;flex:0 0 auto}
[ui~="dot"][ui~="pulse"]::before{animation:ceduix-pulse 1.4s var(--ease) infinite}
[ui~="truncate"]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[ui~="grow"]    {flex:1}
[ui~="shrink-0"]{flex-shrink:0}

/* ── MOBILE NAV ──────────────────────────────────────────── */
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:var(--s-2);color:var(--tx-2)}
.nav-toggle:hover{color:var(--tx-0)}
.nav-mobile{display:none;position:fixed;top:60px;right:var(--s-4);z-index:99;border-radius:var(--r-lg);padding:var(--s-2) 0;min-width:160px;opacity:0;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.nav-mobile.open{display:block;opacity:1;transform:none;pointer-events:auto}
.nav-mobile a:hover{color:var(--tx-0);background:var(--ac-bg)}
@media(max-width:640px){
  .nav-desktop{display:none!important}
  .nav-toggle{display:block}
}

/* ── GLOBAL POLISH ────────────────────────────────────────── */
::selection {background:var(--ac);color:var(--bg-0)}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--bg-0)}
::-webkit-scrollbar-thumb{background:var(--ac-lo);border-radius:var(--r-md)}

/* ── OPTICAL ALIGNMENT (text-box-trim) ───────────────────── */
/* CSS Snapshot 2026 · Chrome/Edge 133+, Safari 18.2+ · Firefox pending
   Trims browser's built-in over/under leading so heading/button/eyebrow
   bounding boxes hug cap-to-alphabetic edges. */
@supports (text-box: trim-both cap alphabetic) {
  [ui~="heading"],
  [ui~="subheading"],
  [ui~="eyebrow"],
  [ui~="button"],
  [ui~="caption"] {
    text-box: trim-both cap alphabetic;
  }
}

/* ── ACCESSIBILITY (prefers-*) ───────────────────────────── */
/* #1 reduced-motion — covers all UI + chart transitions */
@media (prefers-reduced-motion: reduce) {
  :root,
  [ui~="animate"],
  [ui~="reveal"],
  [ui~="stagger"] > *,
  [ui~="skeleton"],
  [ui~="tab"],
  [ui~="dialog"],
  [ui~="pulse"]::before,
  [popover],
  dialog,
  [ui~="card"],
  [ui~="overlay"],
  [ui~="button"],
  [ui~="input"],
  [ui~="accordion"] summary,
  [ui~="accordion"] summary::after,
  [ui~="switch"] input,
  [ui~="switch"] input::before,
  [ui~="progress"]::-webkit-progress-value,
  [ui~="breadcrumb"] a,
  [ui~="table"] th[data-sort],
  [ui~="table"] th[data-sort]::after,
  [ui~="table"] tr[ui~="group"],
  [ui~="toggle"],
  [ui~="pri"],
  .nav-mobile {
    animation:none !important;
    transition:none !important;
  }
  [ui~="reveal"]{opacity:1;transform:none}
}
/* #3 prefers-contrast: more — bump borders + muted text for clearer edges */
@media (prefers-contrast: more) {
  :root {
    --bdr-1: color-mix(in oklch, var(--tx-base) 14%, transparent);
    --bdr-2: color-mix(in oklch, var(--tx-base) 22%, transparent);
    --bdr-3: color-mix(in oklch, var(--tx-base) 34%, transparent);
    --tx-2: color-mix(in oklch, var(--tx-base) 65%, var(--bg-base));
    --tx-3: color-mix(in oklch, var(--tx-base) 45%, var(--bg-base));
  }
}
/* #4 prefers-reduced-data — drop backdrop-filter (GPU + bandwidth) */
@media (prefers-reduced-data: reduce) {
  [ui~="glass"],
  [ui~="dialog"]::backdrop,
  dialog::backdrop {
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}

/* ── CED CHARTS — line/area/bar/scatter/pie/heatmap ────────── */
.ax,.ax-wrap { position:relative; width:100% }
.ax svg { display:block }
.ax-axes text,.ax-mark-label,.ax-heat-x,.ax-heat-y,.ax-heat-legend-label,
.ax-range-btn,.ax-range-input,.ax-range-sep,.ax-tip-time,.ax-leg-name,.ax-heat-label {
  font-family:var(--f-mono);
}
.ax-s,.ax-bar,.ax-dot,.ax-heat-cell,.ax-leg-item { transition:opacity .15s ease }
.ax-grid line { stroke:var(--ch-grid); stroke-width:1; stroke-dasharray:4,4 }
.ax-axes text { font-size:11.5px; font-weight:500; fill:var(--ch-axis); letter-spacing:.02em }
.ax-mark-line { stroke-width:1; stroke-dasharray:6,3; opacity:.6 }
.ax-mark-label { font-size:9px; fill:var(--ch-axis) }
.ax-line { vector-effect:non-scaling-stroke }
.ax-wedge { stroke:var(--bg-0); stroke-width:2 }
.ax-pie-label { font-family:var(--f-ui); font-size:11px; font-weight:500; fill:var(--bg-0) }
.ax-cross { stroke:var(--ch-axis); stroke-width:1; stroke-dasharray:4,3; opacity:.4; pointer-events:none }
/* Tooltip — dark glass */
.ax-tip {
  position:absolute; top:0; left:0; z-index:10; pointer-events:none; min-width:140px;
  background:var(--ch-tip-bg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--ch-tip-bdr); border-radius:var(--r-lg);
  box-shadow:0 12px 48px rgba(0,0,0,.7); padding:10px 14px;
  transition:opacity .15s ease,transform .15s ease; font-family:var(--f-ui);
}
.ax-tip-time { font-size:.7rem; color:rgba(255,255,255,.55); letter-spacing:.04em; margin-bottom:6px; white-space:nowrap }
.ax-tip-row { display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:.8rem; line-height:1.6 }
.ax-tip-name { display:flex; align-items:center; gap:6px; color:rgba(255,255,255,.8); white-space:nowrap }
.ax-tip-dot,.ax-leg-dot { display:inline-block; width:6px; height:6px; border-radius:2px; flex-shrink:0 }
.ax-tip-val { font-weight:600; font-variant-numeric:tabular-nums; color:#fff; white-space:nowrap }
.ax-tip-cols { column-count:2; column-gap:20px }
.ax-tip-cols .ax-tip-row { break-inside:avoid }
/* Legend — columnar, click to toggle */
.ax-leg { column-width:210px; column-gap:4px; padding:8px 0 0 }
.ax-leg-item { display:flex; align-items:center; gap:6px; cursor:pointer; user-select:none; font-size:.78rem; break-inside:avoid; height:22px }
.ax-leg-item.off { opacity:.3 }
.ax-leg-item.off .ax-leg-dot { background:repeating-linear-gradient(45deg,transparent,transparent 2px,var(--tx-3) 2px,var(--tx-3) 3px) !important }
.ax-leg-name { font-size:.72rem; color:var(--tx-2); flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ax-leg-val { font-variant-numeric:tabular-nums; font-weight:500; color:var(--tx-1); margin-left:4px; white-space:nowrap; flex-shrink:0 }
/* Heatmap */
.ax-heat-cell:hover { opacity:.8; stroke:var(--ch-axis); stroke-width:1.5 }
.ax-heat-label { font-size:11px; font-weight:500; pointer-events:none }
.ax-heat-x,.ax-heat-y { font-size:11.5px; font-weight:500; fill:var(--ch-axis) }
.ax-heat-legend-label { font-size:10px; fill:var(--ch-axis) }
/* Range selector */
.ax-range { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:0 0 10px }
.ax-range-presets { display:flex; gap:2px; border:1px solid var(--ch-grid); border-radius:8px; padding:2px }
.ax-range-btn { background:none; border:none; padding:4px 12px; border-radius:6px; font-size:.72rem; color:var(--ch-axis); cursor:pointer }
.ax-range-btn:hover { background:var(--ch-grid) }
.ax-range-btn.active { background:var(--ac); color:var(--bg-0) }
.ax-range-custom { display:flex; align-items:center; gap:6px; margin-left:auto }
.ax-range-input { background:transparent; border:1px solid var(--ch-grid); border-radius:6px; padding:3px 8px; font-size:.72rem; color:var(--ch-axis); outline:none }
.ax-range-input:focus { border-color:var(--ch-axis) }
.ax-range-input::-webkit-calendar-picker-indicator { filter:invert(.5) }

/* ═══════════════════════════════════════════════════════════
   v1.4 PREMIUM POLISH — cascade-overrides v1.3.1 baselines.
   Rules in this block are intentionally placed at the end of
   @layer ceduix so source-order cascade lets them refine
   button/nav/card/glass without rewriting earlier sections.
   New token: `premium` (composable modifier, 97 total).
   ═══════════════════════════════════════════════════════════ */

/* ── BUTTON v1.4 — gradient + inset highlight + Outfit medium ── */
[ui~="button"] {
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--ac), white 9%),
    var(--ac));
  box-shadow:
    0 1px 2px color-mix(in oklch, var(--ac-lo) 35%, transparent),
    inset 0 1px 0 color-mix(in oklch, white 22%, transparent);
  font-family: var(--f-disp);
  font-weight: 500;
  letter-spacing: -.005em;
  transition:
    background var(--t-mid) var(--ease),
    transform var(--t-mid) var(--ease),
    box-shadow var(--t-mid) var(--ease),
    filter var(--t-mid) var(--ease);
}
[ui~="button"]:hover {
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--ac-hi), white 11%),
    var(--ac-hi));
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px var(--ac-gl),
    0 2px 6px color-mix(in oklch, var(--ac-lo) 45%, transparent),
    inset 0 1px 0 color-mix(in oklch, white 26%, transparent);
}
[ui~="button"]:active {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 3px color-mix(in oklch, var(--ac-lo) 40%, transparent),
    0 1px 2px color-mix(in oklch, var(--ac-lo) 20%, transparent);
}

[ui~="button"][ui~="outline"] {
  background: transparent;
  color: var(--tx-0);
  border: 1.5px solid color-mix(in oklch, var(--tx-base) 18%, transparent);
  box-shadow: none;
}
[ui~="button"][ui~="outline"]:hover {
  background: color-mix(in oklch, var(--ac) 7%, transparent);
  border-color: color-mix(in oklch, var(--ac) 55%, transparent);
  color: var(--ac);
  transform: translateY(-2px);
  box-shadow:
    0 6px 20px var(--ac-gl),
    inset 0 1px 0 color-mix(in oklch, white 6%, transparent);
}
[ui~="button"][ui~="outline"]:active { transform: translateY(0); box-shadow: none; }

[ui~="button"][ui~="ghost"] {
  background: transparent;
  color: var(--tx-1);
  border-color: transparent;
  box-shadow: none;
}
[ui~="button"][ui~="ghost"]:hover {
  background: color-mix(in oklch, var(--tx-base) 6%, transparent);
  color: var(--tx-0);
  transform: none;
  box-shadow: none;
}

[ui~="button"][ui~="lg"] {
  font-size: 1rem;
  padding: .78em 1.75em;
  border-radius: var(--r-lg);
  letter-spacing: -.01em;
}
[ui~="button"][ui~="sm"] {
  font-size: .78rem;
  padding: .42em 1em;
  border-radius: var(--r-sm);
  letter-spacing: 0;
}

[ui~="button"]:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in oklch, var(--ac) 35%, transparent),
    0 1px 2px color-mix(in oklch, var(--ac-lo) 35%, transparent),
    inset 0 1px 0 color-mix(in oklch, white 22%, transparent);
}

/* ── NAV v1.4 — refined glass + warm soft shadow + Outfit links ── */
[ui~="nav"] {
  background: color-mix(in oklch, var(--bg-0) 72%, transparent);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid color-mix(in oklch, var(--bdr-1) 50%, transparent);
  box-shadow:
    0 1px 0 color-mix(in oklch, white 5%, transparent) inset,
    0 12px 40px -20px color-mix(in oklch, oklch(0.3 0.02 80) 32%, transparent);
  font-family: var(--f-disp);
}

[ui~="nav"] a:not([ui~="button"]) {
  color: var(--tx-1);
  text-decoration: none;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  font-family: var(--f-disp);
  font-weight: 500;
  font-size: .875rem;
  letter-spacing: -.005em;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
[ui~="nav"] a:not([ui~="button"]):hover {
  color: var(--tx-0);
  background: color-mix(in oklch, var(--tx-base) 5%, transparent);
}

/* ── CARD v1.4 — warm soft shadow default + refined hover lift ── */
[ui~="card"] {
  box-shadow:
    0 1px 2px color-mix(in oklch, oklch(0.3 0.02 80) 8%, transparent),
    0 8px 24px color-mix(in oklch, oklch(0.3 0.02 80) 6%, transparent);
  transition:
    border-color var(--t-mid) var(--ease),
    transform var(--t-mid) var(--ease),
    box-shadow var(--t-mid) var(--ease);
}
[ui~="card"]:hover {
  border-color: var(--bdr-2);
  transform: translateY(-1px);
  box-shadow:
    0 1px 2px color-mix(in oklch, oklch(0.3 0.02 80) 10%, transparent),
    0 16px 40px color-mix(in oklch, oklch(0.3 0.02 80) 10%, transparent);
}

/* ── GLASS v1.4 — premium frosted with inset glow ─────────── */
[ui~="glass"] {
  background: color-mix(in oklch, var(--bg-0) 58%, transparent);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid color-mix(in oklch, white 10%, var(--bdr-1));
  box-shadow:
    0 1px 2px color-mix(in oklch, oklch(0.3 0.02 80) 10%, transparent),
    0 24px 64px color-mix(in oklch, oklch(0.3 0.02 80) 14%, transparent),
    inset 0 1px 0 color-mix(in oklch, white 14%, transparent);
}

/* ── PREMIUM modifier — composable polish stack ───────────── */
/* Adds: subtle accent-tinted gradient, accent-glow shadow,
   inset highlight, shimmer reveal animation, accent-glow on hover.
   Use as `ui="card premium"`, `ui="panel premium"`, etc. */
[ui~="premium"] {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--bg-0) 96%, var(--ac) 4%),
    var(--bg-0));
  border: 1px solid color-mix(in oklch, var(--ac) 18%, var(--bdr-1));
  box-shadow:
    0 1px 2px color-mix(in oklch, var(--ac-lo) 14%, transparent),
    0 12px 40px color-mix(in oklch, var(--ac-lo) 10%, transparent),
    inset 0 1px 0 color-mix(in oklch, white 10%, transparent);
  transition:
    border-color var(--t-mid) var(--ease),
    transform var(--t-mid) var(--ease),
    box-shadow var(--t-mid) var(--ease);
}
[ui~="premium"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    transparent 30%,
    color-mix(in oklch, white 14%, transparent) 50%,
    transparent 70%);
  transform: translateX(-110%);
  animation: ceduix-shimmer 2.4s var(--ease) 0.3s 1 forwards;
  pointer-events: none;
}
[ui~="premium"]:hover {
  border-color: color-mix(in oklch, var(--ac) 42%, var(--bdr-1));
  transform: translateY(-2px);
  box-shadow:
    0 1px 2px color-mix(in oklch, var(--ac-lo) 22%, transparent),
    0 20px 56px color-mix(in oklch, var(--ac-lo) 18%, transparent),
    inset 0 1px 0 color-mix(in oklch, white 14%, transparent);
}
@keyframes ceduix-shimmer {
  to { transform: translateX(110%); }
}
@media (prefers-reduced-motion: reduce) {
  [ui~="premium"]::before { animation: none; opacity: 0; }
  [ui~="premium"]:hover { transform: none; }
}

/* ── TABULAR-NUMS — extend to all numeric display tokens ──── */
[ui~="stat"], [ui~="metric"], [ui~="num"],
table tbody td, table tfoot td {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ═══════════════════════════════════════════════════════════
   v1.5 BLOG READING SURFACE — three composable tokens.
   - ui="hero"            recipe: cover+center+stack+stagger in one word
   - ui="reading-progress" sticky 2px accent bar driven by scroll position
   - ui="drop-cap"        ::first-letter editorial drop-cap on prose
   ═══════════════════════════════════════════════════════════ */

/* HERO recipe — single token equals showcase pattern */
[ui~="hero"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-6);
  min-height: 60vh;
  padding: var(--s-12) clamp(var(--s-4), 3vw, var(--s-12));
  text-align: center;
  position: relative;
}
[ui~="hero"] > * { max-width: 48rem; }
[ui~="hero"] > *:nth-child(1) { animation: ceduix-in .5s var(--ease) .05s both; }
[ui~="hero"] > *:nth-child(2) { animation: ceduix-in .5s var(--ease) .13s both; }
[ui~="hero"] > *:nth-child(3) { animation: ceduix-in .5s var(--ease) .21s both; }
[ui~="hero"] > *:nth-child(4) { animation: ceduix-in .5s var(--ease) .29s both; }
[ui~="hero"] > *:nth-child(5) { animation: ceduix-in .5s var(--ease) .37s both; }
[ui~="hero"] > *:nth-child(n+6) { animation: ceduix-in .5s var(--ease) .45s both; }
@media (prefers-reduced-motion: reduce) {
  [ui~="hero"] > * { animation: none; }
}

/* READING-PROGRESS — sticky 2px accent bar */
[ui~="reading-progress"] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: color-mix(in oklch, var(--bdr-1) 40%, transparent);
  z-index: 60;
  pointer-events: none;
}
[ui~="reading-progress"]::before {
  content: "";
  display: block;
  height: 100%;
  width: var(--progress, 0%);
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--ac), white 12%),
    var(--ac));
  box-shadow: 0 0 12px var(--ac-gl);
  transition: width .1s linear;
}

/* DROP-CAP — editorial first-letter on prose first paragraph */
[ui~="drop-cap"]::first-letter,
[ui~="prose"] > p:first-of-type::first-letter {
  font-family: var(--f-disp);
  font-size: 4em;
  font-weight: 600;
  line-height: .85;
  float: left;
  margin: .1em .15em -.1em 0;
  color: var(--ac);
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--ac), white 10%),
    var(--ac));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 480px) {
  [ui~="drop-cap"]::first-letter,
  [ui~="prose"] > p:first-of-type::first-letter {
    font-size: 3.2em;
  }
}

} /* end @layer ceduix */

/* ── PRINT — A4 landscape canonical contract ────────────────────────────
   Usage:
     <main data-print="root">                     ← optional root marker
       <button data-print="hide">Print</button>   ← stripped on print
       <section data-print="page">…</section>     ← one A4 page per section
         <div data-print-keep>…</div>             ← don't split this block
   Output: browser print dialog → "Save as PDF" (A4 landscape).
   Outside @layer ceduix → wins specificity against any @layer override.
*/
@media print {
  @page { size: A4 landscape; margin: 1cm; }
  html, body { background: white !important; color-scheme: light; }
  [data-print="hide"] { display: none !important; }
  [data-print="page"] { page-break-after: always; break-after: page; }
  [data-print="page"]:last-child { page-break-after: auto; break-after: auto; }
  [data-print-keep] { break-inside: avoid; page-break-inside: avoid; }
  a[href]:after { content: ""; }
}