/* ═══════════════════════════════════════════════════════════════
   Docs surface (DS) — shell chrome (header, search palette, sidebar,
   TOC, pager, footer), article prose, code blocks and tabs.

   ONE stylesheet for the whole guide surface: all eight docs URLs share
   the same shell, so they migrate together and there is no legacy docs
   page left to keep a second copy for. The API reference adds
   docs-reference-ds.css on top of this for its Scalar host chrome.
   Replaces the pre-DS docs.css (deleted).

   Class names are unchanged from the legacy stylesheet on purpose: three
   JS modules key off them (docs.js — .code-tab/.code-tab-panel.hidden/
   .copy-btn/.docs-toc-link/.toc-active; docs-search.js — the
   #docs-search-* ids plus .docs-search-result*; docs-reference.js), and
   renaming them would turn a restyle into a behavior rewrite.

   Docs keeps its OWN header rather than the DS navbar: readers navigate a
   reference surface by section, so the chrome has to carry the
   Guides/API-Reference tabs and the ⌘K palette. Generic controls inside it
   still come from components/ui/ (button, search_trigger).
   ═══════════════════════════════════════════════════════════════ */

/* ── Header ───────────────────────────────────────────────────────
   Sticky and in-flow, not the DS navbar's floating pill: a floating pill
   overlaps a long reference page's content as you scroll, which is why
   docs replaced it in the first place. The glass treatment is shared
   (--glass-bg / --glass-border), so it still reads as site chrome. */

.docs-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--border);
}

.docs-header-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 58px;
  padding: 0 20px;
}




/* `--muted-foreground`, not `--border`. Two reasons, and the second is the
   real one:

   1. `--border` is a 1px-hairline colour (0.905 lightness). On a 15px glyph
      it measures 1.30:1 — not merely below AA but genuinely hard to see, so
      the separator was not doing its own job either.
   2. Every other "/" separator on the site is `--muted-foreground`: the
      breadcrumbs in datasets-ds.css, examples-ds.css and
      data-delivery-ds.css all inherit it from their container. This one
      glyph was the outlier. Same mark, same meaning, same colour. */
.docs-header-slash {
  color: var(--muted-foreground);
  font-size: 15px;
}

.docs-header-docs-link {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--muted-foreground);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.docs-header-docs-link:hover { color: var(--foreground); }

.docs-header-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 14px;
  /* The tab strip is the ONLY thing in this row allowed to give up width.
     Everything else is nowrap text or a fixed circle, and flex items default
     to `min-width: auto`, so with nothing shrinkable a long auth label simply
     pushed the row past the viewport: at 375px, signed in, the Dashboard
     button's right edge landed at 382.8px and the document itself scrolled
     sideways (8px). Now the strip absorbs it and scrolls its own overflow —
     docs.js brings the active tab into view so the page you are on is never
     the one hidden. */
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.docs-header-tabs::-webkit-scrollbar { display: none; }

/* Never shrink, never wrap: this is the search affordance plus the one CTA. */
.docs-header-actions { flex: none; }

.docs-tab {
  padding: 6px 13px;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.docs-tab:hover { color: var(--foreground); }
.docs-tab.active {
  color: var(--foreground);
  font-weight: 600;
  background: var(--muted-deep);
}

.docs-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.docs-header-login {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--muted-foreground);
  text-decoration: none;
  white-space: nowrap;
}
.docs-header-login:hover { color: var(--foreground); }

/* Phone: brand wordmark, the "/ Docs" crumb and the text Log in give up
   their room to the tabs; the palette trigger goes icon-only on its own
   (ds.css). */
@media (max-width: 640px) {
  /* 10px/6px, tightened from 14px/8px: brand + two tabs + search + a signed-in
     "Dashboard" needs 22px more than a 375px phone has, and this is where the
     row can find it without taking anything away. The shrinkable tab strip
     above covers whatever is still short on a narrower screen. */
  .docs-header-inner { gap: 6px; padding: 0 10px; }
  .docs-header .ds-brand__wordmark,
  .docs-header-slash,
  .docs-header-docs-link,
  .docs-header-login { display: none; }
  .docs-header-tabs { margin-left: 0; }
  .docs-header-actions { gap: 8px; }
  /* 12px/7px so "API Reference" stays on ONE line: at the desktop scale it
     wrapped mid-phrase inside its pill, making the active tab 51px tall
     next to a 44px one. Still at the 12px readability floor. The 7px (was 8)
     is the last 4px the row needed to fit a signed-in 375px phone without
     scrolling at all; the pill's height still comes from the 44px tap rule. */
  .docs-tab { padding: 6px 7px; font-size: 12px; white-space: nowrap; }
}

