/* Code blocks: the titled header bar, the line-number gutter, the language dropdown, the reference rail, the
   response panel with its status selector and Headers dialog, and the syntax colours. Colours come from the design
   tokens only (--syn-*, --code-*, and the charcoal request set --code-dark-* / --syn-d-*); highlight.js's own theme
   CSS is not used and no colour is written here. */

/* No ligatures in code: `!=` stays two characters and `:=` stays two, in every block and in inline code. */
code, pre, kbd, samp, .cb, .cb * { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }

/* The scrollbars of a code surface take the surface's own tokens (thin, the track the block's colour, the thumb its
   comment grey), so a charcoal block never shows the browser's light one. */
.cb, .cb-pre { scrollbar-width: thin; scrollbar-color: var(--syn-com) var(--code-bg); }
.cb-pre::-webkit-scrollbar { height: 10px; background: var(--code-bg); }
.cb-pre::-webkit-scrollbar-track { background: var(--code-bg); }
.cb-pre::-webkit-scrollbar-thumb { background: var(--syn-com); border: 2px solid var(--code-bg); border-radius: var(--radius-sm); }
.cb-pre::-webkit-scrollbar-corner { background: var(--code-bg); }

/* ---------- Surfaces ----------
   A request block is charcoal in both themes (a dark block on a light page is what Stripe and Lithic show); a
   response follows the theme: light in the light theme, charcoal in the dark one. `.cb-dark` re-points the same
   variables at the charcoal set, so every rule below colours both. */
.cb-dark {
  --code-bg: var(--code-dark-bg);
  --code-border: var(--code-dark-border);
  --code-fg: var(--code-dark-fg);
  --syn-key: var(--syn-d-key);
  --syn-str: var(--syn-d-str);
  --syn-num: var(--syn-d-num);
  --syn-kw: var(--syn-d-kw);
  --syn-com: var(--syn-d-com);
  --syn-cmd: var(--syn-d-cmd);
  --syn-opt: var(--syn-d-opt);
  /* the controls in its header read these */
  --text: var(--code-dark-fg);
  --muted: var(--syn-d-com);
  --border-hi: var(--syn-d-com);
  --panel-hi: var(--code-dark-bg);
}

/* ---------- Syntax: highlight.js token classes onto the tokens ---------- */
.hljs-keyword, .hljs-built_in, .hljs-type, .hljs-selector-tag, .hljs-doctag, .hljs-meta,
.hljs-section, .hljs-name { color: var(--syn-kw); }
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-template-string { color: var(--syn-str); }
.hljs-number, .hljs-literal, .hljs-symbol, .hljs-bullet { color: var(--syn-num); }
.hljs-literal .hljs-keyword { color: inherit; }
.hljs-comment, .hljs-quote, .hljs-deletion { color: var(--syn-com); font-style: italic; }
.hljs-attr, .hljs-attribute, .hljs-property, .hljs-variable, .hljs-template-variable,
.hljs-title, .hljs-selector-id, .hljs-selector-class { color: var(--syn-key); }
.hljs-subst, .hljs-params, .hljs-punctuation, .hljs-operator { color: inherit; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }
/* highlight.js's bash grammar marks neither the command nor its options, so code.js wraps them in these. A string
   (`"Authorization: ..."`) and a variable keep the string and key hues inside them. */
.hljs-cmd { color: var(--syn-cmd); font-weight: 600; }
.hljs-opt { color: var(--syn-opt); }

