/* alchemy.css — course components layered on lesson-kit.css. Uses only --lk-* tokens.
   Shared with the ML Systems course: "Your move", widgets, callouts, sources.
   New here: sealed predictions (.pred), audit drills (.drill), number tags (.tag-m/d/i), the ledger. */

/* "Your move": think, then open */
.lk details.ym{border-left:3px solid var(--lk-vermilion)}
.lk details.ym summary{color:var(--lk-vermilion)}
.lk details.ym summary::after{content:" (think, then open)";font-weight:400;color:var(--lk-ink-soft);font-size:.9em}
.lk details.ym[open] summary{color:var(--lk-vermilion)}

/* what kind of number is this: measured by someone, derived by arithmetic, illustrative model */
.tag-m,.tag-d,.tag-i{display:inline-block;font-family:var(--lk-utility);font-size:.62rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:.05rem .35rem .02rem;border-radius:2px;vertical-align:.12em;white-space:nowrap;line-height:1.4}
.tag-m{color:var(--lk-forest);border:1px solid var(--lk-forest);background:var(--lk-okbg)}
.tag-d{color:var(--lk-cobalt);border:1px solid var(--lk-cobalt);background:var(--lk-hl)}
.tag-i{color:var(--lk-ink-soft);border:1px dashed var(--lk-rule);background:var(--lk-paper)}

/* key numbers */
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.5rem;margin:1.2rem 0}
.specs div{border:1px solid var(--lk-rule-soft);border-radius:3px;padding:.45rem .65rem;background:var(--lk-paper-light)}
.specs b{display:block;font-family:var(--lk-mono);font-size:1.05rem;color:var(--lk-cobalt-dark)}
.specs span{font-family:var(--lk-utility);font-size:.72rem;color:var(--lk-ink-soft)}

/* sources */
.srcs{font-size:.95rem}
.srcs li{margin:.25rem 0}

/* numeric widgets (same shape as the ML Systems course) */
.w{border:1px solid var(--lk-rule);border-radius:3px;padding:1rem 1.1rem;margin:1.6rem 0;background:var(--lk-paper-light)}
.w h4{margin:0 0 .2rem;color:var(--lk-cobalt-dark);font-family:var(--lk-utility);font-size:1rem}
.w .w-sub{margin:0 0 .8rem;font-size:.9rem;color:var(--lk-ink-soft)}
.w-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.7rem 1.2rem;margin-bottom:.9rem}
.w-controls label{display:flex;flex-direction:column;gap:.2rem;font-family:var(--lk-utility);font-size:.8rem;font-weight:600;color:var(--lk-ink-soft)}
.w-controls label.chk{flex-direction:row;align-items:center;gap:.45rem}
.w-controls output{font-family:var(--lk-mono);font-weight:600;color:var(--lk-cobalt-dark)}
.w-controls input[type=range]{width:100%;accent-color:var(--lk-cobalt)}
.w-controls select{font:inherit;font-family:var(--lk-mono);padding:.3rem .4rem;border:1px solid var(--lk-rule);border-radius:3px;background:var(--lk-paper)}
.w-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6rem;margin-top:.7rem}
.w-stat{border:1px solid var(--lk-rule-soft);border-radius:3px;padding:.5rem .7rem;background:var(--lk-paper)}
.w-stat .k{display:block;font-family:var(--lk-utility);font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--lk-ink-soft)}
.w-stat .v{display:block;font-family:var(--lk-mono);font-size:1.1rem;font-weight:600;color:var(--lk-ink);font-variant-numeric:tabular-nums}
.w-verdict{margin-top:.7rem;padding:.5rem .75rem;border-radius:3px;font-size:.95rem;background:var(--lk-paper);border:1px solid var(--lk-rule-soft);border-left:3px solid var(--lk-cobalt)}
.w-verdict.good{border-left-color:var(--lk-forest)}
.w-verdict.bad{border-left-color:var(--lk-vermilion);background:var(--lk-warnbg)}
.w-plot{display:block;width:100%;height:auto;background:var(--lk-paper);border:1px solid var(--lk-rule-soft);border-radius:3px;font-family:var(--lk-mono)}
.w-plot text{font-family:var(--lk-mono);font-size:11px;fill:var(--lk-ink-soft)}
.w-plot .ax{stroke:var(--lk-rule);stroke-width:1;fill:none}
.w-plot .grid{stroke:var(--lk-rule-soft);stroke-width:.6;fill:none}
.w-plot .c-a{stroke:var(--lk-cobalt);stroke-width:2;fill:none}
.w-plot .c-b{stroke:var(--lk-vermilion);stroke-width:2;fill:none}
.w-plot .c-g{stroke:var(--lk-forest);stroke-width:2;fill:none}
.w-plot .c-k{stroke:var(--lk-ink-soft);stroke-width:1.4;fill:none}
.w-plot .c-dash{stroke-dasharray:5 4}
.w-plot .pt-a{fill:var(--lk-cobalt)} .w-plot .pt-b{fill:var(--lk-vermilion)} .w-plot .pt-g{fill:var(--lk-forest)} .w-plot .pt-k{fill:var(--lk-ink-soft)}
.w-plot .lbl-a{fill:var(--lk-cobalt-dark);font-weight:600} .w-plot .lbl-b{fill:var(--lk-vermilion);font-weight:600} .w-plot .lbl-g{fill:var(--lk-forest);font-weight:600}
.w-btns{display:flex;gap:.4rem;flex-wrap:wrap;margin:.6rem 0 0}
.w-btn,.pred button,.drill button,.ledger-tools button{font-family:var(--lk-utility);font-size:.85rem;font-weight:600;cursor:pointer;padding:.42rem .9rem;border-radius:3px;
  border:1px solid var(--lk-cobalt);background:var(--lk-cobalt);color:var(--lk-paper-light)}
