/* One-line cell rows (b9-dp.js) for the B9 pages. Load after viz.css. b9-dp.js sets --cell from the root width. */
.b9-scroll{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain}
.b9-row{width:max-content;min-width:100%;padding-bottom:52px}
.b9-row.flat{padding-bottom:6px}
.b9-row .arr{flex-wrap:nowrap;gap:0 var(--b9-gap, 6px)}
.b9-row .arr.b9-nop{padding-top:10px}
.b9-row .box{font-size:max(var(--fs-label), min(var(--fs-small), calc(var(--cell) * .44)))}
.b9-row .box.sm{font-size:var(--fs-label)}
.b9-row .idx{font-size:var(--fs-label)}

/* dp-table states on top of the shared .cell ones */
.cell.todo .box{border-style:dashed;color:var(--ink-3)}
.cell.probe .box{background:var(--probe-tint);border-color:var(--probe)}
.cell.live .box{border-color:var(--ink)}
.cell.dim{opacity:.4}

.b9-arcs{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.b9-a{--ac:var(--mark)}
.b9-a.probe{--ac:var(--probe)}
.b9-a.ok{--ac:var(--ok)}
.b9-a.dim{--ac:var(--ink-4)}
.b9-a .ln{fill:none;stroke:var(--ac);stroke-width:2;stroke-linecap:round}
.b9-a .hd{fill:var(--ac)}
.b9-a text{
  font-family:var(--mono);font-size:var(--fs-label);font-weight:700;fill:var(--ac);text-anchor:middle;
  paint-order:stroke;stroke:var(--paper);stroke-width:3px;stroke-linejoin:round
}

.b9-span{
  --sc:var(--ink-3);position:absolute;height:8px;border:2px solid var(--sc);border-top:0;border-radius:0 0 5px 5px;
  pointer-events:none;
  transition:left calc(var(--dur) * .4) cubic-bezier(.2,.8,.2,1), width calc(var(--dur) * .4) cubic-bezier(.2,.8,.2,1), border-color .25s
}
.b9-span span{
  position:absolute;top:7px;left:50%;translate:-50% 0;white-space:nowrap;
  font-family:var(--mono);font-size:var(--fs-label);font-weight:700;line-height:14px;color:var(--sc)
}
.b9-span.probe{--sc:var(--probe)}
.b9-span.ok{--sc:var(--ok)}
.b9-span.hit{--sc:var(--mark)}
.b9-span.cur{--sc:var(--ink)}
@media (prefers-reduced-motion: reduce){
  .b9-span{transition:border-color .25s}
}