/* ============================================================
   Omniscio — Documentation Site
   Dark-first theme matching Omniscio's Glassmorphism aesthetic
   ============================================================ */

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

:root {
  /* Dark theme (default) — matches Omniscio Glassmorphism */
  --bg-body: #08080e;
  --bg-sidebar: #0e0e16;
  --bg-card: rgba(255, 255, 255, 0.04);
  --bg-card-hover: rgba(255, 255, 255, 0.07);
  --bg-code: rgba(255, 255, 255, 0.06);
  --bg-code-block: #0e0e16;
  --bg-input: rgba(255, 255, 255, 0.06);
  --bg-tooltip: #1a1a28;
  --bg-badge: rgba(129, 140, 248, 0.15);
  --bg-screenshot: rgba(255, 255, 255, 0.03);
  --bg-nav-active: rgba(129, 140, 248, 0.12);
  --bg-nav-hover: rgba(255, 255, 255, 0.04);
  --bg-search-overlay: rgba(0, 0, 0, 0.7);
  --bg-table-header: rgba(255, 255, 255, 0.04);
  --bg-table-row-alt: rgba(255, 255, 255, 0.02);
  --bg-callout-info: rgba(59, 130, 246, 0.08);
  --bg-callout-tip: rgba(34, 197, 94, 0.08);
  --bg-callout-warn: rgba(245, 158, 11, 0.08);
  --bg-callout-danger: rgba(239, 68, 68, 0.08);

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-card: rgba(255, 255, 255, 0.06);
  --border-callout-info: rgba(59, 130, 246, 0.3);
  --border-callout-tip: rgba(34, 197, 94, 0.3);
  --border-callout-warn: rgba(245, 158, 11, 0.3);
  --border-callout-danger: rgba(239, 68, 68, 0.3);

  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --text-inverse: #18181b;
  --text-link: #818cf8;
  --text-link-hover: #a5b4fc;
  --text-code: #c4b5fd;
  --text-callout-info: #60a5fa;
  --text-callout-tip: #4ade80;
  --text-callout-warn: #fbbf24;
  --text-callout-danger: #f87171;

  --accent: #818cf8;
  --accent-rgb: 129, 140, 248;
  --accent-glow: rgba(129, 140, 248, 0.25);
  --accent-dim: rgba(129, 140, 248, 0.6);

  --status-green: #22c55e;
  --status-amber: #f59e0b;
  --status-red: #ef4444;
  --status-blue: #3b82f6;

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px rgba(129, 140, 248, 0.15);

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --sidebar-width: 280px;
  --header-height: 56px;
  --content-max-width: 860px;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;

  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;

  color-scheme: dark;
}

/* ── Light theme ───────────────────────────────────────────── */
[data-theme='light'] {
  --bg-body: #fafafa;
  --bg-sidebar: #ffffff;
  --bg-card: rgba(0, 0, 0, 0.02);
  --bg-card-hover: rgba(0, 0, 0, 0.04);
  --bg-code: rgba(0, 0, 0, 0.05);
  --bg-code-block: #f4f4f5;
  --bg-input: rgba(0, 0, 0, 0.04);
  --bg-tooltip: #27272a;
  --bg-badge: rgba(99, 102, 241, 0.1);
  --bg-screenshot: rgba(0, 0, 0, 0.03);
  --bg-nav-active: rgba(99, 102, 241, 0.08);
  --bg-nav-hover: rgba(0, 0, 0, 0.03);
  --bg-search-overlay: rgba(0, 0, 0, 0.4);
  --bg-table-header: rgba(0, 0, 0, 0.03);
  --bg-table-row-alt: rgba(0, 0, 0, 0.015);
  --bg-callout-info: rgba(59, 130, 246, 0.06);
  --bg-callout-tip: rgba(34, 197, 94, 0.06);
  --bg-callout-warn: rgba(245, 158, 11, 0.06);
  --bg-callout-danger: rgba(239, 68, 68, 0.06);

  --border: rgba(0, 0, 0, 0.1);
  --border-strong: rgba(0, 0, 0, 0.18);
  --border-card: rgba(0, 0, 0, 0.08);

  --text-primary: #18181b;
  --text-secondary: #52525b;
  --text-muted: #71717a;
  --text-inverse: #f4f4f5;
  --text-link: #6366f1;
  --text-link-hover: #4f46e5;
  --text-code: #7c3aed;

  --accent: #6366f1;
  --accent-rgb: 99, 102, 241;
  --accent-glow: rgba(99, 102, 241, 0.15);
  --accent-dim: rgba(99, 102, 241, 0.5);

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.1);

  color-scheme: light;
}

