:root {
    --navy: #0A1628;
    --navy-light: #132038;
    --blue: #2563EB;
    --blue-light: #3B82F6;
    --cyan: #06B6D4;
    --slate: #94A3B8;
    --slate-light: #CBD5E1;
    --white: #F8FAFC;
    --bg: #0F172A;
    --card: #1E293B;
    --card-hover: #263548;
    --border: #334155;
    --success: #22C55E;
    --warning: #F59E0B;
    --danger: #EF4444;
    --purple: #8B5CF6;
    --topbar-bg: rgba(15, 23, 42, 0.92);
    --step-line: rgba(148, 163, 184, 0.15); /* faint step connector */
    --font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
    --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  }

  /* Light theme: remap the semantic tokens. Names stay (e.g. --white is the
     "primary text" token, --navy the "code/table surface" token) — only the
     values flip, so no rule below needs to change. */
  :root[data-theme="light"] {
    --bg: #FFFFFF;
    --card: #F1F5F9;
    --card-hover: #E2E8F0;
    --border: #E2E8F0;
    --navy: #F1F5F9;        /* light surface for code / pre / table head */
    --white: #0F172A;       /* primary text + headings */
    --slate-light: #334155; /* body text */
    --slate: #64748B;       /* muted text */
    --cyan: #0891B2;        /* readable accent on light backgrounds */
    --topbar-bg: rgba(255, 255, 255, 0.85);
    --step-line: rgba(71, 85, 105, 0.18);
  }

  /* Prose links (inside content sections) default to the browser's link
     color, which reads too dark against the dark theme's navy background. */
  :root[data-theme="dark"] section a { color: var(--blue-light); }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  /* Type system anchored to a 16px root; all font sizes below are rem. */
  html { font-size: 16px; scroll-behavior: smooth; }

  body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--slate-light);
    line-height: 1.5rem; /* 24px on the 4px baseline; 16px text */
    font-size: 1rem;
  }

  /* Custom elements are display:inline by default — make the block-level ones
     behave as blocks so their box model (borders, padding, margins) applies,
     e.g. the hero's bottom separator. Class flex rules (.top-bar, .callout,
     .step) still win via higher specificity. */
  site-topbar, site-nav, page-hero, step-list, step-item, info-card,
  call-out, accordion-item { display: block; }

  /* --- TOP NAV --- */
  .top-bar {
    position: fixed; top: 0; left: 0; right: 0;
    height: 56px;
    background: var(--topbar-bg);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px; /* logo aligns with the 24px sidebar inset */
    z-index: 100;
  }
  .top-bar .logo {
    font-weight: 700; font-size: 0.875rem; letter-spacing: 2px;
    color: var(--white); text-transform: uppercase;
  }
  .top-bar .logo span { color: var(--blue); }
  .top-bar .logo sup { font-size: 0.5rem; letter-spacing: 0; }
  .top-bar .meta { font-size: 0.75rem; color: var(--slate); }
  .top-bar .topbar-right { display: flex; align-items: center; gap: 16px; }

  /* Light/dark toggle */
  .theme-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0;
    background: transparent;
    border: 1px solid var(--border); border-radius: 8px;
    color: var(--slate); cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
  }
  .theme-toggle:hover { color: var(--white); border-color: var(--blue); }
  /* Exactly one icon shows: the mode you'll switch TO. Default = dark → sun. */
  .theme-icon--moon { display: none; }
  .theme-icon--sun { display: block; }
  :root[data-theme="light"] .theme-icon--sun { display: none; }
  :root[data-theme="light"] .theme-icon--moon { display: block; }

  /* Hamburger (mobile only — shown in the <=900px media query below). */
  .nav-toggle {
    display: none;
    align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; margin-right: 4px;
    background: transparent;
    border: 1px solid var(--border); border-radius: 8px;
    color: var(--slate); cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
  }
  .nav-toggle:hover { color: var(--white); border-color: var(--blue); }
  /* Menu icon by default; X while the drawer is open. */
  .nav-icon--close { display: none; }
  :root.nav-open .nav-icon--menu { display: none; }
  :root.nav-open .nav-icon--close { display: block; }

  /* Backdrop element exists on all pages but is inert until <=900px + open. */
  .nav-backdrop { display: none; }

  /* --- SIDEBAR --- */
  .sidebar {
    position: fixed; top: 56px; left: 0; bottom: 0;
    width: 280px;
    background: var(--bg);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding: 24px 0;
    z-index: 90;
  }
  .sidebar::-webkit-scrollbar { width: 4px; }
  .sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

  .sidebar .nav-group { margin-bottom: 24px; }
  /* Titles and links share a 24px left inset. The active/hover accent is an
     inset box-shadow so it never shifts the text off that 24px line. */
  .sidebar .nav-group-title {
    font-size: 0.625rem; font-weight: 700; letter-spacing: 2px;
    line-height: 1rem; /* 16px */
    text-transform: uppercase; color: var(--slate);
    padding: 0 24px; margin-bottom: 8px;
  }
  .sidebar a {
    display: block;
    padding: 8px 24px; /* 8+8 + 24 line = 40px row */
    color: var(--slate-light);
    text-decoration: none;
    font-size: 0.9375rem;
    line-height: 1.5rem; /* 24px */
    transition: all 0.15s;
  }
  .sidebar a:hover, .sidebar a.active {
    color: var(--white);
    background: rgba(37, 99, 235, 0.08);
    box-shadow: inset 3px 0 0 var(--blue);
  }
  /* Not-yet-built pages: visible in the IA, but not clickable. */
  .sidebar .nav-soon {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 24px; /* 40px row */
    color: var(--slate);
    font-size: 0.9375rem;
    line-height: 1.5rem; /* 24px */
    opacity: 0.6;
    cursor: default;
  }
  .sidebar .badge {
    display: inline-block;
    font-size: 0.5625rem; font-weight: 700;
    padding: 2px 6px; border-radius: 4px;
    margin-left: 6px; vertical-align: middle;
  }
  .badge-new { background: var(--success); color: var(--navy); }
  .badge-adv { background: var(--purple); color: white; }
  .badge-core { background: var(--blue); color: white; }
  .badge-soon { background: var(--border); color: var(--slate-light); }

  /* --- PAGE TOC (right rail) --- */
  /* Hidden until there's room; the min-width block below turns it on and
     reserves its column on .main so content reflows instead of overlapping. */
  page-toc { display: none; }

  page-toc .toc-title {
    font-size: 0.625rem; font-weight: 700; letter-spacing: 2px;
    line-height: 1rem; /* 16px */
    text-transform: uppercase; color: var(--slate);
    margin-bottom: 8px; padding-left: 16px;
  }
  .main page-toc nav ul { list-style: none; margin: 0; padding: 0; }
  .main page-toc nav li { margin: 0; }
  page-toc a {
    display: block;
    padding: 4px 16px; /* 4+4 + 24 line = 32px row */
    line-height: 1.5rem; /* 24px */
    font-size: 0.8125rem; /* 13px */
    color: var(--slate);
    text-decoration: none;
    border-left: 2px solid var(--border);
    transition: all 0.15s;
  }
  page-toc a:hover { color: var(--white); }
  page-toc a.active-trail { color: var(--slate-light); }
  page-toc a.active {
    color: var(--blue-light);
    border-left-color: var(--blue);
  }
  /* Nested H3 links: deeper indent, a touch smaller. */
  page-toc nav ul ul a { padding-left: 32px; font-size: 0.75rem; /* 12px */ }

  /* Fixed-header offset so a plain jump / refresh-with-hash clears the top bar. */
  .main section[id], .main h3[id] { scroll-margin-top: 72px; }

  /* Show the TOC and reserve its column only when there's room (>= 1280px).
     .main gets margin-right so content reflows (960 → ~728 at 1280) instead of
     sitting under the fixed rail. Above ~1512px content hits its 960 cap and the
     right gap simply grows. */
  @media (min-width: 1280px) {
    page-toc.toc {
      display: block;
      position: fixed;
      top: 88px; /* 56px top-bar + 32px */
      right: 24px;
      width: 224px;
      max-height: calc(100vh - 112px);
      overflow-y: auto;
      z-index: 90; /* below the 100 top-bar */
    }
    /* Reserve the right column only on pages where a TOC actually built
       (<page-toc> is a direct child of .main and gets .toc on a successful build). */
    .main:has(> page-toc.toc) { margin-right: 272px; /* 224 TOC + 24 gap + 24 edge */ }
  }

  /* --- MAIN CONTENT --- */
  .main {
    margin-left: 280px;
    margin-top: 56px;
    padding: 48px 64px 120px;
    max-width: 960px;
  }

  /* --- HERO --- */
  .hero {
    margin-bottom: 0;
    padding-bottom: 16px;
  }
  .hero .kicker {
    font-size: 0.6875rem; font-weight: 700; letter-spacing: 3px;
    line-height: 1rem; /* 16px */
    text-transform: uppercase; color: var(--blue);
    margin-bottom: 12px;
  }
  .hero h1 {
    font-size: 2.625rem; font-weight: 800; color: var(--white);
    line-height: 3rem; /* 48px */ margin-bottom: 16px;
  }
  .hero .subtitle {
    font-size: 1.5rem; color: var(--slate); max-width: 600px;
    line-height: 2rem; /* 32px */
  }

  /* --- SECTIONS --- */
  section { margin-bottom: 56px; }
  section h2 {
    font-size: 1.75rem; font-weight: 700; color: var(--white);
    line-height: 2rem; /* 32px */
    margin-bottom: 8px; padding-top: 20px;
  }
  section h3 {
    font-size: 1.25rem; font-weight: 600; color: var(--white);
    line-height: 1.5rem; /* 24px */
    margin-top: 32px; margin-bottom: 8px;
  }
  section h4 {
    font-size: 1rem; font-weight: 600; color: var(--slate-light);
    line-height: 1.5rem; /* 24px */
    margin-top: 24px; margin-bottom: 8px;
  }
  p { margin-bottom: 16px; }

  /* Content lists: the global `* { padding: 0 }` reset drops the marker
     indent, so outside-positioned bullets/numbers land in negative space.
     Restore an indent (24px, on the 8px grid) and baseline rhythm. */
  .main ul, .main ol { padding-left: 24px; margin-top: 8px; margin-bottom: 16px; }
  .main li { margin-bottom: 8px; line-height: 1.5rem; /* 24px */ }
  .main li:last-child { margin-bottom: 0; }

  /* --- CODE BLOCKS --- */
  pre {
    background: var(--navy);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px 24px;
    overflow-x: auto;
    margin: 16px 0 24px;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.25rem; /* 20px */
    color: var(--slate-light);
    position: relative;
  }
  pre .comment { color: #6B7280; }
  pre .keyword { color: var(--purple); }
  pre .string { color: var(--success); }
  pre .cmd { color: var(--cyan); }
  pre .flag { color: var(--warning); }
  pre .label {
    position: absolute; top: 8px; right: 12px;
    font-size: 0.625rem; font-weight: 700; letter-spacing: 1px;
    color: var(--slate); text-transform: uppercase;
  }

  code {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    background: var(--navy);
    padding: 2px 7px;
    border-radius: 4px;
    color: var(--cyan);
    border: 1px solid var(--border);
  }

  /* --- CARDS --- */
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin: 20px 0 28px;
  }
  .card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px 24px;
    transition: all 0.2s;
  }
  .card:hover { background: var(--card-hover); border-color: var(--blue); }
  .card .card-icon { font-size: 1.5rem; line-height: 2rem; margin-bottom: 8px; }
  .card .card-title {
    font-size: 0.9375rem; font-weight: 700; color: var(--white);
    line-height: 1.5rem; /* 24px */
    margin-bottom: 8px;
  }
  .card .card-desc { font-size: 0.8125rem; color: var(--slate); line-height: 1.25rem; /* 20px */ }

  /* --- TABLES --- */
  table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0 28px;
    font-size: 0.8125rem;
    line-height: 1.25rem; /* 20px */
  }
  th, td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
  }
  th {
    font-size: 0.625rem; font-weight: 700; letter-spacing: 1.5px;
    line-height: 1rem; /* 16px */
    text-transform: uppercase; color: var(--slate);
    background: var(--navy);
  }
  td { color: var(--slate-light); }
  tr:hover td { background: rgba(37, 99, 235, 0.04); }

  /* --- CALLOUTS --- */
  .callout {
    border-radius: 8px;
    padding: 16px 20px;
    margin: 20px 0;
    font-size: 0.875rem;
    line-height: 1.25rem; /* 20px */
    display: flex; gap: 12px; align-items: flex-start;
  }
  .callout-icon { font-size: 1.125rem; line-height: 1.25rem; flex-shrink: 0; }
  .callout-info { background: rgba(37, 99, 235, 0.1); border-left: 3px solid var(--blue); }
  .callout-warn { background: rgba(245, 158, 11, 0.1); border-left: 3px solid var(--warning); }
  .callout-tip { background: rgba(34, 197, 94, 0.1); border-left: 3px solid var(--success); }
  .callout-danger { background: rgba(239, 68, 68, 0.1); border-left: 3px solid var(--danger); }

  /* --- FLOW DIAGRAM --- */
  .flow {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap; margin: 20px 0 28px;
  }
  .flow-step {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 16px; /* 8+8 + 16 line = 32px tall */
    font-size: 0.8125rem; font-weight: 600;
    line-height: 1rem; /* 16px */
    color: var(--white);
  }
  .flow-arrow { color: var(--blue); font-size: 1.125rem; line-height: 1rem; }

  /* --- ACCORDION --- */
  details {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin: 12px 0;
    overflow: hidden;
  }
  summary {
    padding: 12px 20px; /* 12+12 + 20 line = 44px */
    cursor: pointer;
    font-weight: 600;
    color: var(--white);
    font-size: 0.875rem;
    line-height: 1.25rem; /* 20px */
    list-style: none;
    display: flex; align-items: center; gap: 8px;
  }
  summary::-webkit-details-marker { display: none; }
  summary::before {
    content: '\25B6'; font-size: 0.625rem; color: var(--blue);
    transition: transform 0.2s;
  }
  details[open] summary::before { transform: rotate(90deg); }
  details .content { padding: 0 20px 16px; font-size: 0.875rem; line-height: 1.25rem; /* 20px */ }

  /* --- STEP LIST --- */
  .steps { counter-reset: step; margin: 16px 0 28px; }
  .step {
    display: flex; gap: 16px; margin-bottom: 20px;
    padding-left: 4px;
    position: relative;
  }
  /* Timeline connector: runs from this marker's center to the next marker's
     center. Markers sit above it (z-index) so it only shows in the gaps.
     Opt a group out with <step-list unlinked>. */
  .step:not(:last-child)::before {
    content: ""; position: absolute;
    left: 13px; /* aligns to the 20px marker's center */
    top: 12px; bottom: -32px; /* this center → next center (20px gap + slot) */
    width: 1px; background: var(--step-line);
  }
  .steps--unlinked .step::before { display: none; }
  .step-num {
    counter-increment: step;
    position: relative; z-index: 1;
    width: 20px; height: 20px; flex-shrink: 0;
    margin: 2px 0; /* 20px marker + 2+2 = 24px slot, on the baseline grid */
    background: var(--blue);
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.625rem; line-height: 1rem; font-weight: 700; color: white;
  }
  .step-num::after { content: counter(step); }
  .step-body { flex: 1; }
  .step-title { font-weight: 400; color: var(--white); line-height: 1.5rem; /* 24px */ margin-bottom: 4px; }
  .step-desc { font-size: 0.875rem; color: var(--slate); line-height: 1.25rem; /* 20px */ margin: 2px 0; /* 2 + 20 line + 2 = 24px */ }
  /* Content nested inside a step (e.g. a field table) aligns with the step
     text; drop its trailing margin so the step's own spacing governs the gap. */
  .step-desc > table:last-child { margin-bottom: 0; }

  /* --- COMPARISON TABLE --- */
  .compare-highlight { color: var(--success); font-weight: 600; }
  .compare-caution { color: var(--warning); font-weight: 600; }

  /* --- RESPONSIVE --- */
  @media (max-width: 900px) {
    :root { --drawer-w: min(280px, 85vw); }
    .nav-toggle { display: flex; }

    /* Sidebar becomes a left slide-in drawer. */
    .sidebar {
      width: var(--drawer-w);
      transform: translateX(-100%);
      transition: transform 0.25s ease;
      z-index: 95;
    }
    :root.nav-open .sidebar { transform: translateX(0); }

    /* Push the content aside (not overlay), moving in step with the drawer. */
    .main {
      margin-left: 0; padding: 32px 24px 80px;
      transition: transform 0.25s ease;
    }
    :root.nav-open .main { transform: translateX(var(--drawer-w)); }

    /* Dimming backdrop over the pushed-aside content; tap to close. */
    .nav-backdrop {
      display: block;
      position: fixed; top: 56px; left: 0; right: 0; bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      opacity: 0; pointer-events: none;
      transition: opacity 0.25s ease;
      z-index: 90;
    }
    :root.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }

    /* Clip the transient overflow while .main translates during the drawer
       open/close transition, so no horizontal scrollbar flashes. Also reserve
       the scrollbar gutter so locking scroll on open (overflow:hidden below)
       doesn't reflow the fixed topbar — without this the topbar widens by the
       scrollbar width when the vertical scrollbar disappears. */
    body { overflow-x: hidden; scrollbar-gutter: stable; }

    /* Lock background scroll while the drawer is open. */
    :root.nav-open body { overflow: hidden; }

    .hero h1 { font-size: 1.75rem; line-height: 2rem; /* 28px text, 32px line */ }
    .card-grid { grid-template-columns: 1fr; }
  }

  /* --- PRINT --- */
  @media print {
    .sidebar, .top-bar, page-toc { display: none; }
    .main { margin: 0; padding: 20px; }
    body { background: white; color: #1a1a1a; }
    pre { background: #f5f5f5; border-color: #ddd; color: #333; }
    .card { border-color: #ddd; background: #fafafa; }
  }

  /* Smooth section reveal */
  section { animation: fadeUp 0.4s ease-out; }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }