/* GlideAPI documentation workspace. Canonical tokens copied from brand-system.css. */
:root {
  color-scheme: dark;
  /* Kept in step with brand-system.css and landing.html. These are a copy, not
     a reference, because docs.css is the only stylesheet on the docs page - so
     when the canonical ramp gained chroma the copy here had to gain it too, or
     the docs would stay the flat neutral grey the rest of the site left behind.
     test/paletteConsistency asserts the three files agree. */
  --bg: oklch(0.170 0.026 260);
  --bg-deep: oklch(0.124 0.028 260);
  --bg-raise: oklch(0.210 0.028 260);
  --surface: oklch(0.242 0.030 260);
  --surface-2: oklch(0.200 0.028 260);
  --surface-3: oklch(0.298 0.032 259);
  --fg: oklch(0.982 0.005 259);
  --body: oklch(0.856 0.014 259);
  --muted: oklch(0.688 0.022 259);
  --border: oklch(0.322 0.030 260);
  --border-2: oklch(0.400 0.032 259);
  --accent: oklch(0.720 0.148 252);
  --accent-dim: color-mix(in oklch, var(--accent) 14%, transparent);
  --accent-line: color-mix(in oklch, var(--accent) 34%, transparent);
  --field-sunk: oklch(0.120 0.030 260);
  --field-tint: oklch(0.222 0.058 258);
  /* Full fallback chains, kept in step with landing.html and brand-system.css -
     see the note there. test/paletteConsistency asserts the three agree. */
  --font-display: Geist, system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-body: Geist, system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Radius scale, widened 2026-09-01 in step with landing.html and
     brand-system.css - see the note at either declaration. The docs page loads
     no shared sheet, so this third copy is the only way its panels, tab strips,
     search dialog and page-nav buttons round like the rest of the site. */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --docs-left: 292px;
  --docs-right: 248px;
  --docs-header: 64px;
  --docs-reading: 880px;
}

html {
  min-width: 0;
  min-height: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
}
/* This page used to hide its own vertical bar and the bars of its four inner
   scrollers, because the default bar is a 15px grey channel and there are five of
   them stacked across the layout. polish.css section 11 draws a thin inset pill
   instead, so the reason to hide them is gone - and hiding them cost the reader
   the one indicator of where they are in a 4000-line document, and cost the wide
   API tables any sign that they scroll sideways at all.

   `overflow-x: clip` stays: it is what stops a wide table from producing a
   horizontal *page* rail, which is a different bar from the one inside
   `.table-wrap`. Nothing here restates `scrollbar-width`; the inherited `thin`
   from polish.css reaches all five. */

body {
  min-width: 0;
  min-height: 100%;
  margin: 0;
  overflow-x: clip;
  background: var(--bg) !important;
  color: var(--body) !important;
  font-family: var(--font-body) !important;
}
*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; letter-spacing: 0; }
img, svg { max-width: 100%; }
:where(a, button, input, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent-line); color: var(--fg); }

/* The band runs to the right edge. It used to stop `--docs-right` (248px) short of
   it, so on any window wide enough for the table of contents the header's plane and
   its hairline ended in mid-page and the last column read as a cut-off strip. The
   TOC already pads `--docs-header + 28px` from the top, so nothing is covered. */
