/* Shared laboratory layout for the curriculum expansion. It adds only the
   pieces that site.css and lesson.css do not already provide. */
.cl-cover{max-width:78ch}
.cl-cover .lede{font-size:clamp(1.05rem,2vw,1.25rem);color:var(--dim);line-height:1.65}
.cl-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:20px 0}
.cl-map a{display:block;border:1px solid var(--line);border-radius:11px;padding:12px;background:var(--panel);
  color:var(--txt);text-decoration:none;min-height:88px}
.cl-map a:hover{border-color:var(--accent);background:var(--panel2);text-decoration:none}
.cl-map .n{display:block;font:700 .68rem/1 var(--mono);color:var(--accent);margin-bottom:7px}
.cl-map b{display:block;line-height:1.25}
.cl-map small{display:block;color:var(--dim);margin-top:5px;line-height:1.35}

.cl-terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;margin:14px 0}
.cl-term{border-left:3px solid var(--accent);background:var(--panel2);padding:9px 11px;border-radius:0 9px 9px 0}
.cl-term b{display:block;font-size:.78rem;margin-bottom:3px}
.cl-term span{display:block;color:var(--dim);font-size:.78rem;line-height:1.45}

.cl-lab{margin:20px 0;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:var(--panel)}
.cl-labhead{padding:10px 13px;background:var(--panel2);font:800 .72rem/1.3 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;border-bottom:1px solid var(--line)}
.cl-try{padding:10px 13px;color:var(--dim);font-size:.82rem;line-height:1.5;border-bottom:1px solid var(--line)}
.cl-try b{color:var(--txt)}
.cl-work{padding:13px}
.cl-controls{display:flex;gap:9px;align-items:end;flex-wrap:wrap;margin-bottom:12px}
.cl-control{display:flex;flex-direction:column;gap:5px;min-width:145px;flex:1 1 145px;color:var(--dim);
  font:700 .67rem/1.2 var(--mono);text-transform:uppercase;letter-spacing:.05em}
.cl-control input[type=range]{width:100%;accent-color:var(--accent)}
.cl-control select{width:100%;padding:8px;border:1px solid var(--line2);border-radius:8px;background:var(--panel2);color:var(--txt)}
.cl-value{color:var(--hot);font-size:.78rem;letter-spacing:0;text-transform:none}
.cl-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:7px;margin:10px 0}
.cl-stat{padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel2);min-width:0}
.cl-stat .k{display:block;color:var(--dimmer);font:700 .62rem/1.2 var(--mono);text-transform:uppercase}
.cl-stat .v{display:block;color:var(--txt);font:800 clamp(.92rem,2vw,1.15rem)/1.2 var(--mono);margin-top:5px;
  overflow-wrap:anywhere}
.cl-stat.good .v{color:var(--on)}.cl-stat.warn .v{color:var(--hot)}.cl-stat.bad .v{color:var(--red)}
.cl-chart{display:flex;align-items:flex-end;gap:8px;height:150px;padding:12px 4px 24px;margin:10px 0;
  border-bottom:1px solid var(--line2);overflow:hidden}
.cl-bar{position:relative;min-width:30px;flex:1;background:var(--accent);border-radius:6px 6px 2px 2px;
  transition:height .18s ease}
.cl-bar:nth-child(2n){background:var(--accent2)}.cl-bar:nth-child(3n){background:var(--hot)}
.cl-bar span{position:absolute;left:50%;bottom:-21px;transform:translateX(-50%);font:650 .58rem/1 var(--mono);
  color:var(--dim);white-space:nowrap}
.cl-narr{padding:11px 12px;border-radius:9px;background:var(--panel2);color:var(--dim);line-height:1.55;font-size:.84rem}
.cl-narr b{color:var(--txt)}
.cl-foot{padding:10px 13px;border-top:1px solid var(--line);color:var(--dim);font-size:.79rem;line-height:1.48}

.cl-trace{display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-height:72px;margin:10px 0}
.cl-cell{display:flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 7px;border:1px solid var(--line2);
  border-radius:8px;background:var(--panel2);font:750 .78rem/1 var(--mono);transition:.16s}
