/* ═══════════════════════════════════════════════════════════════
   Docs — API reference page (DS): Scalar host chrome

   Loads ON TOP of docs-ds.css (same shell, sidebar and palette) and adds
   only what is specific to the reference: the auth primer, the spec
   download toolbar, the loading skeleton, and the bridge that themes
   Scalar's own CSS variables from our tokens. Scalar's layout and
   typography live inside the vendor bundle.
   Replaces the pre-DS docs-reference.css (deleted).

   The sidebar's endpoint list and method badges used to be declared here
   AND in docs.css; they now live once, with the sidebar that renders
   them, in docs-ds.css.
   ═══════════════════════════════════════════════════════════════ */

/* ── Auth primer ─────────────────────────────────────────────────
   Collapsible "try the API from this page" starter above the Scalar mount
   (reference.html). data-open + [hidden] are driven by togglePrimer /
   setPrimerOpen in docs-reference.js; the collapse persists per-browser. */
.docs-primer {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--muted);
  margin-bottom: 16px;
  overflow: hidden;
}

.docs-primer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  color: inherit;
}

/* Accent tile — the DS's one action color, where this was sage before. */
.docs-primer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-foreground);
}

.docs-primer-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.docs-primer-title {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--foreground);
}

.docs-primer-subtitle {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted-foreground);
}

.docs-primer-chevron {
  flex: none;
  color: var(--muted-foreground);
  transition: transform 0.15s ease;
}
.docs-primer[data-open="true"] .docs-primer-chevron { transform: rotate(180deg); }

.docs-primer-body { padding: 0 16px 16px; }

/* auto-fit: with the Auth header cell hidden (no live key) the Base URL
   cell fills the row alone, and everything stacks on narrow screens. */
.docs-primer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 14px;
}

.docs-primer-cell-label {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

/* A value readout, not a DS component: it must render the string verbatim
   (mono, case-preserving), which is the opposite of what .ds-pill does to
   its label (uppercase + 0.1em tracking would corrupt `sk_…`). */
.docs-primer-cell-value {
  display: block;
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding: 8px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--foreground);
  overflow-x: auto;
  white-space: nowrap;
}

.docs-primer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.docs-primer-note {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--body-foreground);
}

.docs-primer-link {
  color: var(--accent);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.docs-primer-link:hover { color: var(--foreground); }

/* The DS button sets `display: inline-flex`, which would otherwise defeat
   the `hidden` attribute the JS toggles (author display beats the UA's
   [hidden] { display: none }). Also covers the collapsed primer body. */
.docs-primer [hidden] { display: none !important; }

/* Same readout reasoning as the Base URL cell. */
.docs-ref-key-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
}

.docs-ref-noscript {
  max-width: 48rem;
  margin: 64px auto;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--body-foreground);
}
.docs-ref-noscript a { text-decoration: underline; color: var(--accent); }

/* ── Scalar controls we suppress ─────────────────────────────────
   All of these are display:none, NEVER .remove(): the nodes are
   Vue-owned, and detaching one breaks Vue's next patch
   ("NotFoundError: insertBefore" → Scalar's "Oops, something went wrong
   here" panel). */

/* Scalar's "Generate MCP" sidebar link advertises Scalar's own MCP
   generator — confusing next to Canonical's real MCP server (see
   /documentation/mcp). No config flag for it in v1.62.4. */
#scalar-reference .scalar-mcp-layer-link { display: none !important; }

/* Scalar's "Ask AI" agent (sidebar button hidden in docs-reference.js —
   it has no stable class — plus these agent panels/inputs). It routes to
   Scalar's hosted AI, not ours; no config flag in v1.62.4. */
.agent-scalar,
.agent-scalar-overlay,
.agent-button-container { display: none !important; }

/* With a minted docs key active (docs-key-locked set by docs-reference.js),
   the key is managed ONLY from the primer: hide Scalar's own row controls on
   the key field — the Clear Value × and the Show Password reveal. With no
   stored key the controls stay — the value there is one the visitor pasted
   themselves, so clearing/revealing it leaks nothing. */
#scalar-reference.docs-key-locked td:has(input.scalar-password-input) .scalar-icon-button {
  display: none !important;
}

/* Scalar's native download control renders TWO buttons that both share the
   "Download OpenAPI Document" label and both download on click — there is no
   separate trigger to hang a menu off, so clicking the "trigger" downloads
   immediately and the expanded card reads as a glitch. We hide Scalar's
   control and use the DS dropdown (reference.html), whose rows drive
   Scalar's hidden buttons (downloadSpec() in docs-reference.js) so Scalar
   still does the JSON/YAML conversion. */