/* ── Search palette ──────────────────────────────────────────────
   Kept as the docs' own overlay rather than moved onto the DS modal:
   docs-search.js owns the ⌘K shortcut in the capture phase, hydrates
   from /documentation/search-index.json and drives arrow-key selection
   against these exact ids. A palette is not a dialog with a trigger, and
   swapping the markup would be a behavior change dressed as a restyle. */

.docs-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: oklch(0.19 0.012 75 / 0.32);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: 12vh 16px 0;
}

.docs-search-panel {
  max-width: 34rem;
  margin: 0 auto;
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: 0 28px 70px -30px oklch(0.19 0.012 75 / 0.4);
  overflow: hidden;
}

.docs-search-input {
  width: 100%;
  padding: 15px 18px;
  font-family: var(--font-sans);
  font-size: 15px;
  letter-spacing: -0.01em;
  border: none;
  border-bottom: 1px solid var(--border);
  outline: none;
  background: transparent;
  color: var(--foreground);
}
.docs-search-input::placeholder { color: var(--muted-foreground); }

.docs-search-results {
  max-height: 40vh;
  overflow-y: auto;
  padding: 6px;
  margin: 0;
  list-style: none;
}

.docs-search-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 12px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--foreground);
  text-decoration: none;
}
.docs-search-result:hover,
.docs-search-result.selected { background: var(--muted-deep); }

.docs-search-result-group {
  font-size: 11.5px;
  color: var(--body-foreground);  /* --muted-foreground fails AA on --muted-deep (the hover/selected ground below) */
  white-space: nowrap;
}

.docs-search-hint {
  padding: 9px 18px;
  margin: 0;
  border-top: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--muted-foreground);
}

/* "↑↓ to navigate · ⏎ to open · esc to close" describes three keys a phone
   does not have, so on a phone it is a row of instructions for hardware the
   reader is not holding.

   `(hover: none) and (pointer: coarse)` — the compound query ds.css argues
   AGAINST for tap targets, and the reason it argues against it there is the
   reason it is right here. It asks "is the PRIMARY input a finger", which is
   false on an iPad with a Magic Keyboard and a Surface with a mouse: exactly
   the touch devices that DO have arrow keys and an Escape, and should keep the
   hint. A tap target is about whether a finger will ever touch the control; a
   keyboard hint is about whether there is a keyboard. Same syntax, different
   question — see the note above ds.css's tap block. */
@media (hover: none) and (pointer: coarse) {
  .docs-search-hint { display: none; }
}

/* ── Shell grid ─────────────────────────────────────────────────── */

.docs-shell {
  max-width: 1400px;
  padding-top: 44px;
  padding-bottom: 88px;
}

@media (min-width: 1024px) {
  .docs-shell {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 48px;
  }
}

@media (min-width: 1280px) {
  .docs-shell {
    grid-template-columns: 230px minmax(0, 1fr) 210px;
  }
}

.docs-main { max-width: 48rem; }

/* ── Sidebar ────────────────────────────────────────────────────── */

.docs-sidebar-inner {
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 108px);
  overflow-y: auto;
  padding-bottom: 16px;
}

.docs-sidebar-group {
  padding: 0 12px;
  margin-bottom: 10px;
}
.docs-sidebar-group:not(:first-child) { margin-top: 26px; }

.docs-nav-link {
  display: block;
  padding: 6px 12px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 13.5px;
  letter-spacing: -0.01em;
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.docs-nav-link:hover { color: var(--foreground); }
.docs-nav-link.active {
  color: var(--foreground);
  font-weight: 600;
  background: var(--muted-deep);
}

.docs-sidebar-sections {
  margin: 2px 0 6px 14px;
  padding-left: 14px;
  border-left: 1px solid var(--border);
  list-style: none;
}

.docs-sidebar-section-link {
  display: block;
  padding: 4px 8px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  letter-spacing: -0.01em;
  color: var(--muted-foreground);
  text-decoration: none;
}
.docs-sidebar-section-link:hover { color: var(--foreground); }

/* Endpoint list under the expanded API Reference entry. */
.docs-sidebar-endpoints {
  margin: 2px 0 6px 14px;
  padding-left: 14px;
  border-left: 1px solid var(--border);
  list-style: none;
}

.docs-endpoint-group {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  padding: 8px 8px 3px;
}

.docs-sidebar-endpoint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 12.5px;
  letter-spacing: -0.01em;
  color: var(--muted-foreground);
  text-decoration: none;
}
.docs-sidebar-endpoint:hover { color: var(--foreground); background: var(--muted); }

