/* ==========================================================================
   Live classes — a schedule is read at a glance, usually to answer one
   question: is it on now, and where do I click. The time and the action
   get the space; everything else recedes.
   ========================================================================== */

.live-schedule__list { display: grid; gap: var(--sf-space-2); }

.live-card {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) auto;
  gap: var(--sf-space-4);
  align-items: center;
  padding: var(--sf-space-4);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-md);
  background: var(--sf-surface);
}

.live-card--live { border-color: var(--sf-red-ink); }
.live-card--cancelled { opacity: .6; }

.live-card__when {
  display: flex; align-items: center; gap: var(--sf-space-2);
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-sm);
  color: var(--sf-slate-600);
}

.live-card__now { color: var(--sf-red-ink); font-weight: var(--sf-weight-bold); }

/* A single quiet pulse. Motion earns attention only if it is rare. */
.live-card__pulse {
  width: 8px; height: 8px; border-radius: var(--sf-radius-full);
  background: var(--sf-red-ink);
  animation: live-pulse 2s ease-in-out infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .live-card__pulse { animation: none; }
}

.live-card__title { margin: 0 0 var(--sf-space-1); font-size: var(--sf-text-base); }
.live-card__meta { margin: 0; font-family: var(--sf-font-mono); font-size: var(--sf-text-xs); color: var(--sf-slate-400); }
.live-card__topic { margin: var(--sf-space-1) 0 0; font-size: var(--sf-text-sm); color: var(--sf-slate-600); }

.live-card__action { display: flex; align-items: center; justify-content: flex-end; }

/* The explanation shown instead of a button. Quiet, but present — an
   absent button with no reason reads as a broken page. */
.live-card__pending {
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-xs);
  color: var(--sf-slate-400);
  text-align: right;
  max-width: 14ch;
}

@media (max-width: 768px) {
  .live-card { grid-template-columns: minmax(0, 1fr) auto; }
  .live-card__when { grid-column: 1 / -1; }
  .live-card__pending { max-width: none; }
}