/* Shared styles for every lesson + reference sheet. Clean light theme: white paper, system sans, blue accent. */
:root {
  --paper: #ffffff;
  --panel: #f8fafc;
  --code-bg: #f1f5f9;
  --ink: #16181d;
  --ink-2: #4b5563;
  --ink-3: #98a1ae;
  --rule: #e5e7eb;
  --rule-strong: #d3d8e0;
  --accent: #2563eb;      /* blue: links, interactive, diagram highlight */
  --accent-soft: #eef2ff;
  --warm: #7c3aed;        /* violet: second diagram colour */
  --warm-soft: #f4f0ff;
  --right: #15803d;
  --right-soft: #e8f6ec;
  --wrong: #dc2626;
  --wrong-soft: #fdeaea;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04);
  --sans: -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
main { max-width: 46rem; margin: 0 auto; padding: 2rem 16px 4rem; }

/* ---------- top bar ---------- */
.crumbs { font: 13px/1.4 var(--sans); color: var(--ink-3); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.crumbs a { color: var(--ink-2); }
a { color: var(--accent); text-underline-offset: 3px; }

/* ---------- headings ---------- */
.kicker { font: 600 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 .6rem; }
h1 { font: 650 2.05rem/1.15 var(--sans); letter-spacing: -.02em; margin: 0 0 1rem; }
h2 { font: 650 1.4rem/1.25 var(--sans); letter-spacing: -.01em; margin: 2.6rem 0 .8rem; border-top: 1px solid var(--rule); padding-top: 1.4rem; }
h3 { font: 600 15px/1.3 var(--sans); margin: 1.6rem 0 .4rem; }
p, li { color: var(--ink); }
.lede { font-size: 1.12rem; color: var(--ink-2); }

/* ---------- mission/win box ---------- */
.win { border-left: 4px solid var(--accent); background: var(--accent-soft); padding: .9rem 1.1rem; margin: 1.2rem 0; border-radius: 0 10px 10px 0; }
.win b { font-family: var(--sans); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; display: block; color: var(--accent); margin-bottom: .2rem; }
.say { border-left: 4px solid var(--warm); background: var(--warm-soft); padding: .8rem 1.1rem; margin: 1.2rem 0; border-radius: 0 10px 10px 0; }
.say b { font-family: var(--sans); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; display: block; color: var(--warm); margin-bottom: .2rem; }
.trap { border-left: 4px solid var(--wrong); background: var(--wrong-soft); padding: .8rem 1.1rem; margin: 1.2rem 0; border-radius: 0 10px 10px 0; }
.trap b { font-family: var(--sans); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; display: block; color: var(--wrong); margin-bottom: .2rem; }

/* ---------- code ---------- */
code, pre, kbd { font-family: var(--mono); font-size: .86em; }
code { background: var(--code-bg); padding: .12em .38em; border-radius: 6px; }
pre { background: var(--code-bg); padding: .9rem 1rem; border-radius: 10px; overflow-x: auto; line-height: 1.5; border: 1px solid var(--rule); }
pre code { background: none; padding: 0; }
.kw { color: var(--accent); font-weight: 600; }
.cm { color: var(--ink-3); font-style: italic; }

/* ---------- tables ---------- */
.tbl { width: 100%; overflow-x: auto; margin: 1rem 0; }
table { border-collapse: collapse; font: 14px/1.45 var(--sans); width: 100%; }
th, td { border-bottom: 1px solid var(--rule); padding: .45rem .6rem; text-align: left; vertical-align: top; }
th { font-weight: 600; color: var(--ink-2); border-bottom: 2px solid var(--rule-strong); }
td.hl, th.hl { background: var(--accent-soft); }
td.hw { background: var(--warm-soft); }
td.null { color: var(--ink-3); font-style: italic; }
.sheet th:first-child, .sheet td:first-child { color: var(--ink-3); width: 2rem; text-align: center; }

/* ---------- figures / diagrams ---------- */
figure { margin: 1.6rem 0; }
figure svg { width: 100%; height: auto; display: block; }
figcaption { font: 14px/1.5 var(--sans); color: var(--ink-2); margin-top: .5rem; }
svg text { font-family: var(--sans); fill: var(--ink); }
svg .t-dim { fill: var(--ink-3); }
svg .t-acc { fill: var(--accent); font-weight: 600; }
svg .t-warm { fill: var(--warm); font-weight: 600; }
svg .t-mono { font-family: var(--mono); }
svg .box { fill: var(--panel); stroke: var(--rule); }
svg .box-acc { fill: var(--accent-soft); stroke: var(--accent); }
svg .box-warm { fill: var(--warm-soft); stroke: var(--warm); }
svg .box-bad { fill: var(--wrong-soft); stroke: var(--wrong); }
svg .ln { stroke: var(--ink-3); fill: none; }
svg .ln-acc { stroke: var(--accent); fill: none; stroke-width: 2; }
svg .ln-warm { stroke: var(--warm); fill: none; stroke-width: 2; }
svg .fill-acc { fill: var(--accent); }
svg .fill-warm { fill: var(--warm); }
svg .fill-ink3 { fill: var(--ink-3); }

/* ---------- quiz ---------- */
.quiz { counter-reset: q; }
.q { border: 1px solid var(--rule); border-radius: 10px; padding: 1rem 1.1rem; margin: 1rem 0; background: var(--paper); box-shadow: var(--shadow); }
.q > p:first-child { margin-top: 0; font-weight: 600; font-family: var(--sans); font-size: 15px; }
.q > p:first-child::before { counter-increment: q; content: "Q" counter(q) ". "; color: var(--accent); }
.opts { display: grid; gap: .45rem; }
.opt { text-align: left; font: 15px/1.35 var(--sans); padding: .55rem .8rem; border-radius: 8px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); cursor: pointer; }
.opt:hover:not([disabled]) { border-color: var(--accent); }
.opt.right { background: var(--right-soft); border-color: var(--right); color: var(--ink); }
.opt.wrong { background: var(--wrong-soft); border-color: var(--wrong); color: var(--ink); }
.opt[disabled] { cursor: default; }
.why { font: 14px/1.5 var(--sans); margin: .7rem 0 0; padding: .6rem .8rem; border-radius: 8px; background: var(--panel); }
.why .v-right { color: var(--right); font-weight: 700; }
.why .v-wrong { color: var(--wrong); font-weight: 700; }
.score { font: 600 14px var(--sans); color: var(--ink-2); }

/* ---------- typed-answer tasks ---------- */
.task { border: 1px dashed var(--accent); border-radius: 10px; padding: 1rem 1.1rem; margin: 1rem 0; }
.task > p:first-child { margin-top: 0; font: 600 15px/1.4 var(--sans); }
.task .row { display: flex; gap: .5rem; flex-wrap: wrap; }
.task input { flex: 1 1 14rem; font: 15px var(--mono); padding: .5rem .6rem; border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--panel); color: var(--ink); min-width: 0; }
.btn { font: 600 14px var(--sans); padding: .5rem .9rem; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent); color: var(--paper); cursor: pointer; }
.btn.ghost { background: transparent; color: var(--accent); }
.fb { font: 14px/1.5 var(--sans); margin-top: .6rem; min-height: 1.2em; }
.fb.ok { color: var(--right); } .fb.no { color: var(--wrong); }

