/*
 * css/components/coach-proposal.css
 * 02 Nov 2026 v16
 *
 * v16 - P-23 (the Plan; a fault found with it). At 320 px and text 2 the
 *   swap list under a row was 599 px wide inside the sheet, clipped: each
 *   choice is a .btn, which never wraps, so the longest name set the
 *   list's width. The list now keeps to its row and a name wraps between
 *   words; its size is capped at 6.4vw, so "Strengthening" fits at 320 px.
 *   The plan's own row name split the same word at text 2 on 320 px (a
 *   32 px word in a 194 px column; both tiers, already on v701): it is
 *   capped at 7vw (22 px there, 27 px on a 390 px phone), so only text 2
 *   is any smaller. The search that P-23 adds below it is workout.css's .swap-find.
 *
 * 31 Oct 2026 v15
 *
 * v15 - STAGE PATH Session 9 (close checks; both tiers: a fault, not a look).
 *   At text 2 a long movement name split mid-word ("Diaphragmatic",
 *   "Strengthening": chromium-text-fit, on v688 too) because the name could
 *   break anywhere and its column was fixed beside the figure. The name now
 *   breaks only a word too long for the whole row, and its column's width
 *   grows with the text, so at large text it takes the line under the
 *   figure and Swap moves under it, before any word would split.
 *
 * 12 Oct 2026 v14
 *
 * v14 - A-4 SHARED-POLISH (both tiers). "‹ Home" top left in place of
 *   the ✕; Where, Length and Focus as a row of pills.
 *
 *
 * v13 - D-2 PLAN-PREVIEW. .cp-plan__open (the row's name area is a button
 *   with a chevron, at least 44px) and .cp-xprev (the exercise sheet over
 *   the plan: Why, What to watch out for in the same rose box as the
 *   player, How, and Swap it / Keep it). Reduced motion: no slide.
 *
 * v12 - W3-21 NAV-SMALL. .cp-assumptions__choices (Length and Where as
 *   a row of one-tap choices) and .cp-swap (Swap as a list under its
 *   row). The chosen one is bold with a thicker border, not only
 *   coloured; every button is at least 44px.
 *
 * v11 - SMOOTH-P2e. .cp-planned (what they planned, first) and .cp-offer
 *   (a good day's one-line offer). Both are words and a button, never a
 *   colour alone.
 *
 * v10 - SMOOTH-P2a. Today's plan: .cp-plan (the named list, grouped
 *   Warm up / Main / Cool down), .cp-different (Something different
 *   today, a native <details>), .cp-dock (the hurt-and-ache line, and
 *   the tick-box when the note is due). Swap and every sheet button are
 *   at least 44px (2.5.8 asks 24; the app's own floor is 44). Row text
 *   is never carried by colour alone (1.4.1): "Last:" and "Works your"
 *   are words, not tints.
 *
 * v9 - LOCATION-1. .cp-assumptions: the changeable
 *   assumptions strip on the proposal -- where you are, and how long.
 *   Same row shape as the quick scaffold on purpose.
 *
 * 04 Aug 2026 v8
 *
 * v8 — .cp-coach-block--in-panel added, coach-proposal.js v19's fix for
 *   the auto-open panel covering the constraint/condition message.
 *
 * v7 — Phase C, Home Nav & Conditions Redesign. .cp-doors/.cp-door*
 *   and .cp-bypass* rule sets removed entirely — confirmed unused
 *   once coach-proposal.js v18 removed the markup that used them.
 *
 * v6 — .cp-constraint strengthened (see coach-proposal.js v13 changelog).
 *   13% opacity background + 3px left border → 14% + full border + 4px
 *   left border + shadow + icon + semibold body-size text. Contrast
 *   confirmed still WCAG AA at the new opacity.
 *
 *
 * v5 — Confirmed bug fix. The file living at this path on GitHub did not
 *   contain CSS at all — it contained a copy of coach-proposal.js's v8
 *   header and content (confirmed via Graeme viewing the file directly
 *   on GitHub: line 2 read "* coach-proposal.js", followed by that
 *   file's v8 changelog verbatim). Not a version-lag issue like v3→v4
 *   was — the file was never valid CSS at that path, so the browser had
 *   no coach-proposal.css rules to apply at all: every .cp-* class
 *   (doors, preview panel, bypass buttons, chips) rendered as plain
 *   unstyled text, while every other view's CSS loaded and applied
 *   normally. Likely a manual copy-paste mistake during a past
 *   GitHub-web-interface deploy — this file and coach-proposal.js were
 *   probably being edited in adjacent tabs and the wrong content landed
 *   in the wrong file. Not something introduced by anything touched in
 *   today's session; not caught until now because nobody had gotten a
 *   real Door 1 session far enough to notice broken styling until
 *   today's other fixes made that possible for the first time.
 *   Restored to the genuine v4 content below — the CSS rules themselves
 *   are unchanged from what v4 was always meant to be; only the file's
 *   actual content is corrected. Bumped to v5 to mark the correction
 *   clearly in the changelog rather than silently re-landing v4.
 *
 * v3 — Door redesign (Door 1). Added .cp-preview-panel and its children
 *   for the new right-slide preview panel. z-index set to 9999 from the
 *   start, matching the convention established by .settings-dialog and
 *   this morning's weekly-plan-v2.css fix (.wp-config-sheet was
 *   originally 9000, an exact tie with nav-fix.css's #bottom-nav —
 *   deliberately avoiding a repeat of that here).
 *   CRITICAL SELF-CAUGHT BUG, fixed same day: the first version of this
 *   rule set `display: flex` unconditionally on .cp-preview-panel. That
 *   overrides the [hidden] attribute's browser-default `display: none`
 *   — an author class selector always beats that low-specificity UA
 *   rule — so the full-screen, z-index 9999 panel and its dark backdrop
 *   were actually rendered and capturing every tap from the moment the
 *   page loaded, not just when opened. This is the exact same category
 *   of bug as this morning's nav-bar z-index collision (Appendix O) —
 *   a component's own CSS silently fighting a mechanism it depends on —
 *   and I walked straight into a version of it while writing the fix
 *   for something else. Corrected: `display` is now ONLY set on
 *   `.cp-preview-panel.is-open`, matching the working pattern already
 *   used by .wp-config-sheet (which never sets `display` on its base
 *   rule at all, letting `[hidden]` do its job unopposed).
 *   "Recommended" badge uses the existing gold token (#B8970A) — the
 *   same one used as the personal-tier accent elsewhere in the design
 *   system. Reused deliberately (one gold meaning "notable/preferred"
 *   throughout the app) rather than introducing a second gold. Contrast
 *   checked: #B8970A background / #1A1200 text = 6.6:1, clears AA (and
 *   is close to AAA) for this badge's small text.
 *
 * 23 Jun 2026 v2
 * Coach proposal view styles. v2 adds door reframe, bypass door,
 * return context door, missed session offer, post-choice acknowledgement.
 *
 * Three doors are genuinely different — not intensity variants.
 * Visual treatment reflects that: doors have equal weight.
 * No visual hierarchy between them. No preferred option.
 *
 * WCAG 2.2 AA:
 *   All door buttons: 44px min height. Focus ring 2px solid primary.
 *   Disabled door: aria-disabled="true" styling, no opacity-only signal.
 *   Coach text: min 16px, meets 4.5:1 on background.
 *   Bypass options: same touch target and contrast as main doors.
 *   Constraint block: role="status", visible colour + text label.
 *   Return context chips: role="group", 44px min height.
 *   Preview panel (v3): role="dialog", focus trapped, Escape closes.
 *   Preview cards: role="radio", "Recommended" conveyed via text badge
 *   and aria-label, not colour alone.
 *   prefers-reduced-motion: no transitions.
 */

