/* ============================================================
   tofa docs — API reference page (api.html)
   Maps Scalar's CSS variables onto the site tokens so the page
   inherits the brand-front navy/foam world and follows the same
   data-theme toggle as every other page. Loaded only by api.html,
   after theme.css/elevated.css.
   ============================================================ */

.api-page .api-main {
  /* Scalar manages its own rails; give it the full width under the nav.
     The header is in normal flow (not sticky), so this is pure breathing
     room between the bar and the strip. */
  padding-top: 12px;
  min-height: 100vh;
}

/* Slim utility strip between the nav and the reference: one action, quiet. */
.api-strip {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 8px var(--gutter);
  border-bottom: 1px solid var(--line-soft);
  background: var(--tint-2);
}
.api-strip-note {
  font-size: 0.82rem;
  color: var(--ink-58);
}
.api-strip-btn {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 12px;
  cursor: pointer;
}
.api-strip-btn:hover {
  color: var(--teal-text, var(--teal));
  border-color: var(--teal-rim, var(--teal));
}
@media (max-width: 640px) {
  .api-strip-note { display: none; }
}

/* Scalar accounts for a site header via this variable: its sidebar and
   sticky section headers offset by it, so nothing hides under our nav. */
#api-reference-root {
  /* 0: the site header scrolls away, so Scalar's sticky rails and section
     headers offset from the viewport top. */
  --scalar-custom-header-height: 0px;

  /* Type: one family, the site's own. */
  --scalar-font: var(--sans);
  --scalar-font-code: var(--mono);

  /* Surfaces + ink, both themes resolve through the site tokens. */
  --scalar-background-1: var(--paper);
  --scalar-background-2: var(--paper-2);
  --scalar-background-3: var(--code-bg);
  --scalar-color-1: var(--ink);
  --scalar-color-2: var(--ink-78);
  --scalar-color-3: var(--ink-58);
  --scalar-border-color: var(--line);

  /* Accent: interaction color only, per the button grammar. */
  --scalar-color-accent: var(--teal-text, var(--teal));
  --scalar-background-accent: rgba(45, 212, 191, 0.12);

  /* Sidebar mirrors the guides sidebar: same surface, quiet ink. */
  --scalar-sidebar-background-1: var(--paper);
  --scalar-sidebar-color-1: var(--ink-78);
  --scalar-sidebar-color-2: var(--ink-58);
  --scalar-sidebar-color-active: var(--ink);
  --scalar-sidebar-border-color: var(--line-soft);
  --scalar-sidebar-item-hover-background: var(--tint);
  --scalar-sidebar-item-active-background: var(--tint);
  --scalar-sidebar-search-background: var(--tint-2);
  --scalar-sidebar-search-border-color: var(--line);
  --scalar-sidebar-search-color: var(--ink-58);

  /* Primary button (Send request etc): solid ink fill, site grammar. */
  --scalar-button-1: var(--fill-strong);
  --scalar-button-1-hover: var(--border-strong);
  --scalar-button-1-color: var(--on-fill);

  /* HTTP method colors: keep Scalar's semantics but tune toward the
     palette (teal for GET, no neon). */
  --scalar-color-green: #2dd4bf;
  --scalar-color-blue: #60a5fa;
  --scalar-color-orange: #fbbf24;
  --scalar-color-red: #f87171;
  --scalar-color-purple: #c4b5fd;
  --scalar-color-yellow: #fde047;
}

:root[data-theme="light"] #api-reference-root {
  --scalar-background-accent: rgba(10, 106, 96, 0.1);
  --scalar-color-green: #0a6a60;
  --scalar-color-blue: #1d4ed8;
  --scalar-color-orange: #b45309;
  --scalar-color-red: #b91c1c;
  --scalar-color-purple: #6d28d9;
  --scalar-color-yellow: #a16207;
}

/* Scalar's own dark/light classes still gate a few internals (syntax
   highlighting); the variables above already resolve per site theme. */

/* Hide Scalar's remaining promo chrome. The Developer Tools bar and the
   Generate MCP footer are already off via `showDeveloperTools: 'never'` in
   assets/api.js; the sidebar "Ask AI" button (scalar.com service) has no
   config flag, so hide the search row's trailing button. The search button
   itself stays first in that row. */
#api-reference-root .t-doc__sidebar .px-3.pt-3 > button:not(:first-child),
#api-reference-root .scalar-mcp-layer,
#api-reference-root form.agent-button-container,
#api-reference-root header.api-reference-toolbar {
  display: none !important;
}