/*
 * css/layouts/progress.css
 * 12 Oct 2026 v12
 *   A-7 EMPTY-AND-FIRST. .pr-empty: Progress before the first session.
 * 06 Oct 2026 v11
 *   D-11 PROGRESS-SHARE. The header is the title, the days it covers, then
 *   the window tabs across the full width (Today, 7, 14, 30, and 90 on the
 *   Plan; a number above the word days). The chart takes any number of
 *   bars (--n): seven or fourteen days, six or thirteen weeks; with more
 *   than seven, the in-between labels are hidden while the bars stand up
 *   and shown when the chart lies on its side. Today: a card for each
 *   session (a kind-colour dot, the kind, time, where and minutes, the
 *   moves and sets, what they said after) and the report card.
 * 06 Oct 2026 v10
 *   D-12 PROGRESS-FIT (Graeme, 06 Oct: "the screen shifts right ... it's
 *   every time"). The view is the screen's width and no wider (it sized
 *   itself to its content, and the week chart's six no-wrap labels made
 *   that 707px on a 412px phone; at normal text it spilled 22px into the
 *   right-hand margin). The chart's columns may narrow; a week label
 *   wraps; the count, bar and week sit in rows shared by every bar, so the
 *   bars stand on one line however a label wraps. The view is a container:
 *   when its text box is under 19 characters across (large text, or a
 *   small phone) it is one thing per row: tiles stacked, the week chart on
 *   its side, each row's tile above its words. The kinds of session sit
 *   beside their dots (club-rooms.css spread them across the row).
 * 04 Oct 2026 v9
 *   LOOK-2 / LOOK-3. The overview is cards on the page ground (.pr-card):
 *   two number tiles, the coach's line, the weekly bars (taller, every bar
 *   labelled), the kinds of session as one bar in parts (.pr-kinds, each
 *   part a --kind-* colour) above a list naming and counting each, the
 *   arc's strands with a filled or open mark, and the rows one tap away
 *   (.pr-row, a tile in its kind colour). Detail pages (.pr-page) have Back
 *   and a tile beside the h1. Kind colours are text only on the page and
 *   card ground; elsewhere they are shapes (tokens measured in
 *   verify-contrast-check v3). The window tabs are a segmented control.
 * 29 Sep 2026 v8
 *   P25. .pr-lifts-more: every lift past the first eight, one tap away.
 *   The summary is a real control: full width, 44px tall, focus visible.
 * 28 Sep 2026 v7
 *   Work list 9. .progress-export__status (Copied, said under the
 *   buttons) and .progress-export__fallback (the text to copy when the
 *   clipboard is not allowed; replaces an alert()).
 * 28 Sep 2026 v6
 *   SMOOTH-P4a. .pr-* -- the arc read back, and the one bar chart both
 *   tiers share. One hue (the primary teal) on the ground; a check-in
 *   week is an outline, the mentions in it the fill, so the whole and
 *   the part read without a second colour. A value on the first and last
 *   bar only; every bar is named for a screen reader in the markup.
 *
 * 22 Aug 2026 v5
 *   WEIGHT-1b. .progress-weight -- the log and the sustained-rate note.
 *
 *   NO CHART. A graph of somebody losing weight invites reading a
 *   slope, and reading a slope is the arithmetic on the body this
 *   product refuses. A list of what was recorded, and nothing about
 *   what was not.
 *
 * 16 Aug 2026 v4
 *   COUNTDOWN-1. .progress-programme__bar and __fill deleted with the
 *   markup they styled.
 *
 * 11 Aug 2026 v3
 *
 * v3 — WOW-4. Styles for .progress-tab--locked (the 90-day view on the
 *   free tier). Opacity 0.55 matching tier-gating.css; focusable and
 *   announced, never the HTML disabled attribute.
 *
 * 23 Jun 2026 v2
 *
 * Progress view layout. 30/90 day view additions (P5-PG-1).
 * v2 adds: window tab strip, coach narrative, programme progress block,
 * export section, locked export state.
 *
 * Design principles:
 *   Progress is not a dashboard — it is a mirror held at an angle.
 *   No red indicators. No shame mechanics. Missed sessions are context.
 *   Coach narrative precedes all data.
 *
 * WCAG 2.2 AA:
 *   Tab strip: all contrast meets 4.5:1. Active tab has visible non-colour
 *   indicator (border-bottom). Focus rings on all interactive elements.
 *   Progress bar: colour + aria-valuenow/min/max — never colour alone.
 *   Export buttons: 44px min height.
 *   Locked state: role="button" on div, focus ring visible.
 *   prefers-reduced-motion: no animation on window switch.
 */

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

