/* ============================================================================
 * SYALIA UI — the Syalia visual language, in one file.
 *
 * SOURCE OF TRUTH. Vendored verbatim (with fonts/ + syalia-ui.js) into every
 * Syalia app. Offline-first: fonts are local, no CDN, no build step.
 *
 * Structured bottom-up (Refactoring UI) and namespaced like Tailwind's @theme:
 *   1. Fonts        — vendored @font-face
 *   2. Tokens       — primitives (color, space, type, radius, shadow, z, motion)
 *                     then semantic roles (bg, surface, text, accent, glass)
 *   3. Base         — reset, typography defaults, wordmark, icons, focus
 *   4. Components    — the widget vocabulary  (.su-*)
 *   5. Patterns      — composed layouts (app shell, …)
 *   6. Effects       — motion & atmosphere
 *   7. Utilities     — the composition layer (loaded last so it always wins)
 *   8. Doc helpers   — classes used only by this reference site
 * ==========================================================================*/

/* ===========================================================================
 * 1. FONTS
 * ========================================================================= */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("fonts/SpaceGrotesk-Variable.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/Inter-Variable.woff2") format("woff2"); }
@font-face { font-family: "Material Icons"; font-style: normal; font-weight: 400; font-display: block; src: url("fonts/MaterialIcons-Regular.woff2") format("woff2"); }

/* ===========================================================================
 * 2. TOKENS — PRIMITIVES (the raw materials; no meaning yet)
 * ========================================================================= */
:root {
  /* ---- Color: neutral ramp (one cool slate-navy family, 50→950) --------- */
  --n-50:#f8fafc; --n-100:#f1f5f9; --n-200:#e2e8f0; --n-300:#cbd5e1; --n-400:#94a3b8;
  --n-500:#64748b; --n-600:#475569; --n-700:#334155; --n-800:#1e293b; --n-900:#0f172a; --n-950:#060a17;

  /* ---- Color: blue (interactive) & amber (brand highlight) -------------- */
  --blue-400:#60a5fa; --blue-500:#3b82f6; --blue-600:#2563eb; --blue-700:#1d4ed8;
  --amber-300:#fcd34d; --amber-400:#fbbf24; --amber-500:#f59e0b;

  /* ---- Color: status ---------------------------------------------------- */
  --green-400:#34d399; --red-400:#f87171;

  /* ---- Color: brand ----------------------------------------------------- */
  --brand-grad: linear-gradient(90deg, #38bdf8, #818cf8, #c084fc); /* cyan→indigo→violet */
  --brand-blue: #3e72ad;  /* desaturated syalia-blue — atmospheric / mesh only */

  /* ---- Color: product accents (per-app identity) ------------------------ */
  --p-superbot:#10b981; --p-magpie:#60a5fa; --p-peacock:#8b5cf6;
  --p-voxpopuli:#f97316; --p-beaver:#14b8a6; --p-clipper:#84cc16;

  /* ---- Space: one non-linear scale, ~25% apart (Refactoring UI) --------- */
  --space-0:0; --space-px:1px;
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-6:1.5rem; --space-8:2rem; --space-12:3rem; --space-16:4rem;
  --space-24:6rem; --space-32:8rem; --space-48:12rem; --space-64:16rem;

  /* ---- Type: families --------------------------------------------------- */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Type: size scale (12→64, hand-picked; bundles no line-height) ---- */
  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem;
  --text-xl:1.25rem; --text-2xl:1.5rem; --text-3xl:1.875rem; --text-4xl:2.25rem;
  --text-5xl:3rem; --text-6xl:4rem;
  --text-display: clamp(2.75rem, 6vw, 5rem);  /* fluid hero */

  /* ---- Type: weight (only what we use) ---------------------------------- */
  --weight-normal:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;

  /* ---- Type: leading (inverse to size) & tracking ----------------------- */
  --leading-tight:1.1; --leading-snug:1.3; --leading-normal:1.5; --leading-relaxed:1.7;
  --tracking-tight:-.02em; --tracking-normal:0; --tracking-wide:.04em;
  --tracking-caps:.12em; --tracking-eyebrow:.22em;

  /* ---- Radius ----------------------------------------------------------- */
  --radius-sm:6px; --radius:8px; --radius-md:12px; --radius-lg:20px; --radius-full:9999px;

  /* ---- Border width ----------------------------------------------------- */
  --bw:1px;

  /* ---- Elevation: 5-level shadow scale (light from above) --------------- */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.35);
  --shadow-sm: 0 2px 6px rgba(0,0,0,.4);
  --shadow-md: 0 12px 32px -8px rgba(0,0,0,.55), 0 4px 12px -4px rgba(0,0,0,.4);
  --shadow-lg: 0 18px 50px rgba(0,0,0,.45);
  --shadow-xl: 0 30px 70px -10px rgba(0,0,0,.6);

  /* ---- Blur & glass ----------------------------------------------------- */
  --blur-glass: blur(14px) saturate(1.2);

  /* ---- Z-index scale (named, so components stop guessing) --------------- */
  --z-base:1; --z-nav:50; --z-dropdown:60; --z-modal:100; --z-tooltip:1000; --z-toast:9999;

  /* ---- Motion: one easing signature + a small duration scale ------------ */
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur-micro:120ms; --dur-base:350ms; --dur-slow:800ms;

/* ===========================================================================
 * 2. TOKENS — SEMANTIC (roles that map primitives to intent)
 * ========================================================================= */
  /* Surfaces: deep page → slate panels → raised inputs → glass overlays. */
  --bg:        var(--n-950);   /* deep page background */
  --surface:   var(--n-900);   /* panels, cards, sidebars */
  --surface-2: var(--n-800);   /* inputs, raised / hover */
  --border:    #22304a;        /* hairline, reads on surface */
  --border-hi: var(--n-700);   /* hover / active borders */

  /* Text: three-step hierarchy (primary / secondary / tertiary). */
  --text:      var(--n-100);
  --text-dim:  var(--n-400);
  --text-faint:var(--n-500);

  /* Interactive accent: blue = action, everywhere. */
  --accent:    var(--blue-600);
  --accent-hi: var(--blue-500);
  --accent-lo: rgba(59,130,246,.14);

  /* Status. */
  --ok: var(--green-400); --warn: var(--amber-400); --err: var(--red-400);

  /* Glass overlay. */
  --glass-bg: rgba(30,41,59,.72);
  --glass-border: rgba(148,163,184,.28);
  --glass-shadow: var(--shadow-lg);
}

