/* ═══════════════════════════════════════════════════════════════════════════
   VELOCITY DOCS — V3 "DARK TERMINAL" DESIGN SYSTEM
   Phosphor-green terminal aesthetic with light "paper terminal" override.
   Mirrors /src/app/globals.css from velocity-web.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   FONTS — Inter (sans) + JetBrains Mono (mono)
   ───────────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ─────────────────────────────────────────────────────────────────────────────
   THEME TOKENS — dark (default) + light ([data-theme="light"]) override
   Every component color references these --term-* variables.
   ───────────────────────────────────────────────────────────────────────────── */
:root,
[data-theme="dark"] {
  /* surfaces */
  --term-bg: #0a0a0b;
  --term-deep: #0d0d0f;
  --term-panel: #111114;
  --term-elevated: #16161a;
  --term-border: #1f1f24;
  --term-border-strong: #2a2a31;

  /* text */
  --term-muted: #5a5a66;
  --term-dim: #7c7c89;
  --term-text: #c9c9d1;
  --term-bright: #e6e6ec;

  /* phosphor accent */
  --term-accent: #6effa3;
  --term-accent-hover: #7fffb3;
  --term-accent-soft: #4cc880;
  --term-accent-fg: #0a0a0b;

  /* accent alpha blends */
  --term-accent-06: rgba(110, 255, 163, 0.06);
  --term-accent-08: rgba(110, 255, 163, 0.08);
  --term-accent-12: rgba(110, 255, 163, 0.12);
  --term-accent-18: rgba(110, 255, 163, 0.18);
  --term-accent-30: rgba(110, 255, 163, 0.30);
  --term-accent-40: rgba(110, 255, 163, 0.40);
  --term-accent-45: rgba(110, 255, 163, 0.45);
  --term-accent-50: rgba(110, 255, 163, 0.50);
  --term-accent-60: rgba(110, 255, 163, 0.60);
  --term-accent-70: rgba(110, 255, 163, 0.70);

  /* secondary accents */
  --term-amber: #ffb454;
  --term-cyan: #7cd5ff;
  --term-magenta: #ff7cf0;
  --term-red: #ff6e6e;

  /* scanlines + grain */
  --term-scanline: rgba(255, 255, 255, 0.012);
  --term-noise-opacity: 0.6;
  --term-noise-blend: overlay;

  /* fades */
  --term-fade-from: #0d0d0f;
  --term-fade-from-bg: #0a0a0b;

  /* typography */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Courier New', monospace;

  /* spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* layout */
  --max-width: 1440px;
  --max-width-nav: 1440px;
  --sidebar-width: 280px;
  --toc-width: 240px;
  --navbar-height: 98px; /* 24px status strip + 74px main row */
  --status-height: 24px;

  /* transitions */
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
  --transition-slow: 400ms ease;

  /* ----- Legacy aliases so existing markup keeps rendering ----- */
  --bg-primary: var(--term-bg);
  --bg-secondary: var(--term-deep);
  --bg-surface: var(--term-panel);
  --bg-elevated: var(--term-elevated);

  --border-subtle: var(--term-border);
  --border-medium: var(--term-border-strong);
  --border-accent: var(--term-accent-40);
  --border-glow: var(--term-accent-60);

  --accent-primary: var(--term-accent);
  --accent-hover: var(--term-accent-hover);
  --accent-muted: var(--term-accent-soft);
  --accent-glow: var(--term-accent-08);
  --accent-glow-strong: var(--term-accent-18);

  --accent-secondary: var(--term-magenta);
  --accent-secondary-hover: var(--term-magenta);
  --accent-secondary-glow: rgba(255, 124, 240, 0.12);

  --text-primary: var(--term-bright);
  --text-secondary: var(--term-text);
  --text-tertiary: var(--term-dim);
  --text-accent: var(--term-accent);

  --success: var(--term-accent);
  --warning: var(--term-amber);
  --error: var(--term-red);

  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  --font-tech: var(--font-mono);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-glow:
    0 0 0 1px var(--term-accent-40),
    0 0 24px var(--term-accent-18),
    0 0 48px var(--term-accent-06);
  --shadow-glow-strong:
    0 0 0 1px var(--term-accent-60),
    0 0 32px var(--term-accent-30),
    0 0 64px var(--term-accent-12);

  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
}

[data-theme="light"] {
  /* "paper terminal" palette — warm off-white, near-black ink */
  --term-bg: #f6f3ec;
  --term-deep: #f1ecdf;
  --term-panel: #efe9da;
  --term-elevated: #e7e0cd;
  --term-border: #cfc8b8;
  --term-border-strong: #b6af9d;

  --term-muted: #7a7668;
  --term-dim: #5a5a66;
  --term-text: #2a2a31;
  --term-bright: #16161a;

  --term-accent: #0a7a3c;
  --term-accent-hover: #0f8a44;
  --term-accent-soft: #0f8a44;
  --term-accent-fg: #f6f3ec;

  --term-accent-06: rgba(10, 122, 60, 0.06);
  --term-accent-08: rgba(10, 122, 60, 0.08);
  --term-accent-12: rgba(10, 122, 60, 0.12);
  --term-accent-18: rgba(10, 122, 60, 0.18);
  --term-accent-30: rgba(10, 122, 60, 0.30);
  --term-accent-40: rgba(10, 122, 60, 0.40);
  --term-accent-45: rgba(10, 122, 60, 0.45);
  --term-accent-50: rgba(10, 122, 60, 0.50);
  --term-accent-60: rgba(10, 122, 60, 0.55);
  --term-accent-70: rgba(10, 122, 60, 0.65);

  --term-amber: #a96812;
  --term-cyan: #0b6a9b;
  --term-magenta: #a5348e;
  --term-red: #b83232;

  --term-scanline: rgba(0, 0, 0, 0);
  --term-noise-opacity: 0.18;
  --term-noise-blend: multiply;

  --term-fade-from: #f1ecdf;
  --term-fade-from-bg: #f6f3ec;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-glow:
    0 0 0 1px var(--term-accent-40),
    0 0 18px var(--term-accent-12);
  --shadow-glow-strong:
    0 0 0 1px var(--term-accent-60),
    0 0 28px var(--term-accent-18);
}

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

