/* One-line cell rows and span brackets (b8-row.js). Load after viz.css. */
.b8-row{
  --n:8;display:grid;grid-template-columns:repeat(var(--n), minmax(0, var(--cell)));gap:6px;padding-top:34px;
  container-type:inline-size
}
.b8-row .cell{width:auto;min-width:0}
.b8-row .box{width:100%;height:auto;aspect-ratio:1;font-size:max(var(--fs-label), min(var(--fs-small), calc((100cqi - (var(--n) - 1) * 12px) / var(--n) * .36)))}
.b8-row .idx{font-size:var(--fs-label)}
.b8-bar{
  position:absolute;left:0;top:0;height:22px;border:2px solid var(--probe);border-top:none;border-radius:0 0 7px 7px;
  display:flex;align-items:flex-end;justify-content:center;pointer-events:none;
  font-family:var(--mono);font-size:var(--fs-label);font-weight:700;line-height:1;color:var(--ink);white-space:nowrap;
  transition:transform calc(var(--dur) * .4) cubic-bezier(.2,.8,.2,1), width calc(var(--dur) * .4) cubic-bezier(.2,.8,.2,1),
    border-color .25s, opacity .2s
}
.b8-bar span{transform:translateY(calc(100% + 3px));padding:0 3px}
.b8-bar.ok{border-color:var(--ok)}
.b8-bar.ok span{color:var(--ok)}
.b8-bar.hit{border-color:var(--mark)}
.b8-bar.hit span{color:var(--mark)}
.b8-bar.cur{border-color:var(--ink)}
.b8-bar.dim{border-color:var(--ink-4);opacity:.6}
.b8-bar.off{opacity:0}
.ptr.up svg{transform:rotate(180deg)}
@media (max-width:520px){
  .b8-row{gap:4px}
  .b8-row .box{font-size:max(var(--fs-label), min(var(--fs-small), calc((100cqi - (var(--n) - 1) * 12px) / var(--n) * .36)))}
}
@media (prefers-reduced-motion: reduce){
  .b8-bar{transition:border-color .25s, opacity .2s}
}