/*
The documentation theme.

Written rather than adopted, because a framework's default theme is recognisable and documentation that looks
borrowed reads as an afterthought. The palette matches the console so the two are visibly one product.

Two decisions do most of the work:

  A MEASURE, not a width. The prose column is capped in `ch` rather than pixels, so a line stays around 75
  characters whatever the font size. Long lines are the single most common reason technical writing is hard to
  read, and no amount of styling elsewhere compensates.

  TYPE SCALE OVER DECORATION. Hierarchy comes from size, weight and space, not from boxes, gradients or icons.
  Reference material is scanned rather than read, so the page has to be legible at a glance and quiet when it
  is not being scanned.
*/

:root {
  --bg: #ffffff;
  --bg-soft: #f7f8fa;
  --panel: #ffffff;
  --ink: #1a1d21;
  --ink-soft: #5c6470;
  --ink-faint: #8b939e;
  --line: #e4e7ec;
  --line-soft: #eef0f3;
  --accent: #1f6feb;
  --accent-soft: #e8f0fe;
  --warn: #9a6700;
  --warn-soft: #fff8e5;
  --danger: #b42318;
  --danger-soft: #fef3f2;

  --measure: 75ch;
  --sidebar: 250px;
  --toc: 210px;
  --topbar: 56px;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;

  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #0f1115;
  --bg-soft: #14171d;
  --panel: #171a20;
  --ink: #e6e9ee;
  --ink-soft: #9aa3af;
  --ink-faint: #6e7681;
  --line: #262b33;
  --line-soft: #1e2229;
  --accent: #549bff;
  --accent-soft: #16233a;
  --warn: #d9a441;
  --warn-soft: #241d0e;
  --danger: #f0736a;
  --danger-soft: #2a1615;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 10px 16px; background: var(--accent); color: #fff; border-radius: 0 0 6px 0;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------------- top bar */

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  height: var(--topbar); padding: 0 20px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand-sub { color: var(--ink-faint); font-weight: 400; }

.menu, .theme {
  display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  color: var(--ink-soft); background: none; border: 1px solid transparent; border-radius: 8px; cursor: pointer;
}
.menu:hover, .theme:hover { color: var(--ink); background: var(--bg-soft); border-color: var(--line); }
.menu { display: none; }

.theme .moon { display: none; }
[data-theme="dark"] .theme .sun { display: none; }
[data-theme="dark"] .theme .moon { display: block; }

.links { display: flex; gap: 18px; margin-left: auto; font-size: 14px; }
.links a { color: var(--ink-soft); }
.links a:hover { color: var(--ink); text-decoration: none; }

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

.search { position: relative; flex: 1; max-width: 420px; margin-left: 8px; }
.search input {
  width: 100%; height: 34px; padding: 0 34px 0 12px;
  font: inherit; font-size: 14px; color: var(--ink);
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px;
}
.search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; background: var(--bg); }
.search kbd {
  position: absolute; right: 8px; top: 8px;
  padding: 1px 6px; font: 11px/1.5 var(--mono); color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 4px; pointer-events: none;
}
.search input:focus + kbd { display: none; }

.results {
  position: absolute; top: 42px; left: 0; right: 0; z-index: 50;
  max-height: min(60vh, 460px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.12);
}
[data-theme="dark"] .results { box-shadow: 0 12px 32px rgb(0 0 0 / 0.5); }
.results a { display: block; padding: 9px 13px; border-bottom: 1px solid var(--line-soft); color: var(--ink); }
.results a:last-child { border-bottom: 0; }
.results a:hover, .results a.active { background: var(--accent-soft); text-decoration: none; }
.results .r-title { font-weight: 500; font-size: 14px; }
.results .r-ctx { display: block; margin-top: 1px; font-size: 12.5px; color: var(--ink-soft); }
.results mark { background: transparent; color: var(--accent); font-weight: 600; }
.results .r-empty { padding: 14px; font-size: 14px; color: var(--ink-soft); }

/* ---------------------------------------------------------------- layout */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr) var(--toc);
  gap: 40px;
  max-width: 1400px; margin: 0 auto; padding: 0 20px;
  align-items: start;
}

.sidebar {
  position: sticky; top: var(--topbar);
  max-height: calc(100dvh - var(--topbar)); overflow-y: auto;
  padding: 26px 0 60px;
}
.nav-section { margin-bottom: 22px; }
.nav-section h2 {
  margin: 0 0 6px; padding-left: 10px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint);
}
.nav-section ul { list-style: none; margin: 0; padding: 0; }
.nav-section a {
  display: block; padding: 5px 10px; border-radius: 6px;
  font-size: 14px; color: var(--ink-soft);
}
.nav-section a:hover { color: var(--ink); background: var(--bg-soft); text-decoration: none; }
/* The current page is marked by weight and a rule, not a filled block: a heavy highlight competes with the
   content for attention on every single page. */
