/* Blueprint Design System v1.0 — shared tokens
   Linked by every page in design/. Single source of truth for color,
   type, spacing, radius, shadow — edit here, not per-page.

   This copy lives in Command/ so Command can use the real design system
   (colors, app shell, primitives) as a self-contained app, same as every
   other dashboard in this workspace keeps its own copy of shared assets
   (fonts, etc.) rather than reaching across app folders at runtime. It is
   a literal copy of design/tokens.css as of this pass — no drift yet, but
   nothing keeps it in sync automatically; re-copy by hand if the design
   system's tokens change and Command should pick up the update. */

@font-face {
  font-family: "Roboto";
  src: url("/assets/Fonts/Roboto-Medium.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
}
@font-face {
  font-family: "Garp Sans Wide";
  src: url("/assets/Fonts/Garp Sans Wide.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Winner Sans Extended Bold";
  src: url("/assets/Fonts/WinnerSans-ExtendedBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

:root {
  /* Neutrals — remapped to Workshop's exact dark palette (same hex values as
     Workshop's --bg/--panel/--panel-soft/--panel-soft-2/--line), keeping
     Command's own variable names so every .btn/.data-table/.card rule below
     inherits the new palette without being individually rewritten. */
  --sidebar: #232323;
  --canvas: #1C1C1C;
  --surface: #232323;
  --surface-raised: #262626;
  --border: #333333;
  /* Just for the dashboard background grid lines (index.html's inline
     .coach-app-grid-bg SVG) — a plain light grey, kept separate from
     --border since --border is used for card/table borders everywhere and
     shouldn't move just because the background grid's color did. */
  --grid-line: #4D4D4D;
  --text-primary: #F5F6F7;
  --text-secondary: #ABADB2;
  --text-tertiary: #6C6E73;
  --sidebar-text: #F5F6F7;
  --sidebar-text-secondary: #ABADB2;
  --sidebar-text-tertiary: #6C6E73;
  /* Fixed like the sidebar-text-* tokens above — the sidebar never follows
     the theme, so its hover wash can't use the theme-following --hover below
     (that resolves to a near-white blue tint in light mode, which would be
     nearly invisible against the always-dark sidebar). */
  --sidebar-hover: rgba(255,255,255,.03);
  /* Theme-following hover wash for canvas/surface content (menus, list rows,
     tabs) — per the command-center color rules' "Hover" token. */
  --hover: rgba(255,255,255,.035);

  /* Chromatic — remapped to Workshop's exact blue/navy pair (--blue/--blue-deep)
     and Workshop's own red/green for danger/success. */
  --primary: #78ACD2;
  --primary-hover: #91BEDD;
  --secondary: #13294C;
  --secondary-hover: #1E3A63;
  --success: #33C07D;
  --warning: #EAB308;
  --danger: #EF5350;
  --teal: #2DD4BF;
  --purple: #8B5CF6;
  --pink: #EC4899;
  --orange: #F97316;

  /* Pitch-type key (PCH-01, see data.html) — one color per pitch, covering the
     full canonical MLB pitch-type list, not just the ones any single dashboard
     happens to chart yet. --pitch-ff/si/fc/sl/cu/ch/fs/kn are copied verbatim
     from Trackman/js/constants.js's PITCH_TYPE_COLORS (already shipping, "close
     enough to TrackMan's own report to feel familiar") so this key stays
     consistent with what coaches already see there — Trackman's file itself is
     untouched, design-system-only. The rest are new: Trackman's real file
     reuses the same #EAB308 for both Cutter and Sweeper (a real collision) —
     --pitch-st gets its own value here instead of inheriting that bug. Knuckle
     curve/slurve/screwball/forkball/eephus have no existing app to match, so
     they're new locked choices, picked to stay visually distinct from their
     neighbors. At 14 colors, some are inevitably close for colorblind viewers
     — per the a11y rule (§ Foundations), this key is never the only signal;
     every usage pairs a swatch with its name/abbreviation as text. */
  --pitch-ff: #EF5350; /* Four-Seam Fastball */
  --pitch-si: #F97316; /* Sinker / Two-Seam Fastball */
  --pitch-fc: #EAB308; /* Cutter */
  --pitch-sl: #F59E0B; /* Slider */
  --pitch-st: #84CC16; /* Sweeper */
  --pitch-sv: #2DD4BF; /* Slurve */
  --pitch-cu: #6FA8D4; /* Curveball */
  --pitch-kc: #6366F1; /* Knuckle Curve */
  --pitch-sc: #D946EF; /* Screwball */
  --pitch-ch: #33C07D; /* Changeup */
  --pitch-fs: #A78BFA; /* Splitter */
  --pitch-fo: #C4B5FD; /* Forkball */
  --pitch-kn: #EC4899; /* Knuckleball */
  --pitch-ep: #78716C; /* Eephus */

  /* Fonts */
  --font-display: "Garp Sans Wide", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-stat: "Garp Sans Wide", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.24);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.28);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.36);
  --shadow-focus: 0 0 0 3px rgba(123,169,208,0.35);

  /* Spacing */
  --xxs: 4px; --xs: 8px; --sm: 12px; --md: 16px; --lg: 20px;
  --xl: 24px; --xxl: 32px; --xxxl: 48px; --huge: 64px;

  /* Radius */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;

  /* Motion */
  --t-fast: 120ms ease-out;
  --t-base: 180ms ease-out;
  --t-slow: 240ms ease-out;

  /* Layout */
  --sidebar-w: 232px;
  --sidebar-w-collapsed: 72px;
}

/* Light theme removed — Command now matches Workshop's dark-only design,
   no theme toggle in the shell anymore (see js/shell.js). */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--canvas);
  color: var(--text-primary);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
