/* Token names and values follow services/bookstore/storefront/css/bookwise-tokens.css;
   --docs-* tokens cover what the design system lacks. */

:root {
  color-scheme: light;

  /* Primitives (mode-independent) */
  --stone-10: #161616;
  --stone-13: #1f1f1f;
  --stone-15: #292929;
  --stone-17: #2e2e2e;
  --stone-20: #333333;
  --stone-25: #3d3d3d;
  --stone-40: #5d5d5d;
  --stone-45: #696968;
  --stone-50: #7b7a79;
  --stone-55: #878684;
  --stone-65: #a6a4a0;
  --stone-70: #b3b1ac;
  --stone-85: #dbd7cd;
  --stone-90: #efebdf;
  --stone-93: #f5f1e8;
  --stone-95: #f8f5ed;
  --stone-97: #fbf9f3;
  --stone-100: #ffffff;
  --stone-10-90: rgba(22, 22, 22, 0.90);
  --stone-20-85: rgba(51, 51, 51, 0.85);
  --stone-50-10: rgba(123, 122, 121, 0.10);
  --stone-50-15: rgba(123, 122, 121, 0.15);
  --stone-50-20: rgba(123, 122, 121, 0.20);
  --stone-50-28: rgba(123, 122, 121, 0.28);
  --stone-50-50: rgba(123, 122, 121, 0.50);
  --stone-97-90: rgba(251, 249, 243, 0.90);
  --orange-30: #ca3500;
  --orange-50: #ff6900;
  --orange-60: #ff8904;
  --orange-70: #ffb86a;
  --orange-80: #ffd6a7;
  --orange-50-10: rgba(255, 105, 0, 0.10);
  --orange-50-23: rgba(255, 105, 0, 0.23);
  --blue-10: #1e3a8a;
  --blue-50: #2675de;
  --blue-70: #7caeec;
  --green-30: #15803d;
  --green-70: #86efac;
  --indigo-40: #4f46e5;
  --indigo-70: #a5b4fc;

  /* Semantic tokens, light */
  --surface-primary: var(--stone-97);
  --surface-secondary: var(--stone-95);
  --surface-tertiary: var(--stone-93);
  --surface-elevated: var(--stone-100);
  --surface-primary-alpha-90: var(--stone-97-90);
  --text-primary: var(--stone-20);
  --text-secondary: var(--stone-50);
  --text-tertiary: var(--stone-65);
  --border-subtle: var(--stone-93);
  --border-medium: var(--stone-90);
  --border-strong: var(--stone-85);
  --border-focus: var(--orange-60);
  --interactive-default: var(--orange-50);
  --interactive-text: var(--blue-50);

  /* Component tokens, light */
  --component-button-accent-subtle-background: var(--orange-50-10);
  --component-button-accent-subtle-text: var(--orange-50);
  --component-button-neutral-subtle-background: var(--stone-50-10);
  --component-button-neutral-ghost-background-hover: var(--stone-50-15);
  --component-segmented-controller-background: var(--stone-93);
  --component-segmented-controller-background-selected: var(--stone-100);
  --component-switch-background-active: var(--orange-50);
  --component-switch-background-inactive: var(--stone-70);

  /* Shadows (recipes stay constant; colors swap by mode) */
  --shadow-drop-color: rgba(0, 0, 0, 0.10);
  --shadow-100-inset-top: rgba(255, 255, 255, 0);
  --shadow-100-inset-perimeter: rgba(255, 255, 255, 0);
  --shadow-100-ambient-ring: rgba(0, 0, 0, 0.10);
  --shadow-300-inset-top: rgba(255, 255, 255, 0);
  --shadow-300-inset-perimeter: rgba(255, 255, 255, 0);
  --shadow-300-ambient-ring: rgba(0, 0, 0, 0.10);
  --shadow-100:
    inset 0 1px 0 0 var(--shadow-100-inset-top),
    inset 0 0 0 1px var(--shadow-100-inset-perimeter),
    0 0 0 1px var(--shadow-100-ambient-ring),
    0 1px 1px -0.5px var(--shadow-drop-color),
    0 3px 3px -1.5px var(--shadow-drop-color);
  --shadow-300:
    inset 0 1px 0 0 var(--shadow-300-inset-top),
    inset 0 0 0 1px var(--shadow-300-inset-perimeter),
    0 0 0 1px var(--shadow-300-ambient-ring),
    0 1px 1px -0.5px var(--shadow-drop-color),
    0 3px 3px -1.5px var(--shadow-drop-color),
    0 6px 6px -3px var(--shadow-drop-color),
    0 12px 12px -6px var(--shadow-drop-color),
    0 24px 24px -12px var(--shadow-drop-color);

  /* Docs tokens (design-system gap), light */
  --docs-code-background: var(--stone-95);
  --docs-code-border: var(--stone-90);
  --docs-inline-code-background: var(--stone-50-10);
  --docs-table-head-background: var(--stone-95);
  --docs-table-rule: var(--stone-90);
  --docs-callout-background: var(--orange-50-10);
  --docs-callout-border: var(--orange-50-23);
  --docs-callout-title: var(--orange-30);

  /* Type, shape, space */
  --font-ui: "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --radius-card: 20px;
  --radius-pill: 48px;
  --radius-inner: 14px;
  --radius-chip: 6px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --sidebar-width: 272px;
  --topbar-height: 56px;
}