/* overflow-x: clip (not hidden) so horizontal overflow is still contained
   but no scroll container is created on html/body — which would break
   position:sticky for descendants like .docs-sidebar and .docs-toc. */
html, body { overflow-x: clip; max-width: 100vw; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--term-bg);
}

body {
  font-family: var(--font-sans);
  font-feature-settings: "ss02", "ss05", "ss09";
  font-weight: 400;
  line-height: 1.65;
  color: var(--term-text);
  background: var(--term-bg);
  min-height: 100vh;
}

::selection { background: var(--term-accent-30); color: var(--term-bright); }

/* ─────────────────────────────────────────────────────────────────────────────
   TYPOGRAPHY
   ───────────────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.2;
  color: var(--term-bright);
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 600; }
h2 { font-size: clamp(1.625rem, 3vw, 2rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--term-dim); }

p { color: var(--term-text); margin-bottom: var(--space-md); }

a {
  color: var(--term-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--term-accent-hover); }

code, pre, kbd, samp {
  font-family: var(--font-mono);
}

/* Inline code */
:not(pre) > code {
  background: var(--term-elevated);
  padding: 0.125rem 0.4rem;
  font-size: 0.875em;
  color: var(--term-accent);
  border: 1px solid var(--term-border);
  border-radius: 0;
}

hr {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, var(--term-border-strong) 50%, transparent 50%);
  background-size: 8px 1px;
  background-repeat: repeat-x;
  background-position: 0 50%;
  margin: var(--space-xl) 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TERMINAL CHROME UTILITIES
   (matches globals.css — .bg-points, .scanlines, .noise, .glow-*, .ascii-rule…)
   ───────────────────────────────────────────────────────────────────────────── */

.bg-points {
  background-image: radial-gradient(circle, var(--term-accent-08) 1px, transparent 1px);
  background-size: 18px 18px;
}

.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--term-scanline) 0px,
    var(--term-scanline) 1px,
    transparent 1px,
    transparent 3px
  );
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: var(--term-noise-opacity);
  mix-blend-mode: var(--term-noise-blend);
}

.glow-accent { text-shadow: 0 0 12px var(--term-accent-45); }
.glow-accent-soft { text-shadow: 0 0 6px var(--term-accent-30); }
.shadow-phosphor {
  box-shadow:
    0 0 0 1px var(--term-accent-40),
    0 0 24px var(--term-accent-18),
    0 0 48px var(--term-accent-06);
}

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Cursor blinker */
@keyframes cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.cursor-blink {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  vertical-align: -0.1em;
  background: var(--term-accent);
  margin-left: 0.25em;
  box-shadow: 0 0 8px var(--term-accent-60);
  animation: cursor-blink 1s steps(1) infinite;
}
.cursor-blink-thin {
  display: inline-block;
  width: 0.12em;
  height: 1em;
  vertical-align: -0.15em;
  background: var(--term-accent);
  margin-left: 0.15em;
  box-shadow: 0 0 6px var(--term-accent-60);
  animation: cursor-blink 1s steps(1) infinite;
}

/* ASCII dashed rule */
.ascii-rule {
  background-image: linear-gradient(to right, var(--term-border-strong) 50%, transparent 50%);
  background-size: 8px 1px;
  background-repeat: repeat-x;
  background-position: 0 50%;
  height: 1px;
  width: 100%;
}

/* Section container with dashed vertical rules (V3 globals.css) */
.section-container {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  border-left: 1px dashed var(--term-border);
  border-right: 1px dashed var(--term-border);
  position: relative;
}

/* Grid-bg legacy (fallback) — re-uses dot-points instead of blue grid */
.grid-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: radial-gradient(circle, var(--term-accent-08) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: radial-gradient(ellipse at center top, black 30%, transparent 80%);
}

/* ─────────────────────────────────────────────────────────────────────────────
   NAVBAR — V3 status strip + main row
   ───────────────────────────────────────────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: color-mix(in srgb, var(--term-bg) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--term-border);
}

/* Top status-line strip */
.navbar-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--status-height);
  max-width: var(--max-width-nav);
  margin: 0 auto;
  padding: 0 var(--space-md);
  border-bottom: 1px solid var(--term-border);
  background: var(--term-panel);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--term-muted);
}

@media (min-width: 640px) {
  .navbar-status { padding: 0 var(--space-lg); }
}
@media (min-width: 1024px) {
  .navbar-status { padding: 0 var(--space-xl); }
}
@media (min-width: 1280px) {
  .navbar-status { padding: 0 var(--space-2xl); }
}

.navbar-status-group {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-width: 0;
}

.navbar-status-live {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--term-accent);
  flex-shrink: 0;
}

.navbar-status-dot {
  position: relative;
  display: inline-flex;
  width: 6px;
  height: 6px;
}
.navbar-status-dot::before,
.navbar-status-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--term-accent);
}
.navbar-status-dot::before {
  animation: status-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
  opacity: 0.6;
}
@keyframes status-ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

.navbar-status-chip { flex-shrink: 0; }
.navbar-status-chip--dim { color: var(--term-dim); }

@media (max-width: 700px) {
  .navbar-status-chip--sm { display: none; }
}
@media (max-width: 900px) {
  .navbar-status-chip--md { display: none; }
}