a { color: var(--primary); }
button { font-family: inherit; }
svg.icon { flex-shrink: 0; }

/* Type system: Garp Sans Wide (headers) / Winner Sans Extended Bold (stat
   numbers) / Roboto Medium Bold (labels, buttons, nav) / Roboto Medium
   (body copy — the body font-family above). Tracking stays 0 on Garp —
   negative letter-spacing collapses its already-expanded letterforms. */
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; margin: 0; }
.kpi-stat, .stat-value, .v-num, .t-stat { font-family: var(--font-stat); font-weight: 400; }

/* ============ App shell (this IS the product component from the App shell
   page — the design system site itself now runs inside it, dogfooded as
   its own real navigation instead of a separate docs-only top bar) ============ */
.app-shell { display: flex; height: 100vh; overflow: hidden; position: relative; }

.shell-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--sidebar);
  display: flex;
  flex-direction: column;
  padding: var(--lg) var(--md);
  transition: width var(--t-base);
}
.app-shell.is-collapsed .shell-sidebar { width: var(--sidebar-w-collapsed); }

.sidebar-brand { display: flex; align-items: center; gap: var(--sm); padding: var(--xs) var(--xs) var(--xl); margin-bottom: var(--xs); }
.sidebar-brand img { width: 24px; height: 24px; flex-shrink: 0; }
.sidebar-brand .wordmark { color: var(--sidebar-text); font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; flex: 1; text-decoration: none; }
.sidebar-collapse-btn {
  background: none; border: none; color: var(--sidebar-text-tertiary); cursor: pointer;
  width: 28px; height: 28px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background var(--t-fast), color var(--t-fast);
}
.sidebar-collapse-btn:hover { background: var(--sidebar-hover); color: var(--sidebar-text); }
.app-shell.is-collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }
.app-shell.is-collapsed .sidebar-brand .wordmark { display: none; }

.nav-group-label {
  color: var(--sidebar-text-tertiary); font-size: 11px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase;
  padding: 0 var(--xs); margin: var(--lg) 0 var(--xs);
}
.nav-group:first-of-type .nav-group-label { margin-top: 0; }
.app-shell.is-collapsed .nav-group-label { visibility: hidden; height: 4px; overflow: hidden; margin: var(--md) 0 var(--xxs); }

