/* Recursion tree view and path strip (rtree.js). Load after viz.css. rtree.js sets node, edge-label and edge
   positions; .rt-n height must stay equal to RT_NH in rtree.js. */
.rt{position:relative;overflow:auto;overscroll-behavior:contain;max-height:60vh}
.rt-in{position:relative}
.rt-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}

.rt-e{
  stroke:var(--ink-4);stroke-width:1.5;vector-effect:non-scaling-stroke;
  transition:transform calc(var(--dur) * .6) cubic-bezier(.2,.8,.2,1), stroke .25s, opacity .25s
}
.rt-e:is(.path,.cur){stroke:var(--mark);stroke-width:2.5}
.rt-e.ok{stroke:var(--ok);stroke-width:2}
.rt-e.hit{stroke:var(--mark);stroke-width:2}
.rt-e.memo{stroke:var(--mark);stroke-dasharray:4 4}
.rt-e.skip{stroke-dasharray:3 4;opacity:.55}
.rt-e.done{opacity:.6}

.rt-n{
  position:absolute;z-index:2;translate:-50% -50%;height:28px;min-width:28px;padding:0 8px;
  display:grid;place-items:center;border:1.5px solid var(--ink-4);border-radius:14px;background:var(--paper);color:var(--ink);
  font-family:var(--mono);font-size:var(--fs-label);font-weight:700;font-variant-ligatures:none;white-space:nowrap;
  transition:left calc(var(--dur) * .6) cubic-bezier(.2,.8,.2,1), top calc(var(--dur) * .6) cubic-bezier(.2,.8,.2,1),
    background-color .25s, border-color .25s, color .25s, opacity .25s, box-shadow .25s
}
.rt-n.path{background:var(--mark-tint);border-color:var(--mark)}
.rt-n.cur{background:var(--probe-tint);border:2px solid var(--ink);box-shadow:0 8px 14px -8px var(--shadow);z-index:3}
.rt-n.ok{background:var(--ok-tint);border-color:var(--ok);color:var(--ok)}
.rt-n.hit{background:var(--mark);border-color:var(--mark);color:var(--on-mark)}
.rt-n.done{background:var(--sheet);border-color:var(--frame-2);color:var(--ink-3)}
.rt-n.memo{background:var(--sheet);border:1.5px dashed var(--mark);color:var(--mark)}
.rt-n.skip{opacity:.5;border-style:dashed;color:var(--ink-3)}
.rt-n.skip span{text-decoration:line-through;text-decoration-thickness:1.5px}
/* badge on the lower right (the upper side belongs to the edge label), e.g. a returned value */
.rt-n b{
  position:absolute;left:calc(100% - 8px);top:calc(100% - 8px);min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--ink);color:var(--paper);font-size:var(--fs-label);line-height:17px;text-align:center
}
.rt-n b:empty{display:none}

/* choice label on the edge into a node */
.rt-el{
  position:absolute;z-index:1;translate:-50% -50%;padding:0 4px;border-radius:4px;background:var(--paper);
  font-family:var(--mono);font-size:var(--fs-label);font-weight:600;line-height:15px;color:var(--ink-3);white-space:nowrap;
  font-variant-ligatures:none;
  transition:left calc(var(--dur) * .6) cubic-bezier(.2,.8,.2,1), top calc(var(--dur) * .6) cubic-bezier(.2,.8,.2,1), color .25s, opacity .25s
}
.rt-el:is(.path,.cur){color:var(--mark);font-weight:700}
.rt-el.ok{color:var(--ok)}
.rt-el.skip{color:var(--ink-3);text-decoration:line-through}
.rt-el.done{opacity:.7}

/* path strip: the current partial answer (same look as chipStrip in graph.js) */
.rt-strip{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:32px}
.rt-strip.rt-empty::before{content:"[ ]";font-family:var(--mono);font-size:var(--fs-label);line-height:32px;color:var(--ink-3)}
.rt-chip{
  min-width:32px;height:32px;padding:0 8px;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;white-space:nowrap;
  transition:background-color .25s, border-color .25s, color .25s, opacity .25s
}
.rt-chip.rt-out{position:absolute;margin:0;pointer-events:none}
.rt-chip:is(.path,.dep){background:var(--mark-tint);border-color:var(--mark)}
.rt-chip.probe{background:var(--probe-tint);border:2px solid var(--probe)}
.rt-chip.cur{background:var(--probe-tint);border:2px solid var(--ink)}
.rt-chip.ok{background:var(--ok-tint);border-color:var(--ok);color:var(--ok)}
.rt-chip.hit{background:var(--mark);border-color:var(--mark);color:var(--on-mark)}
/* inactive chips stay readable: dashed outline, lighter text and weight (ink-3 >= 5.8:1, ink-4 outline >= 3.7:1) */
.rt-chip:is(.skip,.dim){background:var(--paper);border-color:var(--ink-4);border-style:dashed;color:var(--ink-3);font-weight:500}

@media (max-width:520px){
  .rt-chip{height:30px;min-width:30px;font-size:var(--fs-label);padding:0 6px}
}
@media (prefers-reduced-motion: reduce){
  .rt-e{transition:stroke .25s, opacity .25s}
  .rt-n{transition:background-color .25s, border-color .25s, color .25s, opacity .25s}
  .rt-el{transition:color .25s, opacity .25s}
}