/* ============================================================
   Live Class — SEED-styled.
   Region selector → single-session view. Status pills use the
   SEED status tints (critical/warning/neutral). Scoped to
   #page-live-class so the rest of the classroom is unaffected.
   ============================================================ */

/* Page fills full available height. Activity header sits at the top
   (back arrow flush left); the live-class content area fills the rest
   of the height and vertically centers the card. */
#page-live-class.active {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: calc(100dvh - 64px);
}
#page-live-class.active .activity-header {
  width: 100%;
  margin-bottom: 0;
  flex-shrink: 0;
}
/* Match SEED Action Button style: 40px round with thin stroke + layer fill. */
#page-live-class.active .activity-header .nav-arrow-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--seed-radius-full);
  border: 1px solid var(--seed-stroke-neutral);
  background: var(--seed-bg-layer-default);
}
.live-class-page {
  flex: 1;
  max-width: 720px;
  width: 100%;
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--seed-font-sans);
  letter-spacing: -0.01em;
}

.live-class-intro {
  color: var(--seed-fg-neutral-muted);
  font-size: var(--seed-body-m-size);
  line-height: var(--seed-body-m-leading);
  margin-bottom: var(--seed-space-6);
  font-weight: 400;
}

/* === Session card (post-selection, single region) ======================= */
.live-class-card {
  background: var(--seed-bg-layer-default);
  border: 1px solid var(--seed-stroke-neutral-muted);
  border-radius: var(--seed-radius-5);
  padding: var(--seed-space-6);
  margin-bottom: var(--seed-space-4);
  cursor: pointer;
  transition: border-color var(--seed-duration-short) var(--seed-easing-standard),
              transform var(--seed-duration-short) var(--seed-easing-standard),
              box-shadow var(--seed-duration-short) var(--seed-easing-standard);
}
.live-class-card:hover {
  border-color: var(--seed-fg-neutral);
  transform: translateY(-1px);
  box-shadow: var(--seed-shadow-small);
}

.live-class-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--seed-space-2);
}

.live-class-region {
  font-size: var(--seed-label-s-size);
  font-weight: 600;
  color: var(--seed-fg-neutral-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.live-class-status {
  font-size: var(--seed-caption-size);
  font-weight: 700;
  padding: var(--seed-space-1) var(--seed-space-3);
  border-radius: var(--seed-radius-full);
  letter-spacing: 0.02em;
}
/* Live = strongest emphasis: solid critical bg, contrast (white) text.
   Soon / Upcoming use the neutral subtle surface with semantic-colored
   text — SEED canon, no invented brand-subtle / warning-subtle tints. */
.live-class-status.live {
  background: var(--seed-bg-critical-solid);
  color: var(--seed-fg-brand-contrast);
}
.live-class-status.soon {
  background: var(--seed-bg-layer-basement);
  color: var(--seed-fg-warning);
}
.live-class-status.upcoming {
  background: var(--seed-bg-layer-basement);
  color: var(--seed-fg-neutral-subtle);
}

/* Date-as-hero: the WHEN is the strongest scan target. */
.live-class-when {
  font-size: var(--seed-title-2-size);
  line-height: var(--seed-title-2-leading);
  font-weight: 700;
  color: var(--seed-fg-neutral);
  letter-spacing: -0.02em;
  margin: 0 0 var(--seed-space-5) 0;
}
/* Legacy aliases — referenced elsewhere; keep tokenized. */
.live-class-title {
  font-size: var(--seed-title-2-size);
  line-height: var(--seed-title-2-leading);
  font-weight: 700;
  color: var(--seed-fg-neutral);
  letter-spacing: -0.02em;
  margin-bottom: var(--seed-space-2);
}
.live-class-time  {
  font-size: var(--seed-label-m-size);
  color: var(--seed-fg-neutral);
  font-weight: 600;
  margin-bottom: var(--seed-space-1);
}
.live-class-local {
  font-size: var(--seed-body-s-size);
  color: var(--seed-fg-neutral-muted);
  margin-bottom: var(--seed-space-5);
  font-weight: 400;
}

/* === Join button — SEED Medium (48px) ================================== */
.live-class-join-btn {
  background: var(--seed-bg-layer-basement);
  color: var(--seed-fg-neutral-muted);
  border: none;
  border-radius: var(--seed-radius-4);
  height: 48px;
  padding: 0 var(--seed-space-5);
  font-size: var(--seed-label-m-size);
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  font-family: var(--seed-font-sans);
  transition: background var(--seed-duration-short) var(--seed-easing-standard),
              transform var(--seed-duration-short) var(--seed-easing-standard);
}
.live-class-join-btn:hover  { background: var(--seed-stroke-neutral-muted); }
.live-class-join-btn:active { transform: scale(0.97); }
.live-class-join-btn.is-primary {
  background: var(--seed-bg-brand-solid);
  color: var(--seed-fg-brand-contrast);
}
.live-class-join-btn.is-primary:hover { background: var(--seed-bg-brand-solid-pressed); }

/* === Region selector ================================================== */
.live-class-selector {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--seed-space-8);
  min-height: 60vh;
}
.live-class-selector-title {
  font-size: var(--seed-title-1-size);
  line-height: var(--seed-title-1-leading);
  font-weight: 700;
  color: var(--seed-fg-neutral);
  letter-spacing: -0.02em;
  margin: 0;
  text-align: center;
}
.live-class-selector-options {
  display: flex;
  gap: var(--seed-space-4);
  width: 100%;
  max-width: 640px;
}

/* Each option is a clickable tile: flag on top, schedule below. */
.live-class-option {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--seed-space-5);
  text-align: center;
  background: var(--seed-bg-layer-default);
  border: 1px solid var(--seed-stroke-neutral-muted);
  border-radius: var(--seed-radius-6);
  padding: var(--seed-space-8) var(--seed-space-6);
  cursor: pointer;
  font-family: var(--seed-font-sans);
  transition: border-color var(--seed-duration-short) var(--seed-easing-standard),
              transform var(--seed-duration-short) var(--seed-easing-standard),
              box-shadow var(--seed-duration-short) var(--seed-easing-standard);
}
.live-class-option:hover {
  border-color: var(--seed-fg-neutral);
  transform: translateY(-1px);
  box-shadow: var(--seed-shadow-small);
}
.live-class-option:active { transform: scale(0.99); }
.live-class-option.is-selected {
  border-color: var(--seed-bg-brand-solid);
  box-shadow: 0 0 0 3px var(--blue-soft);
}

