/*
 * components/live-refresh.css — live-refresh affordances (WP7: complete
 * real-time). Shared by the server dashboard and the detail page's
 * deployment-events timeline: a small "Live / Updated Ns ago / Updating…"
 * indicator plus an unobtrusive dim while a poll is in flight. Token-driven
 * (D5); honors prefers-reduced-motion.
 */

.dash-live {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
}

.dash-live__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-success-fg);
  animation: dash-live-pulse 2s ease-in-out infinite;
}

.dash-live[data-state="updating"] .dash-live__dot {
  background: var(--color-info-fg);
}

.dash-live[data-state="error"] .dash-live__dot {
  background: var(--color-warn-fg);
  animation: none;
}

@keyframes dash-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Unobtrusive dim on a section whose data is mid-refresh (a lightweight
   loading affordance; the skeleton_rows block handles first-load). */
.is-updating {
  opacity: 0.65;
  transition: opacity var(--dur-base) ease;
}

@media (prefers-reduced-motion: reduce) {
  .dash-live__dot { animation: none; }
  .is-updating { transition: none; }
}