/* =========================================================================
   progress.css — the Progress page chrome around the interactive body map.
   Pure design layer: the figure itself is styled in body-map.css; this file
   styles the time-window toggle, the muscle detail panel, and the keyboard/AT
   fallback list. Accent follows the picker mode via .progress-panel.mode-advanced
   (same trick the session card uses) so heat + chrome read lime / red together.
   ========================================================================= */

.progress-lead { color: var(--ink-dim); margin: 0 0 var(--s-4); }

.progress-panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
/* Mode accent: Advanced swaps the local accent to red, mirroring the picker. */
.progress-panel.mode-advanced {
  --accent:     var(--accent-advanced);
  --accent-ink: var(--accent-advanced-ink);
  --accent-dim: var(--accent-advanced-dim);
}

/* ---- time-window toggle (14 days / all-time) — accessible segmented control ---- */
.progress-window {
  align-self: center;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.progress-window-opt {
  min-height: 38px;
  padding: 0 var(--s-4);
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-faint);
  font-size: var(--t--1);
  font-weight: 650;
  letter-spacing: 0.08em;
}
.progress-window-opt:hover { background: none; color: var(--ink-dim); }
.progress-window-opt.is-on { background: var(--accent); color: var(--accent-ink); }
.progress-window-opt.is-on:hover { color: var(--accent-ink); }

/* ---- the figure host ---- */
.progress-figure { margin: 0 auto; width: 100%; }
.progress-nofig { color: var(--ink-dim); text-align: center; margin: var(--s-4) 0 0; }

/* ---- muscle detail panel (the tap read-out; a polite live region) ---- */
.progress-detail {
  min-height: 92px;
  padding: var(--s-4);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.progress-detail-hint { margin: 0; color: var(--ink-faint); font-size: var(--t-0); }
.progress-detail-name { margin: 0; font-weight: 650; letter-spacing: -0.02em; font-size: var(--t-1); }
.progress-detail-word {
  margin: 2px 0 0;
  color: var(--accent);
  font-size: var(--t--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.progress-detail-stats { display: flex; gap: var(--s-6); margin: var(--s-3) 0 0; }
.progress-stat { display: flex; flex-direction: column; gap: 3px; }
.progress-stat-num { font-size: var(--t-2); color: var(--ink); font-weight: 600; line-height: 1; }
.progress-stat-unit { font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }

.progress-detail-sub {
  margin: var(--s-4) 0 var(--s-2);
  font-size: var(--t--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.progress-detail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.progress-detail-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line);
}
.progress-detail-list li:last-child { border-bottom: none; }
.pd-ex-name { font-weight: 550; }
.pd-ex-meta { color: var(--ink-faint); font-size: var(--t--1); white-space: nowrap; }
.progress-detail-empty { margin: var(--s-3) 0 0; color: var(--ink-faint); font-size: var(--t--1); }

/* ---- non-graphical fallback: every muscle, ranked, with a word (not colour) ---- */
.progress-fallback { border-top: 1px solid var(--line); padding-top: var(--s-3); }
.progress-fallback > summary {
  cursor: pointer;
  color: var(--ink-dim);
  font-size: var(--t--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  list-style: revert;
}
.progress-fallback > summary:hover { color: var(--ink); }
.progress-fallback-list { list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.progress-fallback-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line);
}
.progress-fallback-list li:last-child { border-bottom: none; }
.pf-name { font-weight: 550; }
.pf-meta { display: inline-flex; align-items: baseline; gap: var(--s-3); color: var(--ink-faint); }
.pf-word { font-size: var(--t--1); letter-spacing: 0.04em; }
.pf-count { font-size: var(--t--1); color: var(--ink-dim); white-space: nowrap; }