/*
 * design-system/components/pulse.css
 * Editorial Calm — Pulse. ТЗ 4.12.
 *
 * Минималистичный индикатор статуса системы. Заменяет всё текущее
 * "💓 Пульс Системы" в одну строку.
 *
 * Состояния:
 *   good — все системы в норме
 *   warn — частичная деградация (с указанием подсистемы)
 *   bad  — сбой (со ссылкой на /system/pulse)
 *
 * Использование:
 *   <div class="ed-pulse ed-pulse--good">
 *     <span class="ed-dot ed-dot--good"></span>
 *     <span>Все системы в норме · обновлено 2 мин назад</span>
 *   </div>
 */

[data-theme="editorial"] .ed-pulse {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: border-color var(--motion-fast) var(--ease),
              background-color var(--motion-fast) var(--ease);
}
[data-theme="editorial"] a.ed-pulse:hover { border-color: var(--ink); }
[data-theme="editorial"] a.ed-pulse:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }

[data-theme="editorial"] .ed-pulse--good { background: transparent; }
[data-theme="editorial"] .ed-pulse--warn { background: var(--warn-tint); border-color: rgba(140, 90, 26, 0.25); color: var(--warn); }
[data-theme="editorial"] .ed-pulse--bad  { background: var(--bad-tint);  border-color: rgba(139, 42, 31, 0.25); color: var(--bad);  }

[data-theme="editorial"] .ed-pulse--warn .ed-dot,
[data-theme="editorial"] .ed-pulse--bad .ed-dot {
  /* анимация мягкого пульса для тревожных состояний */
  animation: ed-pulse-blink 2000ms ease-in-out infinite;
}

@keyframes ed-pulse-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="editorial"] .ed-pulse .ed-dot {
    animation: none;
  }
}