#scalar-reference .download-container { display: none !important; }

.docs-ref-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

/* The DS dropdown panel sizes itself from its own content plus a
   `min-width: 180px` floor (ds.css) — it does NOT track the trigger. That
   is right for the site's other dropdowns, whose triggers are short
   ("Product", a user name) and narrower than the rows they open. This one
   is the opposite case: "Download OpenAPI Document" is a 242px trigger
   opening 168px rows, so the left-anchored panel stopped 62px short of the
   trigger's right edge and the pair read as a rendering fault.

   Anchoring to the trigger instead of hard-coding a width: the popover's
   containing block is `.dropdown-menu` (position: relative), which
   shrink-wraps the trigger, so `min-width: 100%` is exactly the trigger
   width and stays correct if the label or the button size ever changes.
   Page-local by id — the shared rule in ds.css is right for its other
   callers and is not ours to change. */
#docs-download [data-popover] { min-width: 100%; }

/* Scalar's language picker for the code samples ships 33px-tall buttons —
   under the 44px floor on touch. Pointer-keyed like every other tap rule, so
   a mouse keeps Scalar's own density. CSS only: these are Vue-owned nodes.

   KNOWN LIMITATION, stated rather than quietly left: this is the only one of
   Scalar's controls we resize. A sweep at 375px finds ~25 more of its
   internals below the floor (parameter-item triggers, per-block copy
   buttons, the response tab strip, the 18x36 absolutely-positioned
   expanders). They are not fixed because a blanket
   `#scalar-reference button { min-height: 44px }` deforms the layouts those
   controls are positioned inside, and one-by-one overrides of a vendor's
   internal tree break on every bump. The picker below is the exception
   because it is a top-level control readers actually use. Revisit if Scalar
   ships a density option. */
@media (any-pointer: coarse) {
  #scalar-reference .client-libraries { min-height: 44px; }
}

/* ── Sticky-chrome offset ────────────────────────────────────────
   Scalar's try-it panels stick below the docs header. docs-reference.js
   measures the real header height and overrides this inline on the mount —
   keep the rule on #scalar-reference ONLY, since a descendant rule (e.g.
   the .light-mode compound below) would beat the inherited inline value
   inside Scalar's subtree. */
#scalar-reference {
  --scalar-custom-header-height: 58px;
  /* Reserve height from first paint so the column doesn't grow (and pop the
     scrollbar) when Scalar mounts ~1s in. */
  min-height: calc(100vh - 12rem);
}

/* ── Loading skeleton ────────────────────────────────────────────
   Shown while the mount has no children; the moment Scalar injects its app,
   `:empty` stops matching and the skeleton disappears — no JS, no cleanup.
   Bars are painted with the DS panel tints instead of raw greys. */
#scalar-reference:empty {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(var(--muted-deep) 0 0) 28px 28px / 260px 22px no-repeat,
    linear-gradient(var(--muted) 0 0) 28px 72px / min(560px, 70%) 13px no-repeat,
    linear-gradient(var(--muted) 0 0) 28px 100px / min(480px, 60%) 13px no-repeat,
    linear-gradient(var(--muted) 0 0) 28px 128px / min(520px, 64%) 13px no-repeat,
    linear-gradient(var(--muted-deep) 0 0) 28px 184px / 180px 15px no-repeat,
    linear-gradient(var(--muted) 0 0) 28px 214px / min(600px, 76%) 90px no-repeat;
  animation: docs-skeleton-pulse 1.4s ease-in-out infinite;
}

@keyframes docs-skeleton-pulse {
  50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  #scalar-reference:empty { animation: none; }
}

/* ── Scalar theme alignment ──────────────────────────────────────
   Scalar exposes --scalar-* custom properties; point them at OUR tokens so
   the reference reads as part of the site, not an embedded third-party
   widget — and so a token retune flows straight through (the pre-DS version
   copied literal hsl() values here with a comment naming the token they
   came from, which is a copy that drifts).
   Scalar is pinned to light mode in docs-reference.js — the rest of the
   site is light-only. Both selector forms are needed: Scalar stamps
   `.light-mode` on its own root INSIDE the mount, and the id+class compound
   outranks the theme's own `.light-mode` rules. */
