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

  /* Back-compat aliases for older vendored consumers (superbot login/account,
     peacock). The new source renamed --bg-deep→--bg and dropped the gradient. */
  --bg-deep: var(--bg);
  --syalia-grad: linear-gradient(90deg, #38bdf8, #818cf8, #c084fc);
}

/* ===========================================================================
 * 3. BASE
 * ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
/* `hidden` is `display: none` from the UA stylesheet — the weakest source in
   the cascade — and nearly every component below sets a display of its own. So
   without this, marking an element `hidden` in a page that loads this file is a
   suggestion, and the failure is invisible: the markup says hidden, the element
   renders, and no test that reads the markup can tell. Three apps hit it
   independently and each patched its own element (smarty's notebook pane and
   its «Cargar CSV», engine's busy banner); this is the one place it belongs.
   `!important` because a component's class and `[hidden]` are both specificity
   0-1-0, so without it the winner would be whichever happens to come later in
   this file — which is not a thing anyone should have to know. Tailwind and
   Bootstrap both ship exactly this in their preflight. */
[hidden] { display: none !important; }
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; }
/* The compact size a pane head or a toolbar wants — a full-size button next to
   a `.su-side-head` eyebrow reads as the head's subject rather than its action.
   Added because peacock and smarty had each grown a local `.btn-new`/`＋ Nuevo`
   for exactly this, at two different sizes, which is how the same button ends
   up looking different in two tabs of one product. */
.su-btn--sm { padding: 4px 9px; font-size: var(--text-xs); gap: .3rem; }

/* ---- 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); }
/* Tool-call states — apply to the chip or the collapsible block. */
.su-tool.is-pending .su-tool-status { color: var(--warn); }
.su-tool.is-error { border-color: color-mix(in srgb, var(--err) 40%, transparent); color: var(--err); }
.su-tool.is-error .su-tool-name { color: var(--err); }
/* Collapsible variant — an always-visible header row + an expandable output body.
   Base `.su-tool` stays the inline chip; `--block` turns it into a container. */
.su-tool--block { display: block; padding: 0; overflow: hidden; }
.su-tool--block .su-tool-header { display: flex; align-items: center; gap: .4rem; padding: .3rem .55rem; cursor: pointer; }
.su-tool-caret { flex: 0 0 auto; transition: transform var(--dur-micro) var(--ease); }
.su-tool-caret.is-open { transform: rotate(90deg); }
.su-tool-icon { flex: 0 0 auto; }
.su-tool-args { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); }
.su-tool-status { flex: 0 0 auto; font-size: .85em; }
.su-tool-body { padding: .55rem .7rem; border-top: var(--bw) solid var(--border); white-space: pre-wrap; word-break: break-word; max-height: 18rem; overflow: auto; color: var(--text); }
.su-tool-body.is-hidden { display: none; }

/* ---- 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: max-content; max-width: 100%; margin: .8rem 0; font-size: var(--text-sm); display: block; overflow-x: auto; }
.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; }
/* One line, clipped with an ellipsis. Three properties that only work together,
   which is why every app that needed them wrote all three by hand: `.su-tool-args`,
   `.su-cal-chip` and `.su-macro-desc` each carry a copy, and peacock a fourth in
   `.project-item-title`. Needs `min-width: 0` on the flex item, hence its inclusion. */
.truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-nav { z-index: var(--z-nav); } .z-dropdown { z-index: var(--z-dropdown); } .z-modal { z-index: var(--z-modal); }
.block { display: block; }
.flex { display: flex; } .inline-flex { display: inline-flex; } .grid { display: grid; }
/* .hidden LAST, deliberately — same order Tailwind emits its display utilities
   in, and for the same reason. `class="hidden ... flex ..."` is the standard
   toggle idiom: both classes stay on the element and whichever rule is declared
   last wins. When this file is loaded after a Tailwind build (warden, magpie,
   superbot all do), a .flex declared after .hidden HERE silently overrides
   Tailwind's ordering and every such element renders permanently visible.
   On 2026-07-30 that pinned warden's "New user" modal open, and its
   `fixed inset-0` backdrop swallowed every click in the admin UI. */
.hidden { display: none; }
.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; }