/* ===========================================================================
 * 3. BASE
 * ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-sans); font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  font-feature-settings: "cv05","ss01"; -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  background: var(--bg); color: var(--text);
}
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); margin: 0; }
a { color: inherit; }

/* Brand wordmark */
.syalia-brand { display: inline-flex; align-items: baseline; gap: .5rem; }
.syalia-wordmark { font-family: var(--font-display); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.syalia-appname { color: var(--text-dim); font-weight: var(--weight-semibold); letter-spacing: .02em; }

/* Eyebrow — structural label (amber rule + tracked caps) */
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--amber-400); }
.eyebrow::before { content: ""; width: 2rem; height: 1px; background: var(--amber-400); }

/* Material Icons */
.material-icons { font-family: "Material Icons"; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; }
.material-icons.mi-inline { font-size: 1.15em; vertical-align: -0.22em; }
.material-icons.hidden { display: none; }

/* Focus (quality floor) */
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--n-600) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--n-600); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--n-500); }

/* ===========================================================================
 * 4. COMPONENTS  (.su-*)
 * ========================================================================= */

/* ---- Buttons ------------------------------------------------------------- */
.su-btn { font-family: var(--font-sans); display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: 9px 16px; border: var(--bw) solid transparent; border-radius: var(--radius); background: var(--accent); color: #fff; font-weight: var(--weight-semibold); font-size: var(--text-sm); cursor: pointer; white-space: nowrap; transition: background var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); }
.su-btn:hover { background: var(--accent-hi); }
.su-btn:active { transform: translateY(1px); }
.su-btn:disabled { opacity: .5; cursor: not-allowed; }
.su-btn--ghost { background: transparent; color: var(--text-dim); border-color: var(--border); }
.su-btn--ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-hi); }
.su-btn--amber { background: var(--amber-400); color: var(--n-950); }
.su-btn--amber:hover { background: var(--amber-300); }
.su-btn--danger { background: transparent; color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, transparent); }
.su-btn--danger:hover { background: color-mix(in srgb, var(--err) 14%, transparent); }
.su-btn--pill { border-radius: var(--radius-full); padding: 12px 22px; }

/* ---- Inputs -------------------------------------------------------------- */
.su-input { font-family: var(--font-sans); width: 100%; padding: 9px 12px; background: var(--surface-2); color: var(--text); border: var(--bw) solid var(--border); border-radius: var(--radius); outline: none; font-size: var(--text-sm); transition: border-color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease); }
.su-input::placeholder { color: var(--text-faint); }
.su-input:focus { border-color: var(--accent-hi); box-shadow: 0 0 0 3px var(--accent-lo); }
.su-field { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: var(--bw) solid var(--border); border-radius: var(--radius-md); padding: 6px 6px 6px 14px; transition: border-color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease); }
.su-field:focus-within { border-color: var(--accent-hi); box-shadow: 0 0 0 3px var(--accent-lo); }
.su-field input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; }
.su-field input::placeholder { color: var(--text-faint); }

/* ---- Cards --------------------------------------------------------------- */
.su-card { background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); }
.su-card--lg { border-radius: var(--radius-lg); padding: var(--space-6); }

/* ---- Badges & tags ------------------------------------------------------- */
.su-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .5rem; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .06em; text-transform: uppercase; background: var(--accent-lo); color: var(--accent-hi); }
.su-badge--amber { background: color-mix(in srgb, var(--amber-400) 16%, transparent); color: var(--amber-300); }
.su-badge--ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.su-badge--err { background: color-mix(in srgb, var(--err) 16%, transparent); color: var(--err); }
.su-tag { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .5rem; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-medium); background: var(--accent-lo); color: var(--accent-hi); border: var(--bw) solid color-mix(in srgb, var(--accent-hi) 30%, transparent); }
.su-kbd { font-family: var(--font-mono); font-size: var(--text-xs); padding: .1rem .4rem; border-radius: var(--radius-sm); background: var(--n-950); border: var(--bw) solid var(--border); color: var(--text); box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 1px 2px rgba(0,0,0,.4); }

