/* ============================================================
   VoiceTips Design System
   voicetips.css — import this on every page
   ============================================================ */

/* ── Fonts (self-hosted; see css/fonts.css + css/fonts/) ──────
   Cinzel, Inter, JetBrains Mono are vendored locally so the UI
   renders offline with no external request. Regenerate with
   tmp/fetchfonts.js if weights/subsets change. */
@import url('fonts.css');

/* ── Design Tokens ────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:             #0e0b14;
  --surface:        #16111f;
  --surface-raised: #1e1730;
  --surface-high:   #261e3a;

  /* Borders */
  --border:         #2d2440;
  --border-strong:  #4a3868;

  /* Accent — Royal Purple */
  --accent:         #7c3aed;
  --accent-light:   #9d65f5;
  --accent-dim:     #4c1d95;
  --accent-glow:    rgba(124, 58, 237, 0.25);
  --accent-glow-lg: rgba(124, 58, 237, 0.12);

  /* Secondary — Imperial Gold */
  --gold:           #c9a84c;
  --gold-light:     #e2c06a;
  --gold-dim:       #78611a;
  --gold-glow:      rgba(201, 168, 76, 0.22);
  --gold-glow-lg:   rgba(201, 168, 76, 0.08);

  /* Text */
  --text:           #f5f0ff;
  --text-secondary: #c4b8e0;
  --muted:          #8b7aa8;
  --muted-dim:      #564870;

  /* Status */
  --success:        #22c55e;
  --success-bg:     rgba(34, 197, 94, 0.1);
  --warn:           #f59e0b;
  --warn-bg:        rgba(245, 158, 11, 0.1);
  --danger:         #ef4444;
  --danger-bg:      rgba(239, 68, 68, 0.1);
  --info:           #60a5fa;
  --info-bg:        rgba(96, 165, 250, 0.1);

  /* Typography */
  --font-display: 'Cinzel', Georgia, serif;
  --font-ui:      'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Spacing scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* Radii */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow:    0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.6);
  --shadow-accent: 0 0 32px var(--accent-glow);
  --shadow-gold:   0 0 32px var(--gold-glow);

  /* Transitions */
  --transition: 0.2s ease;
  --transition-slow: 0.35s ease;

  /* Layout */
  --max-width:       1200px;
  --nav-height:      64px;
  --sidebar-width:   260px;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* The canvas itself, not only body: otherwise the browser's white shows
     between one page and the next, and past the end of a short page. */
  background: var(--bg);
  color-scheme: dark;
}
[data-theme="light"] { color-scheme: light; }

/* Moving between pages on this site cross-fades instead of blanking (Chromium;
   other browsers simply navigate). */
@view-transition { navigation: auto; }

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}

img, video { max-width: 100%; display: block; }
a { color: var(--accent-light); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold-light); }
button { font-family: var(--font-ui); cursor: pointer; }
input, select, textarea { font-family: var(--font-ui); }

/* ── Typography ───────────────────────────────────────────── */
.vt-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.15;
  color: var(--text);
}

.vt-display-xl { font-size: clamp(2.5rem, 6vw, 5rem); }
.vt-display-lg { font-size: clamp(2rem, 4vw, 3.5rem); }
.vt-display-md { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.vt-display-sm { font-size: clamp(1.25rem, 2vw, 1.75rem); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-ui);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

.vt-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.vt-mono {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

/* ── Layout Utilities ─────────────────────────────────────── */
.vt-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.vt-section {
  padding: var(--space-9) 0;
}

.vt-section-sm {
  padding: var(--space-7) 0;
}

.vt-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.vt-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.vt-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }

@media (max-width: 900px) {
  .vt-grid-3, .vt-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .vt-grid-2, .vt-grid-3, .vt-grid-4 { grid-template-columns: 1fr; }
}

/* ── Navigation ───────────────────────────────────────────── */
.vt-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-height);
  background: rgba(14, 11, 20, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
  display: flex;
  align-items: center;
}

.vt-nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vt-nav-logo {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.vt-nav-logo .logo-mark {
  color: var(--accent-light);
}

.vt-nav-logo .logo-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  display: inline-block;
  margin-left: 2px;
}

.vt-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
}

