/*
 * css/layouts/onboarding-additions.css
 * 31 Oct 2026 v12
 *
 * v12 - STAGE PATH Session 9 (close checks, axe; both tiers: a fault). A
 *   chosen plan card (and a chosen Suggested for you) sat on the raised ground, where its teal line and the
 *   first-four-weeks hint measured 4.4:1; it sits on the card ground now.
 *
 * 22 Aug 2026 v11
 * CHOOSER-1. Two spacing classes for the post-onboarding programme
 * chooser. The plan cards themselves are unchanged and shared.
 *
 * 29 Jun 2026 v10
 *
 * v10 (29 Jun 2026)
 *   — THE ACTUAL BUG, finally correctly located. Every previous fix
 *     (v6–v9) targeted spacing ABOVE the Continue button — between the
 *     chip content and the footer. That was never what was reported.
 *     The real gap is BELOW the button, between it and the "X selected"
 *     hint text. Confirmed via a direct DevTools paste of the real
 *     rendered HTML, showing <p class="onboarding-footer__hint"> — an
 *     element with no CSS rule anywhere in this file, in any version,
 *     across six rounds of fixes. Added margin-top directly to it.
 *
 * v9 (29 Jun 2026) — wrong target, kept for history.
 *   — S1, real root cause finally confirmed against onboarding.css and
 *     variables.css directly. .onboarding-footer (the element goals.js
 *     actually renders) had NO CSS rule anywhere in the codebase — it
 *     was never sticky or fixed, as v7/v8 assumed; it simply had zero
 *     styling at all. Every previous attempt at this fix was solving a
 *     problem that didn't exist the way it was diagnosed. Replaced with
 *     a direct, real rule for .onboarding-footer itself, plus a sane
 *     (not overcorrected) bottom padding on .goals-categories.
 *
 * v8 (29 Jun 2026) — superseded by v9, kept for history.
 *   — S1 still cramped after v7 (confirmed from screenshot review).
 *     v7 used calc(var(--space-6) * 2) for the bottom padding — but
 *     this file has no visibility into base/variables.css, so the
 *     actual resolved pixel value of --space-6 was unknown and may
 *     have been small enough that doubling it still wasn't sufficient.
 *     Replaced with an explicit 96px — generous, certain, no dependency
 *     on an unseen token's actual size.
 *
 * v7 (29 Jun 2026)
 *   — S1: v6's Continue-button spacing fix had no visible effect
 *     (confirmed from screenshot review) — the sibling-selector approach
 *     assumed .onboarding-footer wasn't sticky/fixed, but spacing on a
 *     *following* sticky/fixed element does nothing for the element
 *     *before* it. Fixed properly: substantial bottom padding directly
 *     on .goals-categories itself, which guarantees clearance regardless
 *     of how the footer is positioned. Consolidated the two separate
 *     .goals-categories rule blocks from v6 back into one.
 *   — S2: .condition-chip, .conditions-chip-grid, .conditions-group,
 *     .conditions-group-heading had NO styling anywhere in this file —
 *     conditions.js was rendering with unstyled default buttons, which
 *     is why the chips looked visually inconsistent against goals-chip
 *     and hard-before-chip elsewhere in the flow. This was never a fade
 *     or colour-contrast bug — it was a missing stylesheet. Added full
 *     styling matching the existing chip visual language.
 *
 * v6 (29 Jun 2026)
 *   — Goals chip grid spacing fix attempt (superseded by v7 above —
 *     kept in history for context, see v7 note on why it didn't work).
 *   — Goals chip grid spacing fix (S-OB-1, reported from screenshot review).
 *     The Continue button and "11 selected" count were rendering hard
 *     against the last chip in the "Getting back to it" category, with
 *     no breathing room before the sticky footer. Root cause: the chip
 *     grid had no bottom margin, and the gap between .goals-categories
 *     and .onboarding-actions/.onboarding-footer (wherever that lives)
 *     was relying entirely on whatever spacing the footer container
 *     itself provides — which, judging by the screenshot, isn't enough
 *     when the last category in the list happens to wrap to two rows.
 *     Added explicit bottom padding to .goals-categories and top
 *     padding plus a visual separator above the action area, scoped
 *     narrowly so this can't affect any other onboarding screen that
 *     shares the generic .onboarding-actions/.onboarding-footer classes.
 *
 * v5 (28 Jun 2026)
 *   — arrival.js: .onboarding-view--arrival, .arrival-content,
 *     .arrival-coach-bubble, .arrival-coach-avatar, .arrival-coach-avatar__img,
 *     .arrival-coach-message, .arrival-coach-message__para, .arrival-actions.
 *   — hard-before.js: .onboarding-view--hard-before, .hard-before-coach-opening,
 *     .hard-before-coach-question, .hard-before-coach-sub, .hard-before-chips,
 *     .hard-before-chip, .hard-before-chip--selected, .hard-before-acknowledgement,
 *     .hard-before-ack-text, .hard-before-skip.
 *   — reflection.js: .onboarding-view--reflection, .reflection-content,
 *     .reflection-part, .reflection-actions.
 *
 * v4 (26 Jun 2026)
 *   — Frequency screen: .freq-grid, .freq-card, selected state with teal left border.
 *   — Plan selection: .plan-list, .plan-card, .plan-badge (#B8970A gold),
 *     recommended card gold border, selected indicator circle.
 *
 * v3 (26 Jun 2026)
 *   — Facility cards, equipment accordions, preset card, section headings.
 *
 * v2 (26 Jun 2026)
 *   — .chip-group, .chip, equipment settings chips.
 *
 * v1 (25 Jun 2026)
 *   — Goals chip grid, lifestyle chips, onboarding/complete journey card.
 */

