/* ══════════════════════════════════════════════════════════════════════════
   DARK OBSIDIAN - API DOCUMENTATION
   ══════════════════════════════════════════════════════════════════════════
   Same obsidian ground and violet accent as the Command Center, but this is
   a reading surface rather than an operating one, so the craft moves to
   measure, hierarchy and the code blocks - which are what people actually
   come here for.

   Every selector the sixteen pages use is still defined, and the four token
   names referenced inline in their markup (--border, --dim, --muted,
   --primary-ll) keep resolving. Only values and treatment change.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --bg:#050507; --bg2:#08080D; --bg3:#0D0D14;
  --surface:rgba(255,255,255,.03); --surface2:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.07); --border2:rgba(255,255,255,.11);

  --primary:#8B5CF6; --primary-l:#A78BFA; --primary-ll:#C4B5FD;
  --accent:#22D3EE; --success:#34D399; --warning:#FBBF24; --error:#F43F5E;

  --text:#ECEBF5; --muted:rgba(236,235,245,.60); --dim:rgba(236,235,245,.36);

  --font:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --sidebar-w:262px; --aside-w:212px;
  --measure:74ch;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html { scroll-behavior:smooth; scroll-padding-top:82px; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

body {
  background:var(--bg); color:var(--text); font-family:var(--font);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  display:flex; min-height:100vh;
}

a { color:var(--primary-ll); text-decoration:none; transition:color .18s ease; }
a:hover { color:#DDD6FE; }
:focus-visible { outline:2px solid var(--primary-l); outline-offset:3px; border-radius:4px; }
::selection { background:rgba(139,92,246,.3); }

/* ══ SIDEBAR ═══════════════════════════════════════════════════════════ */

.sidebar {
  width:var(--sidebar-w); height:100vh; position:fixed; top:0; left:0; z-index:40;
  display:flex; flex-direction:column;
  background:var(--bg2); border-right:1px solid var(--border);
  overflow-y:auto; overscroll-behavior:contain;
  transition:transform .25s cubic-bezier(.16,1,.3,1);
}
.sidebar::-webkit-scrollbar { width:6px; }
.sidebar::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }

.sidebar-logo { padding:20px 18px 14px; }
.sidebar-logo a { display:flex; align-items:center; gap:11px; color:inherit; }
.logo-icon {
  width:33px; height:33px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px; border:1px solid rgba(167,139,250,.28);
  background:linear-gradient(150deg,rgba(139,92,246,.35),rgba(79,70,229,.18));
  color:var(--primary-ll); font-size:12px; font-weight:700; letter-spacing:.02em;
  box-shadow:0 0 22px -7px rgba(139,92,246,.75);
}
.logo-text { font-size:13.5px; font-weight:600; letter-spacing:-.01em; color:var(--text); }
.logo-sub { font-size:9.5px; font-weight:500; letter-spacing:.17em; text-transform:uppercase; color:var(--dim); margin-top:2px; }

.sidebar-back { padding:0 18px 12px; }
.sidebar-back a {
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; color:var(--dim);
}
.sidebar-back a:hover { color:var(--text); }

.sidebar-nav { flex:1; padding:6px 10px 26px; }

.nav-section { margin-bottom:6px; }
.nav-section-title {
  padding:15px 11px 6px;
  font-size:9.5px; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--dim);
}

.nav-link {
  position:relative; display:flex; align-items:center; gap:8px;
  padding:7px 11px; margin-bottom:1px; border-radius:8px;
  font-size:13.5px; font-weight:450; color:var(--muted);
  transition:color .18s ease, background .18s ease;
}
.nav-link:hover { color:var(--text); background:rgba(255,255,255,.04); }

/* The same active marker the Command Center nav uses. */
.nav-link.active {
  color:var(--text);
  background:linear-gradient(90deg,rgba(139,92,246,.15),rgba(139,92,246,.03));
  box-shadow:inset 0 0 18px -8px rgba(139,92,246,.5);
}
.nav-link.active::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:2px; height:14px; border-radius:0 2px 2px 0;
  background:var(--primary-l); box-shadow:0 0 8px var(--primary);
}

.nav-badge {
  margin-left:auto; padding:1px 6px; border-radius:4px;
  border:1px solid var(--border2);
  font-size:8.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dim);
}
.nav-badge.core { border-color:rgba(139,92,246,.3); background:rgba(139,92,246,.1); color:var(--primary-ll); }
.nav-badge.new  { border-color:rgba(52,211,153,.3); background:rgba(52,211,153,.1); color:var(--success); }

