/* ─────────────────────────────────────────────────────────────────────────
   DOCS — the three-column shell: left section nav, prose in the middle,
   "on this page" on the right. Built to sit under the same fixed nav as the
   rest of the site (assets/css/rivet.css defines that nav; this file only
   adds the shell below it).

   Nothing here touches rivet.css, scenes.css, demo.css or theme.css — every
   docs-specific rule lives in this file, keyed off the same --fg/--line/--cu
   tokens those files already established.
   ───────────────────────────────────────────────────────────────────────── */

:root { --docs-nav-h: 62px; }

/* ── shell ───────────────────────────────────────────────────────────────── */

.docs-shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 216px;
  gap: 0 44px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
  padding-top: calc(var(--docs-nav-h) + 30px);
  align-items: start;
}

/* ── left: section nav ──────────────────────────────────────────────────── */

.docs-side-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 14px;
  margin-bottom: 4px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--card);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 560;
  cursor: pointer;
}
.docs-side-toggle svg { width: 10px; color: var(--fg-3); transition: transform .2s var(--ease); }
.docs-side-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.docs-side {
  position: sticky;
  top: calc(var(--docs-nav-h) + 30px);
  max-height: calc(100vh - var(--docs-nav-h) - 50px);
  overflow-y: auto;
  padding-bottom: 40px;
  scrollbar-width: thin;
}

.docs-group + .docs-group { margin-top: 24px; }
.docs-group .label { margin: 0 0 8px 10px; }

.docs-side a {
  display: block;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1.4;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.docs-side a:hover { color: var(--fg); background: rgb(var(--fg-rgb) / .05); }
.docs-side a[aria-current="page"] {
  color: var(--fg);
  background: rgb(var(--accent-rgb) / .1);
  font-weight: 620;
  position: relative;
}
.docs-side a[aria-current="page"]::before {
  content: '';
  position: absolute;
  left: -1px; top: 7px; bottom: 7px;
  width: 2px;
  border-radius: 2px;
  background: var(--cu);
}

/* The current page's own h2s, indented under it and lit as you scroll — built
   by docs.js from the same heading list the right-hand TOC uses, and lit by
   the same observer. Without it the left column says which PAGE you are on and
   nothing about where you are inside it. */
.docs-side-sub { margin: 2px 0 2px 10px; border-left: 1px solid var(--line); }
.docs-side-sub a {
  padding: 4px 10px;
  font-size: 13px;
  color: var(--fg-3);
  border-radius: 0 6px 6px 0;
  border-left: 2px solid transparent;
  margin-left: -1px;
}
.docs-side-sub a:hover { color: var(--fg-2); background: rgb(var(--fg-rgb) / .04); }
.docs-side-sub a.active { color: var(--fg); border-left-color: var(--cu); font-weight: 560; }

/* ── the search trigger ─────────────────────────────────────────────────── */

.docs-search-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 34px;
  padding: 0 8px 0 10px;
  margin-bottom: 20px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--card);
  color: var(--fg-3);
  font-family: var(--sans);
  font-size: 13.5px;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.docs-search-trigger:hover { border-color: var(--fg-3); color: var(--fg-2); }
.docs-search-trigger svg { width: 13px; height: 13px; flex: none; }
.docs-search-trigger .t { flex: 1; text-align: left; }
.docs-search-trigger .k {
  flex: none;
  min-width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-3);
}

/* ── middle: prose ──────────────────────────────────────────────────────── */

.docs-main { min-width: 0; padding-bottom: 110px; }

.docs-content { max-width: 72ch; }

.docs-kicker { margin: 0 0 14px; }

.docs-content h1 {
  font-variation-settings: 'wdth' 116;
  font-weight: 640;
  letter-spacing: -.03em;
  line-height: 1.05;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  margin: 0 0 16px;
  text-wrap: balance;
}

