/* onboarding.css - Onboarding flow styles
   04 Aug 2026 v2

   v2 — .onboarding-view's min-height fix (see rule below) — never
   subtracted --nav-height, causing the Continue button to land under
   the fixed bottom nav on every onboarding screen. Found via
   screenshot, Settings > Edit conditions. No prior version header
   existed on this file; added now. */

/* ============================================
   ONBOARDING VIEW CONTAINER
   ============================================ */

.onboarding-view {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--content-padding) * 2 - var(--nav-height));
  min-height: calc(100dvh - var(--content-padding) * 2 - var(--nav-height));
  /* fix, 04 Aug 2026: this never subtracted --nav-height (72px), so the
     flex column claimed nearly full viewport height on its own, before
     #main-content's own padding-bottom (which reserves space for the
     fixed nav) even came into play. .onboarding-actions' Continue
     button sits via margin-top:auto at the bottom of THIS box, so it
     landed right at the visual viewport edge — under the nav bar —
     without needing to scroll to see it, on every onboarding screen
     (Conditions, Goals, Equipment, Plan Select, etc. all share this
     class). Found via screenshot, Settings > Edit conditions. */
}

.onboarding-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  min-height: 48px;
}

.onboarding-content {
  flex: 1;
}

.onboarding-content h1 {
  margin-bottom: var(--space-2);
}

.onboarding-actions {
  margin-top: auto;
  padding-top: var(--space-6);
  padding-bottom: var(--space-4);
}

/* ============================================
   PROGRESS DOTS
   ============================================ */

.progress-dots {
  display: flex;
  gap: var(--space-2);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  transition: all var(--transition-normal);
}

.dot.active {
  width: 24px;
  background: var(--color-primary);
}

.dot.completed {
  background: var(--color-primary);
}

/* ============================================
   COACH GREETING (Welcome & Complete screens)
   ============================================ */

.coach-greeting {
  text-align: center;
  margin-bottom: var(--space-6);
}

.coach-avatar {
  width: 100px;
  height: 100px;
  margin: 0 auto var(--space-5);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
}

.coach-avatar img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.completion-icon {
  font-size: calc(4rem * var(--user-text-scale, 1));
  margin-bottom: var(--space-4);
}

.coach-greeting h1 {
  margin-bottom: var(--space-3);
}

.coach-greeting .lead {
  color: var(--color-text-secondary);
  max-width: 300px;
  margin: 0 auto;
  line-height: var(--leading-relaxed);
}

/* ============================================
   WELCOME MESSAGE CARD
   ============================================ */

.welcome-message {
  text-align: center;
  margin-bottom: var(--space-6);
}

.welcome-message p {
  margin-bottom: var(--space-2);
}

.welcome-message p:last-child {
  margin-bottom: 0;
  color: var(--color-text-secondary);
}

/* ============================================
   FEATURES LIST
   ============================================ */

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

.feature {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
}

.feature-icon {
  font-size: calc(1.5rem * var(--user-text-scale, 1));
  flex-shrink: 0;
}

.feature-text {
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

/* ============================================
   INPUT FIELDS
   ============================================ */

.input-group {
  margin: var(--space-6) 0;
}

.input-field {
  width: 100%;
  padding: var(--space-4);
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  transition: all var(--transition-normal);
  color-scheme: dark;
}

.input-field:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-glow);
}

.input-field::placeholder {
  color: var(--color-text-muted);
  font-weight: var(--font-normal);
}

/* ============================================
   SELECTION GRIDS
   ============================================ */

.goals-grid,
.conditions-grid,
.equipment-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.goal-option,
.condition-option,
.equipment-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  text-align: left;
  width: 100%;
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.goal-option:hover,
.condition-option:hover,
.equipment-option:hover {
  border-color: var(--color-border);
  background: var(--color-bg-hover);
}

.goal-option.selected,
.condition-option.selected,
.equipment-option.selected {
  border-color: var(--color-primary);
  background: rgba(45, 212, 191, 0.1);
}

.goal-icon,
.condition-icon,
.equipment-icon {
  font-size: calc(1.5rem * var(--user-text-scale, 1));
  flex-shrink: 0;
  width: 40px;
  text-align: center;
}

.goal-text,
.condition-text {
  color: var(--color-text);
  font-weight: var(--font-medium);
  flex: 1;
}

.equipment-option {
  flex-wrap: wrap;
}

.equipment-text {
  color: var(--color-text);
  font-weight: var(--font-medium);
  flex: 1;
}

