/* Ember website V3: /plus/workouts/ (reached from the Plus page's Workouts tab).
   Loads after plus.css and reuses its .wk-card / .wk-opt; adds the workout
   screenshot frames (.wo-shot), the experiment result (.wo-exp) and page spacing. */
/* Back to the Plus page's Workouts tab, where people come from; it stands in
   for the hero's "Ember Plus" kicker. The nav hides Ember Plus on phones. */
.wo-hero { padding-top: 8px; }
.wo-crumb { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.wo-crumb::before { content: "‹"; font-size: 22px; line-height: 1; color: var(--ink-mut); transform: translateY(-1px); }
.wo-crumb:hover { color: var(--ink-hi); text-decoration: underline; }
.wo-hero .plus-hero-in { margin-top: 16px; }
@media (min-width: 1024px) { .wo-hero { padding-top: 16px; } .wo-hero .plus-hero-in { margin-top: 32px; } }
.wo-hero .t-display { margin-top: 0; max-width: 16em; }
.wo-hero .t-lead { margin-top: 16px; }
.split-copy > .wo-list { margin: var(--h2-lead) 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.split-copy > .t-body + .t-body { margin-top: 12px; }

/* Real screenshots from the app (Sam's phone), framed like the cards beside them */
.wo-shot { margin: 0 auto; border: 1px solid #2a2a2a; border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.wo-shot img { display: block; width: 100%; height: auto; }
.wo-shot--rotation { width: min(100%, 460px); margin-top: 40px; }
/* the session image is the app's own exercise card, cropped to its border, so no frame */
.wo-shot--session { width: min(100%, 400px); border: 0; border-radius: 18px; background: none; }

/* Migraine-day cards: plus.css .wk-card, stacked */
.wo-cards { width: min(100%, 420px); margin-inline: auto; display: grid; gap: 12px; }
.wo-sub { font-size: 14px; color: var(--ink-mut); }

/* Experiment result */
.wo-exp { width: min(100%, 420px); margin-inline: auto; background: #151515; border: 1px solid #2a2a2a; border-radius: 16px; padding: 20px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.wo-exp-name { font: 600 14px/1.3 var(--sans); color: var(--exp); }
.wo-exp-result { margin-top: 8px; font: 400 24px/1.25 var(--serif); color: var(--ink-hi); text-wrap: balance; }
.wo-exp-note { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--ink-mut); }

.wo-price { margin: 12px auto 0; text-align: center; }
.close .badges { margin-top: 24px; }
.wo-back { margin-top: 20px; }