/* Eto API reference — design layer for /dev/docs/.
   Loaded after landing/lp/pages.css and scoped to body.dapi-docs.

   Shape: left nav (search, version switch, sections) · 720px measure ·
   right "On this page" rail. Hairlines and space do the ranking; the only
   filled surfaces are code panels and the nav well. Type is Geist, Geist
   Mono for paths and figures, Perfectly Nineties for the page title alone.
   Dark mode follows the system and the html[data-theme] override, and takes
   the landing chrome with it so the nav and footer match the page. */

/* ---------- Tones + the warm well (light) ---------- */
body.dapi-docs {
  --tone-pos: #1f7a4d;
  --tone-neg: #a32d1d;
  --tone-warn: #b4540f;
  --well: #faf9f7;
  --code-bg: #faf9f7;
}

/* ---------- Dark: repaint the shared landing tokens for this page only ---------- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):has(body.dapi-docs) {
    color-scheme: dark;
    background: #141518;
    --bg: #141518;
    --bg-2: #1a1b1e;
    --ink: #f4f4f5;
    --text: #ececee;
    --muted: rgba(244, 244, 245, 0.66);
    --faint: rgba(244, 244, 245, 0.44);
    --line: #2c2d32;
    --line-2: #3b3c43;
    --ink-5: rgba(244, 244, 245, 0.06);
  }
  html:not([data-theme="light"]) body.dapi-docs {
    --tone-pos: #6cbb92;
    --tone-neg: #e2897b;
    --tone-warn: #dfa165;
    --well: #101114;
    --code-bg: #101114;
  }
}
html[data-theme="dark"]:has(body.dapi-docs) {
  color-scheme: dark;
  background: #141518;
  --bg: #141518;
  --bg-2: #1a1b1e;
  --ink: #f4f4f5;
  --text: #ececee;
  --muted: rgba(244, 244, 245, 0.66);
  --faint: rgba(244, 244, 245, 0.44);
  --line: #2c2d32;
  --line-2: #3b3c43;
  --ink-5: rgba(244, 244, 245, 0.06);
}
html[data-theme="dark"] body.dapi-docs {
  --tone-pos: #6cbb92;
  --tone-neg: #e2897b;
  --tone-warn: #dfa165;
  --well: #101114;
  --code-bg: #101114;
}
/* Landing chrome carries a few literal whites; keep them on the tokens so the
   nav, footer and selection do not glow on a dark page. */
html[data-theme="dark"] .lp-nav-cta,
html:not([data-theme="light"]):has(body.dapi-docs) .lp-nav-cta { color: var(--bg); }
html[data-theme="dark"] .lp-footer-fade,
html:not([data-theme="light"]):has(body.dapi-docs) .lp-footer-fade {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 28%, var(--bg) 100%);
}
html[data-theme="dark"] .lp-header,
html:not([data-theme="light"]):has(body.dapi-docs) .lp-header { background: rgba(20, 21, 24, 0.86); }
html[data-theme="dark"] .lp-consent,
html:not([data-theme="light"]):has(body.dapi-docs) .lp-consent { background: rgba(26, 27, 30, 0.94); }
html[data-theme="dark"] .lp ::selection,
html:not([data-theme="light"]):has(body.dapi-docs) .lp ::selection { background: #3b3c43; color: var(--ink); }
html[data-theme="dark"] .lp-hatch,
html:not([data-theme="light"]):has(body.dapi-docs) .lp-hatch {
  background: repeating-linear-gradient(45deg, rgba(244, 244, 245, 0.1) 0px, rgba(244, 244, 245, 0.1) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 8px);
}

/* ---------- Frame ---------- */
body.dapi-docs .lp-docs { display: grid; grid-template-columns: 1fr; }
body.dapi-docs .d-main { min-width: 0; }
body.dapi-docs .d-body { display: grid; grid-template-columns: minmax(0, 1fr); }
body.dapi-docs .d-content { max-width: none; padding: 36px var(--gutter) 80px; }
body.dapi-docs .d-measure { max-width: 720px; }

/* ---------- Left nav ---------- */
body.dapi-docs .d-side { background: var(--bg); }
/* One brand on the page. The site nav overhead carries the Eto mark, the
   wordmark and the account links and stays sticky, so the rail head only names
   what the rail is — set like the group labels further down it. */
body.dapi-docs .d-side-head { gap: 9px; padding: 0 18px; }
body.dapi-docs .d-side-head .ver {
  margin-left: 0; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted);
}
body.dapi-docs .d-nav { padding: 0 0 40px; }
body.dapi-docs .d-nav-label {
  padding: 20px 18px 6px; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--faint);
}
body.dapi-docs .d-nav a {
  padding: 6px 18px; font-size: 13.5px; line-height: 1.45; color: var(--muted);
  border-left: 1px solid transparent;
}
body.dapi-docs .d-nav a:hover { background: var(--ink-5); color: var(--ink); }
body.dapi-docs .d-nav a.active { color: var(--ink); border-left-color: var(--ink); box-shadow: none; }
body.dapi-docs .d-nav-count { font-size: 10.5px; color: var(--faint); }

