/* ============================================================================
   Little Red Math — Interactive Lab engine styles.
   Serious / editorial tone (Brilliant-ish), aligned to the site brand:
   warm cream paper, ink text, green accent, gold + brand-red sparingly.
   NO candy colours, mascots, confetti, or arcade scoring.
   All classes are .lab-* scoped so this never leaks into the prose lesson.
   ============================================================================ */
.lab{
  --lab-paper:#fffdf8; --lab-cream:#faf6ec; --lab-ink:#222a2f; --lab-soft:#5f6b72;
  --lab-faint:#8a949a; --lab-rule:#e6dfd0; --lab-grid:#ece4d3; --lab-axis:#9a8a6b;
  --lab-accent:#2f6f5e; --lab-accent-d:#235244; --lab-accent-bg:#e9f1ed;
  --lab-blue:#2f6691; --lab-gold:#bf8a1e; --lab-bad:#b4452f; --lab-bad-bg:#f7ece8;
  --lab-good:#2f6f5e; --lab-good-bg:#e8f1ec;
  --lab-sans:ui-rounded,"Avenir Next",Avenir,"Segoe UI",system-ui,sans-serif;
  --lab-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-family:var(--lab-sans); color:var(--lab-ink);
  border:1px solid var(--lab-rule); border-radius:16px; background:var(--lab-paper);
  box-shadow:0 1px 0 rgba(34,42,47,.04),0 14px 30px rgba(34,42,47,.07);
  overflow:hidden; margin:6px 0 30px;
}

/* ---- top bar: title + progress ---- */
.lab-bar{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--lab-rule);
  background:linear-gradient(180deg,#fffdf8,#fbf7ee)}
.lab-bar .lab-kicker{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--lab-accent)}
.lab-bar .lab-name{font-weight:800;font-size:15px;margin-top:1px}
.lab-bar .lab-spacer{flex:1}
.lab-prog{display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:150px}
.lab-prog .lab-count{font-size:12px;font-weight:700;color:var(--lab-soft)}
.lab-prog .lab-track{display:flex;gap:4px}
.lab-seg{width:16px;height:6px;border-radius:3px;background:var(--lab-rule)}
.lab-seg.done{background:var(--lab-accent)}
.lab-seg.now{background:var(--lab-gold)}

/* ---- step chips (the named arc) ---- */
.lab-chips{display:flex;flex-wrap:wrap;gap:6px;padding:11px 18px 4px}
.lab-chip{font-size:12px;font-weight:700;color:var(--lab-soft);background:#fff;border:1px solid var(--lab-rule);
  border-radius:999px;padding:4px 11px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .12s}
.lab-chip:hover{border-color:var(--lab-accent);color:var(--lab-accent-d)}
.lab-chip .n{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;
  background:var(--lab-cream);color:var(--lab-soft);font-size:10px;font-weight:800}