.cl-cell.hot{border-color:var(--hot);background:color-mix(in srgb,var(--hot) 18%,var(--panel2))}
.cl-cell.good{border-color:var(--on);background:color-mix(in srgb,var(--on) 18%,var(--panel2))}
.cl-cell.dim{opacity:.42}.cl-cell.bad{border-color:var(--red);color:var(--red)}
.cl-arrow{color:var(--dimmer);font:700 .8rem/1 var(--mono)}
.cl-tablewrap{overflow:auto;margin:10px 0;border:1px solid var(--line);border-radius:9px}
.cl-table{width:100%;border-collapse:collapse;font-size:.78rem;min-width:430px}
.cl-table th,.cl-table td{padding:7px 9px;border-bottom:1px solid var(--line);text-align:right;font-family:var(--mono)}
.cl-table th:first-child,.cl-table td:first-child{text-align:left}.cl-table th{color:var(--dim);background:var(--panel2)}
.cl-table tr:last-child td{border-bottom:0}.cl-table tr.hot td{background:color-mix(in srgb,var(--accent) 12%,transparent)}

.cl-predict{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.cl-predict .btn.right{border-color:var(--on);color:var(--on)}
.cl-predict .btn.wrong{border-color:var(--red);color:var(--red)}
.cl-check{margin-top:22px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.cl-check .q{font-weight:750;line-height:1.5;margin-bottom:10px}
.cl-feedback{display:none;margin-top:10px;color:var(--dim);line-height:1.5;font-size:.84rem}
.cl-feedback.show{display:block}.cl-feedback b{color:var(--txt)}
.cl-deeper{margin:16px 0}.cl-deeper summary{cursor:pointer;font-weight:750;color:var(--txt)}
.cl-deeper .dig-body{color:var(--dim);line-height:1.6}

@media (max-width:620px){
  .cl-map{grid-template-columns:1fr}.cl-chart{gap:4px}.cl-bar{min-width:18px}.cl-stat{padding:8px}
  .cl-control{min-width:120px}.cl-cell{min-width:36px;height:38px;font-size:.7rem}
}
@media (prefers-reduced-motion:reduce){.cl-bar,.cl-cell{transition:none}}

/* ===========================================================================
   Visual lab primitives: plot, grid, diagram.

   Everything else in this file styles numbers, HTML bars and tables, which was
   the whole lab vocabulary these courses were built on. These rules are for the
   drawn kinds added to course-lab.js.

   Colour comes only from the shared tokens, so both themes work, and nothing
   here carries meaning by colour alone: a plot's series are named in its legend,
   a grid prints its own numbers on request, and a diagram labels every box.
   ======================================================================== */
.cl-viz{ max-width:100%; height:auto; display:block; margin:2px 0 }
.cl-viz text.cl-vt{ font-family:var(--sans); font-size:9px; fill:var(--dim) }
.cl-viz text.cl-num{ font-family:var(--mono); font-variant-numeric:tabular-nums }
.cl-viz .cl-axis{ stroke:var(--line2); stroke-width:1 }
.cl-viz .cl-grid{ stroke:var(--line); stroke-width:1; stroke-dasharray:2 3 }
.cl-viz .cl-rule{ stroke:var(--accent2); stroke-width:1.5; stroke-dasharray:6 4 }
.cl-viz text.cl-ruleT{ fill:var(--accent2) }
.cl-viz .cl-line{ stroke-width:2; stroke-linejoin:round; stroke-linecap:round }

/* Four series, distinguishable by hue AND named in the legend. Ordered so the
   first two are the pair a reader compares most often. */
.cl-viz .cl-s0{ stroke:var(--accent) }   .cl-viz .cl-f0{ fill:var(--accent) }
.cl-viz .cl-s1{ stroke:var(--accent2) }  .cl-viz .cl-f1{ fill:var(--accent2) }
.cl-viz .cl-s2{ stroke:var(--on) }       .cl-viz .cl-f2{ fill:var(--on) }
.cl-viz .cl-s3{ stroke:var(--hot) }      .cl-viz .cl-f3{ fill:var(--hot) }

/* A grid cell's fill is its value, so its label has to invert against it, which
   is the one place on the site where a literal black and white is correct: the
   square IS the number and the ink has to survive both extremes. */
.cl-viz .cl-px{ stroke:var(--line); stroke-width:.5 }
.cl-viz text.cl-onLight{ fill:#111 }
.cl-viz text.cl-onDark{ fill:#fff }

.cl-viz .cl-box{ fill:var(--panel2); stroke:var(--line2); stroke-width:1 }
.cl-viz .cl-b-active{ fill:color-mix(in srgb, var(--accent) 18%, var(--panel2)); stroke:var(--accent) }
.cl-viz .cl-b-bad{ fill:color-mix(in srgb, var(--accent2) 16%, var(--panel2)); stroke:var(--accent2) }
.cl-viz .cl-edge{ stroke:var(--line2); stroke-width:1.5 }
.cl-viz .cl-e-active{ stroke:var(--accent); stroke-width:2 }
.cl-viz .cl-e-bad{ stroke:var(--accent2); stroke-width:2; stroke-dasharray:4 3 }

.cl-hint{ font-size:.85rem; color:var(--dimmer) }

@media (max-width:560px){
  .cl-viz text.cl-vt{ font-size:11px }
}

/* The operating point: where the reader currently is on a curve that spans the
   whole range of its control. The dropline matters as much as the dot, because it
   is what ties the point to the axis value the slider is showing. */
.cl-viz .cl-mark{ fill:var(--accent); stroke:var(--bg); stroke-width:2 }
.cl-viz .cl-drop{ stroke:var(--accent); stroke-width:1; stroke-dasharray:2 3; opacity:.7 }
.cl-viz text.cl-markT{ fill:var(--accent); font-weight:600 }

/* A drawn lab shares the .cl-chart slot with the HTML bar labs, whose rules make
   it a fixed-height flex row that clips its overflow. Measured before this rule
   existed: container 150px, SVG 367px, so the bottom of every plot was cut off.
   course-lab.js adds cl-vizhost whenever it puts an SVG here. */
.cl-chart.cl-vizhost{ display:block; height:auto; overflow:visible; align-items:initial;
  padding:12px 0 4px; border-bottom:0 }

/* ------------------------------------------------ probe, drag and play ----
   The probe is the crosshair and readout a plot raises under the pointer; the
   dots ride the series lines at the sampled point nearest the pointer. The
   readout sits on a panel so it stays legible over gridlines in both themes.
   The play glyph drives a sweep (one input across its range) or a trace's
   frames; it is a square while running so the same button stops it. */
.cl-viz .cl-probe{ stroke:var(--dim); stroke-width:1; stroke-dasharray:3 3; opacity:.8 }
.cl-viz .cl-probeBg{ fill:var(--panel); stroke:var(--line2); stroke-width:1; opacity:.94 }
.cl-viz text.cl-probeT{ fill:var(--txt); font-size:9.5px }
.cl-viz .cl-probeDot{ stroke:var(--bg); stroke-width:1.5 }
.cl-viz .cl-probeDot.cl-s0{ fill:var(--accent); stroke:var(--bg) }
.cl-viz .cl-probeDot.cl-s1{ fill:var(--accent2); stroke:var(--bg) }
.cl-viz .cl-probeDot.cl-s2{ fill:var(--dim); stroke:var(--bg) }
.cl-viz .cl-probeDot.cl-s3{ fill:var(--txt); stroke:var(--bg) }
.cl-viz .cl-overlay{ touch-action:pan-y }
.cl-play{ font:inherit; font-size:.82rem; min-width:38px; min-height:34px;
  border:1px solid var(--line2); border-radius:8px; background:var(--panel2);
  color:var(--accent); cursor:pointer }
.cl-play:hover{ border-color:var(--accent) }
.cl-play.on{ background:var(--accent); color:var(--on-accent); border-color:var(--accent) }
.cl-viz .cl-flowdot{ fill:var(--accent); stroke:var(--bg); stroke-width:2 }
.cl-viz text.cl-flowT{ fill:var(--accent); font-weight:600 }