/* Search */
body.dapi-docs .d-find { padding: 14px 16px 4px; }
body.dapi-docs .d-find-box { position: relative; display: flex; align-items: center; }
body.dapi-docs .d-find-box svg {
  position: absolute; left: 9px; width: 15px; height: 15px; color: var(--faint); pointer-events: none;
}
body.dapi-docs .d-find input {
  width: 100%; height: 32px; padding: 0 28px 0 30px; border: 1px solid var(--line);
  border-radius: 4px; background: var(--well); color: var(--ink);
  font-family: var(--font-body); font-size: 13px;
}
body.dapi-docs .d-find input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
body.dapi-docs .d-find input::placeholder { color: var(--faint); }
body.dapi-docs .d-find input:focus { outline: none; border-color: var(--ink); background: var(--bg); }
body.dapi-docs .d-find-clear {
  position: absolute; right: 6px; display: none; width: 20px; height: 20px;
  align-items: center; justify-content: center; color: var(--faint); border-radius: 4px;
}
body.dapi-docs .d-find-clear svg { position: static; width: 13px; height: 13px; }
body.dapi-docs .d-find.has-query .d-find-clear { display: inline-flex; }
body.dapi-docs .d-find-clear:hover { color: var(--ink); background: var(--ink-5); }
body.dapi-docs .d-find-empty {
  display: none; padding: 10px 18px 2px; font-size: 12.5px; color: var(--faint);
}
body.dapi-docs .d-find.is-empty .d-find-empty { display: block; }

