/* ============================================================================
   Survizo — developer portal (/developers): the docs layout
   ----------------------------------------------------------------------------
   THIS PAGE IS PART OF THE SITE. It loads /chrome.css first (the site's
   tokens, Figtree, the stamped header with the Platform menu and the phone
   menu, the three-way theme switch and the footer site map) and this sheet
   on top. So this file holds ONLY what the docs layout needs: the key bar,
   the endpoint rail, the reading column, the per-endpoint console, the
   confirmation dialog. It declares no colour of its own in light mode: every
   token below is a name for one of the site's, so the page follows the
   site's light and dark exactly, light by default, following the device.

   THREE DELIBERATE DEPARTURES, because a reference is not a landing page:

   1. A REAL MONOSPACE. Code here is the system mono stack: no download, no
      third party, and it aligns.

   2. TIGHTER RADII. The landing page's pills and 16-24px cards make a dense
      reference look like a pricing card. 14/10/6 here, under names of their
      own (--doc-r-*) so the shared header keeps the site's.

   3. COLOUR MEANS SOMETHING. The write colour (the site's violet) is not
      decoration: it marks a call that WRITES. Green is reserved for "it
      worked" — a 2xx, and nothing else. So a developer scanning the page sees
      the dangerous surface before reading a word, and never confuses a brand
      accent for a success state.

   The one family with values of its own is the RAISED surface (a code block,
   the primary Send button): deep indigo on the light page, and a lifted
   indigo above the dark page rather than below it. Those three tokens are
   declared for dark twice, the same way chrome.css declares every colour.
   ========================================================================== */

:root {
  /* the docs' names for the site's tokens (chrome.css) */
  --paper:      var(--bg);
  --paper-2:    var(--tint);
  --fg:         var(--ink);
  --fg-soft:    var(--text);
  --fg-faint:   var(--ink-2);     /* 5.66:1 on white, 4.90:1 on lavender: it is real text */

  --write:      var(--accent);
  --write-deep: var(--accent-hover);
  --write-tint: var(--tint);
  --write-solid:       var(--accent);
  --write-solid-hover: var(--accent-hover);
  --on-write:   var(--on-accent);

  /* Green is reserved for "it worked": the site's own --ok pair. */
  --green-text: var(--ok);
  --green-tint: var(--ok-tint);

  /* Hairlines that read in both themes without a dark block: the ink itself
     at a low strength, so they flip when the ink does. */
  --line-2:     color-mix(in srgb, var(--ink) 18%, transparent);

  /* THE RAISED SURFACE: a code block, and the primary Send button. On the
     light page it is the site's deep indigo, which reads as a solid object on
     paper. In dark mode the deepest colour cannot also be the raised one (a
     code block measured 1.06:1 against the page when it sank below it), so
     there it rises above the page, and its edge clears 3:1 against it so the
     primary action keeps a boundary. */
  --raise:      #320F5E;
  --raise-2:    #260A49;
  --raise-edge: #320F5E;
  --on-raise:   rgba(255, 255, 255, .95);

  --display: var(--font);
  --body:    var(--font);
  --mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
             "Liberation Mono", monospace;

  --doc-r-lg: 14px; --doc-r-md: 10px; --doc-r-sm: 6px;

  /* The keybar is the only sticky chrome on this page (the site header
     scrolls away with the page here); everything that sticks below it clears
     this much. MEASURED AT RUNTIME, not trusted: portal.js puts the key bar's
     real height here with a ResizeObserver. 132px is only the value before
     the first measurement — the bar is 132px at 1440px and 166px at 1100px,
     where the scope chips wrap to a second line, and a sixth scope moves it
     again. */
  --stick: 132px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --raise:      #33215A;
    --raise-2:    #3D2A68;
    --raise-edge: #8A7BB5;
  }
}
:root[data-theme="dark"] {
  --raise:      #33215A;
  --raise-2:    #3D2A68;
  --raise-edge: #8A7BB5;
}

