/* Binary-tree view and chip strip shared by the tree pages. Load after viz.css; tree.js sets positions and --nd. */
.tree{position:relative;--nd:40px;margin-top:4px}
.tedges{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.te{
  stroke:var(--ink-4);stroke-width:1.5;vector-effect:non-scaling-stroke;
  transition:transform calc(var(--dur) * .7) cubic-bezier(.2,.8,.2,1), stroke .25s, opacity .25s
}
.te.nil{stroke-dasharray:3 4;opacity:.6}
.te.probe,.te.wait{stroke:var(--ink)}
.te.ok{stroke:var(--ok)}
.te.hit{stroke:var(--mark);stroke-width:2.5}

/* nodes are centred on their left/top; transform stays free for fly/pulse/shake */
.tn{
  --s:var(--nd);position:absolute;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  display:grid;place-items:center;border:1.5px solid var(--ink-4);border-radius:50%;background:var(--paper);
  font-family:var(--mono);font-weight:700;font-size:max(var(--fs-label), calc(var(--nd) * .36));font-variant-ligatures:none;
  transition:left calc(var(--dur) * .7) cubic-bezier(.2,.8,.2,1), top calc(var(--dur) * .7) cubic-bezier(.2,.8,.2,1),
    background-color .25s, border-color .25s, color .25s, opacity .25s, box-shadow .25s
}
.tn.wait{border-color:var(--ink)}
.tn.probe{background:var(--probe-tint);border:2px solid var(--probe);box-shadow:0 8px 14px -8px var(--shadow)}
.tn.ok{background:var(--ok-tint);border-color:var(--ok);color:var(--ok)}
.tn.used{background:var(--grid);border-color:var(--grid);color:var(--ink-2)}
.tn.hit{background:var(--mark);border-color:var(--mark);color:var(--on-mark)}
.tn.skip{opacity:.35;border-style:dashed}
.tn.nil{--s:calc(var(--nd) * .44);border-style:dashed;opacity:.55}
.tn.nil.probe{opacity:1}
/* small label on the upper right, e.g. a returned depth */
.tn b{
  position:absolute;left:58%;bottom:64%;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--ink);color:var(--paper);font-size:var(--fs-label);line-height:18px;text-align:center
}
.tn b:empty{display:none}
.tn.nil b{min-width:14px;height:14px;padding:0 3px;font-size:var(--fs-label);line-height:14px;left:40%;bottom:80%}

/* chip strip: call stack or queue, first item on the left */
.strip{--sw:40px;--gap:6px;position:relative;height:var(--sw)}
.strip:empty::before{font-family:var(--body);content:"empty";font-size:var(--fs-label);line-height:var(--sw);color:var(--ink-3)}
.sc{
  position:absolute;top:0;left:calc(var(--i) * (var(--sw) + var(--gap)));width:var(--sw);height:var(--sw);
  display:grid;place-items:center;border:1.5px solid var(--ink-4);border-radius:6px;background:var(--paper);
  font-family:var(--mono);font-weight:700;font-size:var(--fs-label);font-variant-ligatures:none;
  transition:left calc(var(--dur) * .4) cubic-bezier(.2,.8,.2,1), background-color .25s, border-color .25s, color .25s
}
.sc.nil{border-style:dashed;color:var(--ink-3);font-size:var(--fs-label);font-weight:500}
.sc.probe{background:var(--probe-tint);border:2px solid var(--probe)}
.sc.ok{background:var(--ok-tint);border-color:var(--ok);color:var(--ok)}
.sc.hit{background:var(--mark);border-color:var(--mark);color:var(--on-mark)}

@media (max-width:520px){
  .strip{--sw:34px;--gap:4px}
  .sc{font-size:var(--fs-label)}
  .sc.nil{font-size:var(--fs-label)}
}
@media (prefers-reduced-motion: reduce){
  .te{transition:stroke .25s, opacity .25s}
  .tn{transition:background-color .25s, border-color .25s, color .25s, opacity .25s}
  .sc{transition:background-color .25s, border-color .25s, color .25s}
}