/* ============================================================
   AlwaysON — Docs. Layered on top of site.css (tokens, .top, .ribbon,
   .pulse, .brand all inherited). This file owns the docs shell only:
   sticky sidebar nav + reading column + doc components.
   ============================================================ */

/* ---- shell ---- */
.docs{max-width:1240px;margin:0 auto;padding:0 22px;
  display:grid;grid-template-columns:236px minmax(0,1fr);gap:44px;align-items:start}
@media(max-width:1080px){.docs{grid-template-columns:1fr;gap:0}}

/* ---- sidebar nav ---- */
.dnav{position:sticky;top:58px;align-self:start;max-height:calc(100vh - 70px);overflow-y:auto;
  padding:26px 0 40px;font-size:13.5px;scrollbar-width:thin}
.dnav::-webkit-scrollbar{width:6px}.dnav::-webkit-scrollbar-thumb{background:var(--rule);border-radius:3px}
.dnav .grp{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim-2);margin:20px 0 8px;padding-left:12px}
.dnav .grp:first-child{margin-top:0}
.dnav a{display:block;padding:5px 12px;color:var(--dim);border-left:2px solid transparent;
  line-height:1.4;transition:color .12s,border-color .12s}
.dnav a:hover{color:var(--paper)}
.dnav a.on{color:var(--lime);border-left-color:var(--lime);font-weight:500}

/* mobile: sidebar becomes a collapsible drawer under the top bar */
.dnav-tog{display:none}
@media(max-width:1080px){
  .dnav{position:sticky;top:49px;z-index:15;max-height:none;overflow:visible;padding:0;
    background:rgba(11,15,7,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
  .dnav-tog{display:flex;align-items:center;justify-content:space-between;width:100%;
    padding:13px 4px;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--dim);background:none;border:0;cursor:pointer}
  .dnav-tog::after{content:"▾";color:var(--lime);transition:transform .2s}
  .dnav.open .dnav-tog::after{transform:rotate(180deg)}
  .dnav-links{display:none;padding:4px 0 16px;max-height:60vh;overflow-y:auto}
  .dnav.open .dnav-links{display:block}
  .dnav .grp{margin:14px 0 6px}
}

/* ---- reading column ---- */
.dmain{padding:34px 0 90px;min-width:0}
.dmain section{scroll-margin-top:70px;padding-bottom:14px}
.dmain h1{font-family:var(--disp);font-weight:700;letter-spacing:-.03em;font-size:clamp(30px,5vw,44px);
  line-height:1.05;margin-bottom:14px}
.dmain h2{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;font-size:26px;
  margin:52px 0 14px;padding-top:14px;border-top:1px solid var(--rule-soft);scroll-margin-top:70px}
.dmain section:first-of-type h2:first-child,.dmain h2.no-rule{border-top:0;padding-top:0}
.dmain h3{font-family:var(--disp);font-weight:600;font-size:17.5px;margin:28px 0 8px;color:var(--paper)}
.dmain p{color:var(--dim);margin:12px 0;max-width:68ch}
.dmain p strong,.dmain li strong{color:var(--paper);font-weight:600}
.dmain a.ln{color:var(--lime);text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(204,255,0,.4)}
.dmain a.ln:hover{text-decoration-color:var(--lime)}
.dmain ul,.dmain ol{color:var(--dim);margin:12px 0;padding-left:20px;max-width:68ch}
.dmain li{margin:7px 0;line-height:1.55}
.dmain ul li::marker{color:var(--dim-2)}
.dmain ol li::marker{color:var(--lime);font-family:var(--mono);font-weight:700}
.dmain code{font-family:var(--mono);font-size:.86em;background:var(--panel);color:var(--lime);
  padding:2px 6px;border-radius:5px;border:1px solid var(--rule-soft);word-break:break-word}
.lede{font-size:18px;color:var(--paper);max-width:62ch;line-height:1.5;margin:6px 0 8px}

/* anchor link on headings */
.dmain h2 .anchor,.dmain h3 .anchor{opacity:0;margin-left:8px;color:var(--dim-2);font-weight:400;text-decoration:none}
.dmain h2:hover .anchor,.dmain h3:hover .anchor{opacity:1}

/* ---- callouts ---- */
.cal{display:flex;gap:12px;padding:14px 16px;margin:18px 0;border-radius:11px;
  border:1px solid var(--rule);background:var(--panel);font-size:14px;line-height:1.5}
.cal .ico{flex:none;width:20px;height:20px;font-family:var(--mono);font-weight:700;font-size:13px;
  display:grid;place-items:center;border-radius:6px}
.cal .bd{color:var(--dim)}.cal .bd b{color:var(--paper)}
.cal.safe{border-color:rgba(204,255,0,.32);background:rgba(204,255,0,.05)}
.cal.safe .ico{background:rgba(204,255,0,.16);color:var(--lime)}
.cal.warn{border-color:rgba(255,180,60,.34);background:rgba(255,180,60,.05)}
.cal.warn .ico{background:rgba(255,180,60,.16);color:#ffb43c}
.cal.danger{border-color:rgba(255,92,92,.36);background:rgba(255,92,92,.06)}
.cal.danger .ico{background:rgba(255,92,92,.16);color:var(--down)}
.cal.info .ico{background:var(--panel-2);color:var(--dim)}

/* ---- spec / param tables ---- */
.dtable{width:100%;border-collapse:collapse;margin:18px 0;font-size:13.5px;
  border:1px solid var(--rule);border-radius:10px;overflow:hidden;display:block;overflow-x:auto}
.dtable thead{background:var(--panel)}
.dtable th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim-2);padding:10px 14px;white-space:nowrap}
.dtable td{padding:11px 14px;border-top:1px solid var(--rule-soft);color:var(--dim);vertical-align:top}
.dtable td:first-child{color:var(--paper);font-weight:500;white-space:nowrap}
.dtable code{background:none;border:0;padding:0}