[data-theme="dark"] {
color-scheme: dark;

  /* Semantic tokens, dark values from bookwise-tokens.css */
  --surface-primary: var(--stone-10);
  --surface-secondary: var(--stone-13);
  --surface-tertiary: var(--stone-15);
  --surface-elevated: var(--stone-17);
  --surface-primary-alpha-90: var(--stone-10-90);
  --text-primary: var(--stone-90);
  --text-secondary: var(--stone-55);
  --text-tertiary: var(--stone-45);
  --border-subtle: var(--stone-20);
  --border-medium: var(--stone-25);
  --border-strong: var(--stone-40);
  --border-focus: var(--orange-70);
  --interactive-default: var(--orange-60);
  --interactive-text: var(--blue-70);
  --component-button-accent-subtle-background: var(--orange-50-23);
  --component-button-accent-subtle-text: var(--orange-70);
  --component-button-neutral-subtle-background: var(--stone-50-20);
  --component-button-neutral-ghost-background-hover: var(--stone-50-28);
  --component-segmented-controller-background: var(--stone-20-85);
  --component-segmented-controller-background-selected: var(--stone-50-50);
  --component-switch-background-active: var(--orange-60);
  --component-switch-background-inactive: var(--stone-40);

  --shadow-drop-color: rgba(0, 0, 0, 0.18);
  --shadow-100-inset-top: rgba(255, 255, 255, 0.05);
  --shadow-100-inset-perimeter: rgba(255, 255, 255, 0.02);
  --shadow-100-ambient-ring: rgba(0, 0, 0, 0.12);
  --shadow-300-inset-top: rgba(255, 255, 255, 0.08);
  --shadow-300-inset-perimeter: rgba(255, 255, 255, 0.06);
  --shadow-300-ambient-ring: rgba(0, 0, 0, 0.18);

  /* Docs tokens (design-system gap), dark values */
  --docs-code-background: var(--stone-13);
  --docs-code-border: var(--stone-20);
  --docs-inline-code-background: var(--stone-50-20);
  --docs-table-head-background: var(--stone-13);
  --docs-table-rule: var(--stone-25);
  --docs-callout-background: var(--orange-50-10);
  --docs-callout-border: var(--orange-50-23);
  --docs-callout-title: var(--orange-70);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
color-scheme: dark;

  /* Semantic tokens, dark values from bookwise-tokens.css */
  --surface-primary: var(--stone-10);
  --surface-secondary: var(--stone-13);
  --surface-tertiary: var(--stone-15);
  --surface-elevated: var(--stone-17);
  --surface-primary-alpha-90: var(--stone-10-90);
  --text-primary: var(--stone-90);
  --text-secondary: var(--stone-55);
  --text-tertiary: var(--stone-45);
  --border-subtle: var(--stone-20);
  --border-medium: var(--stone-25);
  --border-strong: var(--stone-40);
  --border-focus: var(--orange-70);
  --interactive-default: var(--orange-60);
  --interactive-text: var(--blue-70);
  --component-button-accent-subtle-background: var(--orange-50-23);
  --component-button-accent-subtle-text: var(--orange-70);
  --component-button-neutral-subtle-background: var(--stone-50-20);
  --component-button-neutral-ghost-background-hover: var(--stone-50-28);
  --component-segmented-controller-background: var(--stone-20-85);
  --component-segmented-controller-background-selected: var(--stone-50-50);
  --component-switch-background-active: var(--orange-60);
  --component-switch-background-inactive: var(--stone-40);

  --shadow-drop-color: rgba(0, 0, 0, 0.18);
  --shadow-100-inset-top: rgba(255, 255, 255, 0.05);
  --shadow-100-inset-perimeter: rgba(255, 255, 255, 0.02);
  --shadow-100-ambient-ring: rgba(0, 0, 0, 0.12);
  --shadow-300-inset-top: rgba(255, 255, 255, 0.08);
  --shadow-300-inset-perimeter: rgba(255, 255, 255, 0.06);
  --shadow-300-ambient-ring: rgba(0, 0, 0, 0.18);

  /* Docs tokens (design-system gap), dark values */
  --docs-code-background: var(--stone-13);
  --docs-code-border: var(--stone-20);
  --docs-inline-code-background: var(--stone-50-20);
  --docs-table-head-background: var(--stone-13);
  --docs-table-rule: var(--stone-25);
  --docs-callout-background: var(--orange-50-10);
  --docs-callout-border: var(--orange-50-23);
  --docs-callout-title: var(--orange-70);
  }
}