/* ---------- sequence (click-in-order) drill ---------- */
.seq { border: 1px dashed var(--accent); border-radius: 10px; padding: 1rem 1.1rem; margin: 1rem 0; }
.seq > p:first-child { margin-top: 0; font: 600 15px/1.4 var(--sans); }
.seq .pool, .seq .built { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 2.4rem; }
.seq .built { border-top: 1px solid var(--rule); padding-top: .6rem; margin-top: .6rem; }
.chip { font: 600 13px var(--mono); padding: .4rem .7rem; border-radius: 999px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); cursor: pointer; }
.chip.placed { background: var(--right-soft); border-color: var(--right); cursor: default; }
.chip.shake { animation: shake .3s; background: var(--wrong-soft); border-color: var(--wrong); }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ---------- solve-it-yourself reveals ---------- */
details.solve { border: 1px solid var(--rule); border-radius: 10px; padding: .7rem 1rem; margin: .8rem 0; background: var(--paper); box-shadow: var(--shadow); }
details.solve summary { cursor: pointer; font: 600 15px/1.4 var(--sans); }
details.solve summary::marker { color: var(--accent); }
details.solve[open] summary { margin-bottom: .5rem; }

/* ---------- your-turn checklist ---------- */
.todo { list-style: none; padding: 0; }
.todo li { display: flex; gap: .7rem; align-items: flex-start; padding: .55rem 0; border-bottom: 1px solid var(--rule); }
.todo input { margin-top: .35rem; width: 1.1rem; height: 1.1rem; accent-color: var(--accent); flex: none; }
.todo li.done span { color: var(--ink-3); text-decoration: line-through; }
.progress { font: 600 13px var(--sans); color: var(--accent); }

