/* §11 Progress: strength graph, PRs, weekly volume trend, §11.1 export.
   Every colour and size references a §12.2 token from tokens.css — no literals,
   including the SVG geometry, which CSS owns via the r / stroke-width
   properties rather than element attributes. */

.prog {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.prog-card h3 {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-name);
  font-weight: 600;
}

.prog-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-2) var(--s-3);
  margin-bottom: var(--s-3);
}

/* Its own field wrapper rather than .slot-field: that one is capped at
   --w-field-max on desktop, which is right for a two-digit number and wrong
   for a lift name. */
.prog-field {
  display: flex;
  flex: 1 1 var(--w-prog-field);
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
  max-width: 100%;
}

.prog-field .sel {
  width: 100%;
  max-width: 100%;
}

.prog-range {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

/* ---- chart ---- */

.ch-wrap {
  margin: var(--s-2) 0;
}

.ch {
  display: block;
  max-width: 100%;
  height: auto;
}

.ch-grid {
  stroke: var(--chart-grid);
  stroke-width: var(--hair);
}

/* The §9 landmark window, behind everything. */
.ch-band {
  fill: var(--chart-band);
}

.ch-tick {
  fill: var(--text-dim);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-variant-numeric: tabular-nums;
}

.ch-tick--y,
.ch-tick--end {
  text-anchor: end;
}

/* Element+class so the series colours below can set `fill` for the dots
   without also flooding the line. */
.ch polyline.ch-line {
  fill: none;
  stroke-width: var(--stroke-series);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ch circle.ch-dot {
  r: var(--dot-r);
  stroke: none;
}

.ch--accent { stroke: var(--accent); fill: var(--accent); }
.ch--dim    { stroke: var(--text-dim); fill: var(--text-dim); }
.ch--left   { stroke: var(--good); fill: var(--good); }
.ch--right  { stroke: var(--warn); fill: var(--warn); }

/* A PR is marked, not celebrated (§12.6) — a larger dot in the "good" hue. */
.ch circle.ch-dot--pr {
  r: var(--dot-r-pr);
  fill: var(--good);
}

.ch-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  color: var(--text-dim);
  font-size: var(--fs-label);
}

.ch-key {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.ch-swatch {
  width: var(--s-4);
  height: var(--s-1);
  border-radius: var(--r-pill);
  background: var(--text-dim);
}

/* The panel's one statement of the unit, on the chart's key where the axis it
   belongs to is. Every number below it is in this unit and none repeats it. */
.ch-unit {
  margin-left: auto;
}

.ch-swatch.ch--accent { background: var(--accent); }
.ch-swatch.ch--dim    { background: var(--text-dim); }
.ch-swatch.ch--left   { background: var(--good); }
.ch-swatch.ch--right  { background: var(--warn); }

/* ---- records, PRs ---- */

.prog-records {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: var(--hair) solid var(--line-soft);
}

.prog-stat {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.prog-stat-v {
  font-size: var(--fs-name);
  font-weight: 600;
}

.prog-flag {
  margin: var(--s-2) 0 0;
  color: var(--warn);
  font-size: var(--fs-label);
}

.prog-prs {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: var(--hair) solid var(--line-soft);
}

.prog-pr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-3);
  min-height: var(--s-8);
  font-size: var(--fs-label);
}

.prog-pr-date {
  min-width: var(--w-mg-label);
  color: var(--text-dim);
}

.prog-pr-val {
  font-weight: 600;
}

.prog-pr-e1rm {
  color: var(--text-dim);
}

.prog-pr-kinds {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

.chip--pr {
  color: var(--good);
  border-color: var(--good-line);
}

/* ---- §11.1 export ---- */

.prog-exports {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-2) 0;
}