.vt-nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  transition: color var(--transition);
  letter-spacing: 0.02em;
}

.vt-nav-links a:hover,
.vt-nav-links a.active {
  color: var(--text);
}

.vt-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ── Cards ────────────────────────────────────────────────── */
.vt-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  position: relative;
  overflow: hidden;
}

.vt-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  opacity: 0;
  background: radial-gradient(ellipse at top left, var(--accent-glow), transparent 60%);
  transition: opacity var(--transition-slow);
  pointer-events: none;
}

.vt-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-accent);
  transform: translateY(-3px);
}

.vt-card:hover::before {
  opacity: 1;
}

/* Gold variant */
.vt-card-gold {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  position: relative;
  overflow: hidden;
}

.vt-card-gold::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  opacity: 0;
  background: radial-gradient(ellipse at top left, var(--gold-glow), transparent 60%);
  transition: opacity var(--transition-slow);
  pointer-events: none;
}

.vt-card-gold:hover {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), var(--shadow-gold);
  transform: translateY(-3px);
}

.vt-card-gold:hover::before {
  opacity: 1;
}

/* Flat card — no hover effect, for dashboard panels */
.vt-card-flat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

/* Card icon */
.vt-card-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius);
  background: var(--accent-dim);
  border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: var(--space-4);
  transition: background var(--transition), transform var(--transition);
  position: relative; z-index: 1;
}

.vt-card:hover .vt-card-icon {
  background: var(--accent);
  transform: scale(1.08);
}

.vt-card-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-2);
  position: relative; z-index: 1;
}

.vt-card-body {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
  position: relative; z-index: 1;
}

.vt-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-light);
  margin-top: var(--space-4);
  transition: gap var(--transition), color var(--transition);
  position: relative; z-index: 1;
}

.vt-card-link:hover {
  color: var(--gold-light);
  gap: 10px;
}

/* ── Buttons ──────────────────────────────────────────────── */
.vt-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 22px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: none;
  background: var(--accent);
  color: #fff;
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
  cursor: pointer;
  white-space: nowrap;
}

.vt-btn:hover {
  background: var(--accent-light);
  box-shadow: 0 0 20px var(--accent-glow);
  transform: translateY(-1px);
  color: #fff;
}

.vt-btn:active { transform: translateY(0); }

.vt-btn-gold {
  background: var(--gold);
  color: #0e0b14;
}

.vt-btn-gold:hover {
  background: var(--gold-light);
  box-shadow: 0 0 20px var(--gold-glow);
  color: #0e0b14;
}

.vt-btn-ghost {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
}

.vt-btn-ghost:hover {
  border-color: var(--accent);
  color: var(--text);
  box-shadow: none;
  background: var(--accent-glow-lg);
}

.vt-btn-sm {
  padding: 6px 14px;
  font-size: 12px;
}

.vt-btn-lg {
  padding: 14px 32px;
  font-size: 16px;
}

.vt-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* ── Forms ────────────────────────────────────────────────── */
.vt-field { margin-bottom: var(--space-4); }

.vt-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}

.vt-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 14px;
  font-family: var(--font-ui);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.vt-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.vt-input::placeholder { color: var(--muted-dim); }

.vt-select {
  width: 100%;
  padding: 10px 14px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 14px;
  font-family: var(--font-ui);
  outline: none;
  appearance: none;
  cursor: pointer;
  transition: border-color var(--transition);
}

.vt-select:focus { border-color: var(--accent); }

.vt-range {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
  height: 4px;
}

/* ── Badges ───────────────────────────────────────────────── */
.vt-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.vt-badge-success { background: var(--success-bg); color: var(--success); border: 1px solid rgba(34,197,94,0.25); }
.vt-badge-warn    { background: var(--warn-bg);    color: var(--warn);    border: 1px solid rgba(245,158,11,0.25); }
.vt-badge-danger  { background: var(--danger-bg);  color: var(--danger);  border: 1px solid rgba(239,68,68,0.25); }
.vt-badge-info    { background: var(--info-bg);    color: var(--info);    border: 1px solid rgba(96,165,250,0.25); }
.vt-badge-muted   { background: var(--surface-raised); color: var(--muted); border: 1px solid var(--border); }
.vt-badge-accent  { background: rgba(124,58,237,0.15); color: var(--accent-light); border: 1px solid rgba(124,58,237,0.3); }
.vt-badge-gold    { background: rgba(201,168,76,0.12); color: var(--gold-light);   border: 1px solid rgba(201,168,76,0.3); }
.vt-badge-manual  { background: rgba(245,158,11,0.12); color: var(--warn);         border: 1px solid rgba(245,158,11,0.3); }