/* === Confirm button — SEED Large (56px) primary ======================= */
.live-class-confirm {
  width: 100%;
  max-width: 480px;
  height: 56px;
  border: none;
  border-radius: var(--seed-radius-4);
  background: var(--seed-bg-brand-solid);
  color: var(--seed-fg-brand-contrast);
  font-family: var(--seed-font-sans);
  font-size: var(--seed-label-l-size);
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background var(--seed-duration-short) var(--seed-easing-standard),
              transform var(--seed-duration-short) var(--seed-easing-standard);
}
.live-class-confirm:hover:not(:disabled)  { background: var(--seed-bg-brand-solid-pressed); }
.live-class-confirm:active:not(:disabled) { transform: scale(0.99); }
.live-class-confirm:disabled {
  background: var(--seed-stroke-neutral);
  color: var(--seed-fg-neutral-subtlest);
  cursor: not-allowed;
}

.live-class-option-flag {
  font-size: 64px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
}
.live-class-option-body {
  display: flex;
  flex-direction: column;
  gap: var(--seed-space-2);
  width: 100%;
}
.live-class-option .live-class-region {
  font-size: var(--seed-label-s-size);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--seed-fg-neutral-muted);
}
.live-class-option-when {
  font-size: var(--seed-title-4-size);
  line-height: var(--seed-title-4-leading);
  font-weight: 600;
  color: var(--seed-fg-neutral);
  letter-spacing: -0.01em;
  white-space: pre-line;
}
@media (max-width: 480px) {
  .live-class-selector-options { gap: var(--seed-space-3); }
  .live-class-option           { padding: var(--seed-space-4); gap: var(--seed-space-3); }
  .live-class-option-flag      { font-size: 52px; }
  .live-class-option-when {
    font-size: var(--seed-body-m-size);
    line-height: var(--seed-body-m-leading);
  }
}

/* [hidden] override — CSS specificity beats UA default for elements
   that have explicit display rules. */
.live-class-selector[hidden],
.live-class-single[hidden],
.live-class-recordings-link[hidden] { display: none; }