.nav-section a[aria-current="page"] {
  color: var(--accent); font-weight: 500;
  background: var(--accent-soft);
}

main { min-width: 0; padding: 30px 0 80px; }

.toc {
  position: sticky; top: var(--topbar);
  max-height: calc(100dvh - var(--topbar)); overflow-y: auto;
  padding: 30px 0 60px;
}
.toc h2 {
  margin: 0 0 8px; font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint);
}
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 3px 0 3px 12px; margin-left: -1px; font-size: 13px; color: var(--ink-soft); border-left: 1px solid transparent; }
.toc a:hover { color: var(--ink); text-decoration: none; }
.toc a.active { color: var(--accent); border-left-color: var(--accent); }
.toc .d3 a { padding-left: 24px; font-size: 12.5px; }

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

.prose { max-width: var(--measure); }

.prose h1 {
  margin: 0 0 10px; font-size: 30px; line-height: 1.2; font-weight: 640; letter-spacing: -0.022em;
}
.prose h2 {
  margin: 42px 0 12px; padding-top: 14px; border-top: 1px solid var(--line-soft);
  font-size: 21px; line-height: 1.3; font-weight: 620; letter-spacing: -0.014em;
}
.prose h3 { margin: 30px 0 8px; font-size: 16.5px; font-weight: 620; letter-spacing: -0.008em; }
.prose h4 { margin: 22px 0 6px; font-size: 14.5px; font-weight: 620; color: var(--ink-soft); }

.anchor {
  margin-left: 8px; color: var(--ink-faint); font-weight: 400;
  opacity: 0; transition: opacity .12s;
}
h2:hover .anchor, h3:hover .anchor, .anchor:focus { opacity: 1; text-decoration: none; }

.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 22px; }
.prose li { margin-bottom: 5px; }
.prose li > ul, .prose li > ol { margin-top: 5px; }

.prose strong { font-weight: 620; }

.prose hr { margin: 34px 0; border: 0; border-top: 1px solid var(--line); }

.prose blockquote {
  margin: 18px 0; padding: 12px 16px;
  background: var(--bg-soft); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0;
  color: var(--ink-soft);
}
.prose blockquote p:last-child { margin-bottom: 0; }

/* Inline code sits inside sentences, so it is toned down: a bright box on every third word makes a paragraph
   unreadable. Block code is the opposite — it should be findable while scrolling. */
.prose :not(pre) > code {
  padding: 1.5px 5px; font-family: var(--mono); font-size: 0.875em;
  background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: 5px;
  overflow-wrap: break-word;
}

figure.code {
  position: relative; margin: 16px 0;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--bg-soft);
}
figure.code .lang {
  position: absolute; top: 0; right: 0; z-index: 1;
  padding: 3px 9px; font: 11px/1.5 var(--mono); color: var(--ink-faint);
  text-transform: lowercase; letter-spacing: .02em;
}
figure.code pre { margin: 0; padding: 14px 16px; overflow-x: auto; font-size: 13.5px; line-height: 1.6; }
figure.code code { font-family: var(--mono); }

/* Shiki emits both themes; these swap which one is visible without re-highlighting in the browser. */
[data-theme="dark"] .shiki, [data-theme="dark"] .shiki span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
}

figure.code .copy {
  position: absolute; top: 6px; right: 8px;
  padding: 3px 9px; font: inherit; font-size: 12px; color: var(--ink-soft);
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  opacity: 0; cursor: pointer; transition: opacity .12s;
}
figure.code:hover .copy, figure.code .copy:focus { opacity: 1; }
figure.code .copy:hover { color: var(--ink); }

.table-wrap { margin: 16px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  padding: 9px 14px; text-align: left; font-weight: 600; font-size: 12px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft);
  background: var(--bg-soft); border-bottom: 1px solid var(--line); white-space: nowrap;
}
td { padding: 9px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td code { white-space: nowrap; }

.page-footer {
  max-width: var(--measure); margin-top: 60px; padding-top: 18px;
  border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-faint);
}

/* ---------------------------------------------------------------- responsive */

.scrim { position: fixed; inset: 0; z-index: 30; background: rgb(0 0 0 / 0.4); }

@media (max-width: 1180px) {
  .shell { grid-template-columns: var(--sidebar) minmax(0, 1fr); }
  .toc { display: none; }
}

@media (max-width: 860px) {
  .menu { display: grid; }
  .links { display: none; }
  .shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sidebar {
    position: fixed; top: var(--topbar); bottom: 0; left: 0; z-index: 35;
    width: 270px; padding: 20px 16px;
    background: var(--panel); border-right: 1px solid var(--line);
    transform: translateX(-100%); transition: transform .18s ease;
  }
  .sidebar.open { transform: none; }
  .prose h1 { font-size: 26px; }
  .search { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

@media print {
  .topbar, .sidebar, .toc, .scrim { display: none; }
  .shell { display: block; }
  .prose { max-width: none; }
}