/* Bit rows (b3-bits.js): numbers as rows of bit cells, MSB left, nibble gaps, stacked like working on paper. */
.bits{overflow-x:auto;padding:6px 0 4px}
.bt-in{
  --bc:24px;position:relative;display:grid;grid-template-columns:auto auto max-content;column-gap:10px;row-gap:7px;
  align-items:center;width:max-content
}
.bt-op{min-width:14px;text-align:right;font-family:var(--mono);font-size:var(--fs-small);font-weight:700;color:var(--ink-3);white-space:nowrap}
.bt-lab{min-width:64px;display:flex;flex-direction:column;line-height:1.15;font-family:var(--mono);white-space:nowrap;
  position:sticky;left:0;z-index:3;background:var(--paper);padding:2px 6px 2px 4px} /* stays put while wide rows scroll */
.bt-lab b{font-size:var(--fs-label);color:var(--ink)}
.bt-lab span{font-size:var(--fs-label);color:var(--ink-3);min-height:1.15em}
.bt-lab.off b{color:var(--ink-3)}
.bt-rule{grid-column:1 / -1;height:0;border-top:2px solid var(--ink);margin:1px 0}
.bt-cells{display:flex;gap:3px}
.bt-c{
  width:var(--bc);height:calc(var(--bc) * 1.25);display:grid;place-items:center;flex:none;
  border:1.5px solid var(--rule);border-radius:4px;background:var(--paper);
  font-family:var(--mono);font-weight:700;font-size:clamp(var(--fs-label), calc(var(--bc) * .56), var(--fs-small));font-variant-ligatures:none;
  transition:background-color .25s, border-color .25s, color .25s, opacity .25s, transform calc(var(--dur) * .35) cubic-bezier(.2,.8,.2,1)
}
.bt-c.nib,.bt-i.nib{margin-left:calc(var(--bc) * .35)}
.bt-c.zero{color:var(--ink-3)}
.bt-c.one{color:var(--ink);border-color:var(--ink-4)}
.bt-c.off{background:var(--sheet);border-style:dashed}
.bt-c.cur{background:var(--probe-tint);border-color:var(--ink);border-width:2px;transform:translateY(-3px);box-shadow:0 8px 12px -8px var(--shadow)}
.bt-c.probe{background:var(--probe-tint);border-color:var(--probe)}
.bt-c.ok{background:var(--ok-tint);border-color:var(--ok);color:var(--ok)}
.bt-c.hit{background:var(--mark);border-color:var(--mark);color:var(--on-mark)}
.bt-c.skip{opacity:.3}
/* wrapped: each row's bits run in lines of --per cells (bitView switches this on when 32 bits do not fit) */
.bt-in.wrapped{grid-template-columns:auto 1fr;row-gap:5px}
.bt-in.wrapped .bt-lab{flex-direction:row;align-items:baseline;gap:8px;position:static;padding:0;margin-top:6px}
.bt-in.wrapped .bt-cells{grid-column:1 / -1;flex-wrap:wrap;row-gap:4px;width:calc(var(--per) * var(--bc) + (var(--per) - 1) * 3px + var(--pg) * var(--bc) * .35 + 1px)}
.bt-in.wrapped .brk{margin-left:0}
.bt-ruler .bt-i{width:var(--bc);flex:none;text-align:center;font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-3);line-height:1}
.bt-in.sparse .bt-i{color:transparent}
.bt-in.sparse .bt-i:nth-child(4n){color:var(--ink-3)} /* narrow cells: label only bits 0, 4, 8, … */
.bt-band{
  position:absolute;left:0;top:0;z-index:2;border-radius:6px;border:2px solid var(--mark);opacity:0;
  transition:transform calc(var(--dur) * .4) cubic-bezier(.2,.8,.2,1), height .25s, opacity .2s;pointer-events:none
}
.bt-band.on{opacity:1}
@media (max-width:520px){
  .bt-in{column-gap:7px}
  .bt-lab{min-width:52px}
  .bt-lab b{font-size:var(--fs-label)}
}
@media (prefers-reduced-motion: reduce){
  .bt-c.cur{transform:none}
  .bt-band{transition:opacity .2s}
}