/* Search results replace the nav list while a query is active */
body.dapi-docs .d-hits { display: none; padding: 6px 0 24px; }
body.dapi-docs .d-side.searching .d-hits { display: block; }
body.dapi-docs .d-side.searching .d-nav { display: none; }
body.dapi-docs .d-hit {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 8px; align-items: baseline;
  padding: 7px 18px;
}
body.dapi-docs .d-hit:hover { background: var(--ink-5); }
body.dapi-docs .d-hit-m { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; color: var(--faint); }
body.dapi-docs .d-hit-t {
  font-size: 13px; color: var(--ink); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.dapi-docs .d-hit-t.is-path { font-family: var(--font-mono); font-size: 11.5px; }
body.dapi-docs .d-hit-s {
  grid-column: 2; font-size: 12px; line-height: 1.4; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.dapi-docs .d-hit mark { background: none; color: var(--ink); box-shadow: inset 0 -1px 0 var(--line-2); }

/* Version switch */
body.dapi-docs .d-ver { display: flex; margin: 12px 16px 0; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
body.dapi-docs .d-ver a {
  flex: 1; display: block; padding: 6px 4px; border-left: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.02em;
  text-transform: uppercase; text-align: center; color: var(--muted); background: var(--bg);
}
body.dapi-docs .d-ver a:first-child { border-left: 0; }
body.dapi-docs .d-ver a:hover { background: var(--ink-5); color: var(--ink); }
body.dapi-docs .d-ver a[aria-current="page"] { background: var(--ink); color: var(--bg); }
body.dapi-docs .d-ver a[aria-current="page"]:hover { background: var(--ink); color: var(--bg); }

/* ---------- Topbar ---------- */
body.dapi-docs .d-topbar {
  position: sticky; top: 57px; z-index: 40; gap: 12px;
  padding: 0 var(--gutter); background: var(--bg);
}
body.dapi-docs .d-topbar-l, body.dapi-docs .d-topbar-r { display: flex; align-items: center; gap: 10px; }
body.dapi-docs .d-topbar-r { margin-left: auto; }
body.dapi-docs .d-topbar a { color: var(--muted); }
body.dapi-docs .d-topbar a:hover { color: var(--ink); }
body.dapi-docs .d-burger, body.dapi-docs .d-theme {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--ink);
}
body.dapi-docs .d-burger:hover, body.dapi-docs .d-theme:hover { background: var(--ink-5); border-color: var(--line-2); }
/* The one link in the top bar sits beside those two boxes; without a box of its
   own it reads as stray text rather than the destination it is. */
body.dapi-docs .d-topbar-r > a {
  height: 32px; display: inline-flex; align-items: center; padding: 0 11px;
  border: 1px solid var(--line); border-radius: 4px; background: var(--bg);
  color: var(--muted); text-decoration: none;
}
body.dapi-docs .d-topbar-r > a:hover { background: var(--ink-5); border-color: var(--ink); color: var(--ink); }
body.dapi-docs .d-theme svg, body.dapi-docs .d-burger svg { width: 16px; height: 16px; }
/* The button shows what a click will do: a moon while the page is light. */
body.dapi-docs .d-theme .ic-sun { display: none; }
html[data-theme="dark"] body.dapi-docs .d-theme .ic-sun { display: block; }
html[data-theme="dark"] body.dapi-docs .d-theme .ic-moon { display: none; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body.dapi-docs .d-theme .ic-sun { display: block; }
  html:not([data-theme="light"]) body.dapi-docs .d-theme .ic-moon { display: none; }
  html[data-theme="light"] body.dapi-docs .d-theme .ic-sun { display: none; }
  html[data-theme="light"] body.dapi-docs .d-theme .ic-moon { display: block; }
}

/* ---------- Hero ---------- */
body.dapi-docs .d-hero { padding-bottom: 4px; }
body.dapi-docs .d-hero h1 { font-size: clamp(38px, 6vw, 60px); }
body.dapi-docs .d-hero > p { font-size: 16.5px; max-width: 62ch; }
body.dapi-docs .d-hero-pills { gap: 0; margin-top: 28px; background: none; border: 1px solid var(--line); border-radius: 4px; }
body.dapi-docs .d-hero-pill { border-left: 1px solid var(--line); background: none; padding: 14px 18px; }
body.dapi-docs .d-hero-pill:first-child { border-left: 0; }
body.dapi-docs .d-hero-pill strong { font-family: var(--font-mono); font-size: 20px; letter-spacing: -0.02em; }

/* ---------- Sections and prose ---------- */
body.dapi-docs .d-section { padding: 40px 0 8px; scroll-margin-top: 118px; }
body.dapi-docs .d-hero { scroll-margin-top: 118px; }
body.dapi-docs .d-section h2 {
  font-family: var(--font-body); font-weight: 500; font-size: 25px;
  line-height: 1.2; letter-spacing: -0.012em; margin-bottom: 12px;
}
body.dapi-docs .d-section h3, body.dapi-docs .ep-body h3, body.dapi-docs .d-guide h3 {
  font-size: 15px; margin: 26px 0 8px; scroll-margin-top: 118px;
}
body.dapi-docs .d-section p, body.dapi-docs .ep-body p, body.dapi-docs .d-guide p {
  font-size: 15px; line-height: 1.62; color: var(--muted); max-width: 68ch;
}
body.dapi-docs .d-section strong, body.dapi-docs .ep-body strong { font-weight: 500; color: var(--ink); }
/* Inline code only. The `> code` matters: a <code> inside a <pre> is still an
   inline box, so with `white-space: pre` it fragments once per line and every
   line of a sample came out in its own bordered, tinted box. pages.css resets
   `pre code`, but this rule outranked that reset and put the chrome back. */
body.dapi-docs .d-section :not(pre) > code,
body.dapi-docs .ep-body :not(pre) > code,
body.dapi-docs .d-guide :not(pre) > code {
  font-size: 0.85em; background: var(--well); border: 1px solid var(--line); border-radius: 3px; color: var(--ink);
}
body.dapi-docs .info-grid { gap: 0; margin: 14px 0 18px; background: none; border: 1px solid var(--line); border-radius: 4px; }
body.dapi-docs .info-card { padding: 14px 18px; border-left: 1px solid var(--line); background: none; font-size: 13.5px; color: var(--muted); }
body.dapi-docs .info-card:first-child { border-left: 0; }
body.dapi-docs .info-card strong {
  display: block; margin-bottom: 4px; font-family: var(--font-mono);
  font-weight: 400; font-size: 15px; letter-spacing: -0.02em; color: var(--ink);
}
body.dapi-docs .eto-b {
  border-radius: 3px; font-size: 10px; letter-spacing: 0.04em; color: var(--faint);
  padding: 2px 5px; vertical-align: 3px;
}

/* ---------- Tables ---------- */
body.dapi-docs .pt { font-size: 13.5px; margin: 10px 0 18px; }
body.dapi-docs .pt th {
  padding: 0 14px 7px 0; font-size: 10.5px; letter-spacing: 0.02em; color: var(--faint);
}
body.dapi-docs .pt td { padding: 9px 14px 9px 0; color: var(--muted); }
body.dapi-docs .pt td:last-child, body.dapi-docs .pt th:last-child { padding-right: 0; }
body.dapi-docs .pn { font-size: 12.5px; }
body.dapi-docs .pty { font-size: 11.5px; color: var(--faint); }
body.dapi-docs .pr { font-size: 10px; letter-spacing: 0.02em; color: var(--tone-warn); }
body.dapi-docs .pty-null {
  font-family: var(--font-mono); border-radius: 3px !important; border-color: var(--line) !important;
  font-size: 10px !important; color: var(--faint) !important;
}

/* ---------- Endpoint rows ---------- */
body.dapi-docs .ep { border-color: var(--line); border-radius: 0; background: var(--bg); scroll-margin-top: 118px; }
body.dapi-docs .ep:first-of-type { border-radius: 4px 4px 0 0; }
body.dapi-docs .ep:last-of-type { border-radius: 0 0 4px 4px; }
body.dapi-docs .ep-head { gap: 10px; padding: 11px 14px; }
body.dapi-docs .ep-head:hover { background: var(--ink-5); }
body.dapi-docs .ep-path { font-size: 12.5px; letter-spacing: -0.01em; }
body.dapi-docs .ep-sum { font-size: 13px; color: var(--faint); min-width: 0; }
body.dapi-docs .ep-chev { width: 15px; height: 15px; }
body.dapi-docs .ep-body { padding: 2px 14px 18px; }
body.dapi-docs .ep-desc { font-size: 14.5px; color: var(--muted); }

/* Method chips: outline mono, three tones */
body.dapi-docs .m {
  min-width: 52px; text-align: center; border-radius: 3px; padding: 3px 6px;
  font-size: 10px; letter-spacing: 0.03em; background: none;
  border-color: var(--line-2); color: var(--muted);
}
body.dapi-docs .m-get { color: var(--tone-pos); border-color: color-mix(in srgb, var(--tone-pos) 45%, var(--line)); }
body.dapi-docs .m-post { color: var(--ink); border-color: var(--line-2); background: none; }
body.dapi-docs .m-put, body.dapi-docs .m-patch { color: var(--tone-warn); border-color: color-mix(in srgb, var(--tone-warn) 45%, var(--line)); }
body.dapi-docs .m-delete { color: var(--tone-neg); border-color: color-mix(in srgb, var(--tone-neg) 45%, var(--line)); }

/* Deep link */
body.dapi-docs .ep-link {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-left: 2px; border-radius: 4px; color: var(--faint); opacity: 0;
  transition: opacity 0.15s, color 0.15s, background-color 0.15s;
}
body.dapi-docs .ep-link svg { width: 14px; height: 14px; }
body.dapi-docs .ep:hover .ep-link, body.dapi-docs .ep-link:focus-visible { opacity: 1; }
body.dapi-docs .ep-link:hover { color: var(--ink); background: var(--ink-5); }
/* Copy-as-Markdown: the same hairline box as the theme toggle in the top bar,
   and the same ghost affordance as the deep link inside an endpoint header. The
   icon is a glyph in currentColor — no tinted square behind it. */
body.dapi-docs .d-md-copy {
  position: relative; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--ink);
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
body.dapi-docs .d-md-copy svg { width: 16px; height: 16px; }
body.dapi-docs .d-md-copy:hover { background: var(--ink-5); border-color: var(--line-2); }
body.dapi-docs .d-md-copy.is-done { color: var(--tone-pos); border-color: color-mix(in srgb, var(--tone-pos) 45%, var(--line)); }

body.dapi-docs .ep-md {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 4px; background: none; border: 0;
  color: var(--faint); opacity: 0;
  transition: opacity 0.15s, color 0.15s, background-color 0.15s;
}
body.dapi-docs .ep-md svg { width: 14px; height: 14px; }
body.dapi-docs .ep:hover .ep-md, body.dapi-docs .ep-md:focus-visible { opacity: 1; }
body.dapi-docs .ep-md:hover { color: var(--ink); background: var(--ink-5); }
body.dapi-docs .ep-md.is-done { color: var(--tone-pos); opacity: 1; }

body.dapi-docs [data-tip] { position: relative; }
body.dapi-docs [data-tip]:hover::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 5;
  padding: 4px 7px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg);
  box-shadow: 0 4px 14px rgba(7, 7, 7, 0.08); white-space: nowrap;
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.02em; color: var(--muted);
}

