/* thereisnospoon.org/docs/ -- documentation shell.
   Loaded AFTER static/site.css and consumes its custom properties: the docs and
   the landing page share one design system, one font set, and one theme choice
   (localStorage "theme"). Nothing here redefines a base token; the only new
   variables are the --syn-* syntax colors, which have no landing-page
   equivalent. Self-contained: no CDNs, no trackers. */

/* ==========================================================================
   SYNTAX TOKENS -- consumed by the chroma classes at the bottom
   ========================================================================== */
:root {
  --syn-comment: #6f7480;
  --syn-keyword: #7d3cc4;
  --syn-string:  #0e6a44;
  --syn-number:  #b0431a;
  --syn-func:    #2c3ec6;
  --syn-type:    #0a6a86;
  --syn-name:    var(--ink);
  --syn-punct:   var(--muted);
}
[data-theme="dark"] {
  --syn-comment: #6d7383;
  --syn-keyword: #c4a2ff;
  --syn-string:  #7fd6a4;
  --syn-number:  #ffa285;
  --syn-func:    #93a0ff;
  --syn-type:    #6fd3e8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --syn-comment: #6d7383;
    --syn-keyword: #c4a2ff;
    --syn-string:  #7fd6a4;
    --syn-number:  #ffa285;
    --syn-func:    #93a0ff;
    --syn-type:    #6fd3e8;
  }
}

/* docs-only layout metrics */
:root {
  --sidebar-w: 250px;
  --toc-w:     200px;
  --head-h:    56px;
}

/* ==========================================================================
   SHELL
   ========================================================================== */
body.docs {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  margin: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--brand);
  color: var(--brand-ink);
  padding: 10px 16px;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

.docs-head {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--head-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.docs-head .wordmark { flex: none; }
.docs-badge {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  text-decoration: none;
}
.docs-badge:hover { border-color: var(--brand); }

.docs-head-nav {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.nav-toggle {
  display: none;
  flex: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  padding: 6px;
  cursor: pointer;
}
.nav-toggle svg { width: 18px; height: 18px; display: block; }

.docs-shell {
  display: grid;
  /* minmax(0, 1fr) on the middle column: a bare 1fr floors at min-content, and a
     single nowrap line (a long command in a code block) then blows out the whole
     page instead of scrolling inside its own container. */
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
  gap: 0 40px;
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 20px;
  align-items: start;
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */
.docs-sidebar {
  position: sticky;
  top: var(--head-h);
  max-height: calc(100vh - var(--head-h));
  overflow-y: auto;
  padding: 28px 0 60px;
  font-size: 14px;
}
.nav-group { margin-bottom: 22px; }
.nav-head {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--faint);
  text-decoration: none;
  padding: 4px 10px;
  margin-bottom: 4px;
}
a.nav-head:hover { color: var(--brand); }
a.nav-head.current { color: var(--brand); }
.docs-sidebar ul { list-style: none; margin: 0; padding: 0; }
.docs-sidebar li a {
  display: block;
  padding: 5px 10px;
  border-left: 2px solid var(--border);
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.docs-sidebar li a:hover {
  color: var(--ink);
  border-left-color: var(--border-strong);
}
.docs-sidebar li a.current {
  color: var(--brand);
  border-left-color: var(--brand);
  font-weight: 600;
  background: color-mix(in srgb, var(--brand-soft) 60%, transparent);
}

/* ==========================================================================
   MAIN + TOC
   ========================================================================== */
.docs-main {
  min-width: 0; /* pairs with minmax(0,1fr): lets code blocks scroll, not stretch */
  padding: 36px 0 80px;
}
.docs-toc {
  position: sticky;
  top: var(--head-h);
  max-height: calc(100vh - var(--head-h));
  overflow-y: auto;
  padding: 40px 0 60px;
  font-size: 13px;
}
.toc-head {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 10px;
}
.docs-toc ul { list-style: none; margin: 0; padding: 0; }
.docs-toc li a {
  display: block;
  padding: 4px 0 4px 12px;
  border-left: 2px solid var(--border);
  color: var(--muted);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.docs-toc li.lvl-3 a { padding-left: 24px; font-size: 12px; }
.docs-toc li a:hover { color: var(--ink); }
.docs-toc li a.active {
  color: var(--brand);
  border-left-color: var(--brand);
}

/* ==========================================================================
   PROSE
   ========================================================================== */
.prose { max-width: 46rem; }
.prose .breadcrumb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin: 0 0 8px;
}
.prose .breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
}
.prose .breadcrumb li + li::before {
  content: "/";
  margin-right: 4px;
  color: var(--muted);
}
.prose .breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}
.prose .breadcrumb a:hover { color: var(--pop); }
.prose .breadcrumb [aria-current="page"] { color: var(--pop); }
.prose h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
  margin: 0 0 14px;
}
.prose .lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 28px;
}
.prose h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  margin: 44px 0 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  scroll-margin-top: calc(var(--head-h) + 16px);
}
.prose h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  margin: 28px 0 10px;
  scroll-margin-top: calc(var(--head-h) + 16px);
}
.prose h4 {
  font-size: 15px;
  font-weight: 700;
  margin: 22px 0 8px;
  scroll-margin-top: calc(var(--head-h) + 16px);
}
.prose p, .prose li { line-height: 1.7; color: var(--ink-2); }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.prose a:hover { color: var(--brand-strong); }
.prose strong { color: var(--ink); }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 36px 0; }
.prose blockquote {
  margin: 0 0 16px;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--pop);
  color: var(--muted);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--border); }