.nav-item {
  display: flex; align-items: center; gap: var(--sm);
  color: var(--sidebar-text-secondary); text-decoration: none; font-weight: 700; font-size: 13px;
  padding: var(--xs) var(--sm); border-radius: var(--r-md); margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; border: none; background: none; width: 100%; text-align: left; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.nav-item:hover { background: var(--sidebar-hover); color: var(--sidebar-text); }
/* Active state: a subtle tinted box + primary-colored text/icon, not a solid
   fill — per direct instruction/reference. */
.nav-item.active { background: rgba(123,169,208,0.14); border: 1px solid rgba(123,169,208,0.3); color: var(--primary); }
.nav-item .label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.nav-item .count { background: rgba(255,255,255,0.14); color: inherit; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: var(--r-pill); }
.app-shell.is-collapsed .nav-item .label, .app-shell.is-collapsed .nav-item .count { display: none; }
.app-shell.is-collapsed .nav-item { justify-content: center; }
.sidebar-spacer { flex: 1; }

.shell-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.shell-header {
  height: 72px; flex-shrink: 0; background: transparent; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; padding: 0 var(--xxl); gap: var(--lg);
}
.header-menu-btn {
  display: none; background: none; border: none; color: var(--text-primary); cursor: pointer;
  width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--r-sm);
}
.header-search {
  display: flex; align-items: center; gap: var(--xs);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: var(--xs) var(--md); width: 320px; max-width: 100%; color: var(--text-tertiary);
}
.header-search input { border: none; background: none; outline: none; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--text-primary); flex: 1; min-width: 0; }
.header-search input::placeholder { color: var(--text-tertiary); }
.header-search kbd {
  font-family: inherit; font-size: 11px; font-weight: 600; color: var(--text-tertiary);
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-xs); padding: 2px 6px;
}
.header-actions { display: flex; align-items: center; gap: var(--xs); flex-shrink: 0; }

/* 36px visual size, 44px invisible hit area (a11y touch-target rule from Foundations) */
.icon-btn {
  position: relative; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; padding: 0;
}
.icon-btn .icon-btn-face {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.icon-btn:hover .icon-btn-face { color: var(--text-primary); box-shadow: var(--shadow-sm); }
.icon-btn .badge-dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); border: 1.5px solid var(--canvas); }

/* Theme switch — replaces the old single-icon button. Track shows both
   sun/moon as static landmarks; the thumb's position (driven purely by
   [data-theme], no JS-swapped icon) is the actual state indicator. */
.theme-switch { background: none; border: none; cursor: pointer; padding: 11px 5px; display: flex; align-items: center; flex-shrink: 0; border-radius: var(--r-pill); }
.theme-switch:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.theme-switch-track {
  width: 40px; height: 22px; border-radius: var(--r-pill);
  background: var(--surface-raised); border: 1px solid var(--border);
  position: relative; flex-shrink: 0;
}
.theme-switch-track .ts-icon { position: absolute; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; color: var(--text-tertiary); }
.theme-switch-track .ts-icon.sun { left: 4px; }
.theme-switch-track .ts-icon.moon { right: 4px; }
.theme-switch-thumb {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  background: var(--primary); border-radius: 50%; box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast);
}
html[data-theme="dark"] .theme-switch-thumb { transform: translateX(18px); }

.menu-wrap { position: relative; }
.account-card { display: flex; align-items: center; gap: var(--xs); background: none; border: none; cursor: pointer; padding: var(--xxs); border-radius: var(--r-pill); color: var(--text-primary); }
.account-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: var(--secondary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.account-chevron { color: var(--text-tertiary); }

.dropdown-panel {
  position: absolute; top: calc(100% + var(--xs)); right: 0;
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); z-index: 20;
}
.dropdown-panel.is-hidden { display: none; }
.account-dropdown { min-width: 180px; padding: var(--xs); }
.account-dropdown-email { padding: var(--xs) var(--sm); font-size: 12px; color: var(--text-tertiary); border-bottom: 1px solid var(--border); margin-bottom: var(--xxs); word-break: break-all; }
.account-dropdown-item {
  display: flex; align-items: center; gap: var(--sm); width: 100%; background: none; border: none;
  color: var(--text-primary); font-weight: 600; font-size: 13px; padding: var(--xs) var(--sm); border-radius: var(--r-sm);
  cursor: pointer; text-align: left;
}
.account-dropdown-item:hover { background: rgba(241,90,90,0.1); color: var(--danger); }