/* ---------- Block ---------- */
.cb { margin: 0 0 20px; min-width: 0; background: var(--code-bg); color: var(--code-fg); border: 1px solid var(--code-border); border-radius: var(--radius-sm); }
.cb-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 38px; padding: 4px 8px 4px 14px;
  border-bottom: 1px solid var(--code-border);
}
.cb-lead { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cb-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em; }
.cb-example {
  flex: none; padding: 0 6px; color: var(--muted);
  border: 1px solid var(--code-border); border-radius: var(--radius-sm);
  font-size: 10.5px; font-weight: 600; line-height: 16px; letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.cb-tools { display: flex; flex: none; align-items: center; gap: 8px; }
.cb-headers {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; background: transparent; color: var(--muted);
  border: 1px solid var(--code-border); border-radius: var(--radius-sm);
  font: inherit; font-size: var(--text-xs); cursor: pointer;
}
.cb-headers:hover { color: var(--text); border-color: var(--border-hi); }
/* The copy button is an icon: at the bottom-left of a request block, in the header of a response. */
.cb-copy {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px;
  background: transparent; color: var(--muted); border: 0; border-radius: var(--radius-sm);
  font: inherit; font-size: var(--text-xs); cursor: pointer;
}
.cb-copy:hover, .cb-copy[data-state] { color: var(--text); }
.cb-copy[hidden] { display: none; }
.cb-foot { display: none; align-items: center; gap: 6px; padding: 4px 8px 8px; }
.js .cb-foot { display: flex; }
.cb-foot:empty { display: none; }
/* Without a script the Headers button would do nothing, so it is not shown. */
.cb-headers { display: none; }
.js .cb-headers { display: inline-flex; }
/* The live region that announces a copy; the button's own label swaps too. */
.cb-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* The status pill sits in the response header; without a script it is not shown and every status is stacked,
   each under its name. */
.cb-select { position: relative; display: none; }
.js .cb-select { display: inline-block; }
.cb-select::after {
  content: ""; position: absolute; right: 9px; top: 50%; width: 5px; height: 5px; pointer-events: none;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
}
.cb-status {
  appearance: none; -webkit-appearance: none;
  padding: 2px 24px 2px 10px; background: transparent; color: var(--text);
  border: 1px solid var(--code-border); border-radius: var(--radius-sm);
  font: inherit; font-size: var(--text-xs); font-weight: 600; cursor: pointer;
}
.cb-status:hover { border-color: var(--border-hi); }
.cb-status option { background: var(--panel-hi); color: var(--text); }
/* The status pill: a dot in the status hue, the code, a chevron. */
.status-select::before {
  content: ""; position: absolute; left: 10px; top: 50%; z-index: 1; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: var(--ok); pointer-events: none;
}
.status-select.s-3xx::before { background: var(--muted); }
.status-select.s-4xx::before { background: var(--warn); }
.status-select.s-5xx::before { background: var(--err); }
.status-select .cb-status { padding-left: 26px; font-family: var(--mono); }

.cb-pane[hidden] { display: none; }
.cb-lang-name { margin: 0; padding: 8px 14px 0; color: var(--muted); font-size: var(--text-xs); font-weight: 600; }
.js .cb-lang-name { display: none; }

/* ---------- Code and its gutter ----------
   The gutter is its own element beside the code: not selectable, so a drag-copy never carries a number, and
   sticky, so it stays put while a long line scrolls inside the block (never the page). */
.cb-pre {
  display: flex; margin: 0; padding: 12px 0; overflow-x: auto;
  white-space: pre; overflow-wrap: normal;
  background: transparent; color: var(--code-fg);
  border: 0; border-radius: 0; line-height: 1.6; tab-size: 2;
}
.cb-gutter {
  position: sticky; left: 0; z-index: 1; flex: none;
  padding: 0 14px; background: var(--code-bg); color: var(--syn-com);
  text-align: right; white-space: pre; user-select: none; -webkit-user-select: none;
}
.cb-pre code { display: block; flex: 1 0 auto; min-width: 0; padding: 0 14px 0 0; }
.ln { display: block; }
.ln:empty { min-height: 1.6em; }

/* ---------- Keyboard focus ---------- */
.cb button:focus-visible, .cb select:focus-visible, .cb-dialog button:focus-visible,
.lang-tile:focus-visible, .lang-more > summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ---------- The one component: language row, request block, response panel ---------- */
.cbx { margin: 0 0 20px; }
.cbx > .cb, .cbx > .panel-sec > .cb { margin-bottom: 0; }
.cbx .panel-sec { margin-bottom: 16px; }
.cbx > .panel-sec:last-child { margin-bottom: 0; }
.panel-sec { margin: 0 0 24px; }
.panel-h { margin: 0 0 8px; padding: 0; border: 0; color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); }
/* The picker, after the reference's LanguagePicker-Minimal: 60 px tiles (wider only when a name needs it), the mark
   at the large icon size centred above a 13 px label, 8 px between them, a transparent fill with the input-border
   colour and a stronger border on hover and when chosen; the overflow button is 30 px and pushed to the right. */
