/* ============================================================================
   SoftBet API Documentation — 3-pane Stripe-style layout.
   Reuses brand tokens from styles/tokens.css (canvas-paper / ink / lime).
   ============================================================================ */

:root {
  --docs-sidebar-w: 260px;
  --docs-codepanel-w: 380px;
  --docs-topbar-h: 56px;
  --docs-code-bg: #0B0F1F;
  --docs-code-ink: #E6EAF5;
  --docs-code-mute: #8B95B5;
  --docs-code-lime: #C7F848;
  --docs-code-pink: #F478C5;
  --docs-code-blue: #7AD7F0;
}

html, body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans, 'Geist', system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.55;
}
body.docs-body { min-height: 100vh; }

a { color: var(--violet, #6f6cff); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Top bar ─────────────────────────────────────────────────────────── */
.docs-topbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--docs-topbar-h);
  display: flex; align-items: center;
  gap: 16px; padding: 0 24px;
  background: rgba(244, 244, 238, 0.92);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--ink-line);
}
.docs-brand {
  font-family: var(--font-display, 'Geist', system-ui, sans-serif);
  font-weight: 700; font-size: 1.05rem;
  color: var(--ink); display: inline-flex; align-items: center; gap: .25ch;
}
.docs-brand .b-bracket { color: var(--lime); filter: drop-shadow(0 0 6px rgba(199,248,72,.4)); }
.docs-brand .b-dot { color: var(--ink-mute); font-weight: 400; }
.docs-section-tag {
  margin-left: 8px; font-family: var(--font-mono); font-size: .82rem;
  color: var(--ink-mute); letter-spacing: .02em;
}
.docs-topbar-search {
  margin-left: auto; min-width: 240px; max-width: 360px; flex: 0 1 320px;
  position: relative;
}
.docs-topbar-search input {
  width: 100%; height: 34px; padding: 0 12px 0 32px;
  background: rgba(11,15,31,.04); border: 1px solid var(--ink-line);
  border-radius: 8px; color: var(--ink);
  font-family: var(--font-mono); font-size: .82rem;
  outline: none;
}
.docs-topbar-search input:focus { border-color: var(--ink-mute); background: rgba(255,255,255,.7); }
.docs-topbar-search::before {
  content: '⌕'; position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%); color: var(--ink-mute); font-size: 14px;
}
.docs-topbar-link {
  font-family: var(--font-mono); font-size: .82rem; color: var(--ink-mute);
}
.docs-topbar-link:hover { color: var(--ink); text-decoration: none; }

/* ── Shell ───────────────────────────────────────────────────────────── */
.docs-shell {
  display: grid;
  grid-template-columns: var(--docs-sidebar-w) 1fr;
  min-height: calc(100vh - var(--docs-topbar-h));
}
@media (max-width: 900px) {
  .docs-shell { grid-template-columns: 1fr; }
  .docs-sidebar { display: none; }
}

/* Language tab strip pinned in the topbar */
.docs-topbar-langs {
  display: flex; gap: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--ink-line);
}
.docs-topbar-langs .docs-codetab {
  appearance: none; background: transparent; border: 0;
  color: var(--ink-mute); cursor: pointer;
  padding: 6px 10px; font-family: var(--font-mono); font-size: .76rem;
  border-right: 1px solid var(--ink-line);
}
.docs-topbar-langs .docs-codetab:last-child { border-right: 0; }
.docs-topbar-langs .docs-codetab:hover { color: var(--ink); background: rgba(11,15,31,.04); }
.docs-topbar-langs .docs-codetab.active { color: var(--ink); background: rgba(199,248,72,.18); font-weight: 600; }

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.docs-sidebar {
  background: var(--canvas-paper);
  border-right: 1px solid var(--ink-line);
  padding: 18px 8px 32px;
  position: sticky; top: var(--docs-topbar-h);
  align-self: start;
  height: calc(100vh - var(--docs-topbar-h));
  overflow-y: auto;
}
.docs-nav-group { margin-bottom: 14px; }
.docs-nav-group-label {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .12em; color: var(--ink-mute);
  text-transform: uppercase;
  padding: 8px 14px 6px;
}
.docs-nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 6px;
  color: var(--ink); text-decoration: none;
  font-size: .88rem; line-height: 1.35;
  transition: background 120ms, color 120ms;
}
.docs-nav-item:hover { background: rgba(11,15,31,.04); text-decoration: none; }
.docs-nav-item.active {
  background: rgba(199,248,72,.18);
  color: var(--ink); font-weight: 600;
}
.docs-nav-item .docs-nav-glyph {
  color: var(--ink-mute); font-family: var(--font-mono); font-size: .72rem;
  min-width: 1ch;
}
.docs-nav-sub { padding-left: 14px; border-left: 1px dashed var(--ink-line); margin: 4px 0 4px 14px; }
.docs-nav-sub .docs-nav-item { font-size: .82rem; padding: 4px 10px; }

