/* ═══════════════════════════════════════════════════════════
   Ced UI  v0.2.0  —  The LLM-Optimal Component Framework
   One attribute. Every component. Zero imports.
   github.com/cedricflodin/ced  ·  MIT License
   ═══════════════════════════════════════════════════════════
   USAGE:  <div ui="card elevated">...</div>
   VOCAB:  49 words  ·  max 4 per ui attribute
   ═══════════════════════════════════════════════════════════ */

/* ── TOKENS ───────────────────────────────────────────────── */
:root {
  --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;

  --bg-0:#09080d; --bg-1:#0f0e15; --bg-2:#16151e;
  --bg-3:#1e1d28; --bg-4:#272633;

  --bdr-0:rgba(255,255,255,.04); --bdr-1:rgba(255,255,255,.08);
  --bdr-2:rgba(255,255,255,.14); --bdr-3:rgba(255,255,255,.22);

  --tx-0:#f0eefa; --tx-1:#bbb8d0; --tx-2:#7c7993; --tx-3:#4a4860;

  --ac:#d4891a;  --ac-hi:#f0a830; --ac-lo:#8a550d;
  --ac-bg:rgba(212,137,26,.10);   --ac-gl:rgba(212,137,26,.18);

  --ok:#2db88a;  --ok-bg:rgba(45,184,138,.10);
  --wr:#e8a020;  --wr-bg:rgba(232,160,32,.10);
  --er:#e84040;  --er-bg:rgba(232,64,64,.10);
  --in:#4a8ff0;  --in-bg:rgba(74,143,240,.10);

  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:18px; --r-full:9999px;

  --f-ui:'Outfit',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',monospace;
  --f-disp:'Cormorant Garamond',Georgia,serif;

  --sh-sm:0 1px 3px rgba(0,0,0,.5);
  --sh-md:0 4px 16px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.4);
  --sh-lg:0 12px 48px rgba(0,0,0,.7),0 4px 12px rgba(0,0,0,.4);
  --sh-ac:0 0 0 1px var(--ac-lo),0 4px 24px var(--ac-gl);

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

/* ── THEME: KOLIGO (navy + gold) ─────────────────────────── */
[data-theme="koligo"] {
  --bg-0:#060d1a; --bg-1:#0a1628; --bg-2:#0d1a2e;
  --bg-3:#111f36; --bg-4:#162844;
  --bdr-0:rgba(196,162,101,.06); --bdr-1:rgba(196,162,101,.12);
  --bdr-2:rgba(196,162,101,.20); --bdr-3:rgba(196,162,101,.30);
  --tx-0:#e8e4dd; --tx-1:rgba(255,255,255,.75); --tx-2:rgba(255,255,255,.58); --tx-3:rgba(255,255,255,.35);
  --ac:#c4a265;  --ac-hi:#dbb97a; --ac-lo:#8c6430;
  --ac-bg:rgba(196,162,101,.10);  --ac-gl:rgba(196,162,101,.18);
  --sh-sm:0 1px 3px rgba(0,0,0,.4);
  --sh-md:0 4px 16px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3);
  --sh-lg:0 12px 48px rgba(0,0,0,.6),0 4px 12px rgba(0,0,0,.3);
  --glass-bg:rgba(6,13,26,.75);
  --glass-bdr:rgba(196,162,101,.08);
}

/* Cream content theme — light reading surface, dark header/footer stay koligo */
[data-theme="koligo"] [data-surface="cream"] {
  --bg-0:#faf8f4; --bg-1:#f5f2ec; --bg-2:#efe9e0;
  --bg-3:#e8e0d4; --bg-4:#ddd4c6;
  --bdr-0:rgba(30,20,10,.06); --bdr-1:rgba(30,20,10,.10);
  --bdr-2:rgba(30,20,10,.16); --bdr-3:rgba(30,20,10,.25);
  --tx-0:#1a1510; --tx-1:rgba(26,21,16,.78); --tx-2:rgba(26,21,16,.55); --tx-3:rgba(26,21,16,.35);
  --ac:#8c6430;  --ac-hi:#a07038; --ac-lo:#6b4c24;
  --ac-bg:rgba(140,100,48,.08);  --ac-gl:rgba(140,100,48,.14);
  --sh-sm:0 1px 3px rgba(0,0,0,.06);
  --sh-md:0 4px 16px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.04);
  --sh-lg:0 12px 48px rgba(0,0,0,.10),0 4px 12px rgba(0,0,0,.05);
  --glass-bg:rgba(250,248,244,.85);
  --glass-bdr:rgba(30,20,10,.08);
  --ok:#2d7a4f; --wr:#b8860b; --er:#b33a3a;
  color:var(--tx-0); background:var(--bg-0);
}