#scalar-reference,
#scalar-reference .light-mode {
  --scalar-font: var(--font-sans);
  --scalar-font-code: var(--font-mono);

  /* Surfaces */
  --scalar-background-1: var(--background);
  --scalar-background-2: var(--muted);
  --scalar-background-3: var(--muted-deep);
  --scalar-background-card: var(--card);

  /* Text */
  --scalar-color-1: var(--foreground);
  --scalar-color-2: var(--body-foreground);
  --scalar-color-3: var(--muted-foreground);

  /* Accent = the DS blue */
  --scalar-color-accent: var(--accent);
  --scalar-background-accent: var(--tint-blue);

  /* HTTP verb colors. Scalar's own defaults are display-p3 mid-tones that
     measure 3.87–3.88:1 on this page's ground — under the 4.5:1 AA floor
     for the 14px method badges beside every operation title. Darkened one
     step, same hues, 5.8–6.4:1. Still a token remap, not a vendor edit. */
  --scalar-color-green: oklch(0.48 0.11 155);
  --scalar-color-blue: oklch(0.50 0.13 245);
  --scalar-color-orange: oklch(0.50 0.13 55);
  --scalar-color-red: oklch(0.50 0.17 25);

  /* Chrome */
  --scalar-border-color: var(--border);
  --scalar-radius: var(--radius);
  --scalar-radius-lg: 14px;
  --scalar-radius-xl: var(--radius-xl);

  /* Buttons — the ink recipe */
  --scalar-button-1: var(--primary);
  --scalar-button-1-color: var(--primary-foreground);
  --scalar-button-1-hover: var(--primary-face-top);

  /* Sidebar (Scalar's own is disabled; these still paint its search field
     and any panel that reads the sidebar scale) */
  --scalar-sidebar-background-1: var(--background);
  --scalar-sidebar-color-1: var(--foreground);
  --scalar-sidebar-color-2: var(--body-foreground);
  --scalar-sidebar-border-color: var(--border);
  --scalar-sidebar-item-hover-background: var(--muted-deep);
  --scalar-sidebar-item-active-background: var(--tint-blue);
  --scalar-sidebar-color-active: var(--accent);
  --scalar-sidebar-search-background: var(--card);
  --scalar-sidebar-search-border-color: var(--border);
  --scalar-sidebar-search-color: var(--muted-foreground);
}

/* ── Reference shell ─────────────────────────────────────────────
   The reference shares the docs shell (left sidebar + main) but drops the
   right-hand "On this page" TOC column and lets the main column run wide for
   Scalar's content + try-it panels. */
.docs-shell--reference { padding-top: 24px; }

@media (min-width: 1024px) {
  /* Slightly wider than the guides' 230px so endpoint rows (badge + label)
     never truncate. */
  .docs-shell--reference {
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 40px;
  }
}

@media (min-width: 1280px) {
  /* No third (TOC) column — Scalar carries its own in-endpoint structure. */
  .docs-shell--reference {
    grid-template-columns: 248px minmax(0, 1fr);
  }
}

/* ── Metadata chips (x-badges) ───────────────────────────────────
   Scalar renders each operation's `x-badges` as `.badge` nodes beside the
   operation title, carrying the spec's color as --badge-background-color
   with an auto-darkened text color (openapi_public.py picks light tints).
   Shape them into the DS pill silhouette. */
#scalar-reference .badge {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  border: 1px solid oklch(0.19 0.012 75 / 0.05);
}

/* Scalar lays the badge row out as a NOWRAP flex row. Our search operation
   carries four badges ("API key", "1 credit / verified result", "Rate
   limited", "SSE opt-in") — 409px of chips in a 295px column at 375px, so
   the row pushed the whole DOCUMENT 78px wide and the entire page (fixed
   header included) panned sideways. Hard rule 6: no horizontal document
   overflow at 375px.
   `:has(> .badge)` rather than Scalar's `.flex.gap-1` utility pair, so this
   survives a vendor bump that renames the utilities; `min-width: 0` lets the
   row shrink inside its flex parent instead of holding its content width. */
#scalar-reference div:has(> .badge) {
  flex-wrap: wrap;
  min-width: 0;
}

/* ── Intro section ───────────────────────────────────────────────
   The spec's info.description carries the three primer cards as
   sanitizer-safe HTML (openapi_public.py) — these classes shape them.
   The heading + version chips are Scalar's own intro nodes, restyled. */
#scalar-reference .introduction-section h1.section-header-label {
  font-family: var(--font-sans);
  font-size: clamp(34px, 4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.025em;
}

/* Version chips (v1 · OpenAPI 3.1.0): mono, squared; v1 gets the accent
   tint. Scoped to the intro so the operation x-badges keep their pill
   shape. */
#scalar-reference .introduction-section .badge {
  font-family: var(--font-mono);
  font-size: 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
}
/* :first-child is a POSITIONAL coupling: Scalar renders the info.version
   badge first and the OpenAPI-version badge second (no distinguishing class
   exists). If a vendor bump reorders or prepends a badge, the tint lands on
   the wrong chip — cosmetic only; re-check on bump. */
