/* ==================== LEARN (v6.1) ====================
   Page-specific styles. Everything colour-related comes from
   engvector.css tokens so the light theme follows for free. */

.lrn-lede{color:var(--muted); font-size:.92rem; line-height:1.65; max-width:74ch; margin:14px 0 0}
.lrn-lede b{color:var(--text)}
.lrn-empty{color:var(--dim); font-family:'IBM Plex Mono',monospace; font-size:.72rem; padding:20px 0}

/* ---------- shared section furniture ---------- */
.lrn-tools{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:16px 0 4px}
.lrn-sel{background:var(--panel-2); color:var(--text); border:1px solid var(--line-2);
  border-radius:2px; padding:8px 10px; font:500 .78rem/1 'IBM Plex Sans',sans-serif; min-width:230px}
.lrn-seg{display:inline-flex; border:1px solid var(--line-2); border-radius:2px; overflow:hidden}
.lrn-seg button{background:transparent; color:var(--dim); border:0; padding:8px 13px; cursor:pointer;
  font:600 .66rem/1 'IBM Plex Mono',monospace; letter-spacing:.1em}
.lrn-seg button+button{border-left:1px solid var(--line-2)}
.lrn-seg button.on{background:var(--teal); color:#04171d}

/* ---------- 1 · continuity ---------- */
.cont-stat{display:flex; gap:20px; align-items:flex-start; padding:18px 0 22px;
  border-bottom:1px solid var(--line)}
.cs-num{font:700 3.3rem/.9 'IBM Plex Sans Condensed',sans-serif; color:var(--teal); flex:none}
.cs-num span{font-size:1.3rem; margin-left:2px}
.cs-txt b{display:block; color:var(--text); font-size:.95rem; margin-bottom:6px}
.cs-txt span{color:var(--muted); font-size:.83rem; line-height:1.6}
.cs-go{display:inline-block; margin:12px 8px 0 0; text-decoration:none;
  font:600 .64rem/1 'IBM Plex Mono',monospace; letter-spacing:.08em;
  color:var(--teal); border:1px solid var(--teal); border-radius:2px; padding:8px 11px}
.cs-go:hover{background:color-mix(in srgb,var(--teal) 12%,transparent)}
.cs-go.ghost{color:var(--dim); border-color:var(--line-2)}
.cs-go.ghost:hover{color:var(--text); border-color:var(--ink); background:transparent}

/* the all-21 comparison strip */
.cont-rank-h{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin:26px 0 12px; padding-top:18px; border-top:1px solid var(--line)}
.crh-k{font:600 .72rem/1 'IBM Plex Mono',monospace; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text)}
.crh-s{font:400 .68rem/1.3 'IBM Plex Mono',monospace; color:var(--dim)}
#contRank{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:5px 18px}
.crow{display:grid; grid-template-columns:44px 1fr 38px; gap:9px; align-items:center;
  background:transparent; border:0; border-radius:2px; padding:5px 6px; cursor:pointer; text-align:left}
.crow:hover{background:var(--panel-2)}
.crow.on{background:color-mix(in srgb,var(--teal) 12%,transparent)}
.cr-c{font:600 .68rem/1 'IBM Plex Mono',monospace; color:var(--muted)}
.crow.on .cr-c{color:var(--teal)}
.cr-bar{height:6px; background:var(--line); border-radius:1px; overflow:hidden}
.cr-bar i{display:block; height:100%; background:var(--dim)}
.r-hi .cr-bar i{background:var(--teal)}
.r-mid .cr-bar i{background:var(--cyan)}
.r-lo .cr-bar i{background:var(--dim)}
.cr-p{font:600 .66rem/1 'IBM Plex Mono',monospace; color:var(--dim); text-align:right}
.crow.on .cr-p{color:var(--teal)}

.cont-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px; margin-top:20px}
.cc-h{font:600 .62rem/1 'IBM Plex Mono',monospace; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); padding-bottom:8px; border-bottom:1px solid var(--line); margin-bottom:10px}
.cc-row{padding:8px 0 8px 11px; border-left:2px solid var(--line-2); margin-bottom:7px}
.cc-row.b-cont{border-left-color:var(--teal)}
.cc-row.b-built{border-left-color:var(--cyan)}
.cc-row.b-new{border-left-color:var(--line-2)}
.cc-m{display:block; color:var(--text); font-size:.8rem; line-height:1.35}
.cc-b{display:inline-block; font:600 .55rem/1 'IBM Plex Mono',monospace; letter-spacing:.12em;
  margin-top:5px; padding:3px 5px; border-radius:2px}
