/* ══════════════════════════════════════════════════════════════════════
   visualizer.css ─ Styles for every data-structure renderer.
   Each section is one renderer family — bars, indexed pills, binary,
   bool, queue, string, grid, linked-list, tree, chips, dict/set, plus
   the result/condition/statement panels and the .vb (visualizer-box)
   card wrapper used by every panel.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   #vc — Execution-trace dashboard layout (CSS Grid, predictable).
   Cards sit in equal-width columns: minimum 420px each, stretching
   together to fill the available width. This is wide enough that
   typical Trees, Queues, and Lists fit without triggering their
   internal horizontal scrollbars — those stay as a safety net only
   for genuinely huge data (50-item queues, 100-node trees).

   Column counts by container width:
     < 880px   → 1 column   (single-column stack, mobile)
     880-1300  → 2 columns
     1300-1750 → 3 columns  ← drag splitter to get this
     1750+     → 4 columns
   ══════════════════════════════════════════════════════════════════════ */
#vc {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  grid-auto-flow: dense;
  gap: 12px;
  align-content: start;
}

/* Full-row text-strip / placeholder panels (variables chips, statement,
   condition, empty-state) — these are horizontal strips, not square
   cards, so they look right spanning the entire row. */
#vc > .stmt-panel,
#vc > .cond-panel,
#vc > .empty,
#vc > .vb:has(> .chips) { grid-column: 1 / -1; }

/* ── Card wrapper: every renderer wraps its content in <div class="vb"> ─ */
.vb {
  background: var(--white);
  border: 1.5px solid var(--ink);
  padding: 14px;
  position: relative;
  box-shadow: var(--sh);
  transition: box-shadow .15s;
}
.vb:hover { box-shadow: 4px 4px 0 var(--ink); }
.vb h3 {
  font-family: var(--mono);
  font-size: 10px; font-weight: 900; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text);
  margin: 0 0 12px;
  display: flex; align-items: center; gap: 8px;
}
.vb h3::after { content: ''; flex: 1; height: 1.5px; background: var(--ink); opacity: .35; }
.sub { color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 9.5px; }

/* ── Variable history trail ─────────────────────────────────────────── */
/*    Shown instead of the plain chip strip once variables start evolving.
      Each variable gets a row:  var-lbl  past₁ → past₂ → [current]     */
.var-history { display: flex; flex-direction: column; gap: 8px; }
.var-row     { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.var-lbl {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--muted); min-width: 72px; text-align: right; flex-shrink: 0;
}
.var-trail {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.trail-pill {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  padding: 2px 8px; line-height: 1.6;
  border: 1.5px solid var(--ink); background: var(--cream); color: var(--text);
}
.trail-sep {
  font-size: 11px; color: var(--muted); opacity: .4;
  user-select: none; flex-shrink: 0;
}
/* current value chip inside a trail row — no key label, just the value */
.var-trail > .chip { font-size: 12px; }

/* ── Result panel (final return value) ─────────────────────────────── */
#result-panel {
  display: none;
  flex-shrink: 0;
  background: var(--white);
  border-top: 2px solid var(--ink);
  border-left: 3px solid var(--green);
  padding: 10px 14px 12px;
  position: relative;
}
#result-panel.show { display: block; }
.rp-head {
  font-family: var(--mono);
  font-size: 9px; font-weight: 900; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--green);
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.rp-head::before { content: '✓'; font-size: 11px; }
.rp-head::after  { content: ''; flex: 1; height: 1.5px; background: var(--green); opacity: .4; }
#result-body { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rp-scalar { font-family: var(--mono); font-size: 22px; font-weight: 900; color: var(--text); letter-spacing: -0.5px; }
.rp-pill   { background: var(--cream); border: 2px solid var(--green); padding: 3px 10px;
             font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--text); }
.rp-idx    { font-family: var(--mono); font-size: 9px; color: var(--muted); text-align: center; display: block; margin-top: 2px; }
.rp-item   { display: flex; flex-direction: column; align-items: center; }
.rp-sep    { color: var(--muted); font-family: var(--mono); font-size: 18px; font-weight: 300; align-self: center; }
.rp-none   { font-family: var(--mono); font-size: 13px; color: var(--muted); font-style: italic; }
.rp-raw    { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--text); word-break: break-all; }