.w-btn:hover,.pred button:hover,.drill button:hover,.ledger-tools button:hover{background:var(--lk-cobalt-dark)}
.w-btn.alt,.pred button.alt,.drill button.alt,.ledger-tools button.alt{background:var(--lk-paper-light);color:var(--lk-ink-soft);border-color:var(--lk-rule)}
.w-btn:focus-visible,.pred button:focus-visible,.drill button:focus-visible{outline:2px solid var(--lk-cobalt);outline-offset:2px}
.pred button:disabled,.drill button:disabled{opacity:.4;cursor:not-allowed}
.w-legend{display:flex;flex-wrap:wrap;gap:.3rem 1rem;font-family:var(--lk-mono);font-size:.74rem;color:var(--lk-ink-soft);margin-top:.5rem}
.w-legend i{display:inline-block;width:1.4rem;height:0;border-top:2px solid;vertical-align:.25em;margin-right:.35rem}
.w-legend i.a{border-color:var(--lk-cobalt)} .w-legend i.b{border-color:var(--lk-vermilion)} .w-legend i.g{border-color:var(--lk-forest)} .w-legend i.k{border-color:var(--lk-ink-soft)}
.w-legend i.dash{border-top-style:dashed}
.w-legend i.dot{width:.6rem;height:.6rem;border:0;border-radius:50%;vertical-align:0}
.w-legend i.dot.a{background:var(--lk-cobalt)} .w-legend i.dot.b{background:var(--lk-vermilion)} .w-legend i.dot.g{background:var(--lk-forest)} .w-legend i.dot.k{background:var(--lk-ink-soft)}