/* ── Generic chip group (about.js — age band + gender) ─────────── */

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  min-height: 44px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.chip.selected,
.chip[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-primary);
  font-weight: var(--font-semibold);
}

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

/* ── Equipment — facility list section heading ───────────────────── */

.equip-section-heading {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  font-weight: var(--font-semibold);
  color: var(--color-primary);
  text-transform: uppercase;
  margin: var(--space-5) 0 var(--space-3);
}

/* ── Equipment — facility cards ─────────────────────────────────── */

.equip-facility-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.equip-facility-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4);
  min-height: 72px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-left: 3px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease, border-left-color 0.15s ease;
}

.equip-facility-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.equip-facility-card--active {
  border-left-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-elevated));
}

.equip-facility-icon {
  font-size: calc(1.75rem * var(--user-text-scale, 1));
  flex-shrink: 0;
  line-height: 1;
  width: 2.25rem;
  text-align: center;
}

.equip-facility-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.equip-facility-label {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  line-height: 1.2;
}

.equip-facility-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.3;
}

.equip-facility-chevron {
  font-size: calc(1.5rem * var(--user-text-scale, 1));
  color: var(--color-text-muted);
  flex-shrink: 0;
  line-height: 1;
}

.equip-facility-check {
  font-size: calc(1.1rem * var(--user-text-scale, 1));
  color: var(--color-primary);
  flex-shrink: 0;
  font-weight: var(--font-bold);
}

/* ── Equipment — preset card ─────────────────────────────────────── */

.equip-preset-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

.equip-preset-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.equip-preset-card__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0;
}

.equip-preset-card__sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
}

/* ── Equipment — accordion list ──────────────────────────────────── */

.equip-accordion-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.equip-accordion {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-elevated);
}

.equip-accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-4);
  min-height: 52px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: var(--space-3);
}

.equip-accordion__header:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  border-radius: var(--radius-lg);
}

.equip-accordion__heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  flex: 1;
  min-width: 0;
}

.equip-accordion__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.equip-cat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 var(--space-1);
  background: var(--color-primary);
  color: var(--color-bg);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  line-height: 1;
}

