/* ==========================================================================
   Urban Hydrology Lab — page components on top of styles/civil.css.
   Square edges, one-pixel borders, AO shadows, CAD selection on anything
   that changes state. Colors come only from civil.css tokens so Day / Night
   applies to the SVG diagrams and charts as well.
   ========================================================================== */

.lab .mono { font-weight: 700; }

/* Lab-only red for the second branch in experiment 01. */
.lab-page { --c-red: #dc2626; --rgb-red: 220, 38, 38; }
body.night.lab-page { --c-red: #f87171; --rgb-red: 248, 113, 113; }
@media (prefers-color-scheme: dark) { :root:not(.force-light) .lab-page { --c-red: #f87171; --rgb-red: 248, 113, 113; } }

/* --- Hero --------------------------------------------------------------- */
.lab-hero { padding: clamp(36px, 6vw, 64px) 0 28px; }
.lab-hero .kicker { text-decoration: none; }
.lab-hero .kicker:hover { text-decoration: underline; text-underline-offset: 4px; }
.lab-hero h1 { font-size: clamp(2.3rem, 5.2vw, 3.8rem); }
.lab-hero .lead { margin-top: 20px; }
.lab-method {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  margin: 26px 0 0; padding: 0; list-style: none;
  color: var(--ink);
  font: 700 0.7rem/1.3 "IBM Plex Mono", monospace;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.lab-method li { display: inline-flex; align-items: center; gap: 9px; }
.lab-method .mono { color: var(--accent-strong); font-size: 0.7rem; }

/* --- Experiment navigation (separate from the site Index) -------------- */
.lab-bar { display: flex; align-items: stretch; gap: 12px; margin: 8px 0 30px; }
.exp-tabs {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 0.9fr);
  gap: 1px;
  border: 1px solid var(--border-line);
  background: var(--border-line);
  box-shadow: var(--shadow-ao);
}
.exp-tab {
  position: relative;
  display: flex; flex-direction: column; gap: 5px;
  min-width: 0;
  padding: 14px 16px 15px;
  border: 0; border-radius: 0;
  background: var(--bg-card);
  color: var(--ink);
  font: inherit; text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.exp-tab.extra { background: var(--bg-canvas); }
.exp-tab > span { position: relative; z-index: 3; }
.exp-tab::before, .btn.choice::before, .chip::before {
  position: absolute; inset: 0; z-index: 2;
  border: 2px solid transparent; content: ""; pointer-events: none;
  transition: border-color 0.15s ease;
}
.exp-tab::after, .chip::after {
  position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(var(--micro-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--micro-grid) 1px, transparent 1px);
  background-size: 4px 4px; content: ""; opacity: 0; pointer-events: none;
  transition: opacity 0.15s ease;
}
.exp-tab:hover::before, .exp-tab:focus-visible::before { border-color: var(--accent); }
.exp-tab:hover::after, .exp-tab:focus-visible::after { opacity: 1; }
.exp-tab:focus-visible { outline: none; }
.exp-tab[aria-selected="true"] { box-shadow: inset 0 6px 0 var(--accent); }
.exp-tab[aria-selected="true"] .tab-id { color: var(--accent-strong); }
.tab-id { color: var(--ink-muted); font: 700 0.6rem/1 "IBM Plex Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; }
.tab-title { font-size: 0.98rem; font-weight: 800; line-height: 1.2; }
.tab-sub { color: var(--ink-muted); font-size: 0.82rem; font-weight: 500; line-height: 1.35; }
.present-toggle { flex: 0 0 auto; min-height: auto; padding: 0 16px; }
.present-toggle svg { width: 16px; height: 16px; }
.present-toggle[aria-pressed="true"]::before { border-color: var(--accent); }

/* --- Experiment panel --------------------------------------------------- */
.exp[hidden] { display: none; }

/* CAD title block: colored ID cell, title + objective, method tag. */
.title-block {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  border: 1px solid var(--border-line);
  background: var(--bg-card);
  box-shadow: var(--shadow-ao);
}
.tb-id {
  display: grid; place-items: center;
  color: #fff; background: var(--accent);
  font: 700 1.4rem/1 "IBM Plex Mono", monospace;
}
.tb-main { padding: 18px 22px; border-right: 1px solid var(--border-line); }
.tb-title { font-size: clamp(1.45rem, 2.6vw, 2.1rem); }
.tb-objective { max-width: 720px; margin: 8px 0 0; color: var(--ink-muted); font-size: 1rem; font-weight: 500; line-height: 1.55; }
.tb-method {
  align-self: stretch;
  display: flex; align-items: center;
  max-width: 220px; padding: 14px 18px;
  color: var(--ink-muted); background: var(--bg-canvas);
  font: 700 0.6rem/1.45 "IBM Plex Mono", monospace;
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* --- Prediction --------------------------------------------------------- */
.predict {
  position: relative;
  margin-top: 26px;
  padding: 26px clamp(20px, 3vw, 30px) 22px;
  border: 1px solid var(--border-line);
  border-left: 4px solid var(--accent);
  background: var(--bg-canvas);
  box-shadow: var(--shadow-inset-ao);
}
.predict-id, .discuss-id {
  position: absolute; top: -1px; left: clamp(20px, 3vw, 30px);
  transform: translateY(-50%);
  padding: 4px 10px;
  color: #fff; background: var(--accent);
  font: 700 0.6rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.predict-q { max-width: 860px; margin: 0; color: var(--ink); font-size: 1.08rem; font-weight: 600; line-height: 1.55; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.btn.choice { min-height: 40px; padding: 0 16px; font-size: 0.64rem; }
.btn.choice[aria-pressed="true"] { color: var(--accent-strong); background: rgba(var(--accent-rgb), 0.08); }
.btn.choice[aria-pressed="true"]::before { border-color: var(--accent); }
.btn.choice.is-answer::before { border-color: var(--c-green); }
.predict-next { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 16px; }
.predict-next[hidden], .explain[hidden] { display: none; }
.try { flex: 1 1 380px; margin: 0; color: var(--ink-muted); font-size: 0.96rem; line-height: 1.55; }
.try strong { color: var(--ink); }
.explain { max-width: 860px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-line); }
.explain p { margin: 0 0 12px; color: var(--ink); font-size: 1rem; line-height: 1.62; }
.explain p:last-child { margin-bottom: 0; }
.explain .verdict { color: var(--accent-strong); font: 700 0.68rem/1.4 "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; }
.again { margin-left: 10px; padding: 0; border: 0; background: none; color: var(--ink-muted); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.again:hover { color: var(--ink); }

/* --- Workspace: compact controls beside a large visual ----------------- */
.workspace { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 20px; margin-top: 22px; align-items: start; }
.controls {
  display: flex; flex-direction: column; gap: 18px;
  padding: 18px;
  border: 1px solid var(--border-line);
  background: var(--bg-card);
  box-shadow: var(--shadow-ao);
}
.ctl-head {
  display: flex; justify-content: space-between; gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-line);
  color: var(--ink-muted);
  font: 700 0.6rem/1.2 "IBM Plex Mono", monospace;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.ctl-group { display: flex; flex-direction: column; gap: 14px; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  position: relative;
  min-height: 32px; padding: 0 10px;
  border: 1px solid var(--border-line); border-radius: 0;
  background: var(--bg-card); color: var(--ink);
  font: 700 0.6rem/1.2 "IBM Plex Mono", monospace;
  letter-spacing: 0.06em; text-align: left;
  cursor: pointer; overflow: hidden;
}
.chip > span { position: relative; z-index: 3; }
.chip:hover::before, .chip:focus-visible::before { border-color: var(--accent); }
.chip:hover::after, .chip:focus-visible::after { opacity: 1; }
.chip[aria-pressed="true"] { color: var(--accent-strong); box-shadow: inset 0 -3px 0 var(--accent); }

.ctl { display: flex; flex-direction: column; gap: 7px; }
.ctl label, .ctl .ctl-name { color: var(--ink); font-size: 0.86rem; font-weight: 600; line-height: 1.3; }
.ctl-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 10px; align-items: center; }
.ctl input[type="range"] { width: 100%; margin: 0; accent-color: var(--accent); cursor: pointer; }
.num {
  display: flex; align-items: center;
  border: 1px solid var(--border-line);
  background: var(--bg-canvas);
  box-shadow: var(--shadow-inset-ao);
}
.num input {
  width: 100%; min-width: 0; padding: 7px 4px 7px 8px;
  border: 0; background: transparent; color: var(--ink);
  font: 700 0.8rem/1 "IBM Plex Mono", monospace;
  -moz-appearance: textfield;
}
.num input::-webkit-inner-spin-button, .num input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.num input:focus { outline: none; }
.num:focus-within { outline: 2px solid var(--accent-strong); outline-offset: 1px; }
.num .unit { padding: 0 8px 0 2px; color: var(--ink-muted); font: 700 0.6rem/1 "IBM Plex Mono", monospace; white-space: nowrap; }
.ctl select {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--border-line); border-radius: 0;
  background: var(--bg-canvas); color: var(--ink);
  font: 700 0.74rem/1.2 "IBM Plex Mono", monospace;
}
.idf-table { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.idf-table label { display: flex; flex-direction: column; gap: 4px; color: var(--ink-muted); font: 700 0.58rem/1.2 "IBM Plex Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase; }
.ctl-note { margin: 0; color: var(--ink-muted); font-size: 0.8rem; line-height: 1.45; }

details.more { border-top: 1px solid var(--border-line); }
details.more > summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0 0;
  color: var(--ink);
  font: 700 0.62rem/1.2 "IBM Plex Mono", monospace;
  letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; list-style: none;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after { color: var(--accent-strong); content: "+"; font-size: 0.9rem; }
details.more[open] > summary::after { content: "\2212"; }
details.more > .ctl-group { margin-top: 16px; }
.subhead { margin-top: 4px; color: var(--accent-strong); font: 700 0.6rem/1.2 "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; }

/* Step switch (segmented control) */
.segment { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.segment .chip { min-height: 40px; text-align: center; }
.segment .chip[aria-pressed="true"] { color: #fff; background: var(--accent); box-shadow: none; }
.ctl[hidden], .ctl-sub[hidden], .predict[hidden] { display: none; }
.ctl-sub { display: flex; flex-direction: column; gap: 14px; }
.explain .next-step { margin-top: 4px; }

/* Hide / reveal the combined result for a class prediction. */
.reveal-toggle { width: 100%; min-height: 42px; font-size: 0.64rem; }
.reveal-toggle[aria-pressed="true"] { border-color: var(--accent); color: #fff; background: var(--accent); }
.reveal-toggle[aria-pressed="true"]::after { background-image: linear-gradient(rgba(0,0,0,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.16) 1px, transparent 1px); }
.reveal-toggle[aria-pressed="true"]:hover::before, .reveal-toggle[aria-pressed="true"]:focus-visible::before { border-color: var(--ink); }
.ctl-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border-line); }
.ctl-actions .btn { min-height: 38px; }
.ctl-actions .wide { grid-column: 1 / -1; }
.check { display: flex; align-items: center; gap: 9px; grid-column: 1 / -1; color: var(--ink); font-size: 0.86rem; font-weight: 600; cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }

/* --- Stage: readouts, diagram, chart ----------------------------------- */
.stage { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.readouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  border: 1px solid var(--border-line);
  background: var(--border-line);
}
.ro { padding: 14px 16px 13px; background: var(--bg-canvas); box-shadow: var(--shadow-inset-ao); min-width: 0; }
.ro.lead-ro { box-shadow: var(--shadow-inset-ao), inset 0 3px 0 var(--accent); }
.ro-label { color: var(--ink-muted); font: 700 0.58rem/1.3 "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; }
.ro-value { margin-top: 7px; color: var(--ink); font: 700 1.35rem/1.1 "IBM Plex Mono", monospace; letter-spacing: -0.01em; white-space: nowrap; }
.ro-value .u { margin-left: 4px; color: var(--ink-muted); font-size: 0.66rem; letter-spacing: 0.04em; }
.ro-value.tone-blue { color: var(--c-blue); }
.ro-value.tone-green { color: var(--c-green); }
.ro-value.tone-orange { color: var(--c-orange); }
.ro-value[class*="tone-"] .u { color: inherit; opacity: 0.7; }
.t-blue { color: var(--c-blue); }
.t-green { color: var(--c-green); }
.ro-delta { margin-top: 6px; color: var(--ink-muted); font: 600 0.66rem/1.35 "IBM Plex Mono", monospace; }
.ro-delta.changed { color: var(--accent-strong); }
.ro-delta.warn { color: var(--c-orange); }

.viz { margin: 0; border: 1px solid var(--border-line); background: var(--bg-card); box-shadow: var(--shadow-ao); min-width: 0; }
.viz-head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-line);
  background: var(--bg-canvas);
  color: var(--ink-muted);
  font: 700 0.6rem/1.3 "IBM Plex Mono", monospace;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.viz-head .tag { color: var(--accent-strong); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 18px; height: 0; border-top: 3px solid currentColor; }
.legend i.dash { border-top-style: dashed; border-top-width: 2px; }
.legend i.block { height: 9px; border: 0; background: currentColor; opacity: 0.5; }
.viz-body { padding: 12px 14px 4px; }
.viz-body svg { display: block; width: 100%; height: auto; }
.diag-read { margin: 0; padding: 8px 14px 12px; color: var(--ink-muted); font: 600 0.72rem/1.6 "IBM Plex Mono", monospace; }
.diag-read b { color: var(--ink); font-weight: 700; }
.chart-host { position: relative; height: 300px; padding: 0 6px 0 0; touch-action: pan-y; }
.chart-host svg { display: block; width: 100%; height: 100%; overflow: visible; cursor: crosshair; user-select: none; }

/* Media-style scrubber under each chart. */
.scrub { display: grid; grid-template-columns: auto minmax(0, 1fr) 110px; gap: 12px; align-items: center; padding: 10px 14px 14px; border-top: 1px solid var(--border-line); }
.scrub:empty { display: none; }
.scrub .play { min-width: 92px; min-height: 36px; border-color: var(--accent); color: #fff; background: var(--accent); }
.scrub .play::after { background-image: linear-gradient(rgba(0,0,0,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.16) 1px, transparent 1px); }
.scrub .play:hover::before, .scrub .play:focus-visible::before { border-color: var(--ink); }
.scrub input[type="range"] { width: 100%; margin: 0; accent-color: var(--accent); }
.scrub-label { grid-column: 1 / -1; margin-bottom: -4px; color: var(--ink-muted); font: 700 0.58rem/1 "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; }

/* --- SVG drawing classes (charts + diagrams) --------------------------- */
.ch-grid { stroke: var(--border-line); stroke-width: 1; }
.ch-axis { stroke: var(--ink-muted); stroke-width: 1; }
.ch-tick { fill: var(--ink-muted); font: 600 11px "IBM Plex Mono", monospace; }
.ch-title { fill: var(--ink-muted); font: 700 10px "IBM Plex Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.ln { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.ln-ink { stroke: var(--ink); stroke-width: 2.8; }
.ln-blue { stroke: var(--c-blue); stroke-width: 2.4; }
.ln-orange { stroke: var(--c-orange); stroke-width: 2.4; }
.ln-green { stroke: var(--c-green); stroke-width: 2.4; }
.ln-purple { stroke: var(--c-purple); stroke-width: 2.4; }
.ln-thin { stroke-width: 1.8; }
.ln-mid { stroke-width: 2.8; }
.ln-bold { stroke-width: 4; }
.ln-red { stroke: var(--c-red); stroke-width: 2.4; }
.ln-base { stroke: var(--ink-muted); stroke-width: 1.8; stroke-dasharray: 7 5; opacity: 0.85; }
.ar-blue { fill: rgba(var(--rgb-blue), 0.12); }
.ar-green { fill: rgba(var(--rgb-green), 0.12); }
.ar-yellow { fill: rgba(var(--rgb-yellow), 0.32); }
.ar-purple { fill: rgba(var(--rgb-purple), 0.16); }
.hl { stroke-width: 1.6; stroke-dasharray: 3 4; }
.hl-orange { stroke: var(--c-orange); }
.hl-ink { stroke: var(--ink-muted); }
.hl-label { font: 700 10px "IBM Plex Mono", monospace; letter-spacing: 0.04em; }
.hl-label.orange { fill: var(--c-orange); }
.hl-label.muted { fill: var(--ink-muted); }
.mk circle { stroke: var(--bg-card); stroke-width: 2; }
.mk-ink circle { fill: var(--ink); }
.mk-blue circle { fill: var(--c-blue); }
.mk-yellow circle { fill: var(--c-yellow); }
.mk-purple circle { fill: var(--c-purple); }
.mk-green circle { fill: var(--c-green); }
.pk-shift line { stroke: var(--ink-muted); stroke-width: 1.5; }
.pk-shift line.blue { stroke: var(--c-blue); stroke-width: 2.5; }
.pk-shift line.green { stroke: var(--c-green); stroke-width: 2.5; }
.pk-shift text { fill: var(--ink); font: 700 11px "IBM Plex Mono", monospace; paint-order: stroke; stroke: var(--bg-card); stroke-width: 4px; }
.mk text { fill: var(--ink); font: 700 11px "IBM Plex Mono", monospace; paint-order: stroke; stroke: var(--bg-card); stroke-width: 4px; stroke-linejoin: round; }
.ch-cursor line { stroke: var(--accent-strong); stroke-width: 1.5; }
.ch-cursor circle { fill: var(--bg-card); stroke-width: 2.4; }
.ch-cursor circle.ink { stroke: var(--ink); }
.ch-cursor circle.blue { stroke: var(--c-blue); }
.ch-cursor circle.orange { stroke: var(--c-orange); }
.ch-cursor circle.green { stroke: var(--c-green); }
.ch-cursor circle.purple { stroke: var(--c-purple); }
.ch-cursor circle.red { stroke: var(--c-red); }
.ch-cursor-tag rect { fill: var(--accent); }
.ch-cursor-tag text { fill: #fff; font: 700 10px "IBM Plex Mono", monospace; }

/* Diagram primitives */
.d-ground { fill: var(--bg-canvas); stroke: var(--border-line); }
.d-line { stroke: var(--ink-muted); stroke-width: 1.5; fill: none; }
.d-ink { fill: var(--ink); }
.d-card { fill: var(--bg-card); stroke: var(--ink-muted); stroke-width: 1.5; }
.d-shell { stroke: var(--border-line); stroke-linecap: butt; fill: none; }
.d-shell-fill { stroke: var(--bg-canvas); stroke-linecap: butt; fill: none; }
.d-water-blue { stroke: var(--c-blue); stroke-linecap: butt; fill: none; }
.d-water-orange { stroke: var(--c-orange); stroke-linecap: butt; fill: none; }
.d-water-red { stroke: var(--c-red); stroke-linecap: butt; fill: none; }
.d-water-purple { stroke: var(--c-purple); stroke-linecap: butt; fill: none; }
.d-fill-red { fill: var(--c-red); }
.d-fill-purple { fill: var(--c-purple); }
.d-water-ink { stroke: var(--ink); stroke-linecap: butt; fill: none; opacity: 0.78; }
.d-fill-blue { fill: var(--c-blue); }
.d-fill-orange { fill: var(--c-orange); }
.d-fill-green { fill: var(--c-green); }
.d-fill-yellow { fill: var(--c-yellow); }
.d-water { fill: rgba(var(--rgb-blue), 0.32); stroke: var(--c-blue); stroke-width: 2; }
.d-wave { fill: var(--bg-card); stroke-width: 3; }
.d-wave.blue { stroke: var(--c-blue); }
.d-wave.orange { stroke: var(--c-orange); }
.d-wave.red { stroke: var(--c-red); }
.d-label { fill: var(--ink); font: 700 17px "IBM Plex Mono", monospace; letter-spacing: 0.04em; }
.d-label.inv { fill: #fff; }
.d-small { fill: var(--ink-muted); font: 700 13px "IBM Plex Mono", monospace; letter-spacing: 0.06em; }
.d-small.blue { fill: var(--c-blue); }
.d-small.orange { fill: var(--c-orange); }
.d-small.yellow { fill: var(--accent-strong); }
.d-small.purple { fill: var(--c-purple); }
/* Key values on diagrams: large, bold, colored by the flow they describe. */
.d-big { fill: var(--ink); font: 700 30px "IBM Plex Mono", monospace; letter-spacing: -0.02em; }
.d-mid { fill: var(--ink); font: 700 19px "IBM Plex Mono", monospace; }
.d-flow { fill: var(--ink); font: 700 24px "IBM Plex Mono", monospace; }
.d-cap { fill: var(--ink-muted); font: 700 12px "IBM Plex Mono", monospace; letter-spacing: 0.12em; }
.d-big.blue, .d-mid.blue, .d-flow.blue { fill: var(--c-blue); }
.d-big.red, .d-mid.red, .d-flow.red { fill: var(--c-red); }
.d-big.purple { fill: var(--c-purple); }
.d-big.green, .d-mid.green { fill: var(--c-green); }
.halo { paint-order: stroke; stroke: var(--bg-card); stroke-width: 6px; stroke-linejoin: round; }
.d-dash { stroke-width: 1.6; stroke-dasharray: 6 5; fill: none; }
.d-dash.ink { stroke: var(--ink-muted); }
.d-dash.orange { stroke: var(--c-orange); }
.d-dash.blue { stroke: var(--c-blue); }
.d-contrib { fill: rgba(var(--accent-rgb), 0.24); }
.d-iso { stroke: var(--accent-strong); stroke-width: 2.5; stroke-dasharray: 8 5; }
.d-woods { fill: rgba(var(--rgb-green), 0.1); stroke: var(--c-green); stroke-width: 1.5; }
.d-tree { fill: rgba(var(--rgb-green), 0.35); }
.d-lot { fill: var(--bg-canvas); stroke: var(--ink-muted); stroke-width: 1.5; }
.d-stall { stroke: var(--border-line); stroke-width: 2; }
.d-concrete { fill: var(--bg-canvas); stroke: var(--ink); stroke-width: 1.6; }
.d-earth { fill: rgba(var(--rgb-yellow), 0.14); stroke: var(--ink-muted); stroke-width: 1.5; }
.d-hatch { fill: url(#uh-hatch); }
.d-seg-sheet { fill: var(--c-orange); }
.d-seg-shallow { fill: var(--c-blue); }
.d-seg-channel { fill: var(--c-green); }
.d-seg-ghost { fill: none; stroke: var(--ink-muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.d-seg-text { fill: #fff; font: 700 14px "IBM Plex Mono", monospace; }
.d-ia { fill: var(--c-yellow); }
.d-f { fill: var(--c-green); }
.d-q { fill: var(--c-blue); }
.d-rest { fill: var(--bg-canvas); stroke: var(--border-line); }

/* Step 1 timeline: Tc (light) then Tt (solid) for each branch */
.tl-lane { fill: var(--ink); font: 700 12px "IBM Plex Mono", monospace; letter-spacing: 0.12em; }
.tl-tc { stroke-width: 1.5; stroke-dasharray: 5 3; }
.tl-tc.blue { fill: rgba(var(--rgb-blue), 0.12); stroke: var(--c-blue); }
.tl-tc.red { fill: rgba(var(--rgb-red), 0.12); stroke: var(--c-red); }
.tl-tt.blue { fill: var(--c-blue); }
.tl-tt.red { fill: var(--c-red); }
.tl-in { fill: var(--ink); font: 700 12px "IBM Plex Mono", monospace; }
.tl-in.inv { fill: #fff; }
.tl-guide { stroke: var(--ink-muted); stroke-width: 1.2; stroke-dasharray: 3 4; }
.tl-axis { stroke: var(--border-line); stroke-width: 2; }
.tl-dot { stroke: var(--bg-card); stroke-width: 2; }
.tl-dot.blue { fill: var(--c-blue); }
.tl-dot.red { fill: var(--c-red); }
.tl-dot.purple { fill: var(--c-purple); }
.tl-dot.minor { opacity: 0.55; }
.tl-q { font: 700 15px "IBM Plex Mono", monospace; paint-order: stroke; stroke: var(--bg-card); stroke-width: 4px; }
.tl-q.blue { fill: var(--c-blue); }
.tl-q.red { fill: var(--c-red); }
.tl-q.purple { fill: var(--c-purple); }
.tl-q.big { font-size: 20px; }
body.present .tl-in, body.present .tl-lane { font-size: 14px; }
body.present .tl-q { font-size: 17px; }
body.present .tl-q.big { font-size: 23px; }

/* Chart draw-in (calculator first load and view changes) */
.ln-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ln-draw 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.fade-in { opacity: 0; animation: fade-in 0.5s ease forwards; }
@keyframes ln-draw { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ln-draw { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .fade-in { opacity: 1; animation: none; }
}

/* --- After the workspace: prompts + calculation ------------------------ */
.after { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 20px; margin-top: 26px; align-items: start; }
.discuss {
  position: relative;
  padding: 26px clamp(20px, 3vw, 26px) 18px;
  border: 1px solid var(--border-line);
  background: var(--bg-card);
  box-shadow: var(--shadow-ao);
}
.discuss ul { margin: 0; padding-left: 18px; }
.discuss li { margin-bottom: 10px; color: var(--ink); font-size: 0.98rem; font-weight: 500; line-height: 1.5; }
.calc { border: 1px solid var(--border-line); background: var(--bg-card); box-shadow: var(--shadow-ao); }
.calc > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px clamp(18px, 3vw, 24px);
  color: var(--ink);
  font: 700 0.7rem/1.2 "IBM Plex Mono", monospace;
  letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; list-style: none;
}
.calc > summary::-webkit-details-marker { display: none; }
.calc > summary::after { color: var(--accent-strong); content: "+"; font-size: 1rem; }
.calc[open] > summary { border-bottom: 1px solid var(--border-line); }
.calc[open] > summary::after { content: "\2212"; }
.calc-body { padding: 16px clamp(18px, 3vw, 24px) 6px; overflow-x: auto; }
.calc-line { margin: 0 0 10px; color: var(--ink); font: 600 0.8rem/1.65 "IBM Plex Mono", monospace; }
.calc-line .c-note { color: var(--ink-muted); font-weight: 500; }
.calc-line b { color: var(--accent-strong); }
.calc-step { margin: 14px 0 6px; color: var(--ink-muted); font: 700 0.6rem/1.2 "IBM Plex Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; }
.calc-method { padding: 6px clamp(18px, 3vw, 24px) 18px; border-top: 1px dashed var(--border-line); }
.calc-method p { margin: 12px 0 0; color: var(--ink-muted); font-size: 0.9rem; line-height: 1.6; }
.tag-published, .tag-teaching {
  display: inline-block; margin-right: 8px; padding: 3px 7px;
  font: 700 0.56rem/1.2 "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; vertical-align: 1px;
}
.tag-published { color: #fff; background: var(--c-green); }
.tag-teaching { color: var(--ink); background: rgba(var(--rgb-yellow), 0.45); }

/* --- Notes ----------------------------------------------------------- */
.lab-notes { margin-top: 64px; }
.notes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.notes-grid .card { padding: 22px 22px 18px; }
.notes-grid h3 { font-size: 1.05rem; }
.notes-grid p { margin: 0; color: var(--ink-muted); font-size: 0.94rem; line-height: 1.6; }
.notes-grid strong { color: var(--ink); }

/* --- Responsive ------------------------------------------------------- */
@media (max-width: 1020px) {
  .exp-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workspace { grid-template-columns: 1fr; }
  .after { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .lab-bar { flex-direction: column; }
  .exp-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exp-tab.extra { grid-column: 1 / -1; }
  .tab-sub { display: none; }
  .present-toggle { min-height: 40px; align-self: flex-start; }
  .title-block { grid-template-columns: 52px minmax(0, 1fr); }
  .tb-main { border-right: 0; }
  .tb-method { grid-column: 1 / -1; max-width: none; padding: 9px 14px; border-top: 1px solid var(--border-line); }
  .notes-grid { grid-template-columns: 1fr; }
  .chart-host { height: 250px; }
  .scrub { grid-template-columns: auto minmax(0, 1fr); }
  .scrub .num { grid-column: 1 / -1; }
  .ro-value { font-size: 1.15rem; }
}

/* --- Presentation view ------------------------------------------------ */
html.presenting { font-size: 112.5%; }
body.present .shell { width: min(1600px, calc(100% - 40px)); }
body.present .lab-hero { padding: 18px 0 10px; }
body.present .lab-hero .lead,
body.present .lab-hero .reviewed,
body.present .lab-method,
body.present .tab-sub,
body.present details.more,
body.present .lab-notes,
body.present .related-notes,
body.present .fi-tab,
body.present footer { display: none; }
body.present .lab-hero h1 { display: none; }
body.present .lab-hero .kicker { margin: 0; }
body.present .lab-bar { margin-bottom: 18px; }
body.present .tb-objective { font-size: 1.05rem; }
body.present .predict-q { font-size: 1.2rem; }
body.present .workspace { grid-template-columns: 300px minmax(0, 1fr); }
body.present .ro-value { font-size: 1.9rem; }
body.present .ro-label { font-size: 0.66rem; }
body.present .chart-host { height: min(46vh, 480px); }
body.present .ch-tick { font-size: 13px; }
body.present .ch-title, body.present .hl-label { font-size: 12px; }
body.present .mk text { font-size: 13px; }
body.present .diag-read { font-size: 0.82rem; }
@media (max-width: 1020px) { body.present .workspace { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .exp-tab::before, .exp-tab::after, .chip::before, .chip::after { transition: none; }
}