/*
 * The API reference at /api-docs.
 *
 * Standalone rather than built on embed.css: this is the one public,
 * logged-out surface, and most of what it styles is HTML the markdown renderer
 * emits (bare <p>, <table>, <pre>), which has nowhere to hang a utility class.
 * Scoping to .docs-prose reaches all of it.
 *
 * Served straight from the source tree at /_ui/static/css/api-docs.css — no
 * build step, so an edit is live on refresh.
 */

:root {
  --docs-bg: #ffffff;
  --docs-surface: #f8fafc;
  --docs-fg: #0f172a;
  --docs-muted: #64748b;
  --docs-border: #e2e8f0;
  /* Hermes purple. The app's `--primary` is hsl(280 50% 50%); the accent is
     that hue, and `-soft` a light tint of it for active rows and callouts. */
  --docs-accent: hsl(280 50% 48%);
  --docs-accent-soft: hsl(280 60% 95%);
  --docs-code-bg: #f1f5f9;
  --docs-code-fg: #0f172a;
  /* A mid slate rather than near-black: a sample should sit level with the
     prose beside it, not be the heaviest thing on the page. */
  --docs-block-bg: #2b3444;
  --docs-block-fg: #e2e8f0;
  --docs-block-head-bg: rgb(255 255 255 / 5%);

  /* Syntax colours. The code panel is dark in both themes, so one set serves
     both; each clears 5:1 against either panel background. */
  /* Callouts: a note is the accent tint, a warning amber. */
  --docs-note-border: hsl(280 45% 80%);
  --docs-note-bg: hsl(280 60% 97%);
  --docs-note-label: hsl(280 50% 40%);
  --docs-warning-border: #fcd34d;
  --docs-warning-bg: #fffbeb;
  --docs-warning-label: #92400e;

  --docs-tok-comment: #9aa7ba;
  --docs-tok-command: #c4b5fd;
  --docs-tok-flag: #93c5fd;
  --docs-tok-method: #fcd34d;
  --docs-tok-url: #7dd3fc;
  --docs-tok-placeholder: #f9a8d4;
  --docs-tok-key: #93c5fd;
  --docs-tok-string: #86efac;
  --docs-tok-number: #fdba74;
  --docs-tok-punct: #a7b3c4;
  --docs-tok-tag: #f9a8d4;
  --docs-tok-attr: #93c5fd;

  --docs-get: #0369a1;
  --docs-post: #15803d;
  --docs-put: #b45309;
  --docs-patch: #b45309;
  --docs-delete: #b91c1c;
  --docs-head: #475569;

  --docs-sidebar-width: 17rem;
  /* The prose column is capped at a readable measure and the code column takes
     everything left over, so widening the window widens the samples rather
     than stretching the paragraphs or stranding a margin on the right. */
  --docs-prose-max: 40rem;
  /* Wider than the reference's prose column, because a guide has no code rail
     beside it and its samples run the full measure. */
  --docs-guide-measure: 52rem;
  --docs-rail-width: 13rem;
  --docs-code-min: 24rem;
  /* Bounded so a 2560px monitor gets a genuinely wider sample rather than one
     absurdly long line; the row centres, so whatever is left over is split
     instead of stranded on the right. */
  --docs-code-max: 64rem;
  --docs-header-height: 3.75rem;
}

/*
 * Dark is the system setting by default and an explicit choice after that.
 *
 * `:root:not([data-theme="light"])` so a reader who picks light on a
 * dark-set machine actually gets light; `:root[data-theme="dark"]` so one who
 * picks dark on a light-set machine gets dark. The attribute is written by
 * api-docs-preferences.js before the first paint.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --docs-bg: #0b1120;
    --docs-surface: #111827;
    --docs-fg: #e2e8f0;
    --docs-muted: #94a3b8;
    --docs-border: #1e293b;
    --docs-accent: hsl(280 70% 78%);
    --docs-accent-soft: hsl(280 35% 24%);
    --docs-code-bg: #1e293b;
    --docs-code-fg: #e2e8f0;
    --docs-block-bg: #020617;
    --docs-block-fg: #cbd5e1;
    --docs-note-border: hsl(280 30% 34%);
    --docs-note-bg: hsl(280 30% 14%);
    --docs-note-label: hsl(280 70% 80%);
    --docs-warning-border: #92400e;
    --docs-warning-bg: #2a1d07;
    --docs-warning-label: #fcd34d;

    --docs-get: #7dd3fc;
    --docs-post: #86efac;
    --docs-put: #fcd34d;
    --docs-patch: #fcd34d;
    --docs-delete: #fca5a5;
    --docs-head: #cbd5e1;
  }
}

:root[data-theme="dark"] {
  --docs-bg: #0b1120;
  --docs-surface: #111827;
  --docs-fg: #e2e8f0;
  --docs-muted: #94a3b8;
  --docs-border: #1e293b;
  --docs-accent: hsl(280 70% 78%);
  --docs-accent-soft: hsl(280 35% 24%);
  --docs-code-bg: #1e293b;
  --docs-code-fg: #e2e8f0;
  --docs-block-bg: #020617;
  --docs-block-fg: #cbd5e1;
  --docs-note-border: hsl(280 30% 34%);
  --docs-note-bg: hsl(280 30% 14%);
  --docs-note-label: hsl(280 70% 80%);
  --docs-warning-border: #92400e;
  --docs-warning-bg: #2a1d07;
  --docs-warning-label: #fcd34d;

  --docs-get: #7dd3fc;
  --docs-post: #86efac;
  --docs-put: #fcd34d;
  --docs-patch: #fcd34d;
  --docs-delete: #fca5a5;
  --docs-head: #cbd5e1;
}

* {
  box-sizing: border-box;
}

.docs-body {
  margin: 0;
  background: var(--docs-bg);
  color: var(--docs-fg);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--docs-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

code,
pre {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

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

.docs-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--docs-bg);
  border: 1px solid var(--docs-border);
}

.docs-skip:focus {
  left: 0;
}

/* ---------------------------------------------------------------- header */