/* ---- Chat bubbles -------------------------------------------------------- */
.su-msg { max-width: 60ch; padding: .55rem .75rem; border-radius: var(--radius); line-height: var(--leading-normal); }
.su-msg--user { margin-left: auto; background: color-mix(in srgb, var(--accent) 55%, var(--n-900)); color: #eaf1ff; }
.su-msg--agent { background: var(--surface); border: var(--bw) solid var(--border); color: var(--text); }
.su-msg-role { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: .2rem; }
.su-msg--agent .su-msg-role { color: var(--accent-hi); }
.su-tool { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-mono); font-size: var(--text-xs); padding: .25rem .5rem; border-radius: var(--radius-sm); background: var(--n-950); border: var(--bw) solid var(--border); color: var(--text-dim); }
.su-tool .su-tool-name { color: var(--accent-hi); font-weight: var(--weight-semibold); }
.su-tool.is-done { border-color: color-mix(in srgb, var(--ok) 40%, transparent); color: var(--ok); }
.su-tool--failed { border-color: color-mix(in srgb, var(--err) 40%, transparent); color: var(--err); }
.su-tool--failed .su-tool-name { color: var(--err); }

/* ---- Thinking / streaming ------------------------------------------------ */
.su-thinking { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-dim); font-size: var(--text-sm); }
.su-thinking .dots { display: inline-flex; gap: 3px; }
.su-thinking .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-hi); animation: su-think 1.2s ease-in-out infinite; }
.su-thinking .dots i:nth-child(2) { animation-delay: .15s; }
.su-thinking .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes su-think { 0%,100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.su-caret { display: inline-block; width: .5em; height: 1em; margin-left: 1px; vertical-align: text-bottom; background: currentColor; opacity: .7; animation: su-blink 1s steps(2,start) infinite; }
@keyframes su-blink { to { visibility: hidden; } }

/* ---- Chat composer ------------------------------------------------------- */
.su-chat { display: flex; flex-direction: column; gap: 1rem; }
.su-chat-input { display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 8px; background: var(--surface-2); border: var(--bw) solid var(--border); border-radius: var(--radius-md); padding: 8px 8px 8px 14px; transition: border-color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease); }
.su-chat-input:focus-within { border-color: var(--accent-hi); box-shadow: 0 0 0 3px var(--accent-lo); }
.su-chat-input textarea { resize: none; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; line-height: var(--leading-normal); max-height: 8rem; }
.su-chat-input textarea::placeholder { color: var(--text-faint); }

/* ---- Icon buttons -------------------------------------------------------- */
.su-icon-btn { width: 36px; height: 36px; border-radius: var(--radius); border: 0; cursor: pointer; display: grid; place-items: center; background: var(--accent); color: #fff; transition: background var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); }
.su-icon-btn:hover { background: var(--accent-hi); }
.su-icon-btn:active { transform: scale(.94); }
.su-icon-btn--ghost { background: transparent; color: var(--text-dim); }
.su-icon-btn--ghost:hover { background: var(--surface-2); color: var(--text); }
.su-icon-btn.recording { color: var(--err); }

/* ---- Dropdown menu ------------------------------------------------------- */
.su-menu-wrap { position: relative; }
.su-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-dropdown); min-width: 190px; background: var(--glass-bg); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass); border: var(--bw) solid var(--glass-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 5px; display: none; }
.su-menu.is-open { display: block; animation: su-pop .16s var(--ease); }
.su-menu-item { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .6rem; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; transition: background var(--dur-micro) var(--ease); }
.su-menu-item:hover { background: var(--surface-2); }
.su-menu-item .material-icons { color: var(--text-dim); }
.su-menu-item--danger, .su-menu-item--danger .material-icons { color: var(--err); }
.su-menu-sep { height: 1px; background: var(--border); margin: 4px 2px; }

/* ---- Tabs / nav ---------------------------------------------------------- */
.su-tabs { display: inline-flex; gap: .25rem; }
.su-tab { padding: .35rem .8rem; border-radius: var(--radius); border: 0; cursor: pointer; background: transparent; color: var(--text-dim); font: inherit; font-weight: var(--weight-semibold); font-size: var(--text-sm); transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease); }
.su-tab:hover { color: var(--text); background: var(--surface-2); }
.su-tab.is-active { background: var(--accent); color: #fff; }
.su-nav-item { display: flex; align-items: center; gap: .5rem; padding: .3rem .55rem; border-radius: var(--radius-sm); border-left: 2px solid transparent; color: var(--text-dim); cursor: pointer; text-decoration: none; font-size: var(--text-sm); transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease); }
.su-nav-item:hover { background: var(--surface-2); color: var(--text); }
.su-nav-item.is-active { background: var(--surface-2); color: var(--text); border-left-color: var(--accent-hi); }

/* ---- Table --------------------------------------------------------------- */
.su-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.su-table th, .su-table td { text-align: left; padding: .5rem .7rem; border-bottom: var(--bw) solid var(--border); }
.su-table th { color: var(--text-dim); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .06em; font-size: var(--text-xs); }
.su-table tbody tr:hover { background: var(--surface); }