.site-nav {
  position: fixed !important;
  inset: 0 0 auto var(--docs-left) !important;
  z-index: 50;
  width: auto !important;
  min-height: var(--docs-header) !important;
  height: var(--docs-header) !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  /* Opaque and unblurred on purpose, and the one place the site's nav plane is not
     the shared `--bg-deep at 94% + blur(16px)`. This band is only the right half of
     the docs header: `.docs-identity` is the left half, inset in the rail at the same
     `--docs-header` height with the same hairline, and it is opaque `--bg-deep`. Any
     translucency here blends 6% of the lighter `--bg` into one half of a continuous
     64px row and puts a seam down the middle of it. Aligning it was tried on
     2026-08-28 - injected at runtime the two declarations move 1 of 1181 elements,
     so it is safe in the narrow sense, and still wrong for this layout. If the plane
     ever should move, `.docs-identity` has to move with it in the same commit.
     test/docsLayout pins both halves to the same plane. */
  background: var(--bg-deep) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.site-nav::after,
.site-nav .brand,
.site-nav .nav-actions { display: none !important; }
.docs-mobile-brand { display: none; }
.nav-inner {
  display: flex;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0 18px;
  align-items: center;
  gap: 18px;
}
.docs-search {
  display: inline-flex;
  flex: 0 0 auto;
  min-width: 194px;
  height: 38px;
  padding: 0 10px 0 12px;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  background: var(--field-sunk);
  color: var(--muted);
  cursor: pointer;
}
.docs-search:hover { border-color: var(--accent-line); color: var(--fg); }
.docs-search svg { width: 15px; height: 15px; }
.docs-search kbd {
  margin-left: auto;
  padding: 4px 6px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  color: var(--body);
  font: 500 10px/1 var(--font-mono);
}
.site-nav .nav-links {
  display: flex;
  min-width: 0;
  margin-left: auto;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(12px, 1.8vw, 26px);
}
.site-nav .nav-links a,
.site-nav .nav-links button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--body) !important;
  font: 600 12px/1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
}
.site-nav .nav-links a:hover,
.site-nav .nav-links button:hover { color: var(--accent) !important; }
.nav-drawer { display: none; }

.docs-shell { width: 100%; min-height: 100svh; margin: 0; padding: 0; }
.docs-grid {
  display: grid;
  grid-template-columns: var(--docs-left) minmax(0, 1fr) var(--docs-right);
  width: 100%;
  min-height: 100svh;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: var(--bg);
}