/* ── Stats Band ───────────────────────────────────────────── */
.vt-stats-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.vt-stat {
  background: var(--surface);
  padding: var(--space-5) var(--space-6);
  text-align: center;
}

.vt-stat-value {
  font-size: 2rem;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--text);
  line-height: 1.1;
}

.vt-stat-value.accent { color: var(--accent-light); }
.vt-stat-value.gold   { color: var(--gold); }

.vt-stat-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: var(--space-1);
  font-weight: 500;
}

/* ── Hero ─────────────────────────────────────────────────── */
.vt-hero {
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-height);
  position: relative;
  overflow: hidden;
}

/* Radial background glow */
.vt-hero::before {
  content: '';
  position: absolute;
  top: -200px; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 600px;
  background: radial-gradient(ellipse, rgba(124,58,237,0.18) 0%, transparent 70%);
  pointer-events: none;
}

.vt-hero::after {
  content: '';
  position: absolute;
  bottom: -100px; right: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(ellipse, rgba(201,168,76,0.07) 0%, transparent 65%);
  pointer-events: none;
}

.vt-hero-content {
  position: relative;
  z-index: 1;
}

.vt-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-4);
}

.vt-hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--gold);
}

/* ── Sidebar layout (docs / dashboard) ───────────────────── */
.vt-layout-sidebar {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: calc(100vh - var(--nav-height));
  margin-top: var(--nav-height);
}

.vt-sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: var(--space-5) 0;
  position: sticky;
  top: var(--nav-height);
  height: calc(100vh - var(--nav-height));
  overflow-y: auto;
}

.vt-sidebar-section {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
}

.vt-sidebar-heading {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-dim);
  padding: 0 var(--space-4);
  margin-bottom: var(--space-2);
  margin-top: var(--space-4);
}

.vt-sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px var(--space-4);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  transition: background var(--transition), color var(--transition);
  margin: 1px var(--space-2);
}

.vt-sidebar-link:hover {
  background: var(--surface-raised);
  color: var(--text);
}

.vt-sidebar-link.active {
  background: rgba(124,58,237,0.15);
  color: var(--accent-light);
  font-weight: 600;
}

.vt-sidebar-link .icon {
  font-size: 15px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* ── Tabs ─────────────────────────────────────────────────── */
.vt-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  padding: 0 var(--space-5);
}

.vt-tab {
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
  letter-spacing: 0.02em;
}

.vt-tab:hover { color: var(--text); }

.vt-tab.active {
  color: var(--accent-light);
  border-bottom-color: var(--accent);
}

/* ── Tables ───────────────────────────────────────────────── */
.vt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.vt-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.vt-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text-secondary);
}

.vt-table tr:last-child td { border-bottom: none; }

.vt-table tbody tr {
  transition: background var(--transition);
}

.vt-table tbody tr:hover td {
  background: var(--surface-raised);
  color: var(--text);
}

/* ── Divider ──────────────────────────────────────────────── */
.vt-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-6) 0;
}

.vt-divider-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  margin: var(--space-5) 0;
}

.vt-divider-label::before,
.vt-divider-label::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--border);
}

