/* VendOrca Docs — hand-written stylesheet built from the landing brand tokens
   (tailwind.config.js + terms.html). Light theme only: the only dark surfaces are
   the header, the footer and code blocks. No build step. */

/* Metric-matched stand-in for Geist while the web font loads (display=swap). Without it the
   Geist swap reflows the long API pages (CLS 0.13-0.15 at 1440). Values measured in Chromium
   against Geist 400 on API body text: width ratio 1.0214, Geist ascent 1.01 / descent 0.29 em. */
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  font-weight: 100 900;
  size-adjust: 102.14%;
  ascent-override: 98.9%;
  descent-override: 28.4%;
  line-gap-override: 0%;
}

:root {
  --abyss: #03363D;
  --petrol: #0B474F;
  --mist: #BDD9D7;
  --aqua: #9CC4C1;          /* aquaPressed */
  --surface: #F4F8F8;
  --slate: #5E7273;
  --coral: #D9685B;          /* borders / decoration only */
  --coral-ink: #A8443A;      /* coral for small text on light (AA) */
  --white: #FFFFFF;
  --ink: rgba(3, 54, 61, 0.9);          /* body copy, abyss/90 */
  --line: rgba(3, 54, 61, 0.10);        /* whisper line */
  --line-strong: rgba(3, 54, 61, 0.22);
  --mist-25: rgba(189, 217, 215, 0.25);
  --mist-40: rgba(189, 217, 215, 0.40);
  --on-dark: rgba(244, 248, 248, 0.78); /* secondary text on abyss/petrol (AA) */

  --font-display: Satoshi, "Helvetica Neue", Arial, sans-serif;
  --font-body: Geist, "Geist Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* JetBrains Mono is for code and technical tokens ONLY (code blocks, inline code, kbd,
     API method/scope badges, param types). Every chrome label uses Satoshi or Geist. */
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --shell: 1600px;
  --header-h: 56px;
  --gutter: 20px;
  --radius: 8px;
  --shadow-card: 0 18px 44px -28px rgba(3, 54, 61, 0.5);
  --shadow-pop: 0 12px 40px -8px rgba(3, 54, 61, 0.28);

  /* Nav rail motion: open is a touch longer than close, both decelerate (ease-out). */
  --nav-open: 240ms;
  --nav-close: 180ms;
  --nav-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (min-width: 640px) { :root { --gutter: 32px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--abyss);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
::selection { background: var(--mist); color: var(--abyss); }
[hidden] { display: none !important; }

/* Focus: abyss ring + mist halo on light; mist ring on dark. */
:focus-visible { outline: 2px solid var(--abyss); outline-offset: 2px; box-shadow: 0 0 0 5px var(--mist); border-radius: 4px; }
.site-header :focus-visible,
.site-footer :focus-visible,
.code-block :focus-visible { outline-color: var(--mist); box-shadow: none; }
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: fixed; left: 8px; top: 8px; z-index: 100;
  transform: translateY(-160%);
  background: var(--mist); color: var(--abyss);
  font-family: var(--font-display); font-weight: 600; font-size: 0.875rem;
  padding: 10px 16px; border-radius: 8px; text-decoration: none;
}
.skip-link:focus { transform: none; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--abyss); }
.header-inner {
  max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter);
  height: var(--header-h); display: flex; align-items: center; gap: 12px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-chip {
  display: inline-flex; width: 36px; height: 36px; flex-shrink: 0; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--surface); padding: 4px; box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.5);
}
.brand-chip img { width: 28px; height: 28px; border-radius: 7px; display: block; }
.brand-word { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--white); transition: color .15s; }
.brand:hover .brand-word { color: var(--mist); }
.brand-docs {
  font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; letter-spacing: -0.01em;
  color: var(--mist); text-decoration: none; padding: 2px 0 2px 12px; margin-left: 2px;
  border-left: 1px solid rgba(255, 255, 255, 0.18); line-height: 1.2;
}
.brand-docs:hover { color: var(--white); }