.docs-endpoint-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Method badges — the two HTTP verbs the public API exposes. Both are
   token-derived: GET is the neutral panel tint, POST the blue category
   tint already in the token set (no new color, no color-mix). */
.docs-method {
  background: var(--muted-deep);
  color: var(--body-foreground);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 5px;
  border-radius: 5px;
  flex: none;
  min-width: 34px;
  text-align: center;
}
/* The neutral badge is the BASE, not a --get variant: the class name is
   built by concatenation in docs_sidebar.html (`docs-method-{{ method }}`),
   so a verb with no rule of its own would otherwise render as bare text.
   Today the public API exposes GET (base) and POST (accent). */
.docs-method-post {
  background: var(--tint-blue);
  color: var(--tint-blue-ink);
}

/* ── Mobile nav (the <select> below 1024px) ─────────────────────── */

.docs-mobile-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--foreground);
}

/* ── On this page (TOC) ─────────────────────────────────────────── */

.docs-toc {
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 108px);
  overflow-y: auto;
}

.docs-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.docs-toc-title { margin-bottom: 10px; }

.docs-toc-link {
  display: block;
  padding: 4px 0 4px 12px;
  margin-left: -12px;
  border-left: 2px solid transparent;
  font-family: var(--font-sans);
  font-size: 12.5px;
  letter-spacing: -0.01em;
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.docs-toc-link:hover { color: var(--foreground); }
.docs-toc-link.toc-active {
  color: var(--foreground);
  font-weight: 600;
  border-left-color: var(--accent);
}

/* ── Prev / next pager ──────────────────────────────────────────── */

.docs-pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.docs-pager-link {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  text-decoration: none;
  transition: border-color 0.15s ease;
  max-width: 48%;
}
.docs-pager-link:hover { border-color: var(--foreground); }
.docs-pager-next { margin-left: auto; text-align: right; }

.docs-pager-label {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--muted-foreground);
}

.docs-pager-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--foreground);
}

/* ── Slim docs footer ────────────────────────────────────────────
   The full DS footer (brand + four link columns) is noise on a
   reference surface — readers navigate by sidebar. */

.docs-footer {
  border-top: 1px solid var(--border);
  padding: 20px 16px;
}

.docs-footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted-foreground);
}

.docs-footer-links {
  display: flex;
  gap: 20px;
}
.docs-footer-links a {
  color: var(--muted-foreground);
  text-decoration: none;
}
.docs-footer-links a:hover { color: var(--foreground); }

/* ── Article typography ─────────────────────────────────────────
   Element defaults, so a guide template stays semantic HTML. Docs prose
   sits one step below the marketing display scale on purpose: these are
   reference pages read top-to-bottom, not landing bands. */

h2[id], h3[id] { scroll-margin-top: 88px; }

.docs-article h1 {
  font-family: var(--font-sans);
  color: var(--foreground);
  font-size: 34px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
}

.docs-article .docs-lead {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--body-foreground);
  margin-bottom: 40px;
}

.docs-article h2 {
  font-family: var(--font-sans);
  color: var(--foreground);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 44px 0 12px;
}

.docs-article h3 {
  font-family: var(--font-sans);
  color: var(--foreground);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 28px 0 8px;
}