/* ---------- footer ---------- */
.source { font-size: 15px; background: var(--panel); padding: .8rem 1rem; border-radius: 10px; }
.ask { font: 15px/1.5 var(--sans); border: 1px solid var(--accent); padding: .8rem 1rem; border-radius: 10px; margin-top: 1.5rem; }
.pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; font: 14px var(--sans); flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.card { background: var(--panel); border-radius: 10px; padding: .8rem 1rem; border: 1px solid var(--rule); box-shadow: var(--shadow); }
.card h3 { margin-top: 0; }
a.card { display: block; text-decoration: none; color: var(--ink); transition: border-color .15s; }
a.card:hover { border-color: var(--accent); }
a.card h3 { color: var(--accent); }
a.card small { display: block; margin-top: .25rem; }
small, .small { font-size: 14px; color: var(--ink-2); }

/* ---------- practice engine ---------- */
[hidden] { display: none !important; }
.practice { margin-top: 1.4rem; }
.prac-summary { font: 14px/1.5 var(--sans); color: var(--ink-2); padding: .7rem .9rem; background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; margin-bottom: 1.2rem; }
.prac-summary b { color: var(--ink); }
.prac-h { font: 650 15px/1.3 var(--sans); margin: 1.3rem 0 .5rem; border: 0; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 1rem; }
.chip-toggle { font: 600 13px/1 var(--sans); padding: .5rem .7rem; border-radius: 999px; border: 1px solid var(--rule-strong); background: var(--panel); color: var(--ink-2); cursor: pointer; }
.chip-toggle:hover { border-color: var(--accent); }
.chip-toggle.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.chip-toggle .ct, .browse-h .ct { font: 600 11px var(--mono); color: var(--ink-3); margin-left: .15rem; }
.prac-row { display: flex; flex-wrap: wrap; gap: .7rem 1.2rem; align-items: center; margin: .8rem 0; }
.prac-row label { font: 14px var(--sans); color: var(--ink-2); display: flex; gap: .45rem; align-items: center; }
.prac-row select { font: 14px var(--sans); padding: .4rem .5rem; border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--panel); color: var(--ink); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.small { font-size: 13px; padding: .4rem .7rem; }
.prac-note { font: 13px/1.5 var(--sans); color: var(--ink-2); }
.prac-note b { color: var(--ink); }

/* weak-topic box */
.weak-box { border: 1px solid var(--rule); border-left: 4px solid var(--warm); background: var(--warm-soft); border-radius: 0 10px 10px 0; padding: .8rem 1rem; margin: 1.2rem 0; }
.weak-box > b { display: block; font: 600 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--warm); margin-bottom: .4rem; }
.weak-list { list-style: none; padding: 0; margin: 0 0 .6rem; }
.weak-list li { display: flex; justify-content: space-between; gap: 1rem; font: 14px var(--sans); padding: .25rem 0; border-bottom: 1px dashed rgba(124, 58, 237, .2); }
.weak-list li span:last-child { color: var(--warm); font-weight: 600; }

/* runner */
.prac-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.prac-meta { display: flex; gap: .8rem; align-items: center; font: 13px var(--sans); color: var(--ink-3); flex-wrap: wrap; }
.prac-topic { font: 600 11px var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: .3rem .55rem; border-radius: 999px; }
.prac-score { font: 600 13px var(--sans); color: var(--ink-2); }
.prac-clock { font: 700 20px var(--mono); color: var(--ink); background: var(--panel); border: 1px solid var(--rule); padding: .2rem .6rem; border-radius: 8px; }
.prac-clock.late { color: var(--wrong); border-color: var(--wrong); background: var(--wrong-soft); }
.prac-progress { height: 5px; border-radius: 999px; background: var(--rule); overflow: hidden; margin: .3rem 0 1.4rem; }
.prac-progress span { display: block; height: 100%; background: var(--accent); transition: width .25s ease; }