.search-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  margin-left: 24px; flex: 0 1 26rem; min-width: 0; height: 36px; padding: 0 8px 0 12px;
  border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.12); background: var(--petrol);
  color: var(--on-dark); font-size: 0.88rem; text-align: left; cursor: pointer; transition: border-color .15s, background .15s;
}
.search-trigger:hover { border-color: rgba(189, 217, 215, 0.5); color: var(--surface); }
.search-trigger svg { flex-shrink: 0; }
.search-trigger-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-trigger kbd {
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--mist); line-height: 1;
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; padding: 3px 6px; background: transparent;
}
/* Sign-in CTA: the same button as the landing header's "Start free" (index.html nav:
   rounded-[0.9rem] bg-mist px-4 py-2 font-display text-caption font-semibold text-abyss
   transition hover:bg-aquaPressed btn-press). Abyss on mist is 8.8:1, on aqua 6.9:1 (AA). */
.header-cta {
  margin-left: auto; flex-shrink: 0; display: inline-block;
  padding: 8px 16px; border-radius: 0.9rem; background: var(--mist); color: var(--abyss);
  font-family: var(--font-display); font-weight: 600; font-size: 0.786rem; line-height: 1.5;
  text-decoration: none; white-space: nowrap;
  transition: color .15s, background-color .15s, transform .15s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.header-cta:hover { background: var(--aqua); }
.header-cta:active { transform: translateY(1px); }
/* Keep the pill shape under the global focus ring (which sets a 4px radius). */
.site-header .header-cta:focus-visible { border-radius: 0.9rem; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  margin-left: -10px; border: 0; border-radius: 8px; background: transparent; color: var(--surface); cursor: pointer;
}
.icon-btn:hover { color: var(--mist); }
.nav-toggle .i-close { display: none; }
.nav-toggle[aria-expanded="true"] .i-open { display: none; }
.nav-toggle[aria-expanded="true"] .i-close { display: inline; }

@media (min-width: 1024px) { .nav-toggle { display: none; } }
@media (max-width: 767.98px) {
  .search-trigger { margin-left: auto; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; justify-content: center; border-color: transparent; background: transparent; color: var(--surface); }
  .search-trigger-label, .search-trigger kbd { display: none; }
  .header-cta { margin-left: 0; }
}
/* Phones: the header row (menu, logo, wordmark, Docs, search, Sign in CTA) needs ~401px, so
   below 410px the "VendOrca" wordmark is hidden visually (it fits from 410px: 414/428/430 phones keep it). The logo chip stays (it links to
   vendorca.com) and the wordmark stays in the accessibility tree as the link's name. */
@media (max-width: 409.98px) {
  .brand-word {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .brand-docs { margin-left: 0; }
}
@media (max-width: 339.98px) { .brand-docs { display: none; } }

/* ---------- shell ---------- */
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 1024px) {
  .shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 48px; }
}

/* ---------- sidebar ---------- */
.sidebar { font-size: 0.88rem; }
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.nav-group + .nav-group { margin-top: 2px; }
/* Collapsible groups (Stripe-style): the title is a full-width button with a chevron that
   turns 90deg when open. Without JS (no html.js) every group stays expanded. */
.nav-group-toggle, .nav-group-title {
  font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; letter-spacing: 0; line-height: 1.35;
  color: var(--abyss);
}
.nav-group-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  min-height: 36px; margin: 0; padding: 6px 8px; border: 0; border-radius: 6px; background: none;
  text-align: left; cursor: pointer; transition: background .15s;
}
.nav-group-toggle:hover { background: var(--mist-40); }
.nav-chev { flex-shrink: 0; color: var(--slate); }
.nav-group.is-open .nav-chev { transform: rotate(90deg); }
html:not(.js) .nav-chev { display: none; }
html:not(.js) .nav-group-toggle { cursor: default; }
html:not(.js) .nav-group-toggle:hover { background: none; }
/* Open/close by height: .nav-panel is a one-row grid whose row goes 0fr -> 1fr, so the list
   animates to its natural height with no measuring. A closed list is visibility:hidden (not
   focusable, not announced; docs.js also sets inert on the panel); visibility flips at the end
   of a close and at the start of an open. The list clips only while closed or moving, so focus
   rings are never cut off on an open group. Transitions switch on (html.nav-anim) only after
   docs.js has applied the saved state, so nothing animates on page load. Without JS (no
   html.js) none of this applies and every group is expanded. */