/* ---------- Code panels ---------- */
body.dapi-docs .d-code { margin: 12px 0 18px; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
body.dapi-docs .d-code-bar {
  display: flex; align-items: center; gap: 2px; height: 32px; padding: 0 6px 0 0;
  border-bottom: 1px solid var(--line); background: var(--bg);
}
body.dapi-docs .d-code-tab {
  padding: 0 10px; height: 31px; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--faint);
  border-bottom: 1px solid transparent; margin-bottom: -1px;
}
body.dapi-docs .d-code-tab:hover { color: var(--ink); }
body.dapi-docs .d-code-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
body.dapi-docs .d-code-lang {
  padding: 0 10px; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--faint);
}
body.dapi-docs .d-code-copy {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px; height: 24px; min-height: 24px;
  padding: 0 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--muted);
}
body.dapi-docs .d-code-copy svg { width: 12px; height: 12px; }
body.dapi-docs .d-code-copy:hover { border-color: var(--ink); color: var(--ink); background: var(--ink-5); }
body.dapi-docs .d-code-copy.is-done { color: var(--tone-pos); border-color: color-mix(in srgb, var(--tone-pos) 45%, var(--line)); }
body.dapi-docs .d-code pre, body.dapi-docs .d-guide .d-code pre {
  margin: 0; border: 0; border-radius: 0; padding: 14px 16px; background: var(--code-bg);
  font-size: 12.5px; line-height: 1.62; color: var(--text);
  white-space: pre; overflow-x: auto;
}
body.dapi-docs .d-code pre[hidden] { display: none; }
body.dapi-docs .d-section pre, body.dapi-docs .ep-body pre, body.dapi-docs .d-guide pre {
  border-radius: 4px; background: var(--code-bg); border-color: var(--line);
  padding: 14px 16px; font-size: 12.5px;
}
body.dapi-docs .cp { display: none; }
body.dapi-docs .d-cb-label { font-size: 10.5px; letter-spacing: 0.02em; color: var(--faint); }