/* ------------------------------------------------------------------ */
/* Base                                                                 */
/* ------------------------------------------------------------------ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--surface-primary);
  color: var(--text-primary);
  font: 400 15px/1.55 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--interactive-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-chip); }

code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--docs-inline-code-background);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-chip);
  overflow-wrap: anywhere;
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; line-height: 1.2; }

[id] { scroll-margin-top: var(--space-24); }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--space-16); top: var(--space-16); z-index: 50; background: var(--surface-elevated); padding: var(--space-8) var(--space-16); border-radius: var(--radius-pill); }

/* ------------------------------------------------------------------ */
/* Layout: sticky sidebar + content                                    */
/* ------------------------------------------------------------------ */

.layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  gap: var(--space-48);
  max-width: 1920px;
  margin: 0 auto;
  padding-inline: var(--space-32);
}

main { min-width: 0; padding-block: var(--space-32) 120px; outline: none; }

.topbar { display: none; }

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block: var(--space-32);
  scrollbar-width: thin;
}

.sidebar-head { display: flex; flex-direction: column; gap: var(--space-16); padding: 0 var(--space-12) var(--space-24); }

.brand { color: var(--text-primary); text-decoration: none; font-size: 20px; font-weight: 600; }

.sign-in { font-size: 14px; }

.theme-control {
  display: inline-flex;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--component-segmented-controller-background);
  align-self: flex-start;
}

.theme-option, .tab {
  font: 500 13px/1 var(--font-ui);
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
}

.theme-option[aria-pressed="true"], .tab[aria-selected="true"] {
  background: var(--component-segmented-controller-background-selected);
  color: var(--text-primary);
  box-shadow: var(--shadow-100);
}