/* inline code */
.prose :not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 1px 5px;
  overflow-wrap: anywhere;
}

/* code blocks: the dark terminal panel, in both themes, per the landing page */
.prose pre {
  position: relative;
  background: var(--term-bg);
  border: 1px solid var(--term-border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin: 0 0 20px;
  overflow-x: auto; /* wide content scrolls in its own box; the page never does */
}
.prose pre code {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--term-ink);
  background: none;
  border: 0;
  padding: 0;
}
.copy-code {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--term-muted);
  background: color-mix(in srgb, var(--term-bg) 70%, transparent);
  border: 1px solid var(--term-border);
  border-radius: var(--radius-xs);
  padding: 3px 7px;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.prose pre:hover .copy-code, .copy-code:focus-visible { opacity: 1; }
/* A hover-revealed control never reveals on a touch screen, where there is no
   hover to give: on those, the button is simply always there. */
@media (hover: none) {
  .copy-code { opacity: 1; }
}
.copy-code:hover { color: var(--term-ink); border-color: var(--term-muted); }
.copy-code.ok { color: var(--term-green); border-color: var(--term-green); opacity: 1; }

/* tables: the scroll box is the wrapper, never the table (see tableWrapRenderer) */
.table-wrap {
  margin: 0 0 20px;
  overflow-x: auto; /* parameter tables are wide on phones */
  /* Edge shadows that mark the scrollable sides, so a table whose last column is
     off-box (the six-column hooks table, and most tables on a phone) does not
     read as one that simply ends there. The cover gradients are attachment:local
     and slide away with the content; the shadows under them are attachment:scroll
     and stay put, so each side only shows while that side has more to reach.
     Each cover must stay FULLY opaque across the whole 16px shadow it hides --
     hence the 60% stop on a 28px box (16.8px solid) -- or a table that does not
     scroll at all still shows a ghost of the shadow through the fade. */
  background:
    linear-gradient(to right, var(--paper) 60%, transparent) 0 0 / 28px 100% no-repeat local,
    linear-gradient(to left, var(--paper) 60%, transparent) 100% 0 / 28px 100% no-repeat local,
    linear-gradient(to right, color-mix(in srgb, var(--ink) 26%, transparent), transparent) 0 0 / 16px 100% no-repeat scroll,
    linear-gradient(to left, color-mix(in srgb, var(--ink) 26%, transparent), transparent) 100% 0 / 16px 100% no-repeat scroll;
}
/* A scrollable box must be reachable by keyboard; docs.js adds the tabindex only
   to the wrappers that actually overflow, so the other 60-odd are not tab stops. */