.docs-content > .docs-lede {
  font-family: var(--sans);
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.55;
  color: var(--fg-2);
  letter-spacing: -.01em;
  margin: 0 0 8px;
  max-width: 68ch;
}

.docs-content h2 {
  font-variation-settings: 'wdth' 112;
  font-weight: 630;
  letter-spacing: -.022em;
  line-height: 1.15;
  font-size: clamp(1.3rem, 2vw, 1.62rem);
  margin: 52px 0 14px;
  scroll-margin-top: calc(var(--docs-nav-h) + 24px);
}
.docs-content h2:first-of-type { margin-top: 40px; }

.docs-content h3 {
  font-variation-settings: 'wdth' 108;
  font-weight: 610;
  letter-spacing: -.015em;
  font-size: 1.08rem;
  margin: 32px 0 10px;
  scroll-margin-top: calc(var(--docs-nav-h) + 24px);
}

.docs-content p {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--fg-2);
  margin: 0 0 16px;
}
.docs-content p b, .docs-content li b { color: var(--fg); font-weight: 620; }
.docs-content a { color: var(--fg); border-bottom: 1px solid var(--line-2); }
.docs-content a:hover { color: var(--cu-hi); border-color: var(--cu-deep); }

.docs-content ul, .docs-content ol {
  margin: 0 0 18px;
  padding-left: 22px;
  color: var(--fg-2);
  font-size: 15.5px;
  line-height: 1.68;
}
.docs-content li { margin-bottom: 7px; }
.docs-content li::marker { color: var(--fg-3); }

.docs-content code {
  font-family: var(--mono);
  font-size: .87em;
  letter-spacing: -.01em;
  background: rgb(var(--fg-rgb) / .06);
  border: 1px solid rgb(var(--fg-rgb) / .08);
  padding: .12em .42em;
  border-radius: 5px;
  color: var(--fg);
}

/* ── code blocks ────────────────────────────────────────────────────────────
   docs.js wraps every <pre> in .docs-code and gives it a bar: the filename or
   language from `data-file` / `data-lang`, and a copy button. There is NO
   syntax highlighting and that is deliberate — the site takes no external
   request, so a highlighter here would be a hand-rolled regex, and one that
   mis-tokenises a flag or a filename is worse than honest monochrome.

   The <pre> scrolls INSIDE ITS OWN BOX. Same rule as the shortcut tables at
   the foot of this file: a wide line must never make the page scroll sideways. */

.docs-code {
  margin: 0 0 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card-2);
  overflow: hidden;
}
.docs-code-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 34px;
  padding: 0 8px 0 14px;
  border-bottom: 1px solid var(--line);
  background: rgb(var(--fg-rgb) / .022);
}
.docs-code.bare .docs-code-bar { height: 0; border-bottom: none; background: none; padding: 0; overflow: visible; }
.docs-code.bare .docs-code-copy { position: absolute; top: 8px; right: 8px; }
.docs-code.bare { position: relative; }
.docs-code-name {
  flex: 1; min-width: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: -.01em;
  color: var(--fg-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.docs-code-copy {
  flex: none;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--card);
  color: var(--fg-3);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 560;
  letter-spacing: .01em;
  cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.docs-code-copy:hover { color: var(--fg); border-color: var(--fg-3); }
.docs-code-copy.is-copied { color: var(--cu-deep); border-color: var(--cu); }
.docs-code-copy.is-copied .lbl::after { content: 'ied'; }
.docs-code-copy.is-failed { color: var(--drc); border-color: var(--drc); }
.docs-code-copy.is-failed .lbl::after { content: ' failed'; }

.docs-content pre {
  margin: 0;
  padding: 14px 16px;
  background: none;
  border: none;
  overflow-x: auto;
}
/* A <pre> that has not been enhanced yet (no JS, or none ran) still has to
   look like a code block rather than raw text on the page ground. */
.docs-content > pre, .docs-content li > pre {
  margin: 0 0 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card-2);
}
.docs-code > pre { margin: 0; border: none; border-radius: 0; background: none; }
.docs-content pre code {
  display: block;
  background: none;
  border: none;
  padding: 0;
  font-size: 12.9px;
  line-height: 1.62;
  letter-spacing: -.005em;
  color: var(--fg-2);
  tab-size: 2;
}

/* ── keyboard chips ─────────────────────────────────────────────────────────
   docs.js wraps each <kbd>, or each RUN of adjacent <kbd>s, in a .kbd-chip
   that copies the whole chord — "Ctrl+N", not "Ctrl" and "N" separately. The
   run rule is whitespace-only adjacency, which is why `X / C` stays two chips. */

.kbd-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  position: relative;
  cursor: pointer;
  border-radius: 6px;
  padding: 1px;
  margin: 0 -1px;
  vertical-align: baseline;
  transition: background .16s var(--ease);
}
.kbd-chip:hover { background: rgb(var(--accent-rgb) / .12); }
.kbd-chip:hover kbd { border-color: var(--fg-3); }
.kbd-chip.is-copied kbd { border-color: var(--cu); color: var(--cu-deep); }
.kbd-chip.is-failed kbd { border-color: var(--drc); }
.kbd-chip::after {
  content: 'Copied';
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, 3px);
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--fg);
  color: var(--void);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.kbd-chip.is-copied::after { opacity: 1; transform: translate(-50%, 0); }
