/* 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

   ⚠ LOCAL-FORK ⚠ — DO NOT REPLACE WITH A RAW UPSTREAM SYNC.
   This file is the canonical for cedricflodin.se and is RICHER than the
   public canonical at https://ceduix.cedricflodin.se/css/ceduix.css.
   The upstream serves the same v1.5.0 version string but ~628 fewer lines
   (no §P hero recipe, no v1.5.0 surface tokens). A `curl … -o` overwrite
   silently broke the homepage hero on 2026-05-20 (commit a0e89f4).

   Sync protocol (if upstream MUST be pulled):
     1. curl -fsS https://ceduix.cedricflodin.se/css/ceduix.css \
          -o /tmp/ceduix-upstream.css
     2. diff /tmp/ceduix-upstream.css public/ceduix/css/ceduix.css
     3. Cherry-pick UPSTREAM additions into THIS file; never overwrite.
     4. python3 scripts/verify-ceduix.py   # must exit 0 before commit
   Gate: pnpm verify:ceduix (wired into verify:all + CI verify.yml).

   ═══════════════════════════════════════════════════════════
   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: 82; }

@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) — clean white, navy-black, gold accent.
     Replaces the previous warm-cream + warm-dark + amber-gold scheme with a
     navy-tinted neutral palette + true gold accent.
     Fallback: light-mode value for browsers without light-dark() (~13%) */
  --bg-base:  oklch(0.985 0.004 240);
  --bg-base:  light-dark(oklch(0.985 0.004 240), oklch(0.13 0.025 252));
  --tx-base:  oklch(0.16 0.030 252);
  --tx-base:  light-dark(oklch(0.16 0.030 252), oklch(0.94 0.012 240));
  /* True gold accent. The previous oklch(0.68 0.15 82) gamut-clipped to a
     burnt-orange (#B85A20) in sRGB; literal hex keeps the gold consistent
     across browsers. The parametric --hue still drives derived colors below
     but the brand accent itself is anchored. */
  --ac-base:  #d4a72c;
  --ac-base:  light-dark(#c89a1a, #e8be4a);
  /* Brand navy — used in hero overlay + as a deep surface color independent
     of --tx-base, so darkening the text doesn't change hero contrast. */
  --navy:     oklch(0.18 0.045 252);
  --navy-deep: oklch(0.10 0.040 252);

  /* 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;

  /* Z-canon — single fleet-wide stacking scale. Every surface and chrome
     element MUST resolve z-index from this set. Literal `z-index: <integer>`
     outside this file is a verifier failure (S.z-canon). The 10-step gap is
     deliberate — never insert intermediate values, promote the offending
     element to the next tier instead. Range 0–90 keeps room for browser UA
     stacking (100+) and per-archetype debug overlays (>1000). */
  --ac-z-base:    0;   /* document flow, surface root */
  --ac-z-stage:   10;  /* canvas / scene / fixed-aspect stage */
  --ac-z-panel:   20;  /* in-flow content panels above stage */
  --ac-z-toolbar: 30;  /* surface-scoped toolbar, sticky tabs */
  --ac-z-sheet:   40;  /* surface-scoped sheet, bottom-bar, inspector */
  --ac-z-drawer:  50;  /* chrome sidebar / drawer panel */
  --ac-z-overlay: 60;  /* drawer / modal backdrop */
  --ac-z-trigger: 70;  /* chrome menu trigger (closed state, top-right) */
  --ac-z-tooltip: 80;  /* pointer-tracked tooltips, popovers */
  --ac-z-toast:   90;  /* transient status messages, top of stack */

  /* 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',system-ui,sans-serif;
  --f-mono:'Outfit',system-ui,sans-serif;
  --f-disp:'Outfit',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;
  }
}

/* ── §T RHYTHM — vertical spacing between typography tokens (v1.5) ──────
   SSOT: cedricflodin .claude/plans/open/INSTALL-editorial-rebrand-light.md §T
   what: authors emit semantic markup in order; spacing emerges automatically
         via adjacent-sibling combinators. Never set margin-top on a
         [ui~="heading|subheading|body|caption|cta"] element manually.
   greppable: rg '^\s*--rhythm-' public/ceduix/css/ceduix.css → expect 7 rows
*/
:root {
  --rhythm-heading-to-subheading: var(--s-3);   /*  12 px @ root 16 px */
  --rhythm-subheading-to-body:    var(--s-5);   /*  20 px */
  --rhythm-body-to-body:          var(--s-3);   /*  12 px paragraph gap */
  --rhythm-body-to-heading:       var(--s-8);   /*  32 px section break (ceduix --s-7 absent; --s-8 nearest) */
  --rhythm-caption-to-anything:   var(--s-2);   /*   8 px captions hug their target */
  --rhythm-cta-to-body:           var(--s-5);   /*  20 px */
  --rhythm-section-to-section:    var(--s-10);  /*  40 px panel-level gap */
}

/* Reset every margin on typography tokens, then drive rhythm via adjacency. */
[ui~="heading"],
[ui~="subheading"],
[ui~="body"],
[ui~="caption"] { margin: 0; }

/* Adjacent-sibling cascade — author writes markup in order, spacing follows. */
[ui~="heading"]    + [ui~="subheading"] { margin-top: var(--rhythm-heading-to-subheading); }
[ui~="subheading"] + [ui~="body"]        { margin-top: var(--rhythm-subheading-to-body);    }
[ui~="body"]       + [ui~="body"]        { margin-top: var(--rhythm-body-to-body);          }
[ui~="body"]       + [ui~="heading"]     { margin-top: var(--rhythm-body-to-heading);       }
[ui~="caption"]    + [ui~="heading"],
[ui~="caption"]    + [ui~="body"]        { margin-top: var(--rhythm-caption-to-anything);   }
[ui~="cta"]        + [ui~="body"]        { margin-top: var(--rhythm-cta-to-body);           }

/* Panel-level rhythm when authors stack panels without ui="stack lg". */
[ui~="panel"]      + [ui~="panel"]       { margin-top: var(--rhythm-section-to-section);    }

/* §T.3 line-length + line-height per typography token.
   max-width in ch keeps measure within 45–75 characters for body, balanced
   for display headlines so they break in the right place at large sizes. */
[ui~="heading"][ui~="xl"]  { max-width: 16ch; line-height: 1.0;  text-wrap: balance; letter-spacing: -0.02em; }
[ui~="heading"][ui~="lg"]  { max-width: 18ch; line-height: 1.05; text-wrap: balance; letter-spacing: -0.01em; }
[ui~="heading"]:not([ui~="xl"]):not([ui~="lg"]):not([ui~="sm"]) {
  max-width: 22ch; line-height: 1.1;  text-wrap: balance;
}
[ui~="heading"][ui~="sm"]  { max-width: 32ch; line-height: 1.2; }
[ui~="subheading"]         { max-width: 60ch; line-height: 1.4; text-wrap: balance; }
[ui~="body"]               { max-width: 60ch; line-height: 1.6; text-wrap: pretty; }
[ui~="caption"]            { max-width: 40ch; line-height: 1.4; }
[ui~="prose"]              { hyphens: auto; } /* lang attribute on <html> drives Swedish hyphenation */

/* ── C3 IMAGE-LED CARD ─────────────────────────────────────────────────── */
[ui~="card"][ui~="image-led"] {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--rhythm-caption-to-anything);
  padding: 0;
  overflow: hidden;
}
[ui~="card"][ui~="image-led"] > figure {
  margin: 0;
  aspect-ratio: 16 / 10;
  background: var(--bg-2);
  overflow: hidden;
}
[ui~="card"][ui~="image-led"] > figure > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms ease;
}
[ui~="card"][ui~="image-led"]:hover > figure > img {
  transform: scale(1.02);
}
[ui~="card"][ui~="image-led"] > figcaption {
  padding: var(--s-3) var(--s-4) var(--s-4);
}

