/* Binary-search strip for the B2 pages. Load after viz.css. Usage contract in b2-bsearch.js.
   .arr.bs: M pointer above the cells, L and R below, so rows need room for both.
   Cells carry .live (inside [l, r]) with .lo / .hi on the ends: each live cell draws its piece of one
   bracket, so the bracket survives wrapping. .out cells sink out of the range as they fade. */
.arr-wrap.bsw{padding-bottom:46px}
.arr.bs{gap:72px 6px}
.ptr.up{color:var(--ink-2)}
.bs .cell{position:relative;transition:opacity .3s, transform calc(var(--dur) * .4) cubic-bezier(.2,.8,.2,1)}
.bs .cell::after{
  content:"";position:absolute;left:-3px;right:-3px;bottom:-10px;height:7px;
  border:0 solid var(--ink);opacity:0;transition:opacity .25s
}
.bs .cell.live::after{opacity:1;border-bottom-width:2px}
.bs .cell.lo::after{left:0;border-left-width:2px}
.bs .cell.hi::after{right:0;border-right-width:2px}
.bs .cell.out{transform:translateY(8px)}
/* optional value bars above each box (addBars): the shape of the data, e.g. the cliff in a rotated array */
.bar-slot{width:100%;height:var(--bar-h,44px);display:flex;align-items:flex-end;justify-content:center;margin-bottom:9px}
.bar{
  width:58%;height:calc(var(--v) * 100%);min-height:3px;border-radius:3px 3px 0 0;background:var(--ink-4);opacity:.5;
  transition:background-color .25s, opacity .25s, height calc(var(--dur) * .4)
}
.cell.cur .bar{background:var(--probe);opacity:1}
.cell.ok .bar{background:var(--ok);opacity:.85}
.cell.hit .bar{background:var(--mark);opacity:1}
.cell.run .bar{background:var(--mark);opacity:.35} /* page-defined group, e.g. the sorted half */
@media (prefers-reduced-motion: reduce){
  .bs .cell.out{transform:none}
}