/* ==========================================================================
   Documentation page — extends assets/css/style.css design tokens.
   Adds a two-column docs layout (sticky sidebar + content), checklists,
   status/tag chips, callout notes, and a risk-tinted panel — all built
   from the existing --bg/--panel/--line/--beam/--teal/--red tokens.
   ========================================================================== */

/* ---------- LAYOUT ---------- */
.doc-shell{
  display:grid; grid-template-columns:230px 1fr; gap:64px; align-items:start;
}
@media(max-width:980px){ .doc-shell{ grid-template-columns:1fr; } }

.doc-toc{
  position:sticky; top:96px; display:flex; flex-direction:column; gap:1px;
  max-height:calc(100vh - 128px); overflow-y:auto; padding-right:6px;
}
@media(max-width:980px){
  .doc-toc{
    position:static; max-height:none; flex-direction:row; flex-wrap:wrap; gap:8px;
    margin-bottom:36px; padding-bottom:28px; border-bottom:1px solid var(--line);
  }
}
.doc-toc-label{
  font-family:'JetBrains Mono'; font-size:10.5px; color:var(--muted);
  text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px;
}
@media(max-width:980px){ .doc-toc-label{ display:none; } }
.doc-toc a{
  font-size:13.5px; color:var(--muted); padding:7px 10px; border-radius:6px;
  border-left:2px solid transparent; transition:color 0.2s, background 0.2s, border-color 0.2s;
}
.doc-toc a:hover{ color:var(--text); background:var(--panel); }
.doc-toc a.active{ color:var(--beam); border-left-color:var(--beam); background:var(--panel); font-weight:500; }
.doc-toc a.sub{ padding-left:22px; font-size:12.5px; }
@media(max-width:980px){
  .doc-toc a{ border:1px solid var(--line); border-radius:20px; padding:6px 13px; }
  .doc-toc a.active{ border-color:var(--beam); background:rgba(255,194,75,0.08); }
  .doc-toc a.sub{ display:none; }
}

.doc-content{ min-width:0; }

/* ---------- SECTIONS ---------- */
.doc-section{
  padding-bottom:56px; margin-bottom:56px; border-bottom:1px solid var(--line);
  scroll-margin-top:100px;
}
.doc-section:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.doc-section h2{
  font-family:'Space Grotesk'; font-weight:600; font-size:clamp(22px,2.6vw,29px); letter-spacing:-0.3px;
}
.doc-section .doc-intro{ color:var(--muted); font-size:15.5px; line-height:1.7; margin-top:14px; max-width:680px; }
.doc-section p{ color:var(--muted); font-size:14.5px; line-height:1.75; margin-top:12px; max-width:680px; }
.doc-section p strong{ color:var(--text); }

.doc-sub{ margin-top:40px; scroll-margin-top:100px; }
.doc-sub h3{ font-family:'Space Grotesk'; font-weight:600; font-size:16.5px; margin-bottom:4px; }
.doc-sub p{ color:var(--muted); font-size:14.5px; line-height:1.75; margin-top:12px; max-width:680px; }

/* ---------- INTRO WELCOME BLOCK ---------- */
.doc-welcome p{ color:var(--muted); font-size:15.5px; line-height:1.75; margin-top:16px; max-width:700px; }
.doc-welcome strong{ color:var(--text); }

/* ---------- VERBATIM "TABLE OF CONTENTS" CARD ---------- */
.doc-toc-card{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:32px 34px; margin-top:44px; max-width:540px;
}
.doc-toc-card .kicker{ margin-bottom:16px; }
.doc-toc-card ol{ list-style:none; counter-reset:doctoc; display:flex; flex-direction:column; gap:1px; }
.doc-toc-card li{ counter-increment:doctoc; }
.doc-toc-card li a{
  display:flex; gap:12px; padding:8px 6px; font-size:14px; color:var(--muted);
  border-radius:6px; transition:color 0.2s, background 0.2s;
}
.doc-toc-card li a:hover{ color:var(--text); background:var(--panel-2); }
.doc-toc-card li a::before{
  content:counter(doctoc)"."; font-family:'JetBrains Mono'; color:var(--beam); min-width:16px;
}