.notif-panel { width: 320px; }
.notif-panel-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sm) var(--md); border-bottom: 1px solid var(--border); }
.notif-panel-head h3 { margin: 0; font-size: 13px; font-weight: 700; }
.notif-mark-read { background: none; border: none; color: var(--primary); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; }
.notif-row { display: flex; gap: var(--sm); padding: var(--sm) var(--md); border-bottom: 1px solid var(--border); position: relative; }
.notif-row:last-child { border-bottom: none; }
.notif-row .notif-icon { width: 32px; height: 32px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.notif-row .notif-body { flex: 1; min-width: 0; }
.notif-row .notif-title { font-size: 12.5px; font-weight: 600; margin: 0 0 2px; }
.notif-row .notif-time { font-size: 11px; color: var(--text-tertiary); margin: 0; }
.notif-row.is-unread::after { content: ""; position: absolute; top: 14px; right: var(--md); width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.notif-panel-foot { padding: var(--xs) var(--md); text-align: center; }
.notif-panel-foot a { font-size: 12px; font-weight: 600; text-decoration: none; }

.breadcrumbs { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-tertiary); margin-bottom: var(--lg); }
.breadcrumbs a { color: var(--text-secondary); text-decoration: none; }
.breadcrumbs a:hover { color: var(--text-primary); }
.breadcrumbs .crumb-current { color: var(--text-primary); }
.breadcrumbs svg { width: 14px; height: 14px; color: var(--text-tertiary); flex-shrink: 0; }

.shell-content { flex: 1; overflow-y: auto; }
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 15; }
.sidebar-backdrop.is-visible { display: block; }

@media (max-width: 1024px) {
  .app-shell:not(.is-collapsed) .shell-sidebar { width: var(--sidebar-w-collapsed); }
  .app-shell:not(.is-collapsed) .nav-item .label, .app-shell:not(.is-collapsed) .nav-item .count { display: none; }
  .app-shell:not(.is-collapsed) .nav-item { justify-content: center; }
  .app-shell:not(.is-collapsed) .nav-group-label { visibility: hidden; height: 4px; overflow: hidden; margin: var(--md) 0 var(--xxs); }
  .app-shell:not(.is-collapsed) .sidebar-brand .wordmark { display: none; }
  .sidebar-collapse-btn { display: none; }
  .header-search { width: 220px; }
}
@media (max-width: 768px) {
  .header-menu-btn { display: flex; }
  .shell-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w) !important;
    transform: translateX(-100%); transition: transform var(--t-base); z-index: 16;
  }
  .shell-sidebar .nav-item .label, .shell-sidebar .nav-item .count, .shell-sidebar .sidebar-brand .wordmark { display: flex !important; }
  .shell-sidebar .nav-item { justify-content: flex-start !important; }
  .shell-sidebar .nav-group-label { visibility: visible !important; height: auto !important; margin: var(--lg) 0 var(--xs) !important; }
  .app-shell.is-mobile-open .shell-sidebar { transform: translateX(0); }
  .header-search { display: none; }
  .shell-header { padding: 0 var(--lg); }
}

/* ============ Shared doc-page layout/utility classes ============ */
.docs-main { max-width: 1040px; margin: 0 auto; padding: var(--xxl); }
.docs-status-badge {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--primary);
  background: rgba(123,169,208,0.16);
  border: 1px solid rgba(123,169,208,0.35);
  border-radius: var(--r-pill);
  padding: 6px var(--sm);
  margin-bottom: var(--lg);
}
h1.docs-title { font-size: 32px; line-height: 1.2; margin: 0 0 var(--xs); }

/* Status pill (BDG-02) — outlined + tinted + uppercase, the exact recipe
   .docs-status-badge above already uses for page chrome. Distinct from
   .badge (dot + solid tint fill) and .pill (solid filter/tag chip). */