.b-cont .cc-b{color:var(--teal); background:color-mix(in srgb,var(--teal) 14%,transparent)}
.b-built .cc-b{color:var(--cyan); background:color-mix(in srgb,var(--cyan) 14%,transparent)}
.b-new .cc-b{color:var(--dim); background:color-mix(in srgb,var(--dim) 14%,transparent)}
.cc-f{display:block; color:var(--dim); font-size:.68rem; margin-top:4px}

/* ---------- 2 · diagnostic ---------- */
.diag-prog{height:3px; background:var(--line); margin:16px 0 22px; position:relative}
.diag-prog i{position:absolute; left:0; top:0; bottom:0; width:0; background:var(--teal); transition:width .25s}
.dq{padding:18px 0; border-bottom:1px solid var(--line)}
.dq-h{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.dq-n{font:700 .68rem/1 'IBM Plex Mono',monospace; color:var(--teal); letter-spacing:.08em}
.dq-t{font:500 .6rem/1 'IBM Plex Mono',monospace; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); border:1px solid var(--line-2); padding:3px 6px; border-radius:2px}
.dq-q{color:var(--text); font-size:.92rem; line-height:1.55; margin:0 0 12px}
.dq-o{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:8px}
.dopt{display:flex; align-items:center; gap:9px; text-align:left; cursor:pointer;
  background:var(--panel-2); color:var(--text); border:1px solid var(--line-2); border-radius:2px;
  padding:11px 12px; font:500 .82rem/1.3 'IBM Plex Sans',sans-serif; transition:border-color .15s,background .15s}
.dopt:hover:not(:disabled){border-color:var(--ink)}
.dopt:disabled{cursor:default}
.do-k{font:700 .62rem/1 'IBM Plex Mono',monospace; color:var(--dim); border:1px solid var(--line-2);
  border-radius:2px; padding:3px 5px; flex:none}
.dopt.sel{border-color:var(--teal)} .dopt.sel .do-k{color:var(--teal); border-color:var(--teal)}
.dopt.right{border-color:var(--green); background:color-mix(in srgb,var(--green) 10%,transparent)}
.dopt.right .do-k{color:var(--green); border-color:var(--green)}
.dopt.wrong{border-color:var(--rose); background:color-mix(in srgb,var(--rose) 10%,transparent)}
.dopt.wrong .do-k{color:var(--rose); border-color:var(--rose)}
.dq-w{color:var(--muted); font-size:.8rem; line-height:1.6; margin:12px 0 0; padding-left:12px;
  border-left:2px solid var(--line-2)}
.dq.ok .dq-w{border-left-color:var(--green)}
.dq.bad .dq-w{border-left-color:var(--rose)}

.diag-go{display:flex; gap:10px; align-items:center; margin-top:20px; flex-wrap:wrap}
.diag-go button{background:var(--teal); color:#04171d; border:0; border-radius:2px; cursor:pointer;
  padding:11px 20px; font:600 .74rem/1 'IBM Plex Mono',monospace; letter-spacing:.1em}
.diag-go button:disabled{background:var(--line-2); color:var(--dim); cursor:default}
.diag-go button.ghost{background:transparent; color:var(--dim); border:1px solid var(--line-2)}

.dres{display:flex; gap:20px; align-items:flex-start; margin-top:22px; padding:20px;
  background:var(--panel-2); border-left:3px solid var(--teal)}