/* ── Content column ──────────────────────────────────────────────────── */
.docs-content {
  padding: 32px 40px 80px;
  max-width: 880px;
  min-width: 0;
}
.docs-section { margin-bottom: 56px; scroll-margin-top: calc(var(--docs-topbar-h) + 16px); }
.docs-section[hidden] { display: none !important; }
.docs-section > h1 {
  font: 700 1.7rem var(--font-display); letter-spacing: -.01em;
  margin: 4px 0 6px; color: var(--ink);
}
.docs-section > .docs-section-lede {
  color: var(--ink-mute); font-size: 1rem; margin: 0 0 28px;
}
.docs-section h2 {
  font: 700 1.18rem var(--font-display);
  margin: 36px 0 10px; padding-top: 8px;
  scroll-margin-top: calc(var(--docs-topbar-h) + 16px);
}
.docs-section h3 {
  font: 600 1.0rem var(--font-sans);
  margin: 24px 0 8px;
  color: var(--ink);
}
.docs-section p { margin: 0 0 12px; }

/* Inline code */
.docs-content code, .docs-content kbd {
  font-family: var(--font-mono);
  font-size: .85em;
  background: rgba(11,15,31,.06);
  border: 1px solid var(--ink-line);
  border-radius: 4px;
  padding: 1px 5px;
}