#scalar-reference .introduction-section .badge:first-child {
  color: var(--tint-blue-ink);
  border-color: var(--tint-blue);
  background: var(--tint-blue);
}

/* Scalar's intro Server and Authentication cards duplicate what the page
   already shows above them (the auth primer's Base URL cell and key
   controls, and the intro's Authentication card). Hide both — the auth
   card's password input must STAY in the DOM because syncAuthInputs seeds
   Scalar's auth store through it and renderScalar's update-in-place path
   checks for its presence. The Client Libraries card stays: it's the global
   language picker for code samples, not duplicated info. */
#scalar-reference .scalar-reference-intro-server,
#scalar-reference .scalar-reference-intro-auth {
  display: none !important;
}

/* Stack the intro's two columns (description | server/auth/client-libs) so
   the primer cards run three-across over the full content width and the
   Server/Auth cards flow below them — the operation sections keep Scalar's
   native two-column reading/console layout. */
#scalar-reference .introduction-section .section-columns {
  flex-direction: column;
}
#scalar-reference .introduction-section .section-column {
  width: 100%;
  max-width: none;
}
#scalar-reference .introduction-section .sticky-cards {
  position: static;
}

.docs-intro-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 16px;
  margin-top: 12px;
}

/* The #scalar-reference prefix is load-bearing on the p rules: Scalar's own
   `.markdown p` styling outranks a bare class selector, which silently turns
   the flex head row back into block flow (icon and title misalign). */
.docs-intro-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  padding: 18px 20px;
}
#scalar-reference .docs-intro-card > p { margin: 0; }
#scalar-reference .docs-intro-card > p + p { margin-top: 10px; }

#scalar-reference .docs-intro-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
#scalar-reference .docs-intro-card-head strong {
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--foreground);
}

/* Card icons: <svg> is sanitized out of spec markdown, so the glyphs ride in
   as CSS masks on an empty, class-only <span> (which the sanitizer keeps). */
.docs-intro-icon {
  flex: none;
  position: relative;
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--tint-blue);
}
.docs-intro-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--tint-blue-ink);
  -webkit-mask: var(--docs-intro-glyph) center / 17px 17px no-repeat;
  mask: var(--docs-intro-glyph) center / 17px 17px no-repeat;
}
.docs-intro-icon-auth {
  --docs-intro-glyph: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z'/><circle cx='16.5' cy='7.5' r='.5' fill='%23000'/></svg>");
}
.docs-intro-icon-credits {
  --docs-intro-glyph: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8'/><path d='M12 18V6'/></svg>");
}
.docs-intro-icon-rate {
  --docs-intro-glyph: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m12 14 4-4'/><path d='M3.34 19a10 10 0 1 1 17.32 0'/></svg>");
}

/* ── Dark code panels ────────────────────────────────────────────
   Request/response code renders on a dark panel inside the light page —
   the same Catppuccin Mocha surface the guide pages' .code-block uses, so
   a reader moving between them sees one code treatment. Scalar's
   highlight.js theme resolves token colors from --scalar-color-* vars, so
   scoping replacements inside code blocks retunes the syntax palette
   without touching the vendor bundle; the explicit .hljs-* rules pin the
   mapping regardless of which var each theme variant reads. */
#scalar-reference .scalar-code-block {
  background: #1e1e2e;
  --scalar-color-1: #cdd6f4;
  --scalar-color-2: #bac2de;
  --scalar-color-3: #7f849c;
  --scalar-background-2: #313244;
  --scalar-background-3: #45475a;
  --scalar-border-color: #313244;
}
#scalar-reference .scalar-code-block .hljs-attr,
#scalar-reference .scalar-code-block .hljs-attribute { color: #89b4fa; }
#scalar-reference .scalar-code-block .hljs-string,
#scalar-reference .scalar-code-block .hljs-built_in { color: #a6e3a1; }
#scalar-reference .scalar-code-block .hljs-number,
#scalar-reference .scalar-code-block .hljs-literal { color: #fab387; }
#scalar-reference .scalar-code-block .hljs-keyword { color: #cba6f7; }
/* overlay2, matching .code-block .comment in docs-ds.css — the value here
   was 4.03:1 on this surface, just under the AA floor. */
#scalar-reference .scalar-code-block .hljs-comment,
#scalar-reference .scalar-code-block .hljs-quote { color: #9399b2; }

#scalar-reference .scalar-code-block::-webkit-scrollbar { height: 8px; width: 8px; }
#scalar-reference .scalar-code-block::-webkit-scrollbar-thumb {
  background: rgba(205, 214, 244, 0.25);
  border-radius: 4px;
}