/* progress.css — the Progress tab (REVAMP-DESIGN §2.5, §11 WP10).
 *
 * Every class is prefixed progress-; anything the kit draws (a tile, a tag, a
 * chart, a nav row) is reached through a combinator, so this file can never
 * restyle the shell. Greys and tokens only: the accent paints the person's
 * own estimates (the chart draws those itself), red only a limit. No width
 * rule answers to the viewport: the face column and the pane are containers.
 */

.progress-face { display: grid; gap: 0; }

/* A context with no header slot carries the subtitle on the face. */
.progress-sub {
  font: var(--t-body);
  color: var(--ink-2);
  text-wrap: balance;
}

/* ---------------------------------------------------------- the figure --- */

.progress-figure {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 10px 0 4px;
}
.progress-figure-main { margin: 0; min-width: 0; }
.progress-figure-v {
  font: var(--t-display);
  font-stretch: 85%;
  letter-spacing: -.01em;
  color: var(--ink);
}
.progress-figure-u {
  font: 450 var(--t-row-size)/1.2 var(--font);
  color: var(--ink-2);
  white-space: nowrap;
}
.progress-fresh { margin-top: 10px; }
/* Sparse: how old the last print is, then "Too few", side by side. */
.progress-figure-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.progress-figure.is-empty {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 14px 0 6px;
}
.progress-figure-none {
  font: var(--t-body);
  color: var(--ink-2);
  text-wrap: pretty;
}
/* §6 Empty: the chart's frame before its first print, in greys. */
.progress-figure.is-empty .progress-ghost-wrap { position: relative; justify-self: stretch; margin: 4px 0 2px; }
.progress-ghost { display: block; width: 100%; height: 112px; overflow: visible; }
.progress-ghost-grid { stroke: var(--grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.progress-ghost-line {
  fill: none;
  stroke: var(--edge);
  stroke-width: 2;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.progress-ghost-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 999px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1.75px var(--edge);
}

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

.progress-chart { display: grid; gap: 8px; }
.progress-chart .chart { margin: 0; }

.progress-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font: var(--t-cap);
  color: var(--ink-2);
}
.progress-key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.progress-key-mark { flex: none; display: inline-block; }
.progress-key-mark.is-print { width: 8px; height: 8px; border-radius: 999px; background: var(--ink-2); }
.progress-key-mark.is-out {
  width: 8px; height: 8px; border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--ink-3);
}
.progress-key-mark.is-trend { width: 16px; height: 2.5px; border-radius: 2px; background: var(--accent-ink); }
.progress-key-mark.is-band { width: 16px; height: 10px; border-radius: 2px; background: var(--accent-band); }
.progress-key-mark.is-pace {
  width: 16px; height: 0;
  border-top: 2.5px dotted var(--accent-ink);
}
/* The Weekly report's day bars: the same marks the chart draws. */
.progress-key-mark.is-bar { width: 10px; height: 10px; border-radius: 3px; background: var(--ink-3); }
.progress-key-mark.is-today { width: 10px; height: 10px; border-radius: 3px; background: var(--accent-mark); }
.progress-key-mark.is-limit { width: 14px; height: 2px; border-radius: 1px; background: var(--ink); }
.progress-key-mark.is-incomplete {
  width: 10px; height: 10px; border-radius: 3px;
  border: 1.25px dashed var(--ink-3);
}
.progress-days { display: grid; gap: 8px; min-width: 0; margin-bottom: 6px; }
.progress-days .chart { margin: 0; }

.progress-leftout {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 2px;
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: var(--t-sub);
  text-align: left;
  cursor: pointer;
}
.progress-leftout-mark { flex: none; color: var(--ink-3); }

/* The links under the chart: why prints were left out, where the landing
 * lies past the edge, and the chart's Numbers, on one line where they fit
 * (Numbers to the right), never a line of their own for a pill. */
.progress-chart-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 16px;
}
.progress-thin { font: var(--t-sub); color: var(--ink-2); text-wrap: pretty; }

/* §6 Stale: the last trend point hollow, never red. */
.progress-chart.is-stale .chart-end { fill: var(--bg); stroke: var(--accent-ink); }

.progress-range { padding-top: 4px; }
.progress-range .segmented { width: 100%; }

/* ------------------------------------------------------------ the body --- */

