/*
 * Train preview: one library workout (owner brief "OWNER APPROVAL & NEXT PHASE", 23 Oct 2026).
 * Prepare → Warm up → Work → Recover → Complete → Continue. The session keeps the Train look's own markup and
 * behaviour (train-workouts.css, train-workout.js, train-timer.*); this sheet brings it into the approved homepage
 * language: the homepage's type and tokens (home.css), the thread in its narrow lane (shj-thread.*), one colour per
 * phase, larger figures and touch targets for following along on a phone.
 * Every selector starts with body.sh-trp-workout or .shh.shj.shtp-w. No --sh-* or --shh-* token is defined here.
 */

/* ---------- the page runs full width ---------- */
body.sh-trp-workout main#content.site-main.shtp-w-main { width: 100%; max-width: none; margin: 0; padding: 0; }

/* ---------- phase colours (fill, ink for text on white and white on it, tint, bar) and the thread's tones ---------- */
.shh.shj.shtp-w {
	--shj-prepare: #4ea6ec; --shj-warm: #f0a23b; --shj-work: #4ea6ec; --shj-recover: #3fb39d; --shj-complete: #5cb860; --shj-continue: #6ec4e8; --shj-end: #3fb39d;
}
.shh.shj.shtp-w [data-shj-tone="prepare"] { --shj-tone: var(--shj-prepare); --shj-halo: rgba(78, 166, 236, .42); }
.shh.shj.shtp-w [data-shj-tone="warm"] { --shj-tone: var(--shj-warm); --shj-halo: rgba(240, 162, 59, .45); }
.shh.shj.shtp-w [data-shj-tone="work"] { --shj-tone: var(--shj-work); --shj-halo: rgba(78, 166, 236, .42); }
.shh.shj.shtp-w [data-shj-tone="recover"] { --shj-tone: var(--shj-recover); --shj-halo: rgba(63, 179, 157, .42); }
.shh.shj.shtp-w [data-shj-tone="complete"] { --shj-tone: var(--shj-complete); --shj-halo: rgba(92, 184, 96, .45); }
.shh.shj.shtp-w [data-shj-tone="continue"] { --shj-tone: var(--shj-continue); --shj-halo: rgba(110, 196, 232, .42); }
.shh.shj.shtp-w .shtp-phase--warm { --ph: #c97a12; --ph-ink: #8a5506; --ph-tint: #fdf3e3; --ph-bar: #f0a23b; }
.shh.shj.shtp-w .shtp-phase--work { --ph: #2b8fd6; --ph-ink: #1b6fae; --ph-tint: #eaf4fd; --ph-bar: #4ea6ec; }
.shh.shj.shtp-w .shtp-phase--recover { --ph: #246b5f; --ph-ink: #1f5f54; --ph-tint: #e7f2ef; --ph-bar: #3fb39d; }
.shh.shj.shtp-w .shtp-fill--complete, .shh.shj.shtp-w .shtp-fill--eat { background-color: #3d9442; }
.shh.shj.shtp-w .shtp-fill--assess { background-color: #246b5f; }
.shh.shj.shtp-w .shtp-fill--helpers { background-color: #d6336c; }

/* ================================================================== prepare */
.shh.shj.shtp-w .shtp-w-hero { position: relative; overflow: hidden; padding-block: clamp(22px, 3vw, 44px) clamp(36px, 5vw, 64px); background: #fff; }
.shh.shj.shtp-w .shtp-w-hero-bg { position: absolute; inset: 0; background:
	radial-gradient(44% 52% at 82% 22%, rgba(78, 166, 236, .26), rgba(78, 166, 236, 0) 70%),
	radial-gradient(30% 38% at 6% 96%, rgba(240, 162, 59, .12), rgba(240, 162, 59, 0) 70%),
	radial-gradient(30% 36% at 96% 92%, rgba(63, 179, 157, .14), rgba(63, 179, 157, 0) 70%),
	linear-gradient(180deg, #ffffff 0%, #f4f9fd 60%, #eef6fb 100%); }
.shh.shj.shtp-w .shtp-w-hero-bg::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(18, 44, 58, .1) 1.1px, rgba(18, 44, 58, 0) 1.7px); background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(40% 56% at 80% 40%, #000 25%, transparent 75%); mask-image: radial-gradient(40% 56% at 80% 40%, #000 25%, transparent 75%); }
.shh.shj.shtp-w .shtp-w-hero-inner, .shh.shj.shtp-w .shtp-w-how-wrap { position: relative; z-index: 3; }
.shh.shj.shtp-w .shtp-w-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 1024px) {
	.shh.shj.shtp-w .shtp-w-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 32px 64px; align-items: start; }
	/* clear of the site's Share button, top right under the header (owner rule) */
	.shh.shj.shtp-w .shtp-route { margin-top: 48px; }
}

/* breadcrumbs on the light hero */
.shh.shj.shtp-w .shtp-w-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 0; list-style: none; font: 600 14px/1.4 var(--shh-text); color: var(--shh-muted); }
.shh.shj.shtp-w .shtp-w-crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.shh.shj.shtp-w .shtp-w-crumbs li + li::before { content: "/"; margin: 0 9px; color: var(--shh-line); }
.shh.shj.shtp-w .shtp-w-crumbs a { color: var(--shh-ink); text-decoration: underline; text-decoration-color: var(--shh-line); text-underline-offset: 3px; }
.shh.shj.shtp-w .shtp-w-crumbs a:hover { color: #1b6fae; text-decoration-color: #4ea6ec; }
.shh.shj.shtp-w .shtp-w-crumbs [aria-current] { display: inline-block; max-width: 34ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--shh-muted); }
@media (max-width: 479px) { .shh.shj.shtp-w .shtp-w-crumbs li:last-child { display: none; } }

.shh.shj.shtp-w .shtp-kicker { margin-top: 20px; color: #1b6fae; }
.shh.shj.shtp-w .shtp-kicker .shh-badge { width: 30px; height: 30px; }
.shh.shj.shtp-w .shtp-w-title { margin-top: 14px; }
.shh.shj.shtp-w .shtp-w-pre { display: block; font: 700 clamp(1.05rem, .95rem + .45vw, 1.3rem)/1.25 var(--shh-display); letter-spacing: -.01em; color: #1b6fae; }
.shh.shj.shtp-w .shtp-w-name { display: block; margin-top: 6px; font: 800 clamp(2.3rem, 1.2rem + 4.2vw, 4.1rem)/1 var(--shh-display); letter-spacing: -.035em; color: var(--shh-ink); text-wrap: balance; }
.shh.shj.shtp-w .shtp-w-figs { grid-template-columns: repeat(3, auto); margin-top: 24px; }
@media (max-width: 479px) { .shh.shj.shtp-w .shtp-w-figs { gap: 10px 26px; } }
.shh.shj.shtp-w .shtp-w-kit, .shh.shj.shtp-w .shtp-w-videos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 16px; font: 400 16px/1.45 var(--shh-text); color: var(--shh-copy); }
.shh.shj.shtp-w .shtp-w-kit b { color: var(--shh-ink); }
.shh.shj.shtp-w .shtp-w-kit > .shh-i, .shh.shj.shtp-w .shtp-w-videos > .shh-i { box-sizing: content-box; width: 20px; height: 20px; padding: 7px; border-radius: 50%; background: #eaf4fd; color: #1b6fae; }
.shh.shj.shtp-w .shtp-w-videos { margin-top: 10px; }
.shh.shj.shtp-w .shtp-w-kit-item { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--shh-line); font-weight: 600; color: var(--shh-ink); }
.shh.shj.shtp-w .shtp-w-kit-item .shh-i { width: 18px; height: 18px; color: #1b6fae; }
.shh.shj.shtp-w .shtp-w-actions { margin-top: 26px; }
@media (max-width: 479px) {
	.shh.shj.shtp-w .shtp-w-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
	.shh.shj.shtp-w .shtp-w-actions > * { width: 100%; justify-content: center; }
}

/* the route card: one station per block in its phase colour, joined by the line, then the finish */
.shh.shj.shtp-w .shtp-route { position: relative; padding: 24px 20px 18px; border-radius: 26px; background: #fff; border: 1px solid var(--shh-line-soft);
	box-shadow: 0 34px 70px -42px rgba(18, 44, 58, .55); overflow: hidden; }
.shh.shj.shtp-w .shtp-route::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 7px; background: linear-gradient(90deg, #f0a23b, #4ea6ec 35%, #4ea6ec 65%, #3fb39d 82%, #5cb860); }
.shh.shj.shtp-w .shtp-route-head { display: flex; align-items: center; gap: 14px; }
.shh.shj.shtp-w .shtp-clock { position: relative; display: grid; place-items: center; flex: none; width: 66px; height: 66px; }
.shh.shj.shtp-w .shtp-clock svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.shh.shj.shtp-w .shtp-clock-tr { fill: none; stroke: #e3eef5; stroke-width: 7; }
.shh.shj.shtp-w .shtp-clock-ar { fill: none; stroke: #2b8fd6; stroke-width: 7; stroke-linecap: round; }
.shh.shj.shtp-w .shtp-clock b { position: relative; display: grid; justify-items: center; font: 800 21px/1 var(--shh-display); color: var(--shh-ink); font-variant-numeric: tabular-nums; }
.shh.shj.shtp-w .shtp-clock small { font: 700 10.5px/1.2 var(--shh-text); color: var(--shh-muted); }
.shh.shj.shtp-w .shtp-route-k { font: 800 12px/1.2 var(--shh-text); letter-spacing: .13em; text-transform: uppercase; color: #1b6fae; }
.shh.shj.shtp-w .shtp-route-sub { margin-top: 4px; font: 700 15px/1.35 var(--shh-text); color: var(--shh-ink); }
.shh.shj.shtp-w .shtp-route-list { position: relative; display: grid; gap: 2px; margin-top: 16px; }
.shh.shj.shtp-w .shtp-route-list::before { content: ""; position: absolute; left: 21px; top: 24px; bottom: 24px; width: 4px; margin-left: -2px; border-radius: 4px;
	background: linear-gradient(180deg, #f0a23b, #4ea6ec 30%, #4ea6ec 62%, #3fb39d 80%, #5cb860); }
.shh.shj.shtp-w .shtp-route-st { --st: #2b8fd6; --st-ink: #1b6fae; --st-tint: #eaf4fd; }
.shh.shj.shtp-w .shtp-route-st--warm { --st: #c97a12; --st-ink: #8a5506; --st-tint: #fdf3e3; }
.shh.shj.shtp-w .shtp-route-st--recover { --st: #246b5f; --st-ink: #1f5f54; --st-tint: #e7f2ef; }
.shh.shj.shtp-w .shtp-route-st--complete { --st: #3d9442; --st-ink: #2f7a34; --st-tint: #eef7ec; }
.shh.shj.shtp-w .shtp-route-st a { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 58px; padding: 6px 10px 6px 0; border-radius: 16px; color: var(--shh-ink); text-decoration: none; transition: background-color .18s ease; }
.shh.shj.shtp-w .shtp-route-st a:hover { background: var(--st-tint); }
.shh.shj.shtp-w .shtp-route-n { position: relative; z-index: 1; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background-color: var(--st);
	background-image: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 60%); box-shadow: 0 0 0 4px #fff; color: #fff; font: 800 13px/1 var(--shh-display); }
.shh.shj.shtp-w .shtp-route-n .shh-i { width: 21px; height: 21px; }
.shh.shj.shtp-w .shtp-route-t { display: grid; gap: 1px; min-width: 0; }
.shh.shj.shtp-w .shtp-route-t small { font: 800 11px/1.2 var(--shh-text); letter-spacing: .12em; text-transform: uppercase; color: var(--st-ink); }
.shh.shj.shtp-w .shtp-route-t b { font: 700 16px/1.25 var(--shh-text); color: var(--shh-ink); }
.shh.shj.shtp-w .shtp-route-t span { font-size: 13.5px; line-height: 1.35; color: var(--shh-muted); }
.shh.shj.shtp-w .shtp-route-pips { display: flex; gap: 4px; }
.shh.shj.shtp-w .shtp-route-pips i { width: 9px; height: 9px; border-radius: 50%; background: var(--st); opacity: .85; }
@media (prefers-reduced-motion: no-preference) {
	.shh.shj.shtp-w .shtp-route-st a:hover .shtp-route-n { animation: shtp-hop .55s var(--shh-spring) 1; }
}
/* phones: the route as a compact list (the session's chip strip carries the detail), so the first move comes sooner */
@media (max-width: 767px) {
	.shh.shj.shtp-w .shtp-route { padding: 18px 16px 12px; }
	.shh.shj.shtp-w .shtp-route-head { display: none; }
	.shh.shj.shtp-w .shtp-route-list { margin-top: 0; }
	.shh.shj.shtp-w .shtp-route-list::before { left: 17px; top: 20px; bottom: 20px; }
	.shh.shj.shtp-w .shtp-route-st a { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; min-height: 46px; padding: 3px 8px 3px 0; }
	.shh.shj.shtp-w .shtp-route-n { width: 34px; height: 34px; font-size: 11.5px; box-shadow: 0 0 0 3px #fff; }
	.shh.shj.shtp-w .shtp-route-n .shh-i { width: 18px; height: 18px; }
	.shh.shj.shtp-w .shtp-route-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
	.shh.shj.shtp-w .shtp-route-t > span { display: none; }
	.shh.shj.shtp-w .shtp-w-how-step { padding: 14px 14px 14px 12px; gap: 12px; grid-template-columns: 34px minmax(0, 1fr); }
	.shh.shj.shtp-w .shtp-w-how-n { width: 34px; height: 34px; font-size: 15px; }
}

/* how to follow it */
.shh.shj.shtp-w .shtp-w-how-wrap { margin-top: clamp(30px, 4vw, 48px); }
.shh.shj.shtp-w .shtp-w-how-h { font: 800 12.5px/1.2 var(--shh-text); letter-spacing: .14em; text-transform: uppercase; color: #1b6fae; }
.shh.shj.shtp-w .shtp-w-how { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 14px; counter-reset: none; }
@media (min-width: 768px) { .shh.shj.shtp-w .shtp-w-how { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.shh.shj.shtp-w .shtp-w-how-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px 18px 18px 16px; border-radius: 20px; background: rgba(255, 255, 255, .92);
	border: 1px solid var(--shh-line-soft); box-shadow: 0 18px 36px -32px rgba(18, 44, 58, .5); }
.shh.shj.shtp-w .shtp-w-how-n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #eaf4fd; box-shadow: inset 0 0 0 2px #4ea6ec; font: 800 17px/1 var(--shh-display); color: #1b6fae; }
.shh.shj.shtp-w .shtp-w-how-t { font: 700 17px/1.25 var(--shh-display); color: var(--shh-ink); }
.shh.shj.shtp-w .shtp-w-how-x { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--shh-copy); }
.shh.shj.shtp-w .shtp-w-how-go { margin-top: 12px; min-height: 46px; padding: 0 18px; font-size: 15px; }
.shh.shj.shtp-w .shtp-w-how-go .shh-i { width: 19px; height: 19px; color: #1b6fae; }
.shh.shj.shtp-w .shtp-w-how-go:hover, .shh.shj.shtp-w .shtp-w-how-go:focus-visible { background: #eaf4fd; border-color: #2b8fd6; color: var(--shh-ink); white-space: nowrap; }
.shh.shj.shtp-w .shtp-w-care { display: grid; gap: 8px; margin-top: 18px; max-width: 88ch; }
.shh.shj.shtp-w .shtp-w-care li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--shh-copy); }
.shh.shj.shtp-w .shtp-w-care .shh-i { width: 18px; height: 18px; margin-top: 2px; color: var(--shh-muted); }

/* ================================================================== the session */
body.sh-trp-workout .shtp-w .trw.shtp-w-session { position: relative; padding-block: clamp(28px, 4vw, 56px) clamp(40px, 5vw, 72px); background: linear-gradient(180deg, #f3f8fb 0%, #f6fafc 100%); border-top: 1px solid var(--shh-line-soft); }
body.sh-trp-workout .shtp-w .trw-head, body.sh-trp-workout .shtp-w .trw-layout { position: relative; z-index: 3; }
body.sh-trp-workout .shtp-w .shtp-w-session-head { margin-bottom: clamp(16px, 2vw, 24px); }
body.sh-trp-workout .shtp-w .shtp-w-k { font: 800 12.5px/1.2 var(--shh-text); letter-spacing: .14em; text-transform: uppercase; color: #1b6fae; }
body.sh-trp-workout .shtp-w .shtp-w-h2 { margin-top: 8px; font: 800 clamp(1.7rem, 1.15rem + 1.7vw, 2.5rem)/1.04 var(--shh-display); letter-spacing: -.03em; color: var(--shh-ink); }

/* the rail: the session's own line, one colour per phase */
body.sh-trp-workout .shtp-w .trw-rail-item { --ph-fill: var(--ph, #2b8fd6); }
body.sh-trp-workout .shtp-w .trw-rail-n { border-color: var(--ph); color: var(--ph-ink); background: #fff; font-family: var(--shh-display); }
body.sh-trp-workout .shtp-w .trw-rail-item.is-past .trw-rail-n { border-color: var(--ph); background: var(--ph-tint); color: var(--ph-ink); }
body.sh-trp-workout .shtp-w .trw-rail-item.is-active a { background: var(--ph-tint); }
body.sh-trp-workout .shtp-w .trw-rail-item.is-active .trw-rail-n { border-color: var(--ph); background: var(--ph); color: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--ph) 22%, transparent); }
body.sh-trp-workout .shtp-w .trw-rail-item.is-active .trw-rail-t b { color: var(--ph-ink); }
body.sh-trp-workout .shtp-w .trw-rail-t b { font-family: var(--shh-text); }
@media (min-width: 1100px) {
	body.sh-trp-workout .shtp-w .trw-rail-list::before { width: 4px; margin-left: -1px; border-radius: 4px; background: linear-gradient(180deg, #f0a23b, #4ea6ec 30%, #4ea6ec 65%, #3fb39d); opacity: .9; }
	body.sh-trp-workout .shtp-w .trw-rail-in { padding: 20px; border-radius: 24px; }
	body.sh-trp-workout .shtp-w .trw-rail-h { border-bottom-color: var(--shh-ink); font-family: var(--shh-text); color: var(--shh-ink); }
	body.sh-trp-workout .shtp-w .trw-rail-h b { font-family: var(--shh-display); }
}
@media (max-width: 1099px) {
	body.sh-trp-workout .shtp-w .trw-rail-n { background: var(--ph-tint); border: 0; }
	body.sh-trp-workout .shtp-w .trw-rail-item a { box-shadow: inset 0 0 0 1.5px var(--shh-line-soft); }
	body.sh-trp-workout .shtp-w .trw-rail-item.is-active a { box-shadow: inset 0 0 0 2px var(--ph); }
}

/* a block: the phase's colour bar, its badge on the thread, plain words, then the moves */
body.sh-trp-workout .shtp-w .trw-set { position: relative; border-radius: 24px; box-shadow: 0 0 0 1px var(--shh-line-soft), 0 22px 44px -38px rgba(18, 44, 58, .5); }
body.sh-trp-workout .shtp-w .trw-set::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--ph-bar); }
body.sh-trp-workout .shtp-w .trw-set.is-current { box-shadow: 0 0 0 2px var(--ph), 0 30px 60px -40px rgba(18, 44, 58, .55); }
body.sh-trp-workout .shtp-w .trw-set-head { isolation: isolate; padding-top: clamp(22px, 2.6vw, 30px); }
body.sh-trp-workout .shtp-w .trw-set-badge { background-color: var(--ph); background-image: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 60%); color: #fff;
	font: 800 1.15rem/1 var(--shh-display); box-shadow: 0 0 0 6px var(--ph-tint), 0 12px 22px -12px rgba(11, 58, 70, .45); }
body.sh-trp-workout .shtp-w :is(.trw-set--wu, .trw-set--cd) .trw-set-badge { background-color: var(--ph); color: #fff; font-size: 1rem; }
body.sh-trp-workout .shtp-w .trw-set-kicker { color: var(--ph-ink); font-family: var(--shh-text); }
body.sh-trp-workout .shtp-w .trw-set-h { font-family: var(--shh-display); color: var(--shh-ink); }
body.sh-trp-workout .shtp-w .trw-set-how { font-size: 16.5px; color: var(--shh-copy); }
body.sh-trp-workout .shtp-w .trw-set-stats li { background: var(--ph-tint); }
body.sh-trp-workout .shtp-w .trw-set-stats b { font-family: var(--shh-display); color: var(--ph-ink); }

/* the round grid */
body.sh-trp-workout.sh-tr-workout .shtp-w .trw-grid thead th { background: #f6f9fb !important; color: var(--shh-muted) !important; font-family: var(--shh-text); }
body.sh-trp-workout.sh-tr-workout .shtp-w .trw-set.is-current .trw-grid thead th { background: var(--ph-tint) !important; color: var(--ph-ink) !important; }
body.sh-trp-workout .shtp-w .trw-grid td b { font: 800 1.25rem/1 var(--shh-display); color: var(--shh-ink); }
body.sh-trp-workout .shtp-w .trw-move { grid-template-columns: 26px 112px minmax(0, 1fr); min-height: 66px; }
body.sh-trp-workout .shtp-w .trw-move:hover { background: var(--ph-tint); }
body.sh-trp-workout .shtp-w .trw-move-img { width: 112px; border-radius: 12px; background: linear-gradient(135deg, #1b4f78, #2b8fd6); box-shadow: 0 8px 18px -12px rgba(12, 34, 54, .6); }
body.sh-trp-workout .shtp-w .trw-move-img img { transition: transform .35s var(--shh-ease); }
body.sh-trp-workout .shtp-w .trw-move-play .sl-i { width: 15px; height: 15px; padding: 8px; background: rgba(255, 255, 255, .92); color: var(--ph-ink); }
body.sh-trp-workout .shtp-w .trw-move-t b { font: 700 1.05rem/1.25 var(--shh-text); }
body.sh-trp-workout .shtp-w .trw-grid tbody th .trw-move-t small { color: var(--ph-ink); }
body.sh-trp-workout .shtp-w .trw-grid tbody th .trw-move-play { color: var(--ph-ink); }
body.sh-trp-workout .shtp-w .trw-grid tbody th .trw-move-play .sl-i { color: var(--ph-ink); }
@media (prefers-reduced-motion: no-preference) {
	body.sh-trp-workout .shtp-w .trw-move:hover .trw-move-img img { transform: scale(1.06); }
}
@media (max-width: 700px) {
	body.sh-trp-workout.sh-tr-workout .shtp-w .trw-grid td { background: var(--ph-tint) !important; }
	body.sh-trp-workout .shtp-w .trw-grid tbody tr { gap: 8px; padding: 12px 14px 16px; }
	body.sh-trp-workout .shtp-w .trw-move { grid-template-columns: 22px 96px minmax(0, 1fr); min-height: 60px; }
	body.sh-trp-workout .shtp-w .trw-move-img { width: 96px; }
	body.sh-trp-workout .shtp-w .trw-grid td { padding: 10px 6px; border-radius: 14px; }
	body.sh-trp-workout .shtp-w .trw-grid td::before { font-family: var(--shh-text); font-size: 11.5px; color: var(--ph-ink); }
	body.sh-trp-workout .shtp-w .trw-grid td b { font-size: 1.3rem; }
}

/* the foot: the rest in the phase's colour, "Next" as the phase's button, the last one to the finish */
body.sh-trp-workout .shtp-w .trw-set-foot { gap: 12px; }
body.sh-trp-workout .shtp-w .trw-rest-btn, body.sh-trp-workout .shtp-w .trw-rest-btn:is(:hover, :focus, :active, :visited) { min-height: 46px; border-color: var(--ph); color: var(--shh-ink); background: #fff; white-space: nowrap; }
body.sh-trp-workout .shtp-w .trw-rest-btn:is(:hover, :focus-visible) { background: var(--ph-tint); color: var(--shh-ink); }
body.sh-trp-workout .shtp-w .trw-rest-btn .sl-i { color: var(--ph-ink); }
body.sh-trp-workout .shtp-w .trw-next, body.sh-trp-workout .shtp-w .trw-next:visited { min-height: 48px; padding: 0 20px; background: var(--ph-ink); color: #fff; font-family: var(--shh-text); }
body.sh-trp-workout .shtp-w .trw-next:hover, body.sh-trp-workout .shtp-w .trw-next:focus-visible { background: var(--shh-ink); color: #fff; }
body.sh-trp-workout .shtp-w .trw-next.shtp-w-finish { background: #2f7a34; }
body.sh-trp-workout .shtp-w .trw-next.shtp-w-finish:hover, body.sh-trp-workout .shtp-w .trw-next.shtp-w-finish:focus-visible { background: #1f5c24; }
@media (max-width: 479px) {
	body.sh-trp-workout .shtp-w .trw-set-foot { display: grid; grid-template-columns: minmax(0, 1fr); }
	body.sh-trp-workout .shtp-w .trw-set-foot > * { width: 100%; justify-content: center; margin-left: 0; }
}

/* ================================================================== complete */
.shh.shj.shtp-w .shtp-w-complete { background: linear-gradient(180deg, #ffffff 0%, #eff8ec 100%); border-top: 1px solid var(--shh-line-soft); }
.shh.shj.shtp-w .shtp-w-complete .shj-say { color: #2f7a34; }
/* the finish node: a little burst of the phase colours when the thread reaches it */
.shh.shj.shtp-w .shtp-w-burst { position: absolute; inset: 0; pointer-events: none; }
.shh.shj.shtp-w .shtp-w-burst i { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; opacity: 0; background: #f0a23b; }
.shh.shj.shtp-w .shtp-w-burst i:nth-child(1) { --a: 0deg; }
.shh.shj.shtp-w .shtp-w-burst i:nth-child(2) { --a: 45deg; background: #4ea6ec; }
.shh.shj.shtp-w .shtp-w-burst i:nth-child(3) { --a: 90deg; background: #3fb39d; }
.shh.shj.shtp-w .shtp-w-burst i:nth-child(4) { --a: 135deg; background: #ec6a98; }
.shh.shj.shtp-w .shtp-w-burst i:nth-child(5) { --a: 180deg; background: #5cb860; }
.shh.shj.shtp-w .shtp-w-burst i:nth-child(6) { --a: 225deg; background: #4ea6ec; }
.shh.shj.shtp-w .shtp-w-burst i:nth-child(7) { --a: 270deg; background: #f0a23b; }
.shh.shj.shtp-w .shtp-w-burst i:nth-child(8) { --a: 315deg; background: #3fb39d; }
@media (prefers-reduced-motion: no-preference) {
	.shh.shj.shtp-w .is-lit .shtp-w-burst i { animation: shtp-burst 1s cubic-bezier(.2, .7, .2, 1) .15s 1 both; }
}
@keyframes shtp-burst { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(.5); } 70% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-54px) scale(1); } }

.shh.shj.shtp-w .shtp-w-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 30px; }
@media (min-width: 768px) {
	.shh.shj.shtp-w .shtp-w-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.shh.shj.shtp-w .shtp-w-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.shh.shj.shtp-w .shtp-w-tile { --tile: #2b8fd6; --tile-tint: #eaf4fd; display: flex; flex-direction: column; min-width: 0; padding: 22px 20px 20px; border-radius: 22px; background: #fff; border: 1px solid var(--shh-line-soft); box-shadow: 0 22px 44px -36px rgba(18, 44, 58, .5); }
.shh.shj.shtp-w .shtp-w-tile--save { --tile: #d6336c; --tile-tint: #fdf0f5; }
.shh.shj.shtp-w .shtp-w-tile--plan { --tile: #246b5f; --tile-tint: #e7f2ef; }
.shh.shj.shtp-w .shtp-w-tile-ic { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--tile-tint); color: var(--tile); }
.shh.shj.shtp-w .shtp-w-tile-ic .shh-i { width: 23px; height: 23px; }
.shh.shj.shtp-w .shtp-w-tile-t { margin-top: 14px; font: 700 1.25rem/1.2 var(--shh-display); color: var(--shh-ink); }
.shh.shj.shtp-w .shtp-w-tile-x { flex: 1 0 auto; margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--shh-copy); }
.shh.shj.shtp-w .shtp-w-tile-do { margin-top: 16px; }
.shh.shj.shtp-w .shtp-w-tile-do .shh-btn { min-height: 48px; padding: 0 20px; font-size: 15px; }
.shh.shj.shtp-w .shtp-w-tile-do .shh-btn .shh-i { width: 19px; height: 19px; color: var(--tile); }
.shh.shj.shtp-w .shtp-w-tile-do .shh-btn:hover, .shh.shj.shtp-w .shtp-w-tile-do .shh-btn:focus-visible { background: var(--tile-tint); border-color: var(--tile); color: var(--shh-ink); white-space: nowrap; }
.shh.shj.shtp-w .shtp-w-email { margin: 0; }
/* phones: icon beside the words, button full width, so the three tiles stay short */
@media (max-width: 639px) {
	.shh.shj.shtp-w .shtp-w-tile { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; padding: 18px 16px; }
	.shh.shj.shtp-w .shtp-w-tile-ic { grid-row: 1 / span 2; }
	.shh.shj.shtp-w .shtp-w-tile-t { margin-top: 2px; }
	.shh.shj.shtp-w .shtp-w-tile-do { grid-column: 1 / -1; margin-top: 12px; }
	body.sh-trp-workout .shh.shj.shtp-w .shtp-w-tile-do :is(.shh-btn, .sfav-save, .sh-action) { width: 100% !important; justify-content: center; }
}

/* the customise widget, as a quiet row under the tiles */
.shh.shj.shtp-w .shtp-w-custom { margin-top: 16px; }
.shh.shj.shtp-w .shtp-w-custom .sh-cf-customise { display: grid; gap: 6px 24px; margin: 0; padding: 20px 22px; border-radius: 22px; background: rgba(255, 255, 255, .7); border: 1.5px dashed #b9d8c0; }
.shh.shj.shtp-w .shtp-w-custom .sxl-section-head { display: grid; gap: 4px; margin: 0; }
.shh.shj.shtp-w .shtp-w-custom .sxl-kicker { font: 800 12px/1.2 var(--shh-text); letter-spacing: .13em; text-transform: uppercase; color: #2f7a34; }
/* the Eat & Train look sets this heading with !important (et-brand.css) and the buttons' colours (et.css): restated here */
.shh.shj.shtp-w .shtp-w-custom h2 { margin: 0 !important; font: 700 1.25rem/1.2 var(--shh-display) !important; letter-spacing: -.01em !important; color: var(--shh-ink) !important; }
.shh.shj.shtp-w .shtp-w-custom p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--shh-copy); }
.shh.shj.shtp-w .shtp-w-custom .sh-system-actions { margin: 6px 0 0; }
/* the two widgets' own buttons (Email this workout, Sign in to customise) as the same outline pills as Save and Plan */
.shh.shj.shtp-w :is(.shtp-w-custom, .shtp-w-email) .sh-system-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 0; }
body.sh-trp-workout .shh.shj.shtp-w :is(.shtp-w-custom, .shtp-w-email) .sh-action, body.sh-trp-workout .shh.shj.shtp-w :is(.shtp-w-custom, .shtp-w-email) .sh-action:is(:hover, :focus, :active, :visited) {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: auto; min-height: 48px; padding: 0 20px; border-radius: 999px;
	background: #fff !important; border: 1.5px solid var(--shh-line) !important; color: var(--shh-ink) !important; box-shadow: none !important;
	font: 700 15px/1.1 var(--shh-text) !important; text-decoration: none !important; white-space: nowrap; transform: none; }
body.sh-trp-workout .shh.shj.shtp-w .shtp-w-custom .sh-action:is(:hover, :focus-visible) { border-color: #3d9442 !important; background: #eef7ec !important; }
body.sh-trp-workout .shh.shj.shtp-w .shtp-w-email .sh-action:is(:hover, :focus-visible) { border-color: #2b8fd6 !important; background: #eaf4fd !important; }
@media (min-width: 900px) {
	.shh.shj.shtp-w .shtp-w-custom .sh-cf-customise { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
	.shh.shj.shtp-w .shtp-w-custom .sh-cf-customise > :not(.sh-system-actions) { grid-column: 1; }
	.shh.shj.shtp-w .shtp-w-custom .sh-system-actions { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
}

/* ================================================================== continue */
.shh.shj.shtp-w .shtp-w-continue { background: #fff; border-top: 1px solid var(--shh-line-soft); }
.shh.shj.shtp-w .shtp-w-continue .shj-say { color: #1b6fae; }
.shh.shj.shtp-w .shtp-way--eat { --way: #3d9442; --way-ink: #2f7a34; --way-tint: #eef7ec; --way-bar: #5cb860; }
.shh.shj.shtp-w .shtp-way--assess { --way: #246b5f; --way-ink: #246b5f; --way-tint: #e7f2ef; --way-bar: #3fb39d; }
.shh.shj.shtp-w .shtp-way--helpers { --way: #d6336c; --way-ink: #b0285a; --way-tint: #fdf0f5; --way-bar: #ec6a98; }
.shh.shj.shtp-w .shtp-w-journey { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px 16px; align-items: start; margin-top: 18px; padding: 22px; border-radius: 22px;
	background: linear-gradient(120deg, #eef8fc 0%, #f2f9f0 100%); border: 1px solid var(--shh-line-soft); }
.shh.shj.shtp-w .shtp-w-journey-node { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #fff;
	background-color: #246b5f; background-image: linear-gradient(140deg, #246b5f, #2b8fd6 55%, #3d9442); }
.shh.shj.shtp-w .shtp-w-journey-node .shh-i { width: 24px; height: 24px; }
.shh.shj.shtp-w .shtp-w-journey-h { font: 700 1.2rem/1.25 var(--shh-display); color: var(--shh-ink); }
.shh.shj.shtp-w .shtp-w-journey-x { margin-top: 4px; max-width: 70ch; font-size: 15px; line-height: 1.55; color: var(--shh-copy); }
.shh.shj.shtp-w .shtp-w-journey .shh-actions { grid-column: 1 / -1; }
.shh.shj.shtp-w .shtp-w-journey .shh-btn { min-height: 48px; padding: 0 20px; font-size: 15px; }
@media (min-width: 900px) {
	.shh.shj.shtp-w .shtp-w-journey { grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; }
	.shh.shj.shtp-w .shtp-w-journey .shh-actions { grid-column: 3; }
}
.shh.shj.shtp-w .shtp-w-fine { margin-top: 22px; font-size: 13.5px; color: var(--shh-muted); }

/* ---------- reduced motion: nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
	.shh.shj.shtp-w .shtp-route-n, .shh.shj.shtp-w .shtp-w-burst i, body.sh-trp-workout .shtp-w .trw-move-img img { animation: none !important; transition: none !important; }
}