.equip-accordion__chevron {
  font-size: calc(1.25rem * var(--user-text-scale, 1));
  color: var(--color-text-muted);
  line-height: 1;
  transition: transform 0.18s ease;
  display: inline-block;
}

.equip-accordion--open .equip-accordion__chevron {
  transform: rotate(90deg);
}

.equip-accordion--open {
  border-color: var(--color-primary);
}

.equip-accordion--open .equip-accordion__header {
  border-bottom: 1px solid var(--color-border);
}

.equip-accordion__body {
  padding: var(--space-3) var(--space-4) var(--space-4);
}

/* ── Equipment — wrapping chip layout (inside accordion) ─────────── */

.equip-chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.equip-item-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.equip-item-chip--selected,
.equip-item-chip[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-primary);
  font-weight: var(--font-semibold);
}

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

/* ── Goals chip grid (onboarding/goals.js v2) ──────────────────── */

.goals-categories {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: 0 var(--space-4);
  /* v9: confirmed against the real onboarding.css — there is no
     .onboarding-footer rule anywhere in the codebase at all. goals.js
     renders <footer class="onboarding-footer"> but nothing styles that
     class, so it sits in plain document flow with zero special
     positioning — it was never sticky or fixed, which means every
     previous attempt at this fix (v6, v7, v8) was solving a problem
     that didn't exist the way it was diagnosed. The real .onboarding-
     actions class (used by most other onboarding screens, though not
     by name in goals.js's own footer markup) has padding-top: 32px
     (--space-6) — genuinely just a modest gap by design, reading as
     visually tight against a teal button on a dark background. 40px
     here is enough to give clear breathing room without the previous
     96px overcorrection, now that the actual layout is confirmed. */
  padding-bottom: 40px;
}

.goals-category {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.goals-category__heading {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.goals-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.goals-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: border-color 0.1s, background 0.1s, color 0.1s;
  text-align: left;
}

.goals-chip--selected {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-primary);
}

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

.goals-chip__icon {
  font-size: var(--text-base);
  flex-shrink: 0;
}

.goals-chip__label {
  font-size: var(--text-sm);
  line-height: 1.3;
}

/* v9: .onboarding-footer is the element goals.js actually renders
   (<footer class="onboarding-footer">) — confirmed against the real
   onboarding.css that this class has NO rule anywhere in the codebase.
   It was never sticky/fixed; it simply had no styling at all, sitting
   in plain document flow with only whatever default margin a bare
   <footer> element gets from the browser. Styled directly now, giving
   it real top spacing and a hairline separator from the chip content
   above it — the actual fix, now that the real cause is confirmed. */
.onboarding-footer {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* v10: THE ACTUAL BUG. Every previous round (v6 through v9) fixed
   spacing ABOVE the footer/button — between the chip content and the
   Continue button. That was never the reported problem. The real gap
   is BELOW the button, between it and the "X selected" hint text
   (<p class="onboarding-footer__hint">) — confirmed directly from a
   DevTools paste of the real rendered HTML. That element has never had
   any CSS rule anywhere in this file, in any previous version. With no
   margin-top of its own, it sits right against the button's bottom
   edge with only browser/reset-stylesheet default spacing, which is
   close to zero. Fixed at the actual element this time. */
.onboarding-footer__hint {
  margin-top: var(--space-2);
  text-align: center;
}

/* ── Conditions chip grid (onboarding/conditions.js v1.1) ────────
   S2: these classes had NO styling anywhere in this file before now —
   conditions.js was rendering with default/unstyled buttons, which is
   why the chips looked visually inconsistent against goals-chip and
   hard-before-chip elsewhere in the flow. Built to match the same
   visual language: same border-radius, same selected-state treatment
   (filled background + primary border colour), same 44px minimum tap
   target. This was never a fade/colour bug — it was a missing stylesheet. */

.conditions-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.conditions-group-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.conditions-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.condition-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.condition-chip.selected,
.condition-chip[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-primary);
  font-weight: var(--font-semibold);
}

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



