/*
 * css/layouts/my-programme.css
 * 22 Aug 2026 v4
 *   WEIGHT-1b. .my-programme-weight -- the optional weight target.
 *
 *   Styled DELIBERATELY QUIETLY, and plainer than the conversation
 *   above it. It is not a question being asked, it is a field being
 *   made available. No badge, no highlight, no empty state that reads
 *   as an unfinished task -- frequent weighing is itself a risk
 *   behaviour, so nothing here may look like a prompt.
 *
 * 22 Aug 2026 v3
 *   R1-b. .my-programme-review, the hard conversation, and
 *   .my-programme-describe, the invitation to name a date.
 *
 *   The three options are DELIBERATELY IDENTICAL in weight. "Leave it
 *   where it is" gets the same colour, the same size and the same
 *   prominence as the other two, because a de-emphasised third option
 *   is a nudge wearing a choice's clothes. Nothing here may be styled
 *   to steer.
 *
 *   No accent colour, no alert styling, no icon. This is a conversation,
 *   not a warning, and it must not read as a problem the person has
 *   caused.
 *
 * 17 Aug 2026 v2
 *   CHAP-1 step 4. .my-programme-focus, the weekly focus picker.
 *
 * 16 Aug 2026 v1
 *
 * CHAP-1 step 2. The "where am I going?" screen.
 *
 * WHAT IS DELIBERATELY ABSENT, and it is the point of the feature:
 *
 *   No progress bar. No percentage. No ring, meter or fill of any
 *   kind. Progress visualisation accelerates behaviour near completion
 *   by amplifying perceived obligation — it works by making completion
 *   always visible, always close and rarely final, which is persona
 *   2.5's declared territory with a countdown drawn on it. The
 *   blueprint's rule is keep the milestone, remove the countdown, show
 *   progress made and never distance remaining, and a bar cannot obey
 *   it because a bar IS the remaining distance.
 *
 *   No accent colour on any number. Same restraint as PB-1, where the
 *   gate asserts the CSS does not highlight a personal best: a figure
 *   styled as an achievement becomes a target to defend.
 *
 * All colours are existing tokens from css/base/variables.css, every
 * one already cleared by tools/contrast-check.mjs against all three
 * schemes. No new token is introduced here, so nothing on this screen
 * can drift out of AA behind the checker's back.
 *
 * WCAG 2.2 AA: text sizes inherit the user scale tokens, list markers
 * are removed but list semantics are kept, and nothing is distinguished
 * by colour alone.
 */

.my-programme-view {
  padding: var(--space-6) var(--space-4) var(--space-8);
  max-width: 480px;
  margin: 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.my-programme-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.my-programme-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}

.my-programme-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.my-programme-section {
  padding: var(--space-4);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.my-programme-section__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: var(--leading-normal);
}

/* The chapter name. Larger than the body, and that is all — no accent
   colour, because it is where somebody is rather than something they
   have won. */
.my-programme-chapter {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0;
  line-height: var(--leading-normal);
}

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

/* The "what would likely come next" line. Quieter, because it is the
   least settled thing on the screen and must not read as a track
   already laid. */
.my-programme-line--soft {
  color: var(--color-text-secondary);
}

.my-programme-empty {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: var(--leading-relaxed);
}

/* ── This week's focus (CHAP-1 step 4) ────────────────────────── */
/* No tick, no count, no progress indicator. A focus that can be shown
   as done is a target wearing a different hat. */

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

.my-programme-focus .btn {
  min-height: 44px;
}

/* ── The arc ──────────────────────────────────────────────────── */

.my-programme-arc,
.my-programme-goals {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.my-programme-arc__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.my-programme-arc__name {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-normal);
}

.my-programme-arc__when {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.my-programme-goals__item {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
}

/* ── Back ─────────────────────────────────────────────────────── */

.my-programme-back {
  margin-top: auto;
  min-height: 44px;
}

/* ── The hard conversation (R1-b) ──────────────────────────────── */

/*
 * A quiet card, not an alert. Same surface treatment as the rest of the
 * screen: no accent border, no warning colour, no icon. The coach is
 * opening a conversation, and the styling should carry no more urgency
 * than the sentence does.
 */
.my-programme-review {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.my-programme-review__body {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.my-programme-review__label {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-1);
}

.my-programme-review__input {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.my-programme-review__input:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/*
 * Stacked, full width, equal. Not a row -- a row implies a primary on
 * the left and an afterthought on the right, and all three of these are
 * the same kind of answer.
 *
 * 44px minimum on every control (WCAG 2.5.8 target size).
 */
.my-programme-review__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.my-programme-review__actions .btn {
  width: 100%;
  min-height: 44px;
}

/* ── The invitation to name a date (R1-b) ──────────────────────── */

/*
 * Deliberately plainer than the conversation above. This is not a
 * question being asked, it is a field being made available, and it must
 * never read as an unfinished task. No badge, no highlight, no count.
 */
.my-programme-describe {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ── Weight target (WEIGHT-1b) ─────────────────────────────────── */

/*
 * Quiet on purpose. This is a field being made available, not a
 * question being asked. Nothing here may read as an unfinished task.
 */
.my-programme-weight {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Stone and pounds is a composite -- two fields, as the weight is said. */
.my-programme-weight__stone {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.my-programme-weight__part {
  flex: 1;
  min-width: 0;
}

.my-programme-weight__unit {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/*
 * Where the set-time response lands, including a refusal. role="status"
 * in the markup, so it is announced without stealing focus.
 *
 * NOT styled as an error: no red, no icon, no alert border. A refusal
 * here declines the FIELD, not the person, and colouring it like a
 * mistake would say the opposite of the words.
 */
.my-programme-weight__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.my-programme-weight__note:empty {
  display: none;
}