.docs-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--docs-header-height);
  padding: 0 1.25rem;
  background: var(--docs-bg);
  border-bottom: 1px solid var(--docs-border);
}

.docs-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
  color: var(--docs-fg);
  font-weight: 600;
}

.docs-brand:hover {
  text-decoration: none;
}

/*
 * The mark is a white-on-transparent SVG, so as an <img> it was invisible on
 * the white header — which is what the empty space beside the wordmark was.
 * A mask ignores the file's own fill and paints the shape in `currentColor`,
 * so it is dark on light, light on dark, and needs no second asset.
 */
.docs-brand-mark {
  flex-shrink: 0;
  width: 3.5rem;
  height: 1.75rem;
  background: currentColor;
  -webkit-mask: url("/_ui/static/img/logo.svg") no-repeat center / contain;
  mask: url("/_ui/static/img/logo.svg") no-repeat center / contain;
}

.docs-brand-label {
  font-size: 0.9375rem;
}

.docs-search {
  position: relative;
  flex: 1;
  max-width: 34rem;
}

.docs-search-form {
  margin: 0;
}

.docs-search input {
  width: 100%;
  padding: 0.5rem 0.875rem;
  background: var(--docs-surface);
  border: 1px solid var(--docs-border);
  border-radius: 0.5rem;
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
}

.docs-search input:focus {
  outline: 2px solid var(--docs-accent);
  outline-offset: -1px;
}

.docs-search-results:empty {
  display: none;
}

.docs-search-results {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  max-height: 26rem;
  overflow-y: auto;
  padding: 0.375rem;
  background: var(--docs-bg);
  border: 1px solid var(--docs-border);
  border-radius: 0.625rem;
  box-shadow: 0 12px 28px rgb(15 23 42 / 18%);
}

.docs-search-empty {
  margin: 0;
  padding: 0.75rem;
  color: var(--docs-muted);
  font-size: 0.875rem;
}

.docs-search-all {
  display: block;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--docs-border);
  font-size: 0.8125rem;
}

/* Pushed to the right edge: the search box is capped, so without this
   everything bunched at the left and left the header's right half empty. */
.docs-header-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
}

.docs-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--docs-border);
  border-radius: 0.375rem;
  background: transparent;
  color: var(--docs-muted);
  cursor: pointer;
}

.docs-theme-toggle:hover {
  background: var(--docs-surface);
  color: var(--docs-fg);
}

/* Only the icon for the theme you can switch *to* is shown, and it is chosen
   in CSS so it is already right on the first paint. */
.docs-theme-icon {
  display: none;
  line-height: 0;
}

.docs-theme-light {
  display: inline-flex;
}

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

  :root:not([data-theme="light"]) .docs-theme-dark {
    display: inline-flex;
  }
}

:root[data-theme="dark"] .docs-theme-light {
  display: none;
}

:root[data-theme="dark"] .docs-theme-dark {
  display: inline-flex;
}

:root[data-theme="light"] .docs-theme-light {
  display: inline-flex;
}

:root[data-theme="light"] .docs-theme-dark {
  display: none;
}

.docs-site-switch {
  flex-shrink: 0;
  padding: 0.3125rem 0.75rem;
  border: 1px solid var(--docs-border);
  border-radius: 0.4375rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

.docs-site-switch:hover {
  border-color: var(--docs-accent);
  text-decoration: none;
}

.docs-spec-link {
  flex-shrink: 0;
  font-size: 0.8125rem;
  color: var(--docs-muted);
}

/* ------------------------------------------------------------- sign in */

.docs-signin,
.docs-viewer {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  line-height: 1.25;
  padding: 0.3125rem 0.75rem;
  border: 1px solid var(--docs-border);
  border-radius: 0.4375rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

.docs-signin:hover {
  border-color: var(--docs-accent);
  text-decoration: none;
}

.docs-viewer {
  flex-direction: row;
  align-items: center;
  gap: 0.4375rem;
  color: var(--docs-muted);
  font-weight: 500;
}

/* Says the samples on this page are personalised. */
.docs-viewer-dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--docs-post);
}

/* ---------------------------------------------------------------- layout */

.docs-layout {
  display: grid;
  grid-template-columns: var(--docs-sidebar-width) minmax(0, 1fr);
  align-items: start;
}

.docs-sidebar {
  position: sticky;
  top: var(--docs-header-height);
  max-height: calc(100vh - var(--docs-header-height));
  overflow-y: auto;
  padding: 1.5rem 1rem 4rem;
  border-right: 1px solid var(--docs-border);
}

.docs-nav-group + .docs-nav-group {
  margin-top: 1.5rem;
}