.progress-body { display: grid; }
.progress-tiles { padding-bottom: 6px; }
/* Tiles side by side share one height: the sparkline sits on the tile's
 * floor in every tile, so a row with one sparkline never leaves the others'
 * words floating over an empty well. */
.progress-tiles > .progress-tile { display: flex; flex-direction: column; align-items: flex-start; }
.progress-tiles > .progress-tile > .progress-tile-spark { margin-top: auto; padding-top: 8px; box-sizing: content-box; }
/* A tape site's goal: its own line under the date and the badge. */
.progress-tile-goal { font: var(--t-cap); color: var(--ink-2); }
/* Before the first measure: the face's three tiles, quiet. */
.progress-body-empty { display: grid; gap: 12px; }
.progress-tile.is-ghost {
  min-height: 88px;
  background: transparent;
  box-shadow: none;
  outline: 1.25px dashed var(--line);
  outline-offset: -1.25px;
}
.progress-ghost-v { color: var(--ink-3); font-weight: 450; }
.progress-body-none {
  font: var(--t-sub);
  color: var(--ink-2);
  text-wrap: pretty;
  padding-bottom: 6px;
}

/* ------------------------------------------------------------ the rows --- */

.progress-list { display: grid; gap: 12px; padding-top: 14px; }
.progress-alert.is-red .callout-title { color: var(--ink); }
.progress-row-tag { flex: none; margin-left: 8px; }

/* ------------------------------------------------------------- screens --- */

.progress-h {
  font: var(--t-head);
  letter-spacing: -.01em;
  color: var(--ink);
}

.progress-screen-body-content,
.progress-screen-measure-content,
.progress-screen-health-content,
.progress-screen-excl-content,
.progress-screen-alerts-content,
.progress-screen-report-content,
.progress-report { display: grid; gap: 16px; min-width: 0; }

.progress-bf { display: grid; gap: 4px; }
.progress-bf-main { margin: 0; }
.progress-bf-v { font: var(--t-display); font-stretch: 85%; letter-spacing: -.01em; }
.progress-bf-u { font: 450 var(--t-row-size)/1.2 var(--font); color: var(--ink-2); }
.progress-bf-why,
.progress-bf-none { font: var(--t-sub); color: var(--ink-2); text-wrap: pretty; }

/* ---- body fat, every method on one axis ---- */

.progress-methods { display: grid; gap: 8px; min-width: 0; }
.progress-marks { display: grid; min-width: 0; }
.progress-mark {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  padding: 10px 0 6px;
  border-bottom: 1px solid var(--line);
}
.progress-mark-name { font: var(--t-row); color: var(--ink); min-width: 0; }
.progress-mark-v { font: 600 var(--t-row-size)/1.2 var(--font); color: var(--ink); white-space: nowrap; }
.progress-mark-when { grid-column: 1 / -1; font: var(--t-cap); color: var(--ink-2); }
/* The track and the axis share one inset, so a mark sits over its tick. */
.progress-mark-track,
.progress-mark-axis { grid-column: 1 / -1; position: relative; margin: 0 16px; }
.progress-mark-track { height: 16px; }
.progress-mark-track::before {
  content: "";
  position: absolute;
  left: -16px; right: -16px; top: 50%;
  border-top: 1px solid var(--grid);
}
.progress-mark-spread {
  position: absolute;
  top: calc(50% - 2px);
  left: var(--lo);
  width: calc(var(--hi) - var(--lo));
  height: 4px;
  border-radius: 2px;
  background: var(--ink-3);
}
.progress-mark-dot {
  position: absolute;
  top: 50%;
  left: var(--at);
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 999px;
  background: var(--ink-2);
  box-shadow: 0 0 0 2px var(--bg);
}
/* The figure the screen leads with: an ink mark, a size up. A reading over
 * a year old: a hollow ring, its words a step back. */
.progress-mark.is-lead .progress-mark-dot {
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  background: var(--ink);
}
.progress-mark.is-old .progress-mark-dot { background: var(--bg); box-shadow: inset 0 0 0 2px var(--ink-3), 0 0 0 2px var(--bg); }
.progress-mark.is-old .progress-mark-v { color: var(--ink-2); }
.progress-mark-axis { height: 24px; font: var(--t-cap); color: var(--ink-2); }
.progress-scans { display: grid; min-width: 0; }
/* The scan's figures on a six-column grid, so every row fills: three and
 * two for five, two and two for four, three for three. */
