/* ============================================================================
   TradeX — Build-the-Exchange Course
   Neo-Brutalist design system. Hard borders, offset shadows, oversized type,
   electric accents on warm paper. Vanilla CSS, zero deps, works from file://.
   Fonts vendored locally in assets/vendor/fonts.css (no network at runtime).
   ============================================================================ */

:root{
  /* surfaces */
  --paper:#f4f1e8; --paper2:#ece8da; --card:#fffdf7;
  --ink:#15130e; --ink2:#2c2920; --mut:#6b665a; --faint:#b3ad9e;
  /* accents */
  --acc:#ff4d2e;    /* signal orange-red — primary */
  --acc2:#1a44ff;   /* electric blue — labs / interactive */
  --lime:#c4ff3d;   /* highlight / progress */
  --ok:#0b9e57; --bad:#d62828; --warn:#c97a00;
  /* geometry */
  --b:3px;          /* hard border weight */
  --sh:6px 6px 0 var(--ink);
  --sh-sm:4px 4px 0 var(--ink);
  /* type */
  --f-disp:"Archivo Black",system-ui,sans-serif;
  --f-ui:"Archivo",system-ui,sans-serif;
  --f-mono:"Spline Sans Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{
  background:var(--paper); color:var(--ink);
  font:15px/1.62 var(--f-ui); font-weight:500;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-image:radial-gradient(var(--paper2) 1.1px, transparent 1.2px);
  background-size:22px 22px;
}
::selection{background:var(--lime); color:var(--ink)}
a{color:var(--acc2); text-decoration:none; font-weight:700; border-bottom:3px solid var(--lime)}
a:hover{background:var(--lime); color:var(--ink)}
img{max-width:100%}

/* ----------------------------------------------------------------- topbar -- */
#topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:14px;
  height:60px; padding:0 22px; background:var(--ink); color:var(--paper);
  border-bottom:var(--b) solid var(--ink);
}
#menu-toggle{display:none}
#brand{font-family:var(--f-disp); font-size:19px; letter-spacing:-.5px; color:var(--paper); text-decoration:none; border:0}
#brand:hover{background:none}
#brand b{color:var(--lime)}
#brand .tag{font-family:var(--f-mono); font-size:10px; font-weight:500; letter-spacing:2px; color:#a8a392;
  border:1px solid #3a382f; padding:3px 8px; margin-left:10px; vertical-align:middle}
.bar-spacer{flex:1}
.chip{font-family:var(--f-mono); font-size:11px; letter-spacing:.5px; background:#26241c; color:#cfcabb;
  padding:5px 10px; border:1px solid #3a382f; white-space:nowrap}
.chip b{color:var(--lime); font-weight:600}
#progbar{width:140px; height:14px; background:#26241c; border:2px solid var(--paper); position:relative; overflow:hidden}
#progbar > i{position:absolute; inset:0; width:0; background:var(--lime); transition:width .5s cubic-bezier(.2,.8,.2,1)}
#progress-pct{font-family:var(--f-disp); font-size:14px; color:var(--lime); min-width:38px; text-align:right}

/* --------------------------------------------------------------- layout ---- */
#layout{display:flex; align-items:flex-start}
#sidebar{
  width:300px; min-width:300px; height:calc(100vh - 60px); overflow:auto;
  position:sticky; top:60px; padding:22px 16px 80px;
  border-right:var(--b) solid var(--ink); background:var(--paper);
}
#sidebar::-webkit-scrollbar{width:10px}
#sidebar::-webkit-scrollbar-thumb{background:var(--ink); border:3px solid var(--paper)}
#scrim{display:none}

.nav-group{margin-bottom:22px}
.nav-group-title{
  display:flex; align-items:center; gap:8px; background:var(--ink); color:var(--paper);
  padding:7px 11px; font-family:var(--f-disp); font-size:11px; letter-spacing:.4px;
  text-transform:uppercase; box-shadow:var(--sh-sm); margin-bottom:11px;
}
.nav-group-title .badge{background:var(--lime); color:var(--ink); border:0; border-radius:0;
  padding:0 6px; font-family:var(--f-mono); font-size:10px; font-weight:600}