/* Tables */
.docs-table {
  width: 100%; border-collapse: collapse;
  margin: 12px 0 16px;
  font-size: .86rem;
}
.docs-table th, .docs-table td {
  text-align: left; padding: 8px 10px;
  border-bottom: 1px solid var(--ink-line);
  vertical-align: top;
}
.docs-table th {
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 2px solid var(--ink-line);
}
.docs-table td:first-child { white-space: nowrap; font-family: var(--font-mono); color: var(--ink); }
.docs-table td code { background: transparent; border: 0; padding: 0; }
.docs-table .req-yes { color: #b85e00; font-family: var(--font-mono); font-size: .76rem; }
.docs-table .req-no  { color: var(--ink-mute); font-family: var(--font-mono); font-size: .76rem; }

/* Endpoint block */
.docs-endpoint {
  border: 1px solid var(--ink-line);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 18px 0 22px;
  background: var(--canvas-paper);
}
.docs-endpoint-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: -2px 0 8px;
}
.docs-method {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .06em;
  padding: 3px 8px;
  border-radius: 5px;
  color: #fff;
}
.docs-method.get    { background: #1e7a3f; }
.docs-method.post   { background: #2a55c4; }
.docs-method.put    { background: #b06d00; }
.docs-method.patch  { background: #8b3fb0; }
.docs-method.delete { background: #b03030; }
.docs-endpoint-path {
  font-family: var(--font-mono);
  font-size: .98rem;
  color: var(--ink);
  word-break: break-all;
}
.docs-endpoint-anchor {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ink-mute);
  text-decoration: none;
  margin-left: auto;
}
.docs-endpoint-anchor:hover { color: var(--ink); }
.docs-endpoint-desc {
  color: var(--ink-mute);
  margin: 0 0 8px;
  font-size: .94rem;
}
.docs-endpoint-meta {
  font-family: var(--font-mono);
  font-size: .76rem;
  color: var(--ink-mute);
  margin: 6px 0 12px;
  padding: 6px 10px;
  background: rgba(11,15,31,.04);
  border-radius: 6px;
}
.docs-endpoint-meta strong { color: var(--ink); font-weight: 600; }
.docs-section-sub {
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-mute);
  margin: 16px 0 4px;
}

/* Callouts */
.docs-callout {
  border: 1px solid var(--ink-line);
  border-left: 3px solid var(--lime);
  background: rgba(199,248,72,.07);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 14px 0;
  font-size: .9rem;
}
.docs-callout.warn { border-left-color: #b85e00; background: rgba(184,94,0,.06); }
.docs-callout.warn::before { content: '⚠ '; color: #b85e00; font-weight: 700; }
.docs-callout.info::before { content: '◍ '; color: var(--ink-mute); }

/* ── Code blocks (inline inside endpoint) ────────────────────────────── */
.docs-codeblock {
  background: var(--docs-code-bg);
  color: var(--docs-code-ink);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  margin: 10px 0 6px;
  position: relative;
}
.docs-codeblock pre {
  margin: 0; padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: .82rem; line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
  color: var(--docs-code-ink);
}
.docs-codeblock[hidden] { display: none !important; }
.docs-codeblock pre b   { color: var(--docs-code-lime); font-weight: 600; }
.docs-codeblock pre i   { color: var(--docs-code-blue); font-style: normal; }
.docs-codeblock pre em  { color: var(--docs-code-pink); font-style: normal; }
.docs-codeblock-label {
  position: absolute; top: 8px; left: 12px;
  font-family: var(--font-mono); font-size: .68rem;
  color: var(--docs-code-mute); letter-spacing: .08em;
  text-transform: uppercase;
}
.docs-codeblock pre { padding-top: 28px; }
.docs-copy {
  position: absolute; top: 6px; right: 8px;
  appearance: none; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: var(--docs-code-mute); cursor: pointer;
  padding: 3px 7px; border-radius: 5px;
  font-family: var(--font-mono); font-size: .66rem;
}
.docs-copy:hover { color: var(--docs-code-ink); background: rgba(255,255,255,.10); }
.docs-copy.copied { color: var(--docs-code-lime); }

/* Misc */
.docs-foot {
  border-top: 1px solid var(--ink-line);
  padding: 20px 40px 40px;
  color: var(--ink-mute);
  font-size: .82rem; font-family: var(--font-mono);
}

/* ── Download-PDF button (topbar) ─────────────────────────────────────── */
button.docs-pdf-btn {
  appearance: none;
  background: rgba(199, 248, 72, .18);
  border: 1px solid rgba(11, 15, 31, .12);
  border-radius: 7px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
}
button.docs-pdf-btn:hover {
  color: var(--ink);
  background: rgba(199, 248, 72, .30);
  border-color: var(--ink-mute);
}

/* ── Print / Save-as-PDF ──────────────────────────────────────────────────
   When body.docs-printing is set (via the Download PDF button) every section
   has been un-hidden by JS. This stylesheet strips the app chrome and lets the
   content flow + paginate naturally. Also applies to a raw Ctrl/Cmd-P. */
@media print {
  .docs-topbar,
  .docs-sidebar,
  .docs-topbar-search,
  .docs-topbar-langs,
  .docs-copy,
  .docs-pdf-btn { display: none !important; }

  html, body.docs-body { height: auto !important; overflow: visible !important; background: #fff !important; }

  .docs-shell {
    display: block !important;
    grid-template-columns: none !important;
    min-height: 0 !important;
  }
  .docs-content {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
  }

  /* Reveal every section (defence-in-depth alongside the JS un-hide). */
  body.docs-printing .docs-section { display: block !important; }
  body.docs-printing .docs-section[hidden] { display: block !important; }

  .docs-section {
    margin: 0 0 24px !important;
    break-inside: auto;
  }
  /* Keep code blocks, endpoints and headings from splitting awkwardly. */
  .docs-codeblock,
  .docs-endpoint,
  .docs-callout,
  table { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }

  /* Force readable ink on white regardless of the dark code theme. */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: inherit; text-decoration: none; }

  /* Start each top-level section on a fresh page for a clean PDF. */
  body.docs-printing .docs-section { break-before: page; }
  body.docs-printing .docs-section:first-of-type { break-before: avoid; }
}