/* ---- Todo / task rows ---------------------------------------------------- */
.su-todo { display: flex; align-items: flex-start; gap: .55rem; padding: .35rem .5rem; border-radius: var(--radius-sm); transition: background var(--dur-micro) var(--ease); }
.su-todo:hover { background: var(--surface-2); }
.su-todo-label { flex: 1; font-size: var(--text-sm); min-width: 0; }
.su-todo.is-done .su-todo-label { color: var(--text-faint); text-decoration: line-through; }
.su-check { width: 1.1rem; height: 1.1rem; flex-shrink: 0; margin-top: 1px; border-radius: 5px; border: 1.5px solid var(--border-hi); display: inline-grid; place-items: center; cursor: pointer; color: transparent; transition: background var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease); }
.su-check:hover { border-color: var(--accent-hi); }
.su-check.is-checked { background: var(--accent); border-color: var(--accent); color: #fff; }
.su-check .material-icons { font-size: 14px; }
.su-date { font-family: var(--font-mono); font-size: var(--text-xs); padding: .1rem .45rem; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-dim); min-width: 5.6rem; text-align: center; }
.su-date--overdue { background: color-mix(in srgb, var(--err) 22%, transparent); color: #fca5a5; }
.su-date--today { background: color-mix(in srgb, var(--amber-400) 20%, transparent); color: var(--amber-300); }

/* ---- Calendar month grid + event chips ---------------------------------- */
.su-cal { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.su-cal-dow { font-size: var(--text-xs); color: var(--text-faint); text-align: center; text-transform: uppercase; letter-spacing: .06em; padding-bottom: 2px; }
.su-cal-day { min-height: 66px; background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--radius-sm); padding: 3px 4px; display: flex; flex-direction: column; gap: 2px; }
.su-cal-day.is-today { box-shadow: inset 0 0 0 2px var(--accent-hi); }
.su-cal-day.is-out { opacity: .4; }
.su-cal-num { font-size: 10px; color: var(--text-faint); }
.su-cal-day.is-today .su-cal-num { color: var(--accent-hi); font-weight: var(--weight-semibold); }
.su-cal-chip { font-size: 10px; line-height: 1.4; padding: 1px 5px; border-radius: 4px; border-left: 2px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-cal-chip--todo { background: color-mix(in srgb, var(--accent) 22%, transparent); color: #bfdbfe; border-left-color: var(--accent-hi); }
.su-cal-chip--note { background: color-mix(in srgb, var(--p-voxpopuli) 22%, transparent); color: #fed7aa; border-left-color: var(--p-voxpopuli); }
.su-cal-chip.is-done { opacity: .5; text-decoration: line-through; }

/* ---- Contact & meeting cards -------------------------------------------- */
.su-contact { display: flex; gap: .9rem; align-items: flex-start; }
.su-avatar-lg { width: 2.6rem; height: 2.6rem; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-weight: var(--weight-bold); color: #fff; background: radial-gradient(circle at 30% 30%, var(--c, var(--accent-hi)), #1e3a8a 78%); }
.su-contact-name { font-size: var(--text-base); font-weight: var(--weight-semibold); }
.su-contact-role { color: var(--text-dim); font-size: var(--text-sm); }
.su-contact-links { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .4rem; }
.su-contact-links a { color: var(--accent-hi); font-size: var(--text-sm); display: inline-flex; align-items: center; gap: .25rem; text-decoration: none; }
.su-contact-links a:hover { text-decoration: underline; }
.su-meeting-date { color: var(--accent-hi); font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.su-meeting-title { font-weight: var(--weight-semibold); margin: .1rem 0; }
.su-meeting-loc { color: var(--text-dim); font-size: var(--text-sm); display: inline-flex; align-items: center; gap: .3rem; }

/* ---- Toast --------------------------------------------------------------- */
.su-toast { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem .9rem; border-radius: var(--radius); background: var(--surface); border: var(--bw) solid var(--border); color: var(--text); box-shadow: var(--shadow-md); font-size: var(--text-sm); }
.su-toast--ok { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.su-toast--err { border-color: color-mix(in srgb, var(--err) 45%, transparent); }

/* ---- Markdown prose ------------------------------------------------------ */
.su-md { color: var(--text); line-height: var(--leading-relaxed); }
.su-md > :first-child { margin-top: 0; }
.su-md h1 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-semibold); margin: 1.4rem 0 .8rem; letter-spacing: var(--tracking-tight); }
.su-md h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-semibold); margin: 1.6rem 0 .6rem; }
.su-md h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: 1.2rem 0 .4rem; }
.su-md p { margin: .7rem 0; }
.su-md a { color: var(--accent-hi); text-decoration: none; }
.su-md a:hover { text-decoration: underline; }
.su-md ul, .su-md ol { margin: .6rem 0; padding-left: 1.4rem; }
.su-md li { margin: .25rem 0; }
.su-md code { font-family: var(--font-mono); font-size: .85em; background: var(--surface-2); padding: .1em .4em; border-radius: var(--radius-sm); }
.su-md pre { background: #0d1117; border: var(--bw) solid var(--border); border-radius: var(--radius); padding: .8rem 1rem; overflow-x: auto; margin: .8rem 0; }
.su-md pre code { background: none; padding: 0; font-size: .82rem; }
.su-md blockquote { border-left: 3px solid var(--accent); padding-left: .9rem; margin: .8rem 0; color: var(--text-dim); }
.su-md hr { border: 0; border-top: var(--bw) solid var(--border); margin: 1.4rem 0; }
.su-md table { border-collapse: collapse; width: 100%; margin: .8rem 0; font-size: var(--text-sm); }
.su-md th, .su-md td { border: var(--bw) solid var(--border); padding: .4rem .6rem; text-align: left; }
.su-md th { background: var(--surface-2); }

/* ---- Wikilink + hover preview ------------------------------------------- */
.su-wikilink { color: var(--accent-hi); text-decoration: none; border-bottom: 1px dashed color-mix(in srgb, var(--accent-hi) 55%, transparent); cursor: pointer; }
.su-wikilink:hover { border-bottom-color: var(--accent-hi); }
.su-wikilink.is-missing { color: var(--text-faint); border-bottom-style: dotted; }
.su-wl-preview { position: absolute; z-index: var(--z-tooltip); max-width: 22rem; background: var(--surface-2); border: var(--bw) solid var(--border-hi); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: .7rem .85rem; font-size: var(--text-sm); color: var(--text); opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); }
.su-wl-preview.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.su-wl-preview .wl-target { font-weight: var(--weight-semibold); color: var(--text); display: block; margin-bottom: .2rem; }
.su-wl-preview .wl-note { color: var(--text-dim); font-size: .8rem; display: block; }
.su-wl-preview .wl-create { margin-top: .55rem; }

/* ---- Modal (glass over blurred backdrop) -------------------------------- */
.su-modal-backdrop { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(3,6,15,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.su-modal-backdrop.is-open { display: flex; animation: su-fade .18s var(--ease); }
.su-modal { width: min(480px, 100%); background: var(--glass-bg); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass); border: var(--bw) solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--glass-shadow); padding: 1.5rem 1.75rem; animation: su-pop .2s var(--ease); }
.su-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.su-modal-head h3 { font-size: var(--text-xl); }
.su-modal-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.25rem; }
@keyframes su-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes su-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---- Toggle switch ------------------------------------------------------- */
.su-switch { width: 40px; height: 23px; flex-shrink: 0; border-radius: var(--radius-full); background: var(--surface-2); border: var(--bw) solid var(--border); position: relative; cursor: pointer; transition: background var(--dur-micro) var(--ease); }
.su-switch.is-on { background: var(--accent); border-color: var(--accent); }
.su-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: left var(--dur-micro) var(--ease); }
.su-switch.is-on::after { left: 19px; }
.su-setting { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .2rem; }
.su-setting + .su-setting { border-top: var(--bw) solid var(--border); }