/* ── C4 CATEGORY-TAG ───────────────────────────────────────────────────── */
[ui~="category-tag"] {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--tx-2);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
[ui~="category-tag"]::before {
  content: "●";
  color: var(--ac);
  font-size: 0.65em;
}

/* ── C5 ISSUE-MARKER · SERIAL · STEP-INDICATOR ─────────────────────────── */
[ui~="issue-marker"] {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--tx-2);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
[ui~="serial"] {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tx-2);
  font-variant-numeric: tabular-nums;
}
[ui~="step-indicator"] {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--tx-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
}

/* ── C6 CHIP-STRIP + CHIP ──────────────────────────────────────────────── */
[ui~="chip-strip"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
[ui~="chip"] {
  display: inline-flex;
  align-items: center;
  padding: var(--s-1) var(--s-3);
  font-family: var(--f-ui);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--tx-2);
  background: var(--bg-2);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  user-select: none;
}
[ui~="chip"][data-state="active"] {
  background: var(--ac);
  color: var(--bg);
  border-color: var(--ac);
}
[ui~="chip"]:hover:not([data-state="active"]) {
  background: var(--bg-3, var(--bg-2));
  color: var(--tx-1);
}

/* ── C7 REVEAL (paired with installScrollReveal in src/main.ts) ─────────── */
[ui~="reveal"] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease, transform 600ms ease;
  will-change: opacity, transform;
}
[ui~="reveal"][data-state="entered"] {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [ui~="reveal"] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── C8 SCROLL-PROGRESS — page-level (generalised from reading-progress) ─ */
[ui~="scroll-progress"] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    var(--ac) var(--progress, 0%),
    transparent var(--progress, 0%)
  );
  z-index: 100;
  pointer-events: none;
}