/* Main navbar row */
.navbar-inner {
  max-width: var(--max-width-nav);
  margin: 0 auto;
  height: calc(var(--navbar-height) - var(--status-height));
  padding: 0 var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

@media (min-width: 640px) {
  .navbar-inner { padding: 0 var(--space-lg); }
}
@media (min-width: 1024px) {
  .navbar-inner { padding: 0 var(--space-xl); }
}
@media (min-width: 1280px) {
  .navbar-inner { padding: 0 var(--space-2xl); }
}

/* XXL navbar widening — nav stretches further on large displays
   while content max-width can stay narrower for readability. */
@media (min-width: 1536px) {
  :root { --max-width-nav: 1600px; }
}
@media (min-width: 1920px) {
  :root { --max-width-nav: 1760px; }
}

.navbar-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.navbar-logo .logo-mark {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-size: 22px;
  color: var(--term-bright, #faf7f0);
}
.navbar-logo .logo-cursor { color: var(--term-accent, #6effa3); }

@media (max-width: 479px) { .navbar-logo .logo-mark { font-size: 18px; } }
@media (min-width: 640px)  { .navbar-logo .logo-mark { font-size: 24px; } }
@media (min-width: 1024px) { .navbar-logo .logo-mark { font-size: 28px; } }
@media (min-width: 1536px) { .navbar-logo .logo-mark { font-size: 32px; } }

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

.navbar-link {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--term-dim);
  padding: var(--space-sm) var(--space-sm);
  transition: color var(--transition-fast);
}
.navbar-link:hover { color: var(--term-accent); }
.navbar-link.active { color: var(--term-accent); }

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}
@media (min-width: 640px) {
  .navbar-actions { gap: var(--space-sm); }
}

/* Documentation CTA pill */
.navbar-docs-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 36px;
  padding: 0 var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--term-accent);
  background: var(--term-accent-06);
  border: 1px solid var(--term-accent-40);
  transition: all var(--transition-fast);
}
.navbar-docs-btn:hover {
  background: var(--term-accent-12);
  border-color: var(--term-accent);
  color: var(--term-accent);
}
.navbar-docs-btn::before {
  content: '$';
  color: var(--term-accent-70);
  margin-right: 2px;
}
.navbar-docs-btn svg { display: none; }
.docs-cta-long { display: none; }
.docs-cta-short { display: inline; }
@media (min-width: 640px) {
  .docs-cta-long { display: inline; }
  .docs-cta-short { display: none; }
}

/* Square icon chip (used for GitHub, search, theme toggle fallback) */
.icon-chip,
.github-link,
.search-btn,
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 36px;
  padding: 0 var(--space-sm);
  background: var(--term-panel);
  border: 1px solid var(--term-border);
  color: var(--term-dim);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.icon-chip:hover,
.github-link:hover,
.search-btn:hover,
.theme-toggle:hover {
  border-color: var(--term-accent-40);
  color: var(--term-accent);
}
.icon-chip svg,
.github-link svg,
.search-btn svg,
.theme-toggle svg {
  width: 16px; height: 16px;
}

.github-link span { display: none; font-family: var(--font-mono); font-size: 0.75rem; margin-left: 0.35rem; }
@media (min-width: 900px) { .github-link span { display: inline; } }

/* Theme toggle — segmented [ dark | light ] chip */
.theme-toggle-v3 {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 36px;
  padding: 0 0.625rem;
  background: var(--term-panel);
  border: 1px solid var(--term-border);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--term-dim);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.theme-toggle-v3:hover {
  border-color: var(--term-accent-40);
  color: var(--term-accent);
}
.theme-toggle-v3 .bracket { color: var(--term-accent); }
.theme-toggle-v3 .pipe { color: var(--term-muted); }
.theme-toggle-v3 .opt { color: var(--term-muted); transition: color var(--transition-fast); }
.theme-toggle-v3[data-active="dark"] .opt[data-opt="dark"] { color: var(--term-accent); }
.theme-toggle-v3[data-active="light"] .opt[data-opt="light"] { color: var(--term-accent); }

/* Search trigger */
.search-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  height: 36px;
  padding: 0 var(--space-sm);
  background: var(--term-panel);
  border: 1px solid var(--term-border);
  color: var(--term-dim);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  min-width: 180px;
}
.search-trigger:hover { border-color: var(--term-accent-40); color: var(--term-accent); }
.search-trigger svg { width: 14px; height: 14px; }
.search-trigger kbd {
  margin-left: auto;
  padding: 0.1rem 0.4rem;
  background: var(--term-deep);
  border: 1px solid var(--term-border);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--term-muted);
}

/* Platform kbd hints */
.kbd-other { display: none; }
.kbd-mac { display: inline; }
@supports (-webkit-touch-callout: none) {
  .kbd-mac { display: none; }
  .kbd-other { display: inline; }
}

@media (max-width: 900px) {
  .search-trigger { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   BUTTONS
   ───────────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  height: 44px;
  padding: 0 var(--space-lg);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid var(--term-border);
  background: var(--term-panel);
  color: var(--term-text);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-fast);
}
.btn:hover {
  border-color: var(--term-accent-40);
  color: var(--term-accent);
}

.btn-primary {
  background: var(--term-accent);
  border-color: var(--term-accent);
  color: var(--term-accent-fg);
  box-shadow:
    0 0 0 1px var(--term-accent-40),
    0 0 24px var(--term-accent-18),
    0 0 48px var(--term-accent-06);
}
.btn-primary:hover {
  background: var(--term-accent-hover);
  border-color: var(--term-accent-hover);
  color: var(--term-accent-fg);
}

.btn-secondary {
  background: var(--term-panel);
  color: var(--term-text);
  border-color: var(--term-border);
}
.btn-secondary:hover {
  border-color: var(--term-accent-40);
  color: var(--term-accent);
}

.btn svg { width: 16px; height: 16px; }

/* ─────────────────────────────────────────────────────────────────────────────
   DOCUMENTATION LAYOUT
   ───────────────────────────────────────────────────────────────────────────── */
.docs-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr var(--toc-width);
  min-height: 100vh;
  padding-top: var(--navbar-height);
  max-width: var(--max-width);
  margin: 0 auto;
  border-left: 1px dashed var(--term-border);
  border-right: 1px dashed var(--term-border);
}

@media (max-width: 1200px) {
  .docs-layout {
    grid-template-columns: var(--sidebar-width) 1fr;
  }
  .docs-toc { display: none; }
}