/* ── BARS (sorting / pure-comparison numeric arrays) ───────────────── */
.list-row { display: flex; align-items: flex-end; gap: 4px; min-height: 140px; padding: 6px 2px 4px; overflow-x: auto; }
.bc { display: flex; flex-direction: column; align-items: center; min-width: 24px; flex: 1; max-width: 54px; flex-shrink: 0; }
.bp { height: 38px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; font-size: 8px; }
.ptr {
  background: var(--pink); color: var(--white);
  padding: 2px 5px; font-family: var(--mono); white-space: nowrap;
  font-size: 9px; font-weight: 900;
  border: 1.5px solid var(--ink);
  box-shadow: 1px 1px 0 var(--ink);
}
.ptr.arr::after { content: "↓"; display: block; text-align: center; font-size: 8px; line-height: 1; }
.bar {
  width: 100%;
  background: var(--accent);
  border: 2px solid var(--ink);
  min-height: 4px;
  box-shadow: 2px 2px 0 var(--ink);
  transition: height .18s cubic-bezier(.4,0,.2,1);
}
.bar.ch { background: var(--pink); }
.bv { font-family: var(--mono); font-size: 10px; color: var(--text); margin-top: 3px; font-weight: 700; }
.bi { font-family: var(--mono); font-size: 8px; color: var(--gray); margin-top: 1px; }

/* ── INDEXED PILLS (two-pointer / sliding window) ──────────────────── */
.idx-row { display: flex; align-items: flex-end; gap: 5px; padding: 8px 2px 4px; overflow-x: auto; flex-wrap: wrap; row-gap: 8px; }
.idx-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.idx-ptrlabels { display: flex; flex-direction: column; align-items: center; gap: 1px; min-height: 22px; justify-content: flex-end; }
.idx-ptr { background: var(--pink); color: #fff; padding: 1px 5px; font-family: var(--mono); font-size: 8px; font-weight: 900; white-space: nowrap; letter-spacing: .5px; }
.idx-label { font-family: var(--mono); font-size: 8px; color: var(--muted); margin-top: 2px; }
.idx-cell {
  min-width: 34px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); background: var(--white);
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: var(--tonal-fg-on-white);
  padding: 0 7px; transition: background .15s, border-color .15s, box-shadow .15s;
}
.idx-cell.in-win { background: rgba(0,201,167,.16); border-color: var(--accent); }
.idx-cell.at-ptr { background: var(--accent); color: var(--tonal-fg-on-accent); border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.idx-cell.ch     { background: var(--pink);   color: var(--tonal-fg-on-pink);   border-color: var(--ink); }
.idx-cell.at-ptr.ch { background: var(--pink); }

/* ── BINARY CELLS (0/1 arrays) ─────────────────────────────────────── */
.bin-cell {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink);
  font-family: var(--mono); font-size: 13px; font-weight: 900;
  transition: all .15s;
}
.bin-1 { background: var(--accent); color: var(--tonal-fg-on-accent); }
.bin-0 { background: var(--white);  color: var(--tonal-fg-muted-on-white); }
.bin-cell.in-win { border-color: var(--accent); box-shadow: 2px 2px 0 var(--accent); }
.bin-cell.at-ptr { box-shadow: 3px 3px 0 var(--ink); }
.bin-cell.ch     { border-color: var(--pink); }

