/*
 * css/components/gym-programme.css
 * 11 Aug 2026 v2
 *
 * v2 — PT-4. Styles for the lift note (.gp-lift*). Deliberately plain:
 *   no accent colour, no badge, no emphasis on the number. Locked
 *   principle P4 — the app may display load, the coach never interprets
 *   it. Inputs 44px min (WCAG 2.2 AA SC 2.5.8).
 *
 * 25 Jun 2026 v1
 *
 * Styles for gym-programme.js v2 — session, glance, and reflection views.
 */

/* ── Session ─────────────────────────────────────────────────── */
.gp-session { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4) var(--space-4) var(--space-8); }

.gp-session-header { display: flex; flex-direction: column; gap: var(--space-1); }
.gp-session-header__meta { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.gp-session-header__programme,
.gp-session-header__week,
.gp-session-header__type { font-size: var(--text-xs); color: var(--color-text-muted); }
.gp-session-header__focus { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--color-text); }

/* ── Exercise cards ──────────────────────────────────────────── */
.gp-exercise-list { display: flex; flex-direction: column; gap: var(--space-4); }

.gp-exercise-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.gp-exercise-card--caution { border-left: 3px solid #F59E0B; }
.gp-exercise-card--done { opacity: 0.5; }

.gp-exercise-card__name { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-text); margin: 0; }

.gp-exercise-card__meta { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.gp-exercise-card__chip {
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-elevated);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.gp-exercise-card__caution {
  font-size: var(--text-xs);
  color: #F59E0B;
  padding: var(--space-2) var(--space-3);
  background: rgba(245, 158, 11, 0.1);
  border-radius: var(--radius-md);
}

.gp-exercise-card__section { display: flex; flex-direction: column; gap: var(--space-1); }
.gp-exercise-card__section-label { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 0; }
.gp-exercise-card__setup-list,
.gp-exercise-card__cues-list { margin: 0; padding-left: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.gp-exercise-card__setup-list li,
.gp-exercise-card__cues-list li { font-size: var(--text-sm); color: var(--color-text-secondary); }
.gp-exercise-card__why { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; font-style: italic; }
.gp-exercise-card__video-link { font-size: var(--text-xs); color: var(--color-primary); }

.gp-exercise-card__done {
  margin-top: var(--space-1);
  padding: var(--space-2) var(--space-3);
  min-height: 36px;
  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-secondary);
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.1s;
}

.gp-exercise-card__done[aria-pressed="true"] {
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ── Footer ──────────────────────────────────────────────────── */
.gp-session-footer { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); }
.gp-finish-btn,
.gp-exit-btn { width: 100%; }

/* ── No session state ────────────────────────────────────────── */
.gp-no-session { padding: var(--space-6) var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); align-items: center; text-align: center; }
.gp-no-session__message { color: var(--color-text-muted); font-size: var(--text-base); }

/* ── Moment screens (glance, reflection) ─────────────────────── */
.gp-moment {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  display: flex;
  align-items: flex-start;
  overflow-y: auto;
  z-index: 100;
}

.gp-moment__content {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-5) var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.gp-moment__programme-name { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.gp-moment__heading { font-size: clamp(2rem, 8vw, 3.5rem); font-weight: var(--font-bold); color: var(--color-text); margin: 0; line-height: 1.1; }

.gp-moment__coach-block { display: flex; flex-direction: column; gap: var(--space-3); }
.gp-moment__coach-line { font-size: var(--text-base); color: var(--color-text-secondary); margin: 0; line-height: var(--leading-relaxed); }
.gp-moment__coach-line--forward { color: var(--color-text); font-weight: var(--font-medium); }

.gp-moment__milestones { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--color-bg-elevated); border-radius: var(--radius-lg); }
.gp-moment__milestones-label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); margin: 0; }
.gp-moment__milestone { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; }

.gp-moment__options { display: flex; flex-direction: column; gap: var(--space-3); }
.gp-moment__options-label { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-text); margin: 0; }

.gp-moment__option {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.1s;
  min-height: 64px;
}

.gp-moment__option:hover { border-color: var(--color-primary); }
.gp-moment__option:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.gp-moment__option-label { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-text); }
.gp-moment__option-desc { font-size: var(--text-sm); color: var(--color-text-muted); }

.gp-moment__cta { width: 100%; margin-top: var(--space-2); }


/* ─── Lift note (11 Aug 2026, PT-4) ────────────────────────────────────────
   A memory aid, not a scoreboard. Governed by locked principle P4: the app
   may display load, the coach never interprets it. Styled DELIBERATELY
   plainly — no accent colour on the number, no badge, no emphasis that
   would read as praise or as a verdict. It is a note the person left
   themselves, and it should look like one.
   Inputs are 44px minimum for WCAG 2.2 AA SC 2.5.8 Target Size. */

/* .gp-lift* moved to css/components/session-log.css on 12 Aug 2026
   (LOG-1) and renamed .slog*. The block itself moved from
   gym-programme.js to js/session-log.js so workout.js can reach it too:
   it lived in one view, so of eleven session views exactly one offered
   it. Nothing to see here now -- see that file. */