/* Panels and cards on cream get subtle warm borders */
[data-surface="cream"] [ui~="panel"],
[data-surface="cream"] [ui~="card"] {
  border-color:var(--bdr-2);
}

/* Code blocks on cream — dark inset */
[data-surface="cream"] [ui~="code"] {
  background:#1a1510; color:#e8e4dd;
}

/* Gradient text on cream — darker gold */
[data-surface="cream"] [ui~="gradient-text"] {
  background:linear-gradient(135deg,#8c6430,#c4a265,#8c6430);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* Eyebrow on cream */
[data-surface="cream"] [ui~="eyebrow"] {
  color:var(--ac);
}

/* Badge on cream */
[data-surface="cream"] [ui~="badge"] {
  background:var(--bg-2); color:var(--tx-1); border-color:var(--bdr-2);
}
[data-surface="cream"] [ui~="accent"] {
  background:var(--ac-bg); color:var(--ac);
}

/* Prose on cream */
[data-surface="cream"] [ui~="prose"] a { color:var(--ac); }
[data-surface="cream"] [ui~="prose"] code { background:var(--bg-2); color:var(--tx-0); }
[data-surface="cream"] [ui~="prose"] pre { background:#1a1510; color:#e8e4dd; }
[data-surface="cream"] [ui~="prose"] pre code { background:none; color:inherit; }
[data-surface="cream"] [ui~="prose"] blockquote { border-color:var(--ac); background:var(--bg-1); }

/* Divider on cream */
[data-surface="cream"] [ui~="divider"] {
  background:linear-gradient(90deg,transparent,var(--bdr-2),transparent);
}

/* ── 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}
[ui~="cluster"] {display:flex;flex-wrap:wrap;align-items:center}
[ui~="grid"]    {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr))}
[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)}

/* ── 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~="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:rgba(9,8,13,.85);backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid var(--bdr-2);border-radius:var(--r-xl);
}

/* 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,rgba(6,13,26,.75));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-bdr,var(--bdr-1));box-shadow:0 4px 24px -2px rgba(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);
}
[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);
}
[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:400}
[ui~="caption"] {font-size:.75rem;line-height:1.5;color:var(--tx-2);letter-spacing:.02em}
[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"][ui~="outline"] {background:transparent;color:var(--tx-0);border-color:var(--bdr-2)}
[ui~="button"][ui~="ghost"]   {background:transparent;color:var(--tx-1);border-color:transparent}
[ui~="button"][ui~="muted"]   {background:var(--bg-3);color:var(--tx-1);border-color:var(--bdr-1)}
[ui~="button"][ui~="danger"]  {background:var(--er);color:#fff}

[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)}

/* ── 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),box-shadow var(--t-fast);
}
[ui~="input"]:focus {border-color:var(--ac-lo);box-shadow:0 0 0 3px var(--ac-bg)}
[ui~="input"]::placeholder {color:var(--tx-3)}

/* ── BADGE ────────────────────────────────────────────────── */
[ui~="badge"] {
  display:inline-flex;align-items:center;gap:var(--s-1);
  font-family:var(--f-mono);font-size:.65rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  padding:.25em .65em;border-radius:var(--r-full);
  background:var(--bg-3);color:var(--tx-1);border:1px solid var(--bdr-1);
}
[ui~="badge"][ui~="accent"]  {background:var(--ac-bg);color:var(--ac-hi);border-color:var(--ac-lo)}
[ui~="badge"][ui~="success"] {background:var(--ok-bg);color:var(--ok);border-color:rgba(45,184,138,.25)}
[ui~="badge"][ui~="danger"]  {background:var(--er-bg);color:var(--er);border-color:rgba(232,64,64,.25)}
[ui~="badge"][ui~="warning"] {background:var(--wr-bg);color:var(--wr);border-color:rgba(232,160,32,.25)}

/* ── 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 rgba(74,143,240,.2);
  display:flex;gap:var(--s-3);align-items:flex-start;
}
[ui~="alert"][ui~="success"] {background:var(--ok-bg);border-color:rgba(45,184,138,.2)}
[ui~="alert"][ui~="warning"] {background:var(--wr-bg);border-color:rgba(232,160,32,.2)}
[ui~="alert"][ui~="danger"]  {background:var(--er-bg);border-color:rgba(232,64,64,.2)}

/* ── 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);
}

/* ── 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:var(--glass-bg,rgba(9,8,13,.85));backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
}
[ui~="nav-spacer"]{flex:1}
[ui~="nav-link"]{display:block;padding:var(--s-3) var(--s-6);color:var(--tx-2);text-decoration:none;font-size:.875rem;transition:color var(--t-fast) var(--ease)}
@media(hover:hover){[ui~="nav-link"]:hover{color:var(--ac-hi)}}

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

/* ── ANIMATIONS ───────────────────────────────────────────── */
@keyframes ced-in {from{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:none}}

[ui~="animate"]{animation:ced-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}

/* ── PREMIUM EFFECTS ─────────────────────────────────────── */

/* glow — accent radial glow (::before, hover-activated) */
[ui~="glow"]{position:relative;overflow:visible}
[ui~="glow"]::before{content:'';position:absolute;inset:-1px;border-radius:inherit;background:radial-gradient(ellipse at 50% 50%,var(--ac-gl) 0%,transparent 70%);opacity:0;transition:opacity var(--t-mid) var(--ease);z-index:-1;pointer-events:none}
@media(hover:hover){[ui~="glow"]:hover::before{opacity:1}}
[ui~="glow"][ui~="accent"]::before{opacity:1}

/* grain — noise texture overlay (::after) */
[ui~="grain"]{position:relative;overflow:hidden}
[ui~="grain"]::after{content:'';position:absolute;inset:0;border-radius:inherit;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:128px 128px;opacity:.03;mix-blend-mode:overlay;pointer-events:none;z-index:1}

/* gradient-text — accent gradient fill on text */
[ui~="gradient-text"]{background:linear-gradient(135deg,var(--ac-hi) 0%,var(--ac) 50%,var(--ac-lo) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}

/* blur-fade — blur-to-sharp scroll entrance (IntersectionObserver) */
[ui~="blur-fade"]{opacity:0;filter:blur(12px);transform:translateY(1rem);transition:opacity .8s var(--ease),filter .8s var(--ease),transform .8s var(--ease)}
[ui~="blur-fade"].in-view{opacity:1;filter:blur(0);transform:none}
[ui~="blur-fade"][ui~="d1"].in-view{transition-delay:.1s}
[ui~="blur-fade"][ui~="d2"].in-view{transition-delay:.2s}
[ui~="blur-fade"][ui~="d3"].in-view{transition-delay:.3s}
[ui~="blur-fade"][ui~="d4"].in-view{transition-delay:.4s}
[ui~="blur-fade"][ui~="d5"].in-view{transition-delay:.5s}
[ui~="blur-fade"][ui~="d6"].in-view{transition-delay:.6s}

/* hover-lift + hover-glow */
@media(hover:hover){
  [ui~="hover-lift"]{transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease)}
  [ui~="hover-lift"]:hover{transform:translateY(-4px) scale(1.01);box-shadow:var(--sh-lg),0 0 0 1px var(--bdr-2);border-color:var(--bdr-3)}
  [ui~="hover-glow"]{transition:box-shadow var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease)}
  [ui~="hover-glow"]:hover{border-color:var(--ac-lo);box-shadow:0 0 0 1px var(--ac-lo),0 0 20px -4px var(--ac-gl),inset 0 0 12px -6px var(--ac-gl)}
}

/* twinkle — subtle opacity pulse (ambient) */
@keyframes ced-twinkle{0%,100%{opacity:1}50%{opacity:.5}}
[ui~="twinkle"]{animation:ced-twinkle 6s ease-in-out infinite}
[ui~="twinkle"][ui~="d2"]{animation-duration:8s;animation-delay:.5s}
[ui~="twinkle"][ui~="d4"]{animation-duration:10s;animation-delay:1s}

/* breathe — scale + opacity pulse (ambient) */
@keyframes ced-breathe{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
[ui~="breathe"]{animation:ced-breathe 5s ease-in-out infinite}

/* ── COMPONENTS ──────────────────────────────────────────── */

/* dialog — native <dialog> element styling */
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:min(32rem,calc(100vw - var(--s-8)));box-shadow:var(--sh-lg)}
dialog[ui~="dialog"]::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(8px)}
dialog[ui~="dialog"][open]{animation:ced-dialog-in .3s var(--ease) both}
@keyframes ced-dialog-in{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}

/* tabs / tab-list / tab-panel — radio-based tab switching */
[ui~="tabs"]{display:flex;flex-direction:column}
[ui~="tab-list"]{display:flex;border-bottom:1px solid var(--bdr-1)}
[ui~="tab-list"] input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
[ui~="tab-list"] label{font-family:var(--f-ui);font-size:.875rem;font-weight:500;color:var(--tx-2);padding:var(--s-3) var(--s-5);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--t-fast),border-color var(--t-fast);min-height:44px;display:flex;align-items:center}
[ui~="tab-list"] input:checked+label{color:var(--tx-0);border-bottom-color:var(--ac)}
[ui~="tab-panel"]{display:none;padding:var(--s-6) 0}
[ui~="tab-panel"].active{display:block}

