/* VexAPI — Arioron design system, "soft" edition.
   A calm, rounded console in the spirit of modern AI platforms: an inset
   canvas (soft frame + raised content panel), Inter for interface text,
   JetBrains Mono only for code and identifiers, gentle depth and motion.
   Tokens first; the legacy names further down are aliases so every page
   inherits the system without edits. */

:root {
  /* brand */
  --brand-ink: #18181B;
  --brand-paper: #FFFFFF;

  /* surfaces & text (light) */
  --bg-frame: #F2F2F5;             /* app frame behind the sidebar and content panel */
  --bg: #FFFFFF;                   /* page / content panel */
  --bg-raised: #FFFFFF;            /* cards */
  --bg-sunken: #F5F5F7;            /* wells, inputs-on-cards, code-free blocks */
  --bg-hover: rgba(24, 24, 27, 0.045);
  --bg-veil: rgba(255, 255, 255, 0.78);
  --bg-inverse: #18181B;
  --text: #18181B;
  --text-muted: rgba(24, 24, 27, 0.66);
  --text-faint: rgba(24, 24, 27, 0.44);
  --text-inverse: #FFFFFF;
  --line: rgba(24, 24, 27, 0.11);
  --line-soft: rgba(24, 24, 27, 0.065);
  --ring: rgba(24, 24, 27, 0.10);
  --accent-soft: rgba(24, 24, 27, 0.06);
  --mesh-rgb: 24, 24, 27;
  --mesh-alpha: 0.04;

  /* type */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --step-display: clamp(2.6rem, 6vw, 5rem);
  --step-title: clamp(2rem, 3.8vw, 3.2rem);
  --step-section: clamp(1.5rem, 2.4vw, 2.1rem);
  --step-sub: clamp(1.05rem, 1.3vw, 1.25rem);
  --step-body: 1rem;
  --step-small: 0.875rem;
  --step-meta: 0.8125rem;
  --track-display: -0.03em;
  --track-title: -0.022em;
  --track-meta: 0;
  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-body: 1.6;

  /* shape, depth, motion */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;
  --shadow-xs: 0 1px 2px rgba(16, 16, 24, 0.04);
  --shadow-sm: 0 1px 2px rgba(16, 16, 24, 0.04), 0 1px 3px rgba(16, 16, 24, 0.05);
  --shadow-md: 0 4px 12px -2px rgba(16, 16, 24, 0.07), 0 2px 4px -2px rgba(16, 16, 24, 0.04);
  --shadow-lg: 0 20px 48px -12px rgba(16, 16, 24, 0.18), 0 6px 16px -8px rgba(16, 16, 24, 0.08);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-mid: 240ms;
  --dur-slow: 520ms;

  /* status */
  --danger: #C2362B;
  --danger-soft: rgba(194, 54, 43, 0.09);
  --warning: #8A6100;
  --warning-soft: rgba(176, 125, 0, 0.11);
  --success: #18794E;
  --success-soft: rgba(24, 121, 78, 0.09);
  --info: #2F5FD0;
  --info-soft: rgba(47, 95, 208, 0.09);

  --code-bg: #17171B;
  --code-text: #ECECF1;
  --code-line: rgba(236, 236, 241, 0.08);
}

/* The theme boot script resolves stored choice vs. system preference into an
   explicit `.dark` class on <html> before first paint. */
html.dark {
  --bg-frame: #0C0C0E;
  --bg: #141417;
  --bg-raised: #1A1A1E;
  --bg-sunken: #1F1F24;
  --bg-hover: rgba(255, 255, 255, 0.055);
  --bg-veil: rgba(20, 20, 23, 0.78);
  --bg-inverse: #ECECF1;
  --text: #ECECF1;
  --text-muted: rgba(236, 236, 241, 0.68);
  --text-faint: rgba(236, 236, 241, 0.44);
  --text-inverse: #141417;
  --line: rgba(255, 255, 255, 0.10);
  --line-soft: rgba(255, 255, 255, 0.065);
  --ring: rgba(255, 255, 255, 0.14);
  --accent-soft: rgba(255, 255, 255, 0.07);
  --mesh-rgb: 236, 236, 241;
  --mesh-alpha: 0.05;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 56px -12px rgba(0, 0, 0, 0.7);
  --danger: #F28B82;
  --danger-soft: rgba(242, 139, 130, 0.12);
  --warning: #E5C36B;
  --warning-soft: rgba(229, 195, 107, 0.12);
  --success: #6FCF97;
  --success-soft: rgba(111, 207, 151, 0.12);
  --info: #8AB4F8;
  --info-soft: rgba(138, 180, 248, 0.12);
  --code-bg: #0F0F12;
}