/* ---------- Callouts ---------- */
/* A plain hairline box. The tone of a note is carried by its icon, never by a
   coloured bar down the edge. */
body.dapi-docs .d-note {
  gap: 11px; margin: 16px 0; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 4px; background: var(--bg);
  font-size: 13.5px; line-height: 1.55; color: var(--muted); max-width: 68ch;
}
body.dapi-docs .d-note strong { color: var(--ink); font-weight: 500; }
body.dapi-docs .d-note svg { width: 15px; height: 15px; margin-top: 2px; color: var(--faint); }
body.dapi-docs .d-note-warn svg { color: var(--tone-warn); }
body.dapi-docs .d-note-stop svg { color: var(--tone-neg); }
body.dapi-docs .d-note-ok svg { color: var(--tone-pos); }
body.dapi-docs .d-note a { color: var(--ink); }

/* ---------- Guides ---------- */
body.dapi-docs .d-guide {
  padding: 20px 20px 8px; border-color: var(--line); border-radius: 4px; background: var(--well);
}
body.dapi-docs .d-guide h3 { font-family: var(--font-display); font-size: 21px; }
body.dapi-docs .d-guide h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
body.dapi-docs .d-guide pre { background: var(--code-bg); }
body.dapi-docs .d-guide .d-code { background: var(--bg); }
body.dapi-docs .d-guide-block { padding: 16px 0; border-top: 1px solid var(--line); }
body.dapi-docs .d-guide-block:first-of-type { border-top: 0; padding-top: 4px; }
body.dapi-docs .d-guide-block p { max-width: 66ch; }
body.dapi-docs .d-guide-block p:last-child { margin-bottom: 0; }

