/* Training's first look (SPEC 72 section 4r, training_preview.py, templates/_training_preview.html): today's HillerFit
   workout on the join page, and the welcome video (the sign-up's first screen, Admin › Training › Welcome video).
   Phone first; the site's colour tokens, so dark and light both follow the theme. */

/* ---------------------------------------------------------------- today's workout on the join page */
.trpv { display: grid; gap: 14px; grid-template-areas: "head" "list" "foot"; min-width: 0; padding: 18px;
  border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.trpv-head { grid-area: head; display: grid; gap: 6px; align-content: start; min-width: 0; }
.trpv-title { margin: 0; font-family: var(--font-display); font-size: 28px; font-weight: 800; line-height: 1.05;
  letter-spacing: .01em; text-transform: uppercase; overflow-wrap: anywhere; }
.trpv-date { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--text-2); font-size: 14.5px; font-weight: 600;
  min-width: 0; overflow-wrap: anywhere; }
.trpv-date .icon { flex: none; color: var(--accent-text); }
.trpv-pieces { grid-area: list; list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.trpv-piece { min-width: 0; border-radius: 12px; }
.trpv-piece.is-locked { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface-2);
  color: var(--text-2); font-size: 15px; font-weight: 700; line-height: 1.3; }
.trpv-piece.is-locked .icon { flex: none; }
.trpv-piece-name { min-width: 0; overflow-wrap: anywhere; }
.trpv-piece.is-open { display: grid; gap: 10px; padding: 14px 16px; background: var(--bg); border: 2px solid var(--accent); }
.trpv-piece-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap;
  min-width: 0; }
.trpv-piece-title { margin: 0; min-width: 0; font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.15;
  letter-spacing: .01em; overflow-wrap: anywhere; }
.trpv-marks { display: inline-flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.trpv-marks .tr-chip { white-space: normal; }
.trpv-rx { background: var(--accent-soft); color: var(--accent-text); }
.trpv-text { font-size: 15.5px; }
/* The rest of the main workout (the owner, Oct 29: only a quarter of the day shows): made-up bars, blurred, one per hidden
   line (8 at most), a text line tall each, so the workout seems to carry on under frosted glass. Never its words: the
   server sends no text for them. Widths and word gaps vary by line; the last two fade out. */
.trpv-blur { display: block; color: var(--text-2); filter: blur(3px); pointer-events: none; user-select: none; }
.trpv-blur-line { display: block; height: 1.55em; opacity: .55; }
.trpv-blur-line::before { content: ""; display: block; height: .62em; margin-top: .465em; border-radius: .31em; width: 90%;
  background: linear-gradient(90deg, currentColor 28%, transparent 0 32%, currentColor 0 63%, transparent 0 67%, currentColor 0); }
.trpv-blur-line:nth-child(8n+2)::before { width: 68%; background: linear-gradient(90deg, currentColor 41%, transparent 0 46%, currentColor 0); }
.trpv-blur-line:nth-child(8n+3)::before { width: 82%; background: linear-gradient(90deg, currentColor 18%, transparent 0 23%, currentColor 0 55%,
  transparent 0 60%, currentColor 0); }
.trpv-blur-line:nth-child(8n+4)::before { width: 56%; background: linear-gradient(90deg, currentColor 50%, transparent 0 56%, currentColor 0); }
.trpv-blur-line:nth-child(8n+5)::before { width: 76%; background: linear-gradient(90deg, currentColor 33%, transparent 0 38%, currentColor 0 71%,
  transparent 0 76%, currentColor 0); }
.trpv-blur-line:nth-child(8n+6)::before { width: 62%; background: linear-gradient(90deg, currentColor 24%, transparent 0 30%, currentColor 0); }
.trpv-blur-line:nth-child(8n+7)::before { width: 86%; background: linear-gradient(90deg, currentColor 38%, transparent 0 42%, currentColor 0 62%,
  transparent 0 66%, currentColor 0); }
.trpv-blur-line:nth-child(8n)::before { width: 48%; background: linear-gradient(90deg, currentColor 60%, transparent 0 66%, currentColor 0); }
.trpv-blur-line:nth-last-child(2):not(:first-child) { opacity: .38; }
.trpv-blur-line:last-child:not(:first-child) { opacity: .2; }
@media (forced-colors: active) { .trpv-blur-line::before { forced-color-adjust: none; color: GrayText; } }
.trpv-members { grid-area: foot; display: flex; align-items: flex-start; gap: 10px; margin: 0; color: var(--text-2);
  font-size: 14.5px; line-height: 1.5; min-width: 0; }
.trpv-members .icon { flex: none; margin-top: 2px; color: var(--accent-text); }
.trpv-members .link { font-weight: 700; }
.tr-join #tr-join-training { scroll-margin-top: 84px; } /* (the members' line's link: the plan's name clear of the top bar) */
@media (max-width: 380px) {
  .trpv { padding: 14px; }
  .trpv-title { font-size: 24px; }
  .trpv-piece.is-open { padding: 12px; }
}
/* On a computer: the title, the date and the members' line on the left, the day on the right */
@media (min-width: 860px) {
  .trpv { grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); grid-template-rows: auto 1fr;
    grid-template-areas: "head list" "foot list"; column-gap: 32px; row-gap: 16px; align-items: start; padding: 24px 28px; }
  .trpv-title { font-size: 34px; }
}

/* ---------------------------------------------------------------- the welcome video */
.trwv { display: grid; gap: 8px; width: 100%; margin: 0; min-width: 0; }
.trwv-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; }
.trwv-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.trwv-play { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0;
  border-radius: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .35)); color: #fff; cursor: pointer; }
.trwv-play[hidden] { display: none; }
.trwv-play-circle { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35); transition: transform .15s; }
.trwv-play:hover .trwv-play-circle { transform: scale(1.05); }
.trwv-play:focus-visible { outline: none; }
.trwv-play:focus-visible .trwv-play-circle { outline: 3px solid var(--focus); outline-offset: 3px; }
.trwv-caption { color: var(--text-2); font-size: 14px; line-height: 1.4; text-align: center; overflow-wrap: anywhere; }

/* ...on the sign-up's first screen, in the logo's place (it comes in like the logo did; reduced motion: training_start.css) */
.trs-welcome .trwv { align-self: stretch; animation: c-next .6s cubic-bezier(.2, .8, .2, 1) both; }

/* ...and in Admin › Training › Welcome video: what's in use, the link box, his latest videos */
.trwv-now { display: grid; gap: 12px; max-width: 560px; }
.trwv-now p { margin: 0; }
.trwv-now-title { font-weight: 700; overflow-wrap: anywhere; }
.trwv-now form { margin: 0; }
.trwv-sub { margin: 20px 0 10px; font-size: 15px; }
.trwv-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.trwv-card { display: grid; gap: 8px; align-content: start; padding: 10px; border-radius: 12px; background: var(--bg);
  border: 1px solid var(--line); min-width: 0; }
.trwv-card.is-current { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.trwv-card form { margin: 0; }
.trwv-card .btn { display: inline-flex; align-items: center; gap: 6px; }
.trwv-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
.trwv-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.trwv-dur { position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 6px; background: rgba(0, 0, 0, .8); color: #fff;
  font-size: 12px; font-weight: 700; }
.trwv-card-title { font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.trwv-in-use { display: inline-flex; align-items: center; gap: 6px; color: var(--ok-text); font-size: 14px; font-weight: 700; }