/* Node-link graph view and chip strip (graph.js). Load after viz.css. graph.js sets the root height,
   node positions (left/top = centre) and --gn (node height). */
.gv{--gn:34px;position:relative;width:100%}
.gv-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}

.gv-n{
  position:absolute;translate:-50% -50%;z-index:1;min-width:var(--gn);height:var(--gn);padding:0 7px;
  display:grid;place-items:center;border:1.5px solid var(--ink-4);border-radius:calc(var(--gn) / 2);background:var(--paper);
  font-family:var(--mono);font-weight:700;font-size:var(--fs-label);font-variant-ligatures:none;white-space:nowrap;color:var(--ink);
  transition:background-color .25s, border-color .25s, color .25s, opacity .3s, transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .25s
}
.gv-n .gv-sm{font-size:var(--fs-label)}
/* badge on the upper right: a distance, an in-degree, a parent */
.gv-n b{
  position:absolute;left:calc(100% - 9px);bottom:calc(100% - 9px);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;white-space:nowrap
}
.gv-n b:empty{display:none}
.gv-n.g0{--tint:var(--ok)}
.gv-n.g1{--tint:var(--mark)}
.gv-n.g2{--tint:var(--ink-3)}
.gv-n.g3{--tint:var(--probe)}
.gv-n:is(.g0,.g1,.g2,.g3){background:color-mix(in srgb, var(--tint) 22%, var(--paper));border-color:var(--tint)}
.gv-n.dep{background:var(--mark-tint);border-color:var(--mark);color:var(--mark)}
.gv-n.probe{background:var(--probe-tint);border:2px solid var(--probe)}
.gv-n.cur{background:var(--probe-tint);border:2px solid var(--ink);box-shadow:0 8px 14px -8px var(--shadow);z-index:2}
.gv-n.ok{background:var(--ok-tint);border-color:var(--ok);color:var(--ok)}
.gv-n.hit{background:var(--mark);border-color:var(--mark);color:var(--on-mark)}
.gv-n.hit b{background:var(--paper);color:var(--mark)}
.gv-n.skip{opacity:.4;border-style:dashed}
.gv-n.dim{opacity:.4}
.gv-n.gv-hide{opacity:0;transform:scale(.3)}

.gv-e{--ec:var(--ink-4);transition:opacity .3s}
.gv-e .ln{fill:none;stroke:var(--ec);stroke-width:1.75;stroke-linecap:round;transition:stroke .25s}
.gv-e .hd{fill:var(--ec);transition:fill .25s}
.gv-e .wt{
  fill:var(--ink-2);font-family:var(--mono);font-size:var(--fs-label);font-weight:700;text-anchor:middle;dominant-baseline:central;
  paint-order:stroke;stroke:var(--paper);stroke-width:4px;stroke-linejoin:round;transition:fill .25s
}
.gv-e.probe{--ec:var(--probe)}
.gv-e.dep{--ec:var(--mark)}
.gv-e.cur{--ec:var(--ink)}
.gv-e.ok{--ec:var(--ok)}
.gv-e.hit{--ec:var(--mark)}
.gv-e:is(.cur,.ok,.hit,.probe,.dep) .ln{stroke-width:2.75}
.gv-e:is(.cur,.ok,.hit) .wt{fill:var(--ec)}
.gv-e.skip .ln{stroke-dasharray:4 5}
.gv-e:is(.skip,.dim){opacity:.4}
.gv-e.gv-hide{opacity:0}

/* two views side by side (clone graph); stacked on phones */
.gv-pair{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px}
@media (max-width:640px){ .gv-pair{grid-template-columns:minmax(0, 1fr)} }

/* chip strip: queue / stack / heap / visited set */
.gv-strip{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:32px}
.gv-strip.gv-empty::before{font-family:var(--body);content:"empty";font-size:var(--fs-label);line-height:32px;color:var(--ink-3)}
.gv-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
}
.gv-chip.gv-out{position:absolute;margin:0;pointer-events:none}
.gv-chip.g0{--tint:var(--ok)}
.gv-chip.g1{--tint:var(--mark)}
.gv-chip.g2{--tint:var(--ink-3)}
.gv-chip.g3{--tint:var(--probe)}
.gv-chip:is(.g0,.g1,.g2,.g3){background:color-mix(in srgb, var(--tint) 22%, var(--paper));border-color:var(--tint)}
.gv-chip.dep{background:var(--mark-tint);border-color:var(--mark);color:var(--mark)}
.gv-chip.probe{background:var(--probe-tint);border:2px solid var(--probe)}
.gv-chip.cur{background:var(--probe-tint);border:2px solid var(--ink)}
.gv-chip.ok{background:var(--ok-tint);border-color:var(--ok);color:var(--ok)}
.gv-chip.hit{background:var(--mark);border-color:var(--mark);color:var(--on-mark)}
/* inactive chips stay readable: lighter text and weight (ink-3 >= 5.8:1), skip adds a dashed outline */
.gv-chip:is(.skip,.dim){background:var(--paper);border-color:var(--ink-4);color:var(--ink-3);font-weight:500}
.gv-chip.skip{border-style:dashed}

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