.table-wrap[tabindex]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 14px;
}
.prose thead th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
  border-bottom: 1px solid var(--border-strong);
  padding: 8px 16px 8px 0;
  white-space: nowrap;
}
.prose tbody td {
  border-bottom: 1px solid var(--border);
  padding: 9px 16px 9px 0;
  color: var(--ink-2);
  vertical-align: top;
}
.prose :is(th, td):last-child { padding-right: 0; }
/* A flag or a path is one atom. The global `overflow-wrap: anywhere` on inline
   code drops a cell's min-content to a single character, which lets auto layout
   size the flag column narrower than the flag in it and hyphen-break `--settings`
   down three lines. Keeping code unbreakable in cells makes each column's
   min-content honest; anything still too wide scrolls in .table-wrap. */
.prose :is(th, td) > code,
.prose :is(th, td) :not(pre) > code {
  white-space: nowrap;
  overflow-wrap: normal;
}
.prose tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }

/* ==========================================================================
   EXPLANATORY FIGURES

   Authored documentation uses these semantic HTML primitives instead of
   monospaced box drawings. They deliberately inherit the site palette, remain
   legible without JavaScript, and collapse to one column on narrow screens.
   ========================================================================== */
.doc-figure {
  --figure-accent: var(--brand);
  margin: 24px 0 28px;
  padding: 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--figure-accent) 12%, transparent), transparent 42%),
    linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface-2) 72%, var(--surface)));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.doc-figure[data-tone="pop"] { --figure-accent: var(--pop); }
.doc-figure[data-tone="ok"] { --figure-accent: var(--ok); }
.doc-figure[data-tone="warn"] { --figure-accent: var(--pop-strong); }
.doc-figure figcaption {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}
.doc-figure figcaption strong { color: var(--ink); }
.figure-kicker {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--figure-accent);
}
.doc-flow {
  display: grid;
  grid-template-columns: repeat(var(--flow-cols, 3), minmax(0, 1fr));
  gap: 30px;
  align-items: stretch;
}
.doc-flow.cols-2 { --flow-cols: 2; }
.doc-flow.cols-4 { --flow-cols: 4; }
.doc-flow.cols-5 { --flow-cols: 5; }
.flow-node {
  position: relative;
  min-width: 0;
  padding: 14px 15px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 6%, transparent);
}
/* Connectors use one round-joined arrow mask in every orientation. The small
   accent marker makes the line feel anchored to its source rather than floating
   between cards; the halo and tapered color carry each figure's tone. */