/* skeleton — shimmer loading placeholder */
[ui~="skeleton"]{background:linear-gradient(90deg,var(--bg-3) 0%,var(--bg-4) 40%,var(--bg-3) 60%,var(--bg-3) 100%);background-size:300% 100%;animation:ced-shimmer 1.8s var(--ease) infinite;border-radius:var(--r-md);color:transparent!important;user-select:none;pointer-events:none}
[ui~="skeleton"] *{visibility:hidden}
@keyframes ced-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* tooltip — CSS-only hover/focus tooltip via data-tip */
[ui~="tooltip"]{position:relative}
[ui~="tooltip"]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--bg-4);color:var(--tx-0);font-family:var(--f-ui);font-size:.75rem;padding:.35em .65em;border-radius:var(--r-sm);border:1px solid var(--bdr-2);box-shadow:var(--sh-sm);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--t-fast),transform var(--t-fast);z-index:50}
@media(hover:hover){[ui~="tooltip"]:hover::after{opacity:1;transform:translateX(-50%)}}
[ui~="tooltip"]:focus-visible::after{opacity:1;transform:translateX(-50%)}

/* progress — styled native <progress> element */
progress[ui~="progress"]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border:none;border-radius:var(--r-full);background:var(--bg-3)}
progress[ui~="progress"]::-webkit-progress-bar{background:var(--bg-3);border-radius:var(--r-full)}
progress[ui~="progress"]::-webkit-progress-value{background:linear-gradient(90deg,var(--ac-lo),var(--ac),var(--ac-hi));border-radius:var(--r-full)}
progress[ui~="progress"]::-moz-progress-bar{background:linear-gradient(90deg,var(--ac-lo),var(--ac),var(--ac-hi));border-radius:var(--r-full)}