.docs-nav-group-name {
  margin: 0 0 0.5rem 0.625rem;
  color: var(--docs-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* A label inside a section, with pages under it. Quieter than a section
   heading and louder than a page, because that is what it sits between. */
.docs-nav-subgroup {
  list-style: none;
  margin-top: 0.5rem;
}

.docs-nav-subgroup-name {
  margin: 0 0 0.125rem 0.625rem;
  color: var(--docs-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.docs-nav-subgroup > ul {
  margin-left: 0.625rem !important;
  border-left: 1px solid var(--docs-border);
}

.docs-nav-subgroup > ul .docs-nav-link {
  border-radius: 0 0.375rem 0.375rem 0;
}

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

.docs-nav-item {
  list-style: none;
}

.docs-nav-row {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.docs-nav-caret {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  /* Sits at the far edge of the row, after the label. */
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--docs-muted);
  cursor: pointer;
  transition: transform 120ms, background-color 120ms;
}

.docs-nav-caret:hover {
  background: var(--docs-surface);
  color: var(--docs-fg);
}

.docs-nav-item.is-open > .docs-nav-row > .docs-nav-caret {
  transform: rotate(90deg);
}

/* The sub-list is closed until its caret (or the active page) opens it. */
.docs-subnav {
  display: none;
}

.docs-nav-item.is-open > .docs-subnav {
  display: block;
}

.docs-nav-link {
  display: block;
  flex: 1;
  min-width: 0;
  padding: 0.3125rem 0.625rem;
  border-radius: 0.375rem;
  color: var(--docs-fg);
  font-size: 0.875rem;
}

.docs-nav-link:hover {
  background: var(--docs-surface);
  text-decoration: none;
}

/* `is-active` marks the page you are on; `is-current` is the scrollspy, which
   is what the Introduction row uses instead — see `nav_item`. */
.docs-nav-link.is-active,
.docs-nav-link.is-current {
  background: var(--docs-accent-soft);
  color: var(--docs-accent);
  font-weight: 600;
}

/* --------------------------------------------------- sidebar sub-sections */

.docs-subnav {
  margin: 0.25rem 0 0.75rem 0.625rem !important;
  border-left: 1px solid var(--docs-border);
}

.docs-subnav-link {
  display: block;
  padding: 0.1875rem 0 0.1875rem 0.75rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--docs-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.docs-subnav-link:hover {
  color: var(--docs-fg);
  text-decoration: none;
}

/* Set by the scrollspy in api-docs.js as the reader moves down the page. */
.docs-subnav-link.is-current {
  border-left-color: var(--docs-accent);
  color: var(--docs-accent);
  font-weight: 600;
}

.docs-subnav-level-3 .docs-subnav-link {
  padding-left: 1.5rem;
}

/*
 * The Introduction alone lists its sections at one level, set by `is-flat` in
 * render.rs. Its `###`s are destinations in their own right, not parts of the
 * section above them, so they sit at the same indent as the `##`s and the
 * whole list sits at the page's own indent rather than stepped in under it.
 *
 * Always shown, overriding the closed-by-default rule above: the row has no
 * caret, so there is nothing to open it with, and these are the first seven
 * places a reader goes — folding them away behind one word is the opposite of
 * what the list is for.
 */
.docs-subnav.is-flat {
  display: block;
  margin: 0 0 0.375rem !important;
  border-left: 0;
}

.docs-subnav.is-flat .docs-subnav-link {
  padding: 0.3125rem 0.625rem;
  margin-left: 0;
  border-left: 0;
  border-radius: 0.375rem;
  font-size: 0.875rem;
}

.docs-subnav.is-flat .docs-subnav-link:hover {
  background: var(--docs-surface);
}

/* ------------------------------------------------------------------ main */

.docs-main {
  padding: 2.5rem 0 6rem;
  min-width: 0;
}

.docs-article-head,
.docs-row {
  display: grid;
  /*
   * `min(measure, 50%)` for the prose, `1fr` for the code.
   *
   * Neither track may be a bare `fr` beside a content-sized one: an `fr` takes
   * all the free space, so whichever side is not `fr` collapses — `1fr` prose
   * shrank the code column to its content, and `minmax(0, 40rem)` prose
   * collapsed the prose instead. A non-flexible `min()` track resolves first
   * and the `1fr` takes whatever is left, so the prose holds a readable
   * measure and every extra pixel of window widens the samples. The `50%`
   * keeps the code column above its minimum on a narrow desktop, where
   * 40rem of prose would leave too little beside it.
   */
  grid-template-columns:
    min(var(--docs-prose-max), 50%)
    minmax(var(--docs-code-min), var(--docs-code-max));
  gap: 2.5rem;
  padding: 0 2rem;
  /* Exactly the two bounded tracks plus the gap and padding, so a wide window
     is used rather than left empty and an extra-wide one centres instead. */
  max-width: calc(var(--docs-prose-max) + var(--docs-code-max) + 2.5rem + 4rem);
  margin-inline: auto;
}

.docs-article-head {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--docs-border);
}

/* The heading block spans only the prose column, so it lines up with it. */
.docs-article-head > * {
  grid-column: 1;
}

/* Muted, not accent: it labels which part of the site the page is in, which
   is the quietest thing on the page and was reading as the loudest. */
.docs-eyebrow {
  margin: 0 0 0.375rem;
  color: var(--docs-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.docs-article-head h1 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.docs-summary {
  margin: 0.625rem 0 0;
  color: var(--docs-muted);
  font-size: 1rem;
}

/* ------------------------------------------------------------------ rows */

.docs-row {
  align-items: start;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

/*
 * The page's only full-width rule: one endpoint from the next. It sits on the
 * row so it runs under the sample as well as the prose — the two are one
 * endpoint, and a rule that stopped at the prose column cut it in half.
 */
.docs-row.is-operation {
  margin-top: 1.25rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--docs-border);
}

/*
 * ...except the first one on the page, which has nothing above it to be
 * separated from: the article head already draws the rule under the title,
 * and two full-width lines with only whitespace between them read as a band.
 */
.docs-rows > .docs-row.is-operation:first-child {
  margin-top: 0;
  padding-top: 1.25rem;
  border-top: 0;
}

/* --------------------------------------------------------------- object */

.docs-object > .docs-heading {
  margin: 0 0 0.25rem;
  font-size: 1.375rem;
}

.docs-object > .docs-heading a {
  color: inherit;
}

p.docs-returns-object {
  margin: 0.625rem 0 0;
  font-size: 0.875rem;
}

.docs-row-prose {
  min-width: 0;
}

.docs-row-code {
  min-width: 0;
  /* Follows the reader while a tall section is on screen. */
  position: sticky;
  top: calc(var(--docs-header-height) + 1.5rem);
}

/*
 * Sized against the window rather than a fixed height, and a little smaller
 * than it so a sample never fills the screen on its own.
 *
 * The cap is on each sample (below), not shared out across the stack by
 * `flex-shrink`: shrink is proportional to content, so a 5000px response and
 * a 300px curl both got scaled to ~19% and the curl collapsed to a single
 * clipped line. A short sample should simply be shown. The stack keeps a cap
 * only as a backstop for the rare section where every sample is long.
 */
.docs-code-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: calc(100vh - var(--docs-header-height) - 3rem);
  overflow-y: auto;
}

/* Never shrink: a sample is either short enough to show whole or long enough
   to scroll inside its own cap. Being squeezed because a sibling is long is
   neither. */
.docs-code {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  min-height: 0;
  border: 1px solid var(--docs-border);
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--docs-block-bg);
}

/* One sample in several languages: every version is in the block, and
   `<html data-docs-lang>` (set before paint by api-docs-preferences.js, and
   by the picker) decides which shows. With no choice made, or when this block
   has no version in the chosen language, the first one shows. The three
   language rules spell `SampleLanguage::key`. */
.docs-code.is-multi > pre {
  display: none;
}

.docs-code.is-multi > pre:first-of-type {
  display: block;
}

:root[data-docs-lang="curl"] .docs-code.is-multi:has(> pre[data-docs-lang="curl"]) > pre,
:root[data-docs-lang="python"] .docs-code.is-multi:has(> pre[data-docs-lang="python"]) > pre,
:root[data-docs-lang="typescript"] .docs-code.is-multi:has(> pre[data-docs-lang="typescript"]) > pre {
  display: none;
}

:root[data-docs-lang="curl"] .docs-code.is-multi:has(> pre[data-docs-lang="curl"]) > pre[data-docs-lang="curl"],
:root[data-docs-lang="python"] .docs-code.is-multi:has(> pre[data-docs-lang="python"]) > pre[data-docs-lang="python"],
:root[data-docs-lang="typescript"] .docs-code.is-multi:has(> pre[data-docs-lang="typescript"]) > pre[data-docs-lang="typescript"] {
  display: block;
}

/* The picker sits where a single sample names its language, and reads like
   that label plus a chevron. Without scripts it could switch nothing, so the
   first language's plain label shows instead. */
.docs-code-pick {
  position: relative;
  display: none;
  align-items: center;
}

:root[data-docs-js] .docs-code-pick {
  display: inline-flex;
}

:root[data-docs-js] .docs-code-lang-static {
  display: none;
}

.docs-code-select {
  appearance: none;
  margin: 0;
  padding: 0.125rem 1.25rem 0.125rem 0.375rem;
  border: 1px solid transparent;
  border-radius: 0.3125rem;
  background: transparent;
  color: inherit;
  /* The native dropdown list follows the dark code header in both themes. */
  color-scheme: dark;
  font-family: ui-monospace, monospace;
  font-size: 0.6875rem;
  cursor: pointer;
}

.docs-code-select:hover {
  border-color: rgb(255 255 255 / 22%);
  background: rgb(255 255 255 / 8%);
}

.docs-code-select:focus-visible {
  outline: 2px solid var(--docs-accent);
  outline-offset: 1px;
}

.docs-code-select option {
  background: var(--docs-block-bg);
  color: var(--docs-block-fg);
}

.docs-code-pick svg {
  position: absolute;
  right: 0.25rem;
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.7;
  pointer-events: none;
}

/* A field or operation flagged `deprecated` in the spec. */
.docs-badge-deprecated {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0 0.375rem;
  border: 1px solid var(--docs-put);
  border-radius: 0.25rem;
  color: var(--docs-put);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* A lone sample has no sibling to leave room for, so it may take more. */
.docs-code:only-child pre {
  max-height: calc((100vh - var(--docs-header-height)) * 0.78);
}

.docs-code-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4375rem 0.75rem;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
  background: var(--docs-block-head-bg);
  color: #cbd5e1;
}

/* The title says what the sample shows, so it is the first thing read in the
   block. A request-line title (`POST /v0/...`) can be long; it wraps rather
   than pushing the copy button off the edge. */
.docs-code-label {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #f1f5f9;
  font-size: 0.75rem;
  font-weight: 600;
}

.docs-code-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.docs-code-lang {
  font-family: ui-monospace, monospace;
  font-size: 0.6875rem;
  opacity: 0.7;
}

.docs-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Square and fixed, so swapping the glyph never shifts the header. */
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 0.3125rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color 120ms, border-color 120ms, color 120ms;
}

.docs-copy:hover {
  background: rgb(255 255 255 / 12%);
  border-color: rgb(255 255 255 / 40%);
}

.docs-copy:focus-visible {
  outline: 2px solid var(--docs-accent);
  outline-offset: 1px;
}

/* Both glyphs ship; the state class decides which one shows. */
.docs-copy-done {
  display: none;
}

.docs-copy.is-copied {
  color: var(--docs-post);
  border-color: currentColor;
}

.docs-copy.is-copied .docs-copy-idle {
  display: none;
}

.docs-copy.is-copied .docs-copy-done {
  display: block;
}

.docs-copy.is-failed {
  color: var(--docs-put);
  border-color: currentColor;
}

.docs-code pre {
  margin: 0;
  padding: 0.875rem 1rem;
  min-height: 0;
  /* Half the window each, so a Request and a Response both fit on screen. */
  max-height: calc((100vh - var(--docs-header-height)) * 0.5);
  /* Long lines wrap rather than hiding behind a horizontal scrollbar: a
     sample you have to drag sideways to read is a sample nobody reads. Only
     the vertical overflow scrolls. */
  overflow-x: hidden;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: none;
  color: var(--docs-block-fg);
  font-size: 0.75rem;
  line-height: 1.6;
}

/* -------------------------------------------------- single-column guides */

/*
 * A guide reads top to bottom, so its samples and tables stay in the text
 * where the author put them. That leaves no code rail, so the page drops to
 * one column and takes a wider measure — 40rem was chosen to sit beside the
 * rail, and a curl line does not fit in it.
 */
.docs-main.is-single-column .docs-article-head {
  grid-template-columns: minmax(0, 1fr);
  max-width: calc(var(--docs-guide-measure) + var(--docs-rail-width) + 7rem);
  gap: 0;
}

/*
 * Prose, then the page's own contents. The rail replaces the sub-list the
 * sidebar used to fold under each guide: on a page read top to bottom, the
 * headings say where you are, which is worth having in view rather than
 * behind a caret two columns away.
 */
.docs-main.is-single-column .docs-guide-body {
  display: grid;
  grid-template-columns: minmax(0, var(--docs-guide-measure)) var(--docs-rail-width);
  gap: 3rem;
  max-width: calc(var(--docs-guide-measure) + var(--docs-rail-width) + 7rem);
  margin-inline: auto;
  padding-inline: 2rem;
}

.docs-main.is-single-column .docs-row {
  grid-template-columns: minmax(0, 1fr);
  max-width: none;
  padding-inline: 0;
  gap: 0;
}

.docs-on-this-page {
  position: sticky;
  top: calc(var(--docs-header-height) + 2rem);
  align-self: start;
  padding-top: 1.25rem;
}

.docs-on-this-page-title {
  margin: 0 0 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--docs-muted);
}

.docs-on-this-page ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-on-this-page li + li {
  margin-top: 0.4375rem;
}

.docs-on-this-page-link {
  display: block;
  color: var(--docs-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.docs-on-this-page-link:hover {
  color: var(--docs-fg);
  text-decoration: none;
}

/* Set by the scrollspy in api-docs.js as the reader moves down the page. */
.docs-on-this-page-link.is-current {
  color: var(--docs-accent);
  font-weight: 600;
}

.docs-main.is-single-column .docs-row-code {
  display: none;
}

.docs-main.is-single-column .docs-row-prose {
  max-width: var(--docs-guide-measure);
}

/* Full width of the measure, rather than the reference's dark rail. A fence
   renders as a card, so the spacing goes on the card: on the <pre> inside it,
   it opened a gap within the panel and left none below it. */
.docs-main.is-single-column .docs-prose pre,
.docs-main.is-single-column .docs-prose .docs-code {
  margin-block: 1.25rem;
}

/* The card draws the panel, so the <pre> inside it drops the bare-<pre>
   margin, radius and padding it would otherwise pick up from the prose. */
.docs-prose .docs-code pre,
.docs-main.is-single-column .docs-prose .docs-code pre {
  margin: 0;
  padding: 0.875rem 1rem;
  border-radius: 0;
}

.docs-main.is-single-column .docs-prose table {
  margin-block: 1.25rem;
}

/* ------------------------------------------------------ numbered steps */

/*
 * A guide's ordered lists are steps, so they get a numeral a reader can count
 * rather than a browser default tucked against the text.
 */
.docs-main.is-single-column .docs-prose ol {
  counter-reset: docs-step;
  list-style: none;
  padding-left: 0;
}

.docs-main.is-single-column .docs-prose ol > li {
  position: relative;
  counter-increment: docs-step;
  padding-left: 2.25rem;
  margin-bottom: 0.75rem;
}

.docs-main.is-single-column .docs-prose ol > li::before {
  content: counter(docs-step);
  position: absolute;
  left: 0;
  top: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--docs-accent-soft);
  color: var(--docs-accent);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* A nested list is not a second set of steps. */
.docs-main.is-single-column .docs-prose ol ol,
.docs-main.is-single-column .docs-prose ul {
  list-style: disc;
  padding-left: 1.375rem;
}

.docs-main.is-single-column .docs-prose ul > li {
  padding-left: 0;
}

.docs-main.is-single-column .docs-prose ul > li::before {
  content: none;
}

/* ----------------------------------------------------------------- prose */

.docs-prose > :first-child {
  margin-top: 0;
}

.docs-prose h2 {
  margin: 2.75rem 0 0.875rem;
  padding-top: 0.5rem;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
}

.docs-prose h3 {
  margin: 2rem 0 0.75rem;
  font-size: 1.1875rem;
}

.docs-prose h4 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1rem;
}

/* Sticky header would otherwise cover the target of an in-page anchor. */
.docs-heading,
.docs-operation {
  scroll-margin-top: calc(var(--docs-header-height) + 1rem);
}

.docs-prose p,
.docs-prose ul,
.docs-prose ol {
  margin: 0 0 1rem;
}

.docs-prose ul,
.docs-prose ol {
  padding-left: 1.375rem;
}

/* Guide screenshots. Markdown wraps an image in a <p> of its own; the border
   separates a white screenshot from the white page. */
.docs-prose img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--docs-border);
  border-radius: 0.5rem;
}

/* A screenshot takes half the measure. Followed by more prose, it floats
   right and that prose wraps beside it; ending its section, it has nothing
   to sit beside, so it stands alone in the middle. */
.docs-prose > p:has(> img:only-of-type) {
  width: 50%;
  margin: 0 auto 1.25rem;
}

.docs-prose > p:has(> img:only-of-type):not(:last-child) {
  float: right;
  margin: 0.25rem 0 1rem 1.5rem;
}

/* Each step is its own row, so a screenshot taller than its step's prose
   stays in that step rather than pushing into the next heading. */
.docs-row-prose {
  display: flow-root;
}

/* The expand button api-docs.js adds sits in the screenshot's top-right
   corner, faint until the reader points at or tabs to the screenshot. */
/* Lifted above the prose beside it: the numbered list items are positioned
   for their badges, so without this they paint over a floated screenshot and
   take its clicks. */
.docs-shot {
  position: relative;
  z-index: 1;
}

.docs-shot img {
  cursor: zoom-in;
}

.docs-shot-expand {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--docs-border);
  border-radius: 0.375rem;
  background: var(--docs-bg);
  color: var(--docs-fg);
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 120ms ease;
}