/* The site header scrolls away here: the key bar is this page's one sticky
   instrument, and two sticky bars would spend a phone's screen twice. */
.site-header { position: relative; }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--stick) + 16px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--fg);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }

code, pre, .field-json, .field-input, .ep-path, .base-address {
  font-family: var(--mono);
  font-variant-ligatures: none;
}

/* Focus is always visible, and never only a colour change. */
:focus-visible {
  outline: 2px solid var(--write);
  outline-offset: 2px;
  border-radius: var(--doc-r-sm);
}

.noscript {
  margin: 0; padding: 14px var(--gutter);
  background: var(--write-tint); color: var(--fg);
  border-bottom: 1px solid var(--line-2); font-size: 14px;
}

/* ───────────────────── the key bar: the page's instrument ─────────────── */

.keybar {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line-2);
  padding: 10px var(--gutter);
  display: grid; gap: 8px;
}
.keybar-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* WRAPS, which is what makes the narrow rule below work at all. `flex: 1 1
   100%` on the label was written to push it onto its own line and could not:
   with no `flex-wrap` there is no line to push it to, so it only made the label
   greedy inside a row that would not break — and the key field, the one control
   this page is built around, measured 127px on a phone, about ten characters of
   an opaque key. */
.key-field {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 10px; flex: 1 1 340px; min-width: 0;
}
.key-label {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-soft); white-space: nowrap;
}
#keyInput {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--mono); font-size: 14px;
  padding: 8px 12px; border-radius: var(--doc-r-md);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--fg);
}
body.has-key #keyInput { border-color: var(--green-text); }
.key-note { flex: 1 1 100%; font-size: 12px; color: var(--fg-faint); line-height: 1.45; }

/* The fold. Its summary is the only part of it a phone pays for. */
.keybar-fold { display: grid; gap: 8px; }
.keybar-fold-summary {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--fg-soft); cursor: pointer; padding: 2px 0;
  border-top: 1px dashed var(--line); padding-top: 8px;
}
.keybar-fold-summary:hover { color: var(--fg); }

.ledger-row { border-top: 1px dashed var(--line); padding-top: 8px; }
.ledger-label {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-soft);
}
.ledger { display: flex; gap: 6px; flex-wrap: wrap; }
.ledger-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 7px; border-radius: var(--pill);
  border: 1px solid var(--line-2); background: var(--surface);
  font-family: var(--mono); font-size: 12px; cursor: pointer;
}
.ledger-chip:has(input:checked) {
  background: var(--write-tint); border-color: var(--write); color: var(--write-deep);
}
.ledger-chip input { accent-color: var(--write); margin: 0; }

.meter {
  margin-left: auto; display: flex; align-items: baseline; gap: 5px;
  font-size: 12px; color: var(--fg-faint); white-space: nowrap;
}
.meter-count { font-family: var(--mono); font-size: 15px; color: var(--fg); font-weight: 700; }
.meter-hot .meter-count { color: var(--write-deep); }

/* ─────────────────────────────── the shell ────────────────────────────── */

.shell {
  display: grid; grid-template-columns: 1fr;
  gap: 0 34px; padding: 0 var(--gutter) 64px;
  max-width: 1560px; margin-inline: auto;
}

.rail { padding-top: 18px; min-width: 0; }
.rail-fold { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.rail-summary {
  font-family: var(--display); font-weight: 700; font-size: 15px;
  cursor: pointer; padding: 8px 0; list-style: revert;
}
.rail-body { padding-top: 6px; }
.rail-overview { display: block; font-size: 13px; color: var(--fg-soft); padding: 4px 0 10px; }
.rail-overview:hover { color: var(--write-deep); }
.rail-group {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-faint); margin: 14px 0 5px;
}
.rail-list { list-style: none; padding: 0; display: grid; gap: 1px; }
.rail-link {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; border-radius: var(--doc-r-sm);
  border-left: 2px solid transparent;
}
.rail-link:hover { background: var(--paper-2); }
.rail-path {
  font-family: var(--mono); font-size: 12.5px; color: var(--fg-soft);
  overflow-wrap: break-word;
}
.rail-link:hover .rail-path { color: var(--fg); }

