/* ══════════════════════════════════════════════════════════════════════
   VELOX DOCS — static layout + content typography.
   Imports the shared tokens via /assets/velox-core.css (from each page).
   This file only handles docs-specific layout, sidebar, content, pager.
   ══════════════════════════════════════════════════════════════════════ */

html, body { min-height: 100%; }
body { font-size: 15px; line-height: 1.65; letter-spacing: -.005em; }

/* ══════ TOP BAR ══════ */
.docs-topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:16px;
  padding:12px 28px;
  background:rgba(6,7,6,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.docs-topbar .wm{font-weight:800;letter-spacing:.18em;font-size:14px}
.docs-topbar .mark{display:inline-flex;align-items:center;gap:10px}
.docs-topbar .mark svg{width:22px;height:22px}
.docs-topbar .sep{color:var(--ink-4);font-family:var(--mono)}
.docs-topbar .crumb{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.18em}
.docs-topbar .crumb b{color:var(--ink);font-weight:500}
.docs-topbar .spacer{flex:1}
.docs-topbar .cta{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:8px 14px;border:1px solid var(--rule-br);
  background:transparent;color:var(--ink-2);
  transition:all .14s ease;
}
.docs-topbar .cta:hover{border-color:var(--amber);color:var(--amber);background:rgba(255,179,10,.06)}
.docs-topbar .cta.primary{background:var(--amber);color:#0c0b08;border-color:var(--amber);font-weight:600}
.docs-topbar .cta.primary:hover{background:var(--ink);border-color:var(--ink);color:#0c0b08}

/* ══════ LAYOUT ══════ */
.docs-layout{
  display:grid;
  grid-template-columns: 280px 1fr;
  max-width:1280px;
  margin:0 auto;
  position:relative;z-index:1;
  min-height: calc(100vh - 60px);
}
@media (max-width:900px){
  .docs-layout{grid-template-columns:1fr;max-width:none}
}

/* ══════ SIDEBAR ══════ */
.docs-sidebar{
  border-right:1px solid var(--rule);
  padding:36px 0 80px;
  position:sticky;top:60px;
  align-self:start;
  height:calc(100vh - 60px);
  overflow-y:auto;
}
@media (max-width:900px){
  .docs-sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--rule);padding:20px}
}
.docs-sidebar .sec-group{margin-bottom:20px;padding:0 20px}
.docs-sidebar h5{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;margin-bottom:8px;padding-top:16px;
  border-top:1px solid var(--rule);
}
.docs-sidebar .sec-group:first-child h5{border-top:0;padding-top:0}
.docs-sidebar nav a{
  display:block;padding:6px 10px;margin:2px 0;
  font-size:13.5px;color:var(--ink-2);
  border-left:2px solid transparent;
  transition:all .14s ease;
}
.docs-sidebar nav a:hover{
  color:var(--ink);background:var(--carbon);
  border-left-color:var(--amber-d);
}
.docs-sidebar nav a.active{
  color:var(--amber);
  background:rgba(255,179,10,.06);
  border-left-color:var(--amber);
  font-weight:500;
}
.docs-sidebar nav a[href^="http"]::after{
  content:" ↗";color:var(--ink-4);font-size:11px;
}

/* ══════ MAIN CONTENT ══════ */
.docs-main{
  padding:0 56px 120px;
  display:flex;flex-direction:column;
  min-width:0;
}
@media (max-width:900px){
  .docs-main{padding:0 24px 80px}
}

.docs-article{
  max-width:760px;
  padding:44px 0 60px;
  color:var(--ink-2);
}

/* typography */
.docs-article h1,
.docs-article h2,
.docs-article h3,
.docs-article h4{
  font-family:var(--sans);color:var(--ink);letter-spacing:-.01em;line-height:1.2;
}
.docs-article h1{
  font-size:36px;font-weight:800;margin:0 0 24px;
  padding-bottom:18px;border-bottom:1px solid var(--rule);
  letter-spacing:-.02em;
}
.docs-article h2{
  font-size:22px;font-weight:700;margin-top:48px;margin-bottom:14px;
  padding-top:6px;
}
.docs-article h3{
  font-size:17px;font-weight:600;margin-top:30px;margin-bottom:10px;color:var(--ink);
}
.docs-article h4{
  font-size:12px;font-family:var(--mono);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--amber);
  margin-top:26px;margin-bottom:6px;
}

.docs-article p{margin:0 0 16px;font-size:15.5px;line-height:1.72;color:var(--ink-2)}
.docs-article strong{color:var(--ink);font-weight:600}
.docs-article em{color:var(--ink);font-style:italic}

