/* Онлайн-бар из «ячеек». Заполнение — переменная --fill (0…1), её ставит js/online.js.
   Размер ячейки меняется в --cell (ширина блока + зазор). */
.online {
  --cell: repeating-linear-gradient(90deg, #000 0 9px, transparent 9px 13px);
  flex: 1 1 320px;
  max-width: 480px;
  padding: 1rem 1.25rem 1.1rem;
  background: rgba(10, 10, 10, .85);
  border-left: 6px solid var(--red);
}

.online__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.online__label { color: var(--muted); }
.online__count { display: flex; align-items: baseline; font: 700 2.6rem/1 var(--font-main); font-variant-numeric: tabular-nums; }
.online__count span { margin-left: .2rem; color: var(--muted); font-size: 1.3rem; font-weight: 400; }

.online__track {
  height: 20px;
  background: repeating-linear-gradient(90deg, var(--line) 0 9px, transparent 9px 13px);
}

.online__fill {
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--red) 0 9px, transparent 9px 13px);
  clip-path: inset(0 calc((1 - var(--fill, 0)) * 100%) 0 0);
  transition: clip-path 1.4s var(--ease);
}

.online__note { min-height: 1.3em; margin-top: .6rem; color: var(--muted); font-size: .875rem; }