.menu ol { list-style: none; margin: 0; padding: 0; }
.menu > ol > li { margin-bottom: 2px; }
.menu ol ol { margin: 2px 0 var(--space-12); }

.menu a {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: 7px var(--space-12);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

.menu a::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
}

.menu a:hover { background: var(--component-button-neutral-ghost-background-hover); color: var(--text-primary); }
.menu a.is-section-active { color: var(--text-primary); }
.menu a.is-active { background: var(--surface-elevated); color: var(--text-primary); box-shadow: var(--shadow-100); }
.menu a.is-active::before { background: var(--interactive-default); }

.menu a.sub { font-size: 13px; padding-left: var(--space-24); }
.m-method { font: 600 11px/1 var(--font-mono); color: var(--text-tertiary); min-width: 44px; }
.m-path { font: 500 12.5px/1.3 var(--font-mono); overflow-wrap: anywhere; }
.menu a.is-active .m-method { color: var(--text-secondary); }

/* ------------------------------------------------------------------ */
/* Content                                                              */
/* ------------------------------------------------------------------ */

.doc-section { margin-bottom: var(--space-64); }
.prose { max-width: 760px; }
.prose p, .endpoint p { margin: 0 0 var(--space-12); }

.title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); margin-bottom: var(--space-16); }
h1 { font-size: 34px; letter-spacing: -0.01em; }
h2 { font-size: 26px; margin-bottom: var(--space-16); }
.subsection { margin-top: var(--space-48); }
.prose h3, .subsection h3 { font-size: 20px; margin: var(--space-32) 0 var(--space-12); }
.subsection > h3 { margin-top: 0; }

.anchor {
  margin-left: var(--space-8);
  font-size: 0.7em;
  font-weight: 500;
  color: var(--text-tertiary);
  text-decoration: none;
  opacity: 0;
}
h1:hover .anchor, h2:hover .anchor, h3:hover .anchor, .anchor:focus-visible { opacity: 1; }
.anchor:hover { color: var(--text-secondary); text-decoration: none; }
@media (hover: none) { .anchor { opacity: 1; } }

.lede {
  font-size: 20px;
  line-height: 1.5;
  color: var(--text-primary);
  margin-bottom: var(--space-24);
}

.pill {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--component-button-neutral-subtle-background);
  color: var(--text-secondary);
}

.pill-accent { background: var(--component-button-accent-subtle-background); color: var(--component-button-accent-subtle-text); }

.callout {
  background: var(--docs-callout-background);
  border: 1px solid var(--docs-callout-border);
  border-radius: var(--radius-inner);
  padding: var(--space-16) var(--space-20);
  margin: var(--space-16) 0;
}
.callout + .callout { margin-top: var(--space-12); }
.callout p { margin: 0; }
.callout strong { color: var(--docs-callout-title); }

.steps { margin: 0 0 var(--space-16); padding-left: var(--space-24); }
.steps li { margin-bottom: var(--space-8); padding-left: var(--space-4); }

.uc-call { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); margin: var(--space-16) 0 var(--space-8); }
.uc-call a { display: inline-flex; align-items: center; gap: var(--space-8); text-decoration: none; }
.uc-call a:hover .path { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.uc-call .method { padding: 5px 10px; }
.uc-call .uc-query { background: none; padding: 0; color: var(--text-secondary); overflow-wrap: anywhere; }
.agent-prompt { margin: var(--space-16) 0; }
.agent-prompt pre { white-space: pre-wrap; }

.uc-optional {
  font: 500 11px/1 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  background: var(--component-button-neutral-subtle-background);
  color: var(--text-secondary);
}
.steps > li > .uc-call:first-child { margin-top: 0; }

/* Resource sections and endpoint cards */

.resource > .prose { margin-bottom: var(--space-24); }

.endpoint {
  background: var(--surface-elevated);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-100);
  padding: var(--space-32);
  margin-bottom: var(--space-32);
}

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.disclosure {
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-inner);
  padding: var(--space-12) var(--space-16);
  margin: var(--space-16) 0;
}
.disclosure summary { font-weight: 600; cursor: pointer; }
.disclosure[open] summary { margin-bottom: var(--space-12); }

