/* ============================================================
   MCP WIKI — Docs / API reference
   ============================================================ */

.docs-body { background: var(--bg); }

/* sub-nav search bar under main nav */
.docs-sub {
  position: sticky; top: 70px; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.docs-sub-inner { display:flex; align-items:center; gap:16px; height:56px; }
.docs-search {
  display:flex; align-items:center; gap:10px; flex:1; max-width: 520px;
  background: var(--surface-2); border:1px solid var(--line); border-radius:10px;
  padding: 9px 13px; color: var(--muted); font-size:14px;
}
.docs-search svg { width:16px; height:16px; }
.docs-search .k { margin-left:auto; font-family:var(--mono); font-size:11px; border:1px solid var(--line); border-radius:5px; padding:2px 6px; background: var(--bg); }
.docs-sub .api-base { margin-left:auto; font-family:var(--mono); font-size:12.5px; color: var(--muted); display:flex; align-items:center; gap:8px; }
.docs-sub .api-base b { color: var(--ink); }

/* layout: sidebar | article | code */
.docs-layout {
  display:grid;
  grid-template-columns: 256px minmax(0,1fr) 400px;
  align-items: start;
  max-width: 1480px; margin: 0 auto;
}

/* ---------- sidebar ---------- */
.docs-side {
  position: sticky; top: 126px; align-self:start;
  height: calc(100vh - 126px); overflow-y: auto;
  padding: 30px 18px 40px 32px;
  border-right: 1px solid var(--line);
}
.docs-side::-webkit-scrollbar { width:8px; } .docs-side::-webkit-scrollbar-thumb { background: var(--line); border-radius:8px; }
.side-group { margin-bottom: 26px; }
.side-group h5 {
  font-family: var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--muted); margin-bottom: 10px; padding-left: 10px;
}
.side-link {
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding: 7px 10px; border-radius: 8px; font-size:14.5px; color: var(--ink-soft);
  transition: background .15s, color .15s; cursor:pointer;
}
.side-link > span:last-child { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-link:hover { background: var(--bg-2); color: var(--ink); }
.side-link[data-active="true"] { background: color-mix(in srgb, var(--terra) 12%, transparent); color: var(--terra); font-weight:600; }
.side-link .verb {
  font-family: var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.05em;
  padding: 2px 5px; border-radius:4px; border:1px solid currentColor; opacity:.85;
}
.side-link .verb.get { color: var(--olive); } .side-link .verb.post { color: var(--indigo); }

/* ---------- article ---------- */
.docs-article { padding: 44px 56px 100px; min-width: 0; }
.doc-section { display:none; }
.doc-section[data-show="true"] { display:block; opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .doc-section[data-show="true"] { animation: docfade .35s ease; }
}
@keyframes docfade { from{ opacity:0; transform: translateY(8px);} to{ opacity:1; transform:none;} }

.doc-bc { font-family:var(--mono); font-size:12.5px; color: var(--muted); margin-bottom: 16px; }
.doc-bc b { color: var(--ink-soft); }
.doc-h1 { font-family: var(--serif); font-weight:400; font-size: clamp(36px,4vw,52px); line-height:1.02; letter-spacing:-.01em; }
.doc-lead { font-size: 18px; color: var(--ink-soft); margin-top: 16px; max-width: 62ch; line-height:1.55; }

.endpoint-pill {
  display:inline-flex; align-items:center; gap:12px; margin-top:24px;
  background: var(--surface); border:1px solid var(--line); border-radius:10px;
  padding: 10px 14px; font-family: var(--mono); font-size:14px; width:100%; max-width: 100%; overflow-x:auto;
}
.endpoint-pill .verb { font-weight:600; font-size:12px; padding:4px 9px; border-radius:6px; color:#fff; }
.endpoint-pill .verb.get { background:#6E7B3F; } .endpoint-pill .verb.post { background:#4A6BA8; }
.endpoint-pill .path { color: var(--ink); white-space:nowrap; }
.endpoint-pill .copy { margin-left:auto; color: var(--muted); cursor:pointer; flex:none; }
.endpoint-pill .copy:hover { color: var(--terra); }

.cost-note {
  display:flex; align-items:center; gap:10px; margin-top:18px;
  background: color-mix(in srgb, var(--terra) 8%, var(--surface));
  border:1px solid color-mix(in srgb, var(--terra) 26%, var(--line));
  border-radius:10px; padding: 12px 16px; font-size:14.5px; color: var(--ink-soft);
}
.cost-note b { color: var(--terra); font-family: var(--mono); }
.cost-note svg { width:18px; height:18px; color: var(--terra); flex:none; }

.doc-h2 { font-family: var(--serif); font-weight:400; font-size: 30px; letter-spacing:-.01em; margin: 48px 0 6px; }
.doc-p { color: var(--ink-soft); font-size: 15.5px; margin-top: 12px; max-width: 64ch; line-height:1.6; }
.doc-p code, .inline-code { font-family: var(--mono); font-size:13px; background: var(--bg-2); border:1px solid var(--line); padding:1px 6px; border-radius:5px; color: var(--terra); }

/* params table */
.params { margin-top: 22px; border:1px solid var(--line); border-radius: 12px; overflow:hidden; }
.param { padding: 16px 20px; border-bottom:1px solid var(--line); }
.param:last-child { border-bottom:0; }
.param-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.param-name { font-family: var(--mono); font-size:14px; color: var(--ink); font-weight:500; }
.param-type { font-family: var(--mono); font-size:12px; color: var(--muted); }
.param-req { font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; padding:2px 7px; border-radius:999px; }
.param-req.required { color: var(--terra); background: color-mix(in srgb, var(--terra) 14%, transparent); }
.param-req.optional { color: var(--muted); background: var(--bg-2); }
.param-desc { font-size:14px; color: var(--ink-soft); margin-top:8px; line-height:1.5; }
.param-enum { margin-top:9px; display:flex; flex-wrap:wrap; gap:6px; }
.param-enum span { font-family:var(--mono); font-size:11.5px; color: var(--ink-soft); background: var(--surface-2); border:1px solid var(--line); padding:2px 7px; border-radius:5px; }

/* response fields */
.fields { margin-top: 20px; display:flex; flex-direction:column; gap:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.field { display:grid; grid-template-columns: minmax(180px, 240px) 1fr; gap:18px; padding:13px 20px; border-bottom:1px solid var(--line); }
.field:last-child { border-bottom:0; }
.field .fk { font-family: var(--mono); font-size:13px; color: var(--terra); }
.field .ft { font-family: var(--mono); font-size:11px; color: var(--muted); display:block; margin-top:3px; }
.field .fd { font-size:14px; color: var(--ink-soft); line-height:1.5; }

/* doc footer nav */
.doc-nav { display:flex; justify-content:space-between; gap:16px; margin-top: 60px; padding-top: 26px; border-top:1px solid var(--line); }
.doc-nav a { display:flex; flex-direction:column; gap:4px; padding:16px 20px; border:1px solid var(--line); border-radius:12px; min-width: 200px; transition: border-color .2s, background .2s; }
.doc-nav a:hover { border-color: var(--terra); background: var(--surface); }
.doc-nav a.next { text-align:right; margin-left:auto; }
.doc-nav .dn-label { font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color: var(--muted); }
.doc-nav .dn-title { font-size:15.5px; font-weight:600; color: var(--ink); }

/* ---------- code aside ---------- */
.docs-code { position: sticky; top: 126px; align-self:start; padding: 44px 32px 40px 0; }
.code-card { background:#211C18; border:1px solid #3A332B; border-radius:14px; overflow:hidden; box-shadow: var(--shadow); margin-bottom:18px; }
.code-head { display:flex; align-items:center; gap:4px; padding: 8px 10px; background:#1A1612; border-bottom:1px solid #322B24; }
.code-tab { font-family:var(--mono); font-size:12.5px; color:#897E70; padding:6px 12px; border-radius:7px; cursor:pointer; transition: background .15s, color .15s; }
.code-tab[data-active="true"] { color:#F0E7D9; background:#2C251F; }
.code-head .code-copy { margin-left:auto; color:#897E70; cursor:pointer; padding:6px; }
.code-head .code-copy:hover { color:#E0907A; }
.code-body { padding: 16px 18px; font-family: var(--mono); font-size:12.8px; line-height:1.75; color:#D9CFC1; overflow-x:auto; white-space:pre; }
.code-body::-webkit-scrollbar { height:8px; } .code-body::-webkit-scrollbar-thumb { background:#3A332B; border-radius:8px; }
.code-label { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); margin: 4px 0 10px; }
.resp-status { display:flex; align-items:center; gap:8px; padding: 8px 14px; background:#1A1612; border-bottom:1px solid #322B24; font-family:var(--mono); font-size:12px; color:#897E70; }
.resp-status .dot200 { width:8px; height:8px; border-radius:50%; background:#7FAE5A; }

/* JSON syntax */
.j-key { color:#7FA6D6; } .j-str { color:#A9C08A; } .j-num { color:#E0A06A; } .j-bool { color:#C98AC0; } .j-null{ color:#897E70; } .j-punc { color:#897E70; }
.c-cmd { color:#EDE3D5; } .c-flag { color:#C8A06A; } .c-str { color:#A9C08A; } .c-url { color:#7FA6D6; } .c-kw { color:#C98AC0; } .c-fn { color:#E0B36A; } .c-cm { color:#6E6256; font-style:italic; } .c-var { color:#D9CFC1; }

/* ---------- mobile doc toggle ---------- */
.docs-mobile-bar { display:none; }

@media (max-width: 1180px) {
  .docs-layout { grid-template-columns: 240px minmax(0,1fr); }
  .docs-code { position: static; padding: 0 56px 80px; grid-column: 2; }
  .docs-article { padding-bottom: 30px; }
}
@media (max-width: 820px) {
  .docs-layout { grid-template-columns: 1fr; }
  .docs-side {
    position: fixed; top:0; left:0; bottom:0; width: 300px; height:100vh; z-index: 90;
    background: var(--bg); transform: translateX(-110%); transition: transform .28s ease;
    padding-top: 26px;
  }
  .docs-side[data-open="true"] { transform: none; box-shadow: var(--shadow-lg); }
  .docs-article, .docs-code { padding-left: 20px; padding-right: 20px; }
  .docs-code { grid-column: 1; }
  .field { grid-template-columns: 1fr; gap:6px; }
  .docs-mobile-bar { display:flex; align-items:center; gap:12px; padding: 12px 20px; border-bottom:1px solid var(--line); position: sticky; top:70px; background: var(--bg); z-index:30; }
  .docs-mobile-bar button { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color: var(--ink); border:1px solid var(--line); border-radius:9px; padding:8px 13px; }
  .docs-sub { display:none; }
  .side-scrim { display:none; position:fixed; inset:0; background: rgba(20,16,12,.4); z-index:80; }
  .side-scrim[data-open="true"] { display:block; }
}