/* Heap drawn as a tree (positioned nodes over SVG edges) and as its backing list. Used with heap.js. */
.htree{
  --row:62px;--hn:40px;position:relative;height:calc(var(--levels, 1) * var(--row));
  max-width:calc(var(--slots, 1) * 76px);margin:0 auto
}
.htree:not(:has(.hn))::after{font-family:var(--body);
  content:"empty heap";position:absolute;inset:0;display:grid;place-items:center;
  font-size:var(--fs-label);color:var(--ink-3)
}
.hedges{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hedges line{stroke:var(--ink-4);stroke-width:1.5;transition:stroke .25s}
.hedges line.probe{stroke:var(--probe);stroke-width:3}
.hn{
  position:absolute;width:var(--hn);height:var(--hn);margin:calc(var(--hn) / -2) 0 0 calc(var(--hn) / -2);
  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-small);transition:background-color .25s, border-color .25s, color .25s
}
.hn.probe{background:var(--probe-tint);border-color:var(--probe)}
.hn.hit{background:var(--mark);border-color:var(--mark);color:var(--on-mark)}
.hn.ok{background:var(--ok-tint);border-color:var(--ok);color:var(--ok)}
.hn.used{background:var(--grid);border-color:var(--grid);color:var(--ink-2)}
/* a tag to the right of a node, e.g. "← k-th largest" on the root */
.hn[data-tag]::after{font-family:var(--body);
  content:attr(data-tag);position:absolute;left:calc(100% + 8px);top:50%;margin-top:-7px;line-height:14px;
  white-space:nowrap;font-size:var(--fs-label);color:var(--ink-2)
}
.hn.ok[data-tag]::after{color:var(--ok)}
/* index labels stay with the slot while values move */
.hi{
  position:absolute;width:24px;margin:calc(var(--hn) / 2 + 3px) 0 0 -12px;text-align:center;
  font-family:var(--mono);font-size:var(--fs-label);line-height:1;color:var(--ink-3);pointer-events:none
}
.harr{--cell:40px;display:flex;flex-wrap:wrap;justify-content:center;gap:18px 6px;min-height:var(--cell)}
.harr:empty::before{content:"[ ]";font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-3);align-self:center}
.harr .cell.probe .box{background:var(--probe-tint);border-color:var(--probe)}
@media (max-width:520px){
  .htree{--row:50px;--hn:32px}
  .hn{font-size:var(--fs-label)}
  .harr{--cell:32px;gap:16px 5px}
  .harr .box{font-size:var(--fs-label)}
}