.token-panel {
  background: var(--surface-elevated);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-100);
  padding: var(--space-32);
  margin-bottom: var(--space-32);
}
.token-panel h3 { font-size: 20px; margin: 0 0 var(--space-12); }
.token-panel .code { margin-bottom: var(--space-16); }
.token-action { text-align: right; }
.token-action form { margin: 0; }

.token-mint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
  margin-top: var(--space-16);
}
.token-mint label { font-weight: 500; color: var(--text-secondary); }
.token-mint input[type="text"] {
  flex: 1 1 200px;
  font: 400 14px/1 var(--font-ui);
  color: var(--text-primary);
  background: var(--surface-primary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-pill);
  padding: 10px 14px;
}
.token-mint input[type="text"]:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }

.token-button {
  font: 500 13px/1 var(--font-ui);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.token-button:hover { background: var(--component-button-neutral-ghost-background-hover); color: var(--text-primary); }
.token-button-accent {
  border-color: transparent;
  background: var(--component-button-accent-subtle-background);
  color: var(--component-button-accent-subtle-text);
}

.endpoint-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-12); margin-bottom: var(--space-12); }
.endpoint-head h3 { font-size: 20px; margin: 0; }

.endpoint-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-12); }

.method {
  font: 600 12px/1 var(--font-mono);
  letter-spacing: 0.04em;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: var(--component-button-neutral-subtle-background);
  color: var(--text-primary);
}

.path {
  font: 500 16px/1.4 var(--font-mono);
  background: none;
  border: 0;
  padding: 0;
  color: var(--text-primary);
  text-align: left;
}
button.path { cursor: pointer; }
.copy-path-hint {
  margin-left: var(--space-8);
  font: 500 12px/1 var(--font-ui);
  color: var(--text-tertiary);
  opacity: 0;
}
button.path:hover .copy-path-hint, button.path:focus-visible .copy-path-hint { opacity: 1; }
@media (hover: none) { .copy-path-hint { opacity: 1; } }
.path-base { color: var(--text-tertiary); }

.purpose { font-size: 17px; }
.rate-limit { font-size: 14px; color: var(--text-secondary); }
.rate-limit strong { color: var(--text-primary); font-weight: 600; }
.rate-limit code { color: var(--text-primary); white-space: nowrap; }

.endpoint-grid { display: grid; gap: var(--space-32); margin-top: var(--space-24); }
.endpoint-docs { min-width: 0; }

.block-title { font-size: 15px; margin: var(--space-24) 0 var(--space-12); }
.endpoint-docs > .block-title:first-child, .examples > .block-title { margin-top: 0; }

.field-table { margin-bottom: var(--space-20); }
.table-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin: 0 0 var(--space-8); }
.table-title .model-name { font: 500 12px/1 var(--font-mono); color: var(--text-tertiary); margin-left: var(--space-8); }
.table-intro { font-size: 14px; }

/* Parameter tables (design-system gap) */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--docs-table-rule);
  border-radius: var(--radius-inner);
  background: var(--surface-elevated);
  margin-bottom: var(--space-16);
}

table.fields { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; line-height: 1.45; }
table.fields:not(.simple):not(.order-table) { min-width: 640px; }
table.fields.simple, table.fields.order-table { min-width: 440px; }

.fields th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--docs-table-head-background);
  padding: 10px 14px;
  white-space: nowrap;
}

.fields td { padding: 11px 14px; border-top: 1px solid var(--docs-table-rule); vertical-align: top; }