.docs-shot:hover .docs-shot-expand,
.docs-shot-expand:focus-visible {
  opacity: 1;
}

.docs-shot-expand:hover {
  border-color: var(--docs-accent);
  color: var(--docs-accent);
}

.docs-shot-expand svg,
.docs-lightbox-close svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The enlarged screenshot: as large as the window allows, never upscaled past
   the capture, over a dimmed page. */
.docs-lightbox {
  max-width: 94vw;
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: 0.625rem;
  background: transparent;
  overflow: visible;
}

.docs-lightbox::backdrop {
  background: rgb(15 23 42 / 0.72);
}

.docs-lightbox-image {
  display: block;
  max-width: 94vw;
  max-height: 92vh;
  border-radius: 0.625rem;
  box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.35);
  cursor: zoom-out;
}

.docs-lightbox-close {
  position: absolute;
  top: -0.875rem;
  right: -0.875rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--docs-border);
  border-radius: 999px;
  background: var(--docs-bg);
  color: var(--docs-fg);
  cursor: pointer;
}

.docs-lightbox-close:hover {
  color: var(--docs-accent);
}

.docs-prose li + li {
  margin-top: 0.375rem;
}

.docs-prose code {
  padding: 0.1em 0.35em;
  background: var(--docs-code-bg);
  border-radius: 0.25rem;
  color: var(--docs-code-fg);
  font-size: 0.875em;
}