/* Guide tables: a term, or an endpoint, beside the prose that explains it.
   Hairline rows, mono on the left, an explanation that wraps on the right.
   These carry what used to be forced through a code panel, where nothing wrapped
   and the right-hand half of every line was cut off. */
body.dapi-docs .d-gt {
  width: 100%; margin: 10px 0 18px; border-collapse: collapse;
  border-top: 1px solid var(--line); table-layout: fixed;
}
body.dapi-docs .d-gt tr { border-bottom: 1px solid var(--line); }
body.dapi-docs .d-gt td { padding: 9px 14px 9px 0; vertical-align: top; }
body.dapi-docs .d-gt td:last-child { padding-right: 0; }
body.dapi-docs .d-gt-t, body.dapi-docs .d-gt-p {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5;
  color: var(--ink); overflow-wrap: break-word;
}
body.dapi-docs .d-gt-n {
  font-size: 13.5px; line-height: 1.55; color: var(--muted); overflow-wrap: break-word;
}
body.dapi-docs .d-gt-def .d-gt-t { width: 32%; }
body.dapi-docs .d-gt-ep .d-gt-m { width: 56px; }
body.dapi-docs .d-gt-ep .d-gt-m .m { display: inline-block; }
/* Wide enough that a real path sits on one line; the note wraps instead. */
body.dapi-docs .d-gt-ep .d-gt-p { width: 54%; }

/* Under roughly 640px two columns stop being readable, so the row stacks:
   the term on its line, the explanation under it. Prose never scrolls sideways. */
@media (max-width: 639px) {
  body.dapi-docs .d-gt, body.dapi-docs .d-gt tbody,
  body.dapi-docs .d-gt tr, body.dapi-docs .d-gt td { display: block; width: auto; }
  body.dapi-docs .d-gt tr { padding: 10px 0; }
  body.dapi-docs .d-gt td { padding: 0 0 3px; }
  body.dapi-docs .d-gt td:last-child { padding-bottom: 0; }
  /* The column widths belong to the two-column layout; stacked, every cell is
     the full width, or a term breaks mid-word with room to spare beside it. */
  body.dapi-docs .d-gt-def .d-gt-t,
  body.dapi-docs .d-gt-ep .d-gt-m,
  body.dapi-docs .d-gt-ep .d-gt-p { width: auto; }
  body.dapi-docs .d-gt-ep .d-gt-m { margin-bottom: 5px; }
}

/* ---------- Errors ---------- */
body.dapi-docs .err { padding: 12px 0; gap: 3px 16px; }
body.dapi-docs .err-code { font-size: 12.5px; color: var(--ink); }
body.dapi-docs .err-st { font-size: 12.5px; color: var(--faint); }
body.dapi-docs .err-msg { font-size: 13.5px; color: var(--muted); }
body.dapi-docs .err-hint { font-size: 12.5px; color: var(--faint); }
body.dapi-docs .err-4xx .err-code { color: var(--tone-warn); }
body.dapi-docs .err-5xx .err-code { color: var(--tone-neg); }

/* ---------- Right rail ---------- */
body.dapi-docs .d-toc { display: none; }
body.dapi-docs .d-toc-label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--faint); padding-bottom: 8px;
}
/* Rows wrap instead of ending in an ellipsis: the chip holds its own column,
   so a summary that runs to a second line hangs under the first rather than
   under the chip. Nothing here clips. */
body.dapi-docs .d-toc a {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 7px;
  align-items: start; padding: 5px 0 5px 12px; border-left: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.38; color: var(--faint);
  min-width: 0; max-width: 100%;
}
/* A label longer than the rail wraps inside it at any width or zoom; it never
   runs past the rail's edge into the page. */