/* ── View ─────────────────────────────────────────────────────────────── */

.cp-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-4);
  padding-bottom: var(--space-8);
  max-width: 600px;
  margin: 0 auto;
}

/* ── Coach block ──────────────────────────────────────────────────────── */

.cp-coach-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cp-coach-block--in-panel {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.cp-greeting {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.cp-reflection {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--leading-relaxed);
}

.cp-constraint {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-left: 4px solid #EF4444;
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.08);
}
/* fix, 04 Aug 2026: Graeme reported missing this message almost every
   time — reasonably, it was 8% background opacity with body-text-sized
   type, easy to skim past among everything else on this screen. Bumped
   opacity/border/shadow and added an icon; kept the calm, non-alarming
   colour family (this is supportive adaptation info, not an error) and
   confirmed contrast still clears WCAG AA at the new opacity. */

.cp-constraint__icon {
  font-size: var(--text-lg);
  line-height: 1;
  flex-shrink: 0;
}

.cp-constraint p {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0;
  line-height: var(--leading-relaxed);
}

.cp-proposal-intro {
  font-size: var(--text-base);
  color: var(--color-text);
  margin: 0;
  line-height: var(--leading-relaxed);
}

/* .cp-doors/.cp-door* removed 04 Aug 2026 (Phase C) — the three-doors UI
   is gone; this screen is only reached via Home's "Unsure? Coach
   decides" door now. See coach-proposal.js v18 changelog. */

