/* ==========================================================================
   The workbench — where algorithms are watched.

   Layout: stage (the drawing) / explain (why this step) / transport (play,
   step, scrub, speed) / counters (live operation tallies) / code (current
   line highlighted in sync with the frame).
   ========================================================================== */

.wb {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden; min-width: 0;
}
.wb-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 15px; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.wb-head .wb-t { font-size: var(--fs-body); letter-spacing: -0.014em; min-width: 0; }
.wb-head .cx-pair { margin-left: auto; }

/* split: stage on the left, code on the right when there is room */
.wb-body { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  .wb-body[data-code="1"] { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .wb-body[data-code="1"] > .wb-code { border-left: 1px solid var(--line); border-top: 0; }
}

.wb-main { min-width: 0; display: flex; flex-direction: column; }

.wb-stage {
  padding: 18px 16px; min-height: 180px; position: relative; overflow-x: auto;
  display: flex; align-items: center;
  /* `safe` keeps the left edge reachable when the drawing is wider than the
     pane — plain `center` makes the overflow unscrollable. */
  justify-content: center;
  justify-content: safe center;
}
.wb-stage svg { display: block; max-width: 100%; height: auto; overflow: visible; }

/* ---------- the "why" line: the most important text on the page ---------- */
.wb-explain {
  padding: 11px 16px; border-top: 1px solid var(--line);
  font-size: var(--fs-body); color: var(--ink-2); line-height: 1.5;
  min-height: 44px; min-width: 0;
  /* Block flow, not flex: the op badge sits inline with the text so a long
     note re-wraps around it instead of pushing it onto a line of its own.
     The engine also measures the tallest note in the trace and pins
     min-height to it, so the transport below never moves during playback. */
  display: block;
  display: flow-root;
}
.wb-explain > * { min-width: 0; }
.wb-explain b, .wb-explain strong { color: var(--ink); font-weight: 620; }
.wb-explain code { font-family: var(--mono); background: var(--surface-2); padding: .1em .35em; border-radius: 4px; border: 1px solid var(--line); }
.wb-explain .op {
  font-size: var(--fs-micro); font-weight: 720; letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 5px;
  display: inline-block; vertical-align: 1px; margin-right: 8px; white-space: nowrap;
}
.op[data-op="compare"] { color: var(--st-compare); color: oklch(from var(--st-compare) min(l, calc(var(--text-lmax) - 0.04)) c h); background: var(--st-compare-soft); }
.op[data-op="swap"]    { color: var(--st-swap); color: oklch(from var(--st-swap) min(l, calc(var(--text-lmax) - 0.04)) c h);    background: var(--st-swap-soft); }
.op[data-op="write"]   { color: var(--st-swap); color: oklch(from var(--st-swap) min(l, calc(var(--text-lmax) - 0.04)) c h);    background: var(--st-swap-soft); }
.op[data-op="visit"]   { color: var(--st-active); color: oklch(from var(--st-active) min(l, calc(var(--text-lmax) - 0.04)) c h);  background: var(--st-active-soft); }
.op[data-op="push"]    { color: var(--st-frontier); color: oklch(from var(--st-frontier) min(l, calc(var(--text-lmax) - 0.04)) c h);background: var(--st-frontier-soft); }
.op[data-op="pop"]     { color: var(--st-frontier); color: oklch(from var(--st-frontier) min(l, calc(var(--text-lmax) - 0.04)) c h);background: var(--st-frontier-soft); }
.op[data-op="done"]    { color: var(--st-done); color: oklch(from var(--st-done) min(l, calc(var(--text-lmax) - 0.04)) c h);    background: var(--st-done-soft); }
.op[data-op="prune"]   { color: var(--st-back); color: oklch(from var(--st-back) min(l, calc(var(--text-lmax) - 0.04)) c h);    background: var(--st-back-soft); }
.op[data-op="found"]   { color: var(--st-done); color: oklch(from var(--st-done) min(l, calc(var(--text-lmax) - 0.04)) c h);    background: var(--st-done-soft); }

/* ---------- transport ---------- */
.wb-transport {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 15px; border-top: 1px solid var(--line); background: var(--surface-2);
}
.tp-btns { display: flex; gap: 4px; align-items: center; flex: none; }
.tp-btn {
  width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.tp-btn:hover { background: var(--surface-2); color: var(--ink); }
.tp-btn:active { transform: scale(.94); }
.tp-btn[disabled] { opacity: .35; pointer-events: none; }
.tp-btn.play { width: 38px; background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.tp-btn.play:hover { filter: brightness(1.08); background: var(--accent); }
.tp-btn svg { width: 15px; height: 15px; }

.tp-scrub { flex: 1 1 200px; min-width: 130px; display: flex; align-items: center; gap: 9px; }
.tp-scrub input[type=range] { flex: 1; min-width: 0; }
.tp-count {
  font-family: var(--mono); font-size: var(--fs-fine); color: var(--ink-3);
  font-variant-numeric: tabular-nums; white-space: nowrap; flex: none;
  min-width: 7ch; text-align: right;
}
.tp-speed { display: flex; align-items: center; gap: 6px; flex: none; }
.tp-speed label { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-4); font-weight: 650; }

/* ---------- live counters ---------- */
.wb-counters {
  display: flex; gap: 18px; flex-wrap: wrap;
  padding: 10px 15px; border-top: 1px solid var(--line); font-size: var(--fs-small);
}
.ctr { display: flex; flex-direction: column; min-width: 0; }
.ctr-v { font-family: var(--mono); font-size: 1rem; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.ctr-l { font-size: var(--fs-micro); color: var(--ink-4); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.ctr[data-hot="1"] .ctr-v { color: var(--st-compare); color: oklch(from var(--st-compare) min(l, calc(var(--text-lmax) - 0.04)) c h); }

/* ---------- legend: the semantic palette, stated once ---------- */
.wb-legend { display: flex; gap: 12px; flex-wrap: wrap; padding: 9px 15px; border-top: 1px solid var(--line); background: var(--surface-2); }
.lg { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-micro); color: var(--ink-3); }
.lg i { width: 10px; height: 10px; border-radius: 3px; display: block; flex: none; }

/* ---------- controls (inputs that change the run) ---------- */
.wb-ctl { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; padding: 12px 15px; border-top: 1px solid var(--line); }
.wc { display: flex; flex-direction: column; gap: 4px; min-width: 130px; flex: 1 1 130px; }
.wc-inline { flex: 0 0 auto; min-width: 0; }
.wc label { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-4); font-weight: 650; display: flex; justify-content: space-between; gap: 8px; }
.wc label b { color: var(--ink); font-family: var(--mono); font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; font-weight: 650; }

/* ---------- code pane ---------- */
.wb-code {
  border-top: 1px solid var(--line); background: var(--surface-sunk);
  min-width: 0; display: flex; flex-direction: column; max-height: 520px;
}
.wb-code-head {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  border-bottom: 1px solid var(--line); flex: none;
}
.wb-code-head .lang { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-4); font-weight: 680; }
.wb-code-lines { overflow: auto; padding: 8px 0 12px; flex: 1; min-height: 0; }
.cl {
  display: grid; grid-template-columns: 34px 1fr; gap: 10px;
  font-family: var(--mono); font-size: var(--fs-fine); line-height: 1.65;
  padding: 0 12px 0 0; white-space: pre; transition: background var(--t-fast) var(--ease);
  border-left: 2px solid transparent;
}
.cl .n { color: var(--ink-4); text-align: right; user-select: none; font-variant-numeric: tabular-nums; }
.cl .t { color: var(--ink-2); overflow-x: visible; }
.cl[data-on="1"] { background: var(--st-active-soft); border-left-color: var(--st-active); }
.cl[data-on="1"] .t { color: var(--ink); }
.cl[data-on="1"] .n { color: var(--ink); font-weight: 680; }   /* the row tint and border mark it; the number stays readable on the tint */

/* ---------- variable inspector ---------- */
.wb-vars { display: flex; gap: 8px; flex-wrap: wrap; padding: 9px 15px; border-top: 1px solid var(--line);
  min-height: 37px; align-items: center; }
.vr {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--mono); font-size: var(--fs-fine);
  padding: 3px 9px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line);
}
.vr .k { color: var(--ink-4); }
.vr .v { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.vr[data-changed="1"] { background: var(--st-active-soft); border-color: var(--accent-line); }
.vr[data-changed="1"] .v { color: var(--accent); }
.vr[data-changed="1"] .k { color: var(--ink-3); }   /* the tinted chip is darker than the page */

/* ==========================================================================
   Drawing primitives shared by every renderer
   ========================================================================== */

/* array cells / bars — the transform transition IS the "movement" */
.vz-cell, .vz-node, .vz-bar {
  transition: transform var(--dur, .34s) var(--ease), fill var(--t-fast) linear, opacity var(--t-fast) linear;
}
:root[data-motion="still"] .vz-cell, :root[data-motion="still"] .vz-node, :root[data-motion="still"] .vz-bar { transition: none; }

.vz-label { font-family: var(--mono); font-size: 12px; font-weight: 620; fill: var(--ink); }
.vz-idx   { font-family: var(--mono); font-size: 9.5px; fill: var(--ink-4); }
.vz-ptr   { font-family: var(--mono); font-size: 10px; font-weight: 700; }
.vz-edge  { stroke: var(--line-strong); fill: none; }
.vz-arrow { stroke: var(--ink-3); fill: none; }

/* state fills, applied by class so the palette stays in one place */
.s-idle     { fill: var(--st-idle); }
.s-active   { fill: var(--st-active); }
.s-compare  { fill: var(--st-compare); }
.s-swap     { fill: var(--st-swap); }
.s-done     { fill: var(--st-done); }
.s-dead     { fill: var(--st-dead); }
.s-frontier { fill: var(--st-frontier); }
.s-back     { fill: var(--st-back); }
.s-idle-stroke     { stroke: var(--st-idle); }
.s-active-stroke   { stroke: var(--st-active); }
.s-compare-stroke  { stroke: var(--st-compare); }
.s-done-stroke     { stroke: var(--st-done); }
.s-frontier-stroke { stroke: var(--st-frontier); }
.s-back-stroke     { stroke: var(--st-back); }

/* text that must stay readable on a filled cell */
.ink-on-fill { fill: #fff; }
.ink-on-idle { fill: var(--st-idle-ink); }

/* window band for sliding-window algorithms */
.vz-window { fill: var(--st-active-soft); stroke: var(--st-active); stroke-width: 1.2; stroke-dasharray: 4 3; }
/* the eliminated half in binary search */
.vz-eliminated { fill: var(--st-dead); opacity: .35; }

/* DP / grid table cells */
.vz-tcell { stroke: var(--line-2); fill: var(--surface); transition: fill var(--t-fast) linear; }
.vz-tcell.filled { fill: var(--st-done-soft); }
.vz-tcell.active { fill: var(--st-active-soft); stroke: var(--st-active); stroke-width: 1.6; }
.vz-tcell.dep    { fill: var(--st-compare-soft); }

/* recursion tree */
.vz-call { fill: var(--surface); stroke: var(--line-2); }
.vz-call.on { fill: var(--st-active-soft); stroke: var(--st-active); }
.vz-call.memo { fill: var(--st-done-soft); stroke: var(--st-done); }
.vz-call.pruned { fill: var(--st-back-soft); stroke: var(--st-back); opacity: .7; }

/* pointer flags above arrays */
.vz-flag { font-family: var(--mono); font-size: 10px; font-weight: 700; }

/* ==========================================================================
   Pattern trainer + problem views
   ========================================================================== */
.pt-card {
  border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface);
  padding: clamp(20px, 4vw, 34px); box-shadow: var(--lift-2);
  display: flex; flex-direction: column; gap: 16px; min-width: 0;
}
.pt-stem { font-size: clamp(1rem, 2.2vw, 1.1875rem); line-height: 1.5; color: var(--ink); letter-spacing: -0.012em; }
.pt-stem em { font-style: normal; background: var(--st-compare-soft); color: var(--ink); padding: 0 3px; border-radius: 3px; }
.pt-opts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.pt-opt {
  text-align: left; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-small); font-weight: 520;
  transition: all var(--t-fast) var(--ease); min-width: 0;
}
.pt-opt:hover { border-color: var(--line-2); background: var(--surface); }
.pt-opt[data-r="ok"] { border-color: var(--good); background: var(--good-soft); color: var(--ink); }
.pt-opt[data-r="no"] { border-color: var(--bad); background: var(--bad-soft); color: var(--ink); }
.pt-opt[data-r="miss"] { border-color: var(--good); background: transparent; color: var(--good); }
.pt-why { border-top: 1px solid var(--line); padding-top: 14px; font-size: var(--fs-body); color: var(--ink-2); line-height: 1.55; }
.pt-why b { color: var(--ink); }