.docs-article p {
  font-family: var(--font-sans);
  color: var(--body-foreground);
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

.docs-article ul,
.docs-article ol {
  font-family: var(--font-sans);
  color: var(--body-foreground);
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: -0.01em;
  margin: 0 0 16px 20px;
  list-style: disc;
}
.docs-article ol { list-style: decimal; }
.docs-article li { margin-bottom: 6px; }

/* Prose links only — BARE anchors. Every anchor in the docs that carries a
   class is a component or an affordance that paints itself (.docs-card,
   .docs-install-btn, .docs-pager-link, and any ds-* macro), so `:not([class])`
   is the whole rule and there is no exclusion list to keep in sync. The
   first pass used one, missed .docs-install-btn, and painted blue underlined
   link text across the ink "Open in Claude" pill — the datasets migration's
   .dsx__prose lesson (never restyle a component's internals from a page)
   with a longer list instead of a better selector. */
.docs-article a:not([class]) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.docs-article strong { color: var(--foreground); font-weight: 600; }

.docs-article .code-wrapper,
.docs-article .code-tabs { margin-bottom: 16px; }

/* Muted secondary paragraph (credit notes, "also available as async").
   Scoped `.docs-article .docs-note` to out-specify the `.docs-article p`
   element default at (0,2,0) vs (0,1,1) — the alternative was `!important`,
   which would then have to be repeated in the phone floor below. */
.docs-article .docs-note {
  font-size: 13px;
  color: var(--muted-foreground);
  margin-top: 8px;
}

/* ── Code blocks ────────────────────────────────────────────────
   Catppuccin Mocha, kept verbatim: the DS palette is a light warm-paper
   system with no code theme, and a hand-rolled light one would lose the
   token-color contrast readers rely on. Literal values are legal here for
   the same reason a third-party brand mark is (rule 2) — this is a
   syntax palette, not site chrome. */

.code-block {
  background: #1e1e2e;
  color: #cdd6f4;
  border-radius: var(--radius);
  padding: 16px 20px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.7;
  font-family: var(--font-mono);
}

/* Comments are Catppuccin overlay2 (#9399b2), not the theme's own overlay0
   (#6c7086) the legacy stylesheet used: measured on this surface, overlay0
   is 3.36:1 — below the 4.5:1 AA floor for 12px text, so a whole class of
   code comment was failing. overlay2 is 5.81:1 and still the palette's own
   grey. Every other token here passes comfortably (7.8–11.3:1). */
.code-block .comment { color: #9399b2; }
.code-block .string { color: #a6e3a1; }
.code-block .keyword { color: #cba6f7; }
.code-block .attr { color: #89b4fa; }
.code-block .number { color: #fab387; }

/* Phones: tighter, with a thin always-visible scrollbar so a long line
   reads as swipeable rather than cut off. */
@media (max-width: 640px) {
  .code-block {
    padding: 14px 16px;
    font-size: 12px;
    line-height: 1.55;
    scrollbar-width: thin;
    scrollbar-color: rgba(205, 214, 244, 0.25) transparent;
  }
  .code-block::-webkit-scrollbar { height: 6px; }
  .code-block::-webkit-scrollbar-thumb {
    background: rgba(205, 214, 244, 0.3);
    border-radius: 3px;
  }
  .code-block::-webkit-scrollbar-track { background: transparent; }
}

.code-inline {
  background: var(--muted-deep);
  color: var(--foreground);
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 13px;
  font-family: var(--font-mono);
}

/* Copy button — lives on the dark code surface, so its colors come from
   the same syntax palette. */
.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #a6adc8;
  padding: 4px 8px;
  border-radius: 5px;
  font-family: var(--font-sans);
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.code-wrapper:hover .copy-btn { opacity: 1; }
.copy-btn:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }

/* A finger has no hover, so an opacity-0 control is unreachable. */
@media (any-pointer: coarse) {
  .copy-btn { opacity: 1; }
}

/* ── Language tabs ──────────────────────────────────────────────── */

.code-tabs {
  border-radius: var(--radius);
  overflow: hidden;
  background: #181825;
}

.code-tabs-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid #313244;
}

.code-tab {
  padding: 4px 12px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: #a6adc8;
  font-family: var(--font-sans);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.code-tab:hover { color: #cdd6f4; }
.code-tab.active { background: #313244; color: #cdd6f4; font-weight: 500; }

.code-tabs-copy {
  margin-left: auto;
  background: transparent;
  border: none;
  color: #a6adc8;
  font-family: var(--font-sans);
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 5px;
  cursor: pointer;
}
.code-tabs-copy:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

.code-tabs .code-block { border-radius: 0; }
.code-tab-panel.hidden { display: none; }

/* ── Prose surfaces ─────────────────────────────────────────────── */

/* Callout — accent-edged tinted panel. */
.docs-callout {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--muted);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.docs-callout p { margin: 0; font-size: 14px; }

/* Success / confirmation panel (the MCP page's "you're connected" states).
   Ships as a docs class rather than the DS alert: alert's variants are
   default | destructive, and adding a fifth semantic color to the token set
   for two panels on one page is not the trade. */
.docs-success {
  border: 1px solid var(--border);
  border-left: 3px solid var(--tint-green-ink);
  border-radius: var(--radius);
  background: var(--tint-green);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.docs-success p { margin: 0; }
.docs-success-title { color: var(--tint-green-ink); font-weight: 600; }

/* Card grid (next steps, overview) */
.docs-card-grid {
  display: grid;
  gap: 14px;
  margin: 16px 0;
}
@media (min-width: 640px) {
  .docs-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.docs-card {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.docs-card:hover {
  border-color: var(--foreground);
  box-shadow: var(--shadow-card);
}
.docs-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  color: var(--foreground);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  margin-bottom: 5px;
}
.docs-card-desc {
  display: block;
  font-family: var(--font-sans);
  color: var(--muted-foreground);
  font-size: 13px;
  line-height: 1.6;
}

/* Panel — a bordered content surface inside prose (the MCP tool cards, the
   SDK method blocks). A page-level surface, deliberately not composing
   .ds-card: different padding and no float shadow. Radius and border come
   from the tokens, so a retune still moves it. */
.docs-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  padding: 20px;
  margin-bottom: 16px;
}

.docs-panel--tinted { background: var(--muted); }

/* Hover affordance for panels that are (or contain) a link. */
.docs-card-hover { transition: border-color 0.15s ease; }
.docs-card-hover:hover { border-color: var(--foreground); }

/* Scoped `.docs-article .docs-panel-title` (0,2,0) so it out-specifies the
   `.docs-article h2/h3` element defaults (0,1,1): a panel lead-in keeps the
   small title size whatever heading LEVEL the document structure needs it to
   be — which is the point, since the level has to answer to the heading
   outline and the size answers to the design. */
.docs-article .docs-panel-title {
  font-family: var(--font-sans);
  color: var(--foreground);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

/* ── Data tables ────────────────────────────────────────────────
   The DS table() macro renders the wrap + .table; docs only sets the
   density its reference tables need (a 4-column parameter table at
   768px of column width). Keyed off the macro's own wrapper so a page
   never restyles the component globally. */

.docs-table-dense .table th,
.docs-table-dense .table td {
  padding: 9px 14px;
  font-size: 13.5px;
  vertical-align: top;
}

/* Reference-table body reads as prose, not as data: the DS base paints cells
   `--foreground` (right for a results grid, too loud for four columns of
   parameter description). */
.docs-table-dense .table td {
  white-space: normal;
  color: var(--body-foreground);
}

/* The "Default" column — present but secondary. */
.docs-table-dense .table td.docs-cell-muted { color: var(--muted-foreground); }

/* First column of a parameter table is a code identifier — keep it on one
   line so the name never breaks mid-token.

   `:not([colspan])` is load-bearing: the MCP tool tables end with a
   full-width note row whose single cell IS the first child, so the bare
   rule made a 300-word paragraph one unbreakable line — a 4656px table
   inside a 766px wrapper, which clipped the whole Description column.
   Headers wrap for the same reason (a spanning header would do it too). */
.docs-table-dense .table td:first-child:not([colspan]) { white-space: nowrap; }
.docs-table-dense .table th { white-space: normal; }

/* Second column is the type expression in both table shapes (4-col
   parameter, 3-col field). Left to wrap it breaks at the pipe —
   "string |" / "null" on two lines, which reads as two types. */
.docs-table-dense .table td:nth-child(2):not([colspan]) { white-space: nowrap; }

@media (max-width: 640px) {
  .docs-table-dense .table th,
  .docs-table-dense .table td {
    padding: 8px 10px;
    font-size: 13px;
  }
}

/* ── Prose tables ───────────────────────────────────────────────
   The other table shape on this surface: a guide page's own table, whose
   last column is a sentence or two rather than a value (rate_limits'
   plan + header tables, errors' status codes). Also the DS table()
   macro; this class is what the caller passes as `cls`, so it lands on
   the macro's WRAPPER div.

   Deliberately NOT `docs-table-dense`. That class nowraps columns 1 and
   2 — correct for a parameter name and a type expression, fatal for a
   "Meaning" column, which would blow the table far past its wrapper.

   These two pages were the last legacy markup on the docs surface: they
   kept `<div class="docs-table-wrap"><table class="docs-table">` after
   the migration deleted docs.css, which held the only definition of
   those two classes, so both tables rendered as bare unstyled HTML —
   no wrapper, no hairlines, no cell padding. */
.docs-prose-table {
  /* The DS wrapper ships without margins (see param_table's `cls`). */
  margin-bottom: 16px;
}

/* Top-aligned because the last column is multi-line prose while the
   first two are a short value each — centered cells left the status code
   floating beside the middle of its own paragraph. */
.docs-prose-table .table th,
.docs-prose-table .table td {
  vertical-align: top;
}

/* Two things here, both required.

   `white-space: normal` undoes Basecoat's `.table th, .table td
   { white-space: nowrap }` — a data-grid default, and the same override
   the dense tables make above. Without it a sentence cannot break: the
   errors status-code table laid out at 2037px inside a 768px wrapper, so
   the whole "what to do" column sat behind a horizontal scrollbar.

   Colour: the DS base paints cells `--foreground` (right for a results
   grid, too loud for a column of explanation). */
.docs-prose-table .table th,
.docs-prose-table .table td {
  white-space: normal;
}

.docs-prose-table .table td {
  color: var(--body-foreground);
}

@media (max-width: 640px) {
  .docs-prose-table .table th,
  .docs-prose-table .table td {
    padding: 9px 12px;
    font-size: 13px;
  }
}

/* ── One-click MCP install button ───────────────────────────────
   Not the DS button(): these are deep links whose label carries a
   client logo, and the macro takes a text label. Styled from the same
   ink recipe so it sits with the DS buttons around it. */
.docs-install-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, var(--primary-face-top), var(--primary-face-bottom));
  box-shadow: var(--shadow-raised-dark);
  color: var(--primary-foreground);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.docs-install-btn:hover { opacity: 0.9; }
.docs-install-btn svg { width: 15px; height: 15px; }

@media (any-pointer: coarse) {
  .docs-install-btn { min-height: 44px; }
}

/* ── 44px tap targets (shipping checklist #13) ──────────────────
   Keyed on the POINTER, not on width — same reasoning as ds.css: a 44px
   minimum is about fingers, and width-keying gives every narrow desktop
   window the touch scale. The DS components carry their own block there;
   these are the docs' own chrome and prose controls, which the sweep at
   375px found at 18–32px tall. */

@media (any-pointer: coarse) {
  /* Icon-only on a phone (the wordmark is hidden), so it needs both axes —
     min-height alone would leave a 21x44 sliver. */
  .docs-header .ds-brand {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }

  .docs-mobile-select,
  .docs-nav-link,
  .docs-sidebar-section-link,
  .docs-sidebar-endpoint,
  .docs-search-result,
  .code-tab,
  .code-tabs-copy { min-height: 44px; }

  /* `.docs-tab` is NOT in that list, and this is the one control on the surface
     where a min-height is the wrong instrument.

     Its ink IS the design: a compact lozenge on `--radius-full`, ~30px tall and
     twice as wide as it is high. `--radius-full` is a capsule radius, so
     inflating the box to 44px inflates the corner with it — the two ends become
     22px semicircles with 10px of straight edge between them, and the tab reads
     as a fat oval rather than a tab. That is the reported "border radius looking
     off": the radius is doing exactly what it is told, and the BOX is wrong.

     WCAG 2.5.8 sizes the TARGET — the region that accepts the pointer — not the
     painted pixels. So the pill keeps its drawn height and an inset overlay
     carries the 44px. The strip keeps a 44px min-height of its own, because it
     is an overflow-x scroller (above) and would otherwise clip an overlay taller
     than its content.

     Note for a future sweep: measuring `.docs-tab`'s own box here returns ~30px
     and is not a finding — measure the overlay, or the hit region. */
  .docs-header-tabs { min-height: 44px; }

  .docs-tab { position: relative; }

  .docs-tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }

  /* …and then CENTRE what is inside the box the line above just grew.
     A <button> centres its own label for free; an <a> does not. An anchor is a
     block box, so a min-height taller than its line box adds every extra pixel
     BELOW the text — which is why the Guides / API Reference label sat 7.5px
     from the top of its 44px pill with 22px of empty ink underneath it, the
     reported "text overflowing the button". Nothing was overflowing: the pill
     had grown and the label had not moved.

     The rule directly below already knows HALF of this trap — an inline anchor
     needs a box before min-height does anything at all. These are the other
     half: anchors that already had a box (a flex item, or display: block), so
     the height applied and only the centring was missing. Every anchor in the
     list above needs it; the two <button>s and the native <select> do not.
     `.docs-sidebar-endpoint` and `.docs-search-result` are already
     flex/align-center in their base rules. */
  .docs-nav-link,
  .docs-sidebar-section-link {
    display: flex;
    align-items: center;
  }

  /* Inline by default, so a min-height would do nothing without a box. */
  .docs-footer-links a,
  .docs-toc-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* "Terms" is 35px of text; the row's 20px gap keeps them from colliding. */
  .docs-footer-links a { min-width: 44px; justify-content: center; }
  .docs-toc-link { display: flex; }

  /* Padding, not min-height: `display: flex` (which min-height would need
     for centering) removes the disclosure triangle in Chrome, and a
     top-aligned 44px summary reads as a layout bug. */
  .docs-article summary { padding: 12px 0; }

  /* Already opacity-1 on touch (a finger has no hover), and 44px on both axes.
     MIN-width with real padding, not a fixed 44px square with `padding: 0`:
     docs.js swaps the label to "Copied!" on tap, which is wider than "Copy", and
     a fixed square had no room for it — the text measured exactly 44px against a
     44px background, so the glyphs ran edge to edge with nothing around them.
     A square is right for an ICON button; this one is text, and text that
     changes length. 8px matches the desktop rule's horizontal padding, so the
     button reads the same on both. */
  .copy-btn {
    min-width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    top: 6px;
    right: 6px;
  }

  /* …and because it is permanently visible on touch, the block has to make
     room for it. On a mouse the button only appears on hover, so the moment it
     covers the first line of code is the moment the reader put it there. A
     finger gets a 44px box parked over `curl "https://…` on every code block
     on the page, and no way to move it — the reported "copy button covers the
     content". padding, not a margin on the button: the block scrolls
     horizontally, so anything inside the scroller would slide off with the
     code. 6 + 44 + 6 of band, above the block's own 14px top padding.

     `.copy-btn + .code-block`, so only a block that actually has a button
     overlaying it pays for the band — the language-tabbed blocks
     (`code_tabs.html`) keep their Copy in the tab bar and are untouched. */
  .copy-btn + .code-block { padding-top: 56px; }
}

/* ── Mobile readability floor (hard rule 6) ─────────────────────
   Keyed at 768px to match ds.css — this file loads AFTER it, so a floor
   keyed at 640 here would win at equal specificity and silently reopen
   the 641–768 band. Layout-only breakpoints above stay at 640. */

@media (max-width: 768px) {
  .docs-search-result-group,
  .docs-search-hint,
  .docs-pager-label,
  .docs-footer-inner,
  .docs-endpoint-group,
  .docs-card-desc { font-size: 12px; }

  /* Matches the base rule's specificity — see the note on .docs-note. */
  .docs-article .docs-note { font-size: 12px; }

  .docs-sidebar-endpoint,
  .docs-sidebar-section-link,
  .docs-toc-link { font-size: 12.5px; }

  /* `.docs-method` is NOT floored here, and deliberately has no rule at all.
     It had `font-size: 10px`, which looked like a floor bump (from the 9.5px
     base) that had simply stopped short of 12. It is neither: the only
     element carrying the class is the endpoint badge in `docs_sidebar.html`,
     and that sidebar is `hidden lg:block` — `display: none` below 1024px. So
     a rule inside a `max-width: 768px` block can never match a rendered
     instance of it. It was dead code, and it made the badge look like an
     unfixed floor violation in every audit of this file.
     Verified by measuring the badge at 375 / 700 / 767 / 1024 / 1440: it is
     display:none for the first three and 9.5px for the last two. */

  .docs-article h1 { font-size: 28px; }
  .docs-article h2 { font-size: 19px; margin-top: 36px; }
  .docs-article .docs-lead { font-size: 16px; margin-bottom: 28px; }

  .docs-shell { padding-top: 28px; padding-bottom: 56px; }
  .docs-pager { margin-top: 44px; }
  .docs-pager-link { max-width: 48%; }
}