/* Legacy aliases used across existing templates. */
:root, html.dark {
  --bg-page: var(--bg);
  --bg-surface: var(--bg-raised);
  --bg-subtle: var(--bg-sunken);
  --bg-muted: var(--line-soft);
  --text-primary: var(--text);
  --text-secondary: var(--text-muted);
  --text-tertiary: var(--text-faint);
  --border: var(--line);
  --border-strong: color-mix(in srgb, var(--text) 24%, transparent);
  --accent: var(--text);
  --accent-contrast: var(--bg);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
}

/* --- base --- */

/* Minimal reset (public pages don't load Tailwind's preflight). */
*, *::before, *::after { box-sizing: border-box; }
button { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
img, svg { max-width: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font-family: inherit; }
code, pre, kbd, samp, .font-mono { font-family: var(--font-mono); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); letter-spacing: var(--track-title); color: var(--text); font-weight: 600; }
::selection { background: color-mix(in srgb, var(--text) 16%, transparent); color: inherit; }
:focus-visible { outline: 2px solid color-mix(in srgb, var(--text) 40%, transparent); outline-offset: 2px; border-radius: var(--r-xs); }

html { scrollbar-color: color-mix(in srgb, var(--text) 18%, transparent) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 16%, transparent); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--text) 30%, transparent); }

/* --- Arioron primitives --- */

.ar-eyebrow {
  font-family: var(--font-body);
  font-size: var(--step-meta);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-faint);
  margin: 0;
}
.ar-display { font-size: var(--step-display); letter-spacing: var(--track-display); line-height: var(--leading-tight); font-weight: 600; margin: 0; }
.ar-title { font-size: var(--step-title); letter-spacing: var(--track-title); line-height: 1.08; font-weight: 600; margin: 0; }
.ar-section-title { font-size: var(--step-section); letter-spacing: var(--track-title); line-height: var(--leading-snug); font-weight: 600; margin: 0; }
.ar-serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.ar-lead { font-size: var(--step-sub); line-height: 1.55; color: var(--text-muted); margin: 0; }
.ar-body { font-size: var(--step-body); line-height: var(--leading-body); color: var(--text-muted); }
.ar-rule { height: 1px; background: var(--line-soft); border: 0; margin: 0; }

.ar-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .6rem 1.1rem; border-radius: var(--r-sm); font-size: var(--step-small); font-weight: 500; line-height: 1.2;
  border: 1px solid var(--line); color: var(--text); background: var(--bg-raised); cursor: pointer;
  text-decoration: none; white-space: nowrap; box-shadow: var(--shadow-xs);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.ar-btn:hover { background: color-mix(in srgb, var(--bg-raised) 92%, var(--text)); border-color: color-mix(in srgb, var(--text) 18%, transparent); }
.ar-btn:active { transform: scale(.985); }
.ar-btn-solid { background: var(--text); color: var(--bg); border-color: transparent; box-shadow: var(--shadow-sm); }
.ar-btn-solid:hover { background: color-mix(in srgb, var(--text) 86%, var(--bg)); border-color: transparent; }
.ar-btn-mono { font-family: var(--font-body); font-size: var(--step-small); letter-spacing: 0; padding: .55rem 1rem; }
.ar-btn-sm { padding: .42rem .85rem; font-size: .8125rem; }