.lifestyle-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
}

.lifestyle-group:first-of-type {
  border-top: none;
  padding-top: 0;
}

/* ── CAPABILITY SCREEN (CAP-1, 11 Aug 2026) ─────────────────────────────
   Set apart from the chip groups above it so it reads as its own short
   section rather than three more questions on a long form. Quiet, not
   flagged: an alert treatment would make four questions about chairs and
   floors feel like an assessment, which is exactly what the copy works
   to avoid.
   Contrast measured: --color-text-muted on --color-bg is 8.36:1, AAA.
   ──────────────────────────────────────────────────────────────────── */

.lifestyle-capability {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-light);
}

.lifestyle-capability__intro {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.lifestyle-capability__note {
  margin: var(--space-4) 0 var(--space-6);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.lifestyle-group__heading {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0;
}

.lifestyle-group__sub {
  /* C1, 12 Aug 2026. The reason for asking, under the question itself.
     --color-text-secondary on --color-bg measures 8.44:1 after A11Y-1,
     so it is quieter than the heading without being a muted grey that
     somebody would struggle to read -- which matters more here than
     anywhere on this screen, since this line is the reassurance. */
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: var(--space-1) 0 var(--space-2);
  max-width: 46ch;
}

.lifestyle-group__optional {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-normal);
}

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

.lifestyle-chip {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  min-height: 52px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  text-align: left;
  line-height: var(--leading-relaxed);
  transition: border-color 0.1s, background 0.1s, color 0.1s;
}

.lifestyle-chip--selected {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-text);
}

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

.lifestyle-returning-after {
  overflow: hidden;
  transition: max-height 0.2s ease;
}

/* ── Journey outline card (onboarding/complete.js) ──────────────── */

.onboarding-view--complete {
  gap: var(--space-5);
}

.complete-journey-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0 var(--space-4);
}

.complete-journey-card__programme {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.complete-journey-card__icon {
  font-size: calc(2rem * var(--user-text-scale, 1));
  flex-shrink: 0;
  line-height: 1;
}

.complete-journey-card__programme-name {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0;
}

.complete-journey-card__programme-tagline {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0;
}

.complete-journey-card__detail {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.complete-journey-card__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.complete-journey-card__stat-number {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  line-height: 1;
}

.complete-journey-card__stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.complete-journey-card__phase {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.complete-journey-card__phase-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.complete-journey-card__phase-desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: var(--leading-relaxed);
}

.complete-journey-card__coach-note {
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.complete-journey-card__coach-note p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: var(--leading-relaxed);
  font-style: italic;
}

/* ── Frequency screen (onboarding/frequency.js v1) ──────────────── */

.freq-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.freq-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4);
  min-height: 64px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-left: 3px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s ease, background 0.12s ease, border-left-color 0.12s ease;
}

.freq-card--selected {
  border-color: var(--color-primary);
  border-left-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-elevated));
}

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

.freq-card__number {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  width: 2rem;
  flex-shrink: 0;
  text-align: center;
  line-height: 1;
}

.freq-card__label {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  flex-shrink: 0;
  min-width: 4.5rem;
}

.freq-card__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.3;
}

/* ── Plan selection screen (onboarding/plan-select.js v1) ────────── */

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

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--color-bg-elevated);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  transition: border-color 0.15s ease, background 0.15s ease;
}

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

.plan-card--selected {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
}

.plan-card--recommended {
  border-color: #B8970A;
}

.plan-card--recommended.plan-card--selected {
  border-color: #B8970A;
  background: color-mix(in srgb, #B8970A 6%, var(--color-surface));
}

.plan-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-4);
  background: #B8970A;
  color: #1A1A1A;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  width: 100%;
}

.plan-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}