/* Out of reach with the scopes the reader ticked. MARKED, not dimmed.
   `opacity: .42` over an already-soft tier composited to about 2.2:1 and the
   method badge vanished outright — so the rows a reader most needs to find, in
   order to understand why they cannot reach them, were the illegible ones. The
   text keeps its full contrast; only the badge is muted, and the row says in
   words what is wrong with it. */
.rail-link.out-of-reach .method { opacity: .55; }
.rail-link.out-of-reach { border-left-color: var(--write); }
.rail-lock {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--write-deep); white-space: nowrap; margin-left: auto;
}
.ep.out-of-reach .ep-head { border-left: 3px solid var(--write); padding-left: 12px; }

.reading { min-width: 0; padding-top: 22px; }

/* ──────────────────────────────── prose ───────────────────────────────── */

.lede { padding-bottom: 8px; }
.lede h1 {
  font-family: var(--display); font-weight: 700; letter-spacing: -.025em;
  font-size: clamp(30px, 4.6vw, 46px); line-height: 1.08; margin-bottom: 14px;
}
.lede-text { max-width: 68ch; color: var(--fg-soft); margin-bottom: 10px; }
/* The site's eyebrow, carrying the version the document reports. */
.lede-eyebrow {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-size: 14px; line-height: 1.3; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent);
}
.lede-version {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0; text-transform: none;
  padding: 2px 8px; border-radius: var(--pill);
  background: var(--write-solid); color: var(--on-write);
}
/* The written sections, one line: what the old top bar linked to. */
.lede-links { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 16px; font-size: 14px; }
.lede-links a {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px;
  border-radius: var(--pill); border: 1px solid var(--line-2); color: var(--fg);
}
.lede-links a:hover { background: var(--paper-2); border-color: var(--fg-faint); }
.loadstate {
  margin-top: 14px; font-family: var(--mono); font-size: 12.5px; color: var(--fg-faint);
}
.loadstate-done { color: var(--green-text); }
/* The page read the copy beside it rather than the document the server hands
   out. Not a failure — the page renders — but not a success either, so it may
   not wear the green that says "it worked". */
.loadstate-warn {
  color: var(--fg);
  border-left: 3px solid var(--write); background: var(--write-tint);
  padding: 6px 10px; border-radius: 0 var(--doc-r-sm) var(--doc-r-sm) 0; max-width: 72ch;
}
.loadstate-bad { color: var(--write-deep); }

.prose { padding: 30px 0; border-top: 1px solid var(--line); margin-top: 26px; }
.prose h2 {
  font-family: var(--display); font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(21px, 2.4vw, 27px); margin-bottom: 12px;
}
.prose h3 {
  font-family: var(--display); font-weight: 700; font-size: 16px;
  margin: 22px 0 8px;
}
.prose p { max-width: 72ch; margin-bottom: 11px; }
.prose b { font-weight: 700; color: var(--fg); }
.list { max-width: 72ch; padding-left: 20px; margin-bottom: 11px; }
.list li { margin-bottom: 7px; }

.callout {
  border-left: 3px solid var(--write);
  background: var(--write-tint);
  padding: 12px 16px; border-radius: 0 var(--doc-r-md) var(--doc-r-md) 0;
  margin: 14px 0;
}

p code, li code, td code, th code {
  font-size: .89em; padding: 1px 5px; border-radius: var(--doc-r-sm);
  background: var(--paper-2); border: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.base-address { font-size: 1em; }

.code {
  background: var(--raise); color: var(--on-raise);
  padding: 14px 16px; border-radius: var(--doc-r-md);
  overflow-x: auto; font-size: 12.5px; line-height: 1.6;
  margin: 10px 0; max-width: 100%;
}
.code code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
.code-caption {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-faint); margin: 16px 0 -2px;
}

