/* Brand corrections for the generated API reference.
 * ----------------------------------------------------------------------------
 * Redoc's theme object covers the big surfaces but not everything: several
 * sub-components fall back to defaults drawn for a light background, which on
 * our ground come out as white chips and near-invisible labels.
 *
 * Everything here is selected through stable hooks — semantic elements, Redoc's
 * own class names, and react-tabs' documented classes. None of the generated
 * styled-components names (sc-fjvvzt and friends) are used: those change on
 * every Redoc build and would fail silently on upgrade.
 */

/* --- Section labels -------------------------------------------------------- */
/* "Authorizations", "Response schema", "Request Body schema" shipped as dark
   grey on the dark ground and were effectively unreadable. They are the same
   kind of thing as the mono eyebrow labels used across the rest of the brand,
   so they are set that way. */
#redoc h5 {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* --- Response and request sample tabs -------------------------------------- */
/* The selected tab defaulted to a white pill, which was the loudest thing on
   the page. Status colour is carried by the text, and selection by the
   surface — the same division the rest of the brand uses. */
#redoc .react-tabs__tab-list {
  margin: 0 0 10px;
  padding: 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  gap: 4px;
}
#redoc .react-tabs__tab {
  margin: 0;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: .04em;
}
#redoc .react-tabs__tab--selected {
  background: var(--paper-3);
  border-color: var(--rule);
  color: var(--ink);
}
#redoc .react-tabs__tab.tab-success { color: var(--pass); }
#redoc .react-tabs__tab.tab-error { color: var(--fail); }
#redoc .react-tabs__tab.tab-redirect { color: var(--warn); }
/* Redoc emits an empty tab when a response has no body. Blank pills read as a
   rendering fault rather than as an absence. */
#redoc .react-tabs__tab:empty { display: none; }

/* The media type sits inside the label as a span. Left alone it inherits the
   uppercase mono treatment above and drops to the same low contrast the label
   had, so it is set back to running text. */
#redoc h5 > span {
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0;
  text-transform: none;
}

/* --- Content type control -------------------------------------------------- */
/* Rendered as a pale box that reads as an editable field. It is a labelled
   value, so it is given the same treatment as a spec row. */
#redoc [role="tabpanel"] > div > div:first-child {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 8px 12px;
}
#redoc [role="tabpanel"] > div > div:first-child > span {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
#redoc [role="tabpanel"] > div > div:first-child > div {
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: var(--text-sm);
}

/* --- Code samples ---------------------------------------------------------- */
#redoc .redoc-json {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 14px 16px;
}
#redoc .redoc-json code,
#redoc pre code {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
}

/* --- Schema rows ----------------------------------------------------------- */
/* Property names carry the data role, so they take the mono face; the dividers
   were heavier than any rule elsewhere in the system. */
#redoc table td,
#redoc table th {
  border-color: var(--rule);
}
#redoc .property-name,
#redoc td > span[kind] {
  font-family: var(--mono);
}

/* --- Sidebar --------------------------------------------------------------- */
#redoc .menu-content {
  border-right: 1px solid var(--rule);
}
#redoc label[role="menuitem"],
#redoc li[data-item-id] > label {
  font-size: var(--text-sm);
}

/* --- Density --------------------------------------------------------------- */
/* Redoc's default rhythm is set for a documentation page with long prose. This
   spec is mostly tables, where the same spacing reads as drift rather than
   separation. */
#redoc h1 { letter-spacing: var(--track-head); }
#redoc h2 { margin-top: 8px; letter-spacing: var(--track-head); }
#redoc h3 { letter-spacing: var(--track-head); }

/* The operation panels carry their own generous padding; this stops two of them
   compounding into a gap the reader has to scroll past. */
#redoc [data-section-id] > div { padding-top: 0; }