.docs-nav,
.docs-toc {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 100svh;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg-deep);
}
.docs-nav {
  grid-column: 1;
  padding: calc(var(--docs-header) + 18px) 18px 36px;
  border-right: 1px solid var(--border);
}
.docs-identity {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  height: var(--docs-header);
  padding: 0 22px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  background: var(--bg-deep);
}
.docs-identity img {
  display: block;
  width: 156px;
  height: 38px;
  object-fit: contain;
  object-position: left center;
}
.docs-identity span { display: none; }
.docs-nav::before {
  content: 'Documentation';
  display: block;
  padding: 0 9px 10px;
  color: var(--muted);
  font: 600 10px/1 var(--font-mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}
.docs-nav-group { padding: 10px 0 12px; border-bottom: 1px solid var(--border); }
.docs-nav-group:last-child { border-bottom: 0; }
.docs-nav-group > span {
  display: block;
  padding: 0 9px 7px;
  color: var(--muted);
  font: 600 10px/1.25 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.docs-nav button {
  display: block;
  width: 100%;
  min-height: 36px;
  margin: 1px 0;
  padding: 8px 10px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: transparent;
  color: var(--body);
  font: 500 12px/1.35 var(--font-body);
  text-align: left;
  cursor: pointer;
}
.docs-nav button:hover { background: var(--surface-2); color: var(--fg); }
.docs-nav button.active {
  border-left-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}

.docs-content {
  grid-column: 2;
  min-width: 0;
  min-height: 100svh;
  padding: calc(var(--docs-header) + 42px) clamp(28px, 5vw, 76px) 80px;
  background: var(--bg);
}
.docs-content > .docs-hero,
.docs-content > .doc-section,
.docs-content > .doc-page-nav {
  width: min(100%, var(--docs-reading));
  margin-inline: auto;
}
.docs-content > .doc-section[hidden],
.docs-content > .docs-hero[hidden] { display: none; }
.docs-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 256px;
  gap: 28px;
  align-items: end;
  margin-bottom: 40px !important;
  padding: 0 0 34px;
  border-bottom: 1px solid var(--border);
}
.docs-eyebrow,
.endpoint-method,
.doc-number,
.setup-step b {
  color: var(--accent);
  font: 600 10px/1.2 var(--font-mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}
/* ---------- display tier ----------
   Instrument Serif took the two headings on this page that cleared a 28px floor
   for one day (2026-08-27 to 2026-08-28) and is gone; `--font-serif` went with it.
   Both headings are Geist now, like every other heading on the page and in the
   console: the hero headline and each section's own head, separated from the
   13-17px heads below them (`.docs-toc h2`, `.compat-card h2`, `.endpoint h3`,
   `.doc-body h3`) by size and tracking rather than by family. -.038em at 42-68px
   and -.03em at 28-34px continue the console's ramp (-.022em at 17px); the serif
   wanted the tracking let out to -.015em, which is why both numbers moved with
   the family. Weight comes back to 600, the display weight of the rest of the
   site, from the 400 that was the only face the serif shipped.

   The `!important`s that used to sit on the three declarations below were written
   to beat brand-system.css's `.docs-hero h1` and `h1, h2, …` rules. docs.html
   does not link brand-system.css at all (`/docs.css` and `/polish.css` only), so
   they were beating nothing, and as of 2026-08-27 the rules themselves are gone -
   the whole dead documentation block came out of that sheet. Dropped from all
   three, and from the two narrow `font-size` overrides in the media blocks at the
   foot of this sheet, together, so plain cascade order still lets the narrow
   overrides win. polish.css is the only other sheet on this page and names none
   of these selectors. */
.docs-hero h1 {
  max-width: 12ch;
  margin: 12px 0 16px;
  color: var(--fg);
  font: 600 clamp(42px, 5.2vw, 68px)/1.02 var(--font-display);
  letter-spacing: -.038em;
  overflow-wrap: anywhere;
}
.docs-hero p { max-width: 62ch; margin: 0; color: var(--body); font-size: 16px; line-height: 1.7; }
.compat-card {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
}
.compat-card h2 { margin: 0 0 12px; font-size: 14px; }
.compat-card ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.compat-card li { color: var(--body); font-size: 12px; }
.compat-card li::before { content: '\2197'; margin-right: 8px; color: var(--accent); }

.doc-section {
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: calc(var(--docs-header) + 24px);
}
.doc-section-head { padding: 0 0 18px; }
.doc-section-head h2 { margin: 8px 0; font: 600 clamp(28px, 3vw, 34px)/1.12 var(--font-display); letter-spacing: -.03em; }
.doc-section-head p { max-width: 68ch; margin: 0; color: var(--body); line-height: 1.65; }
.doc-body { min-width: 0; padding: 0; }
.doc-body h3 { margin: 28px 0 10px; color: var(--fg) !important; font-size: 17px; }
.doc-body h3:first-child { margin-top: 0; }
.doc-body p,
.doc-body li { color: var(--body); line-height: 1.7; }
.doc-body ul,
.doc-body ol { padding-left: 20px; }
.doc-body a { color: var(--accent); font-weight: 600; }

.docs-code-grid,
.setup-strip { display: grid; gap: 14px; margin-top: 16px; }
.docs-code-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.setup-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.code-card,
.setup-step {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
}
.setup-step { min-height: 124px; padding: 16px; }
/* Two code cards in one grid row are the same height, because a grid item stretches;
   their <pre> wells are not, because a <pre> is as tall as its own lines. The Base URL
   card holds five lines beside the quickstart curl's fourteen, so the dark well stopped
   halfway down the card and the rest of the box showed the card's own --surface-2
   underneath - one card that looked cut in half. The card is a column and the well is
   the part that grows, so the sunk background always reaches the bottom border however
   far the taller sibling pushes the row. `> pre` deliberately: a snippet nested deeper
   inside a card body must keep sizing to its own content. */
.code-card { display: flex; flex-direction: column; }
.code-card > pre { flex: 1 1 auto; }
.setup-step b,
.setup-step strong { display: block; }
.setup-step strong { margin-top: 8px; color: var(--fg); font-size: 14px; }
.setup-step p { margin: 8px 0 0; color: var(--body); font-size: 12px; line-height: 1.55; }
.code-label {
  display: flex;
  min-height: 38px;
  padding: 10px 12px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font: 500 10px/1.2 var(--font-mono);
}
pre {
  max-width: 100%;
  margin: 0;
  overflow: auto;
  padding: 16px;
  background: var(--field-sunk);
  color: var(--body);
  font: 400 12px/1.65 var(--font-mono) !important;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}
code { color: var(--body); font-family: var(--font-mono) !important; }
p code,
li code,
td code {
  padding: 2px 5px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--field-tint);
  color: var(--accent);
}

.endpoint { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--border); }
.endpoint:last-child { border-bottom: 0; }
.endpoint-method { padding-top: 3px; }
.endpoint h3 { margin: 0 0 4px; font-size: 15px; }
.endpoint p { margin: 0; font-size: 13px; }
.route { display: block; margin-bottom: 5px; color: var(--fg); font: 500 12px/1.45 var(--font-mono); overflow-wrap: anywhere; }
.callout {
  margin: 18px 0;
  padding: 13px 15px;
  border: 1px solid var(--accent-line);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--accent-dim);
  color: var(--body);
  font-size: 13px;
  line-height: 1.65;
}
.callout strong { color: var(--fg); }
.table-wrap { max-width: 100%; margin: 15px 0; overflow: auto; border: 1px solid var(--border); border-radius: var(--r); }
table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 12px; }
th,
td { padding: 12px 13px; border-bottom: 1px solid var(--border); color: var(--body); text-align: left; vertical-align: top; }
th { background: var(--surface-2); color: var(--fg); font: 600 10px/1.2 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
tr:last-child td { border-bottom: 0; }
.status { display: inline-block; padding: 4px 8px; border: 1px solid var(--accent-line); border-radius: 999px; color: var(--accent); font: 500 10px/1 var(--font-mono); }

.os-tabs { margin: 14px 0 4px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r); background: var(--field-sunk); }
.os-tabs-list { display: flex; min-width: 0; overflow-x: auto; padding: 7px 8px 0; border-bottom: 1px solid var(--border); scrollbar-width: none; }
.os-tabs-list::-webkit-scrollbar { display: none; }
.os-tab { position: relative; flex: 0 0 auto; padding: 9px 11px 10px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.os-tab[aria-selected='true'] { background: var(--accent-dim); color: var(--fg); }
.os-tab[aria-selected='true']::after { content: ''; position: absolute; right: 10px; bottom: 0; left: 10px; height: 2px; background: var(--accent); }
.os-tab-panel[hidden] { display: none; }

.docs-toc { grid-column: 3; padding: calc(var(--docs-header) + 28px) 22px 36px; border-left: 1px solid var(--border); }
.docs-toc h2 { margin: 0 0 14px; color: var(--fg) !important; font-size: 13px; }
.docs-toc #docsTocLinks { display: grid; gap: 2px; }
.docs-toc a {
  display: block;
  padding: 7px 0 7px 11px;
  border-left: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.docs-toc a:hover { color: var(--fg); }
.docs-toc a.active { border-left-color: var(--accent); color: var(--accent); font-weight: 600; }

.doc-page-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 50px !important; padding-top: 22px; border-top: 1px solid var(--border); }
.doc-page-nav button { min-height: 70px; padding: 13px 15px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); color: var(--fg); text-align: left; cursor: pointer; }
.doc-page-nav button:hover { border-color: var(--accent-line); background: var(--surface-3); }
.doc-page-nav button:last-child { text-align: right; }
.doc-page-nav button:disabled { visibility: hidden; }
.doc-page-nav span { display: block; color: var(--muted); font: 500 10px/1 var(--font-mono); }
.doc-page-nav strong { display: block; margin-top: 7px; color: var(--accent); font-size: 13px; }
/* `.toc-label` and `.docs-footer-note` were removed on 2026-08-27: neither token
   appears in docs.html, in any page that links this sheet, or in any script that
   builds markup. The rebuilt table of contents labels its groups with `h2`s and
   the page has no footer note - shared-footer.js is hidden here on purpose. */