@media (max-width: 900px) {
  .docs-layout {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100vw;
    border-left: 0;
    border-right: 0;
  }
  .docs-sidebar {
    display: none;
  }
  .docs-sidebar.open {
    display: block;
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    bottom: 0;
    width: min(320px, 85vw);
    z-index: 999;
    background: var(--term-bg);
    border-right: 1px solid var(--term-border);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .docs-content {
    padding: var(--space-lg) var(--space-md);
    max-width: 100%;
    width: 100%;
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .docs-content p,
  .docs-content li {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  /* Tables overflow horizontally inside their own scroll container */
  .docs-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Code blocks must never blow out the viewport */
  .docs-content pre,
  .code-block pre {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Footer stacks earlier on tablet too */
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* Sub-480 specific tweaks (small phones) */
@media (max-width: 479px) {
  .docs-content {
    padding: var(--space-md) var(--space-md);
  }
  .navbar-inner { padding: 0 var(--space-md); gap: 0.25rem; }
  .navbar-actions { gap: 0.25rem; }
}

/* ─── Sidebar ──────────────────────────────────────────────────────────────── */
.docs-sidebar {
  position: sticky;
  top: var(--navbar-height);
  align-self: start;
  height: calc(100vh - var(--navbar-height));
  overflow-y: auto;
  padding: var(--space-xl) var(--space-lg);
  border-right: 1px dashed var(--term-border);
  background: var(--term-bg);
  font-family: var(--font-mono);
}


.sidebar-section { margin-bottom: var(--space-xl); }

.sidebar-section-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--term-accent-70);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-xs);
}
.sidebar-section-title::before { content: '[ '; color: var(--term-accent); }
.sidebar-section-title::after { content: ' ]'; color: var(--term-accent); }

.sidebar-nav { list-style: none; padding: 0; margin: 0; }

.sidebar-link {
  position: relative;
  display: block;
  padding: 0.35rem 0.75rem 0.35rem 1.25rem;
  margin-bottom: 1px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--term-dim);
  border-left: 1px dashed transparent;
  transition: all var(--transition-fast);
}
.sidebar-link::before {
  content: ' ';
  position: absolute;
  left: 0.35rem;
  width: 0.75rem;
  color: var(--term-muted);
}
.sidebar-link:hover {
  color: var(--term-accent);
}
.sidebar-link:hover::before { content: '>'; color: var(--term-accent); }
.sidebar-link.active {
  color: var(--term-accent);
  background: var(--term-accent-08);
  border-left-color: var(--term-accent);
  text-shadow: 0 0 6px var(--term-accent-30);
}
.sidebar-link.active::before { content: '>'; color: var(--term-accent); }

.sidebar-link--nested {
  padding-left: 1.85rem;
  font-size: 0.8125rem;
  color: var(--term-dim);
}
.sidebar-link--nested::before { left: 0.95rem; }

/* ─── Main content ─────────────────────────────────────────────────────────── */
.docs-content {
  padding: var(--space-xl) var(--space-xl);
  max-width: 100%;
  width: 100%;
  min-width: 0;
}

@media (min-width: 901px) {
  .docs-content {
    padding: var(--space-2xl) var(--space-2xl);
    max-width: 820px;
  }
}

.docs-content > header {
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px dashed var(--term-border);
}

.docs-content h1 {
  margin-bottom: var(--space-sm);
  color: var(--term-bright);
  font-weight: 600;
}
.docs-content h2 {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 1px dashed var(--term-border);
  color: var(--term-bright);
}

.docs-content h3 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
  color: var(--term-bright);
}

/* Phone-only: single '#' prefix on every heading (h1–h6). Tablets and
   desktop render headings clean, like the right-sidebar-TOC variant. */
@media (max-width: 640px) {
  .docs-content :is(h1, h2, h3, h4, h5, h6)::before {
    content: '# ';
    color: var(--term-accent);
    font-family: var(--font-mono);
    font-weight: 400;
  }
}

.docs-content h4 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
  color: var(--term-bright);
}

.docs-content p {
  margin-bottom: var(--space-md);
  color: var(--term-text);
  line-height: 1.7;
}

.docs-content strong { color: var(--term-bright); font-weight: 600; }
.docs-content em { color: var(--term-text); }

.docs-content a {
  color: var(--term-accent);
  border-bottom: 1px dashed var(--term-accent-40);
  transition: all var(--transition-fast);
}
.docs-content a:hover {
  border-bottom-color: var(--term-accent);
  text-shadow: 0 0 6px var(--term-accent-30);
}
.docs-content a code { color: inherit; }

.docs-content ul,
.docs-content ol {
  margin-bottom: var(--space-md);
  padding-left: var(--space-xl);
  color: var(--term-text);
}
.docs-content ul { list-style: none; padding-left: var(--space-lg); }
.docs-content ul li {
  position: relative;
  margin-bottom: var(--space-sm);
}
.docs-content ul li::before {
  content: '·';
  position: absolute;
  left: -1rem;
  color: var(--term-accent);
  font-family: var(--font-mono);
  font-weight: 700;
}
.docs-content ol li { margin-bottom: var(--space-sm); }
.docs-content ol li::marker { color: var(--term-accent); font-family: var(--font-mono); }

.docs-content blockquote {
  margin: var(--space-lg) 0;
  padding: var(--space-md) var(--space-lg);
  border-left: 2px solid var(--term-accent);
  background: var(--term-accent-06);
  color: var(--term-text);
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
}
.docs-content blockquote p:last-child { margin-bottom: 0; }
.docs-content blockquote::before {
  content: '> ';
  color: var(--term-accent);
  font-weight: 700;
}

.docs-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-lg) 0;
  font-size: 0.875rem;
  border: 1px solid var(--term-border);
}
.docs-content thead { background: var(--term-panel); }
.docs-content th {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--term-accent);
  border-bottom: 1px solid var(--term-border);
}
.docs-content td {
  padding: var(--space-sm) var(--space-md);
  border-top: 1px dashed var(--term-border);
  color: var(--term-text);
}
.docs-content tbody tr { transition: color var(--transition-fast); }
.docs-content tbody tr:hover td { color: var(--term-bright); }