/* === Single-session view (post-selection) ============================== */
.live-class-single {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--seed-space-8);
}
.live-class-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--seed-space-3);
}
.live-class-hero-flag {
  font-size: 72px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
  margin-bottom: var(--seed-space-1);
}
.live-class-hero-title {
  font-size: var(--seed-title-1-size);
  line-height: var(--seed-title-1-leading);
  font-weight: 700;
  color: var(--seed-fg-neutral);
  letter-spacing: -0.02em;
  margin: 0;
}
.live-class-hero-countdown {
  font-size: var(--seed-display-1-size);
  line-height: var(--seed-display-1-leading);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--seed-bg-brand-solid);
}
.live-class-hero-countdown.is-live { color: var(--seed-fg-critical); }
.live-class-hero-when {
  font-size: var(--seed-body-m-size);
  line-height: var(--seed-body-m-leading);
  color: var(--seed-fg-neutral-muted);
  font-weight: 400;
}

/* Two-button actions row */
.live-class-actions {
  display: flex;
  gap: var(--seed-space-3);
  width: 100%;
  max-width: 480px;
}
.live-class-actions .live-class-recordings-btn,
.live-class-actions .live-class-join-btn {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  height: 56px;
  min-height: 56px;
  padding: 0 var(--seed-space-5);
  font-size: var(--seed-label-l-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.live-class-recordings-btn {
  border: none;
  border-radius: var(--seed-radius-4);
  background: var(--seed-bg-layer-basement);
  color: var(--seed-fg-neutral-muted);
  font-family: var(--seed-font-sans);
  font-size: var(--seed-label-l-size);
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background var(--seed-duration-short) var(--seed-easing-standard),
              transform var(--seed-duration-short) var(--seed-easing-standard);
}
.live-class-recordings-btn:hover  { background: var(--seed-stroke-neutral-muted); }
.live-class-recordings-btn:active { transform: scale(0.98); }

/* Join button disabled — SEED disabled style. Re-enables 10 min before
   class through 75 min after (live window). */
.live-class-actions .live-class-join-btn:disabled {
  background: var(--seed-stroke-neutral);
  color: var(--seed-fg-neutral-subtlest);
  cursor: not-allowed;
}
@media (max-width: 480px) {
  .live-class-actions       { flex-direction: column; }
  .live-class-actions > *   { width: 100%; flex: 0 0 auto; }
}

/* Change-time-zone link — quiet tertiary. */
.live-class-change-tz {
  display: inline-flex;
  align-items: center;
  margin-top: var(--seed-space-3);
  padding: var(--seed-space-2) var(--seed-space-1);
  background: transparent;
  border: none;
  color: var(--seed-fg-neutral-muted);
  font-size: var(--seed-label-s-size);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-family: var(--seed-font-sans);
  cursor: pointer;
  transition: color var(--seed-duration-short) var(--seed-easing-standard);
}
.live-class-change-tz:hover { color: var(--seed-fg-neutral); }

/* Recordings — text link, tertiary weight. */
.live-class-recordings-link {
  display: inline-flex;
  align-items: center;
  margin-top: var(--seed-space-2);
  padding: var(--seed-space-3) var(--seed-space-1);
  color: var(--seed-fg-neutral-muted);
  font-size: var(--seed-body-s-size);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  font-family: var(--seed-font-sans);
  transition: color var(--seed-duration-short) var(--seed-easing-standard);
}
.live-class-recordings-link:hover { color: var(--seed-fg-neutral); }

/* Info card — same SEED radius/padding rhythm as the session card. */
.live-class-info {
  background: var(--seed-bg-layer-basement);
  border: 1px solid var(--seed-stroke-neutral-muted);
  border-radius: var(--seed-radius-5);
  padding: var(--seed-space-5) var(--seed-space-6);
  margin-bottom: var(--seed-space-4);
}
.live-class-info-row {
  display: flex;
  gap: var(--seed-space-3);
  font-size: var(--seed-body-s-size);
  color: var(--seed-fg-neutral);
  line-height: 1.5;
  padding: var(--seed-space-1) 0;
}
.live-class-info-row + .live-class-info-row {
  border-top: 1px solid var(--seed-stroke-neutral-muted);
  margin-top: var(--seed-space-1);
  padding-top: var(--seed-space-3);
}
.live-class-info-label {
  flex: 0 0 110px;
  color: var(--seed-fg-neutral-muted);
  font-weight: 600;
}
.live-class-info-value { flex: 1; color: var(--seed-fg-neutral); }