/* ---- Macro / command autocomplete popup --------------------------------- */
.su-macro { background: var(--glass-bg); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass); border: var(--bw) solid var(--glass-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 5px; }
.su-macro-row { display: grid; grid-template-columns: minmax(6rem, auto) 1fr auto; gap: .9rem; align-items: baseline; padding: .5rem .7rem; border-radius: var(--radius-sm); cursor: pointer; }
.su-macro-row:hover { background: var(--accent-lo); }
.su-macro-row.is-active { background: color-mix(in srgb, var(--accent) 20%, transparent); border-left: 2px solid var(--accent); padding-left: calc(.7rem - 2px); }
.su-macro-slug { font-family: var(--font-mono); font-weight: var(--weight-bold); font-size: var(--text-sm); color: var(--accent-hi); }
.su-macro-desc { color: var(--text-dim); font-size: var(--text-sm); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-macro-vis { color: var(--text-faint); font-size: var(--text-xs); font-family: var(--font-mono); }
.su-macro-row.is-builtin .su-macro-slug { color: var(--amber-400); }

/* ---- Voice-note recorder ------------------------------------------------- */
.su-recorder { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; background: var(--surface-2); border: var(--bw) solid var(--border); border-radius: var(--radius-md); }
.su-rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--err); flex-shrink: 0; animation: su-pulse 1.2s ease-in-out infinite; }
.su-rec-time { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text); }
.su-wave { display: flex; align-items: center; gap: 2px; height: 22px; flex: 1; }
.su-wave i { width: 3px; border-radius: 2px; background: var(--accent-hi); height: 30%; animation: su-wave 1s ease-in-out infinite; }
.su-wave i:nth-child(2n) { animation-delay: .12s; } .su-wave i:nth-child(3n) { animation-delay: .24s; } .su-wave i:nth-child(4n) { animation-delay: .36s; }
@keyframes su-wave { 0%, 100% { height: 25%; } 50% { height: 95%; } }

/* ---- Empty state --------------------------------------------------------- */
.su-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; padding: var(--space-8) var(--space-4); }
.su-empty .material-icons { font-size: 42px; color: var(--text-faint); }
.su-empty-title { font-weight: var(--weight-semibold); }
.su-empty-hint { color: var(--text-dim); font-size: var(--text-sm); max-width: 34ch; }