.docs-prose pre {
  margin: 0 0 1.25rem;
  padding: 1rem 1.125rem;
  overflow-x: auto;
  background: var(--docs-block-bg);
  border-radius: 0.5rem;
  color: var(--docs-block-fg);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.docs-prose pre code {
  padding: 0;
  background: none;
  color: inherit;
  font-size: inherit;
}

.docs-prose blockquote {
  margin: 0 0 1rem;
  padding-left: 1rem;
  border-left: 3px solid var(--docs-border);
  color: var(--docs-muted);
  /* A callout's panel would otherwise run underneath a floated screenshot. */
  clear: both;
}

/*
 * Callouts: GitHub alerts (`> [!NOTE]`, `> [!WARNING]`), which pulldown-cmark
 * renders as a blockquote classed by kind. A caveat sits in one of these
 * rather than in a bold sentence mid-paragraph, so it reads as set apart from
 * the step instead of as more of it.
 */
.docs-prose blockquote[class^="markdown-alert-"] {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--docs-callout-border);
  border-left-width: 3px;
  border-radius: 0.375rem;
  background: var(--docs-callout-bg);
  color: var(--docs-fg);
}

.docs-prose blockquote[class^="markdown-alert-"] > :last-child {
  margin-bottom: 0;
}

.docs-prose blockquote[class^="markdown-alert-"]::before {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--docs-callout-label);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.docs-prose .markdown-alert-note,
.docs-prose .markdown-alert-tip {
  --docs-callout-border: var(--docs-note-border);
  --docs-callout-bg: var(--docs-note-bg);
  --docs-callout-label: var(--docs-note-label);
}