/* ── Alerts ───────────────────────────────────────────────── */
.vt-alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.vt-alert-success { background: var(--success-bg); border: 1px solid rgba(34,197,94,0.25); color: #86efac; }
.vt-alert-warn    { background: var(--warn-bg);    border: 1px solid rgba(245,158,11,0.25); color: #fcd34d; }
.vt-alert-danger  { background: var(--danger-bg);  border: 1px solid rgba(239,68,68,0.25);  color: #fca5a5; }
.vt-alert-info    { background: var(--info-bg);    border: 1px solid rgba(96,165,250,0.25); color: #93c5fd; }

/* ── Code blocks ──────────────────────────────────────────── */
.vt-code {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
  overflow-x: auto;
  line-height: 1.7;
}

.vt-code-inline {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--accent-light);
}

/* ── Footer ───────────────────────────────────────────────── */
.vt-footer {
  border-top: 1px solid var(--border);
  padding: var(--space-7) 0 var(--space-5);
  margin-top: var(--space-10);
}

.vt-footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.vt-footer-logo {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
}

.vt-footer-links {
  display: flex;
  gap: var(--space-5);
  list-style: none;
  flex-wrap: wrap;
}

.vt-footer-links a {
  font-size: 13px;
  color: var(--muted);
  transition: color var(--transition);
}

.vt-footer-links a:hover { color: var(--text); }

.vt-footer-copy {
  font-size: 12px;
  color: var(--muted-dim);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  text-align: center;
}

/* ── Health pills (Pulvinar) ──────────────────────────────── */
.vt-health-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 20px;
  transition: border-color var(--transition), color var(--transition);
}

.vt-health-pill .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--muted);
  transition: background var(--transition);
}

.vt-health-pill.ok  { color: var(--text); border-color: rgba(34,197,94,0.3); }
.vt-health-pill.ok .dot  { background: var(--success); box-shadow: 0 0 6px var(--success); }
.vt-health-pill.err { color: var(--danger); border-color: rgba(239,68,68,0.3); }
.vt-health-pill.err .dot { background: var(--danger); box-shadow: 0 0 6px var(--danger); }

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-dim); }

/* ── Utility classes ──────────────────────────────────────── */
.text-muted    { color: var(--muted); }
.text-accent   { color: var(--accent-light); }
.text-gold     { color: var(--gold); }
.text-success  { color: var(--success); }
.text-danger   { color: var(--danger); }
.text-warn     { color: var(--warn); }
.text-mono     { font-family: var(--font-mono); }
.text-center   { text-align: center; }
.text-sm       { font-size: 13px; }
.text-xs       { font-size: 11px; }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.items-center { align-items: center; }
.gap-2        { gap: var(--space-2); }
.gap-3        { gap: var(--space-3); }
.gap-4        { gap: var(--space-4); }