.flow-node::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  left: calc(100% + 2px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--figure-accent);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--figure-accent) 16%, transparent),
    0 0 8px color-mix(in srgb, var(--figure-accent) 28%, transparent);
  transform: translate(-50%, -50%);
}
.flow-node::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(50% - 6px);
  left: 100%;
  width: 30px;
  height: 12px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--figure-accent) 24%, transparent),
    color-mix(in srgb, var(--figure-accent) 72%, transparent) 42%,
    var(--figure-accent) 78%
  );
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 12'%3E%3Cpath d='M3 6h24m-5-5 5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 12'%3E%3Cpath d='M3 6h24m-5-5 5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--figure-accent) 28%, transparent));
}
.flow-node:last-child::before,
.flow-node:last-child::after,
.flow-node.no-arrow::before,
.flow-node.no-arrow::after { display: none; }
.flow-node .flow-step {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
  color: var(--figure-accent);
}
.flow-node strong {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.25;
  color: var(--ink);
}
.flow-node small {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}
.flow-node code { font-size: 11px; }
.flow-node.success { border-color: color-mix(in srgb, var(--ok) 55%, var(--border)); }
.flow-node.error { border-color: color-mix(in srgb, var(--pop) 55%, var(--border)); }
.flow-node.warn { border-color: color-mix(in srgb, var(--pop-strong) 55%, var(--border)); }
.flow-node.emphasis {
  background: color-mix(in srgb, var(--brand-soft) 68%, var(--surface));
  border-color: color-mix(in srgb, var(--brand) 50%, var(--border));
}
.flow-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
.flow-outcomes { margin-top: 14px; }
.flow-lane {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.flow-lane > .flow-node::before,
.flow-lane > .flow-node::after { display: none; }
.flow-lane-head {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.doc-stack {
  display: grid;
  gap: 10px;
}
.doc-stack .flow-node::before,
.doc-stack .flow-node::after { display: none; }
.doc-stack .flow-node + .flow-node { margin-top: 18px; }
.doc-stack .flow-node + .flow-node::before {
  display: block;
  top: -26px;
  left: 50%;
  margin-left: 0;
  transform: translate(-50%, -50%);
}
.doc-stack .flow-node + .flow-node::after {
  display: block;
  top: -21px;
  left: calc(50% - 15px);
  margin-left: 0;
  transform: rotate(90deg);
}
.system-map {
  display: grid;
  grid-template-columns: minmax(150px, .8fr) minmax(220px, 1.25fr) minmax(180px, 1fr);
  gap: 18px;
  align-items: center;
}
.system-map .map-column { display: grid; gap: 10px; }
.system-map .flow-node::before,
.system-map .flow-node::after { display: none; }
.system-core {
  padding: 28px 18px;
  text-align: center;
  background: color-mix(in srgb, var(--brand-soft) 70%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand) 50%, var(--border));
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px color-mix(in srgb, var(--brand) 12%, transparent);
}
.system-core-glyph {
  display: block;
  width: 92px;
  height: 92px;
  margin: 0 auto 12px;
  color: var(--brand);
}
.system-core-glyph .orbit {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  opacity: .35;
}
.system-core-glyph .node { fill: currentColor; }
.system-core-glyph .hub {
  fill: color-mix(in srgb, var(--brand) 18%, var(--surface));
  stroke: currentColor;
  stroke-width: 2;
}
.system-core strong {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ink);
}
.system-core small { color: var(--muted); }
.doc-tree {
  display: grid;
  gap: 10px;
}
.tree-root,
.tree-branch,
.tree-leaf {
  display: grid;
  grid-template-columns: minmax(120px, .8fr) minmax(0, 2fr);
  gap: 14px;
  align-items: baseline;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
}
.tree-root {
  color: var(--ink);
  background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border));
}
.tree-branch { margin-left: 18px; background: var(--surface); border: 1px solid var(--border); }
.tree-leaf { margin-left: 36px; border-left: 2px solid var(--figure-accent); }
.doc-tree code { color: var(--ink); }
.tree-note { font-size: 12px; color: var(--muted); }
.sample-panel {
  overflow: hidden;
  background: var(--term-bg);
  color: var(--term-ink);
  border: 1px solid var(--term-border);
  border-radius: var(--radius-md);
}
.sample-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--term-muted);
  border-bottom: 1px solid var(--term-border);
}
.sample-panel-body { padding: 14px 16px; font-family: var(--font-mono); font-size: 12px; line-height: 1.65; }
.sample-panel-body .sample-strong { color: var(--term-green); }
.sample-panel-body .sample-muted { color: var(--term-muted); }
.comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.comparison-card {
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.comparison-card.bad { border-top: 3px solid var(--pop); }
.comparison-card.good { border-top: 3px solid var(--ok); }
.comparison-card > span {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted);
}
.comparison-card p { margin: 0; font-size: 13px; }

/* ==========================================================================
   CARD GRIDS (home + section indexes)
   ========================================================================== */
.grid-head {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--faint);
  margin: 44px 0 16px;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 14px;
  max-width: 46rem;
  margin-bottom: 24px;
}
.doc-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.doc-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
}
.doc-card h2 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
  border: 0;
  padding: 0;
}
.doc-card p { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0; }

/* ==========================================================================
   PREV / NEXT
   ========================================================================== */
.page-nav {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  max-width: 46rem;
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.page-nav a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 48%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.page-nav a:hover { border-color: var(--brand); }
.page-nav .next { margin-left: auto; text-align: right; }
.page-nav .dir {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--faint);
}
.page-nav .t { font-weight: 600; color: var(--brand); }