.dr-score{font:700 2.6rem/1 'IBM Plex Sans Condensed',sans-serif; color:var(--text); flex:none}
.dr-score span{font-size:1rem; color:var(--dim); margin-left:3px}
.dr-band{font:600 .74rem/1 'IBM Plex Mono',monospace; letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px}
.dr-txt p{color:var(--muted); font-size:.86rem; line-height:1.6; margin:0 0 12px}
.dr-foot{font-size:.78rem !important; color:var(--dim) !important}
.dr-gaps{display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin-bottom:12px}
.drg-k{font:600 .58rem/1 'IBM Plex Mono',monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
.drg{font:600 .64rem/1 'IBM Plex Mono',monospace; color:var(--amber);
  border:1px solid var(--amber); border-radius:2px; padding:5px 7px}

/* ---------- 3 · the lab ---------- */
#labGrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(430px,1fr)); gap:20px; margin-top:20px}
.sim{background:var(--panel); border:1px solid var(--line); display:flex; flex-direction:column}
.sim.flash{animation:simflash 1.1s ease-out}
@keyframes simflash{
  0%{box-shadow:0 0 0 1px var(--teal),0 0 26px -4px var(--teal)}
  100%{box-shadow:0 0 0 1px transparent,0 0 0 transparent}
}
@media (prefers-reduced-motion:reduce){ .sim.flash{animation:none; outline:2px solid var(--teal)} }
.sim-head{display:flex; align-items:baseline; gap:9px; padding:13px 15px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.sim-meta{display:flex; gap:7px; align-items:center; flex-wrap:wrap; width:100%; margin-top:9px}
.sm-c{font:600 .58rem/1 'IBM Plex Mono',monospace; letter-spacing:.1em; color:var(--dim);
  border:1px solid var(--line-2); border-radius:2px; padding:4px 6px}
.sm-open{font:600 .58rem/1 'IBM Plex Mono',monospace; letter-spacing:.1em; color:var(--teal);
  text-decoration:none; border:1px solid var(--teal); border-radius:2px; padding:4px 6px; margin-left:auto}
.sm-open:hover{background:color-mix(in srgb,var(--teal) 14%,transparent)}

/* jump chips */
.lab-jump{display:flex; gap:6px; flex-wrap:wrap; margin:16px 0 4px}
.lj{display:flex; align-items:baseline; gap:6px; text-decoration:none;
  border:1px solid var(--line-2); border-radius:2px; padding:7px 10px; transition:border-color .15s}
.lj:hover{border-color:var(--teal)}
.lj b{font:700 .64rem/1 'IBM Plex Mono',monospace; color:var(--teal)}
.lj span{font:500 .68rem/1 'IBM Plex Sans',sans-serif; color:var(--muted)}

.sim-try{margin:0; padding:13px 15px; border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--teal) 5%,transparent);
  color:var(--muted); font-size:.79rem; line-height:1.6}
.sim-try b{color:var(--teal)}
.sim-code{font:700 .68rem/1 'IBM Plex Mono',monospace; color:var(--teal);
  border:1px solid var(--teal); border-radius:2px; padding:4px 6px; flex:none}
.sim-name{font:600 .95rem/1.2 'IBM Plex Sans Condensed',sans-serif; color:var(--text)}
.sim-sub{font:400 .68rem/1.3 'IBM Plex Mono',monospace; color:var(--dim); width:100%}
.sim-stage{position:relative; height:280px; background:var(--bg)}
.sim-stage canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.sim-read{display:grid; grid-template-columns:repeat(2,1fr); gap:0 16px; padding:10px 15px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.sr{display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:5px 0;
  font:500 .7rem/1.3 'IBM Plex Mono',monospace; color:var(--dim)}
.sr b{color:var(--text); font-weight:600}
.sr.good b{color:var(--teal)}
.sr.bad b{color:var(--rose)}
.sim-ctl{padding:12px 15px; display:flex; flex-direction:column; gap:9px}
.sc{display:grid; grid-template-columns:1fr 1.4fr auto; gap:10px; align-items:center}
.sc-k{font:500 .68rem/1.2 'IBM Plex Mono',monospace; color:var(--muted)}
.sc-v{font:600 .68rem/1 'IBM Plex Mono',monospace; color:var(--teal); text-align:right; min-width:66px}
.sc input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:3px;
  background:var(--line-2); border-radius:2px; outline:none}
.sc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none;
  width:13px; height:13px; border-radius:50%; background:var(--teal); cursor:pointer; border:0}
.sc input[type=range]::-moz-range-thumb{width:13px; height:13px; border-radius:50%;
  background:var(--teal); cursor:pointer; border:0}
.sc-btns{display:flex; gap:7px; flex-wrap:wrap; margin-top:2px}
.sc-btn{background:transparent; color:var(--muted); border:1px solid var(--line-2); border-radius:2px;
  padding:7px 11px; cursor:pointer; font:600 .64rem/1 'IBM Plex Mono',monospace; letter-spacing:.08em}
.sc-btn:hover{border-color:var(--ink); color:var(--text)}
.sc-btn.on{border-color:var(--teal); color:var(--teal)}
.sim-why{margin:0; padding:13px 15px; border-top:1px solid var(--line);
  color:var(--muted); font-size:.79rem; line-height:1.6}
.sim-why b{color:var(--text)}

.lab-soon{display:flex; gap:7px; flex-wrap:wrap; margin-top:14px}
.soon{font:500 .64rem/1 'IBM Plex Mono',monospace; color:var(--dim);
  border:1px dashed var(--line-2); border-radius:2px; padding:6px 8px}

@media (max-width:720px){
  #labGrid{grid-template-columns:1fr}
  .sim-stage{height:240px}
  .sim-read{grid-template-columns:1fr}
  .cont-stat{flex-direction:column; gap:10px}
  .dres{flex-direction:column; gap:12px}
  .sc{grid-template-columns:1fr; gap:4px}
  .sc-v{text-align:left}
}