/* ---- code block + copy ---- */
.code{position:relative;margin:18px 0;background:#0a0d06;border:1px solid var(--rule);border-radius:11px}
.code pre{margin:0;padding:15px 16px;overflow-x:auto;font-family:var(--mono);font-size:12.5px;
  line-height:1.6;color:var(--paper)}
.code .cp{position:absolute;top:9px;right:9px;font-family:var(--mono);font-size:11px;
  color:var(--dim);background:var(--panel);border:1px solid var(--rule);border-radius:6px;
  padding:4px 9px;cursor:pointer;transition:color .12s,border-color .12s}
.code .cp:hover{color:var(--lime);border-color:var(--lime)}
.code .cp.ok{color:var(--lime);border-color:var(--lime)}

/* ---- pills / badges ---- */
.bdg{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;
  border:1px solid var(--rule);color:var(--dim);vertical-align:middle}
.bdg.live{color:var(--lime);border-color:rgba(204,255,0,.35)}
.bdg.route{color:#ffb43c;border-color:rgba(255,180,60,.35)}
.bdg.self{color:var(--green);border-color:rgba(0,200,5,.35)}

/* ---- step cards (getting started) ---- */
.steps{counter-reset:s;margin:20px 0;display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.step{background:var(--panel);padding:16px 18px 16px 52px;position:relative}
.step::before{counter-increment:s;content:counter(s);position:absolute;left:16px;top:16px;
  width:24px;height:24px;border-radius:7px;background:rgba(204,255,0,.14);color:var(--lime);
  font-family:var(--mono);font-weight:700;font-size:13px;display:grid;place-items:center}
.step h3{margin:0 0 4px}.step p{margin:0}

/* ---- doc hero + footer nav ---- */
.dhero{padding:8px 0 4px}
.dhero .eye{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lime);display:inline-flex;align-items:center;gap:8px;margin-bottom:14px}
.dfoot{margin-top:60px;padding-top:22px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-family:var(--mono);font-size:12px;color:var(--dim-2)}
.dfoot a{color:var(--dim)}.dfoot a:hover{color:var(--lime)}

/* feature grid inside a section */
.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:12px;overflow:hidden;margin:18px 0}
.dgrid .c{background:var(--panel);padding:16px}
.dgrid .c .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.dgrid .c p{margin:7px 0 0;font-size:13.5px}