/* Trie view (b4-trie.js). Load after viz.css. b4-trie.js sets node and edge positions; the root scrolls inside itself. */
.tv{position:relative;overflow:auto;overscroll-behavior:contain;max-height:56vh}
.tv-in{position:relative}
.tv-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}

.tv-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
}
.tv-e:is(.path,.cur){stroke:var(--mark);stroke-width:2.5}
.tv-e.probe{stroke:var(--probe);stroke-width:2.5}
.tv-e:is(.ok,.hit){stroke:var(--ok);stroke-width:2}
.tv-e.skip{stroke-dasharray:3 4;opacity:.5}
.tv-e.dim{opacity:.4}

/* a node: the letter on the edge into it; --ring is the end-of-word ring colour */
.tv-n{
  --ring:var(--ink-3);
  position:absolute;z-index:2;translate:-50% -50%;width:30px;height:30px;display:grid;place-items:center;
  border:1.5px solid var(--ink-4);border-radius:50%;background:var(--paper);color:var(--ink);
  font-family:var(--mono);font-size:var(--fs-label);font-weight:700;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),
    background-color .25s, border-color .25s, color .25s, opacity .25s, box-shadow .25s
}
.tv-n.tv-root{width:auto;height:24px;padding:0 9px;border-radius:12px;font-size:var(--fs-label);font-weight:600;color:var(--ink-3);background:var(--sheet)}
.tv-n.end{box-shadow:0 0 0 2.5px var(--paper), 0 0 0 4px var(--ring)}
.tv-n.path{background:var(--mark-tint);border-color:var(--mark);--ring:var(--mark)}
.tv-n.probe{background:var(--probe-tint);border:2px solid var(--probe);--ring:var(--probe)}
.tv-n.cur{background:var(--probe-tint);border:2px solid var(--ink);z-index:3;--ring:var(--ink)}
.tv-n.ok{background:var(--ok-tint);border-color:var(--ok);color:var(--ok);--ring:var(--ok)}
.tv-n.hit{background:var(--mark);border-color:var(--mark);color:var(--on-mark);--ring:var(--mark)}
.tv-n.skip{opacity:.45;border-style:dashed;color:var(--ink-3)}
.tv-n.dim{opacity:.4}
.tv-n.tv-root:is(.cur,.path,.probe){color:var(--ink)}
/* small label on the lower right, e.g. a return value */
.tv-n b{
  position:absolute;left:calc(100% - 9px);top:calc(100% - 9px);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;white-space:nowrap
}
.tv-n b:empty{display:none}

@media (prefers-reduced-motion: reduce){
  .tv-e{transition:stroke .25s, opacity .25s}
  .tv-n{transition:background-color .25s, border-color .25s, color .25s, opacity .25s, box-shadow .25s}
}