/* ════════════════════════════════════════════════════════════════════
   LIQUA · CODEX — shared documentation shell
   MIDNIGHT GRAPHITE · 7SLF Studios · THE DREWLESS
   One stylesheet for every doc page. The chrome (sidebar · topbar · TOC ·
   prev/next) is built by liqua-docs.js; a page only ships <main class="doc">.
   ════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#0a0c12; --bg2:#0c0f16; --panel:#11151e; --panel2:#161b26;
  --border:#20283a; --border2:#2b3450;
  --text:#d2d8e8; --muted:#737d96; --dim:#454b5e;
  --ice:#7dd3fc; --violet:#8b5cf6; --cyan:#38d4e6; --green:#34d399;
  --amber:#f0b429; --magenta:#e879f9; --red:#fb6a82; --cold:#38bdf8;
  --sidebar:268px; --toc:212px; --maxcol:820px;
  --mono:'JetBrains Mono','SF Mono','Consolas',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:74px}
body{
  background:var(--bg); color:var(--text);
  font:13.5px/1.65 var(--mono); letter-spacing:.012em;
  -webkit-font-smoothing:antialiased; min-height:100vh;
  background-image:radial-gradient(circle at 10% -6%,rgba(125,211,252,.05),transparent 55%),
                   radial-gradient(circle at 92% -2%,rgba(139,92,246,.045),transparent 52%);
  background-attachment:fixed;
}
::selection{background:var(--ice);color:#04121c}
a{color:var(--cyan);text-decoration:none}
a:hover{color:var(--ice)}
/* scrollbars */
*{scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:var(--border2);border:2px solid var(--bg)}
*::-webkit-scrollbar-thumb:hover{background:#3a466a}

/* ── shell grid ──────────────────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr) var(--toc);
  max-width:1440px;margin:0 auto;align-items:start}
@media(max-width:1180px){.shell{grid-template-columns:var(--sidebar) minmax(0,1fr)}}
@media(max-width:920px){.shell{grid-template-columns:1fr}}

/* ── sidebar ─────────────────────────────────────────────────────────── */
.dnav{position:sticky;top:0;height:100vh;overflow-y:auto;
  border-right:1px solid var(--border2);background:linear-gradient(180deg,#0c1018,#0a0c12 60%);
  display:flex;flex-direction:column;z-index:40}
.dnav .brand{display:flex;align-items:center;gap:11px;padding:16px 18px 14px;
  border-bottom:1px solid var(--border2);position:sticky;top:0;
  background:linear-gradient(180deg,#0c1018,#0b0e15);z-index:2}
.dnav .logo{width:15px;height:15px;background:var(--ice);box-shadow:0 0 13px rgba(125,211,252,.55);position:relative;flex:0 0 auto}
.dnav .logo::after{content:'';position:absolute;inset:4px;background:var(--bg)}
.dnav .bt{display:flex;flex-direction:column;gap:1px;min-width:0}
.dnav .bt b{color:var(--ice);font-weight:700;letter-spacing:.16em;font-size:13px}
.dnav .bt span{color:var(--muted);font-size:9px;letter-spacing:.18em;text-transform:uppercase}
.dnav .srch{padding:12px 14px 6px}
.dnav .srch input{width:100%;background:var(--bg2);border:1px solid var(--border2);color:var(--text);
  font:inherit;font-size:11px;padding:7px 10px;letter-spacing:.04em}
.dnav .srch input:focus{outline:none;border-color:var(--ice)}
.dnav .srch input::placeholder{color:var(--dim)}
.dnav .tree{padding:6px 10px 22px;flex:1}
.dnav .grp{margin-top:16px}
.dnav .grp:first-child{margin-top:6px}
.dnav .gl{color:var(--dim);font-size:9px;letter-spacing:.2em;font-weight:700;padding:4px 10px 7px;text-transform:uppercase}
.dnav a.it{display:flex;align-items:center;gap:9px;padding:6px 10px;color:var(--muted);font-size:12px;
  border-left:2px solid transparent;letter-spacing:.02em;transition:color .12s,border-color .12s,background .12s}
.dnav a.it .ic{width:14px;text-align:center;color:var(--dim);font-size:11px;flex:0 0 14px}
.dnav a.it:hover{color:var(--text);background:rgba(125,211,252,.04)}
.dnav a.it.active{color:var(--ice);border-left-color:var(--ice);background:linear-gradient(90deg,rgba(125,211,252,.09),transparent)}
.dnav a.it.active .ic{color:var(--ice)}
.dnav a.it .ext{margin-left:auto;color:var(--dim);font-size:10px}
.dnav a.it.hide{display:none}
.dnav .nores{color:var(--dim);font-size:10.5px;padding:8px 12px;display:none}
.dnav .nav-foot{border-top:1px solid var(--border);padding:12px 16px;color:var(--dim);font-size:9px;letter-spacing:.13em;line-height:1.7}
.dnav .nav-foot b{color:var(--violet)}

/* ── mobile topbar + drawer ──────────────────────────────────────────── */
.dtop{display:none;position:sticky;top:0;z-index:50;align-items:center;gap:12px;
  padding:11px 14px;border-bottom:1px solid var(--border2);background:rgba(10,12,18,.92);backdrop-filter:blur(8px)}
.dtop .ham{background:var(--bg2);border:1px solid var(--border2);color:var(--text);width:34px;height:32px;
  font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.dtop .ham:hover{border-color:var(--ice);color:var(--ice)}
.dtop .tb{color:var(--ice);font-weight:700;letter-spacing:.14em;font-size:12px}
.dtop .tcur{color:var(--muted);font-size:11px;margin-left:auto;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.backdrop{display:none;position:fixed;inset:0;background:rgba(4,6,12,.62);z-index:45;backdrop-filter:blur(2px)}
body.navopen .backdrop{display:block}

/* ── content column ──────────────────────────────────────────────────── */
.doc{min-width:0;padding:30px 44px 90px;max-width:calc(var(--maxcol) + 88px)}
.doc .crumb{color:var(--dim);font-size:10px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:14px}
.doc .crumb a{color:var(--muted)}.doc .crumb b{color:var(--cyan)}
.doc .eyebrow{color:var(--violet);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;margin-bottom:8px}
.doc h1{font-size:27px;line-height:1.25;letter-spacing:.01em;color:#eef2fb;font-weight:700;margin-bottom:10px}
.doc .lede{color:var(--muted);font-size:14px;line-height:1.7;margin-bottom:8px;max-width:68ch}
.doc h2{font-size:17px;color:var(--ice);letter-spacing:.04em;font-weight:700;margin:38px 0 12px;
  padding-bottom:8px;border-bottom:1px solid var(--border2);scroll-margin-top:74px}
.doc h3{font-size:13.5px;color:var(--cold);letter-spacing:.05em;font-weight:700;margin:26px 0 9px;text-transform:uppercase;scroll-margin-top:74px}
.doc h4{font-size:12.5px;color:var(--text);letter-spacing:.04em;font-weight:700;margin:18px 0 7px}
.doc h2 .anchor,.doc h3 .anchor{opacity:0;color:var(--dim);font-weight:400;margin-left:8px;font-size:.8em;transition:opacity .12s}
.doc h2:hover .anchor,.doc h3:hover .anchor{opacity:1}
.doc p{margin:11px 0;color:var(--text);max-width:74ch}
.doc p.muted,.doc .muted{color:var(--muted)}
.doc strong{color:#e7ecf7;font-weight:700}
.doc em{color:var(--cold);font-style:normal}
.doc ul,.doc ol{margin:11px 0 11px 4px;padding-left:20px;max-width:74ch}
.doc li{margin:6px 0;color:var(--text)}
.doc li::marker{color:var(--violet)}
.doc ul.tight li,.doc ol.tight li{margin:3px 0}
.doc hr{border:none;border-top:1px solid var(--border);margin:30px 0}

/* inline code + pre */
.doc code{font-family:var(--mono);font-size:.86em;background:#070a10;border:1px solid var(--border);
  color:var(--ice);padding:1.5px 6px;letter-spacing:.01em;white-space:nowrap}
.doc h2 code,.doc h3 code,.doc h4 code{font-size:.92em}
.doc pre{position:relative;background:#070a10;border:1px solid var(--border2);margin:14px 0;
  overflow-x:auto;font-size:12.5px;line-height:1.62}
.doc pre code{background:none;border:none;color:var(--text);padding:0;white-space:pre;display:block;padding:13px 15px}
.doc pre .cmt{color:var(--dim)}
.doc pre .tok{color:var(--cyan)}      /* command / keyword */
.doc pre .flg{color:var(--amber)}     /* flag */
.doc pre .str{color:var(--green)}     /* string / value */
.doc pre .vi{color:var(--violet)}
.doc pre .out{color:var(--muted)}     /* program output */
.doc pre .ic{color:var(--ice)}
.copybtn{position:absolute;top:7px;right:7px;background:var(--bg2);border:1px solid var(--border2);
  color:var(--muted);font:inherit;font-size:9.5px;letter-spacing:.1em;padding:3px 8px;cursor:pointer;
  opacity:0;transition:opacity .12s,color .12s,border-color .12s;z-index:2}
.doc pre:hover .copybtn{opacity:1}
.copybtn:hover{border-color:var(--ice);color:var(--ice)}
.copybtn.done{border-color:var(--green);color:var(--green);opacity:1}

/* callouts */
.callout{border:1px solid var(--border2);border-left-width:3px;background:var(--panel);
  padding:11px 15px;margin:16px 0;font-size:12.5px;line-height:1.62}
.callout .ct{font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:10px;display:block;margin-bottom:5px}
.callout p{margin:6px 0;max-width:none}
.callout.note{border-left-color:var(--cold)}.callout.note .ct{color:var(--cold)}
.callout.tip{border-left-color:var(--green)}.callout.tip .ct{color:var(--green)}
.callout.warn{border-left-color:var(--amber);background:rgba(240,180,41,.04)}.callout.warn .ct{color:var(--amber)}
.callout.danger{border-left-color:var(--red);background:rgba(251,106,130,.05)}.callout.danger .ct{color:var(--red)}
.callout.spec{border-left-color:var(--violet);background:rgba(139,92,246,.05)}.callout.spec .ct{color:var(--violet)}

/* tables */
.doc table{width:100%;border-collapse:collapse;margin:15px 0;font-size:12px}
.doc th{color:var(--muted);text-align:left;padding:8px 12px;border-bottom:1px solid var(--border2);
  text-transform:uppercase;font-size:9.5px;letter-spacing:.1em;font-weight:700;background:var(--bg2)}
.doc td{padding:7px 12px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--text)}
.doc td code{white-space:nowrap}
.doc tr:hover td{background:rgba(125,211,252,.025)}
.doc .tw{overflow-x:auto;margin:15px 0;border:1px solid var(--border)}
.doc .tw table{margin:0}

/* pills / tags / kbd */
.pill{display:inline-block;font-size:9.5px;letter-spacing:.08em;border:1px solid var(--border2);
  color:var(--muted);padding:2px 8px;text-transform:uppercase;font-weight:700;vertical-align:middle}
.pill.ice{color:var(--ice);border-color:#2a5a73}
.pill.green{color:var(--green);border-color:#1f5a47}
.pill.amber{color:var(--amber);border-color:#5a4a18}
.pill.vi{color:var(--violet);border-color:#3a2d63}
.pill.red{color:var(--red);border-color:#5a2230}
kbd{font-family:var(--mono);font-size:.82em;background:var(--panel2);border:1px solid var(--border2);
  border-bottom-width:2px;padding:1px 6px;color:var(--text)}

/* method badge (API) */
.m{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.07em;padding:2px 8px;min-width:48px;text-align:center;color:#04121c}
.m.get{background:var(--green)}.m.post{background:var(--amber)}.m.sse{background:var(--violet);color:#fff}
.m.tcp{background:var(--cyan)}.m.rpc{background:var(--ice)}
.ep{border:1px solid var(--border2);background:var(--panel);margin:13px 0}
.ep .eh{display:flex;align-items:center;gap:11px;padding:10px 14px;border-bottom:1px solid var(--border);flex-wrap:wrap;background:var(--bg2)}
.ep .eh .pa{color:var(--ice);font-size:13px;font-weight:700;letter-spacing:.02em;word-break:break-all}
.ep .eh .pt{color:var(--muted);font-size:11px;margin-left:auto}
.ep .eb{padding:12px 15px}
.ep .eb p:first-child{margin-top:0}.ep .eb p:last-child{margin-bottom:0}

/* step list */
.steps{counter-reset:step;list-style:none;padding:0;margin:18px 0}
.steps>li{position:relative;padding:0 0 22px 42px;margin:0;counter-increment:step;border-left:1px solid var(--border2)}
.steps>li:last-child{border-left-color:transparent;padding-bottom:0}
.steps>li::before{content:counter(step);position:absolute;left:-15px;top:-2px;width:28px;height:28px;
  background:var(--bg);border:1px solid var(--violet);color:var(--violet);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.steps>li h4{margin:2px 0 4px;color:var(--ice);text-transform:none;font-size:13.5px}
.steps>li>p:first-of-type{margin-top:0}

/* cards grid (index) */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:13px;margin:18px 0}
.card{display:block;border:1px solid var(--border2);background:var(--panel);padding:15px 16px;transition:border-color .14s,transform .14s,box-shadow .14s}
.card:hover{border-color:var(--ice);transform:translateY(-2px);box-shadow:0 8px 24px -14px rgba(125,211,252,.4)}
.card .ci{font-size:18px;margin-bottom:9px;display:block}
.card .ch{color:var(--ice);font-weight:700;letter-spacing:.05em;font-size:13.5px;margin-bottom:5px;display:flex;align-items:center;gap:8px}
.card .cd{color:var(--muted);font-size:11.5px;line-height:1.55}
.card .cmeta{margin-top:9px;color:var(--dim);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.card.soon{opacity:.62}.card.soon:hover{transform:none;border-color:var(--border2);box-shadow:none;cursor:default}

/* key-value spec strip */
.kvs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);margin:16px 0}
.kvs .kv{background:var(--panel);padding:11px 13px}
.kvs .kv .k{color:var(--dim);font-size:9px;letter-spacing:.13em;text-transform:uppercase}
.kvs .kv .v{color:var(--ice);font-size:15px;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums}
.kvs .kv .v.sm{font-size:12px;word-break:break-all}

/* prev / next */
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:46px;padding-top:22px;border-top:1px solid var(--border2)}
.prevnext a{border:1px solid var(--border2);background:var(--panel);padding:12px 15px;display:flex;flex-direction:column;gap:3px;transition:border-color .14s}
.prevnext a:hover{border-color:var(--ice)}
.prevnext a.nx{text-align:right;grid-column:2}
.prevnext a .pl{color:var(--dim);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase}
.prevnext a .pv{color:var(--ice);font-weight:700;font-size:13px}
.prevnext a.solo-nx{grid-column:2}

/* ── TOC right rail ──────────────────────────────────────────────────── */
.dtoc{position:sticky;top:0;height:100vh;overflow-y:auto;padding:34px 18px 40px;font-size:11.5px}
.dtoc .tl{color:var(--dim);font-size:9px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;margin-bottom:11px}
.dtoc a{display:block;color:var(--muted);padding:4px 0 4px 12px;border-left:1px solid var(--border);line-height:1.45;transition:color .12s,border-color .12s}
.dtoc a.h3{padding-left:24px;font-size:11px;color:var(--dim)}
.dtoc a:hover{color:var(--text)}
.dtoc a.cur{color:var(--ice);border-left-color:var(--ice)}
@media(max-width:1180px){.dtoc{display:none}}

/* ── footer brand ────────────────────────────────────────────────────── */
.doc-foot{color:var(--dim);font-size:10px;letter-spacing:.12em;margin-top:34px;line-height:1.8}
.doc-foot b{color:var(--violet)}

/* ── responsive: drawer mode ─────────────────────────────────────────── */
@media(max-width:920px){
  .dtop{display:flex}
  .dnav{position:fixed;top:0;left:0;width:min(86vw,308px);transform:translateX(-102%);
    transition:transform .22s cubic-bezier(.4,0,.2,1);box-shadow:0 0 40px rgba(0,0,0,.6)}
  body.navopen .dnav{transform:translateX(0)}
  .doc{padding:22px 18px 80px}
  .doc h1{font-size:23px}
}
@media(max-width:560px){
  .doc{padding:18px 14px 70px}
  .doc h1{font-size:20px}
  .prevnext{grid-template-columns:1fr}
  .prevnext a.nx,.prevnext a.solo-nx{grid-column:1;text-align:left}
  .cards{grid-template-columns:1fr}
  .kvs{grid-template-columns:1fr 1fr}
}