.docs-content img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--term-border);
  margin: var(--space-lg) 0;
}

/* ─── Table of Contents ────────────────────────────────────────────────────── */
.docs-toc {
  position: sticky;
  top: var(--navbar-height);
  align-self: start;
  height: calc(100vh - var(--navbar-height));
  overflow-y: auto;
  padding: var(--space-xl) var(--space-lg);
  border-left: 1px dashed var(--term-border);
  font-family: var(--font-mono);
}

/* Flex column only where the TOC is actually rendered (>1200px). The
   earlier mobile rule hides .docs-toc on narrow viewports via the
   grid-template; don't let display:flex override that cascade. */
@media (min-width: 1201px) {
  .docs-toc {
    display: flex;
    flex-direction: column;
  }
}

.toc-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--term-accent-70);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: var(--space-md);
}
.toc-title::before { content: '[ '; color: var(--term-accent); }
.toc-title::after { content: ' ]'; color: var(--term-accent); }

.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-link {
  display: block;
  padding: 0.2rem 0;
  font-size: 0.75rem;
  color: var(--term-muted);
  transition: color var(--transition-fast);
}
.toc-link:hover { color: var(--term-text); }
.toc-link.active { color: var(--term-accent); }

/* Hugo's native .TableOfContents renders a nav>ul structure */
.docs-toc nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 1px dashed var(--term-border);
}
.docs-toc nav ul li { margin: 0; }
.docs-toc nav ul li a {
  display: block;
  padding: 0.25rem 0 0.25rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--term-muted);
  text-decoration: none;
  border-left: 1px solid transparent;
  margin-left: -1px;
  transition: all var(--transition-fast);
  position: relative;
}
.docs-toc nav ul li a::before {
  content: '·';
  color: var(--term-muted);
  margin-right: 0.4rem;
  transition: color var(--transition-fast);
}
.docs-toc nav ul li a:hover {
  color: var(--term-text);
}
.docs-toc nav ul li a:hover::before { color: var(--term-accent); }
.docs-toc nav ul li a.active {
  color: var(--term-accent);
  border-left-color: var(--term-accent);
  text-shadow: 0 0 6px var(--term-accent-30);
}
.docs-toc nav ul li a.active::before { color: var(--term-accent); }
.docs-toc nav ul ul { padding-left: var(--space-md); border-left: 0; }
.docs-toc nav ul ul li a { font-size: 0.6875rem; }

/* ─────────────────────────────────────────────────────────────────────────────
   FOOTER (V3)
   ───────────────────────────────────────────────────────────────────────────── */
.footer {
  border-top: 1px dashed var(--term-border);
  background: var(--term-bg);
  padding: var(--space-2xl) var(--space-md);
}
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.footer-links-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--term-muted);
  margin-bottom: var(--space-lg);
}
.footer-links-label { color: var(--term-accent-70); flex-shrink: 0; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.25rem;
  font-family: var(--font-mono);
  margin-bottom: var(--space-lg);
}
.footer-links a {
  position: relative;
  font-size: 0.75rem;
  color: var(--term-dim);
  transition: color var(--transition-fast);
  padding-left: 0.75rem;
}
.footer-links a::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--term-muted);
}
.footer-links a:hover { color: var(--term-accent); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.footer-copyright {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--term-muted);
}
.footer-copyright .prompt {
  color: var(--term-accent-70);
  margin-right: 0.25rem;
}
.footer-icons { display: flex; gap: 0.5rem; }
.footer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: var(--term-panel);
  border: 1px solid var(--term-border);
  color: var(--term-dim);
  transition: all var(--transition-fast);
}
.footer-icon:hover { border-color: var(--term-accent-40); color: var(--term-accent); }
.footer-icon svg { width: 14px; height: 14px; }

@media (max-width: 640px) {
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   CALLOUTS — terminal-flavored variants
   ───────────────────────────────────────────────────────────────────────────── */
.callout {
  position: relative;
  margin: var(--space-lg) 0;
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--term-border);
  border-left-width: 2px;
  background: var(--term-panel);
  font-family: var(--font-sans);
  color: var(--term-text);
}

.callout-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  margin-bottom: var(--space-sm);
}
.callout-title svg { width: 14px; height: 14px; }
.callout-content p:last-child { margin-bottom: 0; }

.callout--info {
  border-left-color: var(--term-cyan);
  background: var(--term-panel);
}
.callout--info .callout-title { color: var(--term-cyan); }
.callout--info .callout-title::before { content: '[i]'; color: var(--term-cyan); }

.callout--tip {
  border-left-color: var(--term-accent);
  background: var(--term-accent-06);
}
.callout--tip .callout-title { color: var(--term-accent); }
.callout--tip .callout-title::before { content: '[+]'; color: var(--term-accent); }

.callout--warning {
  border-left-color: var(--term-amber);
  background: rgba(255, 180, 84, 0.06);
}
[data-theme="light"] .callout--warning { background: rgba(169, 104, 18, 0.08); }
.callout--warning .callout-title { color: var(--term-amber); }
.callout--warning .callout-title::before { content: '[!]'; color: var(--term-amber); }

.callout--error {
  border-left-color: var(--term-red);
  background: rgba(255, 110, 110, 0.06);
}
[data-theme="light"] .callout--error { background: rgba(184, 50, 50, 0.06); }
.callout--error .callout-title { color: var(--term-red); }
.callout--error .callout-title::before { content: '[x]'; color: var(--term-red); }

/* ─────────────────────────────────────────────────────────────────────────────
   TABS (shortcode)
   ───────────────────────────────────────────────────────────────────────────── */
.tabs { margin: var(--space-lg) 0; }

/* Tab strip — horizontal scroll on overflow so long lists don't wrap or
   break the layout on narrow viewports. */