/* ── Typography ────────────────────────────────────────────── */
html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 24px);
}

body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--bg-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.3;
  font-weight: 600;
  color: var(--text-primary);
  scroll-margin-top: calc(var(--header-height) + 24px);
}

h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  letter-spacing: -0.025em;
}
h2 {
  font-size: 1.5rem;
  margin: 2.5rem 0 1rem;
  letter-spacing: -0.02em;
}
h3 {
  font-size: 1.2rem;
  margin: 2rem 0 0.75rem;
  letter-spacing: -0.01em;
}
h4 {
  font-size: 1.05rem;
  margin: 1.5rem 0 0.5rem;
}

p {
  margin-bottom: 1rem;
  color: var(--text-secondary);
}
p + p {
  margin-top: 0;
}

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

strong {
  color: var(--text-primary);
  font-weight: 600;
}
em {
  color: var(--text-secondary);
}

ul,
ol {
  margin: 0 0 1rem 1.5rem;
  color: var(--text-secondary);
}
li {
  margin-bottom: 0.35rem;
}
li::marker {
  color: var(--text-muted);
}

/* ── Layout ────────────────────────────────────────────────── */
.layout {
  display: flex;
  min-height: 100vh;
}

/* ── Header ────────────────────────────────────────────────── */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  z-index: 100;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-primary);
  width: var(--sidebar-width);
  flex-shrink: 0;
}

.header-logo-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: block;
  object-fit: contain;
}

.header-logo .wordmark {
  font-family:
    'Satoshi',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.header-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-link {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  transition:
    color 0.15s,
    border-color 0.15s;
}
.header-link:hover {
  color: var(--text-link);
  border-color: var(--text-link);
}

/* ── Search ────────────────────────────────────────────────── */
.search-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  min-width: 240px;
}

.search-trigger:hover {
  border-color: var(--border-strong);
  background: var(--bg-card-hover);
}

.search-trigger kbd {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-card);
  color: var(--text-muted);
  margin-left: auto;
}

.search-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-search-overlay);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
}

.search-overlay.active {
  display: flex;
}

.search-modal {
  width: 90%;
  max-width: 600px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dropdown);
  overflow: hidden;
}

.search-input-wrap {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  gap: 10px;
}

.search-input-wrap svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: 1rem;
  color: var(--text-primary);
  font-family: var(--font-sans);
}

.search-input::placeholder {
  color: var(--text-muted);
}

.search-results {
  max-height: 400px;
  overflow-y: auto;
  padding: 8px;
}

.search-result-item {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.search-result-item:hover,
.search-result-item.active {
  background: var(--bg-nav-hover);
}

.search-result-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
}

.search-result-section {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.search-result-highlight {
  background: rgba(var(--accent-rgb), 0.25);
  color: var(--accent);
  border-radius: 2px;
  padding: 0 2px;
}

.search-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ── Sidebar ───────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  top: var(--header-height);
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 16px 0;
  z-index: 50;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
  transition: transform var(--transition-normal);
}

.sidebar::-webkit-scrollbar {
  width: 4px;
}
.sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 2px;
}

.nav-section {
  padding: 0 12px;
  margin-bottom: 4px;
}

.nav-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 8px 12px 6px;
  user-select: none;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
}

.nav-link:hover {
  background: var(--bg-nav-hover);
  color: var(--text-primary);
}

.nav-link.active {
  background: var(--bg-nav-active);
  color: var(--accent);
  font-weight: 500;
}

.nav-link svg,
.nav-link .nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.6;
}

.nav-link.active svg,
.nav-link.active .nav-icon {
  opacity: 1;
}

.nav-children {
  padding-left: 16px;
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--transition-normal);
}

.nav-children.expanded {
  max-height: 2000px;
}

.nav-toggle {
  margin-left: auto;
  transition: transform var(--transition-fast);
  opacity: 0.4;
}

.nav-link.expanded .nav-toggle {
  transform: rotate(90deg);
}

