/* Exercise previews (ui/expreview.js): a small dark stage tile with a 3-second loop of each exercise.
   The keyframes are generated per exercise into <style id="ex-preview-keyframes">; these are the shared rules.
   The tile's drawing is its still frame: with the animations off (reduced motion, a once-only play that ended)
   it shows a meaningful picture. */

.ex-preview {
  --xp-dur: 3s;
  --xp-phase: 0s;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  vertical-align: middle;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: var(--xp-r, 16px);
  background: var(--stage);
  color: var(--stage-ink);
  /* a hairline so the tile still has an edge on dark paper */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  contain: layout paint;
  user-select: none;
  -webkit-user-select: none;
}
.ex-preview > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ex-preview text { font-family: var(--sans); font-variant-numeric: tabular-nums lining-nums; }

.ex-preview.is-run .xa {
  animation-duration: var(--xp-dur);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: var(--xp-phase);
  animation-fill-mode: none;
}
.ex-preview.is-run .xa.xl { animation-timing-function: linear; }
.ex-preview.is-run .xa.x4 { animation-duration: calc(var(--xp-dur) * 4); }
/* once: one pass from the top, then the still frame (the slow timeline stays still) */
.ex-preview.is-once .xa { animation-iteration-count: 1; animation-delay: 0s; }
.ex-preview.is-once .xa.x4 { animation: none; }
/* offscreen (IntersectionObserver) */
.ex-preview.is-paused .xa { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .ex-preview .xa { animation: none !important; }
}

/* A wall of previews (the paywall's 18): an even grid that fits the width; tiles stay square. */
.ex-preview-wall {
  display: grid;
  grid-template-columns: repeat(var(--xp-cols, 6), minmax(0, 1fr));
  gap: var(--xp-gap, 6px);
  justify-items: center;
}
.ex-preview-wall > .ex-preview { width: 100% !important; height: auto !important; aspect-ratio: 1; }

/* A preview beside its words (plan cards, library rows, first-day cards). */
.ex-preview-row { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.ex-preview-row > .ex-preview { margin-top: 2px; }
.ex-preview-row > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

/* ---------- Train (screens/library.js as a tab, or from Skills): suggested tiles, then the 18 by skill ---------- */
.page.train-page { gap: 0; padding-top: calc(var(--safe-top) + 22px); }
.page.train-page:not(.is-tab) { padding-top: calc(var(--safe-top) + 8px); }
.page.train-page > .page-top { margin-bottom: 6px; }
.page.train-page .tr-sub { margin-top: 8px; font-size: 14px; }
.tr-gh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.tr-gl { font-size: 13px; color: var(--ink-2); }
.tr-sugg { margin-top: 22px; }
.tr-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 12px; }
.tr-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: 0; border: none;
  background: transparent; text-align: left; color: var(--ink); font: inherit;
}
.tr-tile > .ex-preview { width: 100% !important; height: auto !important; aspect-ratio: 1; }
.tr-tile:active { transform: scale(0.98); }
.tr-tile-nm { font-size: 14px; line-height: 1.2; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-group { margin-top: 26px; }
.tr-list { list-style: none; margin: 0; padding: 0; }
.tr-list > li + li { border-top: 1px solid var(--line); }
.tr-row {
  width: 100%; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  min-height: 72px; padding: 10px 0; border: none; background: transparent; text-align: left; color: var(--ink); font: inherit;
}
.tr-row:active { background: var(--paper-3); }
.tr-prev { display: flex; width: 52px; height: 52px; flex: none; }
.tr-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tr-nm { font-size: 20px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-lv { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; line-height: 1.3; color: var(--ink-2); white-space: nowrap; }
.tr-lv.is-new { color: var(--ink); font-weight: 600; }
.tr-mat { display: inline-flex; flex: none; }
.tr-mat svg { display: block; }
.tr-play { height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--ink); display: inline-flex; align-items: center; font-size: 13px; color: var(--ink); }
@media (max-width: 360px) {
  .tr-row { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; }
  .tr-prev { width: 46px; height: 46px; }
  .tr-prev > * { transform: scale(0.885); transform-origin: 0 0; }
  .tr-nm { font-size: 18px; }
}