/*
 * Train look — exercise library pages: the exercise page below its masthead (owner feedback, 17 Oct 2026).
 * Loaded after train.css on the hub, exercise and exercise-term surfaces (train-look/train-look.php).
 * Sections: 01 Watch and learn · 02 The guide · 03 Similar moves · 04 Find another move · side rail · FAQ.
 */

/* Page rhythm: the main grid sits on white; the two bands after it run full width. */
body.sh-tr-exercise .single-exercise-hub { margin-top: clamp(32px, 4.4vw, 64px) !important; margin-bottom: clamp(40px, 5vw, 72px) !important; }
body.sh-tr-exercise .tr-ex-watch-h .tr-head { margin-bottom: clamp(16px, 2vw, 24px); }

/* 01 Watch and learn: the video and the numbered tips (spacing only; the shapes are in train.css). */
body.sh-tr-exercise .x_content_row { margin-bottom: 0 !important; }

/* 02 The guide: the stored guide by what each part is for. */
body.sh-tr .tr-ex-guide { display: grid; gap: clamp(16px, 2vw, 22px); margin-top: clamp(40px, 5vw, 68px); scroll-margin-top: calc(var(--sh-header-bottom, 64px) + 20px); }
body.sh-tr .tr-ex-guide .tr-head { margin-bottom: 4px; }
body.sh-tr-exercise .tr-guide.ea-article { display: grid; gap: clamp(14px, 1.8vw, 20px); max-width: none !important; margin: 0 !important; font: 400 17px/1.7 var(--sl-text) !important; color: var(--sl-copy) !important; }
body.sh-tr-exercise .tr-guide :is(p, li) { color: var(--sl-copy); }
body.sh-tr-exercise .tr-guide p { margin: 0 0 12px !important; }
body.sh-tr-exercise .tr-guide p:last-child { margin-bottom: 0 !important; }
body.sh-tr .tr-guide-sec { min-width: 0; }
body.sh-tr-exercise .tr-guide .tr-guide-h, body.sh-tr .tr-guide-h { display: flex; align-items: center; gap: 12px; margin: 0 0 12px !important; padding: 0 !important; border: 0 !important; font: 800 1.3rem/1.2 var(--sl-display) !important; letter-spacing: -.02em !important; color: var(--sl-ink) !important; }
body.sh-tr .tr-guide-ic { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 12px; background: var(--tr-wash); color: var(--tr-ink); }
body.sh-tr .tr-guide-ic .sl-i { width: 18px; height: 18px; }
/* The overview reads as a lead: its first paragraph is a size up. */
body.sh-tr .tr-guide-sec--overview .tr-guide-b > p:first-child,
body.sh-tr .tr-guide-sec--lead > p:first-child { font-size: clamp(1.08rem, 1rem + .3vw, 1.22rem) !important; line-height: 1.6 !important; color: var(--sl-ink) !important; }
body.sh-tr .tr-guide-sec--overview { max-width: 74ch; }
/* "Good for" and "take care" side by side. */
body.sh-tr .tr-guide-pair { display: grid; gap: clamp(12px, 1.6vw, 18px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { body.sh-tr .tr-guide-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } }
body.sh-tr .tr-guide-pair > .tr-guide-sec { padding: clamp(18px, 2.2vw, 24px); border-radius: 20px; }
body.sh-tr .tr-guide-sec--benefits { background: #eef7f4; box-shadow: inset 0 0 0 1px #cfe6de; }
body.sh-tr .tr-guide-sec--benefits .tr-guide-ic { background: #fff; color: var(--sl-teal, #246b5f); }
body.sh-tr .tr-guide-sec--caution { background: #fdf4f8; box-shadow: inset 0 0 0 1px #eccbdb; }
body.sh-tr .tr-guide-sec--caution .tr-guide-ic { background: #fff; color: #7b244b; }
body.sh-tr .tr-guide-sec--caution .tr-guide-h { color: #5e1a39 !important; }
body.sh-tr-exercise .tr-guide :is(ul, ol) { display: grid; gap: 10px; margin: 0 !important; padding: 0 !important; list-style: none !important; }
body.sh-tr-exercise .tr-guide ul li { position: relative; margin: 0 !important; padding-left: 30px !important; line-height: 1.5; }
body.sh-tr-exercise .tr-guide ul li::before { content: ""; position: absolute; left: 4px; top: .5em; width: 10px; height: 3px; border-radius: 2px; background: var(--tr-blue); }
/* Ticks for what it is good for, a plum rule for when to take care. */
body.sh-tr-exercise .tr-guide-sec--benefits ul li::before { top: .3em; width: 13px; height: 7px; border-radius: 0; background: none; border-left: 2.5px solid var(--sl-teal, #246b5f); border-bottom: 2.5px solid var(--sl-teal, #246b5f); transform: rotate(-45deg); }
body.sh-tr-exercise .tr-guide-sec--caution ul li::before { top: .35em; width: 4px; height: 14px; border-radius: 2px; background: #7b244b; }
body.sh-tr-exercise .tr-guide-sec--caution :is(p, li) { color: #4a1730; }
/* The verdict closes on the track. */
body.sh-tr .tr-guide-sec--verdict { position: relative; overflow: hidden; isolation: isolate; padding: clamp(20px, 2.6vw, 28px); border-radius: 22px; background: radial-gradient(60% 90% at 95% 0%, rgba(43, 143, 214, .35), rgba(43, 143, 214, 0) 70%), linear-gradient(160deg, #0b1f32, #123b5f); }
body.sh-tr .tr-guide-sec--verdict::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #2b8fd6, #6ec4e8 60%, #3fb39d); }
body.sh-tr .tr-guide-sec--verdict .tr-guide-h { color: #fff !important; }
body.sh-tr .tr-guide-sec--verdict .tr-guide-ic { background: rgba(143, 208, 255, .16); color: var(--tr-sky); }
body.sh-tr-exercise .tr-guide-sec--verdict :is(p, li) { color: #e6f0f8 !important; font-size: 1.05rem !important; }
body.sh-tr .tr-guide-ai { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; margin: 4px 0 0 !important; padding: 12px 0 0 !important; border-top: 1px solid var(--tr-rule); font-size: 13.5px !important; line-height: 1.5 !important; color: var(--sl-muted) !important; }
body.sh-tr .tr-guide-ai-ic .sl-i { width: 18px; height: 18px; color: var(--sl-muted); }

/* Side rail: an "On this page" map under Support, then the check-up suggestion. */
body.sh-tr .tr-ex-map ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
body.sh-tr .tr-ex-map li + li { border-top: 1px solid var(--tr-rule); }
body.sh-tr .tr-ex-map a { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 44px; color: var(--sl-ink); font-weight: 700; text-decoration: none; }
body.sh-tr .tr-ex-map a span { font: 800 13px/1 var(--sl-display); color: var(--tr-ink); font-variant-numeric: tabular-nums; }
body.sh-tr .tr-ex-map a:hover { color: var(--tr-ink); }
body.sh-tr .tr-ex-map a:focus-visible { outline: 3px solid var(--tr-blue); outline-offset: 2px; border-radius: 8px; }
body.sh-tr-exercise .single-exercise-sidebar .tr-side-box { margin: 0; }

/* 03 Similar moves: a chalk band of library plates. */
body.sh-tr .tr-ex-similar { padding-block: clamp(40px, 5vw, 72px); background: var(--tr-chalk); border-top: 1px solid var(--tr-rule); scroll-margin-top: var(--sh-header-bottom, 64px); }
body.sh-tr .tr-ex-similar .tr-plates { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
@media (min-width: 1100px) { body.sh-tr .tr-ex-similar .tr-plates { grid-template-columns: repeat(6, minmax(0, 1fr)); } body.sh-tr .tr-ex-similar .tr-plate-meta > span + span { display: none; } }

/* 04 Find another move: the library and every muscle group. */
body.sh-tr .tr-ex-more { padding-block: clamp(40px, 5vw, 72px); background: #fff; border-top: 1px solid var(--tr-rule); scroll-margin-top: var(--sh-header-bottom, 64px); }
body.sh-tr .tr-ex-more-in { display: grid; gap: clamp(20px, 3vw, 40px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 980px) { body.sh-tr .tr-ex-more-in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
body.sh-tr .tr-ex-more-copy .tr-head { margin-bottom: 18px; }
body.sh-tr .tr-ex-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
body.sh-tr .tr-ex-groups a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 14px 0 16px; border-radius: 14px; background: var(--tr-chalk); box-shadow: inset 0 0 0 1px var(--tr-rule); color: var(--sl-ink); font-weight: 800; text-decoration: none; transition: background-color .2s var(--tr-ease), box-shadow .2s var(--tr-ease); }
body.sh-tr .tr-ex-groups a:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--tr-ink); color: var(--tr-ink); }
body.sh-tr .tr-ex-groups a:focus-visible { outline: 3px solid var(--tr-blue); outline-offset: 2px; }
body.sh-tr .tr-ex-groups small { font: 800 12px/1 var(--sl-display); color: var(--sl-muted); font-variant-numeric: tabular-nums; }

/* The page FAQ in the Train voice: an index head and hairline questions. */
body.sh-tr-exercise .rfq-block { margin: clamp(40px, 5vw, 72px) auto !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
body.sh-tr-exercise .rfq-header { margin: 0 0 18px !important; padding: 0 0 14px !important; border-bottom: 2px solid var(--sl-ink) !important; }
body.sh-tr-exercise .rfq-header > span { font: 800 12px/1.2 var(--sl-text) !important; letter-spacing: .16em !important; text-transform: uppercase; color: var(--tr-ink) !important; }
body.sh-tr-exercise .rfq-header h2 { margin: 6px 0 8px !important; font: 800 clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem)/1.08 var(--sl-display) !important; letter-spacing: -.03em !important; color: var(--sl-ink) !important; }
body.sh-tr-exercise .rfq-header p { margin: 0 !important; max-width: 70ch; color: var(--sl-copy) !important; }
body.sh-tr-exercise .rfq-list { display: grid; gap: 0 !important; }
body.sh-tr-exercise .rfq-item { margin: 0 !important; padding: 0 !important; border: 0 !important; border-bottom: 1px solid var(--tr-rule) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
body.sh-tr-exercise .rfq-item > summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 14px 4px !important; font: 800 1.05rem/1.35 var(--sl-text) !important; color: var(--sl-ink) !important; cursor: pointer; list-style: none; }
body.sh-tr-exercise .rfq-item > summary::-webkit-details-marker { display: none; }
body.sh-tr-exercise .rfq-item > summary::after { content: "+"; flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tr-chalk); color: var(--tr-ink); font: 800 18px/1 var(--sl-text); }
body.sh-tr-exercise .rfq-item[open] > summary::after { content: "–"; background: var(--tr-deep); color: #fff; }
body.sh-tr-exercise .rfq-item > summary:focus-visible { outline: 3px solid var(--tr-blue); outline-offset: 2px; border-radius: 10px; }
body.sh-tr-exercise .rfq-item > :not(summary) { margin: 0 0 16px !important; padding: 0 44px 0 4px !important; color: var(--sl-copy) !important; line-height: 1.65; }

@media (prefers-reduced-motion: reduce) { body.sh-tr .tr-ex-groups a { transition: none; } }