.site-footer { display: none !important; }

.docs-search-dialog {
  width: min(620px, calc(100vw - 32px));
  max-height: min(680px, calc(100svh - 40px));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  color: var(--fg);
  box-shadow: 0 24px 80px color-mix(in oklch, var(--bg-deep) 84%, transparent);
}
.docs-search-dialog::backdrop { background: color-mix(in oklch, var(--bg-deep) 78%, transparent); backdrop-filter: blur(3px); }
.docs-search-form { display: flex; padding: 15px 16px; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); }
.docs-search-form svg { width: 18px; color: var(--accent); }
.docs-search-input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--fg); font-size: 14px; }
.docs-search-input::placeholder { color: var(--muted); }
.docs-search-close { padding: 5px 7px; border: 1px solid var(--border-2); border-radius: var(--r-sm); background: var(--surface); color: var(--body); font: 500 9px/1 var(--font-mono); cursor: pointer; }
.docs-search-results { max-height: min(55svh, 500px); overflow-y: auto; padding: 8px; }
.docs-search-empty { padding: 28px 12px; color: var(--muted); font-size: 13px; text-align: center; }
.docs-search-result { display: grid; width: 100%; padding: 11px; border: 0; border-radius: var(--r); background: transparent; color: inherit; text-align: left; cursor: pointer; }
.docs-search-result:hover,
.docs-search-result:focus { outline: 0; background: var(--accent-dim); }
.docs-search-result span { color: var(--accent); font: 500 9px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.docs-search-result strong { margin-top: 5px; color: var(--fg); font-size: 13px; }
.docs-search-result small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1280px) {
  :root { --docs-left: 264px; --docs-right: 224px; }
  .site-nav .nav-links { gap: 13px; }
  .site-nav .nav-links a,
  .site-nav .nav-links button { font-size: 11px; }
  .docs-content { padding-inline: 34px; }
}