.ar-card {
  background: var(--bg-raised); border: 1px solid var(--line-soft); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.ar-spec { display: grid; grid-template-columns: auto 1fr; border-top: 1px solid var(--line-soft); }
.ar-spec dt, .ar-spec dd { margin: 0; padding: .85rem 0; border-bottom: 1px solid var(--line-soft); }
.ar-spec dt { font-family: var(--font-body); font-size: var(--step-meta); font-weight: 500; color: var(--text-faint); padding-right: 2rem; }
.ar-spec dd { font-size: var(--step-small); color: var(--text); }

/* Very faint grid behind hero areas (static). */
.ar-mesh {
  background-image:
    linear-gradient(rgba(var(--mesh-rgb), var(--mesh-alpha)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--mesh-rgb), var(--mesh-alpha)) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 20%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 70% at 30% 20%, #000 30%, transparent 100%);
}

/* --- shared components --- */

.surface {
  background: var(--bg-raised); border: 1px solid var(--line-soft); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.surface-sunken { background: var(--bg-sunken); border: 1px solid var(--line-soft); border-radius: var(--r-lg); }

.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  border-radius: var(--r-sm); font-weight: 500; line-height: 1.25;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.btn-primary { background: var(--text); color: var(--bg); border: 1px solid transparent; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: color-mix(in srgb, var(--text) 86%, var(--bg)); }
.btn-primary:active, .btn-secondary:active { transform: scale(.985); }
.btn-primary:disabled, .btn-secondary:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-secondary { background: var(--bg-raised); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow-xs); }
.btn-secondary:hover { background: color-mix(in srgb, var(--bg-raised) 92%, var(--text)); border-color: color-mix(in srgb, var(--text) 18%, transparent); }

.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-body); font-size: .75rem; font-weight: 500; letter-spacing: 0; line-height: 1.35;
  padding: .12rem .55rem; border-radius: var(--r-full);
  border: 1px solid transparent; color: var(--text-muted); background: var(--accent-soft);
}
.badge.font-mono { font-family: var(--font-mono); font-size: .6875rem; }
.badge-success { color: var(--success); background: var(--success-soft); }
.badge-warning { color: var(--warning); background: var(--warning-soft); }
.badge-danger { color: var(--danger); background: var(--danger-soft); }
.badge-info { color: var(--info); background: var(--info-soft); }

.nav-link { color: var(--text-muted); border-radius: var(--r-sm); }
.nav-link.active { background: var(--accent-soft); color: var(--text); font-weight: 500; }
.nav-link:hover:not(.active) { color: var(--text); background: var(--bg-hover); }