/* ── Door 1 preview panel (v3 — right-slide) ─────────────────────────── */

.cp-preview-panel {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.cp-preview-panel.is-open {
  display: flex;
  justify-content: flex-end;
}

.cp-preview-panel__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

.cp-preview-panel__content {
  position: relative;
  width: 92%;
  max-width: 420px;
  height: 100%;
  background: var(--color-bg-card);
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  padding: var(--space-6) var(--space-5) var(--space-8);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transform: translateX(100%);
  transition: transform 0.25s ease;
}

.cp-preview-panel.is-open .cp-preview-panel__content {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .cp-preview-panel__content { transition: none; }
}

/* STUCK-1, 06 Sep 2026. THE PANEL COULD NOT BE LEFT.
 *
 * This button is align-self: flex-end, so it sits top-right. The escape
 * hatch is position: fixed, top-right, z-index 10000. They landed on top
 * of each other and NEITHER worked -- the hatch covered the X, and the
 * hatch's own tap went to the panel beneath it. Graeme, on device: "I
 * can't clear cache and data and get out of the coach proposal. I'm
 * genuinely stuck."
 *
 * HATCH-OVERLAP RESERVED THE CORNER ON .workout-header AND .ci-thread
 * AND STOPPED THERE. Its first draft named .cp-preview-panel__head --
 * which does not exist -- and when the gate caught that, I dropped the
 * selector instead of finding the real one. The gate asserted that every
 * gutter names a real class; it could not assert that every screen
 * needing one has it.
 *
 * The X moves left by exactly the hatch's own gutter, so the two cannot
 * overlap however either changes size.
 */
.cp-preview-panel__close {
  align-self: flex-end;
  margin-right: var(--escape-hatch-gutter);
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}

.cp-preview-panel__close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.cp-preview-panel__title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0;
}

.cp-preview-panel__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--leading-relaxed);
}

/* ARC-VISIBLE, 16 Sep 2026. "Based on your arc" under the subheading.
   Graeme: "The coach doesn't explicitly say that it's using the arc, at
   least not enough to notice."

   Quieter than the subheading and set apart by a rule rather than by
   colour alone (1.4.1) -- it is the product naming its own machinery,
   not the coach speaking, and it should read as a caption rather than
   as another instruction. */
.cp-preview-panel__arc {
  margin: var(--space-2) 0 var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* ============================================================
   ASK-KIND, 16 Sep 2026. "Something else today?"

   Graeme asked three times how the coach knew he wanted core
   rather than cardio or strength. It did not — it inferred from
   the arc and never asked.

   Collapsed by default and placed BELOW the cards: the
   suggestion is still the coach's opening move and should be
   read first. This answers "not today, thanks", which is a
   different question from "which of these three".
   ============================================================ */

.cp-kind { margin: var(--space-4) 0 var(--space-2); }

.cp-kind__summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--color-primary);
  list-style: none;
}

.cp-kind__summary::-webkit-details-marker { display: none; }
.cp-kind__summary::after { content: " \25BE"; margin-left: var(--space-1); }
.cp-kind[open] .cp-kind__summary::after { content: " \25B4"; }

.cp-kind__summary:focus-visible,
.cp-kind__chip:focus-visible {
  outline: 3px solid var(--color-focus, var(--color-primary));
  outline-offset: 2px;
}

.cp-kind__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.cp-kind__chip {
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: none;
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

/* Marked by border weight and text weight as well as colour, so
   the chosen one is not carried by colour alone (1.4.1).
   aria-pressed carries it for a screen reader. */
.cp-kind__chip.is-selected {
  border-color: var(--color-primary);
  border-width: 2px;
  color: var(--color-primary);
  font-weight: var(--font-semibold);
}

.cp-kind__note {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--color-text-muted);
}

@media (prefers-contrast: more) {
  .cp-kind__chip { border-width: 2px; }
}

/* SMOOTH-P2a. The .cp-preview-card* rules (three radio cards) are gone
   with the cards. The stretch-target caption is now .cp-plan__target. */