.js .nav-panel { display: grid; grid-template-rows: 0fr; }
.js .nav-panel > .nav-list { min-height: 0; overflow: hidden; visibility: hidden; opacity: 0; }
.js .nav-group.is-open > .nav-panel { grid-template-rows: 1fr; }
.js .nav-group.is-open > .nav-panel > .nav-list { visibility: visible; opacity: 1; overflow: visible; }
.js .nav-group.is-open.is-animating > .nav-panel > .nav-list { overflow: hidden; }
.nav-anim .nav-panel { transition: grid-template-rows var(--nav-close) var(--nav-ease); }
.nav-anim .nav-panel > .nav-list { transition: opacity var(--nav-close) ease-out, visibility 0s linear var(--nav-close); }
.nav-anim .nav-chev { transition: transform var(--nav-close) var(--nav-ease); }
.nav-anim .nav-group.is-open > .nav-panel { transition-duration: var(--nav-open); }
.nav-anim .nav-group.is-open > .nav-panel > .nav-list { transition: opacity var(--nav-open) ease-out, visibility 0s linear 0s; }
.nav-anim .nav-group.is-open .nav-chev { transition-duration: var(--nav-open); }
/* Spacing lives on the items, not the list, so a closed list collapses to exactly 0px. */
.sidebar .nav-list > li:first-child { padding-top: 2px; }
.sidebar .nav-list > li:last-child { padding-bottom: 10px; }
.sidebar .nav-list a { padding-left: 16px; }
.nav-group-title { margin: 16px 0 4px; padding: 6px 8px; }
.sidebar a {
  display: block; padding: 6px 8px; border-radius: 6px; line-height: 1.35;
  color: var(--slate); text-decoration: none; transition: background .15s, color .15s;
}
/* No default blue tap flash on touch; these targets have their own hover/active states. */
.sidebar a, .nav-group-toggle, .toc-inline summary, .toc-list a { -webkit-tap-highlight-color: transparent; }
.sidebar a:hover { color: var(--abyss); background: var(--mist-40); }
.sidebar a[aria-current="page"] { background: var(--mist); color: var(--abyss); font-weight: 500; }
/* A one-page group is a direct link that reads like a group title (no chevron, no list). */
.sidebar a.nav-group-link {
  font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; color: var(--abyss); min-height: 36px;
  display: flex; align-items: center;
}

/* The rail scrolls on its own and never hands a scroll on to the page (overscroll contain).
   Its scroll-behavior stays auto: docs.js/nav-state.js restore it instantly, and the one
   animated scroll (revealing a group opened near the bottom) is driven in JS. The scrollbar is
   thin and only drawn while the pointer is over the rail, focus is in it, or it is scrolling;
   the gutter is reserved so showing it never reflows the links. */
.sidebar {
  scroll-behavior: auto;
  scrollbar-width: thin; scrollbar-color: transparent transparent; scrollbar-gutter: stable;
}
.sidebar:hover, .sidebar:focus-within, .sidebar.is-scrolling { scrollbar-color: rgba(3, 54, 61, 0.28) transparent; }
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.sidebar:hover::-webkit-scrollbar-thumb, .sidebar:focus-within::-webkit-scrollbar-thumb, .sidebar.is-scrolling::-webkit-scrollbar-thumb { background-color: rgba(3, 54, 61, 0.28); }
.sidebar::-webkit-scrollbar-thumb:hover { background-color: rgba(3, 54, 61, 0.45); }

