/* Работает или выключено — точкой и словом (решение №151).

   Состояние карты спрашивают в трёх разных местах — на её обложке,
   строкой в каталоге и у клиента, которому она выдана, — и ответ
   везде обязан выглядеть одинаково. Зелёный — тот же --ok, что
   у заработка и у активной карты клиента (pages/business-client.css);
   красный — тот же --danger, что у опасных кнопок: выключенная карта
   не работает ни у кого, и говорить об этом вполголоса нечестно. */

.statedot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--danger);
}

.statedot__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
}

.statedot--on { color: var(--ok); }
.statedot--on .statedot__dot { background: var(--ok); }