@media (max-width: 1080px) {
  :root { --docs-left: 248px; --docs-right: 0px; }
  .docs-grid { grid-template-columns: var(--docs-left) minmax(0, 1fr); }
  .docs-toc { display: none; }
  /* `.site-nav { right: 0 !important }` lived here to reclaim the width the hidden
     table of contents left behind. The base rule now ends at the right edge at every
     width, so this tier no longer has anything to correct. */
  .site-nav .nav-links a:nth-last-child(-n+3) { display: none; }
}

@media (max-width: 820px) {
  :root { --docs-left: 0px; --docs-header: 60px; }
  /* Same story on the left: `--docs-left` is 0 here, so the base inset already
     reads `0 0 auto 0` and the override that used to repeat it is gone. */
  .nav-inner { padding: 0 14px; }
  .docs-search { min-width: 0; }
  .docs-search span { display: none; }
  .docs-search kbd { margin-left: 0; }
  .site-nav .nav-links { display: none; }
  .site-nav .nav-actions { display: block !important; margin-left: auto; }
  .site-nav .nav-menu-btn { display: inline-flex; min-height: 36px; min-width: 64px; padding: 0 12px; justify-content: center; align-items: center; border: 1px solid var(--border-2); border-radius: var(--r); background: var(--surface-2); color: var(--fg); }
  .docs-mobile-brand { display: inline-flex; flex: 0 0 auto; align-items: center; }
  .docs-mobile-brand img { display: block; width: 132px; height: 34px; object-fit: contain; object-position: left center; }
  .nav-drawer.is-open { position: fixed; inset: var(--docs-header) 0 auto; z-index: 45; display: block; padding: 10px 14px 14px; border-bottom: 1px solid var(--border); background: var(--bg-deep); }
  .nav-drawer nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .nav-drawer a,
  .nav-drawer button { min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--body); text-align: left; }
  .docs-grid { display: block; padding-top: var(--docs-header); }
  .docs-nav { position: relative; width: 100%; height: auto; padding: 0; overflow: visible; border-right: 0; border-bottom: 1px solid var(--border); }
  .docs-nav::before,
  .docs-nav .docs-identity { display: none; }
  .docs-nav-group { padding: 0; }
  .docs-nav-group > span { display: flex; min-height: 46px; padding: 0 18px; align-items: center; justify-content: space-between; cursor: pointer; }
  .docs-nav-group > span::after { content: '+'; color: var(--accent); font-size: 17px; }
  .docs-nav-group.is-open > span::after { content: '-'; }
  .docs-nav-group:not(.is-open) > button { display: none; }
  .docs-nav button { min-height: 42px; margin: 0; padding: 10px 18px 10px 28px; border-bottom: 1px solid var(--border); border-radius: 0; font-size: 13px; }
  .docs-content { width: 100%; min-height: 0; padding: 30px 18px 56px; }
  .docs-hero { grid-template-columns: 1fr; gap: 18px; margin-bottom: 30px !important; padding-bottom: 28px; }
  .docs-hero h1 { max-width: none; font-size: clamp(36px, 11vw, 50px); }
  .compat-card { max-width: 420px; }
  .docs-code-grid,
  .setup-strip { grid-template-columns: 1fr; }
  .doc-section { margin-bottom: 30px; padding-bottom: 30px; }
  .doc-page-nav { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .docs-search kbd { display: none; }
  .docs-content { padding-inline: 15px; }
  .docs-hero h1 { font-size: 36px; }
  .doc-section-head h2 { font-size: 28px; }
  .code-label { align-items: flex-start; flex-direction: column; }
  pre { padding: 13px; font-size: 11px !important; }
  .endpoint { grid-template-columns: 54px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}