.cp-preview-panel__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  margin-top: auto;
  padding-top: var(--space-3);
}

/* .cp-bypass* removed 04 Aug 2026 (Phase C) — the bypass row ("Help me
   build it" / "Take me to the library") is superseded by Home's direct
   doors (Cardio/Core/Strength -> session-builder, Mobility &
   Conditioning -> library). See coach-proposal.js v18 changelog. */

/* ── Return door (re-entry) ───────────────────────────────────────────── */

.cp-return-door {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cp-return-door__message {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.cp-return-door__chips {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ── Shared chip style ────────────────────────────────────────────────── */

.cp-chip {
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s, border-color 0.1s;
}

.cp-chip:hover {
  background: var(--color-bg-card);
  border-color: var(--color-primary);
}

.cp-chip:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.cp-chip--skip {
  color: var(--color-text-muted);
  font-style: italic;
}

/* ── Missed session offer ─────────────────────────────────────────────── */

.cp-missed-offer {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cp-missed-offer__line {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.cp-missed-offer__choices {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cp-missed-offer__btn {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  min-height: 56px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s, border-color 0.1s;
}

.cp-missed-offer__btn:hover {
  border-color: var(--color-primary);
  background: var(--color-bg-card);
}

.cp-missed-offer__btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.cp-missed-offer__sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-normal);
}

/* ── Post-choice acknowledgement ──────────────────────────────────────── */

.cp-acknowledgement {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  font-style: italic;
  padding: var(--space-3) 0;
  text-align: center;
  outline: none; /* focused programmatically — visible focus ring not needed here */
}

/* ── LOCATION-1, 08 Sep 2026 ─────────────────────────────────────────────
   What the coach assumed, and a way to say otherwise.

   Graeme, on a handset: "It works though. I can't change anything though
   if I wanted to." Quick build has shown its assumptions with everything
   adjustable since QUICK-BUILD; One to one handed over a session and
   offered no way to alter its length or where you are.

   Deliberately the same row shape as .sb-quick__row on the quick
   scaffold. It is the same idea -- here is what I assumed, change it --
   and a second visual language for it would be a second thing to learn. */
.cp-assumptions {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cp-assumptions__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.cp-assumptions__label {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.cp-assumptions__change {
  flex-shrink: 0;
}

/* ============================================================
   SMOOTH-P2a, 28 Sep 2026. Today's plan.
   ============================================================ */

.cp-plan__sentence {
  margin: 0;
  color: var(--color-text);
  line-height: var(--leading-relaxed);
}

.cp-plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cp-plan__title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0;
}

.cp-plan__title:focus { outline: none; }
.cp-plan__title:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.cp-plan__meta,
.cp-plan__target {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.cp-plan__group-title {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold, 600);
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
}

.cp-plan__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cp-plan__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.cp-plan__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* D-2. The name area opens the exercise. A button, so it reads as one
   control and takes the keyboard; it keeps the row's look. */
.cp-plan__open {
  position: relative;
  /* v15: the basis grows with the text, so at large text the name takes a
     line of its own under the figure rather than splitting a word. */
  flex: 1 1 calc(12rem * var(--user-text-scale, 1));
  min-height: 44px;
  margin: 0;
  padding: 0 calc(18px + var(--space-2)) 0 0;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  justify-content: center;
}

.cp-plan__open:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: var(--radius-sm, 4px);
}

.cp-plan__chev {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
}

/* D-2. The exercise sheet, over the plan. */
.cp-xprev__backdrop {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgba(2, 6, 23, 0.6);
}

.cp-xprev {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 72px;
  z-index: 2;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-bg-card);
  color: var(--color-text);
  border-top: 1px solid var(--color-border);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  animation: cp-xprev-up 200ms ease-out;
}

@keyframes cp-xprev-up {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cp-xprev { animation: none; }
}

.cp-xprev__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}

.cp-xprev__name {
  margin: 0;
  font-size: var(--text-2xl, 1.5rem);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.cp-xprev__name:focus { outline: none; }
.cp-xprev__name:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.cp-xprev__dose {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.cp-xprev__close {
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font-size: var(--text-lg);
  cursor: pointer;
}

.cp-xprev__close:focus-visible,
.cp-xprev__video:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.cp-xprev__body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cp-xprev__part p,
.cp-xprev__part ul,
.cp-xprev__part ol {
  margin: 0;
  line-height: 1.5;
}

.cp-xprev__part ul,
.cp-xprev__part ol {
  padding-left: 1.25rem;
}

.cp-xprev__part li + li { margin-top: var(--space-1); }

.cp-xprev__h {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base, 1rem);
  font-weight: 600;
}

/* The same rose box as the player's What to watch out for. */
.cp-xprev__part--hazard {
  padding: var(--space-3);
  border-left: 4px solid var(--color-danger);
  border-radius: var(--radius-md, 8px);
  background: var(--color-danger-light);
}

.cp-xprev__caution { font-weight: 600; margin-bottom: var(--space-2) !important; }

.cp-xprev__video {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--color-primary);
}

.cp-xprev__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.cp-xprev__actions--one { grid-template-columns: 1fr; }

.cp-xprev__actions .btn { min-height: 48px; }

@media (forced-colors: active) {
  .cp-xprev { border: 1px solid CanvasText; }
  .cp-xprev__part--hazard { border-left-width: 6px; }
}

.cp-plan__name {
  font-weight: var(--font-semibold, 600);
  color: var(--color-text);
  overflow-wrap: break-word;
  font-size: min(1em, 7vw);   /* v16: "Strengthening" at text 2 on a 320 px phone */
}

.cp-plan__dose,
.cp-plan__last {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.cp-plan__why {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.4;
}

.cp-plan__swap {
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
}

.cp-different {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
}

.cp-different__summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: var(--font-semibold, 600);
  color: var(--color-text);
}

.cp-different__summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.cp-different__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
}

.cp-different__label {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.cp-different__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cp-different__btn { min-height: 44px; }

.cp-different__btn[aria-pressed="true"] {
  border-width: 2px;
  font-weight: var(--font-semibold, 600);
}

.cp-dock {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.cp-dock__label {
  margin: 0;
  font-weight: var(--font-semibold, 600);
  color: var(--color-text);
}

.cp-dock__lines {
  margin: 0;
  padding-left: var(--space-5);
  color: var(--color-text);
  line-height: 1.5;
}

.cp-dock__line {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.5;
}


/* SMOOTH-P2e. Their planned session leads; the coach's plan follows. */
.cp-planned {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.cp-planned__title { margin: 0; font-weight: 700; color: var(--color-text); font-size: var(--text-lg); }
.cp-planned__or { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-secondary); }

/* SMOOTH-P2e. A good day is offered more, in one line. */
.cp-offer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border-left: 3px solid var(--color-primary);
  background: var(--color-surface);
  border-radius: var(--radius-md);
}
.cp-offer__text { margin: 0; color: var(--color-text); line-height: 1.5; }
.cp-offer .btn { min-height: 44px; }

/* ============================================================
   W3-21, 30 Sep 2026. One-tap choices, and Swap as a list.
   ============================================================ */

.cp-assumptions__choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}

.cp-choice { min-height: 44px; min-width: 44px; }

.cp-choice[aria-pressed="true"] {
  border-width: 2px;
  font-weight: var(--font-semibold, 600);
}

.cp-swap {
  flex-basis: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: var(--space-2);
}

.cp-swap__label {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-2);
}

