/* =============================================================
   Exercise Range-of-Motion Diagrams
   Real start -> finish demonstration photos with an animated Play
   stage. Degrades to a drawn figure when photos are unavailable.
   Uses design-system tokens with safe fallbacks.
   ============================================================= */

.exercise-rom-wrap {
  margin: 16px 0;
}

.exercise-rom {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: var(--radius-lg, 16px);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
}

/* ---- Header ---- */
.exercise-rom .rom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* Let the title + button drop to two rows on very narrow modals
     instead of squeezing each other into illegible columns. */
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.exercise-rom .rom-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main, #1e293b);
  /* Global mobile rules set `word-break: break-word; overflow-wrap:
     anywhere` on every span, which let this flex item collapse and
     shatter "Range of Motion" mid-word. Keep words intact. */
  min-width: 0;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

.exercise-rom .rom-title i {
  color: var(--primary-purple, #e76f51);
  flex-shrink: 0;
}

.exercise-rom .rom-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  background: var(--primary-purple, #e76f51);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
  /* Never shrink/break into a vertical "P l a y" stack. */
  flex-shrink: 0;
  white-space: nowrap;
}

.exercise-rom .rom-play-btn .rom-play-label {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

.exercise-rom .rom-play-btn:hover { background: var(--primary-dark, #c75a3f); }
.exercise-rom .rom-play-btn:active { transform: scale(0.96); }
.exercise-rom.is-playing .rom-play-btn { background: var(--text-secondary, #64748b); }

/* ---- Photo stage ---- */
.exercise-rom .rom-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  min-height: 180px;
  background: #14181f;
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
}

.exercise-rom .rom-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.exercise-rom .rom-photo-b { opacity: 0; transition: opacity 0.35s ease; }
.exercise-rom.show-b .rom-photo-b { opacity: 1; }
.exercise-rom.is-playing .rom-photo-b { animation: romPhotoFade 2.2s ease-in-out infinite; }

@keyframes romPhotoFade {
  0%, 36% { opacity: 0; }
  50%, 86% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---- Thumbnails (Start / Finish) ---- */
.exercise-rom .rom-thumbs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}

.exercise-rom .rom-thumb {
  flex: 1 1 0;
  max-width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0 0 6px;
  background: var(--bg-surface, #f8fafc);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease;
}

.exercise-rom button.rom-thumb { font: inherit; }
.exercise-rom .rom-thumb:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm, 0 2px 6px rgba(0, 0, 0, 0.08)); }
.exercise-rom .rom-thumb.is-active { border-color: var(--primary-purple, #e76f51); box-shadow: 0 0 0 2px rgba(231, 111, 81, 0.18); }

.exercise-rom .rom-thumb img {
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  display: block;
  background: #14181f;
}

.exercise-rom .rom-thumb-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #94a3b8);
}

/* ---- Credit ---- */
.exercise-rom .rom-credit {
  margin-top: 8px;
  text-align: right;
  font-size: 0.66rem;
  color: var(--text-muted, #94a3b8);
}

/* ---- Drawn fallback figure ---- */
.exercise-rom .rom-thumb-static { cursor: default; padding: 8px 4px 6px; }
.exercise-rom .rom-thumb-static:hover { transform: none; box-shadow: none; }
.exercise-rom .rom-svg-sm { width: 100%; max-width: 92px; height: auto; }
.exercise-rom .rom-seg { stroke: var(--primary-purple, #e76f51); stroke-linecap: round; fill: none; }
.exercise-rom .rom-head { fill: var(--primary-purple, #e76f51); }
.exercise-rom .rom-ground { stroke: var(--gray-300, #cbd5e1); stroke-linecap: round; }

/* ---- Dark mode ---- */
[data-theme="dark"] .exercise-rom {
  background: var(--bg-card, #1a1f2e);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .exercise-rom .rom-title { color: var(--text-main, #f1f5f9); }
[data-theme="dark"] .exercise-rom .rom-thumb {
  background: #222a3a;
  border-color: rgba(255, 255, 255, 0.08);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .exercise-rom.is-playing .rom-photo-b { animation: none; opacity: 1; }
  .exercise-rom .rom-thumb { transition: none; }
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
  .exercise-rom { padding: 14px; }
  .exercise-rom .rom-thumbs { gap: 6px; }
}