/* API documentation pages (/docs/). docs/index.html also loads ../style.css (variables, tables, buttons, toasts);
   openapi.html does not (Swagger UI has its own styles), so the rules here carry fallbacks for the variables. The
   dashboard (../index.html) loads this file for its header links to the docs; every other rule here is scoped to
   classes only these pages use. */

.docs-top {
  display: flex; align-items: center; gap: 16px; padding: 10px 20px;
  background: var(--card, #fff); border-bottom: 1px solid var(--line, #dde2e8);
  font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.docs-top .brand { font-weight: 700; color: var(--fg, #1b1f24); text-decoration: none; }
.docs-nav { display: flex; gap: 4px; flex: 1; }
.docs-nav a, .spec-switch a {
  padding: 6px 12px; border-radius: 6px; color: var(--fg, #1b1f24); text-decoration: none;
}
.docs-nav a:hover, .spec-switch a:hover { background: var(--code, #f0f2f5); }
.docs-nav a[aria-current="page"], .spec-switch a[aria-current="page"] { background: var(--code, #f0f2f5); font-weight: 600; }
.docs-top .muted { color: var(--muted, #5f6b7a); }

/* The dashboard's header links to these pages (index.html loads this file too). */
.top .docs-links { display: flex; gap: 2px; }
.top .docs-links a { padding: 6px 10px; border-radius: 6px; color: var(--muted); text-decoration: none; }
.top .docs-links a:hover { background: var(--code); color: var(--fg); }

/* API docs page */
.docs-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; max-width: 1180px; margin: 0 auto; padding: 16px 20px 64px; }
.docs-layout main { padding: 0; min-width: 0; }
.docs-layout h1 { font-size: 1.6em; margin: 8px 0 12px; }
.toc { position: sticky; top: 12px; align-self: start; max-height: calc(100vh - 24px); overflow: auto; font-size: 13px; }
.toc-head { margin: 8px 0 6px; font-weight: 600; color: var(--muted); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li a { display: block; padding: 3px 8px; border-radius: 6px; color: var(--fg); text-decoration: none; }
.toc li a:hover { background: var(--code); }
.doc { max-width: 900px; line-height: 1.55; }
.doc h2 { font-size: 1.3em; margin: 1.8em 0 .6em; padding-top: .4em; border-top: 1px solid var(--line); }
.doc h2:first-child { margin-top: 0; border-top: 0; }
.doc h3 { font-size: 1.05em; margin: 1.4em 0 .5em; }
.doc h2, .doc h3 { scroll-margin-top: 12px; }
.doc .anchor { visibility: hidden; color: var(--muted); text-decoration: none; font-weight: 400; }
.doc h2:hover .anchor, .doc h3:hover .anchor, .doc .anchor:focus { visibility: visible; }
.doc p, .doc ul, .doc ol { margin: 0 0 .9em; }
.doc li { margin: .25em 0; }
.doc code { background: var(--code); padding: 1px 4px; border-radius: 4px; overflow-wrap: anywhere; }
.doc pre.code { margin: 0; white-space: pre; }
.doc pre.code code { padding: 0; background: none; }
.doc .note { border-left: 3px solid var(--accent); background: var(--card); padding: 8px 12px; border-radius: 0 6px 6px 0; }
.doc .note.error { border-left-color: var(--danger); }
.doc .table-wrap { margin: 0 0 1em; }
.doc td, .doc th { font-size: 13px; }
.doc th { color: var(--fg); background: var(--code); }
.codebox { margin: 0 0 1em; border: 1px solid var(--line); border-radius: 8px; background: var(--code); }
.code-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px 0 10px; }
.codebox pre.code { padding: 6px 10px 10px; overflow-x: auto; }
@media (max-width: 800px) {
  .docs-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; max-height: none; }
  .toc ol { display: flex; flex-wrap: wrap; gap: 2px; }
}

/* OpenAPI page: Swagger UI is light-only, so this page stays light. */
body.openapi { margin: 0; background: #fff; color: #1b1f24; color-scheme: light; font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.openapi-main { max-width: 1460px; margin: 0 auto; padding: 12px 20px 48px; }
.spec-bar { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; padding: 0 20px; }
.spec-switch { display: flex; gap: 4px; }
.spec-bar .muted { margin: 0; flex: 1; min-width: 300px; color: #5f6b7a; }
body.openapi .error { color: #c62828; padding: 0 20px; }