.card-hover { transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.card-hover:hover { border-color: var(--line); box-shadow: var(--shadow-md); }

pre {
  background: var(--code-bg); color: var(--code-text); border-radius: var(--r-md);
  padding: 1rem 1.1rem; overflow-x: auto; font-size: .8125rem; line-height: 1.65;
}
kbd { font-family: var(--font-body); font-size: .6875rem; font-weight: 500; padding: .1rem .4rem; border-radius: var(--r-xs);
  border: 1px solid var(--line); border-bottom-width: 2px; background: var(--bg-raised); color: var(--text-muted); }

.status-dot { width: 7px; height: 7px; border-radius: 999px; display: inline-block; }

/* --- console content (padded pages and full-screen tools alike) --- */

/* Page headers: the shared `h1.text-xl` + description pattern. */
.sh-pad h1.text-xl, .sh-pad h1.text-2xl, .sh-pad h1.text-3xl {
  font-size: clamp(1.6rem, 2.1vw, 2rem); font-weight: 600; letter-spacing: -0.022em; line-height: 1.15;
}
.sh-scroll h1.font-mono { font-family: var(--font-display); }
.sh-pad h1 + p.text-sm { font-size: .9375rem; line-height: 1.6; margin-top: .45rem; max-width: 68ch; color: var(--text-muted); }
.sh-scroll :is(h2.text-lg, h2.text-base) { font-weight: 600; letter-spacing: -.012em; }
.sh-scroll :is(h1, h2, h3).text-white { color: var(--text); }
/* Small section labels: calm sentence-case text instead of shouty caps. */
.sh-scroll :is(.uppercase.tracking-wide, .uppercase.tracking-wider, .uppercase.tracking-widest, .uppercase.font-bold) {
  font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: .8125rem; font-weight: 500;
}
/* Big numbers read better in the interface face than in monospace. */
.sh-scroll :is(.text-lg, .text-xl, .text-2xl, .text-3xl, .text-4xl).font-mono {
  font-family: var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}

/* Tables */
.sh-scroll table { border-collapse: separate; border-spacing: 0; }
.sh-scroll table thead tr { background: var(--bg-sunken); }
.sh-scroll table th {
  font-family: var(--font-body); font-weight: 500; font-size: .8125rem; letter-spacing: 0; text-transform: none;
  color: var(--text-muted); border-bottom: 1px solid var(--line-soft) !important;
}
.sh-scroll table tbody tr { transition: background var(--dur-fast) var(--ease); border-color: var(--line-soft) !important; }
.sh-scroll table tbody tr:hover { background: var(--bg-hover); }
.sh-scroll table tbody tr:last-child { border-bottom: 0 !important; }

/* Form controls */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea) {
  border-radius: var(--r-sm);
}
html :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea) {
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
html :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea):focus {
  outline: none; border-color: color-mix(in srgb, var(--text) 32%, transparent) !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
}
html :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea)::placeholder { color: var(--text-faint); opacity: 1; }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--text); }
input[type="file"] { font-size: .875rem; color: var(--text-muted); }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 500; font-size: .8125rem; margin-right: .75rem; padding: .45rem .85rem; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--bg-raised); color: var(--text); cursor: pointer; box-shadow: var(--shadow-xs);
}
input[type="file"]::file-selector-button:hover { background: var(--bg-hover); }
details > summary { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ── Legacy always-dark utilities ──────────────────────────────────────────
   Older console pages (and HTML rendered by playground.js) were written with
   fixed dark classes such as bg-slate-900 / text-white. Inside the console
   content area they are translated onto the theme tokens so every page
   follows light and dark mode. dark:-prefixed classes are untouched. */
:is(.sh-pad, .pg-root) ::selection { background: var(--line); }
:is(.sh-pad, .pg-root) .bg-slate-950, :is(.sh-pad, .pg-root) .bg-slate-950\/80, :is(.sh-pad, .pg-root) .bg-slate-950\/50 { background-color: var(--bg); }
:is(.sh-pad, .pg-root) .bg-slate-900, :is(.sh-pad, .pg-root) .bg-slate-900\/50, :is(.sh-pad, .pg-root) .bg-slate-900\/80 { background-color: var(--bg-sunken); }
:is(.sh-pad, .pg-root) .bg-slate-800, :is(.sh-pad, .pg-root) .bg-slate-800\/50, :is(.sh-pad, .pg-root) .bg-slate-800\/80, :is(.sh-pad, .pg-root) .bg-slate-800\/30 { background-color: var(--bg-raised); }
:is(.sh-pad, .pg-root) .bg-slate-700 { background-color: var(--line); }
:is(.sh-pad, .pg-root) .bg-black { background-color: var(--code-bg); }
:is(.sh-pad, .pg-root) .bg-white\/10, :is(.sh-pad, .pg-root) .bg-blue-500\/10, :is(.sh-pad, .pg-root) .bg-blue-500\/20, :is(.sh-pad, .pg-root) .bg-blue-400\/80 { background-color: var(--line-soft); }
:is(.sh-pad, .pg-root) .hover\:bg-slate-800:hover, :is(.sh-pad, .pg-root) .hover\:bg-slate-750:hover, :is(.sh-pad, .pg-root) .hover\:bg-slate-700:hover, :is(.sh-pad, .pg-root) .hover\:bg-blue-500\/10:hover { background-color: var(--line-soft); }

:is(.sh-pad, .pg-root) .border-slate-800, :is(.sh-pad, .pg-root) .border-slate-800\/50, :is(.sh-pad, .pg-root) .border-slate-700\/50, :is(.sh-pad, .pg-root) .border-white\/5, :is(.sh-pad, .pg-root) .border-white\/10 { border-color: var(--line-soft); }
:is(.sh-pad, .pg-root) .border-slate-700, :is(.sh-pad, .pg-root) .border-slate-600, :is(.sh-pad, .pg-root) .border-blue-500\/20, :is(.sh-pad, .pg-root) .border-blue-500\/50 { border-color: var(--line); }
:is(.sh-pad, .pg-root) .hover\:border-slate-600:hover, :is(.sh-pad, .pg-root) .hover\:border-blue-500\/30:hover, :is(.sh-pad, .pg-root) .group:hover .group-hover\:border-slate-500 { border-color: var(--text-faint); }
:is(.sh-pad, .pg-root) .focus\:border-blue-500:focus, :is(.sh-pad, .pg-root) .focus\:border-blue-500\/50:focus, :is(.sh-pad, .pg-root) .focus-within\:border-blue-500\/50:focus-within { border-color: var(--text); }
:is(.sh-pad, .pg-root) .focus\:ring-blue-500\/50:focus, :is(.sh-pad, .pg-root) .focus\:ring-blue-500\/20:focus, :is(.sh-pad, .pg-root) .focus\:ring-slate-600:focus, :is(.sh-pad, .pg-root) .focus-within\:ring-blue-500\/20:focus-within { --tw-ring-color: var(--line-soft); }

:is(.sh-pad, .pg-root) .text-white, :is(.sh-pad, .pg-root) .text-slate-100, :is(.sh-pad, .pg-root) .text-slate-200 { color: var(--text); }
:is(.sh-pad, .pg-root) .text-slate-300, :is(.sh-pad, .pg-root) .text-slate-400, :is(.sh-pad, .pg-root) .text-white\/70 { color: var(--text-muted); }
:is(.sh-pad, .pg-root) .text-slate-500, :is(.sh-pad, .pg-root) .text-slate-600, :is(.sh-pad, .pg-root) .text-slate-700 { color: var(--text-faint); }
:is(.sh-pad, .pg-root) .text-blue-400, :is(.sh-pad, .pg-root) .text-blue-500 { color: var(--text); }
:is(.sh-pad, .pg-root) .hover\:text-white:hover, :is(.sh-pad, .pg-root) .hover\:text-slate-300:hover, :is(.sh-pad, .pg-root) .hover\:text-blue-400:hover, :is(.sh-pad, .pg-root) .hover\:text-blue-300:hover,
:is(.sh-pad, .pg-root) .group:hover .group-hover\:text-slate-200, :is(.sh-pad, .pg-root) .group:hover .group-hover\:text-blue-400 { color: var(--text); }
:is(.sh-pad, .pg-root) .placeholder-slate-500::placeholder, :is(.sh-pad, .pg-root) .placeholder-slate-600::placeholder { color: var(--text-faint); }
:is(.sh-pad, .pg-root) .accent-blue-500 { accent-color: var(--text); }

/* Primary actions: solid ink pills, inverted per theme. */
:is(.sh-pad, .pg-root) .bg-blue-600 { background-color: var(--text); color: var(--bg); box-shadow: none; }
:is(.sh-pad, .pg-root) .bg-blue-600 *, :is(.sh-pad, .pg-root) .bg-blue-600.text-white { color: var(--bg); }
:is(.sh-pad, .pg-root) .bg-blue-600:hover { background-color: var(--text); opacity: .86; }
:is(.sh-pad, .pg-root) .peer:checked ~ .peer-checked\:bg-blue-600 { background-color: var(--text); }
:is(.sh-pad, .pg-root) .peer:checked ~ .peer-checked\:bg-blue-600::after { background-color: var(--bg); border-color: var(--bg); }
:is(.sh-pad, .pg-root) :is([class*="bg-red-6"], [class*="bg-red-5"], [class*="bg-green-6"], [class*="bg-emerald-6"], [class*="bg-emerald-5"]).text-white { color: #fff; }

/* Inline code in console prose: a soft pill. */
.sh-pad :is(p, li, span, td, label, small, h1, h2, h3) > code:not([class*="language-"]) {
  font-size: .85em; padding: .1em .38em; border-radius: var(--r-xs); background: var(--bg-sunken); border: 1px solid var(--line-soft); color: var(--text);
}

/* Numbers in tables: interface face with even-width digits. */
.sh-scroll td.text-right.font-mono { font-family: var(--font-body); font-variant-numeric: tabular-nums; }

/* Older admin pages draw cards with legacy dark utility classes: give them
   the same raised, softly shadowed look as the rest of the console. */
.sh-scroll :is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl):is(.bg-slate-900, .bg-slate-900\/50, .bg-slate-900\/80).border {
  background-color: var(--bg-raised); box-shadow: var(--shadow-sm);
}

/* Segmented control (filters, ranges): a soft track with a raised selection. */
.seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--r-sm); background: var(--bg-sunken); border: 1px solid var(--line-soft); }
.seg > a, .seg > button { display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .75rem; border-radius: calc(var(--r-sm) - 3px);
  font-size: .8125rem; font-weight: 500; color: var(--text-muted); text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.seg > a:hover, .seg > button:hover { color: var(--text); }
.seg > .is-active { background: var(--bg-raised); color: var(--text); box-shadow: var(--shadow-sm); }

/* Destructive row actions stay quiet until the row is hovered or focused. */
.sh-scroll tbody tr :is(a, button)[style*="--danger"], .sh-scroll li :is(a, button)[style*="--danger"] {
  color: var(--text-faint) !important; transition: color var(--dur-fast) var(--ease);
}
.sh-scroll tbody tr:is(:hover, :focus-within) :is(a, button)[style*="--danger"],
.sh-scroll li:is(:hover, :focus-within) :is(a, button)[style*="--danger"] { color: var(--danger) !important; }

/* Older pages: tame heavy utility shadows and extra-black weights. */
.sh-scroll :is(.shadow-lg, .shadow-xl, .shadow-2xl) { box-shadow: var(--shadow-sm) !important; }
.sh-scroll .font-black { font-weight: 700; letter-spacing: -.02em; }

/* Section titles inside cards (a <p> styled as a small label) read as real
   headings; field labels (<label>) stay quiet. */
.sh-pad p:is(.uppercase.tracking-wide, .uppercase.tracking-wider, .uppercase.tracking-widest):not(:has(+ :is(.text-xl, .text-2xl, .text-3xl, .text-4xl))) {
  font-size: .875rem; font-weight: 600; color: var(--text) !important; letter-spacing: -.005em;
}
.sh-scroll label:is(.uppercase.tracking-wide, .uppercase.tracking-wider, .uppercase.tracking-widest) { color: var(--text-muted) !important; }

/* Page entrance and navigation progress: small motions that make moving
   around the console feel responsive. */
@keyframes sh-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.sh-pad > * { animation: sh-enter var(--dur-mid) var(--ease-out) both; }
.sh-progress { position: absolute; left: 0; top: 0; height: 2px; width: 0; z-index: 5; pointer-events: none;
  background: color-mix(in srgb, var(--text) 70%, transparent); border-radius: 0 2px 2px 0; opacity: 0;
  transition: width 8s cubic-bezier(.1, .7, .1, 1), opacity .2s ease; }
.sh-progress.is-on { width: 85%; opacity: 1; }

/* ── Formatted AI messages (VexMD) ─────────────────────────────────────── */
.md { font-size: .9375rem; line-height: 1.68; color: var(--text); overflow-wrap: anywhere; white-space: normal; }
.md > :first-child { margin-top: 0 !important; }
.md > :last-child { margin-bottom: 0 !important; }
.md p { margin: 0 0 .8em; }
.md h1, .md h2, .md h3, .md h4 { font-weight: 650; letter-spacing: -.015em; line-height: 1.3; margin: 1.3em 0 .5em; color: var(--text); }
.md h1 { font-size: 1.4em; } .md h2 { font-size: 1.22em; } .md h3 { font-size: 1.08em; } .md h4 { font-size: 1em; }
.md ul, .md ol { margin: 0 0 .8em; padding-left: 1.4em; }
.md ul { list-style: disc; } .md ol { list-style: decimal; }
.md li { margin: .25em 0; }
.md li > p { margin: 0 0 .35em; }
.md li::marker { color: var(--text-faint); }
.md a { color: var(--text); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--text) 35%, transparent); text-underline-offset: 3px; }
.md a:hover { text-decoration-color: var(--text); }
.md strong { font-weight: 650; }
.md blockquote { margin: 0 0 .8em; padding: .5em 1em; border-left: 3px solid var(--line); background: var(--bg-sunken); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--text-muted); }
.md hr { border: 0; height: 1px; background: var(--line-soft); margin: 1.2em 0; }
.md img { max-width: 100%; border-radius: var(--r-sm); }
.md :not(pre) > code { font-family: var(--font-mono); font-size: .86em; padding: .12em .4em; border-radius: 6px; background: var(--bg-sunken); border: 1px solid var(--line-soft); }
.md .md-table { overflow-x: auto; margin: 0 0 .9em; border: 1px solid var(--line-soft); border-radius: var(--r-md); }
.md table { width: 100%; border-collapse: collapse; font-size: .9em; }
.md th, .md td { padding: .5em .8em; text-align: left; border-bottom: 1px solid var(--line-soft); }
.md th { background: var(--bg-sunken); font-weight: 600; }
.md tr:last-child td { border-bottom: 0; }
.md .katex-display { margin: .7em 0; overflow-x: auto; overflow-y: hidden; padding: .2em 0; }
.md .katex { font-size: 1.06em; }