.plan-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.plan-card__icon {
  font-size: calc(1.75rem * var(--user-text-scale, 1));
  flex-shrink: 0;
  line-height: 1;
}

.plan-card__titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.plan-card__name {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}

.plan-card__weekly {
  font-size: var(--text-sm);
  color: var(--color-primary);
  margin: 0;
  font-weight: var(--font-medium);
}

.plan-card__duration {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  flex-shrink: 0;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2px var(--space-2);
}

.plan-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: var(--leading-relaxed);
}

.plan-card__phase-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
  font-style: italic;
  line-height: 1.4;
}

.plan-card__select-indicator {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 1.25rem;
  height: 1.25rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  color: var(--color-primary);
  font-weight: var(--font-bold);
  background: var(--color-bg-card);
  transition: border-color 0.12s ease, background 0.12s ease;
}

.plan-card--selected .plan-card__select-indicator {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-bg);
}

.plan-card--recommended .plan-card__select-indicator {
  border-color: #B8970A;
}

.plan-card--recommended.plan-card--selected .plan-card__select-indicator {
  background: #B8970A;
  border-color: #B8970A;
  color: #1A1A1A;
}

/* ── Beat 1 — Arrival (onboarding/arrival.js v1) ────────────────── */

.onboarding-view--arrival {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  padding: var(--space-6) var(--space-4) var(--space-4);
}

.arrival-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: var(--space-6);
}

.arrival-coach-bubble {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.arrival-coach-avatar {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 2px;
}

.arrival-coach-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-full);
}

.arrival-coach-message {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 0 var(--radius-xl) var(--radius-xl) var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  flex: 1;
  min-width: 0;
}

.arrival-coach-message__para {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-3);
}

.arrival-coach-message__para:last-child {
  margin-bottom: 0;
  color: var(--color-primary);
  font-weight: var(--font-medium);
}

.arrival-actions {
  padding-top: var(--space-4);
}

/* ── Beat 2 — Hard Before (onboarding/hard-before.js v1) ────────── */

.onboarding-view--hard-before {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: var(--space-5) var(--space-4) var(--space-4);
}

.hard-before-coach-opening {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-5);
}

.hard-before-coach-question {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-2);
  line-height: var(--leading-snug);
}

.hard-before-coach-sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--leading-relaxed);
}

.hard-before-chips {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.hard-before-chip {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  min-height: 52px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-left: 3px solid transparent;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  text-align: left;
  line-height: var(--leading-relaxed);
  transition: border-color 0.12s ease, background 0.12s ease,
              color 0.12s ease, border-left-color 0.12s ease;
}

.hard-before-chip--selected,
.hard-before-chip[aria-pressed="true"] {
  border-color: var(--color-primary);
  border-left-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-elevated));
  color: var(--color-text);
  font-weight: var(--font-medium);
}

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

.hard-before-acknowledgement {
  min-height: 2.5rem;
  padding: var(--space-3) 0 var(--space-2);
}

.hard-before-ack-text {
  font-size: var(--text-sm);
  color: var(--color-primary);
  font-style: italic;
  margin: 0;
  line-height: var(--leading-relaxed);
}

.hard-before-skip {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ── Beat 3 — Reflection (onboarding/reflection.js v1) ──────────── */

.onboarding-view--reflection {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: var(--space-6) var(--space-4) var(--space-4);
}

.reflection-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
}

.reflection-part {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
  margin: 0;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
}

.reflection-part:first-child {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--color-text);
}

.reflection-actions {
  padding-top: var(--space-4);
}

/* ── CHOOSER-1, 22 Aug 2026 ──────────────────────────────────────────
   Post-onboarding programme chooser (views/programme-select.js).
   Spacing only -- the plan cards above are shared with onboarding and
   must look identical in both places, because they are the same three
   options and a person may well see them twice. */

.programme-select-body {
  padding: 0 var(--space-4) var(--space-5);
}

.programme-select-actions {
  padding: 0 var(--space-4) var(--space-6);
}