/* ── Main Content ──────────────────────────────────────────── */
.main {
  flex: 1;
  margin-left: var(--sidebar-width);
  margin-top: var(--header-height);
  min-height: calc(100vh - var(--header-height));
}

.content {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 40px 40px 80px;
}

.section {
  display: none;
  animation: fadeIn var(--transition-normal);
}

.section.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Section Header ────────────────────────────────────────── */
.section-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.section-header h1 {
  margin-bottom: 0.5rem;
}

.section-header .breadcrumb {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.section-header .breadcrumb a {
  color: var(--text-muted);
}
.section-header .breadcrumb a:hover {
  color: var(--text-link);
}
.section-header .breadcrumb .sep {
  margin: 0 6px;
}

.section-subtitle {
  font-size: 1.05rem;
  color: var(--text-secondary);
  margin: 0;
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
  transition: all var(--transition-fast);
}

.card:hover {
  background: var(--bg-card-hover);
}
.card h3 {
  margin-top: 0;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  margin: 1.5rem 0;
}

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: all var(--transition-fast);
}

.feature-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

.feature-card-icon {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.feature-card h4 {
  margin: 0 0 6px;
  font-size: 0.95rem;
}

.feature-card p {
  font-size: 0.85rem;
  margin: 0;
  color: var(--text-muted);
}

/* ── Screenshot Placeholders ───────────────────────────────── */
.screenshot {
  position: relative;
  background: var(--bg-screenshot);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 0;
  margin: 1.5rem 0;
  overflow: hidden;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.screenshot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}

/* ── Real screenshots ──────────────────────────────────────
   A `figure.screenshot.has-img` holds a captured image (optionally wrapped
   in a plain anchor to the file for full size) plus an optional figcaption.
   Reuses the site's card language: card border + shadow + radius tokens.
   The dashed border, 200px floor, and flex centering above are placeholder
   affordances only. */
.screenshot.has-img {
  display: block;
  min-height: 0;
  border: 1px solid var(--border-card);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

.screenshot.has-img a {
  display: block;
  line-height: 0;
}

.screenshot.has-img img {
  max-width: 100%;
  border-radius: 0; /* the wrapper rounds and clips */
}

.screenshot.has-img figcaption {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-muted);
  padding: 10px 14px;
  border-top: 1px solid var(--border-card);
}

.screenshot-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 20px;
  color: var(--text-muted);
}

.screenshot-number {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--accent);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.screenshot-caption {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 8px;
  font-style: italic;
}

/* F011 — hide the empty screenshot placeholders (and their captions) until real
   images exist, so the docs don't advertise images that never load. A captured
   screenshot is `figure.screenshot.has-img` (holds an <img>) and is unaffected;
   a placeholder is a plain `.screenshot` with a `.screenshot-placeholder` inside. */
.screenshot:not(.has-img),
.screenshot:not(.has-img) + .screenshot-caption {
  display: none;
}

/* ── Code ──────────────────────────────────────────────────── */
code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--bg-code);
  color: var(--text-code);
  padding: 2px 6px;
  border-radius: 4px;
}

pre {
  background: var(--bg-code-block);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin: 1rem 0 1.5rem;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.6;
}

pre code {
  background: none;
  padding: 0;
  color: var(--text-primary);
}

/* ── Tables ────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  margin: 1rem 0 1.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

th {
  background: var(--bg-table-header);
  font-weight: 600;
  text-align: left;
  padding: 10px 14px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  vertical-align: top;
}

tr:last-child td {
  border-bottom: none;
}
tr:nth-child(even) td {
  background: var(--bg-table-row-alt);
}

/* ── Callouts / Admonitions ────────────────────────────────── */
.callout {
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin: 1rem 0 1.5rem;
  border-left: 3px solid;
  font-size: 0.9rem;
}