.kbd-chip.is-failed::after { content: 'Copy blocked'; opacity: 1; transform: translate(-50%, 0); }

.docs-content kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  height: 1.6em;
  padding: 0 .4em;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--card);
  font-family: var(--mono);
  font-size: .8em;
  color: var(--fg);
}

/* note callout — used sparingly, for a caveat that is really a caveat */
.docs-note {
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--cu);
  border-radius: 0 8px 8px 0;
  background: var(--card-2);
}
.docs-note p { margin: 0; font-size: 14.5px; color: var(--fg-2); }
.docs-note p + p { margin-top: 8px; }

/* a step list for procedural sections — numbered, not bulleted */
.docs-steps { counter-reset: docstep; list-style: none; padding-left: 0; margin: 0 0 22px; }
.docs-steps > li {
  counter-increment: docstep;
  position: relative;
  padding-left: 38px;
  margin-bottom: 18px;
}
.docs-steps > li::before {
  content: counter(docstep);
  position: absolute;
  left: 0; top: 1px;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-3);
}

/* a labelled key/value table — used by the keyboard reference */
.docs-table { width: 100%; border-collapse: collapse; margin: 0 0 8px; font-size: 14.5px; }
.docs-table th {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-2);
  font-variation-settings: 'wdth' 72;
  font-weight: 620;
  font-size: 11.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.docs-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--fg-2); vertical-align: top; }
.docs-table td:first-child { white-space: nowrap; width: 1%; }
.docs-table tr:last-child td { border-bottom: none; }

.docs-shortcut-group + .docs-shortcut-group { margin-top: 36px; }

/* ── right: on this page ────────────────────────────────────────────────── */