.sig-list { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sig-list > * { min-width: 0; }
.sig {
  position: relative; padding: 10px 12px 10px 28px;
  border-radius: 9px; background: var(--st-frontier-soft); border: 1px solid transparent;
  font-size: var(--fs-small); color: var(--ink-2);
  min-width: 0; overflow-wrap: anywhere;
}
.sig::before { content: "▸"; position: absolute; left: 12px; top: 10px; color: var(--st-frontier); font-size: 11px; }
.sig b { color: var(--ink); }

/* problem list rows */
.prow {
  display: grid; grid-template-columns: 20px minmax(0,1fr) auto; gap: 12px; align-items: center;
  padding: 11px 13px; border-radius: 10px; border: 1px solid transparent; color: var(--ink-2);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  min-width: 0;
}
.prow:hover { background: var(--surface); border-color: var(--line); text-decoration: none; color: var(--ink); }
.prow .pn { min-width: 0; overflow: hidden; }
.prow .pn b { font-weight: 560; font-size: var(--fs-body); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .pn span { font-size: var(--fs-fine); color: var(--ink-4); }
.prow .pm { display: flex; gap: 7px; align-items: center; flex: none; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 620px) { .prow { grid-template-columns: 20px minmax(0,1fr); } .prow .pm { grid-column: 2; justify-content: flex-start; } }