.docs-prose .markdown-alert-warning,
.docs-prose .markdown-alert-caution,
.docs-prose .markdown-alert-important {
  --docs-callout-border: var(--docs-warning-border);
  --docs-callout-bg: var(--docs-warning-bg);
  --docs-callout-label: var(--docs-warning-label);
}

.docs-prose .markdown-alert-note::before { content: "Note"; }
.docs-prose .markdown-alert-tip::before { content: "Tip"; }
.docs-prose .markdown-alert-important::before { content: "Important"; }
.docs-prose .markdown-alert-warning::before { content: "Warning"; }
.docs-prose .markdown-alert-caution::before { content: "Caution"; }

.docs-prose table,
.docs-table {
  width: 100%;
  margin: 0 0 1.25rem;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.docs-prose th,
.docs-prose td,
.docs-table th,
.docs-table td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--docs-border);
  text-align: left;
  vertical-align: top;
}

.docs-prose th,
.docs-table th {
  background: var(--docs-surface);
  font-weight: 600;
}

/* ------------------------------------------------------------ operations */

/* The rule and the space above it belong to `.docs-row.is-operation`. */
.docs-operation {
  margin: 0;
}

.docs-operation-signature {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.docs-method {
  padding: 0.1875rem 0.5rem;
  border-radius: 0.3125rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}

.docs-method-get { background: var(--docs-get); }
.docs-method-post { background: var(--docs-post); }
.docs-method-put { background: var(--docs-put); }
.docs-method-patch { background: var(--docs-patch); }
.docs-method-delete { background: var(--docs-delete); }
.docs-method-head { background: var(--docs-head); }

.docs-path {
  padding: 0.1875rem 0.4375rem;
  background: var(--docs-code-bg);
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  word-break: break-all;
}

.docs-operation > .docs-heading {
  margin: 0 0 0.25rem;
  font-size: 1.375rem;
}

/* The operation's name is the page's subject, not a link to somewhere else.
   Its anchor makes it a link, and the accent made every one of them purple. */
.docs-operation > .docs-heading a {
  color: inherit;
}

p.docs-note {
  margin: 0.5rem 0 0;
  color: var(--docs-muted);
  font-size: 0.8125rem;
}

.docs-block {
  margin-top: 2rem;
}

/*
 * Sentence case, in the page's own type, and no rule of its own. Small bold
 * caps read as a fourth kind of heading on a page that already has a title, an
 * operation name and prose headings; a line under it would have been a third
 * kind of line. Size and weight are enough to mark it.
 */
.docs-block-title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--docs-fg);
}