/* ── PROSE (markdown article rendering) ───────────────────── */
[ui~="prose"]{font-family:var(--f-ui);font-size:1rem;line-height:1.75;color:var(--tx-1)}
[ui~="prose"] h1{font-size:2rem;font-weight:700;color:var(--tx-0);margin:2em 0 .5em;line-height:1.2}
[ui~="prose"] h2{font-size:1.5rem;font-weight:600;color:var(--tx-0);margin:1.75em 0 .5em;line-height:1.25}
[ui~="prose"] h3{font-size:1.25rem;font-weight:600;color:var(--tx-0);margin:1.5em 0 .5em;line-height:1.3}
[ui~="prose"] h4{font-size:1rem;font-weight:600;color:var(--tx-0);margin:1.25em 0 .5em}
[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"] strong{color:var(--tx-0);font-weight:600}
[ui~="prose"] ul,[ui~="prose"] ol{margin:.75em 0;padding-left:1.5em}
[ui~="prose"] li{margin:.25em 0}
[ui~="prose"] li::marker{color:var(--tx-3)}
[ui~="prose"] blockquote{border-left: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)}

/* ── UTILS ────────────────────────────────────────────────── */
[ui~="truncate"]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[ui~="grow"]    {flex:1}
[ui~="shrink-0"]{flex-shrink:0}
a[ui~="caption"]{text-decoration:none}
a[ui~="card"]{text-decoration:none;display:block;color:inherit}
[ui~="no-list"]{list-style:none;padding-left:0}
[ui~="text-center"]{text-align:center}
[ui~="link"]{color:var(--ac);text-decoration:none;transition:color var(--t-fast)}
@media(hover:hover){[ui~="link"]:hover{color:var(--ac-hi);text-decoration:underline;text-underline-offset:3px}}