.md-code { margin: 0 0 .9em; border-radius: var(--r-md); overflow: hidden; border: 1px solid color-mix(in srgb, var(--code-text) 10%, transparent); background: var(--code-bg); }
.md-code-head { display: flex; align-items: center; justify-content: space-between; padding: .35em .45em .35em .9em; font-family: var(--font-body);
  font-size: .75rem; color: color-mix(in srgb, var(--code-text) 60%, transparent); background: color-mix(in srgb, var(--code-text) 5%, var(--code-bg)); }
.md-copy { display: inline-flex; align-items: center; gap: .35em; padding: .25em .55em; border-radius: 7px; font-size: .75rem; color: inherit; transition: background .15s, color .15s; }
.md-copy:hover { background: color-mix(in srgb, var(--code-text) 10%, transparent); color: var(--code-text); }
.md-code pre { margin: 0; padding: .9em 1em; border-radius: 0; background: transparent; overflow-x: auto; font-size: .8125rem; line-height: 1.6; }
.md-code code { font-family: var(--font-mono); color: var(--code-text); background: none; border: 0; padding: 0; white-space: pre; font-variant-ligatures: none; }
/* syntax colours (one palette for both themes; code blocks are always dark) */
.hljs-comment, .hljs-quote { color: #8b8b96; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-built_in, .hljs-doctag { color: #c792ea; }
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-template-tag { color: #a5d6a7; }
.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-variable.constant_ { color: #f78c6c; }
.hljs-title, .hljs-title.function_, .hljs-section { color: #82aaff; }
.hljs-title.class_, .hljs-type, .hljs-class .hljs-title { color: #ffcb6b; }
.hljs-attr, .hljs-attribute, .hljs-property, .hljs-params { color: #ffd580; }
.hljs-tag, .hljs-name, .hljs-selector-id, .hljs-selector-class { color: #89ddff; }
.hljs-meta, .hljs-deletion { color: #ff8b8b; }
.hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: 700; }

/* "Thinking" indicator shown until the first words arrive. */
.md-thinking { display: inline-flex; align-items: center; gap: .6rem; padding: .2rem 0; font-size: .875rem; }
.md-orb { position: relative; width: 18px; height: 18px; display: inline-grid; place-items: center; }
.md-orb i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--text); opacity: .25; animation: md-orbit 1.4s infinite ease-in-out; }
.md-orb i:nth-child(1) { transform: translate(-6px, 0); animation-delay: 0s; }
.md-orb i:nth-child(2) { transform: translate(0, -5px); animation-delay: .18s; }
.md-orb i:nth-child(3) { transform: translate(6px, 0); animation-delay: .36s; }
@keyframes md-orbit { 0%, 100% { opacity: .2; scale: .8; } 45% { opacity: 1; scale: 1.15; } }
.md-shimmer { font-weight: 500; background: linear-gradient(90deg, var(--text-faint) 0%, var(--text) 40%, var(--text-faint) 80%); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: md-shimmer 1.8s linear infinite; }
@keyframes md-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ── model picker (vex-model-picker.js) ───────────────────────────────── */
select.mp-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden; clip: rect(0 0 0 0); }
.mp-trigger { display: flex; align-items: center; gap: .55rem; width: 100%; min-width: 0; height: 2.5rem; padding: 0 .7rem 0 .8rem; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--bg-raised); color: var(--text); font-size: 13.5px; font-weight: 500; text-align: left; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.mp-trigger:hover { border-color: color-mix(in srgb, var(--text) 22%, transparent); }
.mp-trigger:focus-visible, .mp-trigger[aria-expanded="true"] { outline: none; border-color: color-mix(in srgb, var(--text) 30%, transparent); box-shadow: 0 0 0 3px var(--ring); }
.mp-trigger:disabled { opacity: .55; cursor: not-allowed; }
.mp-trigger .mp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-chev { font-size: 12px; color: var(--text-faint); }
.mp-compact { width: auto; max-width: 15rem; height: 2rem; padding: 0 .55rem 0 .6rem; gap: .45rem; border-radius: var(--r-full); font-size: 12.5px;
  border-color: var(--line-soft); background: var(--bg-sunken); color: var(--text-muted); }
.mp-compact:hover { background: var(--bg-hover); color: var(--text); }
.mp-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, #a1a1aa, #52525b);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 25%, transparent); }
.mp-dot[data-family="amber"] { background: linear-gradient(135deg, #fcd34d, #f97316); }
.mp-dot[data-family="photon"] { background: linear-gradient(135deg, #7dd3fc, #6366f1); }
.mp-dot[data-family="voice"] { background: linear-gradient(135deg, #86efac, #14b8a6); }

.mp-pop { position: fixed; z-index: 1000; display: none; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--bg-raised); box-shadow: var(--shadow-lg); transform-origin: top center; }
.mp-pop.mp-up { transform-origin: bottom center; }
.mp-pop.mp-open { display: flex; animation: mp-in var(--dur-fast) var(--ease-out, var(--ease)); }
@keyframes mp-in { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: none; } }
.mp-pop.mp-up.mp-open { animation-name: mp-in-up; }
@keyframes mp-in-up { from { opacity: 0; transform: translateY(4px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mp-pop.mp-open { animation: none; } }
.mp-search { display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; border-bottom: 1px solid var(--line-soft); color: var(--text-faint); font-size: 13px; }
html .mp-search input, html .mp-search input:focus { flex: 1; min-width: 0; border: 0 !important; box-shadow: none !important; outline: none; background: transparent; padding: .2rem 0; font-size: 13.5px; color: var(--text); }
.mp-list { overflow-y: auto; padding: .35rem; outline: none; overscroll-behavior: contain; }
.mp-item { display: flex; align-items: flex-start; gap: .65rem; padding: .6rem .65rem; border-radius: var(--r-md); cursor: pointer; }
.mp-item .mp-dot { margin-top: .3rem; }
.mp-item.mp-active { background: var(--bg-hover); }
.mp-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.mp-title { font-size: 13.5px; font-weight: 550; color: var(--text); overflow-wrap: anywhere; }
.mp-desc { font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
.mp-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.mp-chip { font-size: 11px; font-weight: 500; line-height: 1; padding: .28rem .45rem; border-radius: var(--r-full); background: var(--bg-sunken);
  border: 1px solid var(--line-soft); color: var(--text-muted); }
.mp-check { visibility: hidden; margin-top: .15rem; font-size: 15px; color: var(--text); }
.mp-item[aria-selected="true"] .mp-check { visibility: visible; }
.mp-empty { display: none; padding: 1rem; text-align: center; font-size: 13px; color: var(--text-faint); }
.mp-pop.mp-none .mp-empty { display: block; }