/* A TABLE SCROLLS INSIDE ITS OWN BOX, never outside its column. A parameters
   table has a floor width — a name, a type and "query" cannot compress past
   about 340px — and in a narrow column it used to paint its last column under
   the console's opaque panel beside it. `body { overflow-x: hidden }` hid the
   evidence rather than the collision. */
.table-scroll { max-width: 100%; overflow-x: auto; }
.table {
  width: 100%; border-collapse: collapse; margin: 10px 0 14px; font-size: 14px;
}
.table th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-faint);
  padding: 6px 12px 6px 0; border-bottom: 1px solid var(--line-2);
}
.table td {
  padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line);
  vertical-align: top; overflow-wrap: break-word;
}
.table tr:last-child td { border-bottom: 0; }
/* The written tables (errors, the webhook delivery headers) name identifiers in
   <code>. `td code` lets those break anywhere, which on a phone stacked
   "unauthorized" as "unau / thori / zed"; here an identifier breaks only if it
   is longer than the whole column, so the column sizes to the longest one. */
.prose > .table td code { overflow-wrap: break-word; }

/* ───────────────────────── badges, chips, statuses ────────────────────── */

.method {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  padding: 2px 7px; border-radius: var(--doc-r-sm); border: 1px solid currentColor;
  flex: 0 0 auto; min-width: 46px; text-align: center;
}
.method-get    { color: var(--fg-soft); }
.method-post   { color: var(--on-write); background: var(--write-solid); border-color: var(--write-solid); }
.method-delete { color: var(--write-deep); border-color: var(--write-deep); }
.method-put, .method-patch { color: var(--write-deep); border-color: var(--write-deep); }

.chip {
  font-family: var(--mono); font-size: 11.5px;
  padding: 2px 9px; border-radius: var(--pill); border: 1px solid var(--line-2);
}
.chip-scope { background: var(--write-tint); color: var(--write-deep); border-color: transparent; }
/* An operation the document never annotated. Rendered as the documentation
   defect it is, rather than as an empty chip beside a warning that the key
   "does not carry null". */
.chip-unknown {
  background: var(--paper-2); color: var(--fg); border-color: var(--line-2);
  border-style: dashed;
}
.chip-open  { background: var(--green-tint); color: var(--green-text); border-color: transparent; }
.chip-write { background: var(--write-solid); color: var(--on-write); border-color: transparent; }
/* A safe verb that writes when a particular box is ticked. Outlined rather
   than filled: it is the same warning, conditional on the reader. */
.chip-write-when {
  background: transparent; color: var(--write-deep); border-color: var(--write-deep);
}
.note-write { font-size: 12.5px; margin-top: 3px; color: var(--write-deep); }

.status {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  padding: 1px 8px; border-radius: var(--doc-r-sm);
  flex: 0 0 auto;
}
.status-ok   { background: var(--green-tint); color: var(--green-text); }
/* A 2xx that is not the API answering. Colouring on the number alone painted
   the marketing page's catch-all HTML as a green 200 — the exact failure this
   page's own prose tells a developer not to trust. */
.status-trap { background: var(--paper-2); color: var(--write-deep); border: 1px dashed var(--write-deep); }
.status-warn { background: var(--write-tint); color: var(--write-deep); }
.status-bad  { background: var(--write-solid); color: var(--on-write); }
.status-info { background: var(--paper-2); color: var(--fg-soft); }

.req {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--write-deep); margin-left: 7px;
}

/* ───────────────────────────── an endpoint ────────────────────────────── */