/* ── C9 GRID ASYMMETRIC — 12-col Auwa-style with data-span ─────────────── */
[ui~="grid"][ui~="asymmetric"] {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-5);
}
[ui~="grid"][ui~="asymmetric"] > [data-span="2"]  { grid-column: span 2; }
[ui~="grid"][ui~="asymmetric"] > [data-span="3"]  { grid-column: span 3; }
[ui~="grid"][ui~="asymmetric"] > [data-span="4"]  { grid-column: span 4; }
[ui~="grid"][ui~="asymmetric"] > [data-span="5"]  { grid-column: span 5; }
[ui~="grid"][ui~="asymmetric"] > [data-span="6"]  { grid-column: span 6; }
[ui~="grid"][ui~="asymmetric"] > [data-span="8"]  { grid-column: span 8; }
[ui~="grid"][ui~="asymmetric"] > [data-span="12"] { grid-column: span 12; }
@media (max-width: 640px) {
  [ui~="grid"][ui~="asymmetric"] { grid-template-columns: 1fr; }
  [ui~="grid"][ui~="asymmetric"] > [data-span] { grid-column: span 1; }
}

/* ── C10 CAPTION BREADCRUMB ────────────────────────────────────────────── */
[ui~="caption"][ui~="breadcrumb"] {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--tx-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
[ui~="caption"][ui~="breadcrumb"] > * + *::before {
  content: "/";
  color: var(--tx-3);
  margin-right: var(--s-2);
}

/* ── C11 TYPOGRAPHY RHYTHM — tracked display + italic editorial voice ──── */
[ui~="heading"][ui~="tracked"] {
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
[ui~="caption"][ui~="italic"],
[ui~="body"][ui~="italic"] {
  font-style: italic;
}

/* ── EXISTING CARD HOVER + FOCUS POLISH ────────────────────────────────── */
[ui~="card"]:not([ui~="image-led"]) {
  transition: transform 120ms ease, border-color 120ms ease;
}
[ui~="card"]:not([ui~="image-led"]):hover {
  transform: translateY(-1px);
}
[ui~="card"]:focus-visible,
[ui~="chip"]:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 2px;
}

} /* 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: ""; }
}

/* ── §P PREMIUM — navy/white/black/gold palette + card + motion overrides ──
   Replaces the previous warm-cream + burnt-orange + sage palette. Outfit
   typography only (no Inter, no serif, no italics). */