/* ── BOOL CELLS (True/False arrays — DP visited tables) ───────────── */
.bool-cell {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink);
  font-family: var(--mono); font-size: 15px; font-weight: 900;
  transition: all .15s;
}
.bool-t { background: var(--green); color: #fff; }
.bool-f { background: var(--white); color: var(--tonal-fg-muted-on-white); }
.bool-cell.ch { border-color: var(--pink); box-shadow: 2px 2px 0 var(--pink); }

/* ── DEQUE / QUEUE (BFS frontier, sliding-window queue) ───────────── */
.queue-wrap   { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: 4px 2px 8px; }
.queue-side   { display: flex; flex-direction: column; align-items: center; justify-content: center;
                gap: 3px; padding: 0 8px; flex-shrink: 0; }
.queue-side-label { font-family: var(--mono); font-size: 8px; font-weight: 900;
                    letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.queue-side-arrow { font-size: 18px; line-height: 1; color: var(--accent); font-weight: 900; }
.queue-empty  { font-family: var(--mono); font-size: 11px; color: var(--gray); font-style: italic; padding: 12px 0; }
.queue-cells  { display: flex; align-items: center; gap: 0; flex: 1; }
.queue-cell {
  min-width: 42px; height: 48px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 2.5px solid var(--ink);
  margin-left: -2px;
  background: var(--white);
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: var(--tonal-fg-on-white);
  padding: 0 10px; gap: 2px;
  transition: background .2s, border-color .2s;
  position: relative; flex-shrink: 0;
}
.queue-cell:first-child { margin-left: 0; border-radius: 0; }
.queue-cell.q-new   { background: rgba(6,214,160,.18); border-color: var(--green); color: var(--tonal-fg-on-white); }
.queue-cell.q-ch    { background: var(--accent); color: var(--tonal-fg-on-accent); border-color: var(--ink); }
.queue-cell.q-front { background: var(--pink);   color: var(--tonal-fg-on-pink);   border-color: var(--ink); }
.queue-idx { font-size: 8px; font-weight: 400; color: var(--muted); line-height: 1; }
.queue-cell.q-front .queue-idx { color: rgba(255,255,255,.7); }

/* ── STRING TAGS (string arrays) ──────────────────────────────────── */
.str-cell {
  min-width: 34px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); background: var(--white);
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  color: var(--tonal-fg-on-white);
  padding: 0 8px; transition: all .15s;
}
.str-cell.in-win { background: rgba(0,201,167,.16); border-color: var(--accent); }
.str-cell.at-ptr { background: var(--accent); color: var(--tonal-fg-on-accent); box-shadow: 2px 2px 0 var(--ink); }
.str-cell.ch     { background: var(--pink);   color: var(--tonal-fg-on-pink); }

/* ── GRID (2D matrix with auto-color: 0=empty, 1=blue, neg=red, etc.) ── */
.grid-wrap { display: inline-flex; flex-direction: column; gap: 2px; overflow: auto; }
.grid-row  { display: flex; gap: 2px; }
.gc {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; font-weight: 900;
  border: 2px solid var(--ink);
  transition: all .15s;
}
.gc.zero  { background: var(--white);  color: var(--tonal-fg-muted-on-white); }
.gc.one   { background: var(--blue);   color: var(--white); }
.gc.neg   { background: var(--red);    color: var(--white); }
.gc.other { background: var(--accent); color: var(--black); }
.gc.changed { outline: 3px solid var(--pink); outline-offset: 1px; }

/* ── LINKED LIST (chained nodes, optional cycle) ──────────────────── */
.ll-row { display: flex; align-items: center; overflow-x: auto; padding: 30px 4px 10px; flex-wrap: nowrap; }
.ll-nw  { display: flex; flex-direction: column; align-items: center; position: relative; min-width: 52px; flex-shrink: 0; }
.ll-ptrs { position: absolute; top: -26px; display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; }
.ll-n {
  border: 2.5px solid var(--ink);
  background: var(--white);
  padding: 8px 13px;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  min-width: 38px; text-align: center;
  color: var(--tonal-fg-on-white);
  transition: all .15s;
  box-shadow: 2px 2px 0 var(--ink);
}
.ll-n.hi { background: var(--blue); color: var(--white); box-shadow: 3px 3px 0 var(--ink); }
.ll-arr { color: var(--text); font-size: 18px; padding: 0 5px; user-select: none; flex-shrink: 0; font-weight: 900; }
.ll-nil { color: var(--gray); font-family: var(--mono); font-size: 12px; padding: 8px 12px; border: 2px dashed var(--ink); flex-shrink: 0; font-weight: 700; }
.ll-cyc { color: var(--pink); font-family: var(--mono); font-size: 10px; font-weight: 900; }

/* ── TREE (binary tree as SVG with positioned circles) ────────────── */
.tree-wrap { overflow-x: auto; padding: 6px 4px; }
svg.tree   { display: block; }
.tn circle { fill: var(--white); stroke: var(--ink); stroke-width: 2.5; transition: all .15s; }
.tn.hi circle { fill: var(--blue); stroke: var(--ink); }
.tn text   { fill: var(--text); font-family: var(--mono); font-size: 11px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.tn.hi text { fill: var(--white); }
.te { stroke: var(--ink); stroke-width: 2; fill: none; }
.tp { fill: var(--pink); font-family: var(--mono); font-size: 9px; font-weight: 900; text-anchor: middle; }

/* ── VARIABLES / CHIPS (scalar locals: int, str, bool) ────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  background: var(--white); border: 1.5px solid var(--ink);
  padding: 3px 9px; font-family: var(--mono); font-size: 11px;
  color: var(--tonal-fg-on-white);
  box-shadow: 1px 1px 0 var(--ink);
  transition: background .15s, border-color .15s;
}
.chip.ch { background: rgba(0,201,167,.2); border-color: var(--accent); }
.chip .k { color: var(--blue); font-weight: 900; }

/* ── DICT (key→value table) and SET (pill list) ───────────────────── */
.dt { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11px; }
.dt td { background: var(--white); border: 1px solid var(--ink); padding: 4px 8px; color: var(--tonal-fg-on-white); }
.dt td.k { color: var(--blue); width: 38%; font-weight: 900; }
.dt td.ch { background: rgba(0,201,167,.18); border-color: var(--accent); }
.sp {
  display: inline-block; background: var(--white);
  border: 1.5px solid var(--ink); padding: 2px 9px; margin: 2px;
  font-family: var(--mono); font-size: 11px;
}
.sp.add { background: var(--green); color: var(--black); border-color: var(--green); }

/* ── CONDITION PANEL (if / elif / while / for evaluation) ─────────── */
.cond-panel {
  border: 1.5px solid var(--ink);
  border-left: 3px solid var(--blue);
  padding: 7px 12px 7px 14px;
  background: var(--white);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--mono);
  animation: condSlide .15s ease;
}
@keyframes condSlide { from { opacity:0; transform: translateY(-6px); } to { opacity:1; transform:none; } }
.cond-panel.cond-t    { border-left-color: var(--green); }
.cond-panel.cond-f    { border-left-color: var(--red); }
.cond-panel.cond-loop { border-left-color: var(--blue); }
.cond-panel.cond-exec { border-left-color: var(--gray); background: var(--cream); }
.cond-exec .cond-kw   { color: var(--muted); letter-spacing: 1px; }
.cond-kw    { font-size: 9px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: var(--blue); flex-shrink: 0; }
.cond-expr  { font-size: 12px; color: var(--text); flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cond-badge { font-size: 9px; font-weight: 900; padding: 2px 8px; flex-shrink: 0; letter-spacing: 1px; }
.cond-t .cond-badge    { background: var(--green); color: #0a0a0a; }
.cond-f .cond-badge    { background: var(--red); color: #fff; }
.cond-loop .cond-badge { background: var(--blue); color: #fff; }

/* ── STATEMENT PANEL (assignments, heappush/pop, append, dict-set) ── */
.stmt-panel {
  border: 1.5px solid var(--ink);
  border-left: 3px solid var(--accent);
  padding: 8px 12px 8px 14px;
  background: var(--white);
  display: flex; flex-direction: column; gap: 5px;
  font-family: var(--mono);
  animation: condSlide .15s ease;
}
.stmt-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.stmt-kw  { font-size: 9px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); min-width: 52px; flex-shrink: 0; }
.stmt-src { font-size: 11px; color: var(--text); flex: 1; min-width: 0; }
.stmt-arr { color: var(--accent); font-weight: 900; font-size: 13px; flex-shrink: 0; }
.stmt-val { font-size: 12px; font-weight: 900; color: var(--text); }
.stmt-sub { font-size: 10px; color: var(--muted); margin-left: 2px; }

/* ── List view toggle button ── */
.view-tgl {
  float: right;
  font-size: 10px;
  padding: 1px 7px;
  border: 1px solid var(--ink);
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--mono);
  line-height: 1.6;
  opacity: 0.7;
  transition: opacity .15s, background .15s;
}
.view-tgl:hover { opacity: 1; background: var(--ink); color: var(--bg); }

/* ══════════════════════════════════════════════════════════════════════
   3D CALL STACK  (.cs3-*)  — deck-of-cards, active frame at front
   ══════════════════════════════════════════════════════════════════════ */
.cs3-panel { border-left: 3px solid var(--blue); }
.cs3-more  {
  font-size: 10px; color: var(--gray); font-family: var(--mono);
  padding-bottom: 5px; opacity: 0.7;
}

/* Container: fixed height set by JS via inline style */
.cs3-deck {
  position: relative;
  width: 100%;
}

/* ── Each frame card ── */
.cs3-frame {
  position: absolute;
  left:  calc(var(--di) * 1.5%);
  right: calc(var(--di) * 1.5%);
  bottom: calc(var(--di) * 22px);   /* peek above previous card */
  z-index: calc(20 - var(--di));

  display: flex; align-items: center; gap: 9px;
  height: 50px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1.5px solid var(--ink);
  background: var(--cream);
  font-family: var(--mono); font-size: 11px;
  box-sizing: border-box;
  overflow: hidden;

  /* Depth illusion: cards further back scale narrower */
  transform: scaleX(calc(1 - var(--di) * 0.025));
  transform-origin: center bottom;

  opacity: calc(1 - var(--di) * 0.13);
  transition: all 0.22s ease;
}

/* Active frame (di=0): full colour, glow, no distortion */
.cs3-frame.cs3-active {
  background: color-mix(in srgb, var(--accent) 10%, var(--cream));
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px var(--accent),
    0 6px 20px color-mix(in srgb, var(--accent) 28%, transparent);
  transform: none;
  opacity: 1;
}

/* Depth badge (circle) */
.cs3-depth {
  min-width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 900; flex-shrink: 0;
}
.cs3-frame.cs3-active .cs3-depth { background: var(--accent); color: var(--black); }

.cs3-fn  { font-weight: 900; color: var(--text); flex-shrink: 0; white-space: nowrap; }
.cs3-ag  {
  color: var(--muted); font-size: 10px;
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs3-ret { color: var(--green); font-weight: 700; font-size: 10px; white-space: nowrap; flex-shrink: 0; }
.cs3-badge {
  margin-left: auto; flex-shrink: 0;
  background: var(--accent); color: var(--black);
  font-size: 8px; font-weight: 900; letter-spacing: 1px;
  padding: 2px 7px; border-radius: 3px;
}

/* dark overrides */
[data-theme="dark"]  .cs3-frame,
[data-theme="night"] .cs3-frame,
[data-theme="dusk"]  .cs3-frame,
[data-theme="ember"] .cs3-frame { background: var(--white); }
[data-theme="dark"]  .cs3-frame.cs3-active,
[data-theme="night"] .cs3-frame.cs3-active,
[data-theme="dusk"]  .cs3-frame.cs3-active,
[data-theme="ember"] .cs3-frame.cs3-active {
  background: color-mix(in srgb, var(--accent) 14%, var(--white));
}

/* ══════════════════════════════════════════════════════════════════════
   INDENTED CALL STACK  (.csl-*)  — depth-indented list with spine line
   ══════════════════════════════════════════════════════════════════════ */
.csl-panel  { border-left: 3px solid #8b5cf6; }

.csl-frames {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px 0 2px 4px;
}

/* Each row: indented by depth via --d custom property */
.csl-row {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding-left: calc(var(--d, 0) * 22px);
  transition: opacity .15s;
}
.csl-row:not(.csl-active) { opacity: 0.65; }

/* Spine: vertical connector + dot */
.csl-spine {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20px;
  flex-shrink: 0;
  position: relative;
}
.csl-vline {
  width: 2px;
  height: 14px;
  background: rgba(139,92,246,0.4);
  margin-bottom: 2px;
  flex-shrink: 0;
}
.csl-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(139,92,246,0.5);
  border: 2px solid rgba(139,92,246,0.7);
  flex-shrink: 0;
  margin-top: 2px;
}
.csl-dot-active {
  background: #00c9a7;
  border-color: #00c9a7;
  box-shadow: 0 0 8px rgba(0,201,167,0.6);
}

/* Card */
.csl-card {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  padding: 5px 10px;
  margin-left: 6px;
  border-radius: 6px;
  background: rgba(139,92,246,0.08);
  border: 1.5px solid rgba(139,92,246,0.25);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 11px;
}
.csl-row.csl-active .csl-card {
  background: rgba(0,201,167,0.12);
  border-color: #00c9a7;
  box-shadow: 0 0 10px rgba(0,201,167,0.2);
}

/* Card inner elements */
.csl-depth {
  min-width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(139,92,246,0.25);
  color: rgba(200,200,255,0.85);
  display: flex; align-items: center; justify-content: center;
  font-size: 8.5px; font-weight: 900;
  flex-shrink: 0;
}
.csl-row.csl-active .csl-depth {
  background: #00c9a7;
  color: #0a0a0a;
}

.csl-fn {
  font-weight: 900;
  color: rgba(240,240,240,0.92);
  flex-shrink: 0;
  white-space: nowrap;
}
.csl-row.csl-active .csl-fn { color: #00c9a7; }

.csl-ag {
  color: rgba(160,160,200,0.75);
  font-size: 10px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.csl-ret {
  color: #4ade80;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.csl-badge {
  margin-left: auto;
  flex-shrink: 0;
  background: #00c9a7;
  color: #0a0a0a;
  font-size: 8px; font-weight: 900; letter-spacing: 1px;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
}

/* light-theme overrides: use ink/text colors instead of hardcoded dark */
[data-theme="light"] .csl-fn,
[data-theme="paper"] .csl-fn { color: var(--text); }
[data-theme="light"] .csl-ag,
[data-theme="paper"] .csl-ag { color: var(--muted); }
[data-theme="light"] .csl-depth,
[data-theme="paper"] .csl-depth { color: var(--white); }
[data-theme="light"] .csl-row.csl-active .csl-fn,
[data-theme="paper"] .csl-row.csl-active .csl-fn { color: #007a63; }
[data-theme="light"] .csl-card,
[data-theme="paper"] .csl-card { background: rgba(139,92,246,0.06); }

/* ══════════════════════════════════════════════════════════════════════
   SVG RECURSION TREE  (.svgt-*)  — proper top-down layout
   ══════════════════════════════════════════════════════════════════════ */
.svgt-panel { border-left: 3px solid var(--purple); }
.svgt-scroll {
  overflow: auto;
  max-height: 500px;
  cursor: default;
  padding-bottom: 4px;
}

/* ── Edges ── */
.svgt-edge {
  stroke: color-mix(in srgb, var(--ink) 50%, var(--text));
  stroke-width: 2;
  fill: none;
  opacity: 0.45;
}

/* ── SVG panel sets color so fill="currentColor" works on text ── */
.svgt-panel { color: var(--text); }

/* ── Node rect: color-mix(text 12% + cream) = always visible card ──
   Light: near-cream card   Dark: slightly lifted above bg   */
.svgt-node rect {
  fill: color-mix(in srgb, var(--text) 12%, var(--cream));
  stroke: color-mix(in srgb, var(--ink) 70%, var(--text));
  stroke-width: 1.5;
}

/* ── Active node rect: teal tint + bright border ── */
.svgt-active rect {
  fill: color-mix(in srgb, var(--accent) 18%, color-mix(in srgb, var(--text) 12%, var(--cream)));
  stroke: var(--accent);
  stroke-width: 2.5;
}

/* ── Done node ── */
.svgt-done { opacity: 0.72; }

/* ── Pending node ── */
.svgt-pending { opacity: 0.32; }

/* ══════════════════════════════════════════════════════════════════════
   LINE-CLICK JUMP — gutter markers for executed lines.
   After a trace runs, every line that was actually executed gets its
   line-number colored accent + pointer cursor.  Clicking it jumps the
   visualiser to the last snapshot for that line.
   ══════════════════════════════════════════════════════════════════════ */
.exec-line .CodeMirror-linenumber {
  color: var(--accent) !important;
  cursor: pointer;
  font-weight: 700;
  transition: opacity .1s;
}
.exec-line .CodeMirror-linenumber:hover {
  opacity: 0.7;
}
/* Currently-highlighted line: keep the teal number visible on the .hl bg */
.exec-line.hl .CodeMirror-linenumber {
  color: var(--accent) !important;
  opacity: 1;
}
/* Jump flash: briefly pulse the background when we land on a line via click */
@keyframes line-jump-flash {
  0%   { background: rgba(0, 201, 167, 0.30); }
  100% { background: transparent; }
}
.line-jump-flash {
  animation: line-jump-flash 0.55s ease-out forwards;
}