.tabs-list {
  display: flex;
  gap: 0;
  margin: 0 0 0 calc(var(--space-md) * -1);
  padding: 0 var(--space-md);
  list-style: none;
  border-bottom: 1px dashed var(--term-border);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabs-list::-webkit-scrollbar { display: none; }

/* Suppress the global `.docs-content ul li::before { content: '·' }` and
   item margin so the tab strip reads as a clean toolbar, not a bullet list. */
.tabs-list li { margin: 0; padding: 0; }
.tabs-list li::before { content: none; }

.tab-trigger {
  display: inline-block;
  padding: 0.625rem var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.2;
  color: var(--term-dim);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.tab-trigger:hover {
  color: var(--term-text);
  background: color-mix(in srgb, var(--term-accent) 6%, transparent);
}
.tab-trigger:focus-visible {
  outline: 2px solid var(--term-accent);
  outline-offset: -2px;
}
.tab-trigger.active {
  color: var(--term-accent);
  border-bottom-color: var(--term-accent);
}

/* Panel sits close to the strip — kill the first child's top margin
   (browser default on <pre>, .code-block-simple, etc.) so the underline
   reads as the boundary rather than fighting a chunk of empty space. */
.tab-panel { display: none; padding-top: var(--space-sm); }
.tab-panel.active { display: block; }
.tab-panel > :first-child { margin-top: 0; }
.tab-panel > :last-child { margin-bottom: 0; }
/* The wrapper provides its own frame; the inner chroma <pre> doesn't need
   browser-default vertical margins fighting it. */
.code-block-simple > .highlight > pre,
.code-block-simple > pre { margin: 0; }

/* Phones — slightly larger tap targets, tighter gutter. */
@media (max-width: 640px) {
  .tab-trigger {
    padding: 0.75rem var(--space-sm);
    font-size: 0.8125rem;
  }
  .tabs-list {
    margin-left: calc(var(--space-sm) * -1);
    padding: 0 var(--space-sm);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   TERMINAL SHORTCODE — window chrome w/ dots
   ───────────────────────────────────────────────────────────────────────────── */
.terminal {
  position: relative;
  margin: var(--space-lg) 0;
  background: var(--term-deep);
  border: 1px solid var(--term-border);
}
.terminal-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  background: var(--term-panel);
  border-bottom: 1px solid var(--term-border);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--term-muted);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.code-block-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--term-border-strong);
}
.terminal-body {
  padding: var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--term-text);
}
.terminal-prompt { color: var(--term-accent); text-shadow: 0 0 6px var(--term-accent-30); margin-right: 0.5rem; }
.terminal-command { color: var(--term-bright); }
.terminal-output { color: var(--term-dim); }

/* ─────────────────────────────────────────────────────────────────────────────
   FILE TREE SHORTCODE
   ───────────────────────────────────────────────────────────────────────────── */
.file-tree {
  margin: var(--space-lg) 0;
  padding: var(--space-md);
  background: var(--term-deep);
  border: 1px solid var(--term-border);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}
.file-tree-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.2rem 0.5rem;
  margin-left: calc(var(--depth, 0) * 1rem);
  color: var(--term-text);
  border-left: 1px dashed transparent;
  transition: all var(--transition-fast);
}
.file-tree-item:hover {
  color: var(--term-accent);
}
.file-tree-item.active {
  color: var(--term-accent);
  background: var(--term-accent-08);
  border-left-color: var(--term-accent);
}
.file-tree-icon { width: 14px; height: 14px; flex-shrink: 0; }
.file-tree-icon--folder { color: var(--term-amber); }
.file-tree-icon--file { color: var(--term-muted); }
.file-tree-icon--go { color: var(--term-cyan); }

/* ─────────────────────────────────────────────────────────────────────────────
   CODE BLOCKS (shared with render-codeblock.html)
   ───────────────────────────────────────────────────────────────────────────── */
.code-block {
  position: relative;
  background: var(--term-deep);
  border: 1px solid var(--term-border);
  margin: var(--space-lg) 0;
}
.code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.75rem;
  background: var(--term-panel);
  border-bottom: 1px solid var(--term-border);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--term-muted);
}
.code-block-dots { display: flex; gap: 0.4rem; }
.code-block-filename { color: var(--term-muted); }
.code-block-copy {
  background: transparent;
  border: 1px solid var(--term-border);
  color: var(--term-muted);
  padding: 0.15rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.code-block-copy:hover { border-color: var(--term-accent-40); color: var(--term-accent); }

.code-block pre {
  margin: 0;
  padding: var(--space-md);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.7;
}

/* ─────────────────────────────────────────────────────────────────────────────
   DOCS PAGER
   ───────────────────────────────────────────────────────────────────────────── */
.docs-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px dashed var(--term-border);
}
/* Desktop: meta wrapper is layout-transparent so the existing flex-column on the
   link continues to govern label/title stacking. */
.docs-pager-meta { display: contents; }

@media (max-width: 640px) {
  .docs-pager {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
  /* Mobile: row layout with a chevron at the leading (prev) or trailing (next)
     edge — kills the empty-half look full-width cards get on phones. */
  .docs-pager-link {
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    min-height: 60px;
  }
  .docs-pager-prev,
  .docs-pager-next { align-items: center; text-align: left; }
  .docs-pager-next { flex-direction: row-reverse; text-align: right; }
  .docs-pager-link::before {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    line-height: 1;
    color: var(--term-accent);
    flex-shrink: 0;
  }
  .docs-pager-prev::before { content: '<'; }
  .docs-pager-next::before { content: '>'; }
  .docs-pager-prev .docs-pager-label::before,
  .docs-pager-next .docs-pager-label::after { content: none; }
  .docs-pager-meta {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    flex: 1;
  }
  .docs-pager-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.docs-pager-link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--space-md);
  background: var(--term-panel);
  border: 1px solid var(--term-border);
  text-decoration: none;
  transition: all var(--transition-fast);
}
.docs-pager-link:hover {
  border-color: var(--term-accent-40);
}
.docs-pager-prev { align-items: flex-start; }
.docs-pager-next { align-items: flex-end; text-align: right; }

.docs-pager-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--term-muted);
}
.docs-pager-prev .docs-pager-label::before { content: '< '; color: var(--term-accent); }
.docs-pager-next .docs-pager-label::after { content: ' >'; color: var(--term-accent); }