.docs-content-type {
  color: var(--docs-muted);
  font-size: 0.8125rem;
  font-weight: 400;
}

.docs-response + .docs-response {
  margin-top: 0.875rem;
}

.docs-response-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
}

/*
 * One colour for every status. Tinting them by family put three more hues on
 * a page whose error line already says which codes these are, and a reader
 * scanning `400 · 401 · 422 · 500` is reading the numbers, not the colours.
 */
.docs-status {
  padding: 0.125rem 0.4375rem;
  border-radius: 0.25rem;
  background: var(--docs-code-bg);
  color: var(--docs-muted);
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 600;
}

/* ---------------------------------------------------------------- schema */

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

/* Rows are separated by their own hairline, not by the prose list's gap. */
ul.docs-schema li + li {
  margin-top: 0;
}

/* ------------------------------------------------ the conditional group */

.docs-more {
  margin: 2rem 0 0;
}

.docs-more-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.25rem;
}

.docs-more-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--docs-fg);
}

.docs-expand-all {
  padding: 0;
  border: 0;
  background: none;
  color: var(--docs-accent);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.docs-expand-all:hover {
  text-decoration: underline;
}

/* The row is the whole summary, so the click target is the line, not the
   chevron. `list-style: none` twice: Safari needs the ::-webkit- form. */
.docs-field-collapse > summary {
  cursor: pointer;
  list-style: none;
}

.docs-field-collapse > summary::-webkit-details-marker {
  display: none;
}

.docs-field-chevron {
  display: inline-flex;
  align-items: center;
  margin-right: 0.125rem;
  color: var(--docs-muted);
  transition: transform 120ms;
}

.docs-field-collapse[open] > summary .docs-field-chevron {
  transform: rotate(90deg);
}

/* A row with nothing to reveal has no chevron, so it is indented to the same
   place as the ones that do rather than starting a column of its own. */
.docs-field-head.is-bare {
  padding-left: 1.0625rem;
}

.docs-field-body {
  padding-left: 1.0625rem;
}

p.docs-error-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.625rem 0 0;
}

/* A hairline under each row rather than a rule down the side of the list:
   the rows are siblings, and the bracket implied a nesting they do not have. */
.docs-field {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--docs-border);
}

.docs-field-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/*
 * Bold mono, no chip. The tint is what made a page of attributes look like a
 * page of buttons; inside a list of names, monospace already says "this is a
 * field" and the background only added boxes to count.
 *
 * Qualified by its element throughout this section: an operation renders
 * inside `.docs-prose`, so a bare class loses to `.docs-prose code` and
 * `.docs-prose p` on specificity and the defaults come back.
 */