.equipment-desc {
  width: 100%;
  padding-left: calc(40px + var(--space-3));
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* ============================================
   SUMMARY CARD
   ============================================ */

.summary-card {
  margin-top: var(--space-4);
}

.summary-card h3 {
  margin-bottom: var(--space-3);
  color: var(--color-text);
}

.summary-card p {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}

.summary-card p:last-child {
  margin-bottom: 0;
}

/* ============================================
   CENTERED CONTENT
   ============================================ */

.main-content.centered .onboarding-view {
  justify-content: center;
}

/* ============================================
   TEXT UTILITIES FOR ONBOARDING
   ============================================ */

.text-center {
  text-align: center;
}

/* ============================================
   FORM SECTIONS
   ============================================ */

.form-section {
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.form-label .text-muted {
  font-weight: var(--font-normal);
}

/* ============================================
   WEIGHT INPUT WITH UNIT SELECTOR
   ============================================ */

.input-with-unit {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.input-with-unit .input-field {
  flex: 1;
}

.unit-select {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  cursor: pointer;
  min-width: 80px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394A3B8' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.unit-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-glow);
}

.unit-select option {
  background: var(--color-bg-card);
  color: var(--color-text);
  padding: var(--space-2);
}

.unit-display {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  min-width: 60px;
  text-align: center;
}

/* ============================================
   RADIO GROUPS
   ============================================ */

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

.radio-group.horizontal {
  flex-direction: row;
  flex-wrap: wrap;
}

.radio-group.horizontal .radio-option {
  flex: 1;
  min-width: 80px;
  text-align: center;
  justify-content: center;
}

.radio-option {
  padding: var(--space-3) var(--space-4);
  text-align: left;
}

.radio-option.compact {
  padding: var(--space-3) var(--space-4);
}

.stacked-option {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.option-label {
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.option-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ============================================
   COACH MESSAGE CARD
   ============================================ */

.coach-message-card {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.coach-message-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
  background: var(--color-bg-card);
}

.coach-message-text {
  flex: 1;
}

.coach-message-text p {
  margin-bottom: var(--space-2);
}

.coach-message-text p:last-child {
  margin-bottom: 0;
}

/* ============================================
   SUMMARY CARD (Complete screen)
   ============================================ */

.summary-card {
  margin-top: var(--space-4);
}

.summary-card h3 {
  text-align: center;
  margin-bottom: var(--space-4);
  color: var(--color-text);
}

.summary-row {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
  text-align: center;
  line-height: var(--leading-relaxed);
}

.summary-row:last-child {
  margin-bottom: 0;
}

.summary-label {
  color: var(--color-primary);
  font-weight: var(--font-semibold);
}

.summary-value {
  color: var(--color-text);
}

/* ============================================
   HIDDEN UTILITY
   ============================================ */

.hidden {
  display: none !important;
}

/* ============================================
   SETTINGS PAGE
   ============================================ */

/* Settings Row */
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
}

.settings-label {
  color: var(--color-primary);
  font-weight: var(--font-semibold);
}

.settings-value {
  color: var(--color-text);
}

/* Card List spacing */
.card-list .card {
  margin-bottom: var(--space-3);
}

.card-list .card:last-of-type {
  margin-bottom: 0;
}

/* ============================================
   WELCOME / CONSENT SCREEN
   ============================================ */

.onboarding-welcome {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.onboarding-welcome-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: var(--space-8);
}

.welcome-coach-icon {
  margin-bottom: var(--space-5);
}

.welcome-coach-img {
  border-radius: var(--radius-xl);
  display: block;
}

.welcome-heading {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-5);
}

.welcome-coach-text {
  text-align: left;
  max-width: 100%;
  margin-bottom: var(--space-5);
}

.welcome-coach-text p {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
}

.welcome-coach-text p:last-child {
  margin-bottom: 0;
}

.welcome-pillars {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  margin-bottom: var(--space-5);
}

.welcome-pillar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
}

.welcome-pillar-icon {
  font-size: calc(1.25rem * var(--user-text-scale, 1));
  flex-shrink: 0;
}

.welcome-pillar-text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-align: left;
  line-height: var(--leading-normal);
}

/* Consent text above Start button */
.welcome-consent-text {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: var(--space-3);
  line-height: var(--leading-relaxed);
}

/* Inline link button — used in consent text */
.btn-inline-link {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.btn-inline-link:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================
   ONBOARDING COACH LINE
   Appears below h1 on each onboarding step
   ============================================ */

.onboarding-coach-line {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}

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


/* ============================================
   COACH VOICE — VISUAL DISTINCTION
   Teal left border makes coach voice read as
   a distinct presence, not just body text.
   Applied to: onboarding coach lines,
   welcome coach text, card-coach blocks.
   ============================================ */

.onboarding-coach-line {
  border-left: 3px solid var(--color-primary);
  background: rgba(45, 212, 191, 0.06);
}

.welcome-coach-text {
  border-left: 3px solid var(--color-primary);
  padding-left: var(--space-4);
  background: rgba(45, 212, 191, 0.06);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  padding-right: var(--space-3);
}


/* ============================================
   CONDITIONS ONBOARDING — GROUPED CHIPS
   ============================================ */

.conditions-group {
  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-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
}

.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);
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--color-text-secondary);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  min-height: 44px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.condition-chip.selected,
.condition-chip[aria-pressed="true"] {
  background: rgba(45, 212, 191, 0.12);
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: var(--font-medium);
}

.condition-chip:hover:not(.selected) {
  background: var(--color-bg-hover);
  border-color: var(--color-border);
  color: var(--color-text);
}

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

/* ── CR-3, 06 Sep 2026. Condition caveat ────────────────────────────────
   Shown when a declared condition changes what the app will offer in a
   way the person would otherwise notice and misread (today: only
   hypermobility, where 30 stretches are withheld).

   Deliberately NOT styled as a warning or an alert. It is not a hazard
   notice and it is not about the person -- it is the coach saying what
   it is doing and where its competence stops. Amber and red would read
   as "something is wrong with you", which is the opposite of the point.

   Contrast: --color-text on --color-surface-2 is the pairing checked by
   tools/contrast-check.mjs; do not swap in a muted token here, since
   this is body copy the person is meant to read, not a footnote. */
.conditions-caveat {
  margin: var(--space-4) 0 0;
  padding: var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-accent, var(--color-text-secondary));
  color: var(--color-text);
  font-size: var(--text-sm);   /* NOT a raw rem: --user-text-scale must reach it */
  line-height: 1.6;
  white-space: pre-line;   /* the copy carries its own paragraph breaks */
}

.conditions-caveat[hidden] {
  display: none;
}