/* ── Workout video ───────────────────────────────────────────────────────── */
.workout-video {
  display: block;
  width: 100%;
  max-height: 40vh;
  object-fit: contain;
  background: #000;
  border-radius: 0.5rem;
  margin-bottom: 0.75rem;
}

/* ── Localhost-gating ─────────────────────────────────────────────────────── */
.localhost-only {
  display: none;
}
body.localhost .localhost-only {
  display: flex;   /* override for flex containers */
}

/* ── View toggle bar ──────────────────────────────────────────────────────── */
.view-toggle-bar {
  position: sticky;
  top: 0;
  z-index: 100;
}
/* ── Countdown bar ──────────────────────────────────────────────────────── */
.countdown-bar-track {
  width: 100%;
  max-width: 480px;
  height: 14px;
  background: #e9ecef;
  border-radius: 7px;
  overflow: hidden;
}
.countdown-bar {
  height: 100%;
  width: 100%;
  border-radius: 7px;
  background: #198754; /* green default (exercise) */
  transition: width 0.9s linear, background-color 0.3s;
}
#view-workout.phase-rest .countdown-bar    { background: #fd7e14; }
#view-workout.phase-exercise .countdown-bar { background: #198754; }
#view-workout.phase-done .countdown-bar     { width: 0% !important; }
/* ── Timer display ────────────────────────────────────────────────────────── */
.timer-display {
  font-size: clamp(5rem, 22vw, 9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #212529;
}

/* ── Next-up label (shown during rest) ───────────────────────────────────── */
.next-up-label {
  font-size: 1rem;
  color: #fd7e14;
  font-weight: 600;
  min-height: 1.4rem;
}

/* ── Exercise name ────────────────────────────────────────────────────────── */
.exercise-name {
  font-size: clamp(1.4rem, 5vw, 2.2rem);
  min-height: 2.4rem;
}

/* ── Note text ────────────────────────────────────────────────────────────── */
.note-text {
  font-size: 0.95rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Phase badge colours ──────────────────────────────────────────────────── */
#phase-badge.phase-idle     { background-color: #6c757d; color: #fff; }
#phase-badge.phase-exercise { background-color: #198754; color: #fff; }
#phase-badge.phase-rest     { background-color: #fd7e14; color: #fff; }
#phase-badge.phase-done     { background-color: #6f42c1; color: #fff; }

/* ── Timer colour by phase ────────────────────────────────────────────────── */
#view-workout.phase-exercise .timer-display { color: #198754; }
#view-workout.phase-rest     .timer-display { color: #fd7e14; }
#view-workout.phase-done     .timer-display { color: #6f42c1; }

/* ── Controls ─────────────────────────────────────────────────────────────── */
.control-btn {
  min-width: 110px;
}

/* ── Config page card ─────────────────────────────────────────────────────── */
.page-card {
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  background: #fff;
}
.page-card .page-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  border-radius: 0.5rem 0.5rem 0 0;
  flex-wrap: wrap;
}
.page-card .page-card-header .page-index {
  font-weight: 700;
  color: #6c757d;
  font-size: 0.85rem;
  min-width: 1.8rem;
}
.page-card .page-card-header .page-title-preview {
  flex: 1;
  font-weight: 600;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-card .page-card-body {
  padding: 0.75rem;
}

/* ── Config form labels ───────────────────────────────────────────────────── */
.cfg-label {
  font-size: 0.8rem;
  color: #6c757d;
  margin-bottom: 0.2rem;
}

/* ── Active view button ───────────────────────────────────────────────────── */
.active-view {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0d6efd;
}

/* ── Responsive tweaks ────────────────────────────────────────────────────── */
@media (max-width: 576px) {
  .control-btn {
    flex: 1 1 40%;
  }
}