:root {
  /* Cool navy-tinted neutrals */
  --color-bg:        #F8F9FB;   /* clean near-white page bg */
  --color-bg-alt:    #FFFFFF;   /* paper white surface */
  --color-bg-card:   #FFFFFF;   /* pure white cards */
  --color-text:      #0B1424;   /* deep navy-black */
  --color-text-mute: #4A5468;
  --color-border:    rgba(11, 20, 36, 0.10);
  /* Gold accent + navy secondary */
  --color-accent:        #C99B2C;  /* deep gold — primary brand */
  --color-accent-hover:  #B0851D;
  --color-accent-bright: #E8BE4A;  /* bright gold — highlight word in hero */
  --color-secondary:     #1B2A47;  /* navy */
  --color-tertiary:      #0B1424;  /* deep navy-black (same as text) */
  --color-footer:        #0B1424;

  /* Re-map ceduix semantic tokens onto the warm palette */
  --bg:   var(--color-bg);
  --bg-2: var(--color-bg-alt);
  --bg-3: var(--color-bg-card);
  --tx-1: var(--color-text);
  --tx-2: var(--color-text-mute);
  --ac:   var(--color-accent);

  /* Motion — expo ease + 3 duration tiers (premium = slower + smoother) */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   600ms;

  /* Card shadow — two-tier (rest + hover) signals interactivity */
  --shadow-card:       0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.08);

  /* Curved radius scale — multiple choices instead of one --r-md */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
}

html, body { background: var(--color-bg); color: var(--color-text); }

/* Selection mirrors doue.se */
::selection { background: var(--color-accent); color: #fff; }

/* §P card upgrade — applies to every existing ui="card" + ui="card premium" */
[ui~="card"] {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--duration-normal) var(--ease-out),
              transform  var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
}
[ui~="card"]:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
  border-color: rgba(184, 90, 32, 0.18);
}

/* Premium card has a slightly stronger resting shadow + accent treatment */
[ui~="card"][ui~="premium"] {
  box-shadow: 0 2px 6px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04);
}
[ui~="card"][ui~="premium"]:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
}

/* Image-led card: lift image on group hover (doue gesture) */
[ui~="card"][ui~="image-led"] { padding: 0; overflow: hidden; }
[ui~="card"][ui~="image-led"] > figure { overflow: hidden; aspect-ratio: 16 / 10; background: var(--bg-2); }
[ui~="card"][ui~="image-led"] > figure > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--duration-slow) var(--ease-out);
}
[ui~="card"][ui~="image-led"]:hover > figure > img { transform: scale(1.04); }
[ui~="card"][ui~="image-led"] > figcaption,
[ui~="card"][ui~="image-led"] > * { padding: 0; }
[ui~="card"][ui~="image-led"] > div:not(figure) { padding: var(--s-5); }