.progress-dexa-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.progress-dexa-tiles > .progress-dexa-mark { grid-column: span 2; }
.progress-dexa-tiles.is-5 > .progress-dexa-mark:nth-child(n+4),
.progress-dexa-tiles.is-4 > .progress-dexa-mark,
.progress-dexa-tiles.is-2 > .progress-dexa-mark { grid-column: span 3; }
.progress-dexa-tiles.is-1 > .progress-dexa-mark { grid-column: 1 / -1; }
.progress-dexa-where { margin-top: -6px; padding-bottom: 8px; font: var(--t-sub); color: var(--ink-2); }
.progress-mark-tick { position: absolute; top: 4px; left: var(--at); transform: translateX(-50%); }
.progress-methods-say { font: var(--t-sub); color: var(--ink-2); text-wrap: pretty; }

/* ---- Health: each series drawn by the kit ---- */

.progress-telemetry { display: grid; gap: 18px; min-width: 0; }
.progress-recovery { display: grid; justify-items: start; gap: 6px; }
.progress-recovery-advice { font: var(--t-body); color: var(--ink); text-wrap: pretty; }
.progress-metric { display: grid; gap: 6px; min-width: 0; }
.progress-metric-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.progress-metric-now { font: var(--t-sub); color: var(--ink-2); }
/* The chart's Numbers at the end of its key's line (or its heading's). */
.progress-legend .progress-numbers,
.progress-metric-head .progress-numbers { margin-left: auto; }
.progress-metric-say { font: var(--t-sub); color: var(--ink-2); text-wrap: pretty; }
.progress-kpi-tests { display: grid; gap: 6px; }
/* VO2: the 2 set by the face's own subscript glyphs, never shrunk text. */
.progress-sub2 { font-feature-settings: "subs" 1; font-variant-position: sub; }

/* ---- Left out: rows, not boxes inside the screen ---- */

.progress-screen-excl-content .progress-excl {
  padding: 12px 0;
  border-radius: 0;
  background: none;
  border-bottom: 1px solid var(--line);
}
.progress-screen-excl-content .progress-excl-list { display: grid; gap: 0; }
/* The law and the context note: words with an edge rule, not boxes. */
.progress-screen-excl-content .progress-excl-list > p { background: none; margin-bottom: 8px; }

.progress-quit { display: grid; gap: 6px; }
.progress-quit-line { font: var(--t-body); color: var(--ink); }
.progress-voids { font: var(--t-sub); color: var(--ink-2); text-wrap: pretty; }

.progress-wait { font: var(--t-sub); color: var(--ink-2); }

/* A Body or Trends card inside a Progress screen loses its box: the screen
 * is the box (§4.6: no cards inside cards). */
