/* api.css — страница API 1-в-1 с bsbord (api-doc), но в наших синих токенах.
   Имена классов повторяют их фронт: api-eyebrow, api-h1/h2, api-pills, api-method
   бейджи GET/POST, bs-card + bs4-table, bs-copy для curl, api-note. Грузится
   после sidebar.css. */

.api-doc {
  --fg: #e8eefc;
  --fg-dim: #c4d0ea;
  --muted: #8a97b8;
  --api-strong: #f2f6ff;
  --accent: #4f8cff;
  --accent-bright: #7fb0ff;
  --accent-deep: #2a3550;
  --api-surface: #0e1422;
  --api-code-bg: #0a0e17;
  --api-line: #1d2740;
  --api-line-soft: #161f33;
  --api-th-bg: #0d1320;
  --api-th-fg: #8a97b8;
  --api-inline-bg: #0d1726;
  --api-inline-border: #1f3350;
  --api-badge-bg: #0a1830;
  --api-badge-fg: #7fb0ff;
  --api-badge-border: #1e4070;
  --api-note-bg: #0b1523;
  --api-note-border: #20395a;
  --api-amber-fg: #eab308;
  --api-amber-bg: #1a1705;
  --api-amber-border: #3a3320;
  max-width: 860px;
}

.api-doc a { color: var(--accent); text-decoration: none; }
.api-doc a:hover { color: var(--accent-bright); }
.api-doc p { margin: 0 0 12px; color: var(--muted); line-height: 1.65; }
.api-doc ul, .api-doc ol { margin: 0 0 12px; padding-left: 22px; color: var(--muted); }
.api-doc li { margin: 5px 0; line-height: 1.6; }

.api-doc .api-eyebrow {
  font: 600 11.5px var(--mono), ui-monospace, monospace;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px;
}
.api-doc .api-h1 {
  font-size: clamp(1.5rem, 3vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em;
  color: var(--api-strong); margin: 0 0 14px;
}
.api-doc .api-h2 {
  font-size: 20px; font-weight: 650; letter-spacing: -0.01em; color: var(--fg);
  margin: 46px 0 14px; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
}
.api-doc .api-h2-rest { font-size: 15px; font-weight: 500; color: var(--fg-dim); }
.api-doc .api-strong { color: var(--api-strong); font-weight: 600; }

/* инлайн-код */
.api-doc code, .api-doc .mono {
  font-family: var(--mono), ui-monospace, SFMono-Regular, Menlo, monospace;
}
.api-doc :not(pre) > code, .api-doc span.mono {
  font-size: 0.88em; background: var(--api-inline-bg); border: 1px solid var(--api-inline-border);
  border-radius: 5px; padding: 1px 5px; color: var(--accent-bright); overflow-wrap: anywhere;
}

/* пилюли под заголовком */
.api-doc .api-pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 0; }
.api-doc .api-pill {
  border: 1px solid var(--accent-deep); border-radius: 99px; padding: 4px 12px;
  font-size: 12.5px; color: var(--fg-dim);
}
.api-doc .api-pill .mono { background: none; border: none; padding: 0 0 0 4px; color: var(--accent-bright); }

/* бейджи методов */
.api-doc .api-method {
  font: 600 11px var(--mono), ui-monospace, monospace; letter-spacing: 0.04em;
  color: var(--api-badge-fg); background: var(--api-badge-bg);
  border: 1px solid var(--api-badge-border); border-radius: 5px; padding: 2px 7px;
}
.api-doc .api-method--post {
  color: var(--api-amber-fg); background: var(--api-amber-bg); border-color: var(--api-amber-border);
}
.api-doc .api-path { font: 600 16px var(--mono), ui-monospace, monospace; color: var(--fg); }

/* карточки и таблицы */
.api-doc .bs-card { border: 1px solid var(--api-line); border-radius: 12px; background: var(--api-surface); }
.api-doc .bs-card { padding: 14px 16px; color: var(--muted); font-size: 13.5px; line-height: 1.65; }
.api-doc .bs4-table-card {
  border: 1px solid var(--api-line); border-radius: 12px; background: var(--api-surface);
  overflow-x: auto; margin: 12px 0;
}
.api-doc .bs4-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.api-doc .bs4-table th {
  text-align: left; font: 600 10.5px var(--mono), monospace; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--api-th-fg); padding: 9px 14px;
  border-bottom: 1px solid var(--api-line); background: var(--api-th-bg);
}
.api-doc .bs4-table td {
  padding: 10px 14px; border-bottom: 1px solid var(--api-line-soft);
  vertical-align: top; color: var(--muted);
}
.api-doc .bs4-table tr:last-child td { border-bottom: none; }
.api-doc .bs4-table td.mono { color: var(--accent-bright); font-family: var(--mono), monospace; white-space: nowrap; }

/* copy-блок с curl */
.api-doc .bs-copy {
  position: relative; border: 1px dashed var(--accent-deep); border-radius: 11px;
  background: var(--api-code-bg); padding: 15px 18px; margin: 12px 0 4px; overflow-x: auto;
}
.api-doc .bs-copy pre {
  font: 12.5px/1.6 var(--mono), ui-monospace, monospace; color: var(--muted);
  background: none; border: none; padding: 0; margin: 0;
}
.api-doc .bs-copy .cmt { color: #5a6b8a; }
.api-doc .bs-copy .ts-btn {
  position: absolute; top: 8px; right: 8px; padding: 3px 9px; border-radius: 7px;
  border: 1px solid var(--accent-deep); background: var(--api-surface);
  color: var(--api-th-fg); font-size: 12px; cursor: pointer;
}
.api-doc .bs-copy .ts-btn:hover { color: var(--fg); border-color: var(--accent); }

/* заметки */
.api-doc .api-note {
  border: 1px solid var(--api-note-border); background: var(--api-note-bg);
  border-radius: 11px; padding: 14px 18px; margin: 14px 0 0; color: var(--muted);
}
.api-doc .api-note-title { color: var(--api-badge-fg); font-weight: 600; font-size: 13.5px; margin-bottom: 4px; }
.api-doc .api-note--warn { border-color: var(--api-amber-border); background: var(--api-amber-bg); }
.api-doc .api-note--warn .api-note-title { color: var(--api-amber-fg); }

/* ── светлая тема ───────────────────────────────────────────────────────── */
body.theme-light .api-doc {
  --fg: #16202b; --fg-dim: #313d47; --muted: #4b5563; --api-strong: #0b1219;
  --accent: #2a5bd0; --accent-bright: #1f47a8; --accent-deep: #b6c0cc;
  --api-surface: #ffffff; --api-code-bg: #f6f8fb; --api-line: #ccd4de;
  --api-line-soft: #dbe1e8; --api-th-bg: #f2f5f9; --api-th-fg: #64707c;
  --api-inline-bg: #eef3fb; --api-inline-border: #c5d3ed; --api-badge-bg: #e6eefb;
  --api-badge-fg: #2a5bd0; --api-badge-border: #a8c2e8; --api-note-bg: #f3f7fd; --api-note-border: #c5d3ed;
}