/* api-docs.css — shared by api.html and tokens.html */

.langbar {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 14px 0 0; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.langbar button {
  background: transparent; color: var(--muted);
  border: 1px solid transparent; border-radius: 7px;
  padding: 5px 11px; font-size: 13px;
}
.langbar button:hover { color: var(--ink); }
.langbar button[aria-selected="true"] {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

pre {
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px; overflow-x: auto;
  font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink); margin: 12px 0 0;
}
pre[data-lang] { display: none; }
pre[data-lang].active { display: block; }

code {
  font: 0.92em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 5px;
}
pre code { background: none; border: none; padding: 0; }

.step { margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.step:first-of-type { border-top: none; padding-top: 0; }
.step h3 { margin: 0 0 6px; font-size: 17px; color: var(--ink); }
.step p { color: var(--muted); margin: 0; max-width: 74ch; }

table.api { width: 100%; border-collapse: collapse; margin: 14px 0 0; font-size: 14px; }
table.api th, table.api td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top;
}
table.api th { color: var(--muted); font-weight: 600; }
table.api td code { white-space: nowrap; }

.state {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  font-size: 13px; border: 1px solid var(--line);
}
.state.user { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.state.guest { color: var(--accent2); border-color: color-mix(in srgb, var(--accent2) 45%, transparent); }
.state.none { color: var(--muted); }

.tokenval {
  word-break: break-all; white-space: pre-wrap; min-height: 2.4em; margin-top: 0;
}

.callout {
  margin: 16px 0 0; padding: 12px 14px; border-radius: 9px;
  background: var(--panel2); border-left: 3px solid var(--accent2); font-size: 14px;
}
.callout strong { color: var(--ink); }