/* ---------- sealed predictions ---------- */
.pred{border:1px solid var(--lk-rule);border-left:3px solid var(--lk-cobalt);border-radius:3px;margin:1.6rem 0;background:var(--lk-paper-light);padding:.85rem 1rem .9rem}
.pred-head{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap;margin-bottom:.35rem}
.pred-tag{font-family:var(--lk-utility);font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lk-paper-light);background:var(--lk-cobalt);padding:.08rem .45rem;border-radius:2px}
.pred-state{font-family:var(--lk-mono);font-size:.74rem;color:var(--lk-ink-soft)}
.pred-q{margin:.2rem 0 .6rem}
.pred-q p:last-child{margin-bottom:0}
.pred-opts{list-style:none;padding:0;margin:.4rem 0 .7rem;display:flex;flex-direction:column;gap:.3rem}
.pred-opts li{margin:0}
.pred-opts label{display:flex;gap:.55rem;align-items:baseline;cursor:pointer;padding:.3rem .5rem;border:1px solid var(--lk-rule-soft);border-radius:3px;background:var(--lk-paper);font-size:.95rem}
.pred-opts label:hover{border-color:var(--lk-cobalt)}
.pred-opts input{accent-color:var(--lk-cobalt);margin:0;flex:0 0 auto;transform:translateY(1px)}
.pred-opts li.chosen label{border-color:var(--lk-cobalt);box-shadow:inset 3px 0 0 var(--lk-cobalt)}
.pred-opts .mark{margin-left:auto;font-family:var(--lk-utility);font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;padding-left:.5rem}
.pred-opts li.ok label{border-color:var(--lk-forest);background:var(--lk-okbg)}
.pred-opts li.ok .mark{color:var(--lk-forest)}
.pred-opts li.miss label{border-color:var(--lk-vermilion);background:var(--lk-warnbg)}
.pred-opts li.miss .mark{color:var(--lk-vermilion)}
.pred-conf{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;font-family:var(--lk-utility);font-size:.8rem;color:var(--lk-ink-soft);margin:.1rem 0 .7rem}
.pred-conf label{display:inline-flex;gap:.3rem;align-items:center;cursor:pointer;border:1px solid var(--lk-rule-soft);border-radius:3px;padding:.2rem .5rem;background:var(--lk-paper)}
.pred-conf input{accent-color:var(--lk-cobalt);margin:0}
.pred-act{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.pred-why{margin-top:.8rem;padding-top:.7rem;border-top:1px solid var(--lk-rule-soft)}
.pred.ready .pred-why{display:none}
.pred.ready.revealed .pred-why{display:block}
.pred-why p:last-child{margin-bottom:0}
.pred-src{font-family:var(--lk-mono);font-size:.74rem;color:var(--lk-ink-soft);margin:.5rem 0 0}
.pred.locked .pred-opts label,.pred.locked .pred-conf label{cursor:default}
.pred.locked .pred-opts label:hover{border-color:var(--lk-rule-soft)}
.pred .pred-reset,.drill .pred-reset{font-family:var(--lk-mono);font-size:.72rem;font-weight:400;color:var(--lk-ink-soft);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer;margin-left:auto}
.pred .pred-reset:hover,.drill .pred-reset:hover{background:none;color:var(--lk-cobalt)}

/* ---------- audit drills: a fictional research log, then what would you challenge ---------- */
.drill{border:1px solid var(--lk-rule);border-left:3px solid var(--lk-vermilion);border-radius:3px;margin:1.8rem 0;background:var(--lk-paper-light);padding:.85rem 1rem .9rem}
.drill-head{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap;margin-bottom:.5rem}
.drill-tag{font-family:var(--lk-utility);font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lk-paper-light);background:var(--lk-vermilion);padding:.08rem .45rem;border-radius:2px}
.drill-title{font-family:var(--lk-utility);font-weight:700;font-size:.98rem}
.drill-fic{font-family:var(--lk-mono);font-size:.7rem;color:var(--lk-ink-soft);margin-left:auto}
.drill-log{font-family:var(--lk-mono);font-size:.8rem;line-height:1.55;background:var(--lk-paper);border:1px solid var(--lk-rule-soft);border-radius:3px;padding:.7rem .85rem;margin:.3rem 0 .8rem;white-space:pre-wrap;overflow-wrap:anywhere}
.drill-log b{color:var(--lk-ink)}
.drill-log .who{color:var(--lk-cobalt-dark);font-weight:600}
.drill-q{margin:.2rem 0 .5rem;font-weight:600}
.drill-opts{list-style:none;padding:0;margin:.3rem 0 .7rem;display:flex;flex-direction:column;gap:.3rem}
.drill-opts label{display:flex;gap:.55rem;align-items:baseline;cursor:pointer;padding:.3rem .5rem;border:1px solid var(--lk-rule-soft);border-radius:3px;background:var(--lk-paper);font-size:.95rem}
.drill-opts input{accent-color:var(--lk-vermilion);margin:0;flex:0 0 auto;transform:translateY(1px)}
.drill-opts .why{font-size:.88rem;color:var(--lk-ink-soft);margin:.25rem 0 .1rem 1.6rem}
.drill.ready .drill-opts .why{display:none}
.drill.ready.checked .drill-opts .why{display:block}
.drill-opts .mark{margin-left:auto;font-family:var(--lk-utility);font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;padding-left:.5rem}
.drill.checked .drill-opts li.hit label{border-color:var(--lk-forest);background:var(--lk-okbg)}
.drill.checked .drill-opts li.hit .mark{color:var(--lk-forest)}
.drill.checked .drill-opts li.missed label,.drill.checked .drill-opts li.false label{border-color:var(--lk-vermilion);background:var(--lk-warnbg)}
.drill.checked .drill-opts li.missed .mark,.drill.checked .drill-opts li.false .mark{color:var(--lk-vermilion)}
.drill.checked .drill-opts li.skip .mark{color:var(--lk-ink-soft)}
.drill-why{margin-top:.8rem;padding-top:.7rem;border-top:1px solid var(--lk-rule-soft)}
.drill.ready .drill-why{display:none}
.drill.ready.checked .drill-why{display:block}
.drill-why p:last-child{margin-bottom:0}
.drill-score{font-family:var(--lk-mono);font-size:.78rem;color:var(--lk-ink-soft)}