/* ---- Glass panel & divider ---------------------------------------------- */
.su-glass { background: var(--glass-bg); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass); border: var(--bw) solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--glass-shadow); }
.su-divider { height: 1px; background: var(--border); border: 0; margin: var(--space-6) 0; }

/* ===========================================================================
 * 5. PATTERNS — composed layouts
 * ========================================================================= */
.su-app { display: grid; grid-template-rows: auto 1fr auto; height: 100%; background: var(--bg); border: var(--bw) solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.su-app-top { display: flex; align-items: center; gap: .75rem; padding: 0 .9rem; height: 52px; background: linear-gradient(to bottom, var(--surface), var(--bg)); border-bottom: var(--bw) solid var(--border); }
.su-app-top .spacer { flex: 1; }
.su-chrome-btn { width: 34px; height: 34px; border-radius: var(--radius-sm); border: 0; cursor: pointer; display: grid; place-items: center; background: transparent; color: var(--text-dim); transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease); }
.su-chrome-btn:hover { background: var(--surface-2); color: var(--text); }
.su-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: var(--weight-bold); color: #fff; background: radial-gradient(circle at 30% 30%, var(--accent-hi), #1e3a8a 75%); cursor: pointer; border: 0; }
.su-app-body { display: flex; min-height: 0; }
.su-app-side { flex: 0 0 244px; width: 244px; min-width: 0; background: var(--surface); border-right: var(--bw) solid var(--border); display: flex; flex-direction: column; padding: .8rem; transition: margin-left var(--dur-base) var(--ease); }
.su-app.is-collapsed .su-app-side { margin-left: -245px; }
.su-side-head { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-faint); font-weight: var(--weight-semibold); margin: .3rem .2rem .5rem; display: flex; align-items: center; justify-content: space-between; }
.su-tree { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; }
.su-tree-children { margin-left: .8rem; display: flex; flex-direction: column; gap: 1px; border-left: var(--bw) solid var(--border); padding-left: .3rem; }
.su-app-main { flex: 1 1 0; min-width: 0; overflow-y: auto; padding: 1.6rem 2rem; }
.su-app-main .doc-head { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; color: var(--text-faint); font-size: var(--text-sm); }
.su-app-status { display: flex; align-items: center; gap: 1rem; height: 30px; padding: 0 .9rem; background: var(--surface); border-top: var(--bw) solid var(--border); font-size: var(--text-xs); color: var(--text-faint); font-family: var(--font-mono); }
.su-app-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); display: inline-block; margin-right: .35rem; }
.su-app-status .spacer { flex: 1; }
@media (max-width: 640px) { .su-app-side { position: absolute; z-index: 20; height: 100%; box-shadow: var(--shadow-md); } }

/* ---- Mobile shell (ainbox-mobile, generalized) --------------------------
 * A phone frame: compact top bar / scrolling body / fixed bottom tab bar.
 * Honours safe-area insets when used full-screen (env(safe-area-inset-*)). */
.su-phone { width: 372px; max-width: 100%; height: 720px; display: flex; flex-direction: column; background: var(--bg); border: var(--bw) solid var(--border); border-radius: 30px; overflow: hidden; box-shadow: var(--shadow-xl); position: relative; }
.su-phone-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 12px; flex-shrink: 0; }
.su-phone-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; }
.su-tabbar { flex-shrink: 0; }
.su-tabbar { display: flex; height: 62px; background: var(--surface); border-top: var(--bw) solid var(--border); padding-bottom: env(safe-area-inset-bottom, 0px); }
.su-tabbar-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; border: 0; cursor: pointer; color: var(--text-faint); font-size: 11px; font-weight: var(--weight-medium); transition: color var(--dur-micro) var(--ease); }
.su-tabbar-btn .material-icons { font-size: 22px; }
.su-tabbar-btn.is-active { color: var(--accent-hi); }
.su-offline-banner { background: color-mix(in srgb, var(--err) 22%, var(--surface)); color: #fecaca; text-align: center; padding: 5px; font-size: var(--text-xs); }

/* ---- Big mic button (voice-first control) ------------------------------- */
.su-mic { width: 88px; height: 88px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff; position: relative; background: radial-gradient(circle at 35% 30%, var(--accent-hi), var(--accent) 72%); box-shadow: var(--shadow-lg); transition: transform var(--dur-micro) var(--ease); }
.su-mic .material-icons { font-size: 36px; }
.su-mic:active { transform: scale(.95); }
.su-mic.recording { background: radial-gradient(circle at 35% 30%, #f87171, #dc2626 72%); }
.su-mic.recording::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid #f87171; animation: su-mic-ring 1.6s ease-out infinite; }
@keyframes su-mic-ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.55); opacity: 0; } }
.su-mic-hint { color: var(--text-faint); font-size: var(--text-sm); margin-top: .8rem; text-align: center; }

/* ---- Three-pane builder (peacock, generalized) --------------------------
 * Conversations | chat | live preview, with drag-to-resize dividers. The
 * preview renders an artifact on white, in contrast to the dark chrome. */