body.dapi-docs .d-toc a > .d-toc-t { grid-column: 2; min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
body.dapi-docs .d-toc a > .d-toc-t:only-child { grid-column: 1 / -1; }
body.dapi-docs .d-toc-t.is-path { font-family: var(--font-mono); font-size: 11.5px; }
body.dapi-docs .d-toc-t.is-path em { font-style: normal; color: var(--muted); }
/* An outline chip, never a fill — the tone comes from the method colours the
   endpoint rows already use. */
body.dapi-docs .d-toc-m {
  min-width: 0; margin-top: 1px; padding: 1px 4px; border-radius: 3px;
  font-size: 10px; line-height: 1.4; letter-spacing: 0.02em; background: none;
}
body.dapi-docs .d-toc a:hover { color: var(--ink); border-left-color: var(--line-2); }
body.dapi-docs .d-toc a.active { color: var(--ink); border-left-color: var(--ink); }
body.dapi-docs .d-toc:empty, body.dapi-docs .d-toc.is-empty { display: none; }

body.dapi-docs .d-foot { padding: 36px 0 0; font-size: 13px; color: var(--faint); }
body.dapi-docs .d-foot a { color: var(--muted); }

/* ---------- Breakpoints ---------- */
@media (min-width: 900px) {
  body.dapi-docs .lp-docs { grid-template-columns: 264px minmax(0, 1fr); }
  body.dapi-docs .d-content { max-width: 808px; padding: 40px 44px 96px; }
  body.dapi-docs .ep-sum { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.dapi-docs .ep-head { flex-wrap: nowrap; }
}
@media (min-width: 1280px) {
  body.dapi-docs .d-body { grid-template-columns: minmax(0, 1fr) minmax(200px, 248px); }
  body.dapi-docs .d-content { padding-right: 24px; }
  body.dapi-docs .d-toc {
    display: block; position: sticky; top: 117px; align-self: start;
    max-height: calc(100vh - 137px); overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
    padding: 44px 20px 40px 0; min-width: 0;
  }
  body.dapi-docs .d-toc::-webkit-scrollbar { display: none; }
}
@media (max-width: 899px) {
  body.dapi-docs .d-side { width: min(304px, 88vw); box-shadow: 0 18px 44px rgba(7, 7, 7, 0.14); }
  body.dapi-docs .d-hero-pills { grid-template-columns: 1fr; }
  body.dapi-docs .d-hero-pill { border-left: 0; border-top: 1px solid var(--line); }
  body.dapi-docs .d-hero-pill:first-child { border-top: 0; }
  body.dapi-docs .ep-head { gap: 8px; }
  body.dapi-docs .ep-sum { flex: 1 0 100%; }
}
@media (min-width: 640px) {
  body.dapi-docs .err { grid-template-columns: 230px 52px 1fr; }
}

/* ---------- Where everything is ----------
   The app half of the reference: a page per h3, a hairline table per section.
   No cards — the tables already carry hairlines, so pages are separated by one
   rule and whitespace instead of another box. */
/* The filter stays under the topbar while the reader scrolls the 1,192 rows,
   so a search is never a scroll-to-top away. It sticks only inside its own
   section, then scrolls away with it. */
body.dapi-docs .wm-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 18px 0 6px; position: sticky; top: 117px; z-index: 5;
  padding: 10px 0; background: var(--bg);
  border-bottom: 1px solid transparent;
}
body.dapi-docs .wm-bar.is-stuck { border-bottom-color: var(--line); }
/* The public site's column guide lines run the full page height; on the docs
   they cut straight through the rail and the content, so the docs draw none. */
body.dapi-docs .lp-rails { display: none; }
body.dapi-docs .wm-find { position: relative; flex: 1 1 260px; max-width: 340px; display: flex; align-items: center; }
body.dapi-docs .wm-find svg {
  position: absolute; left: 9px; width: 15px; height: 15px; color: var(--faint); pointer-events: none;
}
body.dapi-docs .wm-find input {
  width: 100%; height: 32px; padding: 0 10px 0 30px; border: 1px solid var(--line);
  border-radius: 4px; background: var(--well); color: var(--ink);
  /* Mono, because what it filters is mono: the paths and the operation ids. */
  font-family: var(--font-mono); font-size: 12px;
}
body.dapi-docs .wm-find input::placeholder { color: var(--faint); }
body.dapi-docs .wm-find input:focus { outline: none; border-color: var(--ink); background: var(--bg); }
body.dapi-docs .wm-find input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
body.dapi-docs .wm-count {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--faint); white-space: nowrap;
}
body.dapi-docs .wm-copy-slot { margin-left: auto; display: inline-flex; }

