/* ==========================================================================
   developers.html — page-specific styles
   Only tokens from css/style.css; no new colours, no radius, no shadows.
   ========================================================================== */

/* Request + response side by side inside one code tab */
.dev-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
.dev-pair .code { height: 100%; }

/* A black code block on a black band needs an edge */
.code--framed { border: 1px solid var(--white-20); }

/* Light code blocks: the corner label must stay readable on paper */
.code--light .code__lang { color: var(--ink-75); }

/* Inline chips sit inside 14px/1.3 prose on this page: an 11px inline-block with 1px top padding stays inside
   the line box, so its border never touches the baseline of the line above; never break a chip across lines */
.kbd { display: inline-block; font-size: 11px; line-height: 1; padding: 1px 5px 0; white-space: nowrap; vertical-align: 0; text-indent: 0; text-align: left; }  /* inline-block would inherit .indent-2's text-indent */

/* Two samples share columns 2–4 (≈450px each): 12px mono keeps the longest line (62 chars) inside the block */
.dev-pair .code { font-size: 12px; }

/* Stat cards carry six-character values (99.99%, 180 ms): one notch below the default display size */
.dev-stats .stat__num { font-size: clamp(32px, 3.3vw, 48px); white-space: nowrap; }

/* Endpoint list: METHOD + path in mono, description in the body face */
.dev-api > dt { display: flex; gap: 14px; align-items: baseline; color: var(--white); font-family: var(--font-mono); font-size: 14px; }
.dev-api__method { flex: none; min-width: 44px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--white-50); }

/* Wide tables keep their columns and scroll inside .table-wrap on small screens */
.dev-events { min-width: 820px; }
.dev-cards { min-width: 820px; }
.dev-cards .num { white-space: nowrap; }
.dev-events td:first-child { font-family: var(--font-mono); font-size: 14px; }

/* Outcome marker in the test-card table: filled = approved, empty = declined, hatched = challenge */
.dev-result { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.dev-result::before { content: ""; width: 10px; height: 10px; border: 1px solid var(--black); flex: none; }
.dev-result--ok::before { background: var(--black); }
.dev-result--challenge::before { background: repeating-linear-gradient(135deg, var(--black) 0 1px, transparent 1px 4px); }

/* Header examples next to the rate-limit / idempotency prose */
.dev-headers { font-size: 12px; line-height: 1.7; }

/* Delivery rules under the webhook heading */
.dev-rules { display: flex; flex-direction: column; gap: 14px; }
.dev-rules .check-item { font-size: 14px; line-height: 1.4; color: var(--white-60); align-items: flex-start; }
.dev-rules .check-item .icon--check { margin-top: 3px; }

@media (max-width: 1023px) {
  .dev-pair { grid-template-columns: minmax(0, 1fr); }
  .dev-pair .code { height: auto; }
}

@media (max-width: 639px) {
  .dev-events, .dev-cards { min-width: 680px; }
  .dev-cards .num { font-size: 16px; }
  /* style.css turns <dt> into a 12px caps caption on phones — an API path must keep its case and mono face */
  .dev-api > dt { flex-direction: column; gap: 6px; font-size: 14px; text-transform: none; letter-spacing: 0; }
  .dev-headers { font-size: 11px; }
}