/* =========================================================================
   Component — code panel
   Uses --doc-code-bg, the token DESIGN_TOKENS.md §5 defines for exactly this
   ("code block background"), so the panel is themed rather than a pinned dark
   terminal. Wide lines scroll inside the panel.
   ========================================================================= */

.code-panel {
  background: var(--doc-code-bg);
  border: 1px solid var(--doc-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.code-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--doc-line);
  background: var(--doc-panel);
}

.code-label {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--doc-ink-soft);
}

/* An explicit trailing slot. Not `:last-child`, which would shove the path
   to the right whenever nothing follows it.

   **It carries its own ink, and the omission was a real defect.** The slot set
   only `margin-left` and inherited its colour — which on `developer.html` comes
   from `.page-hero.on-brand`, so the text arrived as `--brand-on-dark`
   (`#FFFFFF`) on a head whose ground is `--doc-panel` (`#FFFFFF` in the light
   theme): **1.00:1**, invisible, on two shipped pages. Dark passed because
   `--doc-panel` is `#313131` there, and paper passed because print.css pins the
   ink on `.on-brand` — so the one state that failed is the one a reader meets
   first.

   The ink is `--doc-ink-soft`, the same `.code-label` above already takes: the
   two are labels in the same head, and the one that named its colour was the one
   that could not be reached by a surface it sits inside. That is L-FE-49's shape
   with the arrow reversed — not a component losing to a page rule, but a
   component element inheriting from a surface OUTSIDE it. */
.code-head-end {
  margin-left: auto;
  color: var(--doc-ink-soft);
}

.code-body {
  margin: 0;
  padding: 16px 18px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.65;
  color: var(--doc-ink);
  overflow-x: auto;
  white-space: pre;
}

/* An inline endpoint chip: GET /v1/system/me */
.ep-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--doc-ink);
  background: var(--doc-code-bg);
  border: 1px solid var(--doc-line);
  padding: 4px 10px;
  border-radius: var(--radius);
  word-break: break-all;
}

/* --- HTTP method chip ----------------------------------------------------- *
 * Lives here, not in badge.css: it is always shown next to an endpoint path,
 * so a page that renders one needs this file anyway. Splitting the chip from
 * `.ep-chip` across two stylesheets is how a page ends up loading one half.
 * ------------------------------------------------------------------------- */

.method {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 8px;
  border: 1px solid var(--sd-border);
  border-radius: 5px;
  color: var(--sd-text);
  /* The recess, and it is the chip's OWN ground rather than whatever is under
     it — so the one contrast measurement below holds in both places a method
     chip appears: inside `.code-head` (on --doc-panel) and in the changelog's
     endpoint list (on the page surface). */
  background: var(--sd-sunk);
}

/* --- The accent is the border, not the fill (DESIGN_TOKENS.md §9.3) ------- *
 * These four used to be TINTED AREAS — `--sd-<n>-bg` outlined with the paler
 * `--sd-<n>-bd`. That was correct while every page in the frontend rendered
 * exactly ONE of them: index.html, contact.html and
 * for-integration-partners.html each carry a single method chip in a code
 * panel's head.
 *
 * U-507 is the first unit to render many at once — a changelog entry names
 * every endpoint it touches, and the developer page is a grid of them. Twelve
 * entries listing four endpoints each is forty-eight tinted areas, and §9.3's
 * budget (at most one tinted fill per card or row) is not a preference: at that
 * density no single one of them is an accent any more.
 *
 * **And the quiet version has MORE contrast, which is L-FE-46 again.** A tint
 * outlined in a paler tint of itself clears nothing; the semantic colour itself
 * against `--sd-sunk` measures, recomputed for this change rather than quoted:
 *
 *     light   info 4.36:1 · success 4.30:1 · warning 4.29:1 · error 4.53:1
 *     dark    info 5.59:1 · success 6.26:1 · warning 7.33:1 · error 4.96:1
 *
 * Every one clears WCAG 1.4.11's 3:1 for a non-text indicator, in both themes.
 * The ink does not move — `--sd-text` on `--sd-sunk` is 13.76:1 light and
 * 12.82:1 dark, and the semantic foregrounds as TEXT would be under the 4.5:1 a
 * 11.5 px chip needs (L-FE-03).
 *
 * There are four classes and seven methods the contract allows. PATCH shares
 * PUT's class and HEAD and OPTIONS share GET's — the mapping lives in the page
 * module that renders a chip, because it is a reading of what the method DOES
 * and not a fact about the stylesheet.
 * ------------------------------------------------------------------------- */

.method-get    { border-color: var(--sd-info); }
.method-post   { border-color: var(--sd-success); }
.method-put    { border-color: var(--sd-warning); }
.method-delete { border-color: var(--sd-error); }