/* =================================================================
   REIzer /docs/ — developer-portal layout
   Two-column docs shell: sticky sidebar nav + content column, plus
   the shared pieces every docs page uses (tables, formula blocks,
   code samples, method/access badges, endpoint cards, FAQ).
   Loads AFTER styles.css + theme.css and leans on their variables;
   every var() carries a fallback so the pages degrade gracefully.
================================================================= */

.docs-shell{
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:48px;
  max-width:1120px;
  margin:0 auto;
  padding:36px 24px 72px;
}

/* ---- sidebar ---- */
.docs-side{position:relative}
.docs-side-inner{position:sticky;top:88px}
.docs-side-h{
  font-family:'Space Mono',monospace;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  opacity:.55;margin:22px 0 8px;
}
.docs-side-h:first-child{margin-top:0}
.docs-nav ul{list-style:none;margin:0 0 4px;padding:0}
.docs-nav li{margin:0}
.docs-nav a{
  display:block;padding:6px 10px;border-radius:8px;
  font-family:'Space Grotesk',sans-serif;font-size:.92rem;
  color:var(--ink,#0a1a10);text-decoration:none;border:0;
}
.docs-nav a:hover{background:rgba(10,26,16,.06)}
.docs-nav a.on{
  background:var(--ink-2,#1c2b22);color:#fff;font-weight:600;
}
html[data-theme="dark"] .docs-nav a:hover,
html[data-theme="midnight"] .docs-nav a:hover{background:rgba(255,255,255,.08)}

/* mobile: sidebar collapses into a <details> disclosure above content */
.docs-side-m{display:none}
@media (max-width:900px){
  .docs-shell{grid-template-columns:minmax(0,1fr);gap:0;padding:20px 16px 56px}
  .docs-side{display:none}
  .docs-side-m{
    display:block;margin:0 0 20px;
    border:1px solid var(--line,rgba(10,26,16,.14));border-radius:12px;
  }
  .docs-side-m summary{
    cursor:pointer;padding:12px 16px;
    font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.95rem;
    list-style:none;
  }
  .docs-side-m summary::-webkit-details-marker{display:none}
  .docs-side-m summary::after{content:"▾";float:right;opacity:.6}
  .docs-side-m[open] summary::after{content:"▴"}
  .docs-side-m .docs-nav{padding:0 10px 12px}
}

/* ---- content column ---- */
.docs-shell .doc-page{margin:0;padding:0;max-width:none}

/* status pill (e.g. "In development") */
.doc-pill{
  display:inline-block;padding:4px 12px;border-radius:999px;
  font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid var(--line,rgba(10,26,16,.2));
  background:rgba(10,26,16,.05);margin:0 0 14px;
}
html[data-theme="dark"] .doc-pill,
html[data-theme="midnight"] .doc-pill{background:rgba(255,255,255,.07)}

/* ---- tables ---- */
.doc-table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.94rem}
.doc-table th,.doc-table td{
  padding:9px 12px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line,rgba(10,26,16,.14));
}
.doc-table th{font-family:'Space Grotesk',sans-serif;font-weight:600}
.doc-table-wrap{overflow-x:auto}

/* ---- formula + code blocks ---- */
.formula,.doc-code{
  font-family:'Space Mono',monospace;font-size:.86rem;line-height:1.55;
  padding:14px 18px;border-radius:12px;margin:14px 0;overflow-x:auto;
  white-space:pre;
}
.formula{background:rgba(10,26,16,.05)}
.doc-code{
  background:var(--ink-2,#16211b);color:#e8f0ea;
  border:1px solid rgba(0,0,0,.25);
}
.doc-code .c-k{color:#9be89d}        /* keys / keywords: brand-green tint */
.doc-code .c-s{color:#d7c9f0}        /* strings */
.doc-code .c-c{color:#8fa398;font-style:italic}  /* comments */
.doc-code-label{
  font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;opacity:.6;margin:16px 0 -8px;
}
html[data-theme="dark"] .formula,
html[data-theme="midnight"] .formula{background:rgba(255,255,255,.07)}

/* ---- method + access badges ---- */
.b{
  display:inline-block;padding:2px 8px;border-radius:6px;
  font-family:'Space Mono',monospace;font-size:.7rem;font-weight:700;
  letter-spacing:.05em;vertical-align:1px;
}
.b-get{background:rgba(10,26,16,.08);color:var(--ink,#0a1a10)}
.b-post{background:var(--ink-2,#1c2b22);color:#fff}
.b-free{background:rgba(126,232,106,.22);color:var(--ink,#0a1a10)}
.b-key{background:rgba(10,26,16,.08);color:var(--ink,#0a1a10);border:1px solid var(--line,rgba(10,26,16,.2))}
html[data-theme="dark"] .b-get,html[data-theme="midnight"] .b-get,
html[data-theme="dark"] .b-key,html[data-theme="midnight"] .b-key{color:var(--ink,#e8f0ea)}

/* ---- endpoint rows ---- */
.ep{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
  padding:12px 2px;border-bottom:1px solid var(--line,rgba(10,26,16,.12));
}
.ep:last-child{border-bottom:0}
.ep-path{font-family:'Space Mono',monospace;font-size:.88rem;font-weight:700}
.ep-desc{flex:1 1 260px;font-size:.9rem;opacity:.85;margin:0}

/* ---- cards (features, use cases) ---- */
.docs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:22px 0}
.docs-card{
  border:1px solid var(--line,rgba(10,26,16,.14));border-radius:12px;
  padding:18px 20px;background:var(--surface,transparent);
}
.docs-card h3{margin:0 0 6px;font-family:'Space Grotesk',sans-serif;font-size:1.02rem}
.docs-card p{margin:0;font-size:.92rem}

/* ---- stat row (API hero) ---- */
.docs-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin:24px 0}
.docs-stat{border-left:3px solid var(--accent,#7ee86a);padding:2px 0 2px 14px}
.docs-stat b{display:block;font-family:'Space Grotesk',sans-serif;font-size:1.3rem;line-height:1.2}
.docs-stat span{font-size:.82rem;opacity:.75}

/* ---- glossary ---- */
dl.glossary{margin:16px 0}
dl.glossary dt{font-family:'Space Grotesk',sans-serif;font-weight:600;margin-top:16px}
dl.glossary dd{margin:4px 0 0 0;font-size:.95rem}

/* ---- FAQ ---- */
.doc-faq{margin:10px 0}
.doc-faq details{border-bottom:1px solid var(--line,rgba(10,26,16,.12));padding:4px 0}
.doc-faq summary{
  cursor:pointer;padding:10px 0;
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.98rem;
}
.doc-faq p{margin:2px 0 14px;font-size:.94rem}