/* §P button upgrade — premium feel via stronger resting shadow + expo press */
[ui~="button"] {
  border-radius: var(--radius-md);
  font-weight: 500;
  min-height: 44px;
  transition: background var(--duration-fast) var(--ease-out),
              transform  var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
[ui~="button"]:not([ui~="outline"]):not([ui~="ghost"]) {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
[ui~="button"]:not([ui~="outline"]):not([ui~="ghost"]):hover {
  background: var(--color-accent-hover);
  box-shadow: 0 4px 12px rgba(184, 90, 32, 0.20);
  transform: translateY(-1px);
}
[ui~="button"][ui~="outline"] {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
[ui~="button"][ui~="outline"]:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
[ui~="button"][ui~="lg"] { min-height: 52px; }
[ui~="input"] { min-height: 44px; }

@media (max-width: 640px) {
  [ui~="nav"] {
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
  }
  [ui~="nav"] [ui~="heading"][ui~="sm"] {
    flex-shrink: 0;
    font-size: 1rem;
  }
  [ui~="nav"] [ui~="nav-spacer"] {
    min-width: 0;
  }
  [ui~="nav"] a[ui~="nav-link"] {
    padding: var(--s-1) var(--s-2);
    font-size: .83rem;
    white-space: nowrap;
  }
}

/* §P hero — full-bleed photo / scene as background, content bottom-aligned with
   gradient overlay; replaces the centered-stack template feel. */
[data-zone="hero-section"][ui~="cover"] {
  min-height: 85vh !important;
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  justify-content: flex-end !important;   /* items-end like doue */
  padding: 0 !important;
  position: relative;
  overflow: hidden;
}
[data-zone="hero-section"] > canvas[data-scene] {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  z-index: 0 !important; opacity: var(--scene-opacity, 0);   /* hidden until scene marks ready after first render */
  pointer-events: none;
}
[data-zone="hero-section"][data-scene-state="ready"] > canvas[data-scene] { --scene-opacity: 1; }
[data-zone="hero-section"][data-scene-state="error"] > canvas[data-scene] { --scene-opacity: 0; }
/* Editorial-split: soft navy gradient anchored LEFT (text contrast),
   transparent on the right (scene breathes through). Lighter than dusk
   overlay so the fresh-morning scene reads as bright + alive. */
[data-zone="hero-section"]::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right,
      color-mix(in oklch, var(--navy-deep) 58%, transparent) 0%,
      color-mix(in oklch, var(--navy-deep) 28%, transparent) 32%,
      transparent 55%),
    linear-gradient(to top,
      color-mix(in oklch, var(--navy-deep) 22%, transparent) 0%,
      transparent 50%);
  pointer-events: none;
}
[data-zone="hero-section"] > [data-zone="hero"] {
  position: relative !important; z-index: 2;
  max-width: 96rem !important; width: 100%;
  margin: 0 auto !important;
  padding: var(--s-12) clamp(var(--s-4), 3vw, var(--s-12)) clamp(var(--s-12), 8vh, var(--s-20));
  text-align: left !important;
  /* Two-column grid — text in left column, right column reserved for the
     scene to breathe through. On narrow viewports the right column collapses
     and text takes the full width as before. */
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-8);
}
@media (min-width: 64rem) {
  [data-zone="hero-section"] > [data-zone="hero"] {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  [data-zone="hero"] > [data-zone="heading"],
  [data-zone="hero"] > [data-zone="subheading"],
  [data-zone="hero"] > [data-zone="cta"],
  [data-zone="hero"] > [data-zone="eyebrow"],
  [data-zone="hero"] > [data-zone="hero-back"] {
    grid-column: 1;
  }
}
[data-zone="hero"] > [data-zone="heading"] {
  color: #fff;
  font-family: var(--f-disp);
  font-size: clamp(2.95rem, 6.8vw + 0.5rem, 6.2rem);
  /* Editorial weight rhythm — Outfit Variable; non-accent lines at 300
     (light) give the eye space, accent line jumps to 600 (semibold) so
     "Innovation." earns visual weight without italic/decoration tricks. */
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: -0.028em;
  max-width: 14ch;
  margin: 0 0 var(--s-5) 0;
  text-wrap: balance;
  /* Soft halo — premium photo-title depth on a photographic backdrop.
     Two layers: thin contact shadow (preserves edge crispness) + wide
     low-opacity blur (depth without darkening text). */
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.18),
    0 8px 28px rgba(0, 0, 0, 0.34);
}
/* Accent line — same Outfit, but heavier + gradient gold→amber + hairline
   underline drawn AFTER GSAP reveal settles. The weight contrast (300→600)
   is what makes the eye stop on "Innovation." */
