/* The API page. Inherits all its typography from learn.css (main carries both .learn
   and .api-page) — this file only adds what a developer reference needs on top:
   code blocks and a table. */

.api-page h1 { font-size: 26px; margin: 0 0 8px; }

/* ⚠ min-width: 0, and it is load-bearing. Under 900px the global `main` rule makes this
   page's sections flex items, and a flex item defaults to `min-width: auto` — it refuses
   to shrink below its content's min-content width. A <pre> holding a curl command with a
   bearer token is ~545px of unbreakable text, so the sections stayed 547px wide and the
   whole page scrolled sideways on a phone. With the 0 minimum the section shrinks and the
   <pre>'s own overflow-x does the scrolling, which is where it belongs.
   Third instance of this exact trap in the project, after .form-grid > * and
   .field-row > *. */
.api-page,
.api-page section { min-width: 0; max-width: 100%; }

/* ⚠ overflow-x on the PRE, not on a wrapper. A curl line with a bearer token is longer
   than a phone, and the alternative — wrapping it — makes a command you cannot copy
   without reading carefully. Let the block scroll and leave the command intact. */
.api-page pre {
  background: #0d0e12;
  border: 1px solid #2a2d35;
  border-radius: 6px;
  padding: 12px 14px;
  overflow-x: auto;
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.55;
}
.api-page pre code {
  background: none;
  border: 0;
  padding: 0;
  color: #c9d1d9;
  white-space: pre;
}

.api-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 0 0 16px;
  /* A three-column table of status codes is the one thing here that genuinely cannot
     shrink to a phone; let it scroll rather than crushing the middle column. */
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}
.api-table th,
.api-table td {
  text-align: left;
  padding: 8px 14px 8px 0;
  border-bottom: 1px solid #22252c;
  vertical-align: top;
}
.api-table th { color: var(--text); font-weight: 600; }
.api-table td { color: var(--muted); }
.api-table td:first-child { color: var(--text); font-variant-numeric: tabular-nums; }