.progress-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-4);
  padding-bottom: var(--space-8);
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  container: progress / inline-size;
}

/* ── Header ───────────────────────────────────────────────────────────── */

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

.progress-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0;
}

/* ── Window tabs (Personal only) ──────────────────────────────────────── */

.progress-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-border);
}

.progress-tab {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s;
  min-height: 44px;
}

.progress-tab:hover {
  color: var(--color-text);
}

.progress-tab--active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: var(--font-semibold);
}

.progress-tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Coach narrative ──────────────────────────────────────────────────── */

.progress-narrative {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
}

.progress-narrative__text p {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

.progress-narrative__text p:last-child {
  margin-bottom: 0;
}

/* ── Activity summary ─────────────────────────────────────────────────── */

.progress-summary {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
}

.progress-summary__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 64px;
}

.progress-summary__number {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  line-height: 1;
}

.progress-summary__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.progress-summary__breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.progress-summary__type {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  background: var(--color-bg-elevated);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
}

/* ── Programme progress ───────────────────────────────────────────────── */

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

.progress-programme__name {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0;
}

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

/* COUNTDOWN-1, 16 Aug 2026. .progress-programme__bar and __fill removed
   with the markup they styled. A bar cannot obey "show progress made,
   never distance remaining", because a bar IS the remaining distance.
   Deleted rather than left orphaned: dead styles are how a removed
   feature comes back. */

.progress-programme__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.progress-programme__phase-message {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-style: italic;
  margin: 0;
  line-height: var(--leading-relaxed);
}

.progress-programme__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.progress-programme__missed {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated);
  border-radius: var(--radius-md);
}

.progress-programme__milestones-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}

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

.progress-programme__milestone {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  padding-left: var(--space-3);
  position: relative;
}

.progress-programme__milestone::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: var(--font-bold);
}

/* ── Export ───────────────────────────────────────────────────────────── */

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

.progress-export__heading {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0;
}

