/* ── Shared design tokens + course sidebar (single source of truth) ── */
@import "tokens.css";
@import "course-nav.css";

/* ── Reset & base ── */
@page{margin:12mm}
*{box-sizing:border-box}
html{background:#0c0e12}
body{
  margin:0 auto; background:linear-gradient(180deg,#0c0e12,#0f1115 240px); color:var(--ink);
  font:13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; max-width:900px; padding:32px 24px 56px;
}

/* ── Header ── */
header.hero{border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:28px}
.kicker{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:6px}
h1{font-size:26px; margin:.25em 0 .15em; letter-spacing:-.02em}
.sub{color:var(--muted); font-size:12.5px; margin:0}
.mission{margin-top:14px; background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--accent2);
  border-radius:8px; padding:10px 14px; font-size:11.5px; color:#cdd4e0}
.mission b{color:var(--accent2)}

/* ── Typography ── */
h2{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent);
  border-bottom:1px solid var(--line); padding-bottom:5px; margin:24px 0 9px; font-weight:700}
ul{margin:4px 0; padding-left:18px} li{margin:3px 0}
a{color:#8fb6ff; text-decoration:none; border-bottom:1px solid #2f3c54}

/* ── Code ── */
code{background:#11141a; border:1px solid var(--line); border-radius:5px; padding:.05em .35em;
  font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace; font-size:11.5px; color:#e6d6ff}
pre{background:#0b0d12; border:1px solid var(--line); color:#d7e3ff; border-radius:9px;
  padding:11px 13px; overflow:auto; font-size:10.8px; line-height:1.55; margin:6px 0}
.tag{color:#7ee0c0}.attr{color:#ffcf6e}.str{color:#9ad0ff}.c{color:#5a6477; font-style:italic}

/* ── Tables ── */
table{width:100%; border-collapse:collapse; margin:6px 0 4px; font-size:11.8px}
th,td{border:1px solid var(--line); padding:6px 9px; text-align:left; vertical-align:top}
th{background:var(--panel2); font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:#cfd6e3}
td code{font-size:11px}

/* ── Layout ── */
.two{display:grid; grid-template-columns:1fr 1fr; gap:14px}

/* ── Components ── */
.warn{background:linear-gradient(180deg,#1a1410,#171a21); border:1px solid #3a2f1e; border-left:3px solid var(--warn);
  border-radius:8px; padding:8px 12px; margin:8px 0; font-size:11.8px}
.warn b{color:var(--warn)}
.pill{display:inline-block; background:var(--accent2); color:#0c0e12; font-size:9.5px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; border-radius:999px; padding:2px 9px; vertical-align:middle}
.ol{background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:9px 13px; margin:8px 0; font-size:12.5px}

/* ── Footer ── */
.footer{margin-top:28px; border-top:1px solid var(--line); padding-top:12px; color:var(--muted); font-size:11px}
.footer .cite a{color:#8fb6ff; text-decoration:none; border-bottom:1px solid #2f3c54}

/* ── Bottom nav (matches the lesson prev/next nav) ── */
.lesson-nav{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 0; font-size:13px}
.lesson-nav.bottom{border-top:1px solid var(--line); margin-top:32px}
.nav-btn{background:var(--panel2); border:1px solid var(--line); border-radius:6px; padding:6px 14px; color:var(--accent); text-decoration:none; white-space:nowrap; font-size:13px; transition:background .15s}
.nav-btn:hover{background:#252b38}
.nav-btn.disabled{color:var(--muted); cursor:default; pointer-events:none}

/* ── Docked sidebar layout ──
   The cheat-sheet body is itself the centered, max-width container (unlike
   lessons, which center an inner .wrap). When the sidebar is docked on wide
   screens, widen the box and pad it left so the content stays ~900px and
   clears the 272px rail. course-nav.css supplies the padding-left:272px. */
@media (min-width: 1100px) {
  body.nav-docked { max-width: 1172px; }
}
/* Drawer mode: push content below the floating hamburger so it clears the hero. */
@media (max-width: 1099px) {
  body.nav-docked { padding-top: 60px; }
}

/* ── Print: hide the on-screen sidebar chrome, keep the dark theme ── */
@media print{
  body{background:#0f1115 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; padding:0; max-width:none}
  .course-nav,.course-nav-toggle,.course-nav-backdrop,.lesson-nav{display:none !important}
  h2{break-after:avoid} table,pre,.warn{break-inside:avoid}
}

/* ── Responsive ── */
@media(max-width:700px){
  body{padding:20px 14px 40px}
  h1{font-size:20px}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .two{grid-template-columns:1fr}
  pre{font-size:10.5px}
  .lesson-nav,.lesson-nav.bottom{flex-wrap:wrap;gap:6px}
  .nav-btn{font-size:12px;padding:5px 10px;white-space:normal}
}
@media(max-width:480px){
  body{padding:16px 12px 32px;font-size:12px;line-height:1.6}
  h1{font-size:18px}
  h2{font-size:11px}
  pre{font-size:10px}
  code{font-size:10.5px}
  th,td{padding:4px 6px;font-size:11px}
  .warn{padding:6px 10px;font-size:11px}
  .ol{padding:7px 11px;font-size:11.5px}
}