/* ---------- CHECKLIST ---------- */
.check-list{ list-style:none; display:grid; grid-template-columns:1fr; gap:10px 28px; margin-top:16px; max-width:680px; }
.check-list.cols-2{ grid-template-columns:1fr 1fr; max-width:none; }
@media(max-width:640px){ .check-list.cols-2{ grid-template-columns:1fr; } }
.check-list li{ display:flex; gap:9px; align-items:flex-start; font-size:14px; color:var(--muted); line-height:1.5; }
.check-list li svg{ color:var(--teal); width:13px; height:13px; margin-top:3px; flex-shrink:0; }

/* ---------- CHIP LIST (status / indicator tags) ---------- */
.chip-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.chip{
  font-family:'JetBrains Mono'; font-size:12px; padding:6px 13px; border-radius:20px;
  border:1px solid var(--line); color:var(--muted); background:var(--panel-2);
}
.chip.beam{ color:var(--beam); border-color:rgba(255,194,75,0.35); background:rgba(255,194,75,0.08); }
.chip.teal{ color:var(--teal); border-color:rgba(79,209,197,0.35); background:rgba(79,209,197,0.08); }
.chip.red{ color:var(--red); border-color:rgba(255,107,107,0.35); background:rgba(255,107,107,0.08); }

/* ---------- CALLOUT NOTE (beam accent) ---------- */
.doc-note{
  display:flex; gap:12px; background:var(--panel); border-left:3px solid var(--beam);
  border-radius:8px; padding:15px 18px; margin-top:18px; max-width:680px;
}
.doc-note svg{ color:var(--beam); width:15px; height:15px; flex-shrink:0; margin-top:3px; }
.doc-note p{ margin:0; color:var(--muted); font-size:13.5px; line-height:1.65; max-width:none; }
.doc-note p strong{ color:var(--text); }

/* ---------- RISK-TINTED PANEL (wraps "Understanding Risk") ---------- */
.doc-panel-warn{
  background:rgba(255,107,107,0.05); border:1px solid rgba(255,107,107,0.25);
  border-radius:14px; padding:28px 30px; margin-top:22px;
}
.doc-panel-warn .warn-head{
  display:flex; align-items:center; gap:9px; font-family:'Space Grotesk'; font-weight:600;
  font-size:14px; color:var(--red);
}
.doc-panel-warn .warn-head svg{ width:15px; height:15px; }

/* ---------- LEGAL PANEL (Disclaimer section) ---------- */
.legal-panel{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:32px 34px; margin-top:18px; }
.legal-panel .warn-head{
  display:flex; align-items:center; gap:9px; font-family:'JetBrains Mono'; font-size:11px; color:var(--muted);
  text-transform:uppercase; letter-spacing:0.5px; margin-bottom:16px;
}
.legal-panel .warn-head svg{ width:14px; height:14px; color:var(--beam); }
.legal-panel p{ max-width:none; }
.legal-panel p + p{ margin-top:10px; }

/* ---------- ASSET ANALYSIS 2x2 CARD GRID ---------- */
.asset-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-top:26px;
}
@media(max-width:820px){ .asset-grid{ grid-template-columns:1fr; } }
.asset-card{ background:var(--panel); padding:28px 26px; transition:background 0.3s; }
.asset-card:hover{ background:var(--panel-2); }
.asset-card h3{
  font-family:'Space Grotesk'; font-size:15.5px; font-weight:600; margin-bottom:6px;
  display:flex; align-items:center; gap:8px;
}
.asset-card h3 svg{ width:15px; height:15px; color:var(--beam); }
.asset-card p{ max-width:none; }
.asset-card p:first-of-type{ margin-top:0; }

/* ---------- MISC ---------- */
.doc-inline-link{ color:var(--beam); border-bottom:1px solid rgba(255,194,75,0.4); }
.doc-inline-link:hover{ border-color:var(--beam); }