.qcard { border: 1px solid var(--rule); border-radius: 12px; padding: 1.2rem 1.3rem; background: var(--paper); box-shadow: var(--shadow); margin: 1rem 0; }
.qcard .qtext { font: 500 1.06rem/1.55 var(--sans); }
.qcard .qtext p:first-child { margin-top: 0; }
.qcard .qtext p:last-child { margin-bottom: 0; }
.qcard .qtext table { margin: .5rem 0; }
.qcard .qtext td, .qcard .qtext th { padding: .3rem .5rem; }
.opts { display: grid; gap: .5rem; margin-top: 1rem; }
.opt { display: flex; align-items: flex-start; gap: .65rem; text-align: left; font: 15px/1.4 var(--sans); padding: .65rem .8rem; border-radius: 9px; border: 1px solid var(--rule-strong); background: var(--panel); color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s; }
.opt:hover:not([disabled]) { border-color: var(--accent); }
.opt .opt-num { font: 700 11px var(--mono); color: var(--ink-3); border: 1px solid var(--rule-strong); border-radius: 5px; padding: .12rem .35rem; margin-top: .12rem; flex: none; }
.opt.sel { border-color: var(--accent); background: var(--accent-soft); }
.opt.right { background: var(--right-soft); border-color: var(--right); }
.opt.right .opt-num { color: var(--right); border-color: var(--right); }
.opt.wrong { background: var(--wrong-soft); border-color: var(--wrong); }
.opt.wrong .opt-num { color: var(--wrong); border-color: var(--wrong); }
.opt[disabled] { cursor: default; }
.why { margin-top: .9rem; }
.prac-nav { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: 1.2rem; }
.prac-nav .prac-note { margin-left: auto; }

/* result */
.scorebox { border: 1px solid var(--rule); border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: 0 12px 12px 0; padding: 1rem 1.2rem; margin: 1.2rem 0 1.6rem; }
.scorebox .big { font: 700 2.4rem/1.1 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.scorebox .big + div { font: 14px var(--sans); color: var(--ink-2); margin-top: .2rem; }
.bar { display: inline-block; width: 5rem; height: 5px; background: var(--rule); border-radius: 999px; overflow: hidden; vertical-align: middle; }
.bar span { display: block; height: 100%; background: var(--right); }
.review-item { border: 1px solid var(--rule); border-left: 3px solid var(--wrong); border-radius: 0 10px 10px 0; padding: .8rem 1rem; margin: .8rem 0; background: var(--paper); }
.review-item .qtext { font: 15px/1.5 var(--sans); }
.review-item p { margin: .4rem 0 0; }
.v-wrong { color: var(--wrong); font-weight: 700; }
.v-right { color: var(--right); font-weight: 700; }

/* browse */
.browse-h { display: flex; justify-content: space-between; align-items: baseline; }
.browse-q { border: 1px solid var(--rule); border-radius: 10px; padding: .65rem .9rem; margin: .6rem 0; background: var(--paper); }
.browse-q summary { cursor: pointer; font: 600 14px/1.45 var(--sans); }
.browse-q summary::marker { color: var(--accent); }
.browse-q[open] summary { margin-bottom: .6rem; }
.bq-topic { font: 600 10px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-right: .3rem; }
.browse-q .qtext { font: 15px/1.55 var(--sans); }
.browse-opts { margin: .6rem 0; padding-left: 1.4rem; }
.browse-opts li { font: 14px/1.45 var(--sans); padding: .2rem 0; }
.browse-opts li.ok { color: var(--right); font-weight: 600; }
.tick { color: var(--right); }

@media (max-width: 640px) {
  .prac-top { align-items: flex-start; }
  .prac-clock { font-size: 17px; }
  .qcard { padding: 1rem; }
  .scorebox .big { font-size: 2rem; }
}

/* ---------- reference sheets: denser ---------- */
body.ref main { max-width: 60rem; }
body.ref h2 { margin-top: 1.8rem; }

@media print {
  body { font-size: 11pt; background: #fff; color: #000; }
  .crumbs, .pager, .ask, .btn, .task .row, .seq, .no-print { display: none !important; }
  details.solve { display: block; } details.solve > * { display: block; }
  h2 { break-after: avoid; } figure, .card, table, pre { break-inside: avoid; }
  a { color: #000; }
}