/* ── Step controls ── */
#step-controls{display:none;align-items:center;gap:3px}
#step-controls button{
  padding:3px 7px;border-radius:var(--r2);font-size:9.5px;font-weight:600;
  border:1px solid var(--border);background:rgba(255,255,255,.04);
  color:var(--dim);cursor:pointer;transition:all .12s
}
#step-controls button:hover{background:rgba(79,142,250,.1);color:var(--accent);border-color:rgba(79,142,250,.2)}
#step-controls button:active{transform:scale(.95)}
#step-speed{width:55px;height:3px;-webkit-appearance:none;appearance:none;background:var(--border);border-radius:2px;outline:none;cursor:pointer}
#step-speed::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--accent);cursor:pointer}
.step-info{font-family:var(--mono);font-size:8px;color:var(--dim);min-width:36px;text-align:center}
.step-chk{display:flex;align-items:center;gap:3px;font-family:var(--mono);font-size:7.5px;color:var(--dim);cursor:pointer;letter-spacing:.3px}
.step-chk input{width:11px;height:11px;accent-color:var(--accent);cursor:pointer}

/* ── Show wires toggle ── */
.show-wires #wire-layer path:not(.step-lit):not(.step-visited):not(.wire-hi){opacity:.55 !important;stroke-width:2 !important}
.show-wires #wire-layer circle:not(.step-lit):not(.step-visited):not(.wire-hi){opacity:.55 !important}

/* ── Step overlay ── */
.step-overlay{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:24}

/* ── Value badges ── */
.step-badge{
  position:absolute;
  background:rgba(12,13,20,.95);border:1px solid rgba(34,197,131,.3);
  border-radius:var(--r2);font-family:var(--mono);font-size:9px;font-weight:600;
  color:var(--green);padding:2px 8px;pointer-events:all;
  backdrop-filter:blur(8px);white-space:nowrap;z-index:24;cursor:default;
  box-shadow:0 2px 8px rgba(0,0,0,.35)
}
.step-badge:hover{border-color:var(--accent);color:var(--text2);background:rgba(12,13,20,1)}
.step-badge-dim{opacity:.7;font-weight:400;border-color:rgba(34,197,131,.15)}
.step-badge-click{cursor:pointer;border-color:rgba(79,142,250,.25)}
.step-badge-click:hover{background:rgba(79,142,250,.1)}
.step-badge-input{color:var(--cyan);border-color:rgba(94,232,208,.3);cursor:pointer}
.step-badge-input:hover{border-color:rgba(94,232,208,.5);background:rgba(94,232,208,.06)}

/* ── Debug mode ── */
.debug-mode .blk .bdel,.debug-mode .blk .bedit{display:none !important}
.debug-mode .pd.pin{pointer-events:auto !important;cursor:pointer !important}
.debug-mode .pd.pout{cursor:pointer !important}
.debug-mode .balias input{pointer-events:none !important}
.debug-mode #left{pointer-events:none;opacity:.4}
.debug-mode #code-tab{pointer-events:auto;opacity:1}
.debug-mode .wbtn{pointer-events:none !important}
.debug-mode .loop-port{pointer-events:auto !important;cursor:pointer !important}
.debug-mode .tb-undo,.debug-mode .tb-redo{display:none !important}

/* ── Watch ── */
.pd.watch{stroke:#22d3ee !important;stroke-width:4 !important;filter:drop-shadow(0 0 6px rgba(34,211,238,.7)) drop-shadow(0 0 12px rgba(34,211,238,.4))}

/* ── Breakpoints ── */
.pd.breakpoint{stroke:var(--red) !important;stroke-width:4 !important;filter:drop-shadow(0 0 4px rgba(240,96,96,.5))}
.pd.breakpoint-cond{stroke:var(--amber) !important;stroke-width:4 !important;filter:drop-shadow(0 0 4px rgba(240,168,48,.5))}

/* ── Override ── */
.pd.port-override{stroke:var(--purple) !important;stroke-width:4 !important;filter:drop-shadow(0 0 4px rgba(167,139,250,.5))}
.step-badge-override{color:#c4b5fd;border-color:rgba(167,139,250,.3);cursor:pointer}
.step-badge-override:hover{border-color:rgba(167,139,250,.5);background:rgba(167,139,250,.06)}

/* ── Active node glow ── */
.blk.step-active .blk-body{
  stroke:var(--accent) !important;stroke-width:2 !important;
  filter:drop-shadow(0 0 15px rgba(79,142,250,.4)) !important
}

/* ── Wire illumination ── */
#wire-layer .step-lit{opacity:.85 !important;stroke-width:2.5 !important;filter:drop-shadow(0 0 3px currentColor);transition:opacity .25s,stroke-width .25s}
#wire-layer .step-visited{opacity:.3 !important;stroke-width:1.8 !important;transition:opacity .4s,stroke-width .4s}

/* ── Set/Override ring ── */
.set-ring{animation:setRingPulse 2s ease-in-out infinite}
@keyframes setRingPulse{0%,100%{stroke-opacity:.5;r:11}50%{stroke-opacity:.9;r:13}}

/* ── Active code line (Ace marker) ── */
.step-line-active{position:absolute;background:rgba(79,142,250,.12);border-left:2px solid var(--accent);z-index:3}

/* ── Iteration counter ── */
.step-iter{
  position:absolute;
  background:rgba(240,168,48,.1);border:1px solid rgba(240,168,48,.2);
  border-radius:var(--r1);font-family:var(--mono);font-size:7.5px;
  color:rgba(240,168,48,.7);padding:1px 6px;pointer-events:none;white-space:nowrap
}

/* ── Right resizer ── */
#right-resizer{width:3px;flex-shrink:0;background:transparent;cursor:col-resize;transition:background .15s;position:relative}
#right-resizer::after{content:'';position:absolute;inset:0 -2px;z-index:1}
#right-resizer:hover,#right-resizer.active{background:var(--accent)}