.su-panes { display: flex; height: 100%; background: var(--bg); border: var(--bw) solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.su-pane-side { flex: 0 0 210px; min-width: 0; background: var(--surface); border-right: var(--bw) solid var(--border); display: flex; flex-direction: column; padding: .7rem; overflow-y: auto; }
.su-pane-chat { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.su-pane-preview { flex: 0 0 44%; min-width: 0; padding: 14px; display: grid; }
.su-preview-frame { background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-md); overflow: hidden; }
.su-resize { flex: 0 0 5px; cursor: col-resize; background: transparent; align-self: stretch; transition: background var(--dur-micro) var(--ease); }
.su-resize:hover { background: var(--accent-lo); }
.su-resize.is-resizing { background: var(--accent); }

/* ===========================================================================
 * 6. EFFECTS — motion & atmosphere (GPU-friendly; reduced-motion aware)
 * ========================================================================= */
.mesh { position: absolute; inset: -10%; pointer-events: none; filter: blur(80px); opacity: .8; z-index: 0; }
.blob { position: absolute; border-radius: var(--radius-full); mix-blend-mode: screen; }
@keyframes drift { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(40px,-30px) scale(1.1); } 66% { transform: translate(-30px,20px) scale(.95); } }
.blob-a { animation: drift 18s ease-in-out infinite; }
.blob-b { animation: drift 24s ease-in-out infinite reverse; }
.blob-c { animation: drift 22s ease-in-out infinite; }
.grid-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%); mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%); }
.noise::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>"); opacity: .04; mix-blend-mode: overlay; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
.fx-card { position: relative; overflow: hidden; cursor: pointer; border-radius: var(--radius-lg); padding: var(--space-6); background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border: var(--bw) solid var(--border); transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.fx-card:hover { transform: translateY(-4px); border-color: var(--border-hi); }
.fx-card .glow { position: absolute; inset: -40%; pointer-events: none; opacity: 0; background: radial-gradient(circle at 30% 20%, var(--c, var(--accent)) 0%, transparent 60%); transition: opacity var(--dur-base) var(--ease); }
.fx-card:hover .glow { opacity: .32; }
.fx-card .peek { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.fx-card:hover .peek { opacity: 1; transform: translateY(0); }
.fx-card .baseline { transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease); }
.fx-card:hover .baseline { transform: translateY(-6px); opacity: .6; }
.fx-card > * { position: relative; }
.fx-chip { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); display: inline-grid; place-items: center; color: var(--c, var(--accent)); background: color-mix(in srgb, var(--c, var(--accent)) 15%, transparent); border: var(--bw) solid color-mix(in srgb, var(--c, var(--accent)) 30%, transparent); }
@keyframes su-spin { to { transform: rotate(360deg); } }
.su-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: su-spin .7s linear infinite; }
@keyframes su-pulse { 50% { opacity: .35; } }
.su-pulse { animation: su-pulse 1s ease-in-out infinite; }
@supports (view-transition-name: x) { ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .55s; animation-timing-function: var(--ease); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } }

/* ===========================================================================
 * 7. UTILITIES — the composition layer (loaded last so single-class wins)
 * ========================================================================= */