.docs-article a{color:var(--amber);border-bottom:1px dotted var(--amber-d);transition:border-bottom-style .12s}
.docs-article a:hover{border-bottom-style:solid}

.docs-article code{
  font-family:var(--mono);font-size:.88em;
  background:var(--carbon);color:var(--amber);
  padding:2px 6px;border:1px solid var(--rule);
}

.docs-article pre{
  background:var(--graphite);
  border:1px solid var(--rule);
  padding:16px 18px;margin:18px 0;overflow-x:auto;
}
.docs-article pre code{
  font-family:var(--mono);font-size:12.5px;
  background:transparent;color:var(--ink-2);
  padding:0;border:0;line-height:1.7;display:block;
  white-space:pre;
}
.docs-article pre code .tok-kw{color:var(--amber);font-weight:500}
.docs-article pre code .tok-str{color:var(--phos)}
.docs-article pre code .tok-num{color:var(--crimson)}
.docs-article pre code .tok-com{color:var(--ink-3);font-style:italic}

.docs-article blockquote{
  border-left:3px solid var(--amber);
  background:rgba(255,179,10,.04);
  padding:12px 18px;margin:18px 0;
  color:var(--ink-2);font-size:14px;
}
.docs-article blockquote p{margin:0 0 6px}
.docs-article blockquote p:last-child{margin:0}

.docs-article ul,
.docs-article ol{margin:0 0 16px 22px;padding:0}
.docs-article li{margin:4px 0;color:var(--ink-2);line-height:1.65}
.docs-article li > p{margin:0}

.docs-article table{
  width:100%;border-collapse:collapse;margin:18px 0;
  font-size:13px;font-family:var(--mono);
}
.docs-article th{
  text-align:left;padding:10px 12px;background:var(--carbon);
  color:var(--ink-3);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;border-bottom:1px solid var(--rule);
}
.docs-article td{padding:10px 12px;border-bottom:1px solid var(--rule);color:var(--ink-2)}
.docs-article tr:hover td{background:var(--graphite)}

.docs-article hr{border:0;border-top:1px solid var(--rule);margin:36px 0}

/* ══════ ARCHITECTURE DIAGRAM (SVG) ══════ */
.arch-diagram{
  display:block;width:100%;max-width:860px;
  margin:20px 0 6px;
  border:1px solid var(--rule);
  background:linear-gradient(180deg,var(--graphite),var(--void));
  padding:12px;
  border-radius:0;
}
.arch-diagram text{font-family:var(--mono);dominant-baseline:central}
.arch-caption{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-4);margin:0 0 18px 2px;
}

/* inline mini-tags (for "Security Note", "Risk", etc.) */
.docs-article .inline-tag{
  display:inline-block;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  padding:2px 8px;border:1px solid var(--rule-br);color:var(--ink-3);margin-right:6px;
  vertical-align:middle;
}
.docs-article .inline-tag.sec{color:var(--amber);border-color:var(--amber-d)}
.docs-article .inline-tag.warn{color:var(--crimson);border-color:rgba(255,74,92,.4)}

/* ══════ PAGER ══════ */
.docs-pager{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  margin-top:60px;padding-top:24px;
  border-top:1px solid var(--rule);
}
.docs-pager a{
  display:flex;flex-direction:column;gap:4px;
  padding:18px 20px;
  border:1px solid var(--rule-br);
  color:var(--ink-3);
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  transition:all .14s ease;
}
.docs-pager a:hover{border-color:var(--amber);color:var(--amber);background:rgba(255,179,10,.04)}
.docs-pager a.disabled{opacity:.28;pointer-events:none}
.docs-pager .pager-next{text-align:right;align-items:flex-end}
.docs-pager .dir{color:var(--ink-4);font-size:10px}
.docs-pager .title{
  color:var(--ink);font-size:14px;font-family:var(--sans);
  font-weight:500;letter-spacing:0;text-transform:none;
}
.docs-pager a:hover .title{color:var(--amber)}
@media (max-width:640px){
  .docs-pager{grid-template-columns:1fr}
  .docs-pager .pager-next{text-align:left;align-items:flex-start}
}

/* ══════ FOOTER NOTE ══════ */
.docs-footer{
  padding:24px 56px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:11px;color:var(--ink-4);letter-spacing:.06em;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  max-width:1280px;margin:0 auto;
}
.docs-footer .spacer{flex:1}
@media (max-width:900px){.docs-footer{padding:20px 24px}}