.w-full  { width: 100%; }
.hidden  { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ============================================================
   LIGHT THEME — "Roman Plaster"
   Warm plaster off-whites, subtle gold + purple.
   Default (:root) is dark; [data-theme="light"] overrides tokens.
   ============================================================ */
[data-theme="light"] {
  /* Backgrounds — warm plaster */
  --bg:             #efe8da;
  --surface:        #f8f3e9;
  --surface-raised: #fffdf7;
  --surface-high:   #ffffff;

  /* Borders — warm taupe */
  --border:         #e3d8c3;
  --border-strong:  #cebfa1;

  /* Accent — Royal Purple (darkened for legibility on plaster) */
  --accent:         #7c3aed;
  --accent-light:   #6d28d9;
  --accent-dim:     #ece2fb;
  --accent-glow:    rgba(124, 58, 237, 0.18);
  --accent-glow-lg: rgba(124, 58, 237, 0.07);

  /* Secondary — Imperial Gold (deepened for contrast on plaster) */
  --gold:           #9a7b2e;
  --gold-light:     #806523;
  --gold-dim:       #efe5cd;
  --gold-glow:      rgba(154, 123, 46, 0.20);
  --gold-glow-lg:   rgba(154, 123, 46, 0.08);

  /* Text — warm espresso */
  --text:           #2a2118;
  --text-secondary: #574c3c;
  --muted:          #8a7c64;
  --muted-dim:      #b6a886;

  /* Status (deepened for light backgrounds) */
  --success:        #15803d;
  --success-bg:     rgba(34, 197, 94, 0.12);
  --warn:           #b45309;
  --warn-bg:        rgba(245, 158, 11, 0.14);
  --danger:         #dc2626;
  --danger-bg:      rgba(239, 68, 68, 0.10);
  --info:           #2563eb;
  --info-bg:        rgba(96, 165, 250, 0.14);

  /* Shadows — soft + warm */
  --shadow-sm: 0 1px 3px rgba(90, 70, 30, 0.08);
  --shadow:    0 4px 16px rgba(90, 70, 30, 0.10);
  --shadow-lg: 0 12px 40px rgba(90, 70, 30, 0.16);
  --shadow-accent: 0 0 32px var(--accent-glow);
  --shadow-gold:   0 0 32px var(--gold-glow);
}

/* Hard-coded spots in components that must follow the theme */
[data-theme="light"] .vt-nav        { background: rgba(248, 243, 233, 0.82); }
[data-theme="light"] .vt-btn-gold   { color: #fffdf7; }
[data-theme="light"] .vt-btn-gold:hover { color: #fffdf7; }
[data-theme="light"] .vt-alert-success { color: #15803d; }
[data-theme="light"] .vt-alert-warn    { color: #b45309; }
[data-theme="light"] .vt-alert-danger  { color: #b91c1c; }
[data-theme="light"] .vt-alert-info    { color: #1d4ed8; }

/* ── Theme toggle button ──────────────────────────────────── */
.vt-theme-toggle {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
  flex-shrink: 0;
}
.vt-theme-toggle:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-glow-lg);
}
.vt-theme-toggle svg { width: 17px; height: 17px; display: block; }
.vt-theme-toggle .icon-moon { display: none; }
.vt-theme-toggle .icon-sun  { display: block; }
[data-theme="light"] .vt-theme-toggle .icon-sun  { display: none; }
[data-theme="light"] .vt-theme-toggle .icon-moon { display: block; }

/* ── Legal / document pages ───────────────────────────────── */
.vt-legal-content {
  padding: var(--space-8) var(--space-8) var(--space-9);
  max-width: 920px;
}

.vt-doc-header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.vt-doc-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
}
.vt-doc-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}

/* Prose typography */
.vt-prose { max-width: 760px; }
.vt-prose > h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  margin: var(--space-8) 0 var(--space-3);
}
.vt-prose > h2:first-child { margin-top: 0; }
.vt-prose h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin: var(--space-5) 0 var(--space-2);
}
.vt-prose p {
  color: var(--text-secondary);
  line-height: 1.85;
  margin-bottom: var(--space-4);
}
.vt-prose ul, .vt-prose ol {
  color: var(--text-secondary);
  line-height: 1.8;
  margin: 0 0 var(--space-4) var(--space-5);
}
.vt-prose li { margin-bottom: var(--space-2); }
.vt-prose li::marker { color: var(--accent-light); }
.vt-prose strong { color: var(--text); font-weight: 600; }
.vt-prose a { color: var(--accent-light); text-decoration: underline; text-underline-offset: 2px; }
.vt-prose a:hover { color: var(--gold-light); }

/* Rendered from stored Markdown (VT-113): the elements Markdown can produce
   beyond the hand-written pages' h2/p/ul. */
.vt-prose > h1 { font-family: var(--font-display); font-size: 1.8rem; color: var(--text); margin: 0 0 var(--space-4); }
.vt-prose blockquote {
  border-left: 3px solid var(--gold); background: var(--gold-glow-lg);
  padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-5); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.vt-prose blockquote p { margin-bottom: 0; }
.vt-prose table { border-collapse: collapse; margin: 0 0 var(--space-5); width: 100%; }
.vt-prose th, .vt-prose td { border: 1px solid var(--border); padding: var(--space-2) var(--space-3); text-align: left; color: var(--text-secondary); }
.vt-prose th { color: var(--text); background: var(--surface-raised); }
.vt-prose code { font-family: var(--font-mono); font-size: 0.9em; }
.vt-prose hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-6) 0; }
.vt-legal-plain { white-space: pre-wrap; font-family: var(--font-ui); color: var(--text-secondary); line-height: 1.8; }
.vt-legal-pdf { width: 100%; height: 80vh; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }

/* The acceptance dialog every surface shows on a 428 (js/dashboard-data.js). */
.vt-legal-gate {
  position: fixed; inset: 0; z-index: 5000; background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center; padding: var(--space-4);
}
.vt-legal-gate-box {
  background: var(--surface-high); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); width: 100%; max-width: 760px; max-height: calc(100vh - 2 * var(--space-4));
  overflow-y: auto; padding: var(--space-6);
}
.vt-legal-gate-box h2 { font-family: var(--font-display); font-size: 1.4rem; color: var(--text); margin-bottom: var(--space-2); }
.vt-legal-gate-lede { color: var(--text-secondary); margin-bottom: var(--space-5); }
.vt-legal-gate-doc { border-top: 1px solid var(--border); padding-top: var(--space-4); margin-bottom: var(--space-5); }
.vt-legal-gate-head { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: baseline; margin-bottom: var(--space-3); color: var(--text); }
.vt-legal-gate-meta { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.vt-legal-gate-changes { font-size: 14px; color: var(--text-secondary); background: var(--info-bg); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.vt-legal-gate-text {
  max-height: 40vh; overflow-y: auto; max-width: none; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-3);
}
.vt-legal-gate-text > h2 { font-size: 1.15rem; margin-top: var(--space-5); }
.vt-legal-gate-text iframe { width: 100%; height: 38vh; border: 0; background: #fff; }
.vt-legal-gate-check { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 14px; color: var(--text); cursor: pointer; }
.vt-legal-gate-check input { margin-top: 3px; }
.vt-legal-gate-error { color: var(--danger); font-size: 14px; min-height: 1em; margin-bottom: var(--space-3); }
.vt-legal-gate-actions { display: flex; gap: var(--space-3); justify-content: flex-end; flex-wrap: wrap; }

/* Section anchor numbering helper */
.vt-prose-section-num {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--gold);
  margin-right: var(--space-2);
}

@media (max-width: 760px) {
  .vt-legal-content { padding: var(--space-6) var(--space-5) var(--space-8); }
}

/* Contained sidebar layout — aligns the sidebar's left edge with the nav logo
   instead of running full-bleed to the viewport edge. */
.vt-layout-sidebar.contained {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--space-5);
}
@media (max-width: 820px) {
  .vt-layout-sidebar.contained {
    grid-template-columns: 1fr;
  }
  .vt-layout-sidebar.contained .vt-sidebar {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

/* ── Docs — index / link-tree pages ───────────────────────── */
.docs-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-3);
}

.docs-lede {
  font-size: 1.05rem;
  color: var(--muted);
  line-height: 1.75;
  max-width: 600px;
  margin-bottom: var(--space-7);
}

/* Group subheader that splits a link-tree into sections */
.docs-group-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: var(--space-7) 0 var(--space-4);
}
.docs-group-label::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--border);
}
.docs-group-label:first-of-type { margin-top: 0; }
.docs-group-label .count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted-dim);
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* Link-tree grid + cards */
.docs-link-grid {
  display: grid;
  gap: var(--space-4);
  max-width: 760px;
}
.docs-card-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: var(--space-4);
}
.docs-card-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: var(--accent-dim);
  border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-light);
}
.vt-card:hover .docs-card-icon { background: var(--accent); color: #fff; }
.vt-card-gold:hover .docs-card-icon { background: var(--gold); color: #0e0b14; border-color: var(--gold); }
.docs-card-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}

/* Breadcrumb above a doc title */
.docs-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.docs-breadcrumb a { color: var(--muted); }
.docs-breadcrumb a:hover { color: var(--accent-light); }
.docs-breadcrumb .sep { color: var(--muted-dim); }

/* "On this page" mini-TOC */
.docs-toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-7);
  max-width: 760px;
}
.docs-toc-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin-bottom: var(--space-3);
}
.docs-toc ul {
  list-style: none;
  display: grid;
  gap: var(--space-2);
}
.docs-toc a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--text-secondary);
}
.docs-toc a::before {
  content: '#';
  font-family: var(--font-mono);
  color: var(--gold);
  font-size: 12px;
}
.docs-toc a:hover { color: var(--accent-light); }

/* "Related pages / See also" cards */
.docs-related {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  max-width: 760px;
}
.docs-related-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-4);
}
.docs-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}
.docs-related-card {
  display: block;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition), transform var(--transition);
}
.docs-related-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.docs-related-card .kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}
.docs-related-card .title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-top: 4px;
}
.docs-related-card:hover .title { color: var(--accent-light); }

/* Token chip used in template pages to mark fill-in slots */
.docs-token {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--gold-glow-lg);
  border: 1px dashed var(--gold-dim);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--gold-light);
}

/* ── Expandable sidebar nav group ─────────────────────────── */
.vt-nav-group { display: flex; flex-direction: column; }