.progress-screen-body-content .body-screen-host > .card,
.progress-screen-health-content .body-screen-host > .card,
.progress-report .body-screen-host > .card {
  background: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ---- tape, one row per site ---- */

.progress-sites { display: grid; }
.progress-sites .sec-head { padding-top: 4px; }
.progress-site {
  display: grid;
  gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.progress-site-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.progress-site-name { font: var(--t-row); color: var(--ink); min-width: 0; }
.progress-site-v { font: 600 var(--t-row-size)/1.2 var(--font); color: var(--ink); white-space: nowrap; }
.progress-site-sub { font: var(--t-sub); color: var(--ink-2); text-wrap: pretty; }
.progress-site-fence { justify-self: start; margin-top: 2px; }
/* From the first panel to the goal: the distance covered in the person's
 * mark, the goal an ink tick at the rail's end. */
.progress-rail {
  position: relative;
  height: 6px;
  margin: 6px 6px 4px 0;
  border-radius: 999px;
  background: var(--surface-2);
}
.progress-rail-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: 999px;
  background: var(--accent-mark);
}
.progress-rail-goal {
  position: absolute;
  right: -1px; top: -4px; bottom: -4px;
  width: 2px;
  border-radius: 1px;
  background: var(--ink);
}

/* ---- the week picker ---- */

.progress-week {
  display: grid;
  grid-template-columns: var(--tap) minmax(0, 1fr) var(--tap);
  align-items: center;
  border-radius: 999px;
  background: var(--surface-2);
}
.progress-week-words {
  text-align: center;
  font: 560 var(--t-body-size)/1.2 var(--font);
  color: var(--ink);
}
.progress-week-step {
  display: inline-grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.progress-week-step[disabled] { color: var(--ink-3); cursor: default; }

/* ---- the week at a glance: a hairline grid, two across, four when wide ---- */

.progress-glance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.progress-glance-cell {
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--line);
}
.progress-glance-cell:nth-child(2n) { padding-left: 12px; border-left: 1px solid var(--line); }
.progress-glance-k { font: var(--t-cap); color: var(--ink-2); }
.progress-glance-v { font: 600 24px/1.1 var(--font); font-stretch: 92%; color: var(--ink); white-space: nowrap; }
.progress-glance-u { font: 450 var(--t-cap-size)/1.2 var(--font); font-stretch: 100%; color: var(--ink-2); }
.progress-glance-sub { font: var(--t-cap); color: var(--ink-2); text-wrap: pretty; }
/* A figure the week cannot give yet: the dash is quiet, the cell keeps its place. */
.progress-glance-cell.is-none .progress-glance-v { color: var(--ink-2); font-weight: 450; }
/* Three cells: the last spans its row rather than leaving a half hairline. */
.progress-glance.is-3 > .progress-glance-cell:last-child { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
@container (min-width: 560px) {
  /* Wide: every cell on one row. */
  .progress-glance.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .progress-glance.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .progress-glance.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .progress-glance > .progress-glance-cell,
  .progress-glance.is-3 > .progress-glance-cell:last-child {
    grid-column: auto;
    padding-left: 12px;
    border-left: 1px solid var(--line);
  }
  .progress-glance > .progress-glance-cell:first-child { padding-left: 0; border-left: 0; }
}

/* ---- the report's sections ---- */

.progress-report-sec { display: grid; gap: 6px; min-width: 0; }
.progress-report-line {
  font: var(--t-body);
  color: var(--ink);
  text-wrap: pretty;
}
.progress-report-line.is-note { font: var(--t-sub); color: var(--ink-2); }
.progress-report-open {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font: var(--t-sub);
  color: var(--ink-2);
}

/* ---- the wide pane's default: on the face title's line ---- */

.progress-pane { display: grid; gap: 10px; padding-top: 4px; min-width: 0; }
/* The title on the face title's line, the model's Numbers in its corner. */
.progress-pane-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.progress-pane-title { font: var(--t-title); letter-spacing: -.02em; color: var(--ink); }
.progress-pane-sub { font: var(--t-body); color: var(--ink-2); text-wrap: pretty; }
.progress-pane > .progress-report { margin-top: 6px; }

/* ---- the Measure sheet's kind switch ---- */

.progress-measure-kinds { padding-bottom: 4px; }
.progress-measure-kinds .segmented { width: 100%; }
.progress-measure-kinds .segmented-btn { white-space: nowrap; padding-left: 4px; padding-right: 4px; }
/* The title sits between Cancel and Save on one line; the segment under it
 * already names the kind, so a long title gives way rather than wrapping. */
.progress-measure-sheet .sheet-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- errors ---- */

.progress-error { display: grid; justify-items: start; gap: 8px; padding: 16px 0; }
.progress-error-title { font: var(--t-head); }
.progress-error-sub { font: var(--t-body); color: var(--ink-2); text-wrap: pretty; }

/* A narrow face (a 320 phone): the tiles keep three, and the figure's tag
 * drops under the number. */
@container (max-width: 340px) {
  .progress-figure-v { font-size: 40px; }
}


/* The Measure sheet's fields share rows: every label on one row, every box
 * on the next, every hint on the third, so a label that wraps to two lines
 * ("Subscapular fold (mm), last 8") never drops its box below its
 * neighbour's. */
.progress-measure-sheet .body-sheet-grid { row-gap: 6px; }
.progress-measure-sheet .body-sheet-grid > .field {
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 6px;
}
.progress-measure-sheet .body-sheet-grid > .field > .field-label { align-self: end; }
.progress-measure-sheet .body-sheet-grid > .field > .field-hint { padding-bottom: 6px; }