/* The Practice Lab (lab/lab.js). Every class is pl-*; tab-shell owns n12-*.
   One boxed thing, in its mode's colour plus ONE partner (the tab-panel rule
   in CLAUDE.md). Colours come from palette tokens only. */
/* Muted (Robin, 27 Oct 2026): white and grey only, no box, so it reads as part of the page.
   Green and orange stay on a right or wrong answer, because that is feedback, not decoration. */
.pl{--pl-c:#fff;--pl-rgb:255,255,255;--pl-c2:#fff;--pl-rgb2:255,255,255;
  max-width:var(--content-w,980px);margin:0 0 2.2rem;color:rgba(255,255,255,.88);font-family:inherit}
.pl *{box-sizing:border-box}
.pl button{font-family:inherit}

/* the two modes: plain words, the chosen one underlined */
.pl-modes{position:relative;display:flex;justify-content:center;flex-wrap:wrap;gap:2rem;margin:0 0 1rem;border-bottom:1px solid rgba(255,255,255,.14)}
.pl-mode{cursor:pointer;text-align:left;padding:.2rem 0 .7rem;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;
  color:rgba(255,255,255,.55);transition:color .15s,border-color .15s}
.pl-mode:hover{color:#fff}
.pl-mode.on{color:#fff;border-bottom-color:var(--c-pink)}
.pl-mode-t{display:block;font-size:1.35rem;font-weight:700;line-height:1.15}
.pl-mode-s{display:block;margin-top:.2rem;font-size:.9rem;line-height:1.35;color:rgba(255,255,255,.55)}
.pl-mode:focus-visible,.pl-skill:focus-visible,.pl-go:focus-visible,.pl-ghost:focus-visible,.pl-segb:focus-visible{outline:2px solid #fff;outline-offset:2px}

.pl-box{padding:0}

/* skill buttons: each in its own site colour at FULL strength (Robin, 29 Oct 2026: the half-alpha gold and
   orange read as brown; "always disco/neon"). The chosen pill is solid colour with black type. */
.pl-skills{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;margin:0 0 calc(1.1rem + 10px)}
.pl-skill{cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;padding:.28rem .7rem .28rem .32rem;border:1.5px solid var(--sk);
  border-radius:999px;background:transparent;color:#fff;font-size:.84rem;font-weight:700;line-height:1.2;transition:background .12s,color .12s}
.pl-skill:hover{background:rgba(var(--sk-rgb),.18)}
.pl-skill.on{background:var(--sk);color:#000}
.pl-skill-n{display:inline-grid;place-items:center;min-width:1.2rem;height:1.2rem;border-radius:50%;background:var(--sk);
  font-size:.68rem;font-weight:800;color:#000}
.pl-skill.on .pl-skill-n{background:#000;color:var(--sk)}

/* head of a problem: what it drills + the streak */
.pl-top{display:flex;gap:1rem;align-items:flex-start;justify-content:space-between;margin-bottom:.9rem}
.pl-lead{min-width:0;flex:1}
.pl-skill-hint{margin:0 0 .25rem;font-size:1.05rem;line-height:1.5;color:#fff}
.pl-skill-hint b{color:#fff}
.pl-nudge{margin:0;font-size:.92rem;color:rgba(255,255,255,.6)}
.pl-streak{flex:none;min-width:5.4rem;text-align:center;padding:.4rem .7rem .45rem;border:1px solid rgba(255,255,255,.16);border-radius:12px}
.pl-streak.lit{border-color:rgba(255,255,255,.5)}
.pl-streak-n{display:block;font-size:2.1rem;font-weight:800;line-height:1.05;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
.pl-streak.lit .pl-streak-n{color:#fff}
.pl-streak-l{display:block;font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}

.pl-intro{margin:0 0 .6rem;font-size:1rem;line-height:1.5;color:rgba(255,255,255,.8)}
.pl-code{margin:0 0 .9rem}
.pl-code .q-code-area{margin:0}
.pl-pre{margin:0;padding:.8rem 1rem;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:#090b10;overflow-x:auto;font:600 .95rem/1.7 'JetBrains Mono',ui-monospace,monospace}

/* how to answer */
.pl-seg{display:inline-flex;margin:0 0 .85rem;border:1px solid rgba(255,255,255,.2);border-radius:999px;overflow:hidden}
.pl-segb{cursor:pointer;padding:.4rem .95rem;border:none;background:transparent;color:rgba(255,255,255,.7);font-size:.88rem;font-weight:700}
.pl-segb+.pl-segb{border-left:1px solid rgba(255,255,255,.2)}
.pl-segb.on{background:rgba(255,255,255,.16);color:#fff}

.pl-fields{display:flex;flex-wrap:wrap;gap:.8rem 1rem}
.pl-field{display:flex;flex-direction:column;gap:.3rem;min-width:9rem;flex:1 1 9rem;max-width:18rem}
.pl-field-l{font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.pl-in,.pl-cell,.pl-editor{font:700 1.05rem/1.4 'JetBrains Mono',ui-monospace,monospace;color:#fff;background:#05070a;border:1px solid rgba(255,255,255,.28);border-radius:10px}
.pl-in{padding:.6rem .75rem;width:100%}
.pl-in:focus,.pl-cell:focus,.pl-editor:focus{outline:none;border-color:var(--pl-c);box-shadow:0 0 0 2px rgba(var(--pl-rgb),.25)}
.pl-in.good,.pl-cell.good{border-color:var(--c-green);background:rgba(var(--c-green-rgb),.1)}
.pl-in.bad,.pl-cell.bad{border-color:var(--c-orange);background:rgba(var(--c-orange-rgb),.1)}
.pl-stem{margin:.6rem 0 0;font-size:.92rem;color:rgba(255,255,255,.65)}

/* the trace table */
.pl-tablewrap{overflow-x:auto;margin:0 0 .6rem;border:1px solid rgba(255,255,255,.14);border-radius:12px}
.pl-table{width:100%;border-collapse:collapse;font-size:.95rem}
.pl-table th{padding:.5rem .65rem;text-align:left;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62);
  border-bottom:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.03);white-space:nowrap}
.pl-table td{padding:.3rem .5rem;border-bottom:1px solid rgba(255,255,255,.07);vertical-align:middle}
.pl-table tr:last-child td{border-bottom:none}
.pl-ln{width:2.6rem;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums}
.pl-tc{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.9rem;color:rgba(255,255,255,.85);white-space:nowrap}
.pl-cell{width:5.2rem;padding:.35rem .5rem;font-size:.95rem}
.pl-cell-out{width:6rem}
.pl-cell-wide{width:12rem}
.pl-cell-na{color:rgba(255,255,255,.28);text-align:center}
.pl-table-ans td{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.92rem}
.pl-table-ans .pl-tc{font-size:.9rem}
.pl-table-ans .pl-cell-na{text-align:left}
.pl-shows{color:var(--c-green);font-weight:700}

/* buttons */
.pl-actions{display:flex;gap:.6rem;margin:.9rem 0 0;flex-wrap:wrap}
.pl-go{cursor:pointer;padding:.6rem 1.3rem;border:1px solid rgba(255,255,255,.7);border-radius:999px;background:transparent;color:#fff;font-size:.98rem;font-weight:800}
.pl-go:hover:not(:disabled){background:rgba(255,255,255,.14)}
.pl-go:disabled{opacity:.35;cursor:default}

.pl-ghost{cursor:pointer;padding:.55rem 1rem;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:transparent;color:rgba(255,255,255,.78);font-size:.9rem;font-weight:700}
.pl-ghost:hover{border-color:rgba(255,255,255,.5);color:#fff}

/* results */
.pl-result{margin-top:.9rem}
.pl-banner{padding:.75rem 1rem;border-radius:12px;border:1px solid rgba(255,255,255,.18);line-height:1.5;color:rgba(255,255,255,.9)}
.pl-banner.ok{border-color:var(--c-green);background:rgba(var(--c-green-rgb),.08)}
.pl-banner.ok b:first-child{color:var(--c-green)}
.pl-banner.no{border-color:var(--c-orange);background:rgba(var(--c-orange-rgb),.08);margin-bottom:.7rem}
.pl-banner.no b:first-child{color:var(--c-orange)}
.pl-banner.nudge{border-color:rgba(255,255,255,.3)}
.pl-cases{margin-top:.5rem;font-size:.9rem;color:rgba(255,255,255,.7);font-family:'JetBrains Mono',ui-monospace,monospace}
.pl-why{margin:.8rem 0 0;line-height:1.55;color:rgba(255,255,255,.85)}
.pl-why b{color:#fff}
.pl-empty{color:rgba(255,255,255,.7)}

/* Code it */
.pl-task{margin:0 0 .9rem;font-size:1.05rem;line-height:1.6;color:#fff}
.pl-task p{margin:0 0 .5rem}
.pl-task code{font:700 .95em 'JetBrains Mono',ui-monospace,monospace;color:#fff;background:rgba(255,255,255,.1);padding:.05rem .35rem;border-radius:5px}
.pl-aside{color:rgba(255,255,255,.62);font-size:.95rem}
.pl-given-l{margin:0 0 .35rem;font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.pl-given-l span{text-transform:none;letter-spacing:0;font-weight:600}
.pl-editor{display:block;width:100%;min-height:7.5rem;padding:.75rem .9rem;resize:vertical;line-height:1.7;tab-size:4}
.pl-bar{display:flex;gap:.55rem;margin:.7rem 0 0;flex-wrap:wrap;align-items:center}
.pl-grow{flex:1}
.pl-console{margin-top:.8rem;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(0,0,0,.35);padding:.5rem .9rem .6rem;min-height:3.2rem}
.pl-console-l{display:block;font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:.2rem}
.pl-cl{font:600 .92rem/1.6 'JetBrains Mono',ui-monospace,monospace}
.pl-cl.out{color:var(--c-green)}
.pl-cl.err{color:var(--c-orange)}
.pl-cl.sys{color:rgba(255,255,255,.5);font-style:italic}
.pl-model{margin:.8rem 0 0}
.pl-model summary{cursor:pointer;color:#fff;font-weight:800}
.pl-model .pl-code{margin-top:.6rem}

@media (max-width:680px){
  .pl-modes{gap:1.4rem}
  .pl-mode-t{font-size:1.15rem}
  .pl-mode-s{display:none}
  .pl-top{flex-direction:column-reverse;gap:.7rem}
  .pl-streak{align-self:flex-end}
  .pl-skill{font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){.pl-mode{transition:none}}

/* buttons at the end of a lesson that open a lab skill (data-pl-go="trace:swap") */
.pl-jump{max-width:var(--content-w,980px);display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:1.1rem 0}
.pl-jump-l{color:rgba(255,255,255,.7);margin-right:.3rem}

/* Pick the type: the answers (three or four) */
.pl-q{margin:.2rem 0 .8rem;font-size:1.08rem;line-height:1.55;color:#fff;font-weight:600}
.pl-opts{display:grid;gap:.5rem;max-width:36rem}
.pl-opt{cursor:pointer;display:flex;gap:.8rem;align-items:center;text-align:left;padding:.65rem .9rem;border:1px solid rgba(255,255,255,.25);border-radius:12px;background:rgba(255,255,255,.03);color:#fff;font-size:1.02rem;font-weight:600}
.pl-opt:hover:not(:disabled){border-color:#fff;background:rgba(255,255,255,.1)}
.pl-opt:disabled{cursor:default}
.pl-opt-l{display:inline-grid;place-items:center;flex:none;width:1.7rem;height:1.7rem;border-radius:50%;background:rgba(255,255,255,.12);font-size:.8rem;font-weight:800}
.pl-opt.good{border-color:var(--c-green);background:rgba(var(--c-green-rgb),.12)}
.pl-opt.good .pl-opt-l{background:var(--c-green);color:#000}
.pl-opt.bad{border-color:var(--c-orange);background:rgba(var(--c-orange-rgb),.12)}
.pl-opt.bad .pl-opt-l{background:var(--c-orange);color:#000}

/* The Practice Lab is a brand: its own big title, no small kicker (Robin, 28 Oct 2026). */
/* A little smaller than the first cut (Robin, 29 Oct 2026); still larger than a plain H1 (2.1rem). */
.tpage .tbh1.pl-brand .tbh1-t{font-size:clamp(2rem,4.8vw,2.9rem);font-weight:900;letter-spacing:-.015em;line-height:1.05;
  background:linear-gradient(90deg,var(--c-cyan),var(--c-purple) 48%,var(--c-pink));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── Review button and the full-screen Study window (28 Oct 2026) ───────────── */
.pl-modes{align-items:flex-start}
.pl-review{position:absolute;right:0;top:.15rem;align-self:center;white-space:nowrap;flex:none;cursor:pointer;padding:.42rem 1rem;border-radius:999px;border:1px solid rgba(255,255,255,.5);
  background:transparent;color:#fff;font-size:.9rem;font-weight:800;letter-spacing:.02em}
.pl-review:hover{background:rgba(255,255,255,.14)}
.pl-review:focus-visible{outline:2px solid #fff;outline-offset:2px}
dialog.urv-modal.sl-modal{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;border:0;border-radius:0}
dialog.urv-modal.sl-modal .sl-brand{display:inline-block;font-size:clamp(1.5rem,3.4vw,2.3rem);font-weight:900;letter-spacing:-.015em;line-height:1.1;
  background:linear-gradient(90deg,var(--c-cyan),var(--c-purple) 48%,var(--c-pink));-webkit-background-clip:text;background-clip:text;color:transparent}
dialog.urv-modal.sl-modal .urv-head-bar{align-items:center}
dialog.urv-modal.sl-modal .sl-body{padding:1.4rem 1.25rem 3rem}
dialog.urv-modal.sl-modal .sl-host .pl{max-width:1100px;margin:0 auto}
dialog.urv-modal.sl-modal .sl-stats{display:flex;gap:1.1rem;align-self:center;font-size:.9rem;color:rgba(255,255,255,.62)}
dialog.urv-modal.sl-modal .sl-stats b{color:#fff;font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .pl-modes{flex-wrap:wrap;gap:.6rem 1.4rem}
  .pl-review{position:static;margin-left:0}
  dialog.urv-modal.sl-modal .sl-stats{display:none}
}

/* Create it (1 Nov 2026) */
.pl-asks{margin:.2rem 0 0}
.pl-ask{margin:0 0 1rem}
.pl-write{margin-top:1.1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.14)}
.pl-write[hidden]{display:none}
.pl-frame{margin:0 0 .6rem;color:rgba(255,255,255,.75);line-height:1.55}
.pl-prose{display:block;width:100%;min-height:7rem;padding:.75rem .9rem;resize:vertical;font:500 1.02rem/1.6 inherit;font-family:inherit;color:#fff;background:#05070a;border:1px solid rgba(255,255,255,.28);border-radius:10px}
.pl-prose:focus{outline:none;border-color:var(--pl-c);box-shadow:0 0 0 2px rgba(var(--pl-rgb),.25)}
.pl-probs{margin:.4rem 0 0;padding-left:1.2rem}
.pl-strong{margin:.9rem 0 0}
.pl-strong ul{list-style:none;margin:.3rem 0 0;padding:0}
.pl-strong li{margin:.25rem 0;line-height:1.5}
.pl-modeltext{margin:.5rem 0 0;line-height:1.6;color:rgba(255,255,255,.88)}
.pl-copied{margin:.5rem 0 0;color:rgba(255,255,255,.7);min-height:1.2em}
a.pl-ghost{text-decoration:none;display:inline-block}
.pl-aria{margin:.9rem 0 0;padding:.7rem 1rem;border-left:3px solid var(--c-pink);background:rgba(var(--c-pink-rgb),.07);border-radius:0 10px 10px 0}
.pl-aria[hidden]{display:none}
.pl-q-note{margin:-.2rem 0 .9rem;font-size:.95rem;color:#c9d0da;line-height:1.5}
.pl-aria-q{font-weight:700}
.pl-aria-h{margin:.6rem 0 0;font-size:.95rem;color:#c9d0da}
.pl-aria .pl-actions{margin-top:.6rem}
.pl-say-n.pl-rec{margin-top:1rem;text-transform:none;letter-spacing:0;font-weight:500;font-size:.88rem;color:#9aa3b0}
.pl-aria-l{display:block;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--c-pink)}
.pl-aria p{margin:.25rem 0 0;font-size:1.02rem;line-height:1.5;color:#fff}

/* Test it, inside the lab (1 Nov 2026): the question cards stacked, each under its own heading. They open the same window as before. */
.pl-test-host{max-width:var(--content-w,980px);margin:0 0 2.2rem}
.pl-test-host[hidden]{display:none}
.pl-test-lead{margin:0 0 1rem;color:rgba(255,255,255,.72);line-height:1.55}
.pl-test-h{margin:1.2rem 0 .45rem;font-size:1.05rem;font-weight:700;color:rgba(255,255,255,.88)}
.pl-test-host .qte-types{margin:0 0 .4rem}
.pl-test-d{margin:0 0 .6rem;font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.62)}

/* Test it cards (1 Nov 2026, Robin): the same colors and brightness as the skill pills, and smaller; the heading above takes the card's color.
   Written one level more specific than pageContent.css's `.tpage :is(.n12-panel,.n12-main) ...` rules, which are !important too. */
.pl-test-item .pl-test-h{color:var(--tc)}
.tpage .pl-test-item.n12-main .qte-types.qte-inline,.tpage .pl-test-item.n12-main .qte-row{width:100%!important;max-width:none!important}
.tpage .pl-test-item.n12-main .qte-open{width:100%!important;max-width:none!important;padding:.45rem .8rem!important;border:1.5px solid var(--tc)!important;
  background:transparent!important;border-radius:14px!important;transition:background .12s}
.tpage .pl-test-item.n12-main .qte-open:hover{background:rgba(var(--tc-rgb),.18)!important}
.tpage .pl-test-item.n12-main .qte-open .qte-t{font-size:1rem!important;font-weight:700}
.tpage .pl-test-item.n12-main .qte-open .qte-n{font-size:.82rem!important}
.tpage .pl-test-item.n12-main .qte-open .qte-go{font-size:.68rem!important;padding:.15rem .55rem!important;border-color:var(--tc)!important;color:var(--tc)!important;background:transparent!important}
.tpage .pl-test-item.n12-main .qte-types.qte-inline{margin:0 0 .4rem 0!important}
.pl-modes[hidden]{display:none}

/* STUDY HEAT window (2 Nov 2026): the "How to get hot" button in the Study window and the rules it opens */
dialog.sh-modal{width:min(640px,94vw);max-height:88vh;padding:0;margin:auto;border-radius:16px;overflow:hidden;background:#0f0f17;color:#fff;border:1px solid rgba(255,255,255,.22)}
dialog.sh-modal::backdrop{background:rgba(0,0,0,.65)}
dialog.sh-modal .sh-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.3rem;border-bottom:1px solid rgba(255,255,255,.14)}
dialog.sh-modal .sh-bar h2{margin:0;font-size:1.5rem}
dialog.sh-modal .sh-close{font:inherit;font-weight:800;font-size:.8rem;letter-spacing:.06em;padding:.35rem .9rem;border-radius:999px;cursor:pointer;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
dialog.sh-modal .sh-body{padding:1rem 1.4rem 1.6rem;overflow:auto;max-height:calc(88vh - 4.5rem);font-size:1rem;line-height:1.55}
dialog.sh-modal .sh-lead{margin:.2rem 0 .8rem;font-size:1.1rem}
dialog.sh-modal h3{margin:1.2rem 0 .4rem;font-size:1.05rem;color:#FFEA00}
dialog.sh-modal .sh-rules{margin:.2rem 0 .4rem;padding-left:1.3rem}
dialog.sh-modal .sh-rules li{margin:.35rem 0}
dialog.sh-modal .sh-skills{list-style:none;margin:.3rem 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.3rem .9rem}
dialog.sh-modal .sh-skills li span{display:inline-block;min-width:6.2rem;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#00FFFF}

/* the student's own heat number in the Study window header, and in the How to get hot window */
dialog.urv-modal.sl-modal .sl-heat{align-self:center;margin-right:1rem;padding:.25rem .9rem;border-radius:999px;border:2px solid;font-size:.85rem;line-height:1.1;display:flex;align-items:baseline;gap:.45rem;white-space:nowrap}
dialog.urv-modal.sl-modal .sl-heat[hidden]{display:none}
dialog.urv-modal.sl-modal .sl-heat b{font-size:1.5rem;font-weight:900;font-variant-numeric:tabular-nums}
dialog.urv-modal.sl-modal .sl-heat span{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.sl-heat.cold,.sh-now.cold{color:#00FFFF;border-color:#00FFFF}.sl-heat.warm,.sh-now.warm{color:#FFEA00;border-color:#FFEA00}.sl-heat.hot,.sh-now.hot{color:#FF5F1F;border-color:#FF5F1F;background:rgba(255,95,31,.12)}.sl-heat.rush,.sh-now.rush{color:#FF007F;border-color:#FF007F}
dialog.sh-modal .sh-now{display:flex;align-items:center;gap:1rem;border:2px solid;border-radius:14px;padding:.7rem 1rem;margin:.2rem 0 .6rem}
dialog.sh-modal .sh-now b{font-size:2.6rem;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
dialog.sh-modal .sh-now span{font-size:1rem;color:#fff}
dialog.sh-modal .sh-parts{list-style:none;margin:.3rem 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.4rem .9rem}
dialog.sh-modal .sh-parts li{display:flex;justify-content:space-between;gap:.6rem;border-bottom:1px solid rgba(255,255,255,.12);padding:.2rem 0}
dialog.sh-modal .sh-parts i{font-style:normal;opacity:.6;font-size:.85rem}
dialog.sh-modal .sh-parts b.cold{color:#00FFFF}dialog.sh-modal .sh-parts b.warm{color:#FFEA00}dialog.sh-modal .sh-parts b.hot{color:#FF5F1F}
dialog.sh-modal .sh-skills li.done{opacity:.55}
dialog.sh-modal .sh-skills li em{font-style:normal;float:right;color:#FFEA00;font-variant-numeric:tabular-nums}
dialog.sh-modal .sh-skills li.done em{color:#39FF14}
@media(max-width:700px){dialog.urv-modal.sl-modal .sl-heat{margin-right:.4rem;padding:.2rem .6rem}dialog.urv-modal.sl-modal .sl-heat span{display:none}}

/* THE STUDY WINDOW, full study (2 Nov 2026): the topic picker, the way back, and the topic's lab with Test it inside */
dialog.urv-modal.sl-modal .sl-back{font:inherit;font-weight:800;font-size:.8rem;padding:.4rem .9rem;border-radius:999px;cursor:pointer;margin-right:.8rem;align-self:center;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);white-space:nowrap}
dialog.urv-modal.sl-modal .sl-back[hidden]{display:none}
dialog.urv-modal.sl-modal .sl-heat{margin-left:auto}
.sl-loading{text-align:center;color:rgba(255,255,255,.6);padding:3rem 0}
.sl-picker{max-width:1000px;margin:0 auto}
.sl-lead{text-align:center;font-size:1.1rem;color:#d7dbe3;margin:.4rem auto 1.6rem;max-width:640px;line-height:1.55}
.sl-topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.9rem}
.sl-topic{font:inherit;cursor:pointer;text-align:left;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.8rem;padding:1rem 1.1rem;border-radius:16px;color:#fff;
  background:rgba(var(--sk-rgb),.08);border:2px solid var(--sk)}
.sl-topic:hover{background:rgba(var(--sk-rgb),.22)}
.sl-topic-n{font:800 .85rem "JetBrains Mono",monospace;color:var(--sk)}
.sl-topic-t{font-weight:800;font-size:1.1rem}
.sl-topic-h{font-size:1.35rem;font-weight:900;font-variant-numeric:tabular-nums;min-width:3rem;text-align:right}
.sl-topic-h.cold{color:#00FFFF}.sl-topic-h.warm{color:#FFEA00}.sl-topic-h.hot{color:#FF5F1F}.sl-topic-h.rush{color:#FF007F}
.sl-tpage .pl-test-host:not([hidden]){display:block}
.sl-tpage>div:first-child{display:none}     /* the engine's own holder (its unit diagnostic and exam strip): the Study window uses only the cards */

/* the "are you sure" on the way out of the Study window */
.sl-end{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:1rem}
.sl-end[hidden]{display:none}
.sl-end-box{background:#0f0f17;border:2px solid #FF5F1F;border-radius:18px;padding:1.6rem 1.8rem;max-width:30rem;text-align:center;color:#fff}
.sl-end-box p{margin:0 0 1.2rem;font-size:1.3rem;font-weight:800;line-height:1.35}
.sl-end-btns{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.sl-end-btns button{font:inherit;font-weight:800;padding:.6rem 1.3rem;border-radius:999px;cursor:pointer;background:transparent}
.sl-end-keep{color:#39FF14;border:2px solid #39FF14}.sl-end-keep:hover{background:rgba(57,255,20,.18)}
.sl-end-yes{color:#fff;border:2px solid rgba(255,255,255,.5)}.sl-end-yes:hover{background:rgba(255,255,255,.14)}

.sl-fs{display:flex;flex-direction:column;flex:1;min-height:0;background:#0c0c12;color:rgba(255,255,255,.88)}
.sl-fs:fullscreen{width:100vw;height:100vh}
.sl-fs:-webkit-full-screen{width:100vw;height:100vh}

/* CODE IT'S TEXT BOX is the site's editor (2 Nov 2026, Robin: "everything uniform"): line numbers, the site's own colours, wrapped long lines with the numbers
   kept level (lab/editor-wrap.js). A transparent text box sits over a coloured copy of its own text, so both must use the SAME font, padding and wrapping. */
.pl-ed{display:flex;background:#05070a;border:1px solid rgba(255,255,255,.28);border-radius:10px;overflow:hidden}
/* No highlight when the box is clicked into (Robin, 2 Nov 2026: the white border was distracting). The box keeps its own grey edge. */
.pl-ed:focus-within{border-color:rgba(255,255,255,.28);box-shadow:none}
.pl-ed-ln{flex:none;min-width:44px;padding:14px 10px;box-sizing:border-box;text-align:right;color:rgba(255,255,255,.34);border-right:1px solid rgba(255,255,255,.12);
  font:400 15px/1.6 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:hidden;white-space:pre;user-select:none}
.pl-ed-area{position:relative;flex:1;min-width:0;display:flex}
.pl-ed-hl{position:absolute;inset:0;margin:0;padding:14px;box-sizing:border-box;pointer-events:none;overflow:hidden;scrollbar-width:none;color:#fff;
  font:400 15px/1.6 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:break-word;word-wrap:break-word;word-break:normal;tab-size:4;-moz-tab-size:4}
.pl-ed-hl span{line-height:inherit;display:inline}
.pl-ed .pl-editor{position:relative;z-index:1;flex:1;min-width:0;min-height:7.5rem;margin:0;padding:14px;box-sizing:border-box;resize:none;background:transparent;color:transparent;
  caret-color:#fff;border:0;border-radius:0;box-shadow:none;font:400 15px/1.6 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:pre-wrap;overflow-wrap:break-word;word-wrap:break-word;word-break:normal;overflow-x:hidden;overflow-y:auto;tab-size:4;-moz-tab-size:4}
.pl-ed .pl-editor:focus{border:0;box-shadow:none}
.pl-ed .pl-editor::selection{background:rgba(63,169,235,.38);color:transparent}
.pl-ed-hl .hl-keyword{color:var(--c-blue-new)}.pl-ed-hl .hl-proc{color:var(--c-purple)}.pl-ed-hl .hl-io{color:var(--c-green)}.pl-ed-hl .hl-builtin{color:var(--c-pink)}
.pl-ed-hl .hl-string{color:var(--c-gold)}.pl-ed-hl .hl-number{color:var(--c-orange)}.pl-ed-hl .hl-arrow{color:var(--c-pink)}.pl-ed-hl .hl-literal{color:var(--c-purple)}
.pl-ed-hl .hl-boolop{color:#969593}.pl-ed-hl .hl-comment{color:rgba(255,255,255,.4)}

/* "Type the answer" is locked until the trace table is filled in */
.pl-segb:disabled{opacity:.42;cursor:not-allowed}
.pl-segb[hidden],.pl-ghost[hidden]{display:none}

/* SAY IT (3 Nov 2026) */
.pl-say-n{margin:.9rem 0 .2rem;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:700}
.pl-say-sum{margin:.5rem 0 1rem;max-width:44rem;font-size:1.12rem;line-height:1.6;color:#fff;border-left:3px solid var(--pl-c,#fff);padding:.2rem 0 .2rem .9rem}
.pl-opt.bad{border-color:#ff9d42;color:#ff9d42;opacity:.85}
.pl-opt.good{border-color:#38f08a;color:#38f08a}

/* a trace table on a phone: tighter cells so the "Is the test true?" column is not cut off (3 Nov 2026) */
@media (max-width: 520px) {
  .pl-table th, .pl-table td { padding: .35rem .35rem; }
  .pl-table .pl-cell { width: 3.6rem; min-width: 0; padding: .3rem .35rem; }
  .pl-table th { letter-spacing: .03em; font-size: .66rem; white-space: normal; }
  .pl-table .pl-tc { font-size: .8rem; }
  .pl-table select.pl-cell { padding-left: .2rem; padding-right: .2rem; }
  .pl-table select.pl-cell { width: 4.2rem; }
}
.pl-question{margin-top:1.1rem}

/* ── THE STUDY PATH (4 Nov 2026, pilot on 3.1): ideas as pills, steps with bars inside (lab/study-path.js) ── */
.sp{max-width:1100px;margin:0 auto}
.sp-off{display:none!important}
.sp-next{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.65rem 1rem;border:1px solid rgba(255,255,255,.18);border-radius:14px;margin:0 0 1rem;color:#dfe3ea;line-height:1.45}
.sp-next b{color:#fff}
.sp-pills{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;margin:0 0 .8rem}
.sp-pill{position:relative;overflow:hidden;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .95rem .7rem;border-radius:999px;border:1.5px solid var(--sk);background:transparent;color:#fff;font-weight:700;font-size:.95rem}
.sp-pill:hover{background:rgba(var(--sk-rgb),.14)}
.sp-pill.on{background:rgba(var(--sk-rgb),.26);box-shadow:0 0 0 1px var(--sk)}
.sp-pill-n{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:rgba(var(--sk-rgb),.28);font-size:.78rem;font-weight:800}
.sp-pill.full .sp-pill-n{background:var(--sk);color:#000}
.sp-pill-bar{position:absolute;left:14px;right:14px;bottom:5px;height:3px;border-radius:3px;background:rgba(255,255,255,.14)}
.sp-sub{text-align:center;margin:.1rem 0 1rem;color:rgba(255,255,255,.7);font-size:1.02rem}
.sp-steps{display:flex;align-items:stretch;gap:.4rem;margin:0 0 1rem;flex-wrap:wrap}
.sp-arrow{align-self:center;color:rgba(255,255,255,.35);font-size:1.3rem}
.sp-arrow.open{color:var(--c-green)}
.sp-step{flex:1 1 150px;min-width:140px;font:inherit;text-align:left;cursor:pointer;padding:.55rem .85rem .6rem;border-radius:12px;border:1.5px solid rgba(255,255,255,.22);background:transparent;color:#fff}
.sp-step:hover:not(:disabled){background:rgba(255,255,255,.07)}
.sp-step.on{border-color:#fff;background:rgba(255,255,255,.09)}
.sp-step.full{border-color:rgba(57,255,20,.55)}
.sp-step.locked{opacity:.5;cursor:not-allowed}
.sp-step-t{display:block;font-weight:800;font-size:1rem}
.sp-bar{display:block;height:7px;border-radius:6px;background:rgba(255,255,255,.14);margin:.45rem 0 .3rem;overflow:hidden}
.sp-count{display:block;font-size:.78rem;color:#b3bac6}
.sp-gate{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:1rem 0 0;padding:.75rem 1.1rem;border:2px solid var(--c-green);border-radius:14px;background:rgba(57,255,20,.07);color:#fff}
.sp-gate[hidden]{display:none}
.sp-go{font:inherit;font-weight:800;cursor:pointer;padding:.5rem 1.3rem;border-radius:999px;border:2px solid var(--c-green);background:transparent;color:var(--c-green)}
.sp-go:hover{background:rgba(57,255,20,.18)}
.sp-go-s{padding:.3rem .95rem;font-size:.85rem}
.sp .pl-modes{display:none}
.sp .pl-skills:has(.pl-skill:only-child){display:none}

/* ── THE HEAT GAUGE (4 Nov 2026): five colour segments, a marker, the part not reached dimmed, the score at the end ── */
dialog.urv-modal.sl-modal .sl-heat{border:0;padding:0;background:none;display:flex;align-items:center;gap:.65rem;margin-right:1rem;color:#fff}
dialog.urv-modal.sl-modal .sl-heat.hot{background:none}
.sl-g-lab{font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.sl-gauge{position:relative;display:block;width:clamp(120px,22vw,300px);height:20px;border-radius:999px;overflow:hidden;box-shadow:0 0 0 2px rgba(255,255,255,.85),0 0 14px rgba(255,255,255,.18);
  background:linear-gradient(90deg,#E8352B 0 20%,#F5822A 20% 40%,#FFD92A 40% 60%,#8DC63F 60% 80%,#4DB848 80% 100%)}
.sl-g-dim{position:absolute;top:0;bottom:0;right:0;background:rgba(10,10,16,.66);transition:left .7s cubic-bezier(.2,.9,.25,1.1)}
.sl-g-mark{position:absolute;top:-2px;bottom:-2px;width:5px;margin-left:-2.5px;border-radius:3px;background:#000;box-shadow:0 0 0 1.5px #fff;transition:left .7s cubic-bezier(.2,.9,.25,1.1)}
.sl-g-hot{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:rgba(255,255,255,.75)}
.sl-heat-n{font-size:1.65rem;font-weight:900;font-variant-numeric:tabular-nums;line-height:1;min-width:3.1ch;text-align:left;text-shadow:0 0 12px currentColor;transition:color .4s}
.sl-heat.up .sl-gauge{animation:slflash .9s ease-out}
.sl-heat.up .sl-heat-n{animation:slpop .9s ease-out}
@keyframes slflash{0%{box-shadow:0 0 0 2px #fff,0 0 28px 6px rgba(255,255,255,.75)}100%{box-shadow:0 0 0 2px rgba(255,255,255,.85),0 0 14px rgba(255,255,255,.18)}}
@keyframes slpop{0%{transform:scale(1.5)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.sl-g-dim,.sl-g-mark{transition:none}.sl-heat.up .sl-gauge,.sl-heat.up .sl-heat-n{animation:none}}
@media(max-width:700px){.sl-g-lab{display:none}.sl-gauge{width:clamp(90px,28vw,160px);height:16px}.sl-heat-n{font-size:1.25rem}}
/* the same colours on every bar: a step's bar is the gauge, filled to how far the student has come */
.sp-bar{position:relative;height:12px;background:linear-gradient(90deg,#E8352B 0 20%,#F5822A 20% 40%,#FFD92A 40% 60%,#8DC63F 60% 80%,#4DB848 80% 100%);box-shadow:0 0 0 1.5px rgba(255,255,255,.35)}
.sp-bar i{position:absolute;top:0;bottom:0;right:0;left:auto;background:rgba(10,10,16,.6);transition:width .5s ease}
.sp-step.full .sp-bar{box-shadow:0 0 0 1.5px #4DB848,0 0 12px rgba(77,184,72,.65)}
.sp-step.full .sp-bar i{background:rgba(10,10,16,0)}
.sp-pill-bar{height:5px;bottom:4px;background:linear-gradient(90deg,#E8352B 0 20%,#F5822A 20% 40%,#FFD92A 40% 60%,#8DC63F 60% 80%,#4DB848 80% 100%);overflow:hidden}
.sp-pill-bar i{position:absolute;top:0;bottom:0;right:0;background:rgba(10,10,16,.62);transition:width .5s ease}
.sp-count{font-weight:700;color:#d6dbe5}
.pl-go-s{padding:.25rem .85rem;font-size:.85rem;margin-left:.5rem}
.pl-test-nudge{display:flex;align-items:center;flex-wrap:wrap;gap:.3rem}
.sp-help-row{text-align:center;margin:-.3rem 0 .9rem}
.sp-help{font:inherit;font-weight:700;font-size:.88rem;cursor:pointer;padding:.3rem .95rem;border-radius:999px;border:1.5px solid rgba(255,255,255,.4);background:transparent;color:#e4e8ef}
.sp-help:hover{background:rgba(255,255,255,.12);border-color:#fff}
.sp-stuck{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:0 0 .9rem;padding:.65rem 1rem;border:2px solid #FF5F1F;border-radius:14px;background:rgba(255,95,31,.1);color:#fff}
.sp-stuck[hidden]{display:none}
.sp-go-o{border-color:#FF5F1F;color:#FF5F1F}.sp-go-o:hover{background:rgba(255,95,31,.2)}
.sp-next.done{border-color:var(--c-green);background:rgba(57,255,20,.07)}
.sp-peek{position:fixed!important;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}
.sp-pill:disabled{opacity:.5;cursor:not-allowed}
.sp-final{max-width:46rem;margin:1.2rem auto;padding:1.4rem 1.6rem;border:2px solid var(--c-green);border-radius:18px;background:rgba(57,255,20,.06);color:#fff;line-height:1.55}
.sp-final-h{margin:0 0 .5rem;font-size:1.45rem;font-weight:800}
.sp-final-pass{color:var(--c-green)}
.sp-final-go{font-size:1.1rem;padding:.65rem 1.7rem;margin-top:.7rem}
.sp-final-go:disabled{opacity:.45;cursor:not-allowed}

/* THE FINITE PATH: the card that says an idea, a topic or a Final Check is done, and what comes next (Robin, 5 Nov 2026) */
.sp-card{text-align:center;padding:2.4rem 1rem 2.6rem;margin:.5rem 0 1rem;border:2px solid var(--c-green);border-radius:18px;background:rgba(57,255,20,.06);box-shadow:0 0 28px rgba(57,255,20,.18)}
.sp-card-k{margin:0 0 .3rem;font-size:.85rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--c-green)}
.sp-card-h{margin:0 0 .6rem;font-size:clamp(1.5rem,3.2vw,2.2rem);font-weight:900;color:#fff;line-height:1.15}
.sp-card-p{margin:0 auto 1.1rem;max-width:36rem;font-size:1.1rem;line-height:1.5;color:#dfe3ea}
.sp-card-l{list-style:none;margin:0 auto 1.2rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.sp-card-l li{padding:.35rem .9rem;border-radius:999px;border:1.5px solid #FF5F1F;color:#FF5F1F;font-weight:800}
.sp-card-go{font-size:1.15rem;padding:.7rem 1.8rem}
.sp-carded .sp-pill{pointer-events:none;opacity:.55}