/* ── MOBILE NAV ──────────────────────────────────────────── */
[ui~="nav-toggle"]{display:none;background:none;border:none;cursor:pointer;padding:var(--s-2);color:var(--tx-2)}
[ui~="nav-toggle"]:hover{color:var(--tx-0)}
[ui~="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}
[ui~="nav-mobile"].open{display:block;opacity:1;transform:none;pointer-events:auto}
@media(max-width:640px){
  [ui~="nav-desktop"]{display:none!important}
  [ui~="nav-toggle"]{display:block}
}

/* ── INTERACTION — hover/touch/focus ─────────────────────── */
/* Hover effects only fire on devices with a pointer */
@media(hover:hover){
  [ui~="card"]:hover{border-color:var(--bdr-2)}
  [ui~="button"]:hover{background:var(--ac-hi);transform:translateY(-1px);box-shadow:0 4px 16px var(--ac-gl)}
  [ui~="button"][ui~="outline"]:hover{border-color:var(--bdr-3);background:var(--bg-3)}
  [ui~="button"][ui~="ghost"]:hover{background:var(--bg-3);color:var(--tx-0)}
  [ui~="button"][ui~="muted"]:hover{background:var(--bg-4);color:var(--tx-0)}
  [ui~="nav-mobile"] a:hover{color:var(--tx-0);background:var(--ac-bg)}
}
/* Active states work on both touch and pointer */
[ui~="button"]:active{transform:translateY(0);box-shadow:none;opacity:.85}
[ui~="card"]:active{border-color:var(--bdr-2);background:var(--bg-3)}
/* Visible focus for keyboard navigation */
:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:var(--r-sm)}
/* Minimum touch targets (WCAG 2.5.8) */
[ui~="button"],a[ui~="body"],a[ui~="caption"]{min-height:44px;min-width:44px}

/* ── ACCESSIBILITY ───────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [ui~="reveal"]{opacity:1;transform:none;transition:none}
  [ui~="blur-fade"]{opacity:1;filter:none;transform:none;transition:none}
}
@media(forced-colors:active){
  [ui~="card"],[ui~="panel"],[ui~="sheet"]{border:1px solid CanvasText}
  [ui~="button"]{border:1px solid ButtonText}
  [ui~="divider"]{background:CanvasText}
}

/* ── SAFE AREAS ──────────────────────────────────────────── */
@supports(padding:env(safe-area-inset-top)){
  [ui~="nav"]{padding-top:max(var(--s-3),env(safe-area-inset-top))}
  [ui~="page"]{padding-bottom:env(safe-area-inset-bottom)}
}

/* ── MOBILE: PHONE (≤480px) ──────────────────────────────── */
@media(max-width:480px){
  [ui~="section"]{padding:var(--s-8) var(--s-4)}
  [ui~="heading"]{font-size:clamp(1.25rem,5vw,1.75rem)}
  [ui~="heading"][ui~="sm"]{font-size:1rem}
  [ui~="heading"][ui~="lg"]{font-size:clamp(1.5rem,6vw,2.25rem)}
  [ui~="heading"][ui~="xl"]{font-size:clamp(1.75rem,8vw,3rem)}
  [ui~="body"]{font-size:.85rem;line-height:1.65}
  [ui~="caption"]{font-size:.7rem}
  [ui~="eyebrow"]{font-size:.6rem}
  [ui~="card"]{padding:var(--s-4);border-radius:var(--r-md)}
  [ui~="panel"]{padding:var(--s-5);border-radius:var(--r-lg)}
  [ui~="nav"]{padding:var(--s-3) var(--s-4);gap:var(--s-4)}
  [ui~="grid"]{grid-template-columns:1fr}
  footer[ui~="section"]{margin-top:var(--s-12);padding:var(--s-6) var(--s-4)}
  /* Stack footer content vertically */
  footer [ui~="cluster"]{flex-direction:column;align-items:flex-start;gap:var(--s-4)}
  /* Full-width buttons on phone */
  [ui~="button"][ui~="lg"]{width:100%;justify-content:center}
}

/* ── MOBILE: TABLET (481–768px) ──────────────────────────── */
@media(min-width:481px) and (max-width:768px){
  [ui~="section"]{padding:var(--s-10) var(--s-6)}
  [ui~="card"]{padding:var(--s-5)}
  footer[ui~="section"]{margin-top:var(--s-16)}
}

/* ── PRINT ───────────────────────────────────────────────── */
@media print{
  [ui~="page"]{background:#fff;color:#000}
  [ui~="nav"],[ui~="nav-toggle"],[ui~="nav-mobile"]{display:none!important}
  [ui~="card"],[ui~="panel"]{break-inside:avoid;border:1px solid #ccc;box-shadow:none}
  [ui~="button"]{border:1px solid #999}
  [ui~="reveal"],[ui~="blur-fade"]{opacity:1;transform:none;filter:none}
  a{color:inherit;text-decoration:underline}
}

/* ── GLOBAL POLISH ────────────────────────────────────────── */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
::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-full)}