[data-zone="hero"] [data-zone="heading"] .heading-accent {
  font-family: var(--f-disp);
  font-weight: 600;
  font-style: normal;
  /* Gradient fill — gold core, amber rim. Falls back to solid --ac when
     background-clip:text is unsupported (covered everywhere we ship). */
  background: linear-gradient(
    100deg,
    var(--ac) 0%,
    color-mix(in oklch, var(--ac) 78%, #ffd28a) 55%,
    color-mix(in oklch, var(--ac) 60%, #c8852a) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* Slightly tighter letter-spacing — the weight bump visually expands;
     pull it back so the line still composes tightly with the lines above. */
  letter-spacing: -0.032em;
}
/* Hairline underline beneath the accent — draws in after the line reveal
   completes (heading[data-motion="settled"]). Width animated 0→100%. */
[data-zone="hero"] [data-zone="heading"] .heading-line.heading-accent {
  position: relative;
  isolation: isolate;
}
[data-zone="hero"] [data-zone="heading"] .heading-line.heading-accent::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.12em;
  height: 2px;
  width: 0;
  background: linear-gradient(
    90deg,
    color-mix(in oklch, var(--ac) 90%, transparent) 0%,
    var(--ac) 60%,
    transparent 100%
  );
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
  pointer-events: none;
}
[data-zone="heading"][data-motion="settled"] .heading-line.heading-accent::after {
  width: 42%;
}
[data-zone="hero"] > [data-zone="subheading"] {
  color: rgba(255,255,255,0.82);
  font-size: clamp(1.05rem, 1.5vw + 0.5rem, 1.3rem);
  font-weight: 400;
  line-height: 1.55;
  max-width: 38rem;
  margin: 0 0 var(--s-6) 0;
}
[data-zone="hero"] > [data-zone="cta"] {
  display: flex; gap: var(--s-3); flex-wrap: wrap;
  justify-content: flex-start !important;
}
[data-zone="hero"] [data-zone="cta"] [ui~="button"][ui~="outline"] {
  color: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.35);
}
[data-zone="hero"] [data-zone="cta"] [ui~="button"][ui~="outline"]:hover {
  border-color: #fff; color: #fff; background: rgba(255,255,255,0.06);
}

/* Hide the eyebrow inside the dark-on-photo hero — visual noise */
[data-zone="hero"] > [data-zone="eyebrow"] { display: none; }

/* §P caption tracked — uppercase tracked accent eyebrow inside cards */
[ui~="card"] [ui~="category-tag"],
[ui~="card"] [ui~="issue-marker"] { color: var(--color-accent); }

/* §P kill default browser underlines — anchors clean by default; underline is OPT-IN */
a { text-decoration: none; color: inherit; }
[ui~="nav-link"] { text-decoration: none; }
/* Prose body links get a custom underline (offset + thin) — premium not browser-default */
[ui~="prose"] a,
[ui~="body"] a:not([ui~="button"]) {
  color: var(--color-tertiary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: rgba(0, 100, 148, 0.4);
  transition: text-decoration-color var(--duration-fast) var(--ease-out);
}
[ui~="prose"] a:hover,
[ui~="body"] a:not([ui~="button"]):hover { text-decoration-color: var(--color-tertiary); }

/* Nav-link underline-from-left hover (no browser default underline) */
[ui~="nav-link"] {
  position: relative;
  padding-bottom: 2px;
}
[ui~="nav-link"]::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: currentColor;
  transition: right var(--duration-normal) var(--ease-out);
}
[ui~="nav-link"]:hover::after { right: 0; }

/* §P heading pre-bake — when GSAP will mask-reveal the heading, hide the inner
   spans BEFORE the script runs to prevent flash-of-styled-text. Pairs with
   surfaces/index/anim.ts splitHeadingLines() which adds .heading-inner. */
[data-zone="heading"] .heading-line {
  overflow: hidden;
  display: block;
  line-height: 1.06;
  padding-block: 0.04em 0.12em;
}
[data-zone="heading"] .heading-inner { display: inline-block; will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  /* Mask the lines until GSAP loads — JS sets transform to 0 once. */
  [data-zone="heading"] .heading-line .heading-inner { transform: translateY(110%); }
}
[data-zone="heading"][data-motion="settled"] .heading-line { overflow: visible; }
[data-zone="heading"][data-motion="settled"] .heading-line .heading-inner { transform: none; }
[data-zone="heading"] .heading-line .heading-accent { color: var(--color-accent-bright); }

/* ── BACK-LINK · pill back affordance rendered on every non-home surface ── */
/* Inline styles in shell.ts set base look; CSS handles hover + focus states. */
[data-zone="back-link"] {
  font-size: .8rem;
  letter-spacing: .01em;
  font-family: var(--f-disp);
  font-weight: 500;
}
[data-zone="back-link"]:hover {
  color: var(--ac) !important;
  border-color: color-mix(in oklch, var(--ac) 50%, transparent) !important;
  background: color-mix(in oklch, var(--ac) 4%, transparent) !important;
}
[data-zone="back-link"]:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 2px;
}
/* On the hero/cover where the background is dark, force readable colors */
[ui~="cover"] [data-zone="back-link"] {
  color: rgba(255,255,255,0.78) !important;
  background: rgba(0,0,0,0.32) !important;
  border-color: rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
[ui~="cover"] [data-zone="back-link"]:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.36) !important;
}

/* ── BRAND wordmark — clickable hover state, subtle accent ─────────────── */
[data-zone="brand"]:hover { opacity: .85; }
[data-zone="brand"]:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; border-radius: 4px; }

/* ── NOT-FOUND surface chrome — clean 404 panel ────────────────────────── */
[data-zone="not-found"] {
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in oklch, var(--ac) 8%, transparent) 0%, transparent 60%),
    var(--bg-0);
}