.ep {
  display: grid; grid-template-columns: 1fr;
  gap: 18px 34px;
  padding: 34px 0; border-top: 1px solid var(--line);
}
.ep-doc { min-width: 0; }
.ep-head { margin-bottom: 12px; }
.ep-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ep-path { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.ep-title {
  font-family: var(--display); font-weight: 700; font-size: 20px;
  letter-spacing: -.015em; margin-top: 6px;
}
.ep-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ep-desc { color: var(--fg-soft); max-width: 68ch; margin-bottom: 4px; }
.ep-block { margin-top: 18px; max-width: 100%; }
.ep-h3 {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-faint); margin: 20px 0 6px;
}
.cell-in, .cell-type {
  font-family: var(--mono); font-size: 12.5px; color: var(--fg-soft); white-space: nowrap;
}
.cell-notes { color: var(--fg-soft); font-size: 13.5px; overflow-wrap: anywhere; }
/* `overflow-wrap: anywhere` would let the browser shrink a column to one
   character wide, which is how "query" ends up stacked as "quer / y". Only the
   notes column, which holds sentences, may break mid-word. */
.table-params td:first-child { white-space: nowrap; }
.note-enum { font-size: 12.5px; margin-top: 3px; }
.note-label { color: var(--fg-faint); }

.res { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.res:last-child { border-bottom: 0; }
.res-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.res-desc { font-size: 14px; }
.res-type { font-family: var(--mono); font-size: 12px; color: var(--fg-faint); }
.res-fields { list-style: none; padding: 6px 0 0; display: grid; gap: 3px; }
.res-fields li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13px; }
.res-field-type { font-family: var(--mono); font-size: 11.5px; color: var(--fg-faint); }
.res-field-desc { color: var(--fg-soft); font-size: 12.5px; }
.res-example { margin-top: 8px; }
.res-example-summary {
  font-size: 12px; color: var(--fg-soft); cursor: pointer;
}

/* ───────────────────────────── the console ────────────────────────────── */

.ep-console { min-width: 0; }
.console-inner {
  background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--doc-r-lg);
  padding: 16px; box-shadow: var(--shadow-sm);
}
.console-title {
  font-family: var(--display); font-weight: 700; font-size: 14px;
  letter-spacing: .02em; margin-bottom: 10px;
}
.console-warn {
  font-size: 12.5px; color: var(--write-deep);
  background: var(--write-tint); border-radius: var(--doc-r-sm);
  padding: 7px 10px; margin-bottom: 10px;
}
.console-hint { font-size: 12.5px; color: var(--fg-faint); margin-bottom: 10px; }
/* A KEYED CONSOLE SAYS SO BEFORE YOU PRESS SEND, not after. The missing-key
   message used to appear only on click, at a scroll position where the bar it
   names is behind fifteen endpoints. `body.has-key` is set the moment anything
   is typed into the key field, so this disappears on its own. */
.console-need {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--write-deep);
  background: var(--write-tint); border-radius: var(--doc-r-sm);
  padding: 7px 10px; margin-bottom: 10px;
}
body.has-key .console-need { display: none; }
.console-need .btn-tiny { color: var(--write-deep); border-color: var(--write-deep); }
.console-fields { display: grid; gap: 12px; }

.field { display: grid; gap: 4px; min-width: 0; }
.field-label { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.field-name { font-family: var(--mono); font-size: 12.5px; font-weight: 700; }
.field-in {
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--fg-faint);
}
.field-input {
  width: 100%; font-size: 13px; padding: 7px 10px;
  border: 1px solid var(--line-2); border-radius: var(--doc-r-md);
  background: var(--paper); color: var(--fg);
}
.field-json { resize: vertical; line-height: 1.5; }
.field-check { accent-color: var(--write); width: 17px; height: 17px; justify-self: start; }
.field-multi { display: grid; gap: 3px; }
.field-multi-item {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 12px; cursor: pointer;
}
.field-multi-item input { accent-color: var(--write); }
.field-help { font-size: 11.5px; color: var(--fg-faint); line-height: 1.45; }