.version-info { padding:14px 18px; border-top:1px solid var(--border); }
.version-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:100px;
  border:1px solid var(--border2); background:var(--surface);
  font-family:var(--mono); font-size:10.5px; color:var(--muted);
}

/* ══ LAYOUT ════════════════════════════════════════════════════════════ */

.main {
  margin-left:var(--sidebar-w); flex:1; min-width:0;
  display:grid; grid-template-columns:minmax(0,1fr) var(--aside-w);
  gap:44px; align-items:start;
  padding:44px 44px 100px;
}

.content { min-width:0; max-width:var(--measure); }

/* ══ TYPE ══════════════════════════════════════════════════════════════ */

.breadcrumb {
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  margin-bottom:14px;
  font-size:11px; font-weight:500; letter-spacing:.09em; text-transform:uppercase;
  color:var(--dim);
}
.breadcrumb a { color:var(--dim); }
.breadcrumb a:hover { color:var(--primary-ll); }

.page-header { margin-bottom:36px; padding-bottom:26px; border-bottom:1px solid var(--border); }

h1 {
  font-size:clamp(28px,4vw,36px); font-weight:500;
  letter-spacing:-.032em; line-height:1.1; color:var(--text);
  text-wrap:balance;
}
.lead { margin-top:12px; font-size:16px; line-height:1.65; color:var(--muted); max-width:66ch; }

h2 {
  margin:52px 0 14px; padding-top:4px;
  font-size:21px; font-weight:500; letter-spacing:-.022em; line-height:1.25; color:var(--text);
  scroll-margin-top:84px;
}
h2:first-of-type { margin-top:0; }

h3 {
  margin:32px 0 10px;
  font-size:15.5px; font-weight:600; letter-spacing:-.012em; color:var(--text);
  scroll-margin-top:84px;
}

p { margin-bottom:15px; color:var(--muted); line-height:1.72; }
strong { color:var(--text); font-weight:600; }

ul, ol { margin:0 0 16px 2px; padding-left:18px; }
li { margin-bottom:7px; color:var(--muted); line-height:1.7; }
li::marker { color:var(--dim); }

/* Inline code sits inside prose, so it stays quiet. */
code {
  padding:1.5px 6px; border:1px solid var(--border); border-radius:5px;
  background:rgba(255,255,255,.045);
  font-family:var(--mono); font-size:.855em; color:var(--primary-ll);
  word-break:break-word;
}

/* ══ CODE BLOCKS ═══════════════════════════════════════════════════════ */
/* The reason people open API docs. Given a real frame, a darker ground
   than the page, and room to breathe. */

pre {
  position:relative;
  margin:0 0 18px; padding:15px 17px;
  border:1px solid var(--border); border-radius:11px;
  background:#020204;
  overflow-x:auto;
  font-family:var(--mono); font-size:12.5px; line-height:1.7;
  color:#CFD3E8;
  tab-size:2;
}
pre::-webkit-scrollbar { height:7px; }
pre::-webkit-scrollbar-thumb { background:var(--border2); border-radius:4px; }
pre code {
  padding:0; border:0; background:none; border-radius:0;
  font-size:inherit; color:inherit; word-break:normal;
}

/* Copy control, injected by docs.js. */
.code-copy {
  position:absolute; top:8px; right:8px; z-index:2;
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 9px; border:1px solid var(--border2); border-radius:6px;
  background:rgba(12,12,18,.9);
  font-family:var(--font); font-size:10.5px; color:var(--muted);
  cursor:pointer; opacity:0;
  transition:opacity .18s ease, color .18s ease, border-color .18s ease, background .18s ease;
}
pre:hover .code-copy, .code-copy:focus-visible { opacity:1; }
.code-copy:hover { color:var(--text); border-color:rgba(139,92,246,.45); background:rgba(139,92,246,.14); }
.code-copy.done { opacity:1; color:var(--success); border-color:rgba(52,211,153,.4); background:rgba(52,211,153,.12); }

/* ── Language tabs ─────────────────────────────────────────────────── */

.code-tabs { margin-bottom:22px; }
.tab-buttons {
  display:flex; gap:3px; flex-wrap:wrap;
  padding:4px; margin-bottom:9px;
  border:1px solid var(--border); border-radius:9px; background:var(--bg2);
}
.tab-btn {
  padding:6px 13px; border:0; border-radius:6px; background:none;
  font-family:inherit; font-size:12px; font-weight:500; color:var(--muted);
  cursor:pointer; transition:color .16s ease, background .16s ease;
}
.tab-btn:hover { color:var(--text); background:rgba(255,255,255,.05); }
.tab-btn.active { color:var(--primary-ll); background:rgba(139,92,246,.16); }