.progress-export__intro {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

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

.progress-export__btn {
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  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;
}

.progress-export__btn:hover {
  background: var(--color-bg-card-hover, var(--color-bg-elevated));
}

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


/* Locked export */
.progress-export--locked {
  opacity: 0.6;
  cursor: pointer;
}

.progress-export--locked:focus-within {
  opacity: 0.75;
}

.progress-export__lock {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  cursor: pointer;
  padding: var(--space-3);
  border-radius: var(--radius-md);
}

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

.progress-export__lock-label {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.progress-export__lock-sub {
  font-size: var(--text-sm);
  color: var(--color-primary);
}


/* ─── Locked lookback tab (11 Aug 2026, WOW-4) ─────────────────────────────
   90-day view on the free tier. Visible and tappable rather than hidden or
   inert — routes to /upgrade via app.js's delegated data-route handler.
   Opacity 0.55 matches tier-gating.css rather than introducing another
   value. Never uses the HTML disabled attribute: it stays in the tab order
   and stays announced (see PT-7). */

.progress-tab--locked {
  opacity: 0.55;
  transition: opacity 150ms ease;
}

.progress-tab--locked:hover,
.progress-tab--locked:focus-visible {
  opacity: 0.8;
}

.progress-tab--locked:focus-visible {
  outline: 3px solid var(--color-border-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .progress-tab--locked { transition: none; }
}

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

.progress-weight {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.progress-weight__heading {
  font-size: var(--text-base);
  color: var(--color-text);
  margin: 0;
}

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

/*
 * A row is a date and a number. No delta, no arrow, no colour for "up"
 * or "down" -- a red number for a gain would be a verdict, and this
 * product does not score the body.
 */
.progress-weight__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.progress-weight__when {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.progress-weight__what {
  font-size: var(--text-sm);
  color: var(--color-text);
}

.progress-weight__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.progress-weight__input {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--color-text);
}

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

.progress-weight__stone {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.progress-weight__input--part {
  flex: 1;
  min-width: 0;
}

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

/*
 * The sustained-rate note. NOT an alert: no red, no icon, no border.
 * It points somebody outward once, and styling it like a warning would
 * make a concern feel like a telling-off.
 */
.progress-weight__note {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
  margin: 0;
  padding: var(--space-3);
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
}


/* ── SMOOTH-P4a. The arc, read back ─────────────────────────── */
.pr-block { margin: var(--space-6, 2rem) 0 0; }
.pr-title { margin: var(--space-6, 2rem) 0 var(--space-2); font-size: var(--text-lg); color: var(--color-text); }
.pr-block > .pr-title:first-child { margin-top: 0; }
.pr-aim { margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: 600; color: var(--color-text); }
.pr-coach { margin: 0 0 var(--space-3); line-height: 1.55; color: var(--color-text); }
.pr-note { margin: var(--space-2) 0 0; font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-secondary); }
.pr-change { margin-top: var(--space-4); }
/* Free: last and quiet, set apart by a rule rather than a box. */
.pr-plan-card { padding-top: var(--space-4); border-top: 1px solid var(--color-border); }

.pr-condition { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
.pr-condition__name { margin: 0; font-size: var(--text-base); color: var(--color-text); }
.pr-condition__since { margin: 2px 0 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.pr-condition__lines { margin: var(--space-2) 0 0; line-height: 1.5; color: var(--color-text); }

.pr-strands, .pr-lifts { margin: 0; padding: 0; list-style: none; }
.pr-strand, .pr-lift {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.pr-strand__name, .pr-lift__name { color: var(--color-text); }
.pr-strand__when, .pr-lift__text { flex: none; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; text-align: right; }

/* ── The shared chart ─────────────────────────────────────────── */
.pr-chart { margin: var(--space-3) 0 0; }
.pr-chart__summary { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--color-text-secondary); }
.pr-bars {
  display: grid;
  grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  column-gap: var(--space-2);
  row-gap: 4px;
  align-items: end;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Count, bar and week: three rows every bar shares (subgrid), so the bars
   stand on one line however a week label wraps. */
.pr-bar { display: grid; grid-row: span 3; grid-template-rows: subgrid; justify-items: center; }
.pr-bar__value { align-self: end; }
.pr-bar__track { align-self: end; }
.pr-bar__week { align-self: start; }
.pr-bar__value, .pr-bar__week {
  display: block;
  min-height: 1.3em;
  line-height: 1.3;
  white-space: normal;
  text-align: center;
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}
.pr-bar__track {
  position: relative;
  display: block;
  width: 100%;
  max-width: 28px;
  height: 64px;
}
/* The whole: an outline as tall as the week's count. */
.pr-bar__track::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: var(--h);
  border: 1px solid var(--color-primary);
  border-radius: 4px 4px 0 0;
  opacity: 0.55;
}
/* The part: filled, anchored to the baseline. */
.pr-bar__fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--f);
  background: var(--color-primary);
  border-radius: 4px 4px 0 0;
}
/* The whole is the outline; with nothing in it, nothing is drawn. */
.pr-bar__track[style*="--h:0%"]::before { display: none; }

/* v7, work list 9. Copied is said where the button is. */
.progress-export__status {
  min-height: 1.5em;
  margin: var(--space-3) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.progress-export__fallback {
  margin-top: var(--space-3);
}

.progress-export__fallback-label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-text);
  line-height: 1.5;
}

.progress-export__text {
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
}

/* P25. Lifts past the first eight. <details> is native: the expanded state
   and keyboard operation come with it (WCAG 4.1.2). Target size 2.5.8. */
.pr-lifts-more { margin-top: var(--space-3, 12px); }
.pr-lifts-more > summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 600;
  color: var(--color-primary, inherit);
}
.pr-lifts-more > summary:focus-visible {
  outline: 3px solid var(--color-focus, currentColor);
  outline-offset: 2px;
}
.pr-lifts-more[open] > summary { margin-bottom: var(--space-2, 8px); }


/* ============================================================
   LOOK-2 / LOOK-3 — Progress overview and detail pages, 04 Oct 2026
   ============================================================ */
.pr-k--teal   { --k: var(--kind-teal); }
.pr-k--amber  { --k: var(--kind-amber); }
.pr-k--violet { --k: var(--kind-violet); }
.pr-k--blue   { --k: var(--kind-blue); }
.pr-k--rose   { --k: var(--kind-rose); }
.pr-k--green  { --k: var(--kind-green); }
.pr-k--slate  { --k: var(--kind-slate); }
.pr-row--teal,   .pr-page--teal,   .pr-lift-group--teal   { --k: var(--kind-teal); }
.pr-row--amber,  .pr-page--amber,  .pr-lift-group--amber  { --k: var(--kind-amber); }
.pr-row--violet, .pr-page--violet, .pr-lift-group--violet { --k: var(--kind-violet); }
.pr-row--blue,   .pr-page--blue,   .pr-lift-group--blue   { --k: var(--kind-blue); }
.pr-row--green,  .pr-page--green,  .pr-lift-group--green  { --k: var(--kind-green); }

/* Header: the title and its days, then the window tabs across. */
.progress-header { flex-direction: column; align-items: stretch; gap: var(--space-3); }
.progress-header__titles { display: flex; flex-direction: column; gap: 2px; }
.pr-range { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.progress-tabs--seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
  border-radius: 12px;
  background: var(--color-bg);
}
.progress-tabs--seg .progress-tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  padding: var(--space-1) var(--space-1);
  min-height: 48px;
  color: var(--color-text);
  line-height: 1.15;
}
.pr-tab__n { display: block; font-weight: 600; }
.pr-tab__u { display: block; font-size: var(--text-xs); }
.progress-tabs--seg .progress-tab--active { background: var(--color-primary); color: var(--color-text-inverse); }

/* The cards. */
.pr-card, .progress-body > .progress-narrative {
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: 20px;
  padding: var(--space-4) var(--space-5);
}
.progress-body { display: flex; flex-direction: column; gap: var(--space-4); }
.progress-body > .pr-block { margin: 0; }
.pr-card__title { margin: 0; font-size: var(--text-lg); font-weight: 600; color: var(--color-text); }
.pr-card__cap { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.pr-card__headrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.pr-card__meta { font-size: var(--text-sm); color: var(--color-text-secondary); }

/* Two numbers. */
.progress-body > .progress-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  padding: 0;
  border-top: 0;
}
.progress-summary__stat {
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: 20px;
  padding: var(--space-4);
}
.progress-summary__stat--teal .progress-summary__number { color: var(--kind-teal); }
.progress-summary__stat--blue .progress-summary__number { color: var(--kind-blue); }
.progress-summary__stat .progress-summary__label { text-transform: none; letter-spacing: 0; font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: var(--space-1); }

/* The weekly bars: taller, a count and a week under every bar. */
.pr-card .pr-chart { margin-top: var(--space-2); }
.pr-card .pr-bars { border-bottom: 1px solid var(--color-border); padding-bottom: 0; }
.pr-card .pr-bar__track { height: 120px; max-width: 40px; }
.pr-card .pr-bar__value { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.pr-card .pr-bar__track::before { border-radius: 8px 8px 0 0; }
.pr-card .pr-bar__fill { border-radius: 8px 8px 0 0; }

/* Kinds of session: the whole, in parts, named and counted below. */
.pr-kinds { display: flex; gap: 3px; height: 20px; margin: var(--space-4) 0 0; border-radius: 10px; overflow: hidden; }
.pr-kinds__part { flex-basis: 0; min-width: 6px; background: var(--k); }
.progress-shapes .progress-shapes__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
.progress-shapes .progress-shapes__row { display: flex; justify-content: flex-start; align-items: center; gap: var(--space-2); padding: 0; border: 0; font-size: var(--text-sm); color: var(--color-text); }
.progress-shapes .progress-shapes__name { min-width: 0; }
.progress-shapes .progress-shapes__count { color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.progress-shapes .progress-shapes__count::before { content: "\00b7\00a0"; }
.pr-dot { flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--k); }

/* The arc's strands: a mark, the name, a date or Not yet. */
.pr-card .pr-aim { margin: var(--space-2) 0 var(--space-2); font-weight: 500; }
.pr-strand { align-items: center; }
.pr-strand__mark { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--kind-slate); box-sizing: border-box; }
.pr-strand__mark--on { background: var(--kind-teal); border-color: var(--kind-teal); }
.pr-strand__name { flex: 1; }
.pr-card .pr-change { margin-top: var(--space-2); padding-left: 0; min-height: 44px; }

/* Rows one tap away. */
.pr-more { padding: var(--space-1) 0; }
.pr-more__list { margin: 0; padding: 0; list-style: none; }
.pr-more__list > li + li { border-top: 1px solid var(--color-border-light); }
.pr-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 60px;
  padding: var(--space-3) var(--space-4);
  background: none;
  border: 0;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pr-row:hover { background: var(--color-bg-hover); }
.pr-row:focus-visible { outline: 3px solid var(--color-border-focus); outline-offset: -3px; }
.pr-row__text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pr-row__title { font-weight: 500; }
.pr-row__sub { font-size: var(--text-sm); color: var(--color-text-secondary); }
.pr-row__chevron { flex: none; color: var(--color-text-secondary); font-size: var(--text-lg); }
.pr-tile {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--k, var(--color-primary));
  background: var(--color-bg-card);
  background: color-mix(in srgb, var(--k, var(--color-primary)) 16%, var(--color-bg));
}
.pr-tile--lg { width: 48px; height: 48px; border-radius: 14px; background: color-mix(in srgb, var(--k, var(--color-primary)) 16%, var(--color-bg-deep)); }