body.dapi-docs .wm-page { padding-top: 26px; border-top: 1px solid var(--line); margin-top: 26px; }
body.dapi-docs .wm-page:first-of-type { border-top: 0; }
body.dapi-docs .wm-page[hidden] { display: none; }
body.dapi-docs .wm-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
body.dapi-docs .wm-head h3 { margin: 0; scroll-margin-top: 118px; }
body.dapi-docs .wm-url {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--muted);
  text-decoration: none; border-bottom: 1px solid var(--line);
}
body.dapi-docs .wm-url:hover { color: var(--ink); border-bottom-color: var(--line-2); }
body.dapi-docs .wm-n {
  margin-left: auto; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.02em; color: var(--faint);
}
body.dapi-docs .wm-sum { margin-top: 6px !important; max-width: 720px; }
body.dapi-docs .wm-page .wm-md { margin-left: 2px; }

body.dapi-docs .wm-sec { margin-top: 18px; }
body.dapi-docs .wm-sec[hidden] { display: none; }
body.dapi-docs .wm-sec-t {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--faint);
  padding-bottom: 4px;
}
body.dapi-docs .wm-t { margin: 4px 0 0; table-layout: auto; }
body.dapi-docs .wm-t th:nth-child(1) { width: 19%; }
body.dapi-docs .wm-t th:nth-child(2) { width: 35%; }
body.dapi-docs .wm-t th:nth-child(3) { width: 31%; }
body.dapi-docs .wm-t th:nth-child(4) { width: 15%; }
/* Operation ids run to 25 characters, which no sane column fits on one line.
   Break at the edge instead of letting the id widen the whole table. */
body.dapi-docs .wm-t td:nth-child(4) { overflow-wrap: anywhere; }
body.dapi-docs .wm-row { scroll-margin-top: 128px; }
body.dapi-docs .wm-row[hidden] { display: none; }
body.dapi-docs .wm-name { color: var(--ink); text-decoration: none; }
body.dapi-docs .wm-name:hover { border-bottom: 1px solid var(--line-2); }
body.dapi-docs .wm-path {
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; color: var(--muted);
}
/* A prerequisite is context, not an alarm: whole sections of the map need a
   connected store, and warn-tone on every row of them just reads as noise. */
body.dapi-docs .wm-req {
  display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--faint);
}
body.dapi-docs .wm-api { font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-decoration: none; }
body.dapi-docs a.wm-api:hover { color: var(--ink); border-bottom: 1px solid var(--line-2); }
body.dapi-docs .wm-dash { color: var(--faint); }
body.dapi-docs .wm-empty { color: var(--faint); }
body.dapi-docs .wm-foot { margin-top: 26px !important; padding-top: 18px; border-top: 1px solid var(--line); }

@media (max-width: 899px) {
  /* Four columns collapse below a phone width, so each row becomes a stacked
     record with its own label instead of a squeezed table. */
  body.dapi-docs .wm-t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body.dapi-docs .wm-t, body.dapi-docs .wm-t tbody, body.dapi-docs .wm-t tr, body.dapi-docs .wm-t td { display: block; width: auto; }
  body.dapi-docs .wm-t tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  body.dapi-docs .wm-t tr:last-child { border-bottom: 0; }
  body.dapi-docs .wm-t td { padding: 2px 0; border: 0; }
  body.dapi-docs .wm-t td:first-child { padding-bottom: 4px; }
  body.dapi-docs .wm-t td:empty { display: none; }
  /* Stacked, a lone em dash for "no API" is noise: drop the cell instead. */
  body.dapi-docs .wm-t td:nth-child(4):has(.wm-dash) { display: none; }
  body.dapi-docs .wm-head h3 { flex: 1 0 100%; }
  body.dapi-docs .wm-n { margin-left: 0; }
}