code.docs-field-name {
  padding: 0;
  background: none;
  color: var(--docs-fg);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Type and origin read as the same aside beside the name, in the page's own
   type: a second monospace next to the name was two voices for one label. */
.docs-field-type,
.docs-field-note {
  color: var(--docs-muted);
  font-size: 0.8125rem;
  font-weight: 400;
}

p.docs-field-description {
  margin: 0.3125rem 0 0;
  font-size: 0.875rem;
}

/* The rules a field inherits from its type: written once per type and
   repeated under every field of it, so they sit quieter than the field's own
   sentence above them. */
p.docs-field-rules {
  margin: 0.25rem 0 0;
  color: var(--docs-muted);
  font-size: 0.8125rem;
}

p.docs-field-enum {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
}

.docs-more {
  margin: 0.5rem 0 0;
}

.docs-more > summary {
  display: inline-block;
  padding: 0.25rem 0;
  color: var(--docs-accent);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.docs-more > summary:hover {
  text-decoration: underline;
}

p.docs-schema-ref,
p.docs-schema-scalar {
  margin: 0.375rem 0 0;
  color: var(--docs-muted);
  font-size: 0.8125rem;
}

/* --------------------------------------------------------------- results */

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

.docs-result {
  display: block;
  padding: 0.625rem 0.75rem;
  border-radius: 0.4375rem;
  color: inherit;
}

.docs-result:hover {
  background: var(--docs-surface);
  text-decoration: none;
}

.docs-results:not(.docs-results-compact) .docs-result {
  padding: 1rem 0;
  border-bottom: 1px solid var(--docs-border);
  border-radius: 0;
}

.docs-result-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.docs-badge {
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  background: var(--docs-code-bg);
  color: var(--docs-muted);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.docs-badge-get { background: var(--docs-get); color: #fff; }
.docs-badge-post { background: var(--docs-post); color: #fff; }
.docs-badge-put,
.docs-badge-patch { background: var(--docs-put); color: #fff; }
.docs-badge-delete { background: var(--docs-delete); color: #fff; }

.docs-result-label {
  font-size: 0.875rem;
  font-weight: 600;
}

.docs-result-page,
.docs-result-snippet {
  display: block;
  color: var(--docs-muted);
  font-size: 0.75rem;
}

.docs-result-snippet {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
}

/* -------------------------------------------------------------- narrower */

/*
 * Below this width the code column no longer has room beside the prose, so it
 * stacks underneath its own section rather than being dropped — the samples
 * are the point of the page, and a narrow viewport is not a reason to hide
 * them.
 */
@media (max-width: 1180px) {
  .docs-article-head,
  .docs-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }

  .docs-row-code {
    position: static;
  }

  /* Static column: no viewport cap, so a sample flows with the page rather
     than becoming a scroll region inside one. */
  .docs-code-stack {
    max-height: none;
    overflow-y: visible;
  }

  /* Too narrow for a rail beside the prose; the sidebar still lists the page. */
  .docs-main.is-single-column .docs-guide-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .docs-on-this-page {
    display: none;
  }

  .docs-row-code.is-empty {
    display: none;
  }
}

@media (max-width: 860px) {
  .docs-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .docs-sidebar {
    position: static;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--docs-border);
  }

  .docs-main {
    padding: 1.75rem 0 4rem;
  }

  .docs-article-head,
  .docs-row {
    padding: 0 1rem;
  }

  .docs-header {
    gap: 0.75rem;
    padding: 0 1rem;
  }

  .docs-brand-label,
  .docs-spec-link {
    display: none;
  }

  /* Too narrow for prose beside a screenshot: it takes the full width. */
  .docs-prose > p:has(> img:only-of-type),
  .docs-prose > p:has(> img:only-of-type):not(:last-child) {
    float: none;
    width: auto;
    margin: 0 0 1.25rem;
  }
}

/* ----------------------------------------------------- syntax highlighting */

/*
 * Classes emitted by `api_docs::highlight` (`TokenKind::css_class`). Plain
 * text carries no class and takes the block's own colour.
 */
.tok-comment { color: var(--docs-tok-comment); font-style: italic; }
.tok-command { color: var(--docs-tok-command); font-weight: 600; }
.tok-keyword { color: var(--docs-tok-command); }
.tok-flag { color: var(--docs-tok-flag); }
.tok-method { color: var(--docs-tok-method); font-weight: 700; }
.tok-url { color: var(--docs-tok-url); }
.tok-placeholder { color: var(--docs-tok-placeholder); font-style: italic; }
.tok-key { color: var(--docs-tok-key); }
.tok-string { color: var(--docs-tok-string); }
.tok-number,
.tok-literal { color: var(--docs-tok-number); }
.tok-punct { color: var(--docs-tok-punct); }
.tok-tag { color: var(--docs-tok-tag); }
.tok-attr { color: var(--docs-tok-attr); }

/* ---------------------------------------------------------- link columns */

/*
 * The Get started page routes rather than explains: groups of links in
 * columns, each under a short label, wrapped in `<div class="docs-link-columns">`
 * in its Markdown. Columns wrap onto new rows as the measure narrows.
 *
 * Prefixed with `.docs-main` so these outrank the guide list rules above,
 * which would otherwise put bullets and an indent back on every link.
 */
.docs-main .docs-prose .docs-link-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.5rem 2rem;
  margin: 0 0 2rem;
}

.docs-main .docs-prose .docs-link-columns p {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.docs-main .docs-prose .docs-link-columns ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-main .docs-prose .docs-link-columns li {
  margin: 0 0 0.5rem;
  padding: 0;
}

.docs-main .docs-prose .docs-link-columns li::before {
  content: none;
}

.docs-main .docs-prose .docs-link-columns a {
  color: var(--docs-accent);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}

.docs-main .docs-prose .docs-link-columns a:hover {
  text-decoration: underline;
}

/* A bare list of links, with no column labels, reads as one row. */
.docs-main .docs-prose .docs-link-columns > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.5rem;
}

/* ------------------------------------------------- parameter & attribute hits */

/*
 * Field matches sit in their own section below every primary result. The
 * divider is a ruled heading that sticks to the top of the scrolling dropdown
 * (or the viewport, on the results page) while its rows scroll beneath it, so
 * a reader scrolling past the pages always knows which list they are in.
 */
.docs-results-fields {
  margin-top: 0.5rem;
}

.docs-results-divider {
  position: sticky;
  top: -0.375rem;
  z-index: 1;
  margin: 0;
  padding: 0.625rem 0.75rem 0.4375rem;
  border-top: 1px solid var(--docs-border);
  border-bottom: 1px solid var(--docs-border);
  background: var(--docs-bg);
  color: var(--docs-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.docs-main .docs-results-divider {
  top: var(--docs-header-height);
  margin-top: 1.5rem;
  padding-left: 0;
  padding-right: 0;
}

code.docs-result-field-path {
  padding: 0;
  background: none;
  color: var(--docs-fg);
  font-size: 0.8125rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.docs-result-field-type {
  color: var(--docs-muted);
  font-size: 0.75rem;
}

/* One line of description in the dropdown; the results page shows it whole. */
.docs-results-compact .docs-result-field .docs-result-snippet {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A search hit lands on the field's own row: clear the sticky header, and
   tint the row so the eye finds it among forty siblings. */
.docs-field[id] {
  scroll-margin-top: calc(var(--docs-header-height) + 1rem);
}

.docs-field:target {
  background: var(--docs-accent-soft);
  box-shadow: -0.5rem 0 0 var(--docs-accent-soft), 0.5rem 0 0 var(--docs-accent-soft);
}