.console-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.btn {
  font-size: 13px; font-weight: 700; padding: 8px 15px;
  border-radius: var(--pill); border: 1px solid var(--line-2);
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.btn:hover { border-color: var(--fg-faint); }
/* The primary action. Its EDGE is a token of its own so the button keeps a
   boundary in dark mode, where the fill alone is 1.67:1 against the page. */
.btn-go { background: var(--raise); color: var(--on-raise); border-color: var(--raise-edge); }
.btn-go:hover { background: var(--raise-2); border-color: var(--raise-edge); }
.btn-danger { background: var(--write-solid); color: var(--on-write); border-color: var(--write-solid); }
.btn-danger:hover { background: var(--write-solid-hover); border-color: var(--write-solid-hover); }
.btn-quiet { background: transparent; color: var(--fg-soft); }
.btn[disabled] { opacity: .5; cursor: progress; }

.console-result { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
/* A NORMAL ANSWER MUST NOT RESIZE THE PAGE. GET /responses at the default
   limit of 50, with answers per response, ran to 2,951px in a 900px viewport —
   which pushed Send off the screen, stretched the sticky panel past the
   viewport it is stuck in, and left ~1,450px of blank paper beside the
   reference text, because the grid row grows to the tallest cell. The body
   scrolls inside its own box instead, and the size of what arrived is stated
   above it rather than demonstrated. */
.console-result .code { max-height: 46vh; overflow: auto; margin-top: 8px; }
.result-meta {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; font-size: 11.5px; color: var(--fg-faint);
}
.result-size { font-family: var(--mono); }
.btn-tiny {
  font-size: 11.5px; font-weight: 700; padding: 2px 9px;
  border-radius: var(--pill); border: 1px solid var(--line-2); color: var(--fg-soft);
}
.result-pending { font-size: 13px; color: var(--fg-soft); }
.result-pending code { font-size: .92em; }
.result-fallback {
  width: 100%; margin-top: 8px; font-family: var(--mono); font-size: 11.5px;
  padding: 8px 10px; border-radius: var(--doc-r-md);
  border: 1px solid var(--line-2); background: var(--paper); color: var(--fg);
  resize: vertical;
}
.result-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.result-statustext { font-size: 13px; color: var(--fg-soft); }
.result-ms { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--fg-faint); }
.result-headers { list-style: none; padding: 9px 0 0; display: grid; gap: 2px; }
.result-headers li { display: flex; gap: 8px; font-size: 12px; overflow-wrap: anywhere; }
.result-header-name { color: var(--fg-faint); font-size: 11.5px; }
.result-header-value { font-family: var(--mono); font-size: 11.5px; overflow-wrap: anywhere; }
.result-problem { font-size: 13px; color: var(--write-deep); }
.result-problem-why { font-size: 12.5px; color: var(--fg-soft); margin-top: 6px; }
.result-problem-why li { margin-bottom: 3px; }
.result-raw { font-size: 11.5px; color: var(--fg-faint); font-family: var(--mono); margin-top: 6px; }
.result-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* ── When the document itself could not be read ─────────────────────────── */

/* The page used to admit this in ONE LINE and otherwise carry on as though it
   had rendered: an empty scope ledger under a live "scopes on your key" label,
   an empty endpoint list under "Each one below carries the scope it needs", and
   a fully interactive key bar inviting a key that could do nothing. The
   failure is a state of the page now, and it says what was asked for, what came
   back, and what to do next. */
.loadfail {
  border: 1px dashed var(--write-deep); border-radius: var(--doc-r-lg);
  background: var(--write-tint); padding: 20px 22px; margin: 26px 0;
  display: grid; gap: 10px; max-width: 72ch;
}
.loadfail h2 { font-family: var(--display); font-weight: 700; font-size: 20px; }
.loadfail p { font-size: 14px; color: var(--fg); margin: 0; }
.loadfail dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: 13px; }
.loadfail dt { color: var(--fg-soft); }
.loadfail dd { margin: 0; font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
.loadfail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.loadfail a { text-decoration: underline; text-underline-offset: 2px; }
/* With no API document there is nothing to try, so the whole key bar goes, not only its
   controls: hiding the field and buttons alone left an empty sticky strip of paper-2 under
   the header (owner, 6 Oct 2026: "what's with this blueish gap?"). */
body.doc-missing .keybar,
body.doc-missing .keybar-fold,
body.doc-missing .ledger-row,
body.doc-missing .key-field,
body.doc-missing #keyShow,
body.doc-missing #keyForget,
body.doc-missing .endpoints-head { display: none; }

/* ─────────────────────────── the confirmation ─────────────────────────── */

.confirm {
  border: 1px solid var(--line-2); border-radius: var(--doc-r-lg);
  background: var(--surface); color: var(--fg);
  padding: 22px; max-width: 460px; width: calc(100% - 32px);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .6);
}
.confirm::backdrop { background: rgba(10, 8, 14, .5); }
.confirm-title { font-family: var(--display); font-weight: 700; font-size: 19px; margin-bottom: 10px; }
.confirm-body { font-size: 14px; color: var(--fg-soft); white-space: pre-line; }
.confirm-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }

/* ──────────────────────────────── footer ──────────────────────────────── */

.endpoints-head { border-top-width: 2px; }

/* ═══════════════════════ the three-part layout ════════════════════════ */

/* WHY 1280 AND NOT 1100. Three parts need room for three parts: a 250px rail,
   a console that is not worth reading below about 340px, and 34px of gap twice
   — 750px of furniture before the reference text gets a pixel. At 1120px that
   left the text column 300px wide, 36 characters to the line, NARROWER than the
   same text gets on a 375px phone, with a console 40% wider beside it; and the
   parameters table, whose narrowest honest width is ~339px, painted its last
   column under the console's opaque panel. 1280 is the first width where the
   arrangement is better than the one column it replaces. Below it the page
   keeps the single-column layout it already handles well. */
@media (min-width: 1280px) {
  .shell { grid-template-columns: 250px minmax(0, 1fr); }

  .rail {
    position: sticky; top: var(--stick); align-self: start;
    max-height: calc(100vh - var(--stick) - 24px); overflow-y: auto;
    padding-right: 6px;
  }
  .rail-fold { border-bottom: 0; }
  .rail-summary { display: none; }

  /* There is room for the whole bar here, so it is not a fold: portal.js opens
     it and the control that would close it goes away. */
  .keybar-fold-summary { display: none; }
  .ledger-row { border-top: 0; padding-top: 0; }

  /* The reference text and its request panel, side by side, per endpoint —
     so the request you are reading about is the one in the panel, and the
     panel travels with its own section rather than with the whole page. */
  /* THE CONSOLE YIELDS FIRST. `minmax(340px, 420px)` took its maximum before
     the text column got anything, so every pixel of a wider window went to the
     panel until it was full. A clamp on a percentage grows the two together and
     keeps the reference the wider of the pair, which is the right order for a
     page that is mostly prose. */
  .ep { grid-template-columns: minmax(0, 1fr) clamp(320px, 30%, 420px); }
  .ep-console { position: sticky; top: var(--stick); align-self: start; }
  /* A stuck panel may never be taller than the space it is stuck in, or Send
     ends up below the fold with no way to reach it. */
  .console-inner { max-height: calc(100vh - var(--stick) - 28px); overflow-y: auto; }
}

@media (max-width: 1279px) {
  /* One column, console under the text it belongs to. Nothing is hidden and
     nothing scrolls sideways. */
  .rail { position: static; }
  .meter { margin-left: 0; }
  /* Label on its own line, field across the full row beneath it. */
  .key-label { flex: 1 1 100%; }
  #keyInput { flex: 1 1 100%; }
}