.docs-toc {
  position: sticky;
  top: calc(var(--docs-nav-h) + 30px);
  max-height: calc(100vh - var(--docs-nav-h) - 50px);
  overflow-y: auto;
  padding-bottom: 40px;
}
.docs-toc .label { margin: 0 0 10px; }
.docs-toc nav { display: flex; flex-direction: column; }
.docs-toc a {
  padding: 5px 0 5px 13px;
  border-left: 2px solid var(--line);
  font-size: 13px;
  color: var(--fg-3);
  line-height: 1.4;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.docs-toc a:hover { color: var(--fg-2); }
.docs-toc a.sub { padding-left: 25px; font-size: 12.5px; }
.docs-toc a.active { color: var(--fg); border-left-color: var(--cu); }

/* ── prev / next pager ──────────────────────────────────────────────────── */

.docs-pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 60px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.docs-pager-link {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 0;
  min-width: 0;
  max-width: 48%;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.docs-pager-link:hover { border-color: var(--line-2); background: rgb(var(--fg-rgb) / .03); }
.docs-pager-link.next { margin-left: auto; text-align: right; align-items: flex-end; }
.docs-pager-link .dir { font-size: 11.5px; color: var(--fg-3); font-variation-settings: 'wdth' 72; letter-spacing: .04em; text-transform: uppercase; }
.docs-pager-link .ttl {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 610; color: var(--fg); border-bottom: none;
  font-variation-settings: 'wdth' 104; letter-spacing: -.012em;
}
/* The arrow is the affordance, so it is a separate glyph that can move —
   inside the label it would drag the words with it. */
.docs-pager-link .ttl::before,
.docs-pager-link .ttl::after { color: var(--fg-3); transition: transform .22s var(--ease), color .2s var(--ease); }
.docs-pager-link.prev .ttl::before { content: '←'; }
.docs-pager-link.next .ttl::after { content: '→'; }
.docs-pager-link.prev:hover .ttl::before { transform: translateX(-3px); color: var(--cu); }
.docs-pager-link.next:hover .ttl::after { transform: translateX(3px); color: var(--cu); }

/* ── the line under the pager ───────────────────────────────────────────── */

.docs-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--fg-3);
}
.docs-foot a { color: var(--fg-3); border-bottom: 1px solid transparent; transition: color .18s var(--ease), border-color .18s var(--ease); }
.docs-foot a:hover { color: var(--fg-2); border-bottom-color: var(--line-2); }
.docs-foot .sep { color: var(--line-2); }

/* Anything announced without moving focus goes through here. */
.docs-sr-live {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── docs home: the section index ───────────────────────────────────────── */

.docs-index { display: flex; flex-direction: column; border-top: 1px solid var(--line); margin: 28px 0 0; }
.docs-index a {
  display: grid;
  grid-template-columns: minmax(140px, 0.36fr) minmax(0, 1fr) 22px;
  align-items: baseline;
  gap: 6px 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.docs-index a::before {
  content: '';
  position: absolute;
  inset: 0 calc(var(--gut) * -0.5);
  background: rgb(var(--fg-rgb) / .035);
  opacity: 0;
  transition: opacity .2s var(--ease);
  pointer-events: none;
}
.docs-index a:hover::before { opacity: 1; }
.docs-index .w {
  font-variation-settings: 'wdth' 112;
  font-weight: 620;
  font-size: 1.05rem;
  letter-spacing: -.02em;
  color: var(--fg);
}
.docs-index .d { font-size: 14px; color: var(--fg-2); line-height: 1.55; }
.docs-index .arw { color: var(--fg-3); justify-self: end; transition: transform .25s var(--ease), color .2s var(--ease); }
.docs-index a:hover .arw { transform: translateX(3px); color: var(--cu); }
@media (max-width: 640px) {
  .docs-index a { grid-template-columns: 1fr 20px; }
  .docs-index .d { grid-column: 1 / 2; }
}

/* ── documentation screenshots ──────────────────────────────────────────── */

.docs-fig {
  margin: 22px 0 26px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card-2);
  overflow: hidden;
}
.docs-fig img { display: block; width: 100%; height: auto; background: var(--card); }
.docs-fig figcaption {
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-3);
}
/* Portrait UI panels (the agent sidebar, a menu, a settings form) look
   stretched and soft at full article width - cap them so they read at
   roughly their real size instead of being blown up to 72ch. */
.docs-fig-narrow { max-width: 340px; }