.nav-group-title .gp-count{margin-left:auto; font-family:var(--f-mono); font-size:10px; color:#bdb9a8; font-weight:500}

.nav-lesson{
  display:flex; align-items:center; gap:9px; padding:7px 10px; color:var(--ink2);
  text-decoration:none; font-size:13px; font-weight:600; border:2px solid transparent;
  border-radius:0; line-height:1.3;
}
.nav-lesson::before{content:""; width:13px; height:13px; flex:none; border:2px solid var(--ink); background:var(--paper)}
.nav-lesson:hover{background:var(--card); border-color:var(--ink); box-shadow:var(--sh-sm)}
.nav-lesson.done{color:var(--mut)}
.nav-lesson.done::before{background:var(--ok)}
.nav-lesson.active{background:var(--acc); color:#fff; border-color:var(--ink); box-shadow:var(--sh-sm); font-weight:800}
.nav-lesson.active::before{background:var(--lime); border-color:#fff}
.nav-lesson.is-util{font-family:var(--f-mono); font-size:12px; font-weight:500}
.nav-lesson.is-util::before{display:none}

/* --------------------------------------------------------------- content --- */
#content{flex:1; min-width:0; padding:42px 56px 120px; max-width:900px}
@media (min-width:1500px){ #content{padding-left:80px} }

.lesson, .page{animation:fadeup .5s both}
@keyframes fadeup{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
/* staggered reveal of major lesson blocks */
.lesson > *{animation:fadeup .5s both}
.lesson > *:nth-child(1){animation-delay:.02s}
.lesson > *:nth-child(2){animation-delay:.06s}
.lesson > *:nth-child(3){animation-delay:.10s}
.lesson > *:nth-child(4){animation-delay:.14s}
.lesson > *:nth-child(5){animation-delay:.18s}
.lesson > *:nth-child(n+6){animation-delay:.22s}
@media (prefers-reduced-motion:reduce){ *{animation:none !important} }

/* lesson hero */
.kicker{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono);
  font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--paper);
  background:var(--ink); padding:6px 12px; margin-bottom:20px; box-shadow:var(--sh-sm);
}
.kicker .badge{background:var(--lime); color:var(--ink); padding:0 6px; font-weight:700}
.kicker .sep{color:#7b776a}
h1.title{
  font-family:var(--f-disp); font-size:clamp(38px,6vw,66px); line-height:.93;
  margin:0 0 26px; letter-spacing:-2px; text-transform:uppercase;
}
h1.title .hl{background:var(--acc); color:#fff; padding:0 10px;
  box-decoration-break:clone; -webkit-box-decoration-break:clone}

.crumbs{font-family:var(--f-mono); font-size:12px; color:var(--mut); margin-bottom:8px}

/* section block (concept cards) */
.lesson{counter-reset:sec}
section.block{
  margin:24px 0; background:var(--card); border:var(--b) solid var(--ink); box-shadow:var(--sh);
}
section.block > h2{
  font-family:var(--f-disp); font-size:14px; letter-spacing:.4px; text-transform:uppercase;
  margin:0; padding:11px 18px; background:var(--ink); color:var(--paper);
  display:flex; align-items:center; gap:10px;
}
.lesson section.block:not(.lab):not(.quiz):not(.is-brutal) > h2::before{
  counter-increment:sec; content:counter(sec,decimal-leading-zero);
  font-family:var(--f-mono); color:var(--lime); font-size:13px; font-weight:600;
}
.block-body{padding:18px 20px}
.block-body > :first-child{margin-top:0}
.block-body > :last-child{margin-bottom:0}
.block-body p{margin:.55em 0; font-size:16px}
.block-body ul, .block-body ol{margin:.5em 0; padding-left:22px}
.block-body li{margin:4px 0}

/* inline code + code blocks */
code{font-family:var(--f-mono); font-size:13px; background:var(--ink); color:var(--lime); padding:1px 6px; font-weight:500}
strong{font-weight:800}
em{font-style:italic}
pre{
  background:var(--ink); border:var(--b) solid var(--ink); box-shadow:var(--sh-sm);
  border-radius:0; padding:16px 18px; overflow:auto; margin:16px 0;
}
pre code{background:none; color:#e7e3d4; padding:0; font-size:13px; line-height:1.65; font-weight:400}
.diagram-fallback{color:#cfcabb; white-space:pre}

/* code references */
.refs{list-style:none; margin:0; padding:0}
.refs li{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; padding:11px 0; border-bottom:2px dashed var(--ink)}
.refs li:last-child{border:0}
.refs .p{font-family:var(--f-mono); font-size:13px; font-weight:600; background:var(--paper2);
  border:2px solid var(--ink); padding:1px 8px; word-break:break-all}
.refs .n{color:var(--mut); font-size:14px; font-weight:600}

/* brutal truth */
section.block.is-brutal{box-shadow:8px 8px 0 var(--acc)}
section.block.is-brutal > h2{background:var(--acc); color:#fff}
section.block.is-brutal > h2::before{content:"⚠"; font-family:var(--f-ui)}
.brutal{margin:6px 0; padding:0}
.brutal + .brutal{margin-top:16px; padding-top:16px; border-top:2px dashed var(--ink)}
.brutal strong{color:var(--ink)}
.brutal .cite{font-family:var(--f-mono); font-size:11px; margin-top:10px; background:var(--ink);
  color:var(--lime); display:inline-block; padding:3px 9px}
.brutal .cite code{background:none; padding:0}
.cite{color:var(--mut); font-size:13px; font-family:var(--f-mono)}

/* checklist */
.checklist{list-style:none; margin:0; padding:0}
.checklist li{display:flex; gap:12px; align-items:flex-start; padding:11px 0;
  border-bottom:2px dashed var(--ink); font-size:16px; font-weight:600}
.checklist li:last-child{border:0}
.checklist li::before{content:""; width:20px; height:20px; flex:none; margin-top:1px;
  border:2.5px solid var(--ink); background:var(--paper)}

/* primary source + generic cards */
.card{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--card);
  border:var(--b) solid var(--ink); box-shadow:var(--sh-sm); padding:14px 16px; margin:12px 0;
  text-decoration:none; color:var(--ink); font-weight:700; border-bottom-width:var(--b);
}
.card:hover{background:var(--card); transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink)}
.card .badge{background:var(--ink); color:var(--paper); font-family:var(--f-mono); font-size:10px;
  font-weight:600; padding:2px 8px; text-transform:uppercase; letter-spacing:.5px}
.card .arrow{margin-left:auto; font-family:var(--f-disp); color:var(--acc)}

/* quiz */
section.block.quiz > h2{background:var(--acc2)}
section.block.quiz > h2::before{content:"?"; font-family:var(--f-disp); color:#fff}
.quiz .q{padding:14px 0; border-bottom:2px dashed var(--ink)}
.quiz .q:last-of-type{border-bottom:0}
.quiz .qtext{font-weight:800; font-size:16px; margin-bottom:8px}
.quiz label{display:flex; align-items:center; gap:9px; padding:7px 10px; margin:4px 0; cursor:pointer;
  border:2px solid transparent; font-size:15px; font-weight:600}
.quiz label:hover{border-color:var(--ink); background:var(--paper)}
.quiz input[type=radio]{appearance:none; -webkit-appearance:none; width:16px; height:16px; flex:none;
  border:2.5px solid var(--ink); background:var(--card); cursor:pointer}
.quiz input[type=radio]:checked{background:var(--acc2); box-shadow:inset 0 0 0 3px var(--card)}
.quiz .explain{font-size:14px; color:var(--ink2); border-left:4px solid var(--lime);
  background:var(--paper2); padding:8px 12px; margin:6px 0 4px}
.quiz-grade{margin-top:6px}
.quiz-score{font-family:var(--f-disp); margin-left:12px; font-size:15px}
.quiz-score.ok{color:var(--ok)} .quiz-score.bad{color:var(--bad)}

/* lab */
section.block.lab{box-shadow:8px 8px 0 var(--acc2)}
section.block.lab > h2{background:var(--acc2)}
section.block.lab > h2::before{content:"▶"; font-family:var(--f-ui); color:#fff; font-size:11px}
.lab .block-body{padding:0}
.lab .lab-brief{padding:16px 20px}
.lab .lab-brief > :first-child{margin-top:0}
.lab .lab-meta{font-family:var(--f-mono); font-size:11px; color:var(--mut); padding:0 20px 12px}
.lab .lab-meta code{background:var(--paper2); color:var(--ink); border:1px solid var(--ink)}
.lab-code{
  display:block; width:100%; min-height:240px; background:var(--ink); color:#e7e3d4;
  border:0; border-top:var(--b) solid var(--ink); border-bottom:var(--b) solid var(--ink);
  padding:16px 18px; font-family:var(--f-mono); font-size:13px; line-height:1.65; resize:vertical;
}
.lab-code:focus{outline:3px solid var(--lime); outline-offset:-3px}
.lab-actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:14px 18px; background:var(--paper2)}
.lab-output{
  margin:0; padding:16px 18px; min-height:24px; white-space:pre-wrap; background:var(--ink);
  color:#cfcabb; font-family:var(--f-mono); font-size:13px; border-top:var(--b) solid var(--ink);
}
.lab-output:empty{display:none}
.lab-output.ok{color:var(--lime)}
.lab-output.bad{color:#ff8a7a}

/* buttons */
button, .btn{font-family:var(--f-disp); font-size:12px; letter-spacing:.4px; text-transform:uppercase;
  padding:11px 22px; background:var(--lime); color:var(--ink); border:var(--b) solid var(--ink);
  box-shadow:var(--sh-sm); cursor:pointer; transition:transform .08s, box-shadow .08s}
button:hover, .btn:hover{transform:translate(-2px,-2px); box-shadow:var(--sh)}
button:active, .btn:active{transform:translate(0,0); box-shadow:2px 2px 0 var(--ink)}
.lab-run{background:var(--lime)}
.lab-solution, .btn-ghost{background:var(--card)}
.quiz-grade{background:var(--acc2); color:#fff}

/* lesson footer */
.lesson-foot{margin-top:40px; display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.complete-btn{font-size:14px; padding:15px 28px; background:var(--lime)}
.complete-btn.is-done{background:var(--ok); color:#fff}
.lesson-foot .next{margin-left:auto; font-family:var(--f-mono); font-size:13px; font-weight:600;
  border:2px solid var(--ink); padding:10px 16px; background:var(--card); color:var(--ink)}
.lesson-foot .next b{color:var(--acc)}

/* glossary */
.page h1, .lesson h1:not(.title){font-family:var(--f-disp); font-size:clamp(32px,5vw,52px);
  text-transform:uppercase; letter-spacing:-1.5px; line-height:.95; margin:0 0 18px}
.page > p.intro{font-size:18px; font-weight:600; max-width:62ch; margin:0 0 28px}
dl{margin:0}
dt{font-family:var(--f-disp); color:var(--ink); font-size:16px; text-transform:uppercase;
  margin-top:0; padding:12px 14px; background:var(--card); border:var(--b) solid var(--ink);
  box-shadow:var(--sh-sm); display:inline-block; letter-spacing:-.3px}
dd{margin:8px 0 22px; padding-left:14px; border-left:4px solid var(--lime); font-size:16px}

/* assessment rubric */
.rubric-level{margin:0 0 14px; font-family:var(--f-disp); font-size:20px; text-transform:uppercase;
  background:var(--ink); color:var(--lime); display:inline-block; padding:8px 16px; box-shadow:var(--sh-sm)}

/* home hero */
.home-hero{margin-bottom:36px}
.home-hero .eyebrow{font-family:var(--f-mono); font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--acc); margin-bottom:14px}
.home-hero h1{font-family:var(--f-disp); font-size:clamp(46px,8vw,92px); line-height:.9; letter-spacing:-3px;
  text-transform:uppercase; margin:0 0 22px}
.home-hero h1 .hl{background:var(--acc); color:#fff; padding:0 12px; box-decoration-break:clone; -webkit-box-decoration-break:clone}
.home-hero .sub{font-size:19px; font-weight:600; max-width:60ch; line-height:1.5}
.home-stats{display:flex; gap:14px; flex-wrap:wrap; margin:26px 0}
.stat-box{background:var(--card); border:var(--b) solid var(--ink); box-shadow:var(--sh-sm); padding:14px 20px; min-width:120px}
.stat-box .n{font-family:var(--f-disp); font-size:30px; line-height:1; color:var(--acc)}
.stat-box .l{font-family:var(--f-mono); font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--mut); margin-top:6px}
.home-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:8px}

/* generic badge + explainer + card internals */
.badge{font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.5px; text-transform:uppercase;
  background:var(--ink); color:var(--paper); padding:2px 7px}
.explain{font-size:14px; color:var(--ink2); border-left:4px solid var(--lime); background:var(--paper2); padding:8px 12px; margin:8px 0}
.card > span:first-child{font-family:var(--f-ui); font-weight:800; font-size:16px}
.card .cite{color:var(--mut); font-weight:600}
.block-body ol{counter-reset:none}

/* ------------------------------------------------------------- responsive -- */
@media (max-width:980px){
  #content{padding:30px 24px 100px}
  #menu-toggle{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
    padding:0; font-size:16px; box-shadow:var(--sh-sm); background:var(--lime)}
  #sidebar{position:fixed; left:0; top:60px; z-index:35; transform:translateX(-104%);
    transition:transform .25s cubic-bezier(.2,.8,.2,1); box-shadow:var(--sh)}
  body.nav-open #sidebar{transform:translateX(0)}
  body.nav-open #scrim{display:block; position:fixed; inset:60px 0 0 0; z-index:30; background:rgba(21,19,14,.5)}
  .chip.hide-sm{display:none}
}
@media (max-width:700px){
  #brand .tag{display:none}
}
@media (max-width:560px){
  #progbar{width:90px}
  h1.title{letter-spacing:-1px}
}