.tab-panel { display:none; }
.tab-panel.active { display:block; animation:fadeIn .2s ease; }
.tab-panel pre { margin-bottom:0; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* ══ ENDPOINTS ═════════════════════════════════════════════════════════ */

.endpoint-header {
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  margin:22px 0 10px; padding:11px 14px;
  border:1px solid var(--border); border-radius:10px; background:var(--bg2);
}
.endpoint-url {
  font-family:var(--mono); font-size:13px; font-weight:500; color:var(--text);
  word-break:break-all;
}
.endpoint-desc { margin-bottom:14px; font-size:13.5px; color:var(--muted); }

/* Method badges. Semantic hues, deliberately not the violet accent, so a
   destructive verb can never read as a link. */
.badge {
  display:inline-flex; align-items:center; flex-shrink:0;
  padding:3px 9px; border-radius:5px;
  border:1px solid var(--border2); background:var(--surface);
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
}
.badge.get    { border-color:rgba(34,211,238,.32); background:rgba(34,211,238,.11); color:#67E8F9; }
.badge.post   { border-color:rgba(52,211,153,.32); background:rgba(52,211,153,.11); color:var(--success); }
.badge.put    { border-color:rgba(251,191,36,.32); background:rgba(251,191,36,.11); color:var(--warning); }
.badge.delete { border-color:rgba(244,63,94,.32);  background:rgba(244,63,94,.11);  color:var(--error); }
.badge.required { border-color:rgba(244,63,94,.28); background:rgba(244,63,94,.09); color:#FDA4AF; text-transform:none; }
.badge.optional { border-color:var(--border2); background:var(--surface); color:var(--dim); text-transform:none; }

.badge-status { font-family:var(--mono); font-weight:600; }
.s400, .s401 { color:var(--warning); }
.s403, .s404, .s409, .s429 { color:#FDBA74; }
.s500 { color:var(--error); }

/* ══ TABLES ════════════════════════════════════════════════════════════ */

.table-wrap {
  margin:0 0 20px; border:1px solid var(--border); border-radius:11px;
  overflow-x:auto; background:var(--bg2);
}
.table-wrap table { margin:0; border:0; }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
th {
  padding:10px 14px; text-align:left; white-space:nowrap;
  border-bottom:1px solid var(--border2);
  font-size:10px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--dim);
}
td {
  padding:11px 14px; border-bottom:1px solid var(--border);
  color:var(--muted); vertical-align:top; line-height:1.65;
}
td:first-child { color:var(--text); font-family:var(--mono); font-size:12.5px; white-space:nowrap; }
tr:last-child td { border-bottom:0; }

/* ══ CALLOUTS ══════════════════════════════════════════════════════════ */
/* A left rule rather than a filled panel - the note stays part of the
   reading column instead of interrupting it. */

.callout {
  margin:20px 0; padding:14px 17px;
  border:1px solid var(--border); border-left:2px solid var(--border2);
  border-radius:0 10px 10px 0; background:var(--surface);
}
.callout p { margin:0; font-size:13.5px; line-height:1.7; }
.callout p + p { margin-top:9px; }
.callout strong { color:var(--text); }

.callout.tip     { border-left-color:var(--success); background:rgba(52,211,153,.055); }
.callout.info    { border-left-color:var(--accent);  background:rgba(34,211,238,.055); }
.callout.warning { border-left-color:var(--warning); background:rgba(251,191,36,.055); }
.callout.danger  { border-left-color:var(--error);   background:rgba(244,63,94,.055); }

/* ══ STEPS ═════════════════════════════════════════════════════════════ */
/* Numbered because installation genuinely is a sequence: the order carries
   information the reader needs. */

.step { display:flex; gap:15px; margin-bottom:26px; }
.step-number {
  width:27px; height:27px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(139,92,246,.32); border-radius:50%;
  background:rgba(139,92,246,.1);
  font-size:12px; font-weight:600; color:var(--primary-ll);
  font-variant-numeric:tabular-nums;
}
.step-content { flex:1; min-width:0; }
.step-content h3 { margin:3px 0 9px; font-size:15px; }

.effects-list { list-style:none; margin:12px 0 16px; padding:0; }
.effects-list li { position:relative; padding-left:19px; margin-bottom:8px; font-size:13.5px; }
/* Drawn tick: renders identically everywhere and sits on the text baseline. */
.effects-list li::before {
  content:''; position:absolute; left:1px; top:.5em;
  width:9px; height:5px;
  border-left:1.5px solid var(--success); border-bottom:1.5px solid var(--success);
  border-radius:1px; transform:rotate(-45deg);
}

/* ══ SDK CARDS ═════════════════════════════════════════════════════════ */

.sdk-card {
  display:block; padding:18px;
  border:1px solid var(--border); border-radius:12px; background:var(--bg2);
  color:inherit;
  transition:border-color .22s ease, background .22s ease, transform .22s cubic-bezier(.16,1,.3,1);
}
.sdk-card:hover { border-color:rgba(139,92,246,.32); background:var(--bg3); transform:translateY(-1px); }
.sdk-card h3 { margin:0 0 6px; font-size:15px; }
.sdk-card p { margin:0; font-size:13px; line-height:1.6; }
.sdk-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.sdk-tag {
  padding:2px 8px; border:1px solid var(--border2); border-radius:100px;
  background:var(--surface);
  font-family:var(--mono); font-size:10px; color:var(--dim);
}

/* ══ ON THIS PAGE ══════════════════════════════════════════════════════ */

.aside { position:sticky; top:44px; align-self:start; }
.on-this-page { padding-left:13px; border-left:1px solid var(--border); }
.aside h3, .on-this-page h3 {
  margin:0 0 11px;
  font-size:9.5px; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--dim);
}
.on-this-page a {
  display:block; padding:5px 0;
  font-size:12.5px; line-height:1.45; color:var(--dim);
  border-left:1px solid transparent; margin-left:-14px; padding-left:13px;
  transition:color .18s ease, border-color .18s ease;
}
.on-this-page a.sub { padding-left:25px; font-size:12px; }
.on-this-page a:hover { color:var(--text); }
/* Set by docs.js as you scroll. */
.on-this-page a.active { color:var(--primary-ll); border-left-color:var(--primary-l); }
.aside p { font-size:12px; line-height:1.6; color:var(--dim); }
.aside pre { margin-top:12px; font-size:11px; padding:11px 12px; }

/* ══ MOBILE CHROME ═════════════════════════════════════════════════════ */

.mobile-topbar {
  display:none; align-items:center; gap:12px;
  position:sticky; top:0; z-index:31; height:54px; padding:0 14px;
  padding-top:env(safe-area-inset-top,0px);
  background:rgba(5,5,7,.9); border-bottom:1px solid var(--border);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.mobile-title { font-size:14px; font-weight:500; color:var(--text); }

.hamburger {
  width:32px; height:32px; flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  border:0; border-radius:7px; background:none; cursor:pointer;
}
.hamburger:hover { background:rgba(255,255,255,.05); }
.hamburger span {
  display:block; width:16px; height:1.5px; border-radius:2px; background:var(--text);
  transition:transform .24s cubic-bezier(.16,1,.3,1), opacity .18s ease;
}
.hamburger.open span:nth-child(1) { transform:translateY(5.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-5.5px) rotate(-45deg); }

.sidebar-overlay {
  display:none; position:fixed; inset:0; z-index:35;
  background:rgba(3,3,5,.68);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.sidebar-overlay.show { display:block; }

/* ══ RESPONSIVE ════════════════════════════════════════════════════════ */

@media (max-width:1200px) {
  .main { grid-template-columns:minmax(0,1fr); gap:0; padding:38px 34px 90px; }
  .aside { display:none; }
  .content { max-width:78ch; }
}

@media (max-width:900px) {
  /* body is a flex row for the fixed sidebar; once the mobile bar appears
     it would join that row and steal a column, so the row is dropped. */
  body { display:block; }
  .mobile-topbar { display:flex; }
  .sidebar {
    width:min(300px,86vw); transform:translateX(-100%);
    z-index:50; box-shadow:6px 0 40px rgba(0,0,0,.75);
  }
  .sidebar.open { transform:none; }
  .main { margin-left:0; width:100%; padding:26px 18px 70px; }
  .content { max-width:100%; }
  h1 { font-size:26px; }
  h2 { margin-top:40px; font-size:19px; }
}

@media (max-width:480px) {
  .main { padding:20px 14px 60px; }
  h1 { font-size:23px; }
  .lead { font-size:14.5px; }
  pre { font-size:11.5px; padding:13px 14px; border-radius:9px; }
  .endpoint-header { padding:10px 12px; gap:9px; }
  .endpoint-url { font-size:12px; }
  .step { gap:12px; }
  /* Always visible on touch, where there is no hover to reveal it. */
  .code-copy { opacity:1; }
  table { font-size:12.5px; }
  th, td { padding:9px 11px; }
}

@media (hover:none) { .code-copy { opacity:1; } }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}