/* The documentation layout: a sidebar of pages, the prose column at
 * the design system's reading measure, and an "on this page" rail.
 * The same tokens as the marketing site, so the two hosts are one
 * product rather than two. */

.docs {
  display: grid;
  grid-template-columns: var(--control-sidebar-width) minmax(0, 1fr) 220px;
  gap: var(--space-7);
  align-items: start;
  width: 100%; max-width: 1360px; margin-inline: auto;
  padding: var(--space-6) var(--space-5) var(--space-9);
}

/* --- sidebar ------------------------------------------------------ */

.sidebar { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow-y: auto; padding-right: var(--space-3); }
.sidebar h4 {
  font-family: var(--font-sans); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--color-text-muted); font-weight: var(--weight-semibold);
  margin: var(--space-6) 0 var(--space-3);
}
.sidebar h4:first-child { margin-top: 0; }
.sidebar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sidebar a {
  display: block; padding: var(--space-2) var(--space-3);
  color: var(--color-text-muted); text-decoration: none; font-size: var(--text-sm);
  border-radius: var(--radius-md); border-left: 2px solid transparent;
}
.sidebar a:hover { background: var(--color-surface-2); color: var(--color-text); }
.sidebar a[aria-current="page"] {
  color: var(--color-primary); font-weight: var(--weight-semibold);
  background: var(--color-surface-2); border-left-color: var(--color-primary);
}

/* --- search ------------------------------------------------------- */

.search { position: relative; margin-bottom: var(--space-5); }
.search input {
  width: 100%; height: var(--control-height-sm);
  padding: 0 var(--space-3); font: inherit; font-size: var(--text-sm);
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.search input::placeholder { color: var(--color-text-muted); }
.results {
  position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 30;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  max-height: 60vh; overflow-y: auto; padding: var(--space-2);
}
.results:empty { display: none; }
.results a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); border: 0; }
.results a b { display: block; color: var(--color-text); font-size: var(--text-sm); }
.results a em { display: block; color: var(--color-text-muted); font-size: var(--text-xs); font-style: normal; margin-top: 2px; }
.results .none { padding: var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); }

/* --- prose -------------------------------------------------------- */

.prose { min-width: 0; max-width: 78ch; }
.prose > h1 { margin-bottom: var(--space-5); }
.prose h2 { margin: var(--space-8) 0 var(--space-4); padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
.prose h3 { margin: var(--space-6) 0 var(--space-3); }
.prose h4 { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-md); }
.prose p, .prose ul, .prose ol { margin: 0 0 var(--space-4); }
.prose li { margin-bottom: var(--space-2); }
.prose li > ul { margin-top: var(--space-2); }
.prose h1, .prose h2, .prose h3, .prose h4 { scroll-margin-top: 88px; }
.prose blockquote {
  margin: var(--space-5) 0; padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-primary); background: var(--color-surface-2);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.prose blockquote p:last-child { margin-bottom: 0; }

.anchor { margin-left: var(--space-2); color: var(--color-border-strong); text-decoration: none; opacity: 0; font-weight: 400; }
h1:hover .anchor, h2:hover .anchor, h3:hover .anchor { opacity: 1; }

.tablewrap { overflow-x: auto; margin: 0 0 var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
.prose th, .prose td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); vertical-align: top; }
.prose thead th { background: var(--color-surface-2); font-weight: var(--weight-semibold); white-space: nowrap; }
.prose tbody tr:last-child td { border-bottom: 0; }

figure.code {
  position: relative; margin: 0 0 var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
figure.code figcaption {
  padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-2); color: var(--color-text-muted);
  font-family: var(--font-mono); font-size: var(--text-xs);
}
figure.code pre { padding: var(--space-4); }
figure.code .copy {
  position: absolute; top: var(--space-2); right: var(--space-2);
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-muted); font: inherit; font-size: var(--text-xs);
  padding: 2px var(--space-2); border-radius: var(--radius-sm); cursor: pointer; opacity: 0;
}
figure.code:hover .copy, figure.code .copy:focus-visible { opacity: 1; }

/* --- on this page -------------------------------------------------- */

.toc { position: sticky; top: 88px; font-size: var(--text-sm); max-height: calc(100vh - 110px); overflow-y: auto; }
.toc h4 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-muted); margin: 0 0 var(--space-3); font-family: var(--font-sans); }
.toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.toc li.l3 { padding-left: var(--space-4); }
.toc a { color: var(--color-text-muted); text-decoration: none; display: block; line-height: 1.4; }
.toc a:hover, .toc a.here { color: var(--color-primary); }

.pager { display: flex; gap: var(--space-4); margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.pager a {
  flex: 1; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-4); text-decoration: none; background: var(--color-surface);
}
.pager a:hover { border-color: var(--color-border-strong); }
.pager span { display: block; font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.07em; }
.pager b { display: block; margin-top: 2px; color: var(--color-text); font-family: var(--font-display); }
.pager .next { text-align: right; }

.menu-toggle { display: none; }

@media (max-width: 1180px) {
  .docs { grid-template-columns: var(--control-sidebar-width) minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 860px) {
  .docs { grid-template-columns: minmax(0, 1fr); padding-top: var(--space-4); }
  .sidebar { position: static; max-height: none; border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-5); margin-bottom: var(--space-5); }
  .sidebar[hidden] { display: none; }
  .menu-toggle { display: inline-flex; }
}

/* Inline code in a heading is a field name, not a chip: the heading's
 * own weight and the mono face are enough, and the pill made `http`
 * look like a button. */
.prose h1 code, .prose h2 code, .prose h3 code, .prose h4 code,
.sidebar code, .toc code {
  background: none; padding: 0; font-size: 0.92em; color: inherit;
}

/* The docs separate sections with `---` and this layout already rules
 * off every h2, so the two together drew a double line. */
.prose hr:has(+ h2) { display: none; }
.prose hr + h2 { margin-top: var(--space-7); }

/* --- versions ------------------------------------------------------ */

.vpick { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); }
.vpick span { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-muted); }
.vpick select {
  flex: 1; height: var(--control-height-sm); padding: 0 var(--space-2);
  font: inherit; font-size: var(--text-sm);
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
}

/* Landing on the documentation for a release nobody runs is the
 * commonest way to be confidently wrong about a tool. */
.oldver {
  margin-bottom: var(--space-6); padding: var(--space-4) var(--space-5);
  background: var(--color-tint-warning); border-left: 3px solid var(--color-warning);
  border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: var(--text-sm);
}