/* ---------- the director's checklist ---------- */
.checklist{counter-reset:ck;list-style:none;padding:0;margin:1.2rem 0}
.checklist li{counter-increment:ck;position:relative;padding:.5rem .7rem .5rem 2.6rem;border:1px solid var(--lk-rule-soft);border-radius:3px;background:var(--lk-paper-light);margin:.35rem 0}
.checklist li::before{content:counter(ck);position:absolute;left:.8rem;top:.5rem;font-family:var(--lk-mono);font-weight:700;color:var(--lk-vermilion)}

/* ---------- labs on Modal ---------- */
.lab{border:1px solid var(--lk-rule);border-radius:3px;margin:1.6rem 0;background:var(--lk-paper-light)}
.lab-head{display:flex;gap:.8rem;align-items:baseline;flex-wrap:wrap;padding:.6rem 1rem;border-bottom:1px solid var(--lk-rule-soft)}
.lab-tag{font-family:var(--lk-utility);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lk-paper-light);background:var(--lk-forest);padding:.1rem .45rem;border-radius:2px}
.lab-title{font-weight:700}
.lab-body{padding:.4rem 1rem .8rem}
.lab-body pre{background:var(--lk-paper)}

/* ---------- ledger page ---------- */
.ledger-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.5rem;margin:1.2rem 0}
.ledger-tools{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:1rem 0}
.ledger-tools label{font-family:var(--lk-utility);font-size:.85rem}
.ledger-empty{font-style:italic;color:var(--lk-ink-soft)}
.lk table.ledger{font-size:.9rem}
.lk table.ledger td.r{text-align:right;font-family:var(--lk-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.lk table.ledger td.hit{color:var(--lk-forest);font-weight:700}
.lk table.ledger td.miss{color:var(--lk-vermilion);font-weight:700}
.tw{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.tw table{min-width:100%}

/* index */
.idx-list li.later a,.idx-list li.later span.row{color:var(--lk-ink-soft)}
.idx-list li.later span.row{display:flex;align-items:baseline;gap:.9rem;padding:.55rem .2rem}
.idx-status{font-family:var(--lk-mono);font-size:.7rem;color:var(--lk-ink-soft);border:1px solid var(--lk-rule-soft);border-radius:2px;padding:0 .35rem;margin-left:.4rem;white-space:nowrap}
body.lk .lk-overview h2{font-size:1.05rem;margin:.1rem 0 .5rem;padding:0;border:0}
body.lk .lk-overview h2::before{display:none}

/* math-ish display lines */
.eq{font-family:var(--lk-mono);font-size:.9rem;background:var(--lk-paper-light);border:1px solid var(--lk-rule-soft);border-radius:3px;padding:.55rem .8rem;margin:1rem 0;overflow-x:auto;white-space:nowrap}
.eq .c{color:var(--lk-ink-soft)}

@media(max-width:560px){
  .pred,.drill,.w{padding-left:.75rem;padding-right:.75rem}
  .drill-fic{margin-left:0;flex-basis:100%}
  .lk-toc ol{columns:1}
}
@media print{.pred-act,.drill .w-btns{display:none}.pred-why,.drill-why{display:block}}
.lk td.r{text-align:right;font-family:var(--lk-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
/* keep µ lower-case inside the kit's uppercase headings (µP would read as "MP") */
.nt{text-transform:none}
/* the kit wraps flex labels; option rows keep the box, the text and the mark on one line */
body.lk .pred-opts label,body.lk .drill-opts label{flex-wrap:nowrap}
.pred-opts label > span:not(.mark),.drill-opts label > span:not(.mark){flex:1 1 auto;min-width:0}