/* mlsys.css — course-specific components layered on lesson-kit.css.
   Uses only --lk-* tokens. */
/* "Your move": predict before you open (borrowed from play/gpu) */
.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)}

/* lab box */
.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-cobalt);padding:.1rem .45rem;border-radius:2px}
.lab-title{font-weight:700}
.lab-body{padding:.4rem 1rem .8rem}
.lab-body pre{background:var(--lk-paper)}

/* numeric widgets */
.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)}
.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(200px,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 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(150px,1fr));gap:.6rem}
.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.15rem;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)}
.w-verdict.mem{border-left:3px solid var(--lk-cobalt)}
.w-verdict.comp{border-left:3px solid var(--lk-forest)}
.w-verdict.bad{border-left:3px solid var(--lk-vermilion);background:var(--lk-warnbg)}
.w-bars{margin:.8rem 0 0}
.w-bar{display:grid;grid-template-columns:7.5rem 1fr 5.5rem;gap:.5rem;align-items:center;font-family:var(--lk-mono);font-size:.78rem;margin:.25rem 0}
.w-bar .track{height:.7rem;border:1px solid var(--lk-rule-soft);background:var(--lk-paper)}
.w-bar .fill{height:100%;background:var(--lk-cobalt)}
.w-bar .fill.alt{background:var(--lk-forest)}
.w-bar .num{text-align:right;font-variant-numeric:tabular-nums}

/* spec sheet / 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 list */
.srcs{font-size:.95rem}
.srcs li{margin:.25rem 0}

/* index: parts not yet written */
.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}
@media(max-width:560px){.w-bar{grid-template-columns:5.5rem 1fr 4.6rem}}
/* overview box heading: beat body.lk h2 specificity */
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}

/* warp stepper (ch2) */
.ws-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;align-items:start;margin-bottom:.8rem}
.lk pre.ws-code{margin:0;font-size:.78rem;line-height:1.55;background:var(--lk-paper);white-space:pre;overflow-x:auto}
.ws-line{display:inline-block;min-width:100%;padding:0 .3rem;border-radius:2px}
.ws-line.on{background:var(--lk-hl);box-shadow:inset 3px 0 0 var(--lk-cobalt);color:var(--lk-cobalt-dark);font-weight:600}
.ws-line.skip{color:var(--lk-rule)}
.ws-lanes{display:grid;grid-template-columns:repeat(8,1fr);gap:3px}
.ws-lane{font-family:var(--lk-mono);font-size:.68rem;text-align:center;padding:.3rem 0;border:1px solid var(--lk-rule-soft);border-radius:2px;background:var(--lk-paper);color:var(--lk-ink-soft);transition:background .14s}
.ws-lane.a{background:var(--lk-cobalt);border-color:var(--lk-cobalt);color:var(--lk-paper-light)}
.ws-lane.b{background:var(--lk-forest);border-color:var(--lk-forest);color:var(--lk-paper-light)}
.ws-lane.all{background:var(--lk-cobalt-dark);border-color:var(--lk-cobalt-dark);color:var(--lk-paper-light)}
.ws-lane.off{background:repeating-linear-gradient(135deg,var(--lk-paper),var(--lk-paper) 3px,var(--lk-rule-soft) 3px,var(--lk-rule-soft) 4px);color:var(--lk-rule)}
.ws-legend{font-family:var(--lk-mono);font-size:.7rem;color:var(--lk-ink-soft);margin-top:.45rem;display:flex;flex-wrap:wrap;gap:.2rem .5rem;align-items:center}
.ws-k{display:inline-block;width:.8rem;height:.8rem;border:1px solid var(--lk-rule-soft);vertical-align:-2px}
.ws-k.a{background:var(--lk-cobalt)} .ws-k.b{background:var(--lk-forest)} .ws-k.all{background:var(--lk-cobalt-dark)}
.ws-k.off{background:repeating-linear-gradient(135deg,var(--lk-paper),var(--lk-paper) 2px,var(--lk-rule-soft) 2px,var(--lk-rule-soft) 3px)}
.w .lk-step-btns{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.7rem}
.w .lk-step-btns button{font-family:var(--lk-utility);font-size:.85rem;font-weight:600;cursor:pointer;padding:.45rem .95rem;border-radius:3px;border:1px solid var(--lk-cobalt);background:var(--lk-cobalt);color:var(--lk-paper-light)}
.w .lk-step-btns button:hover{background:var(--lk-cobalt-dark)}
.w .lk-step-btns button:focus-visible{outline:2px solid var(--lk-cobalt);outline-offset:2px}
.w .lk-step-btns button.lk-step-reset{background:var(--lk-paper-light);color:var(--lk-ink-soft);border-color:var(--lk-rule)}
.w .lk-step-btns button:disabled{opacity:.4;cursor:not-allowed}
.w-bar .fill.bind{background:var(--lk-vermilion)}
@media(max-width:640px){.ws-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.ws-lane{transition:none}}