/* Detail pages. */
.pr-page { display: flex; flex-direction: column; gap: var(--space-4); }
.pr-back { align-self: flex-start; min-height: 44px; }
.pr-page__head { display: flex; align-items: center; gap: var(--space-3); }
.pr-group-title {
  margin: var(--space-2) 0 var(--space-2) var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--k, var(--color-text-secondary));
}
.pr-lift-group .pr-lifts { display: flex; flex-direction: column; gap: var(--space-2); }
.pr-lift-group .pr-lift {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: 16px;
}
.pr-lift__body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pr-lift-group .pr-lift__name { font-weight: 600; }
.pr-lift-group .pr-lift__text { text-align: left; }
.pr-spark { flex: none; color: var(--k, var(--color-primary)); }

/* D-11. More than seven bars: closer together; the in-between day or
   week labels are hidden while the bars stand up (they would collide)
   and every bar still names itself to a screen reader. */
.pr-bars--many { column-gap: 3px; }
.pr-bar__week--minor, .pr-bar__value--zero { visibility: hidden; }

/* D-11. Today: a card for each session, then the report card. */
.pr-today { display: flex; flex-direction: column; gap: var(--space-4); }
.pr-today__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.pr-session { display: flex; flex-direction: column; }
.pr-session__head { display: flex; align-items: flex-start; gap: var(--space-3); }
.pr-session__head .pr-dot { margin-top: 0.45em; }
.pr-session__titles { min-width: 0; }
.pr-session__kind { margin: 0; font-size: var(--text-lg); font-weight: 600; color: var(--color-text); }
.pr-session__meta { margin: 2px 0 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.pr-moves { margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.pr-move { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) 0; border-top: 1px solid var(--color-border-light); font-size: var(--text-sm); }
.pr-move__name { font-weight: 500; color: var(--color-text); }
.pr-move__sets { color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.pr-session__feel { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.pr-session__feel strong { color: var(--color-text); font-weight: 600; }
.pr-today__out { display: flex; flex-direction: column; gap: var(--space-3); }
.pr-today__out .pr-card__cap { margin: 0; }

/* ── D-12 PROGRESS-FIT. Large text: one thing per row. ─────────────────
   The view's text box under 19 characters across: 332px at normal text on
   a 412px phone is 20.75, so this starts a little above normal size (and
   on a small phone at any size). */
@container progress (max-width: 19em) {
  .progress-header { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .progress-tabs--seg { display: flex; flex-wrap: wrap; }
  .progress-tabs--seg .progress-tab { flex: 1 1 4.5em; }
  .pr-bar__week--minor, .pr-bar__value--zero { visibility: visible; }
  .progress-body > .progress-summary,
  .progress-shapes .progress-shapes__list { grid-template-columns: minmax(0, 1fr); }
  .pr-card, .progress-body > .progress-narrative { padding: var(--space-4); }
  /* A row: its tile above the words, the arrow beside them. */
  .pr-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-2); row-gap: var(--space-2); padding: var(--space-3); }
  .pr-row > .pr-tile { grid-column: 1; grid-row: 1; }
  .pr-row > .pr-row__text { grid-column: 1; grid-row: 2; }
  .pr-row > .pr-row__chevron { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .pr-page__head { flex-wrap: wrap; }
  .pr-lift-group .pr-lift { flex-wrap: wrap; }

  /* The week chart on its side: the week, a bar across, the count. */
  .pr-bars { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: none; row-gap: var(--space-2); column-gap: var(--space-3); align-items: center; }
  .pr-card .pr-bars { border-bottom: 0; }
  .pr-bar { grid-column: 1 / -1; grid-row: auto; grid-template-columns: subgrid; grid-template-rows: none; align-items: center; justify-items: stretch; }
  .pr-bar__week { grid-column: 1; grid-row: 1; align-self: center; text-align: left; white-space: nowrap; }
  .pr-bar__track, .pr-card .pr-bar__track { grid-column: 2; grid-row: 1; align-self: center; width: 100%; max-width: none; height: 1.5em; }
  .pr-bar__value { grid-column: 3; grid-row: 1; align-self: center; text-align: right; }
  .pr-bar__track::before, .pr-card .pr-bar__track::before { inset: 0 auto 0 0; height: auto; width: var(--h); border-radius: 0 6px 6px 0; }
  .pr-bar__fill, .pr-card .pr-bar__fill { left: 0; top: 0; bottom: 0; right: auto; height: auto; width: var(--f); border-radius: 0 6px 6px 0; }
}

/* A-7 EMPTY-AND-FIRST, 12 Oct 2026 (both tiers). Before the first session. */
.pr-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); text-align: center;
  min-height: 55vh; padding: var(--space-6, 2rem) var(--space-4);
}
.pr-empty__art { color: var(--color-border); }
.pr-empty__h { margin: 0; font-size: var(--text-xl, 1.25rem); font-weight: 700; color: var(--color-text); }
.pr-empty__line { margin: 0; max-width: 28ch; color: var(--color-text-secondary); line-height: 1.5; }
.pr-empty .btn { min-width: 0; max-width: 100%; white-space: normal; }