.docs-pager-title {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--term-accent);
}

/* ─────────────────────────────────────────────────────────────────────────────
   DOCS SECTION NAV (list.html)
   ───────────────────────────────────────────────────────────────────────────── */
.docs-section-nav { margin-top: var(--space-2xl); }
.docs-section-nav h2 {
  font-size: 0.875rem;
  font-family: var(--font-mono);
  color: var(--term-accent-70);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: var(--space-md);
  padding-bottom: 0;
  border-bottom: 0;
}
.docs-section-nav h2::before { content: '['; color: var(--term-accent); margin-right: 0.4rem; }
.docs-section-nav h2::after { content: ' ]'; color: var(--term-accent); }

.docs-section-nav ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.docs-section-nav li::before { content: none !important; }
.docs-section-nav li a {
  display: block;
  padding: var(--space-md);
  background: var(--term-panel);
  border: 1px solid var(--term-border);
  border-left: 2px solid transparent;
  text-decoration: none;
  transition: all var(--transition-fast);
}
.docs-section-nav li a:hover {
  border-color: var(--term-accent-40);
}
.docs-section-nav li a strong {
  display: block;
  color: var(--term-bright);
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  font-family: var(--font-mono);
}
.docs-section-nav li a strong::before { content: '> '; color: var(--term-accent); }
.docs-section-nav li a span {
  font-size: 0.8125rem;
  color: var(--term-dim);
  font-family: var(--font-sans);
}

/* ─────────────────────────────────────────────────────────────────────────────
   DOCS DESCRIPTION
   ───────────────────────────────────────────────────────────────────────────── */
.docs-description {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--term-dim);
  margin-top: var(--space-sm);
  line-height: 1.6;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SEARCH MODAL
   ───────────────────────────────────────────────────────────────────────────── */
.search-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}
[data-theme="light"] .search-modal { background: rgba(0, 0, 0, 0.4); }
.search-modal.open { display: flex; }

.search-dialog {
  width: 100%;
  max-width: 600px;
  background: var(--term-panel);
  border: 1px solid var(--term-border-strong);
  box-shadow: var(--shadow-lg);
}
.search-input-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px dashed var(--term-border);
}
.search-input-wrapper svg { width: 18px; height: 18px; color: var(--term-muted); flex-shrink: 0; }
.search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--term-bright);
}
.search-input::placeholder { color: var(--term-muted); }
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.search-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid var(--term-border);
  color: var(--term-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.search-close:hover { color: var(--term-accent); border-color: var(--term-accent-40); }
.search-close svg { width: 14px; height: 14px; }

.search-results { max-height: 400px; overflow-y: auto; padding: var(--space-sm); }
.search-result {
  display: block;
  padding: var(--space-sm) var(--space-md);
  color: var(--term-text);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.search-result:hover,
.search-result.selected {
  background: var(--term-accent-08);
  border-left-color: var(--term-accent);
  color: var(--term-accent);
}
.search-result-title { font-weight: 600; color: var(--term-bright); margin-bottom: 0.25rem; font-family: var(--font-mono); font-size: 0.875rem; }
.search-result-snippet { font-size: 0.8125rem; color: var(--term-dim); line-height: 1.5; margin-top: 0.25rem; }
.search-result-snippet mark { background: var(--term-accent-12); color: var(--term-accent); padding: 0 2px; }

.search-footer {
  display: flex;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-lg);
  border-top: 1px dashed var(--term-border);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--term-muted);
}
.search-footer kbd {
  padding: 0.125rem 0.375rem;
  background: var(--term-deep);
  border: 1px solid var(--term-border);
  border-radius: 0;
  font-size: 0.625rem;
}
.search-footer-mobile { display: none; }
@media (max-width: 768px) {
  .search-footer-desktop { display: none; }
  .search-footer-mobile { display: flex; align-items: center; }
  .search-modal { padding: var(--space-md); padding-top: var(--space-md); }
  .search-dialog { max-width: 100%; min-height: 45vh; max-height: calc(100vh - var(--space-2xl)); display: flex; flex-direction: column; }
  .search-results { flex: 1; max-height: none; }
  .search-footer { flex-wrap: wrap; gap: var(--space-sm); justify-content: center; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE NAVIGATION
   ───────────────────────────────────────────────────────────────────────────── */
.mobile-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: var(--term-panel);
  border: 1px solid var(--term-border);
  color: var(--term-dim);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.mobile-nav-toggle:hover { border-color: var(--term-accent-40); color: var(--term-accent); }
.mobile-nav-toggle svg { width: 18px; height: 18px; }
.mobile-nav-toggle .close-icon { display: none; }
.mobile-nav-toggle.open .menu-icon { display: none; }
.mobile-nav-toggle.open .close-icon { display: block; }

.mobile-menu {
  display: none;
  background: var(--term-bg);
  border-top: 1px solid var(--term-border);
  padding: var(--space-md);
}
.mobile-menu.open { display: block; }
.mobile-menu-nav { display: flex; flex-direction: column; gap: 0.25rem; }
.mobile-menu-link {
  display: block;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--term-text);
  border: 1px solid transparent;
  transition: all var(--transition-fast);
}
.mobile-menu-link:hover { border-color: var(--term-border); color: var(--term-accent); background: var(--term-panel); }

@media (max-width: 900px) {
  .mobile-nav-toggle { display: inline-flex; }
  .navbar-nav { display: none; }
  .search-trigger { display: none; }
  .navbar-inner { padding: 0 var(--space-md); }

  /* hide GitHub label on mobile docs pages */
  body:not(.home-page) .github-link span { display: none; }
}

.search-btn {
  display: none;
  align-items: center;
  justify-content: center;
}
@media (max-width: 900px) {
  .search-btn { display: inline-flex; }
}

/* Offset anchor-scrolled headings below the fixed navbar so clicking a
   TOC link (or anchor) lands the heading in the visible content area
   rather than hidden under the navbar. */
.docs-content :is(h1, h2, h3, h4, h5, h6)[id],
.docs-content [id] {
  scroll-margin-top: calc(var(--navbar-height) + 1rem);
}

/* ─── Scroll to top — pinned at the sidebar bottom ───────────────────────── */
.scroll-to-top {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-inline: calc(-1 * var(--space-md));
  margin-bottom: calc(-1 * var(--space-md));
  border: 0;
  border-top: 1px dashed var(--term-border);
  background: var(--term-bg);
  color: var(--term-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  cursor: pointer;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity var(--transition-base, 200ms) ease,
    transform var(--transition-base, 200ms) ease,
    color var(--transition-fast, 150ms) ease,
    background var(--transition-fast, 150ms) ease;
}
.scroll-to-top[hidden] { display: none; }
.scroll-to-top.visible { opacity: 1; transform: translateY(0); }
.scroll-to-top svg { width: 13px; height: 13px; }
.scroll-to-top:hover {
  color: var(--term-accent);
  background: var(--term-panel);
}
.scroll-to-top:focus-visible {
  outline: 2px solid var(--term-accent);
  outline-offset: -2px;
}
.scroll-to-top-label {
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────────────
   UTILITIES
   ───────────────────────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: -40px; left: 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--term-accent);
  color: var(--term-accent-fg);
  z-index: 9999;
  font-family: var(--font-mono);
  transition: top var(--transition-fast);
}
.skip-link:focus { top: 0; }

/* Animations */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.animate-fade-in { animation: fadeIn 0.3s ease-out; }
.animate-slide-in { animation: slideIn 0.3s ease-out; }

/* Syntax token fallbacks (inline `.code-block .comment` etc. legacy usage) */
.code-block .comment, .versus-detail-content .comment { color: var(--term-muted); font-style: italic; }
.code-block .keyword, .versus-detail-content .keyword { color: var(--term-magenta); }
.code-block .string, .versus-detail-content .string { color: var(--term-accent); }
.code-block .function, .versus-detail-content .function { color: var(--term-cyan); }
.code-block .type { color: var(--term-amber); }
.code-block .number { color: var(--term-amber); }
.code-block .package { color: var(--term-accent); }

/* Version badge shortcode defaults (ensures phosphor look when used in docs) */
.version-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  background: var(--term-accent-06);
  color: var(--term-accent);
  border: 1px solid var(--term-accent-40);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.version-badge--new { background: var(--term-accent-08); color: var(--term-accent); border-color: var(--term-accent); }
.version-badge--deprecated { background: rgba(255, 180, 84, 0.1); color: var(--term-amber); border-color: rgba(255, 180, 84, 0.4); }
[data-theme="light"] .version-badge--deprecated { background: rgba(169, 104, 18, 0.1); color: var(--term-amber); border-color: rgba(169, 104, 18, 0.5); }

/* ─── Feature card / pillar (keep working in case anything still uses it) ─── */
.pillar-card {
  position: relative;
  padding: var(--space-xl);
  background: var(--term-panel);
  border: 1px solid var(--term-border);
  transition: all var(--transition-fast);
}
.pillar-card:hover { border-color: var(--term-accent-40); }
.pillar-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-md);
  color: var(--term-accent);
}
.pillar-icon svg { width: 24px; height: 24px; }
.pillar-title { font-size: 1.125rem; font-weight: 600; color: var(--term-bright); margin-bottom: 0.5rem; font-family: var(--font-mono); }
.pillar-desc { color: var(--term-text); font-size: 0.9375rem; line-height: 1.6; }