.vt-nav-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: auto;
  background: none;
  border: none;
  text-align: left;
  font: inherit;
}
/* inherits .vt-sidebar-link padding/colour; this just adds the chevron row */

.vt-nav-ind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  flex-shrink: 0;
}
.vt-nav-ind .ind {
  display: none;
  width: 13px; height: 13px;
  color: var(--muted-dim);
  transition: transform var(--transition), opacity var(--transition);
}
.vt-sidebar-link:hover .vt-nav-ind .ind,
.vt-nav-group[data-open="true"] .vt-nav-ind .ind { color: var(--text-secondary); }

/* which indicator shows — driven by [data-nav-indicator] on <html> */
[data-nav-indicator="chevron"] .ind-chevron { display: block; }
[data-nav-indicator="caret"]   .ind-caret   { display: block; }
[data-nav-indicator="plus"]    .ind-plus    { display: block; }
/* default if attr missing */
html:not([data-nav-indicator]) .ind-chevron { display: block; }

/* rotation on open (chevron + caret) */
[data-nav-indicator="chevron"] .vt-nav-group[data-open="true"] .ind-chevron { transform: rotate(90deg); }
[data-nav-indicator="caret"]   .vt-nav-group[data-open="true"] .ind-caret   { transform: rotate(90deg); }
html:not([data-nav-indicator]) .vt-nav-group[data-open="true"] .ind-chevron { transform: rotate(90deg); }
/* plus → minus */
.vt-nav-group[data-open="true"] .ind-plus .v { opacity: 0; }

/* collapsible children region (grid-rows height animation) */
.vt-nav-children {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-slow);
}
.vt-nav-group[data-open="true"] .vt-nav-children { grid-template-rows: 1fr; }
.vt-nav-children > .vt-nav-children-inner { overflow: hidden; min-height: 0; }

.vt-nav-children-inner {
  display: flex;
  flex-direction: column;
  margin: 2px var(--space-2) 2px calc(var(--space-4) + 7px);
  padding-left: var(--space-3);
  border-left: 1px solid transparent;
}
.vt-nav-child {
  margin: 1px 0;
  padding: 7px var(--space-3);
  font-size: 12.5px;
}

/* child marker — driven by [data-nav-marker] on <html> */
[data-nav-marker="line"]  .vt-nav-children-inner { border-left-color: var(--border); }
[data-nav-marker="dot"]   .vt-nav-child { position: relative; padding-left: var(--space-5); }
[data-nav-marker="dot"]   .vt-nav-child::before {
  content: '';
  position: absolute;
  left: var(--space-2); top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--muted-dim);
  transition: background var(--transition);
}
[data-nav-marker="dot"]   .vt-nav-child:hover::before { background: var(--text-secondary); }
[data-nav-marker="dot"]   .vt-nav-child.active::before { background: var(--accent-light); }

/* animation off */
[data-nav-animate="off"] .vt-nav-children { transition: none; }
[data-nav-animate="off"] .vt-nav-ind .ind { transition: none; }

/* ── Doc screenshot placeholder ───────────────────────────── */
.docs-shot {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(45deg,
      var(--surface) 0, var(--surface) 11px,
      var(--surface-raised) 11px, var(--surface-raised) 22px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  margin: var(--space-5) 0;
  padding: var(--space-5);
  text-align: center;
}
.docs-shot span {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  letter-spacing: 0.02em;
}

/* ── Waveform mini-player ─────────────────────────────────── */
/* The Podium queue's clip player, and the front page's review of a fresh recording. */
.vt-wave {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin: var(--space-2) 0;
}
.vt-wave-btn {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), transform var(--transition);
}
.vt-wave-btn:hover { background: var(--accent-light); transform: scale(1.06); }
.vt-wave-bars { display: flex; align-items: center; gap: 2px; height: 28px; flex: 1; overflow: hidden; }
.vt-wave-bars span {
  flex: 1;
  min-width: 2px;
  background: var(--border-strong);
  border-radius: 2px;
  transition: background var(--transition);
}
.vt-wave-bars span.played { background: var(--accent-light); }
.vt-wave-dur { font-family: var(--font-mono); font-size: 11px; color: var(--muted); flex-shrink: 0; }