/* b1-window.css: window outlines (.seg) and keyed chip rows (.krow) for the B1 array pages. See b1-window.js. */
.seg{
  position:absolute;left:0;top:0;pointer-events:none;border-radius:9px;
  transition:transform calc(var(--dur) * .4) cubic-bezier(.2,.8,.2,1), width calc(var(--dur) * .4) cubic-bezier(.2,.8,.2,1), opacity .2s, border-color .25s
}
.seg.off{opacity:0}
.seg.win{border:2px solid var(--ink)}
.seg.alt{border:2px solid var(--mark)}
.seg.best{border:1.5px dashed var(--ok)}
.seg.best.fin{border:2px solid var(--ok)}

.krow{
  display:flex;flex-wrap:wrap;gap:6px;min-height:58px;padding:8px;border:1.5px solid var(--rule);border-radius:6px;
  background:var(--sheet);align-items:center;margin-bottom:6px
}
.krow:empty::before{font-family:var(--body);content:attr(data-empty);font-size:var(--fs-label);color:var(--ink-3);padding-left:4px}
.krow .chip{
  width:auto;min-width:40px;max-width:none;height:40px;padding:0 8px;align-content:center;gap:1px;line-height:1.1;
  transition:background-color .25s, border-color .25s, color .25s, opacity .25s
}
.krow .chip small{font-size:var(--fs-label);font-weight:500;color:var(--ink-3)}
.krow .chip.cur{background:var(--probe-tint);border:2px solid var(--ink)}
.krow .chip.probe{background:var(--probe-tint);border-color:var(--probe)}
.krow .chip.ok{background:var(--ok-tint);border-color:var(--ok);color:var(--ok)}
.krow .chip.ok small{color:var(--ok)}
.krow .chip.hit small{color:var(--on-mark)}
.krow .chip.used{background:var(--grid);border-color:var(--grid);color:var(--ink-3)}
/* dropped from the window: dashed + lighter, still readable (ink-3 text >= 5.8:1, ink-4 outline >= 3.7:1) */
.krow .chip.skip{background:var(--paper);border-color:var(--ink-4);border-style:dashed;color:var(--ink-3);font-weight:500}
@media (max-width:520px){
  .krow .chip{min-width:34px;height:38px;padding:0 6px}
}