/* ─────────────────────────────────────────────────────────────────────────────
   TOP-OF-ARTICLE TOC
   Shown when the right-sidebar TOC is hidden (≤1200px). Same '#' reference
   layout on both phones and tablets — the hash style is the visual identity
   of this TOC. Heading-level hashes inside the article body are phone-only
   (see the .docs-content :is(h1..h6)::before rule).
   ───────────────────────────────────────────────────────────────────────────── */
.docs-toc-mobile { display: none; }

@media (max-width: 1200px) {
  .docs-toc-mobile {
    display: block;
    margin: 0 0 var(--space-xl);
    padding: var(--space-md) 0;
    font-family: var(--font-mono);
  }
  .docs-toc-mobile nav > ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .docs-toc-mobile ul ul {
    list-style: none;
    padding-left: var(--space-lg);
    margin: 0;
  }
  .docs-toc-mobile li { margin: 0.35rem 0; }
  /* Override the global `.docs-content ul li::before { content: '·' }` so TOC
     entries get only the '#' prefix on the link, not a '·' dot in the gutter. */
  .docs-toc-mobile ul li::before { content: none; }
  .docs-toc-mobile a {
    display: inline-block;
    color: var(--term-text);
    text-decoration: none;
    border-bottom: none;
    font-size: 0.9375rem;
    line-height: 1.5;
    transition: color var(--transition-fast);
  }
  .docs-toc-mobile a::before {
    content: '#';
    color: var(--term-accent);
    font-weight: 700;
    margin-right: 0.5rem;
  }
  .docs-toc-mobile a:hover {
    color: var(--term-accent);
    border-bottom: none;
    text-shadow: none;
  }
}

/* Floating scroll-to-top button for mobile (the desktop one lives inside the
   right sidebar TOC, which is hidden ≤1200px). Toggled by initScrollToTop() in
   main.js — same handler manages both. */
.scroll-to-top-mobile { display: none; }
@media (max-width: 1200px) {
  .scroll-to-top-mobile {
    display: flex;
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 50;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--term-elevated);
    border: 1px solid var(--term-border-strong);
    color: var(--term-text);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    pointer-events: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .scroll-to-top-mobile.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .scroll-to-top-mobile svg { width: 20px; height: 20px; }
  .scroll-to-top-mobile:hover {
    color: var(--term-accent);
    border-color: var(--term-accent);
  }
  .scroll-to-top-mobile:focus-visible {
    outline: 2px solid var(--term-accent);
    outline-offset: 2px;
  }
}