.cp-swap__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cp-swap__pick {
  width: 100%;
  white-space: normal;
  flex-wrap: wrap;
  min-height: 44px;
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  text-align: left;
}

.cp-swap__name { font-weight: var(--font-semibold, 600); flex: 1 1 10em; min-width: 0; font-size: min(1em, 6.4vw); }

.cp-swap__dose {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  flex-shrink: 0;
}

/* ============================================================
   A-4 SHARED-POLISH, 12 Oct 2026 (both tiers). Today's plan:
   "‹ Home" top left in place of the ✕; Where, Length and Focus as
   a row of pills. Each button's name still says which it is
   ("Length: 30 min. Change"), so the visible labels can go.
   ============================================================ */
.cp-preview-panel__close {
  align-self: flex-start;
  margin-right: 0;
  margin-left: calc(-1 * var(--space-2));
  padding: 0 var(--space-2);
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.cp-assumptions {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}
.cp-assumptions__row { display: contents; }
.cp-assumptions__label { display: none; }
.cp-assumptions__change {
  min-height: 44px;
  border-radius: 999px;
  padding: 0 var(--space-4);
}
.cp-assumptions__change::after {
  content: "\25BE";
  margin-left: var(--space-2);
  opacity: 0.75;
}
.cp-assumptions__change[aria-expanded="true"]::after { content: "\25B4"; }
.cp-assumptions__choices { flex-basis: 100%; }