/* ============================================================
   freezr — code.css
   Dark code panels, syntax highlighting, inline code.
   Used on specs.html; can be added to any page that shows
   code examples.
   ============================================================ */

/* ── Dark code panel (right side of endpoint blocks) ─────── */
.ep-right {
  background: #141c2b;
  padding: 20px 20px;
  overflow-x: auto;
}

.code-label {
  font-size: 10px;
  font-family: var(--font-mono);
  color: #3d5472;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}

/* ── Code block ──────────────────────────────────────────── */
.code-block,
pre.code-block {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.85;
  color: #c9d8ec;
  white-space: pre;
  margin: 0;
  background: transparent;
  overflow-x: auto;
}

/* Syntax token colours */
.tok-key     { color: #a8d4f5; }  /* object keys, HTTP verbs */
.tok-str     { color: #9fe1cb; }  /* string values */
.tok-num     { color: #fac775; }  /* numbers */
.tok-bool    { color: #f0997b; }  /* true / false / null */
.tok-comment { color: #3d5472; }  /* comments */
.tok-url     { color: #c9d8ec; }  /* path segments */
.tok-param   { color: #d4b8f5; }  /* query params */

/* ── Standalone code block (light background, full-width) ── */
.code-standalone {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.8;
  color: var(--c-ink);
  overflow-x: auto;
  margin: 16px 0;
}

/* ── Inline code (inside prose) ─────────────────────────── */
p code,
li code,
td code,
.param-desc code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--c-surface-3);
  color: var(--c-ink);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--c-border);
}

/* ── JSON response divider inside dark panel ─────────────── */
.code-divider {
  height: 1px;
  background: #1e2d42;
  margin: 14px 0;
}

/* ── Copy button (optional, wired up in JS) ──────────────── */
.code-copy-btn {
  float: right;
  font-size: 11px;
  font-family: var(--font-sans);
  padding: 3px 8px;
  border: 1px solid #2a3d55;
  border-radius: 4px;
  background: transparent;
  color: #4a6a8a;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: 6px;
}
.code-copy-btn:hover { color: #a8d4f5; border-color: #4a6a8a; }
.code-copy-btn.copied { color: #9fe1cb; border-color: #3d6b5a; }