.callout-title {
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.callout p {
  margin: 0;
  font-size: 0.88rem;
}

.callout-info {
  background: var(--bg-callout-info);
  border-color: var(--border-callout-info);
}
.callout-info .callout-title {
  color: var(--text-callout-info);
}

.callout-tip {
  background: var(--bg-callout-tip);
  border-color: var(--border-callout-tip);
}
.callout-tip .callout-title {
  color: var(--text-callout-tip);
}

.callout-warn {
  background: var(--bg-callout-warn);
  border-color: var(--border-callout-warn);
}
.callout-warn .callout-title {
  color: var(--text-callout-warn);
}

.callout-danger {
  background: var(--bg-callout-danger);
  border-color: var(--border-callout-danger);
}
.callout-danger .callout-title {
  color: var(--text-callout-danger);
}

/* ── Badges ────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 9999px;
  background: var(--bg-badge);
  color: var(--accent);
  letter-spacing: 0.02em;
}

.badge-green {
  background: rgba(34, 197, 94, 0.12);
  color: var(--status-green);
}
.badge-amber {
  background: rgba(245, 158, 11, 0.12);
  color: var(--status-amber);
}
.badge-red {
  background: rgba(239, 68, 68, 0.12);
  color: var(--status-red);
}
.badge-blue {
  background: rgba(59, 130, 246, 0.12);
  color: var(--status-blue);
}

/* ── Steps / Numbered Instructions ─────────────────────────── */
.steps {
  counter-reset: step-counter;
  list-style: none;
  margin: 1rem 0 1.5rem;
  padding: 0;
}

.steps li {
  counter-increment: step-counter;
  position: relative;
  padding: 12px 0 12px 48px;
  margin-bottom: 4px;
  color: var(--text-secondary);
}

.steps li::before {
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: 12px;
  width: 30px;
  height: 30px;
  background: var(--bg-badge);
  color: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
}

/* ── Keyboard Shortcut Display ─────────────────────────────── */
kbd {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  padding: 2px 7px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--bg-card);
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ── Theme Toggle ──────────────────────────────────────────── */
.theme-toggle {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px 8px;
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.theme-toggle:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

/* ── Mobile Menu Toggle ────────────────────────────────────── */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
}

.menu-toggle svg {
  width: 22px;
  height: 22px;
}

/* ── Back to Top ───────────────────────────────────────────── */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-glow);
  z-index: 90;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  transform: translateY(-2px);
}
.back-to-top svg {
  width: 20px;
  height: 20px;
}

/* ── Version Badge ─────────────────────────────────────────── */
.version-badge {
  font-size: 0.7rem;
  color: var(--text-muted);
  background: var(--bg-card);
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1px solid var(--border);
  margin-left: 8px;
}

/* ── Status Dots ───────────────────────────────────────────── */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

.status-dot.green {
  background: var(--status-green);
}
.status-dot.amber {
  background: var(--status-amber);
}
.status-dot.red {
  background: var(--status-red);
}
.status-dot.blue {
  background: var(--status-blue);
}
.status-dot.gray {
  background: var(--text-muted);
}

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

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .content {
    padding: 32px 24px 60px;
  }
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    z-index: 80;
    box-shadow: var(--shadow-dropdown);
  }

  .sidebar.mobile-open {
    transform: translateX(0);
  }

  .main {
    margin-left: 0;
  }

  .menu-toggle {
    display: block;
  }

  .header-logo {
    width: auto;
    font-size: 1rem;
  }

  .search-trigger {
    min-width: 0;
    padding: 6px 10px;
  }

  .search-trigger span {
    display: none;
  }

  .content {
    padding: 24px 16px 60px;
  }

  h1 {
    font-size: 1.6rem;
  }
  h2 {
    font-size: 1.3rem;
  }

  .card-grid {
    grid-template-columns: 1fr;
  }

  .mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 75;
    display: none;
  }

  .mobile-overlay.active {
    display: block;
  }
}

/* ── Print ─────────────────────────────────────────────────── */
@media print {
  .sidebar,
  .header,
  .back-to-top,
  .search-overlay,
  .theme-toggle,
  .menu-toggle {
    display: none !important;
  }
  .main {
    margin-left: 0;
  }
  .content {
    max-width: 100%;
    padding: 0;
  }
  .section {
    display: block !important;
    page-break-inside: avoid;
  }
  body {
    background: white;
    color: black;
  }
}

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

