/* =============================================================================
   GeoVerio — atlas theme · docs supplement
   -----------------------------------------------------------------------------
   docs.js is frozen: it is copied byte-for-byte from the audited theme and its
   selectors are treated as a public API. That means a handful of class names it
   WRITES at runtime (.j-*, .active, .copied, .status-*, .pg-ta-*, .step-done)
   have no home in tokens/base/components/theme. This file is that home, and
   nothing more — every rule below exists because the script produces markup or
   state that the design system does not already name.

   References ONLY --gv-* tokens. Zero colour literals.
   Load order: tokens.css → base.css → components.css → theme.css → docs.css
   ============================================================================= */


/* -----------------------------------------------------------------------------
   `hidden` MUST WIN
   docs.js hides and reveals eight elements by toggling the `hidden` property:
   #pg-response, #pg-spinner, #pg-error, #pg-note, #pg-latency, #pg-ta-latency,
   #pg-ta-note and every .pg-field-error. Several of those wear component
   classes that set an explicit `display` (.gv-field__error is display:flex),
   which outranks the user-agent `[hidden] { display:none }` rule — so without
   this line every "Required — please fill this in." message would be painted
   permanently, before the user has typed anything.
   -------------------------------------------------------------------------- */
[hidden] { display: none !important; }


/* -----------------------------------------------------------------------------
   INTENT COLOURS INSIDE THE DOCS COLUMN
   theme.css sets `.docs__body p { color: var(--gv-fg-secondary) }`. That is
   (0,1,1) and therefore outranks every single-class component rule that gives a
   paragraph its own intent colour. Left alone, the required-field message, the
   rate-limit note and every section eyebrow would silently collapse to body
   grey — colour carrying meaning, quietly removed. These re-assert them at
   matching specificity; they change no value, only which rule wins.
   -------------------------------------------------------------------------- */
.docs__body p.gv-overline      { color: var(--gv-accent-ink); }
.docs__body p.gv-field__error  { color: var(--gv-danger-ink); }
.docs__body p.pg__note         { color: var(--gv-warning-ink); }
.docs__body p.ep__h4           { color: var(--gv-fg-muted); }


/* -----------------------------------------------------------------------------
   JSON SYNTAX TOKENS
   The highlighter in docs.js emits .j-key / .j-str / .j-num / .j-bool / .j-null.
   The design system names the same five colours --gv-code-*, contrast-validated
   in both modes. This is purely the adapter between the two vocabularies; the
   old theme hard-coded five indigo/emerald/amber hex values here that were only
   legible on a permanently dark terminal.
   -------------------------------------------------------------------------- */
.j-key  { color: var(--gv-code-key); }
.j-str  { color: var(--gv-code-str); }
.j-num  { color: var(--gv-code-num); }
.j-bool { color: var(--gv-code-bool); }
.j-null { color: var(--gv-code-null); }


/* -----------------------------------------------------------------------------
   LANGUAGE TABS
   The script owns the behaviour: it toggles `.active` and writes `aria-pressed`
   on `.code-tab`, and toggles `.active` on `.code-pane`. The design system owns
   the look through .gv-code__tab, which keys its selected state off
   `aria-selected`. Both class names ride on the same button, so the selected
   look is simply re-declared for the state the script actually writes. Renaming
   either one would break docs.js, so neither is renamed.
   -------------------------------------------------------------------------- */
.gv-code__tab.code-tab.active,
.gv-code__tab.code-tab[aria-pressed="true"] {
  background: var(--gv-surface-active);
  color: var(--gv-fg);
}
.code-pane { display: none; }
.code-pane.active { display: block; }

/* Copy confirmation. docs.js adds `.copied` to the button and swaps the text of
   `.copy-label`; site.js additionally announces it in the shared live region. */
.js-copy.copied { color: var(--gv-success-ink); }


/* -----------------------------------------------------------------------------
   QUICKSTART STEPPER
   .steps / .step / .step__no / .step__h / .step__b all come from theme.css.
   Only the check-off affordance docs.js drives is added here.

   The list reset has to be scoped to `.docs__body .steps`: `.docs__body ol` is
   the more specific selector and would otherwise re-impose list markers, the
   reading measure and the secondary text colour on the stepper.
   -------------------------------------------------------------------------- */
.docs__body .steps {
  list-style: none;
  padding-inline-start: 0;
  max-width: none;
  gap: var(--gv-space-6);
  color: var(--gv-fg);
}
.step-head {
  display: flex; align-items: center; gap: var(--gv-space-2);
  width: 100%; min-height: var(--gv-target-min);
  padding: 0; text-align: start; color: inherit;
  border-radius: var(--gv-radius-md);
}
.step-head:focus-visible { box-shadow: var(--gv-focus-ring); }
.step__check { display: grid; place-items: center; color: var(--gv-success-ink); opacity: 0; }