.lang-rail { display: flex; align-items: center; gap: 8px; }
.lang-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.lang-tile {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-width: 60px; height: 60px; padding: 0 6px;
  background: transparent; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: inherit; font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer;
}
.lang-tile[hidden] { display: none; }
.lang-tile:hover, .lang-tile[aria-selected="true"] { border-color: var(--border-hi); }
/* Every mark takes the tile's text colour, uncoloured (operator, 2026-10-10). 18 px, except Go: its mark is a wide,
   short wordmark that already reads small, so it keeps 24 px. */
.lang-ico { flex: none; width: 18px; height: 18px; }
.lang-tile[data-lang="go"] .lang-ico { width: 24px; height: 24px; }
/* The menu chooses a language, which needs the script, so without one it is not shown. */
.lang-more { position: relative; display: none; margin-left: auto; }
.js .lang-more { display: flex; }
.lang-more > summary {
  list-style: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  width: 30px; height: 30px; color: var(--muted);
  border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 18px; line-height: 1;
}
.lang-more > summary::-webkit-details-marker { display: none; }
.lang-more > summary:hover, .lang-more[open] > summary { color: var(--text); border-color: var(--border-hi); }
.lang-more ul {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 200px;
  margin: 0; padding: 4px; list-style: none;
  background: var(--panel-hi); border: 1px solid var(--border-hi); border-radius: var(--radius-sm);
  color: var(--muted); font-size: var(--text-xs);
}
.lang-more ul:empty { padding: 6px 10px; }
.lang-more ul:empty::before { content: attr(data-empty); }
.lang-more li { margin: 0; padding: 0; }
.lang-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px;
  background: transparent; color: var(--text); border: 0; border-left: 2px solid transparent; border-radius: var(--radius-sm);
  font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer;
}
.lang-item:hover { background: var(--panel); }
.lang-item[aria-checked="true"] { border-left-color: var(--accent); }
.lang-item .lang-ico { flex: none; width: 18px; height: 18px; }
.lang-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.cb-resp .cb-lang-name { padding-bottom: 4px; }
.resp-note { margin: 0; padding: 12px 14px; color: var(--muted); font-size: var(--text-sm); }
.resp-note .code-badge { margin: 0 2px; }

/* ---------- Credentials: the key is masked, never shown ---------- */
.cred-mask { flex: 1 1 auto; min-width: 0; color: var(--muted); letter-spacing: 0.08em; overflow: hidden; }
.cred-lock { flex: none; margin-left: auto; color: var(--muted); }

/* ---------- Headers dialog ---------- */
.cb-dialog {
  width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; overflow: hidden;
  background: var(--panel); color: var(--text); border: 1px solid var(--border-hi); border-radius: var(--radius);
}
.cb-dialog[open] { display: flex; flex-direction: column; }
.cb-dialog::backdrop { background: color-mix(in srgb, canvastext 55%, transparent); }
.dlg-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.dlg-head h2 { margin: 0; padding: 0; border: 0; font-size: var(--text-lg); line-height: 1.2; }
.dlg-head .cb-example { margin-right: auto; }
.dlg-x { display: inline-flex; padding: 6px; background: transparent; color: var(--muted); border: 0; border-radius: var(--radius-sm); cursor: pointer; }
.dlg-x:hover { color: var(--text); }
.dlg-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 16px 16px; }
.dlg-note { margin: 8px 0 0; color: var(--muted); font-size: var(--text-xs); }
.dlg-h { margin: 18px 0 8px; color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); }
.dlg-sect[hidden] { display: none; }
.dlg-none { margin: 0; padding: 12px; color: var(--muted); font-size: var(--text-sm); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.kv { margin: 0; padding: 8px 0; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.kv > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; padding: 4px 16px; font-size: var(--text-sm); }
.kv dt { text-align: right; overflow-wrap: anywhere; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.kv dd code { background: none; border: 0; padding: 0; font-size: var(--text-xs); }
.dlg-foot { display: flex; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--border); }
.dlg-close { padding: 6px 14px; background: transparent; color: var(--text); border: 1px solid var(--border-hi); border-radius: var(--radius-sm); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.dlg-close:hover { background: var(--panel-hi); }