.fields .c-name code { background: none; padding: 0; font-weight: 600; font-size: 13px; color: var(--text-primary); overflow-wrap: normal; white-space: nowrap; }
.fields .c-limits { min-width: 150px; color: var(--text-secondary); }
.fields .c-desc { min-width: 170px; }
.fields .c-limits code { color: var(--text-primary); white-space: nowrap; overflow-wrap: normal; }
.fields .c-dirs code { display: inline-block; margin: 0 4px 4px 0; white-space: nowrap; }

.type { display: block; font: 500 12.5px/1.4 var(--font-mono); color: var(--text-secondary); }
.type-link { display: inline-block; margin-top: 2px; font-size: 12.5px; }
.flag-yes { color: var(--text-primary); font-weight: 500; }
.flag-no { color: var(--text-tertiary); }

/* Code blocks and examples (design-system gap) */

.code {
  border: 1px solid var(--docs-code-border);
  background: var(--docs-code-background);
  border-radius: var(--radius-inner);
  margin: var(--space-12) 0 var(--space-16);
  overflow: hidden;
}

.code-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-8);
  padding: 6px 6px 6px var(--space-16);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--docs-code-border);
}

.copy {
  font: 500 12px/1 var(--font-ui);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 7px 12px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.copy:hover { background: var(--component-button-neutral-ghost-background-hover); color: var(--text-primary); }

pre {
  margin: 0;
  padding: var(--space-16);
  overflow: auto;
  font: 400 12.5px/1.6 var(--font-mono);
  color: var(--text-primary);
  tab-size: 2;
}
pre code { background: none; padding: 0; font-size: inherit; border-radius: 0; overflow-wrap: normal; }

.examples { min-width: 0; }
.tablist {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--component-segmented-controller-background);
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
  width: max-content;
}
.tablist::-webkit-scrollbar { display: none; }
.tabpanel .code { margin-top: var(--space-12); }

/* Two-column reference layout: docs left, examples right (design-system gap) */

@media (min-width: 1680px) {
  .endpoint-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr); align-items: start; }
  .examples { position: sticky; top: var(--space-24); }
  .examples pre { max-height: calc(100vh - 190px); }
}

/* ------------------------------------------------------------------ */
/* Narrow screens: menu collapses into a control at the top            */
/* ------------------------------------------------------------------ */

@media (max-width: 1023px) {
  [id] { scroll-margin-top: calc(var(--topbar-height) + var(--space-16)); }

  .layout { display: block; padding-inline: var(--space-16); }

  .topbar {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    position: sticky;
    top: 0;
    z-index: 30;
    height: var(--topbar-height);
    padding-inline: var(--space-16);
    background: var(--surface-primary-alpha-90);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-medium);
  }

  .menu-button {
    font: 600 14px/1 var(--font-ui);
    border: 0;
    border-radius: var(--radius-pill);
    padding: 10px 18px;
    background: var(--surface-elevated);
    color: var(--text-primary);
    box-shadow: var(--shadow-100);
    cursor: pointer;
    flex: none;
  }

  .topbar-current {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
  }

  .sidebar {
    display: none;
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    right: 0;
    z-index: 25;
    height: auto;
    max-height: calc(100vh - var(--topbar-height));
    max-height: calc(100dvh - var(--topbar-height));
    padding: var(--space-16);
    background: var(--surface-elevated);
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    box-shadow: var(--shadow-300);
  }
  .sidebar.is-open { display: block; }
  .sidebar-head { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-bottom: var(--space-16); }
  .brand { font-size: 17px; }
  .menu a.is-active { background: var(--component-button-neutral-subtle-background); box-shadow: none; }

  main { padding-top: var(--space-24); }
  .endpoint { padding: var(--space-24); }
}

@media (max-width: 560px) {
  body { font-size: 15px; }
  h1 { font-size: 28px; }
  h2 { font-size: 24px; }
  .endpoint { padding: var(--space-16); }
    .purpose, .lede { font-size: 16px; }
  .path { font-size: 14px; }
  }