/* Layout */
.container { max-width: 1080px; margin-inline: auto; padding-inline: var(--space-6); }
.section { padding-block: var(--space-24); position: relative; }
.relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .sticky { position: sticky; }
.inset-0 { inset: 0; } .top-0 { top: 0; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.z-nav { z-index: var(--z-nav); } .z-dropdown { z-index: var(--z-dropdown); } .z-modal { z-index: var(--z-modal); }
.block { display: block; } .hidden { display: none; }
.flex { display: flex; } .inline-flex { display: inline-flex; } .grid { display: grid; }
.row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.grid-2 { display: grid; gap: var(--space-4); grid-template-columns: repeat(2,1fr); }
.grid-3 { display: grid; gap: var(--space-4); grid-template-columns: repeat(3,1fr); }
.grid-4 { display: grid; gap: var(--space-4); grid-template-columns: repeat(4,1fr); }
.items-start { align-items: flex-start; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .items-baseline { align-items: baseline; }
.justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; }
.place-center { display: grid; place-items: center; }
.flex-1 { flex: 1; } .flex-wrap { flex-wrap: wrap; } .self-end { align-self: flex-end; }
.w-full { width: 100%; }
.max-w-prose { max-width: 62ch; } .max-w-sm { max-width: 24rem; } .max-w-md { max-width: 32rem; } .max-w-lg { max-width: 42rem; }

/* Spacing (scale steps we actually use) */
.p-1{padding:var(--space-1)} .p-2{padding:var(--space-2)} .p-3{padding:var(--space-3)} .p-4{padding:var(--space-4)} .p-6{padding:var(--space-6)} .p-8{padding:var(--space-8)}
.px-3{padding-inline:var(--space-3)} .px-4{padding-inline:var(--space-4)} .px-6{padding-inline:var(--space-6)}
.py-1{padding-block:var(--space-1)} .py-2{padding-block:var(--space-2)} .py-3{padding-block:var(--space-3)} .py-4{padding-block:var(--space-4)}
.mt-0{margin-top:0} .mt-1{margin-top:var(--space-1)} .mt-2{margin-top:var(--space-2)} .mt-4{margin-top:var(--space-4)} .mt-6{margin-top:var(--space-6)} .mt-8{margin-top:var(--space-8)}
.mb-2{margin-bottom:var(--space-2)} .mb-4{margin-bottom:var(--space-4)} .mb-6{margin-bottom:var(--space-6)} .mb-8{margin-bottom:var(--space-8)}
.mx-auto{margin-inline:auto}
.gap-1{gap:var(--space-1)} .gap-2{gap:var(--space-2)} .gap-3{gap:var(--space-3)} .gap-4{gap:var(--space-4)} .gap-6{gap:var(--space-6)} .gap-8{gap:var(--space-8)}

/* Type */
.display { font-family: var(--font-display); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
.text-xs{font-size:var(--text-xs)} .text-sm{font-size:var(--text-sm)} .text-base{font-size:var(--text-base)} .text-lg{font-size:var(--text-lg)} .text-xl{font-size:var(--text-xl)} .text-2xl{font-size:var(--text-2xl)} .text-3xl{font-size:var(--text-3xl)} .text-4xl{font-size:var(--text-4xl)} .text-5xl{font-size:var(--text-5xl)} .text-6xl{font-size:var(--text-6xl)} .text-display{font-size:var(--text-display)}
.font-medium{font-weight:var(--weight-medium)} .font-semibold{font-weight:var(--weight-semibold)} .font-bold{font-weight:var(--weight-bold)}
.tracking-tight{letter-spacing:var(--tracking-tight)} .tracking-wide{letter-spacing:var(--tracking-wide)} .tracking-caps{letter-spacing:var(--tracking-caps)}
.leading-tight{line-height:var(--leading-tight)} .leading-relaxed{line-height:var(--leading-relaxed)}
.text-center{text-align:center} .uppercase{text-transform:uppercase} .mono{font-family:var(--font-mono)}
.text-dim{color:var(--text-dim)} .text-faint{color:var(--text-faint)} .text-accent{color:var(--accent-hi)} .text-amber{color:var(--amber-400)}
.grad-text { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Surface / border / radius / shadow */
.bg-surface{background:var(--surface)} .bg-deep{background:var(--bg)} .on-surface{background:var(--surface);color:var(--text)}
.bg-glass { background: var(--glass-bg); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass); }
.border{border:var(--bw) solid var(--border)} .border-b{border-bottom:var(--bw) solid var(--border)} .border-t{border-top:var(--bw) solid var(--border)}
.rounded-sm{border-radius:var(--radius-sm)} .rounded{border-radius:var(--radius)} .rounded-md{border-radius:var(--radius-md)} .rounded-lg{border-radius:var(--radius-lg)} .rounded-full{border-radius:var(--radius-full)}
.shadow-sm{box-shadow:var(--shadow-sm)} .shadow-md{box-shadow:var(--shadow-md)} .shadow-lg{box-shadow:var(--shadow-lg)}
.glass { background: var(--glass-bg); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass); border: var(--bw) solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--glass-shadow); }

/* Accessibility */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Responsive collapse for the grids */
@media (max-width: 720px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .sm-hide { display: none; }
}

/* ===========================================================================
 * 8. DOC HELPERS — used only by this reference site (not app vocabulary)
 * ========================================================================= */
.doc-ramp { display: grid; grid-template-columns: repeat(11,1fr); border-radius: var(--radius-md); overflow: hidden; border: var(--bw) solid var(--border); }
.doc-swatch { height: 88px; display: flex; align-items: flex-end; padding: .4rem; font-size: 10px; font-family: var(--font-mono); color: rgba(255,255,255,.7); cursor: pointer; }
.doc-swatch.on-light { color: rgba(0,0,0,.6); }
.doc-chip { display: flex; flex-direction: column; gap: .35rem; align-items: center; font-size: 11px; font-family: var(--font-mono); color: var(--text-dim); }
.doc-chip .box { width: 64px; height: 64px; border-radius: var(--radius); border: var(--bw) solid var(--border); }
.doc-spec { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; align-items: baseline; padding: .7rem 0; border-bottom: var(--bw) solid var(--border); }
.doc-spec .tag { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); }
.doc-subhead { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-faint); margin: 1.5rem 0 .6rem; }
.doc-panel { border-radius: var(--radius-lg); border: var(--bw) solid var(--border); padding: var(--space-6); background: var(--bg); }
.doc-nav { position: sticky; top: 0; z-index: var(--z-nav); background: var(--glass-bg); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass); border-bottom: var(--bw) solid var(--glass-border); }
.doc-nav .container { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.doc-navlink { color: var(--text-dim); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-semibold); margin-left: 1.4rem; transition: color var(--dur-micro) var(--ease); }
.doc-navlink:hover { color: var(--text); }
.doc-stat .n { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--weight-semibold); }
.doc-stat .l { color: var(--text-faint); font-size: var(--text-sm); }
.doc-icons { column-width: 172px; column-gap: .5rem; }
.doc-icon { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; margin-bottom: .5rem; border-radius: var(--radius); background: var(--surface-2); color: var(--text-dim); cursor: pointer; break-inside: avoid; -webkit-column-break-inside: avoid; transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease); }
.doc-icon:hover { background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); color: var(--accent-hi); }
.doc-icon .material-icons { font-size: 20px; }
.doc-icon .name { font-family: var(--font-mono); font-size: 12px; color: inherit; }