@media (min-width: 1024px) {
  .sidebar {
    position: sticky; top: var(--header-h); align-self: start;
    height: calc(100vh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain;
    padding: 32px 16px 48px 0; border-right: 1px solid var(--line);
  }
}
@media (max-width: 1023.98px) {
  .sidebar {
    position: fixed; z-index: 35; inset: var(--header-h) 0 0 0;
    background: var(--surface); overflow-y: auto; overscroll-behavior: contain;
    padding: 20px var(--gutter) 48px;
    visibility: hidden; transform: translateX(-100%); transition: transform .22s ease, visibility 0s linear .22s;
  }
  .nav-open .sidebar { visibility: visible; transform: none; transition: transform .22s ease; }
  .nav-open { overflow: hidden; }
  .sidebar a { min-height: 44px; display: flex; align-items: center; font-size: 0.95rem; }
  .nav-group-toggle, .sidebar a.nav-group-link { min-height: 44px; font-size: 0.95rem; }
}

/* ---------- main column ---------- */
.main-col { min-width: 0; }
.doc { padding: 40px 0 64px; outline: none; }
@media (min-width: 640px) { .doc { padding-top: 56px; } }
.doc-body { min-width: 0; max-width: 48rem; }
.layout-home .doc-body { max-width: 64rem; }
/* API pages read like the guides (one 48rem column, code stacked under the prose) until
   there is genuine room for the two-column prose/code layout next to the TOC rail. */
.layout-api .doc-body { max-width: 48rem; }
/* Every page with a TOC: right rail from 1280px, compact <details> fallback below that. */
@media (min-width: 1280px) {
  .has-toc .doc { display: grid; grid-template-columns: minmax(0, 1fr) 208px; gap: 56px; }
  .has-toc .toc-inline { display: none; }
}
@media (min-width: 1600px) {
  .layout-api .doc-body { max-width: none; }
}

/* breadcrumbs */
.breadcrumbs { margin-bottom: 20px; }
.breadcrumbs ol {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 0.8125rem; color: var(--slate);
}
.breadcrumbs li { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumbs li + li::before { content: "/"; content: "/" / ""; color: var(--aqua); }
.breadcrumbs a { color: var(--slate); text-decoration: none; }
.breadcrumbs a:hover { color: var(--abyss); text-decoration: underline; text-decoration-color: var(--mist); }
.breadcrumbs [aria-current="page"] { color: var(--abyss); font-weight: 500; }

/* TOC */
.toc-title {
  font-family: var(--font-display); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0;
  color: var(--abyss); margin: 0 0 10px; padding: 0 8px;
}
.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-list a {
  display: block; padding: 5px 8px; border-radius: 4px; font-size: 0.82rem; line-height: 1.35;
  color: var(--slate); text-decoration: none; transition: background .15s, color .15s;
}
.toc-list a:hover { color: var(--abyss); }
.toc-list .toc-h3 a { padding-left: 20px; }
.toc-list a.is-active { color: var(--abyss); background: var(--mist); }
.toc-rail { display: none; }
@media (min-width: 1280px) {
  .toc-rail { display: block; }
  .toc-rail nav { position: sticky; top: 80px; max-height: calc(100vh - 96px); overflow-y: auto; }
}
.toc-inline { margin: 0 0 28px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, 0.5); }
.toc-inline summary {
  cursor: pointer; user-select: none; min-height: 44px; display: flex; align-items: center; padding: 0 16px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; color: var(--abyss);
}
.toc-inline nav { padding: 0 8px 12px; }
.toc-inline .toc-list a { min-height: 40px; display: flex; align-items: center; }
.toc-inline summary { list-style: none; }
.toc-inline summary::-webkit-details-marker { display: none; }
/* disclosure chevron: points down when closed, up when open */
.toc-inline summary::after {
  content: ""; margin-left: auto; width: 7px; height: 7px; flex-shrink: 0;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .15s;
}
.toc-inline[open] summary::after { transform: translateY(2px) rotate(-135deg); }
/* API pages render the collapsed TOC inside .prose (after the title and lead): undo prose list/link styling */
.prose .toc-inline { margin: 0 0 32px; line-height: 1.35; }
.prose .toc-inline .toc-list { margin: 0; padding: 0; }
.prose .toc-inline .toc-list li { margin: 0; padding: 0; }
.prose .toc-inline .toc-list a { color: var(--slate); text-decoration: none; }
.prose .toc-inline .toc-list a:hover, .prose .toc-inline .toc-list a.is-active { color: var(--abyss); }

/* ---------- prose ---------- */
.eyebrow {
  font-family: var(--font-display); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--slate); margin: 0 0 16px;
}
.prose { color: var(--ink); line-height: 1.75; overflow-wrap: break-word; }
.prose h1 {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  line-height: 1.15; letter-spacing: -0.015em; color: var(--abyss); margin: 0 0 12px;
}
.prose .lead { font-size: 1.125rem; line-height: 1.6; color: var(--slate); margin: 0 0 32px; }
.prose h2 {
  font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; line-height: 1.3;
  letter-spacing: -0.01em; color: var(--abyss); margin: 48px 0 12px;
}
.prose h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.4;
  color: var(--abyss); margin: 32px 0 8px;
}
.prose h2 code, .prose h3 code { font-size: 0.85em; }
.prose .anchor { margin-left: 8px; color: var(--slate); text-decoration: none; opacity: 0; transition: opacity .15s; font-weight: 500; }
.prose h2:hover .anchor, .prose h3:hover .anchor { opacity: 1; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 1.4rem; }
.prose li { margin: 6px 0; padding-left: 2px; }
.prose li > ul, .prose li > ol { margin: 6px 0 0; }
.prose ul > li::marker { color: var(--aqua); }
.prose ol > li::marker { color: var(--slate); font-weight: 500; }
.prose a {
  color: var(--petrol); text-decoration: underline; text-decoration-color: var(--aqua);
  text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color .15s, text-decoration-color .15s;
}
.prose a:hover { color: var(--abyss); text-decoration-color: var(--abyss); }
.prose strong { font-weight: 600; color: var(--abyss); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.prose kbd {
  font-family: var(--font-mono); font-size: 0.8em; color: var(--abyss); background: var(--white);
  border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; white-space: nowrap;
}
.prose :not(pre) > code {
  font-family: var(--font-mono); font-size: 0.86em; color: var(--abyss);
  background: var(--mist-40); border-radius: 4px; padding: 0.1em 0.35em; overflow-wrap: anywhere;
}
.prose > :first-child { margin-top: 0; }

/* UI path chip */
.prose .ui {
  font-weight: 500; font-size: 0.92em; color: var(--abyss); background: var(--white);
  border: 1px solid var(--line-strong); border-radius: 5px; padding: 0.05em 0.4em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* badges */
.badge {
  display: inline-block; vertical-align: 0.1em; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500;
  line-height: 1.5; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 7px; border-radius: 4px; white-space: nowrap;
}
.badge.get { background: var(--mist); color: var(--abyss); }
.badge.post { background: var(--abyss); color: var(--mist); }
.badge.scope { background: var(--white); color: var(--petrol); border: 1px solid var(--line-strong); text-transform: none; letter-spacing: 0; }

/* callouts */
.callout { margin: 24px 0; padding: 14px 18px; border-radius: var(--radius); border: 1px solid var(--mist); background: var(--mist-25); color: var(--abyss); }
.callout p { margin: 0 0 8px; }
.callout > :last-child { margin-bottom: 0; }
.callout > p:first-child > strong:first-child {
  display: block; margin-bottom: 2px; font-family: var(--font-display); font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--petrol);
}
.callout.tip { border-color: var(--line-strong); background: var(--white); }
.callout.tip > p:first-child > strong:first-child { color: var(--abyss); }
.callout.warning { border-color: rgba(217, 104, 91, 0.45); background: #FCF3F1; }
.callout.warning > p:first-child > strong:first-child { color: var(--coral-ink); }

/* tables */
.table-wrap { margin: 24px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.9rem; line-height: 1.5; }
.table-wrap th {
  text-align: left; vertical-align: bottom; background: var(--surface); font-family: var(--font-display); font-weight: 600;
  font-size: 0.8rem; color: var(--abyss); padding: 10px 16px; border-bottom: 1px solid var(--line);
}
.table-wrap td { padding: 10px 16px; vertical-align: top; border-bottom: 1px solid var(--line); color: var(--ink); }
.table-wrap tbody tr:last-child td { border-bottom: 0; }
.table-wrap tbody tr:hover td { background: rgba(189, 217, 215, 0.18); }
.table-wrap td code { white-space: nowrap; }

/* cards */
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin: 24px 0 32px; }
.prose a.card {
  display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--white); text-decoration: none; color: var(--abyss);
  transition: border-color .15s, box-shadow .2s;
}
.prose a.card:hover { border-color: var(--aqua); box-shadow: var(--shadow-card); color: var(--abyss); }
.card-title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--abyss); }
.card-title::after { content: " →"; content: " →" / ""; color: var(--petrol); }
.card-body { font-size: 0.9rem; line-height: 1.5; color: var(--slate); }
@media (min-width: 640px) {
  /* four "Get started" cards: a fixed 2x2 grid, so no row is left with an empty cell */
  .layout-home .prose > .cards:first-of-type { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layout-home .prose > .cards:first-of-type > .card:first-child { background: var(--abyss); border-color: var(--abyss); }
  .layout-home .prose > .cards:first-of-type > .card:first-child .card-title { color: var(--surface); font-size: 1.125rem; }
  .layout-home .prose > .cards:first-of-type > .card:first-child .card-title::after { color: var(--mist); }
  .layout-home .prose > .cards:first-of-type > .card:first-child .card-body { color: var(--on-dark); }
  /* a 4-card or 2-card group gets two columns, so no card sits alone on its row */
  .layout-home .prose > .cards:has(> .card:nth-child(4):last-child),
  .layout-home .prose > .cards:has(> .card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* steps */
.prose ol.steps { list-style: none; padding: 0; margin: 24px 0 32px; counter-reset: step; }
.prose ol.steps > li { position: relative; counter-increment: step; padding: 0 0 12px 48px; margin: 0; }
.prose ol.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--mist); color: var(--abyss);
  font-family: var(--font-display); font-size: 0.875rem; font-weight: 700;
}
.prose ol.steps > li::after { content: ""; position: absolute; left: 14px; top: 36px; bottom: 4px; width: 2px; background: var(--line); }
.prose ol.steps > li:last-child::after { display: none; }
.prose ol.steps > li > h3:first-child { margin-top: 3px; }

/* params */
.prose dl.params { margin: 16px 0 24px; border-top: 1px solid var(--line); }
.prose dl.params dt { padding-top: 12px; font-size: 0.92rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.prose dl.params dt code { font-weight: 500; background: none; padding: 0; font-size: 0.9rem; }
.prose dl.params .type { font-family: var(--font-mono); font-size: 0.78rem; color: var(--slate); }
.prose dl.params .opt {
  font-family: var(--font-body); font-weight: 500; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--slate);
}
.prose dl.params dd { margin: 4px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 0.94rem; line-height: 1.6; }
.prose dl.params dd > :last-child { margin-bottom: 0; }

/* ---------- code ---------- */
.code-block { margin: 24px 0; border-radius: var(--radius); overflow: hidden; background: var(--abyss); border: 1px solid var(--line); }
.code-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 40px; padding: 0 8px 0 16px; background: var(--petrol);
}
.code-lang { font-family: var(--font-body); font-weight: 500; font-size: 0.8rem; color: var(--on-dark); }
.code-tabs .code-head { padding-left: 6px; }
.code-head [role="tablist"] { display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.code-head [role="tab"] {
  flex-shrink: 0; height: 40px; padding: 0 10px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  font-family: var(--font-body); font-weight: 500; font-size: 0.8rem; color: var(--on-dark);
}
.code-head [role="tab"]:hover { color: var(--surface); }
.code-head [role="tab"][aria-selected="true"] { color: var(--mist); border-bottom-color: var(--mist); }
.code-head [role="tab"]:focus-visible { outline-offset: -2px; }
.copy-btn {
  flex-shrink: 0; font-family: var(--font-body); font-weight: 500; font-size: 0.78rem;
  color: var(--on-dark); background: transparent; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 5px;
  padding: 4px 9px; cursor: pointer; transition: color .15s, border-color .15s;
}
.copy-btn:hover { color: var(--mist); border-color: rgba(189, 217, 215, 0.5); }
.copy-btn.is-copied { color: var(--mist); border-color: var(--mist); }
.code-block pre {
  margin: 0; padding: 16px; overflow-x: auto; background: var(--abyss); color: var(--surface);
  font-family: var(--font-mono); font-size: 0.84rem; line-height: 1.65; tab-size: 2;
}
.code-block pre:focus-visible { outline-offset: -3px; border-radius: 0 0 var(--radius) var(--radius); }
.code-block code { font-family: inherit; font-size: inherit; background: none; padding: 0; color: inherit; white-space: pre; }
/* API JSON samples: wrap long strings (provenance guidance) inside the column instead of a 2,000px scroll.
   Indentation is kept by pre-wrap; the JSON text itself (and what Copy copies) is unchanged. */
.layout-api .code-block code.language-json { white-space: pre-wrap; overflow-wrap: anywhere; }
.tok-k { color: var(--mist); }
.tok-s { color: var(--aqua); }
.tok-n { color: #FFFFFF; font-weight: 500; }
.tok-c { color: rgba(244, 248, 248, 0.64); }
.tok-p { color: rgba(244, 248, 248, 0.8); }
.tok-v { color: #D6E9E7; font-style: italic; }

/* ---------- API two-column ---------- */
.api-method { padding: 40px 0 8px; border-top: 1px solid var(--line); }
.prose > .api-method:first-of-type { margin-top: 32px; }
.api-prose > h2:first-child { margin-top: 0; }
.api-code > .code-block:first-child { margin-top: 0; }
.layout-api .prose > :not(.api-method):not(.code-block):not(.table-wrap):not(.cards) { max-width: 46rem; }
@media (min-width: 1600px) {
  .layout-api .api-method { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
  .layout-api .api-code { position: sticky; top: 80px; max-height: calc(100vh - 96px); overflow-y: auto; }
}

/* ---------- page footer blocks ---------- */
.helpful { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.helpful-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.helpful-q, .helpful-thanks {
  margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; color: var(--abyss);
}
.helpful-thanks { font-family: var(--font-body); font-weight: 400; color: var(--slate); }
.helpful-thanks:empty { display: none; }
.helpful-thanks a { color: var(--petrol); text-decoration: underline; text-decoration-color: var(--aqua); text-underline-offset: 3px; }
.helpful-btns { display: flex; gap: 8px; }
.btn-subtle {
  min-height: 36px; min-width: 56px; padding: 6px 14px; border-radius: 9px; border: 1px solid var(--line-strong);
  background: var(--white); color: var(--abyss); font-size: 0.85rem; cursor: pointer; transition: border-color .15s, background .15s;
}
.btn-subtle:hover { border-color: var(--slate); background: var(--mist-25); }
.helpful-help { margin: 0 0 0 auto; font-size: 0.85rem; color: var(--slate); }
.helpful-help a { color: var(--petrol); text-decoration: underline; text-decoration-color: var(--aqua); text-underline-offset: 3px; }
.btn-primary {
  min-height: 44px; padding: 10px 18px; border: 0; border-radius: 0.9rem; background: var(--mist); color: var(--abyss);
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; cursor: pointer;
}
.btn-primary:hover { background: var(--aqua); }

.prev-next { margin-top: 32px; display: grid; gap: 16px; }
@media (min-width: 640px) { .prev-next { grid-template-columns: 1fr 1fr; } }
.pn-card {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--white); text-decoration: none; transition: border-color .15s, box-shadow .2s;
}
.pn-card:hover { border-color: var(--aqua); box-shadow: var(--shadow-card); }
.pn-next { text-align: right; }
@media (min-width: 640px) { .pn-next { grid-column: 2; } }
.pn-label { font-family: var(--font-body); font-weight: 500; font-size: 0.8125rem; color: var(--slate); }
.pn-title { font-family: var(--font-display); font-weight: 600; color: var(--abyss); }
.pn-prev .pn-title::before { content: "← "; content: "← " / ""; }
.pn-next .pn-title::after { content: " →"; content: " →" / ""; }

/* ---------- footer ---------- */
.site-footer { background: var(--abyss); color: rgba(255, 255, 255, 0.9); }
.footer-inner { max-width: var(--shell); margin: 0 auto; padding: 40px var(--gutter); }
.footer-top { margin-bottom: 24px; }
.footer-back {
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem;
  color: var(--mist); text-decoration: none; transition: color .15s;
}
.footer-back:hover { color: var(--white); }
.footer-bottom {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 24px;
  font-family: var(--font-body); font-size: 0.8125rem; color: var(--on-dark);
  text-align: center;
}
@media (min-width: 900px) { .footer-bottom { flex-direction: row; text-align: left; } }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; }
.footer-links a, .footer-cookie {
  color: var(--on-dark); text-decoration: none; transition: color .15s;
  font: inherit; text-transform: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer;
}
.footer-links a:hover, .footer-cookie:hover { color: var(--mist); }

/* ---------- search dialog ---------- */
.search-dialog {
  width: min(40rem, calc(100vw - 32px)); max-height: min(36rem, calc(100vh - 20vh)); margin: 10vh auto 0; padding: 0;
  border: 1px solid var(--mist); border-radius: 14px; background: var(--white); color: var(--abyss); box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.search-dialog[open] { display: flex; flex-direction: column; }
.search-dialog::backdrop { background: rgba(3, 54, 61, 0.45); }
.search-box { display: flex; align-items: center; gap: 10px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--line); color: var(--slate); }
.search-box input {
  flex: 1; min-width: 0; height: 56px; border: 0; background: transparent; outline: none;
  font-family: var(--font-body); font-size: 1rem; color: var(--abyss);
}
.search-box input::placeholder { color: var(--slate); }
.search-box input::-webkit-search-cancel-button { display: none; }
.search-box input:focus-visible { outline: none; box-shadow: none; }
.search-box:focus-within { box-shadow: inset 0 -2px 0 var(--petrol); }
.search-esc { border: 0; background: none; padding: 6px; cursor: pointer; }
.search-esc kbd {
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--slate); border: 1px solid var(--line-strong); border-radius: 4px; padding: 2px 6px;
}
.search-results { list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1; }
.search-results:empty { display: none; }
.search-results [role="option"] { display: block; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.search-results [role="option"][aria-selected="true"] { background: rgba(189, 217, 215, 0.3); outline: 1px solid var(--aqua); outline-offset: -1px; }
.r-section { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--slate); }
.r-title { display: block; font-family: var(--font-display); font-weight: 600; color: var(--abyss); margin-top: 2px; }
.r-sub { color: var(--petrol); font-weight: 500; }
.r-snippet { display: block; font-size: 0.85rem; line-height: 1.45; color: var(--slate); margin-top: 2px; }
.search-results mark { background: var(--mist); color: var(--abyss); border-radius: 2px; padding: 0 1px; }
.search-status { margin: 0; padding: 14px 16px; font-size: 0.85rem; color: var(--slate); }
.search-status:empty { display: none; }
@media (max-width: 639.98px) {
  .search-dialog { width: 100vw; max-width: 100vw; max-height: 100dvh; margin: 0; border-radius: 0 0 14px 14px; border-width: 0 0 1px; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .nav-anim .nav-panel > .nav-list { transition-delay: 0s !important; }
}

/* ---------- print ---------- */
@media print {
  .site-header, .sidebar, .toc-rail, .toc-inline, .helpful, .prev-next, .site-footer, .search-dialog, .copy-btn, .skip-link, .anchor { display: none !important; }
  body { background: #fff; }
  .shell { display: block; max-width: none; padding: 0; }
  .doc { padding: 0; }
  .doc-body { max-width: none; }
  .code-block, .code-block pre { background: #fff; color: #000; border-color: #ccc; }
  .code-head { background: #f3f3f3; }
  .code-block [role="tabpanel"][hidden] { display: block !important; }
  .code-block [class^="tok-"] { color: #000; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
  .layout-api .api-method { display: block; }
  .layout-api .api-code { position: static; max-height: none; }
}

.footer-bottom > span:first-child { white-space: nowrap; }