/*
 * Exercise Quick View (train-look/exercise-quick-view; approved and frozen 24 Oct 2026): the exercise body inside the
 * site's Universal Quick View (sqv.css lays out the dialog, its bar, its
 * scrolling body and its footer; on phones a full-height sheet). This sheet styles only the exercise's own body and the
 * shell's existing "train" tone. The dialog sits at the end of <body>, outside every page root, so it carries its own
 * sizes and colours. Every selector starts with .sqv.
 */

/* the train tone: the bar's line in the Train blues */
.sqv[data-sqv-tone="train"] .sqv-bar::before { background: linear-gradient(90deg, #4ea6ec, #6ec4e8 60%, #3fb39d); }

/* the exercise's own frame (owner, 24 Oct 2026), while xqv.js marks the dialog .xqv-on: a larger dialog, the
   full page as an expand icon beside the close button, and no footer (Escape, the close button and Back remain). Eat's
   items in the same dialog keep the shell's own frame. */
.sqv .xqv-full { display: none; }
.sqv.xqv-on .sqv-foot { display: none; }
.sqv.xqv-on .sqv-bar { grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-areas: "back head acts full x" "status status status status status"; }
.sqv.xqv-on .xqv-full, .sqv.xqv-on .xqv-full:hover, .sqv.xqv-on .xqv-full:focus { grid-area: full; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid #d5e7cf; border-radius: 50%;
	background: #fff; color: var(--sqv-ink); text-decoration: none; }
.sqv.xqv-on .xqv-full:hover, .sqv.xqv-on .xqv-full:focus-visible { border-color: var(--sqv-tone); background: var(--sqv-tone-soft); color: var(--sqv-ink); }
@media (min-width: 641px) {
	.sqv.xqv-on { width: min(1120px, calc(100vw - 48px)); max-height: min(92vh, 1040px); }
}
@media (max-width: 640px) {
	.sqv.xqv-on .sqv-bar { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "back head full x" "acts acts acts acts" "status status status status"; }
	.sqv.xqv-on .sqv-body { padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: no-preference) {
	.sqv.xqv-on .xqv-full { transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), background-color .2s ease, border-color .2s ease; }
	.sqv.xqv-on .xqv-full:hover { transform: scale(1.08); }
}

.sqv .xqv { display: grid; gap: 18px; color: var(--sqv-copy); }
.sqv .xqv :is(.shh-i, .sl-i) { width: 18px; height: 18px; flex: none; }
.sqv .xqv-main, .sqv .xqv-side { display: grid; gap: 18px; align-content: start; min-width: 0; }
/* the larger dialog: watch it and what it is beside how to do it and the guidance; then similar moves beside the workouts */
@media (min-width: 900px) {
	.sqv.xqv-on .xqv { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 26px 32px; align-items: start; }
	.sqv.xqv-on .xqv-more { grid-column: 1 / -1; }
	.sqv.xqv-on .xqv-side .xqv-panels { grid-template-columns: minmax(0, 1fr); }
	.sqv.xqv-on .xqv-more[data-xqv-state="done"] { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 18px 32px; align-items: start; }
}

/* the video: a still and one play control; the player only when asked */
.sqv .xqv-media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 18px; background: #0f2230; box-shadow: 0 24px 48px -32px rgba(12, 34, 54, .7); }
.sqv .xqv-media::before { content: ""; position: absolute; inset: 0 0 auto 0; z-index: 2; height: 5px; background: linear-gradient(90deg, #4ea6ec, #6ec4e8 60%, #3fb39d); }
/* YouTube stills are 4:3 with bars: crop to the picture */
.sqv .xqv-media img { position: absolute; left: 0; top: 50%; width: 100%; height: auto; transform: translateY(-50%); opacity: .92; }
.sqv .xqv-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sqv .xqv .xqv-play, .sqv .xqv .xqv-play:hover, .sqv .xqv .xqv-play:focus { position: absolute; left: 50%; top: 50%; z-index: 3; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px 0 8px;
	border: 0; border-radius: 999px; background: rgba(255, 255, 255, .95); color: #122c3a; font: 700 16px/1 var(--sqv-text); white-space: nowrap; cursor: pointer; transform: translate(-50%, -50%); box-shadow: 0 16px 32px -14px rgba(0, 0, 0, .6); }
.sqv .xqv .xqv-play:hover, .sqv .xqv .xqv-play:focus-visible { background: #fff; color: #122c3a; }
.sqv .xqv-play-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #1b6fae; color: #fff; }
.sqv .xqv-play-ic :is(.shh-i, .sl-i) { width: 16px; height: 16px; }
.sqv .xqv-novideo { position: absolute; inset: auto 0 0; margin: 0; padding: 12px 16px; font-size: 14px; color: #c9dae5; }

/* what it is */
.sqv .xqv-intro { display: grid; gap: 10px; }
.sqv .xqv-kicker { margin: 0; font: 800 12px/1.3 var(--sqv-text); letter-spacing: .13em; text-transform: uppercase; color: #1b6fae; }
.sqv .xqv-level { margin: 0; }
.sqv .xqv .tr-level { display: inline-flex; align-items: center; gap: 8px; }
.sqv .xqv .tr-level-bars { display: inline-flex; gap: 3px; }
.sqv .xqv .tr-level-bars i { width: 6px; height: 14px; border-radius: 3px; background: #d6e4ee; }
.sqv .xqv .tr-level-bars i.on { background: #2b8fd6; }
.sqv .xqv .tr-level-n { font: 700 13px/1 var(--sqv-text); color: var(--sqv-ink); }
.sqv .xqv-facts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sqv .xqv-facts li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 15.5px; line-height: 1.4; }
.sqv .xqv-facts :is(.shh-i, .sl-i) { box-sizing: content-box; width: 16px; height: 16px; padding: 7px; border-radius: 50%; background: #edf6fd; color: #1b6fae; }
.sqv .xqv-facts b { margin-right: 4px; color: var(--sqv-ink); }
.sqv .xqv-also { color: var(--sqv-muted); }
.sqv .xqv-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.sqv .xqv-acts .sfav-save { min-height: 44px; }
.sqv.xqv-nofav .xqv-acts .sfav-save { display: none; }
.sqv .xqv-acts .sh-social { position: relative; }
.sqv .xqv-acts .sh-social > summary { min-height: 44px; }
.sqv .xqv-acts .sh-social-panel { z-index: 6; }

/* how to do it */
.sqv .xqv-sec { display: grid; gap: 10px; }
.sqv .xqv-h { margin: 0; font: 800 12px/1.3 var(--sqv-text); letter-spacing: .13em; text-transform: uppercase; color: var(--sqv-ink); }
.sqv .xqv-tips { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sqv .xqv-tips li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px 10px 10px; border-radius: 14px; background: #f4f9fd; }
.sqv .xqv-tips li > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #2b8fd6; color: #fff; font: 800 15px/1 var(--sqv-display); }
.sqv .xqv-tips p { margin: 0; font: 700 16px/1.35 var(--sqv-text); color: var(--sqv-ink); }
.sqv .xqv-about p { margin: 0; font-size: 15.5px; line-height: 1.6; }

/* good for and take care: compact */
.sqv .xqv-panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; }
@media (min-width: 560px) { .sqv .xqv-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sqv .xqv-panel { --pn: #2f7a34; --pn-tint: #f2f9f0; --pn-line: #cfe6c9; padding: 12px 14px; border-radius: 16px; background: var(--pn-tint); box-shadow: inset 0 0 0 1.5px var(--pn-line); }
.sqv .xqv-panel--care { --pn: #8a5506; --pn-tint: #fdf8ee; --pn-line: #f0dcb4; }
.sqv .xqv-panel-h { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 800 11.5px/1.3 var(--sqv-text); letter-spacing: .12em; text-transform: uppercase; color: var(--pn); }
.sqv .xqv-panel ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.sqv .xqv-panel li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.45; }
.sqv .xqv-panel li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--pn); opacity: .8; }
.sqv .xqv-panel-more { margin: 8px 0 0; font-size: 13px; color: var(--sqv-muted); }
.sqv .xqv-ai { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; margin: -6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--sqv-muted); }
.sqv .xqv-ai :is(.shh-i, .sl-i) { width: 15px; height: 15px; margin-top: 1px; }

/* similar moves: compact rows that open inside the dialog */
.sqv .xqv-sims { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sqv .xqv-sim { display: grid; grid-template-columns: 88px minmax(0, 1fr) 18px; gap: 12px; align-items: center; min-height: 64px; padding: 6px 12px 6px 6px; border-radius: 14px; background: #fff;
	box-shadow: inset 0 0 0 1px #dbe8f1; color: var(--sqv-ink); text-decoration: none; }
.sqv .xqv-sim:hover, .sqv .xqv-sim:focus-visible { background: #f4f9fd; box-shadow: inset 0 0 0 1.5px #4ea6ec; color: var(--sqv-ink); }
.sqv .xqv-sim-img { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 10px; background: linear-gradient(135deg, #1b4f78, #2b8fd6); }
.sqv .xqv-sim-img img { position: absolute; left: 0; top: 50%; width: 100%; height: auto; transform: translateY(-50%); }
.sqv .xqv-sim-t { display: grid; gap: 2px; min-width: 0; }
.sqv .xqv-sim-t b { font: 700 15px/1.25 var(--sqv-text); }
.sqv .xqv-sim-t small { overflow: hidden; font-size: 13px; color: var(--sqv-muted); white-space: nowrap; text-overflow: ellipsis; }
.sqv .xqv-sim > :is(.shh-i, .sl-i) { color: #1b6fae; }

/* the slow half arrives a moment later: a calm placeholder until then */
.sqv .xqv-more { display: grid; gap: 18px; }
.sqv .xqv-more[aria-busy="true"] { gap: 10px; }
.sqv .xqv-skel { display: grid; gap: 8px; }
.sqv .xqv-skel i { display: block; height: 64px; border-radius: 14px; background: linear-gradient(90deg, #eef4f8 25%, #f7fafc 50%, #eef4f8 75%); background-size: 200% 100%; }
@media (prefers-reduced-motion: no-preference) { .sqv .xqv-skel i { animation: xqv-shimmer 1.4s ease-in-out infinite; } }
@keyframes xqv-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.sqv .xqv-vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sqv .xqv-more-err { margin: 0; font-size: 14px; color: var(--sqv-muted); }

/* put it into a workout */
.sqv .xqv-build { padding: 14px; border-radius: 16px; background: linear-gradient(160deg, #ffffff 0%, #f1f8ee 100%); box-shadow: inset 0 0 0 1px #d9ead4; }
.sqv .xqv-build-x { margin: 0; font-size: 15px; }
.sqv .xqv-build-go { display: flex; flex-wrap: wrap; gap: 8px; }
.sqv .xqv .xqv-btn, .sqv .xqv .xqv-btn:hover, .sqv .xqv .xqv-btn:focus { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 999px; background: #3d9442; color: #fff;
	font: 700 15px/1.2 var(--sqv-text); text-decoration: none; }
.sqv .xqv .xqv-btn:hover, .sqv .xqv .xqv-btn:focus-visible { background: #2f7a34; color: #fff; }
.sqv .xqv .xqv-btn--ghost, .sqv .xqv .xqv-btn--ghost:hover, .sqv .xqv .xqv-btn--ghost:focus { background: #fff; color: var(--sqv-ink); box-shadow: inset 0 0 0 1.5px #c7ddeb; }
.sqv .xqv .xqv-btn--ghost:hover, .sqv .xqv .xqv-btn--ghost:focus-visible { background: #f2f9f0; box-shadow: inset 0 0 0 1.5px #3d9442; color: var(--sqv-ink); }

@media (max-width: 479px) {
	.sqv .xqv-sim { grid-template-columns: 76px minmax(0, 1fr) 16px; }
	.sqv .xqv-build-go .xqv-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.sqv .xqv * { transition: none !important; animation: none !important; }
}