.lab-chip.seen .n{background:var(--lab-accent);color:#fff}
.lab-chip.active{background:var(--lab-ink);color:#fff;border-color:var(--lab-ink)}
.lab-chip.active .n{background:var(--lab-gold);color:#fff}
.lab-part{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--lab-faint);
  align-self:center;margin:0 2px}

/* ---- the scene body ---- */
.lab-scene{display:none;padding:16px 20px 20px}
.lab-scene.active{display:block;animation:lab-pop .28s ease both}
@keyframes lab-pop{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.lab-h{font-family:var(--lab-serif);font-weight:600;font-size:22px;letter-spacing:-.2px;margin:0 0 3px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.lab-h .lab-tag{font-family:var(--lab-sans);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--lab-accent);background:var(--lab-accent-bg);border-radius:6px;padding:2px 8px}
.lab-say{font-size:16px;line-height:1.55;color:var(--lab-ink);margin:8px 0;max-width:62ch}
.lab-say.soft{color:var(--lab-soft)}
.lab-say b{color:var(--lab-accent-d)}
.lab-note{font-size:14.5px;line-height:1.5;color:var(--lab-ink);background:var(--lab-cream);
  border-left:3px solid var(--lab-gold);border-radius:0 10px 10px 0;padding:10px 14px;margin:12px 0}
.lab-note b{color:var(--lab-gold)}

/* ---- two-column stage: figure | controls ---- */
.lab-stage{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start;margin-top:10px}
.lab-fig{flex:1 1 320px;min-width:280px;max-width:460px}
.lab-side{flex:1 1 260px;min-width:240px}
svg.lab-graph{width:100%;height:auto;display:block;touch-action:none;background:var(--lab-paper);
  border:1px solid var(--lab-rule);border-radius:12px}
svg.lab-canvas{width:100%;height:auto;display:block;touch-action:none;background:var(--lab-paper);
  border:1px solid var(--lab-rule);border-radius:12px}
svg.lab-canvas.bare{background:transparent;border:none}
.lab-grid-line{stroke:var(--lab-grid);stroke-width:1}
.lab-grid-axis{stroke:var(--lab-axis);stroke-width:2;stroke-linecap:round}
.lab-tick{fill:var(--lab-axis);font:600 11px var(--lab-sans)}
.lab-readout{font-size:13.5px;color:var(--lab-soft);font-weight:700;margin-top:8px}
.lab-readout b{color:var(--lab-ink)}

/* ---- equation display (live-updating, colour-coded) ---- */
.lab-eq{font-family:var(--lab-serif);font-weight:600;font-size:27px;text-align:center;margin:4px 0 8px;letter-spacing:.5px}
.lab-eq .m{color:var(--lab-accent-d)}
.lab-eq .b{color:var(--lab-gold)}
.lab-eq .v{color:var(--lab-blue)}

/* ---- controls: sliders + steppers ---- */
.lab-ctl{margin:14px 0}
.lab-ctl label{font-size:14px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:10px}
.lab-ctl .lab-val{font-family:var(--lab-serif);font-weight:600;background:var(--lab-ink);color:#fff;border-radius:8px;
  padding:1px 11px;min-width:46px;text-align:center;font-size:16px}
input[type=range].lab-range{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px;
  background:var(--lab-rule);outline:none;margin-top:9px}
input[type=range].lab-range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;
  background:var(--lab-accent);border:3px solid #fff;box-shadow:0 1px 4px rgba(34,42,47,.3);cursor:pointer}
input[type=range].lab-range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--lab-accent);
  border:3px solid #fff;cursor:pointer}
input[type=range].lab-range.is-b::-webkit-slider-thumb{background:var(--lab-gold)}
input[type=range].lab-range.is-b::-moz-range-thumb{background:var(--lab-gold)}

.lab-step{display:inline-flex;align-items:center;gap:7px;vertical-align:middle}
.lab-step button{width:32px;height:32px;border-radius:8px;border:1px solid var(--lab-rule);background:#fff;
  font-size:18px;font-weight:800;line-height:1;cursor:pointer;color:var(--lab-ink);transition:all .1s}
.lab-step button:hover{border-color:var(--lab-accent);color:var(--lab-accent-d)}
.lab-step button:active{transform:translateY(1px)}
.lab-step .num{font-family:var(--lab-serif);font-size:19px;font-weight:600;min-width:30px;text-align:center}

/* ---- buttons ---- */
.lab-btn{font-family:var(--lab-sans);font-weight:700;font-size:15px;color:#fff;background:var(--lab-accent);
  border:none;border-radius:10px;padding:10px 16px;cursor:pointer;box-shadow:0 2px 0 var(--lab-accent-d);transition:all .08s}
.lab-btn:hover{filter:brightness(1.05)}
.lab-btn:active{transform:translateY(2px);box-shadow:none}
.lab-btn.ghost{background:#fff;color:var(--lab-ink);border:1px solid var(--lab-rule);box-shadow:0 2px 0 rgba(34,42,47,.1)}
.lab-btn.ghost:hover{border-color:var(--lab-accent);color:var(--lab-accent-d)}
.lab-btn.blue{background:var(--lab-blue);box-shadow:0 2px 0 #244e6f}
.lab-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}
.lab-btnrow{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}

/* ---- choices (predict, then check) ---- */
.lab-choices{display:flex;gap:9px;flex-wrap:wrap;margin:6px 0}
.lab-choice{font-family:var(--lab-sans);font-weight:700;font-size:15px;border:1px solid var(--lab-rule);background:#fff;
  color:var(--lab-ink);border-radius:10px;padding:9px 15px;cursor:pointer;transition:all .1s}
.lab-choice:hover{border-color:var(--lab-accent)}
.lab-choice.sel{background:var(--lab-accent-bg);border-color:var(--lab-accent)}
.lab-choice.correct{background:var(--lab-good-bg);border-color:var(--lab-good);color:var(--lab-accent-d)}
.lab-choice.wrong{background:var(--lab-bad-bg);border-color:var(--lab-bad);color:var(--lab-bad)}
.lab-choice:disabled{cursor:default}

/* ---- worked check / substitution panel ---- */
.lab-work{font-family:var(--lab-serif);font-size:17px;background:#f4f7fb;border:1px solid #dce6f0;border-radius:10px;
  padding:11px 14px;margin-top:11px;min-height:20px;line-height:1.5;color:#23425b}
.lab-work .t{color:var(--lab-good);font-weight:700}
.lab-work .f{color:var(--lab-bad);font-weight:700}

/* ---- feedback line (explains the why) ---- */
.lab-fb{font-size:15px;font-weight:700;line-height:1.5;min-height:22px;margin-top:11px}
.lab-fb.good{color:var(--lab-good)}
.lab-fb.bad{color:var(--lab-bad)}
.lab-fb .why{font-weight:400;color:var(--lab-soft);display:block;margin-top:2px}

/* ---- small data table ---- */
table.lab-tbl{border-collapse:collapse;width:100%;margin-top:10px;font-family:var(--lab-serif)}
table.lab-tbl th,table.lab-tbl td{border:1px solid var(--lab-rule);padding:6px 8px;text-align:center;font-size:15px}
table.lab-tbl th{background:var(--lab-cream);font-family:var(--lab-sans);font-size:12px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--lab-soft)}
table.lab-tbl td.x{color:var(--lab-blue);font-weight:600}
table.lab-tbl td.y{color:var(--lab-accent-d);font-weight:600}
table.lab-tbl td.fill{animation:lab-cell .3s ease}
@keyframes lab-cell{from{background:#fbf2d4}to{background:transparent}}

/* ---- task checklist rows ---- */
.lab-task{display:flex;align-items:center;gap:10px;background:var(--lab-cream);border:1px solid var(--lab-rule);
  border-radius:10px;padding:9px 12px;margin:8px 0;font-family:var(--lab-serif);font-size:16px;font-weight:600}
.lab-task.done{background:var(--lab-good-bg);border-color:var(--lab-good)}
.lab-task .chk{margin-left:auto;font-weight:800;font-size:17px;color:var(--lab-good)}

/* ---- footer nav ---- */
.lab-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:13px 18px;border-top:1px solid var(--lab-rule);background:#fbf7ee}
.lab-dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;flex:1}
.lab-dot{width:8px;height:8px;border-radius:50%;background:var(--lab-rule)}
.lab-dot.now{background:var(--lab-gold)}.lab-dot.seen{background:var(--lab-accent)}

/* ---- legend ---- */
.lab-legend{font-size:13px;color:var(--lab-soft);font-weight:600;margin-top:9px;display:flex;flex-wrap:wrap;gap:12px}
.lab-legend .sw{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:5px}

@media (max-width:560px){
  .lab-prog{min-width:96px}.lab-seg{width:11px}
  .lab-h{font-size:19px}.lab-eq{font-size:23px}
}

/* ---- INLINE figure inside lesson prose (compact, not a full card) ---- */
.lab.lab-inline{position:relative;box-shadow:none;border:1px solid var(--lab-rule);border-radius:12px;
  margin:18px 0;padding:14px 16px;overflow:visible;background:var(--lab-paper)}
.lab-inline .lab-do{padding-right:78px}
.lab-reset{position:absolute;top:9px;right:11px;z-index:3;font-family:var(--lab-sans);font-size:12px;
  font-weight:700;color:var(--lab-soft);background:#fff;border:1px solid var(--lab-rule);border-radius:8px;
  padding:4px 10px;cursor:pointer;line-height:1}
.lab-reset:hover{border-color:var(--lab-accent);color:var(--lab-accent-d)}
.lab-reset:active{transform:translateY(1px)}
.lab.lab-inline .lab-stage{margin-top:8px;gap:18px}
.lab-inline .lab-do{font-family:var(--lab-sans);font-weight:800;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--lab-accent);display:flex;align-items:center;gap:7px;margin:0 0 8px}
.lab-inline .lab-do::before{content:"\1F449";/* 👉 */ -webkit-text-fill-color:initial}
.lab-inline.lab-inline-done{border-color:var(--lab-good);background:var(--lab-good-bg)}

/* ---- page-level: lab-led lessons go full width (no TOC sidebar column) ---- */
.lp-layout-full{grid-template-columns:1fr}

/* ---- page-level: the collapsible written reference under the lab ---- */
.lp-lab-jump{font-family:var(--lab-sans);font-size:13.5px;margin:2px 0 22px}
.lp-lab-jump a{color:#5f6b72}
.lp-reference{border-top:2px solid #222a2f;margin-top:6px}
.lp-reference>summary{list-style:none;cursor:pointer;padding:16px 2px;font-family:ui-rounded,"Avenir Next",Avenir,"Segoe UI",system-ui,sans-serif;
  font-size:16px;color:#222a2f;display:flex;align-items:center;gap:8px}
.lp-reference>summary::-webkit-details-marker{display:none}
.lp-reference>summary::after{content:"▸";margin-left:auto;color:#8a949a;font-size:14px}
.lp-reference[open]>summary::after{content:"▾"}
.lp-reference>summary:hover{color:#235244}
.lp-reference-body{padding-top:4px}