/* A FIGURE THAT BLEEDS PAST THE PROSE. The prose column is 72ch because that
   is how wide a line should be; a screenshot of a whole application at 72ch is
   a thumbnail of an application. So a wide figure reaches into the GAP between
   the prose and the "on this page" rail — and stops there.

   ⚠ IT USED TO REACH 260 px, AND THE RAIL IS 216 px WIDE WITH A 44 px GAP. So
   every wide figure on every docs page was laid straight over the on-this-page
   navigation: measured on /docs/getting-started/ at 1730 px, the prose column
   ended at x=1199 and the figures ended at x=1458, which is 215 px into a rail
   that ends at 1459. It covered it completely. The `max-width: 100vw` cap did
   nothing about this, because the overflow was never past the VIEWPORT — it
   was past the COLUMN, and nothing was measuring that.

   The bleed is now 28 of that 44 px gap, so the figure reaches into the gutter
   and still leaves 16 px of air before the rail rather than touching it. Narrowing is always safe for
   www/tools/check-image-resolution.js: it demands 2.5x the RENDERED width in
   real pixels, so a smaller box raises every ratio. Widening is not — widen
   this and the captures have to be re-taken, not merely re-encoded. */
.docs-fig-wide { width: calc(100% + 28px); max-width: calc(100vw - var(--gut) * 2); }
@media (max-width: 1100px) { .docs-fig-wide { width: 100%; } }

.docs-fig-xnarrow { max-width: 240px; }
/* Smaller still, for a strip of chrome rather than a panel: the left rail is
   49 CSS px wide in the app, and any box wider than this is showing it at a
   magnification that reads as a mistake. 128 px is also what keeps its capture
   above the resolution gate's floor without a window this machine would swap
   over — see www/tools/lib/docs-figures.js. */
.docs-fig-tiny { max-width: 128px; }

/* A numbered walkthrough where every step carries its own screenshot -
   docs-steps' counter-and-circle, with room for a .docs-fig under the text. */
.docs-walk { counter-reset: docswalk; list-style: none; padding-left: 0; margin: 26px 0 36px; }
.docs-walk > li {
  counter-increment: docswalk;
  position: relative;
  padding: 0 0 0 46px;
  margin-bottom: 34px;
}
.docs-walk > li::before {
  content: counter(docswalk);
  position: absolute;
  left: 0; top: 1px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--card);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--fg-2);
}
.docs-walk > li > p { margin: 2px 0 12px; font-family: var(--sans); font-size: 15.5px; line-height: 1.6; color: var(--fg-2); }
.docs-walk > li > p b { color: var(--fg); font-weight: 620; }
.docs-walk .docs-fig { margin-top: 0; }

/* ── the search palette ─────────────────────────────────────────────────────
   Built entirely by assets/js/docs-search.js over assets/js/docs-index.js,
   which tools/docs-search-index.js generates from the pages themselves. The
   only thing a page needs in its markup is the trigger button. */

html.docs-search-open { overflow: hidden; }

.docs-search { position: fixed; inset: 0; z-index: 200; }
.docs-search[hidden] { display: none; }
.docs-search-scrim { position: absolute; inset: 0; background: rgb(var(--shadow-rgb) / .34); backdrop-filter: blur(2px); }
.docs-search-panel {
  position: relative;
  width: min(640px, calc(100vw - 28px));
  max-height: min(560px, calc(100vh - 96px));
  margin: clamp(40px, 11vh, 110px) auto 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--sub);
  box-shadow: 0 24px 60px -18px rgb(var(--shadow-rgb) / .34), 0 2px 8px rgb(var(--shadow-rgb) / .08);
  overflow: hidden;
}
.docs-search-head { display: flex; align-items: center; gap: 10px; padding: 0 12px 0 16px; height: 52px; border-bottom: 1px solid var(--line); flex: none; }
.docs-search-head svg { width: 15px; height: 15px; flex: none; color: var(--fg-3); }
.docs-search-head input {
  flex: 1; min-width: 0;
  height: 100%;
  border: none; background: none; outline: none;
  font-family: var(--sans);
  font-size: 15.5px;
  letter-spacing: -.012em;
  color: var(--fg);
}
.docs-search-head input::placeholder { color: var(--fg-3); }
.docs-search-esc { flex: none; padding: 3px 7px; border: 1px solid var(--line-2); border-radius: 5px; font-family: var(--mono); font-size: 10.5px; color: var(--fg-3); }