/* ── Welcome / Hero section ────────────────────────────────── */
.hero {
  text-align: center;
  padding: 48px 0;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  background: linear-gradient(135deg, var(--text-primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero .section-subtitle {
  font-size: 1.15rem;
  max-width: 600px;
  margin: 0 auto 2rem;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: var(--accent);
  color: white;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.95rem;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.hero-cta:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow);
  color: white;
}

/* ── Accordion / Collapsible ───────────────────────────────── */
.accordion {
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  margin: 1rem 0;
  overflow: hidden;
}

.accordion-trigger {
  width: 100%;
  background: var(--bg-card);
  border: none;
  padding: 12px 16px;
  text-align: left;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background var(--transition-fast);
  font-family: var(--font-sans);
}

.accordion-trigger:hover {
  background: var(--bg-card-hover);
}

.accordion-trigger svg {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

.accordion-trigger.open svg {
  transform: rotate(180deg);
}

.accordion-content {
  display: none;
  padding: 0 16px 16px;
  color: var(--text-secondary);
  font-size: 0.88rem;
}

.accordion-content.open {
  display: block;
}

/* ── Changelog ─────────────────────────────────────────────── */
.changelog-entry {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}

.changelog-entry:last-child {
  border-bottom: none;
}

.changelog-version {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.changelog-version h3 {
  margin: 0;
}

.changelog-date {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.changelog-tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.changelog-tag.feat {
  background: rgba(34, 197, 94, 0.12);
  color: var(--status-green);
}
.changelog-tag.fix {
  background: rgba(59, 130, 246, 0.12);
  color: var(--status-blue);
}
.changelog-tag.improve {
  background: rgba(129, 140, 248, 0.12);
  color: var(--accent);
}
.changelog-tag.breaking {
  background: rgba(239, 68, 68, 0.12);
  color: var(--status-red);
}

/* ── TOC (Table of Contents per page) ──────────────────────── */
.page-toc {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 2rem;
}

.page-toc-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.page-toc a {
  display: block;
  padding: 3px 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.page-toc a:hover {
  color: var(--accent);
}

/* ============================================================
   PAGE NAVIGATION (previous / next)
   ~390 sections were reachable only through the sidebar, so there was no way
   to read straight through the docs. These two links sit at the bottom of
   every page and are filled from the sidebar's own order by app.js.
   ============================================================ */

.page-nav {
  display: flex;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

/* Keeps a lone Next link hard-right and a lone Previous link hard-left,
   without needing a placeholder element for the missing side. */
.page-nav-prev {
  margin-right: auto;
}

.page-nav-next {
  margin-left: auto;
  text-align: right;
}

.page-nav-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 48%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  color: var(--text-secondary);
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.page-nav-link:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.page-nav-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.page-nav-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--text-muted);
}

.page-nav-link:hover svg {
  color: var(--accent);
}

.page-nav-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.page-nav-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* A long section title must ellipsize rather than wrap the card to three
   lines or push the two links into each other. */
.page-nav-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Stack on narrow screens: two 48% cards side by side leaves no room for a
   real title, and full-width rows read better on a phone. */
@media (max-width: 640px) {
  .page-nav {
    flex-direction: column;
  }

  .page-nav-link {
    max-width: 100%;
  }

  .page-nav-prev,
  .page-nav-next {
    margin: 0;
  }

  .page-nav-next {
    /* Keep the glyph trailing the label on its own row. */
    justify-content: flex-end;
  }

  /* Header links must stay REACHABLE on a phone. The header is a single non-wrapping flex row, so
     below ~640px its content outgrows the viewport and the tail is clipped with no way to scroll to
     it — measured at 390px the row wanted 651px in 370px of space, putting "Download" (and the
     support link) entirely off-screen. Nothing here is new-feature styling; it drops the four items
     that carry the least weight on a phone so the ACTIONS survive:
       · the "Ctrl+K" hint  — there is no Ctrl key on a phone
       · the version badge  — informational, not navigation
       · the wordmark       — the logo icon still carries the brand beside it
       · the LLM Library    — hidden HERE only because it has a second home (see below)
     That frees ~294px, which is what lets "Download" and "Questions?" both fit.

     The LLM Library link is the one of the four that is still NAVIGATION, so hiding it here must
     not be what makes the library unreachable. It does not: index.html carries the same link in
     the sidebar's Reference group, and the sidebar is reachable on a phone through the menu
     toggle. Dropping the header copy is a layout trade, never a lost destination. (The library's
     own /llm-library/ index is a responsive HTML page built for exactly this — the raw .md files
     beside it are the machine surface, and they are not what this link opens.) */
  .header-logo .wordmark,
  .header-logo .version-badge,
  .search-trigger kbd {
    display: none;
  }

  .header-actions .header-link[href^='/llm-library'] {
    display: none;
  }
}