.docs-foot {
  border-top: 1px solid var(--border);
  padding: 22px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
.docs-foot p { margin: 0; }
.docs-foot a { color: var(--muted); }
.docs-foot a:hover { color: var(--brand); }

/* ==========================================================================
   SEARCH
   ========================================================================== */
.docs-search { position: relative; flex: 1 1 auto; max-width: 380px; margin-left: auto; }
.docs-search input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.docs-search input::placeholder { color: var(--faint); }
.docs-search input:focus { border-color: var(--brand); box-shadow: var(--shadow-focus); }
.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 40;
}
.search-results a {
  display: block;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.search-results a .r-title { display: block; font-weight: 600; color: var(--ink); font-size: 14px; }
.search-results a .r-section {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 2px;
}
.search-results a:hover, .search-results a.sel { background: var(--brand-soft); }
.search-results a:hover .r-title, .search-results a.sel .r-title { color: var(--brand); }
.search-empty { padding: 12px 10px; font-size: 13px; color: var(--muted); }

/* ==========================================================================
   RESPONSIVE -- single column with a slide-in sidebar
   ========================================================================== */
@media (max-width: 1100px) {
  .docs-shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); gap: 0 32px; }
  .docs-toc { display: none; }
}
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .docs-shell { grid-template-columns: minmax(0, 1fr); padding: 0 16px; }
  .docs-sidebar {
    position: fixed;
    top: var(--head-h);
    left: 0;
    bottom: 0;
    width: 82vw;
    max-width: 320px;
    max-height: none;
    z-index: 25;
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 20px 12px 60px;
    transform: translateX(-102%);
    transition: transform var(--dur-med) var(--ease-out);
  }
  .docs-sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .docs-head { gap: 10px; padding: 0 14px; }
  .docs-badge, .gh-link span { display: none; }
  .docs-search { max-width: none; }
  .doc-flow,
  .doc-flow.cols-2,
  .doc-flow.cols-4,
  .doc-flow.cols-5,
  .system-map,
  .comparison-grid,
  .flow-split { grid-template-columns: minmax(0, 1fr); }
  .doc-flow { row-gap: 10px; }
  .flow-node::before,
  .flow-node::after { display: none; }
  .doc-flow .flow-node + .flow-node { margin-top: 18px; }
  .doc-flow .flow-node + .flow-node::before {
    display: block;
    top: -26px;
    left: 50%;
    margin-left: 0;
    transform: translate(-50%, -50%);
  }
  .doc-flow .flow-node + .flow-node::after {
    display: block;
    top: -21px;
    left: calc(50% - 15px);
    margin-left: 0;
    transform: rotate(90deg);
  }
  .tree-root,
  .tree-branch,
  .tree-leaf { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .tree-branch { margin-left: 10px; }
  .tree-leaf { margin-left: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .docs-sidebar, .doc-card, .copy-code { transition: none; }
}

/* ==========================================================================
   CHROMA -- build-time syntax classes, mapped to the --syn-* tokens.
   Hand-written rather than `chroma --html-styles`: only the token classes the
   docs' languages (go, yaml, bash, json) actually emit, in both themes, on the
   site's own palette.
   ========================================================================== */
.prose pre .c, .prose pre .ch, .prose pre .cm, .prose pre .c1, .prose pre .cs, .prose pre .cp, .prose pre .cpf {
  color: var(--syn-comment);
  font-style: italic;
}
.prose pre .k, .prose pre .kc, .prose pre .kd, .prose pre .kn, .prose pre .kp, .prose pre .kr, .prose pre .kt, .prose pre .ow {
  color: var(--syn-keyword);
}
.prose pre .s, .prose pre .sa, .prose pre .sb, .prose pre .sc, .prose pre .dl, .prose pre .sd, .prose pre .s2,
.prose pre .se, .prose pre .sh, .prose pre .si, .prose pre .sx, .prose pre .sr, .prose pre .s1, .prose pre .ss {
  color: var(--syn-string);
}
.prose pre .m, .prose pre .mb, .prose pre .mf, .prose pre .mh, .prose pre .mi, .prose pre .il, .prose pre .mo {
  color: var(--syn-number);
}
.prose pre .nf, .prose pre .fm, .prose pre .nb, .prose pre .bp { color: var(--syn-func); }
.prose pre .nc, .prose pre .nn, .prose pre .no, .prose pre .nt { color: var(--syn-type); }
.prose pre .na, .prose pre .nl { color: var(--syn-func); }
.prose pre .nv, .prose pre .vc, .prose pre .vg, .prose pre .vi { color: var(--syn-name); }
.prose pre .p, .prose pre .o { color: var(--syn-punct); }
.prose pre .err { color: var(--term-pop); }
.prose pre .gd { color: var(--term-pop); }
.prose pre .gi { color: var(--term-green); }
.prose pre .ge { font-style: italic; }
.prose pre .gs { font-weight: 700; }