/* ============================================================
   WORKOUT PLAYER
   Exercise bars, the video slot, the timer.

   The video box keeps its aspect ratio whether or not there is
   footage in it, so shipping real videos later changes nothing
   about the layout — the placeholder is already the right size.
   ============================================================ */

.ex-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.ex-empty {
  margin: 0;
  padding: 18px 4px;
  font-size: 0.82rem;
  color: var(--text-dimmer);
  text-align: center;
}

.ex-item {
  border: var(--border-w) solid var(--rim);
  border-radius: var(--r-md, 12px);
  background: var(--surface-2);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}
.ex-item.is-complete { border-color: color-mix(in srgb, var(--support, #4ade80) 45%, var(--rim)); }

/* ── the bar ─────────────────────────────────────────────── */

.ex-bar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ex-bar:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.ex-main { flex: 1; min-width: 0; }
.ex-name {
  display: block;
  font-size: 0.89rem;
  font-weight: var(--body-weight-strong, 600);
}
.ex-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 3px;
}
.ex-target {
  font-size: 0.73rem;
  color: var(--text-dimmer);
  font-variant-numeric: tabular-nums;
}

.ex-diff { display: inline-flex; gap: 2.5px; }
.diff-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--rim-strong, rgba(255,255,255,.18));
}
.diff-dot.is-on { background: var(--form-accent, var(--accent)); }

.ex-ticks { display: inline-flex; gap: 3px; flex: none; }
.set-tick {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.4px solid var(--rim-strong, rgba(255,255,255,.2));
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.set-tick.is-done {
  background: var(--form-accent, var(--accent));
  border-color: var(--form-accent, var(--accent));
}

.ex-chev {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--text-dimmer);
  transition: transform var(--dur) var(--ease);
}
.ex-bar[aria-expanded="true"] .ex-chev { transform: rotate(180deg); }

/* ── the panel ───────────────────────────────────────────── */

.ex-panel {
  padding: 0 13px 13px;
  border-top: var(--border-w) solid var(--rim);
}

.ex-video {
  aspect-ratio: 16 / 9;
  margin: 13px 0 0;
  border-radius: var(--r-sm, 9px);
  background:
    repeating-linear-gradient(
      45deg,
      color-mix(in srgb, var(--rim) 40%, transparent) 0 8px,
      transparent 8px 16px
    ),
    var(--surface-3, rgba(255,255,255,.03));
  display: grid;
  place-items: center;
}
.ex-video-inner {
  display: grid;
  justify-items: center;
  gap: 7px;
  color: var(--text-dimmer);
  font-size: 0.73rem;
}
.ex-video-inner svg { width: 30px; height: 30px; opacity: 0.65; }

.ex-cue {
  margin: 11px 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-dim);
}

.ex-stage { margin-top: 13px; }
.ex-start { width: 100%; }

/* ── running ─────────────────────────────────────────────── */

.ex-run-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.ex-run-set { font-size: 0.76rem; color: var(--text-dim); }
.ex-run-label {
  font-size: 0.72rem;
  color: var(--form-accent, var(--accent));
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ex-timer {
  margin: 4px 0 10px;
  font-family: var(--display-font, inherit);
  font-size: 2.6rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--display-tracking, 0);
}

.ex-progress {
  height: 4px;
  border-radius: 99px;
  background: var(--rim);
  overflow: hidden;
}
.ex-progress-fill {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--form-accent, var(--accent));
  /* No CSS transition: the JS ticker sets this ten times a second, so a
     transition would lag behind the number and they would disagree. */
}

.ex-run-actions {
  display: flex;
  gap: 8px;
  margin-top: 13px;
}
.ex-run-actions > * { flex: 1; }

.ex-announce {
  margin: 8px 0 0;
  font-size: 0.72rem;
  color: var(--text-dimmer);
  min-height: 1em;
}

@media (prefers-reduced-motion: reduce) {
  .ex-chev, .set-tick, .ex-item { transition: none; }
}

/* ── PACE ─────────────────────────────────────────────────────
   The server pays nothing for a set finished in under 40% of its
   expected duration. That line has to be VISIBLE while the set is
   running, not revealed afterwards as a rejection — an app that
   hides a rule and then punishes you for breaking it just reads as
   broken. Hence the gate marker on the bar, the dimmed timer below
   the threshold, and a Done button that is disabled until the set
   could plausibly be real. */

.ex-pace-hint {
  font-size: 0.7rem;
  color: var(--text-dimmer);
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

.ex-progress { position: relative; }

.ex-progress-gate {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  border-radius: 2px;
  background: var(--text-dimmer);
  opacity: 0.85;
}

.ex-timer.is-under {
  color: var(--text-dimmer);
  opacity: 0.6;
}

.ex-pace {
  margin: 8px 0 0;
  font-size: 0.73rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.ex-pace.is-under { color: var(--text-dimmer); }

.ex-done[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}