/* chipy kolorów = stacje farbowe */
.chips { display:flex; flex-wrap:wrap; gap:3px; align-items:center; }
/* Strefa hover chipa jest większa niż sam chip: przezroczysty ::before zasypuje 3-pikselowe
   przerwy między kolorami, więc przy przejeżdżaniu myszą w bok kursor i podświetlenie
   przechodzą płynnie z jednego koloru na następny — bez migotania w szczelinach.
   Sam chip wygląda dokładnie tak samo (pseudoelement jest niewidoczny i poza flow). */
.chips .cs { position:relative; }
.chips .cs::before { content:""; position:absolute; top:-5px; bottom:-5px; left:-2px; right:-2px; }
.cs { width:15px; height:15px; border-radius:4px; border:1px solid rgba(255,255,255,.22);
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  font-size:7.5px; font-weight:800; color:rgba(255,255,255,.85); text-shadow:0 1px 1px rgba(0,0,0,.5); }
.cs.lite { color:rgba(0,0,0,.6); text-shadow:none; }
.cs.new { background:transparent !important; border-width:1.6px; border-style:solid; }
.cs.wash { opacity:.4; position:relative; }
.cs.wash::after { content:""; position:absolute; left:-2px; right:-2px; top:50%; height:1.6px;
  background:var(--crit-hi); transform:rotate(-24deg); }
.chips .kcnt { color:var(--muted); font-size:10px; font-weight:700; margin-left:3px; white-space:nowrap; }
.chips .wsep { color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.04em; margin-left:5px; }