/* docs.js toggles `.step-done` on the <li>. Colour is never the only signal —
   the tick appears and the label is struck through as well. */
.step-done .step__check { opacity: 1; }
.step-done .step__no { background: var(--gv-success-subtle); color: var(--gv-success-ink); }
.step-done .step__h { color: var(--gv-fg-muted); text-decoration: line-through; }


/* -----------------------------------------------------------------------------
   PLAYGROUND
   .pg, .pg__head, .pg__body, .pg__fields, .pg__bar, .pg__latency, .pg-invalid,
   .pg-ta-wrap, .pg-ta-list and .pg-ta-flash are all defined in theme.css. What
   follows is only the response panel and the typeahead result grid.
   -------------------------------------------------------------------------- */
.pg__out { display: grid; gap: var(--gv-space-3); padding: 0 var(--gv-space-5) var(--gv-space-5); }
/* Status pill, latency and copy share the code header's action cluster. */
.gv-code__head .gv-code__actions { align-items: center; }
.pg__url { font-family: var(--gv-font-mono); font-size: var(--gv-text-xs); color: var(--gv-fg-secondary); min-width: 0; overflow-x: auto; }

/* The 429 hint. Warning ink, not muted: it is the one message that tells the
   reader the demo key — not their code — is the thing that failed. */
.pg__note { font-size: var(--gv-text-sm); line-height: var(--gv-leading-sm); color: var(--gv-warning-ink); }

/* #pg-status keeps its .gv-badge base; docs.js only ever swaps these three
   classes on it, so they are expressed as badge token overrides. */
#pg-status.status-ok   { --gv-badge-bg: var(--gv-success-subtle); --gv-badge-fg: var(--gv-success-ink); }
#pg-status.status-warn { --gv-badge-bg: var(--gv-warning-subtle); --gv-badge-fg: var(--gv-warning-ink); }
#pg-status.status-err  { --gv-badge-bg: var(--gv-danger-subtle);  --gv-badge-fg: var(--gv-danger-ink); }


/* -----------------------------------------------------------------------------
   TYPEAHEAD
   docs.js builds each suggestion as <li class="pg-ta-item" role="option">, so
   the row needs a real target height — theme.css sizes the list, not the row.
   -------------------------------------------------------------------------- */
.pg-ta-item { display: flex; align-items: center; min-height: var(--gv-target-min); }

.pg__ta-out { border-top: var(--gv-border-width) solid var(--gv-border); padding-top: var(--gv-space-5); }
.pg__ta-head { display: flex; align-items: center; justify-content: space-between; gap: var(--gv-space-3); margin-bottom: var(--gv-space-4); }
.pg__ta-grid { display: grid; gap: var(--gv-space-4); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pg__ta-cell--wide { grid-column: 1 / -1; }
@media (max-width: 620px) { .pg__ta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The fill flash. docs.js re-adds `.pg-ta-flash` on every pick (forcing a
   reflow first), so this must be an animation, not a transition. theme.css
   already gives the class its accent border; this adds the wash behind it. */
.pg-ta-flash { animation: pg-ta-fill var(--gv-duration-slower) var(--gv-ease-out); }
@keyframes pg-ta-fill { from { background: var(--gv-accent-subtle); } }
@media (prefers-reduced-motion: reduce) { .pg-ta-flash { animation: none; } }

.pg__raw summary { cursor: pointer; color: var(--gv-fg-secondary); font-size: var(--gv-text-sm); min-height: var(--gv-target-min); display: flex; align-items: center; }
.pg__raw summary:focus-visible { box-shadow: var(--gv-focus-ring); border-radius: var(--gv-radius-md); }


/* -----------------------------------------------------------------------------
   ENDPOINT HEADING
   The stable per-endpoint anchor lives ON the card head, so site.js can hang a
   copyable link there and a shared URL lands on the top of the card rather than
   halfway down it. .ep__head already supplies the row layout; only the type
   scale needs pulling back from the h3 default.
   -------------------------------------------------------------------------- */
h3.ep__head {
  font-size: var(--gv-text-md);
  line-height: var(--gv-leading-md);
  font-weight: var(--gv-weight-medium);
  letter-spacing: var(--gv-tracking-snug);
}
.ep__name { color: var(--gv-fg-secondary); }
.ep__sub { color: var(--gv-fg-secondary); }
.ep__h4 { font-size: var(--gv-text-sm); letter-spacing: var(--gv-tracking-wide); text-transform: uppercase; color: var(--gv-fg-muted); font-family: var(--gv-font-mono); font-weight: var(--gv-weight-medium); }

/* -----------------------------------------------------------------------------
   Core-concepts grid (docs index reuses .trust). Inside the ~756px docs column
   auto-fit lands on 3 + 1 orphan; four concepts read as a tidy 2×2 instead.
   -------------------------------------------------------------------------- */
.docs__body .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .docs__body .trust { grid-template-columns: 1fr; } }