.docs-search-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 0 10px; scrollbar-width: thin; overscroll-behavior: contain; }
.docs-search-group + .docs-search-group { margin-top: 4px; }
.docs-search-group-head {
  display: flex; align-items: baseline; gap: 8px;
  margin: 10px 0 4px; padding: 0 16px;
}
.docs-search-group-head .w { font-variation-settings: 'wdth' 72; font-weight: 620; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.docs-search-group-head .k { font-size: 11px; color: var(--line-2); }

.docs-search-row {
  display: block;
  padding: 7px 16px;
  border: none;
  border-left: 2px solid transparent;
  cursor: pointer;
}
.docs-search-row.sub { padding-left: 28px; }
.docs-search-row .h { display: block; font-size: 14.5px; font-weight: 560; color: var(--fg-2); letter-spacing: -.012em; }
.docs-search-row .x {
  display: block;
  margin-top: 1px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--fg-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.docs-search-row mark { background: rgb(var(--accent-rgb) / .3); color: inherit; border-radius: 2px; padding: 0 1px; }
.docs-search-row.on { background: rgb(var(--fg-rgb) / .05); border-left-color: var(--cu); }
.docs-search-row.on .h { color: var(--fg); }

.docs-search-empty { margin: 0; padding: 26px 18px 30px; text-align: center; font-size: 14px; color: var(--fg-3); }
.docs-search-foot { display: flex; gap: 16px; align-items: center; padding: 0 16px; height: 38px; border-top: 1px solid var(--line); flex: none; }
.docs-search-foot .g { display: flex; align-items: center; gap: 6px; }
.docs-search-foot .k { min-width: 17px; height: 17px; display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 1px solid var(--line); border-radius: 4px; font-family: var(--mono); font-size: 10.5px; color: var(--fg-3); }
.docs-search-foot .l { font-size: 11.5px; color: var(--fg-3); }
@media (max-width: 560px) { .docs-search-foot { display: none; } }

/* ── responsive: sidebar becomes a top drawer, TOC drops away ──────────── */

@media (max-width: 900px) {
  .docs-shell {
    grid-template-columns: minmax(0, 1fr);
    padding-top: calc(var(--docs-nav-h) + 18px);
  }
  .docs-toc { display: none; }
  .docs-side-toggle { display: flex; }
  .docs-side {
    position: static;
    max-height: none;
    overflow: visible;
    padding-bottom: 8px;
    margin-bottom: 22px;
  }
  .docs-search-trigger { margin-bottom: 8px; }
  .docs-side-nav { display: none; }
  .docs-side-nav.open {
    display: block;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    margin-bottom: 10px;
  }
}

/* Two pager links side by side stop being readable well before the viewport
   runs out — "Export & fabrication" in a 160px box is three lines of nothing. */
@media (max-width: 520px) {
  .docs-pager { flex-direction: column; }
  .docs-pager-link, .docs-pager-link.next { max-width: 100%; margin-left: 0; }
}

@media print { .docs-side, .docs-toc, .docs-side-toggle, .docs-search, .docs-pager { display: none; } }

/* A shortcut table's key column is `white-space: nowrap` on purpose — a
   chord broken across two lines is unreadable. On a phone that means the
   table can be wider than the screen, and a table that is wider than the
   screen must scroll INSIDE ITS OWN BOX rather than making the whole page
   scroll sideways. Launch traffic from Reddit and X is mostly phones, so
   this is not a theoretical case. */
.docs-shortcut-group { overflow-x: auto; }