.status-pill {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  border-radius: var(--r-pill); padding: 6px var(--sm);
}
.status-pill.primary { color: var(--primary); background: rgba(123,169,208,0.16); border: 1px solid rgba(123,169,208,0.35); }
.status-pill.success { color: var(--success); background: rgba(58,201,119,0.16); border: 1px solid rgba(58,201,119,0.35); }
.status-pill.warning { color: var(--warning); background: rgba(245,166,35,0.16); border: 1px solid rgba(245,166,35,0.35); }
.status-pill.danger  { color: var(--danger); background: rgba(241,90,90,0.16); border: 1px solid rgba(241,90,90,0.35); }
.status-pill.neutral { color: var(--text-secondary); background: var(--surface-raised); border: 1px solid var(--border); }

/* Component index tags — every group gets a name+code, every variant inside
   it gets a unique code, so a real dashboard build can say "use BTN-01" and
   mean exactly one thing. */
.group-code {
  display: block; font-family: "SF Mono", "Menlo", monospace; font-size: 11px; font-weight: 700;
  color: var(--text-tertiary); letter-spacing: 0.4px; text-transform: uppercase; margin: -8px 0 var(--lg);
}
.comp-code {
  display: inline-block; flex-shrink: 0; font-family: "SF Mono", "Menlo", monospace; font-size: 10px; font-weight: 700;
  color: var(--primary); background: rgba(123,169,208,0.14); border-radius: var(--r-xs);
  padding: 2px 6px; letter-spacing: 0.3px; margin-right: var(--xs); vertical-align: middle; white-space: nowrap;
}
.docs-lede { color: var(--text-secondary); font-size: 14px; max-width: 680px; margin: 0 0 var(--xxl); }

section.block { margin-bottom: var(--xxxl); }
section.block h2 { font-size: 22px; margin: 0 0 4px; }
.block-desc { color: var(--text-secondary); font-size: 13px; max-width: 680px; margin: 0 0 var(--lg); }
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--text-tertiary); margin: var(--lg) 0 var(--sm);
}
.eyebrow:first-child { margin-top: 0; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--xl);
}

/* Buttons — centralized here (was duplicated per-page in primitives/surfaces/
   feedback, which is exactly the drift risk that bit the neutral-color pass). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: inherit; font-weight: 700; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.btn-md { padding: 9px 16px; font-size: 13.5px; }
.btn-lg { padding: 12px 22px; font-size: 14.5px; }
/* primary is a light, pastel blue — secondary (navy) text clears 4.5:1
   contrast; white on it does not (~2.4:1), so white is never used here. */
.btn-primary { background: var(--primary); color: var(--secondary); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: var(--secondary); color: #fff; }
.btn-secondary:hover { background: var(--secondary-hover); }
.btn-ghost { background: transparent; color: var(--text-primary); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-raised); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #DC3C3C; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }

.spec-note {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--lg) var(--xl);
  margin-bottom: var(--lg);
  font-size: 13px;
  color: var(--text-secondary);
}
.spec-note b { color: var(--text-primary); }
.spec-note code { background: var(--surface-raised); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--md); margin-bottom: var(--xl); }
.swatch { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); }
.swatch-color { height: 64px; }
.swatch-label { background: var(--surface); padding: var(--xs) var(--sm); }
.swatch-label .name { font-weight: 700; font-size: 12.5px; display: block; }
.swatch-label .hex { color: var(--text-tertiary); font-size: 11.5px; }

.demo-row { display: flex; gap: var(--md); flex-wrap: wrap; align-items: center; }
.demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: var(--lg); }

/* Badge — status tint pattern, shared by every page that shows status */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 5px var(--sm); border-radius: var(--r-pill); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.neutral { background: var(--surface-raised); color: var(--text-secondary); }
.badge.success { background: rgba(58,201,119,0.14); color: var(--success); }
.badge.warning { background: rgba(245,166,35,0.14); color: var(--warning); }
.badge.danger  { background: rgba(241,90,90,0.14); color: var(--danger); }
.badge.primary { background: rgba(123,169,208,0.16); color: var(--primary); }

code, kbd, pre { font-family: "SF Mono", "Menlo", monospace; }