/* ============================================================
   PROGRESS — v2 layout
   Hero number is the spotlight. Chart is the supporting evidence.
   Restraint: one accent, generous whitespace.
   ============================================================ */

.progress-empty {
  font: 500 15px/1.55 var(--font-sans);
  color: var(--paper-dim);
  max-width: 340px;
}

/* ── Pill segmented tabs ────────────────────────────────────── */
.prog-tabs {
  margin: var(--space-5) 0 var(--space-2);
  display: flex;
  padding: 4px;
  background: var(--bg-2);
  border: 1px solid var(--hair);
  border-radius: 999px;
}

.prog-tab {
  flex: 1;
  padding: 9px 0;
  text-align: center;
  border-radius: 999px;
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.02em;
  color: var(--paper-dim);
  background: transparent;
  border: 0;
  transition: color var(--motion-state) var(--ease-out-quint),
              background var(--motion-state) var(--ease-out-quint);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.prog-tab--active {
  background: var(--green);
  color: var(--bg);
  font-weight: 700;
}

/* ── Strength: featured-lift picker as the subhead ──────────── */
.prog-lift-picker {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  background: none;
  border: none;
  padding: 0;
  margin: var(--space-7, 32px) 0 var(--space-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.prog-lift-picker-name {
  font: 700 32px/1 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--paper);
}

.prog-lift-picker-chevron {
  font: 600 18px/1 var(--font-mono);
  color: var(--paper-mute);
}

/* Other tabs' static subhead */
.prog-subhead {
  font: 600 13px/1 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--paper-mute);
  text-transform: uppercase;
  margin: var(--space-7, 32px) 0 var(--space-2);
}

/* ── Hero number ────────────────────────────────────────────── */
/* "186.4 lb" with the number doing the lifting and "lb" hugging beside it. */
.prog-hero {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: var(--space-3) 0 var(--space-2);
}

.prog-hero-num {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(72px, 18vw, 88px);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--paper);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

.prog-hero-num--solo {
  margin: var(--space-3) 0 var(--space-2);
}

.prog-hero-unit {
  font: 600 18px/1 var(--font-mono);
  color: var(--paper-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Delta line below the hero number. Color-coded; sized to read as caption. */
.prog-hero-delta {
  font: 600 13px/1.3 var(--font-mono);
  letter-spacing: 0.01em;
  margin: 0 0 var(--space-6);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.prog-hero-delta--positive { color: var(--green); }
.prog-hero-delta--negative { color: var(--red); }
.prog-hero-delta--neutral  { color: var(--paper-dim); }
.prog-hero-delta--empty    {
  color: var(--paper-mute);
  font-weight: 400;
  font-size: 13px;
}

/* ── Chart wrap with crosshair + tooltip ────────────────────── */
.prog-chart-wrap {
  position: relative;
  width: 100%;
  height: 240px;
  margin: var(--space-5) 0 var(--space-3);
}

.prog-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.prog-crosshair {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.25);
  pointer-events: none;
  display: none;
}

.prog-tooltip {
  position: absolute;
  background: var(--bg-3);
  border: 1px solid var(--hair);
  padding: 8px 10px;
  border-radius: 8px;
  font: 600 12px/1.2 var(--font-mono);
  white-space: nowrap;
  pointer-events: none;
  display: none;
  z-index: 5;
  transform: translateX(-50%);
}
.prog-tooltip .tt-date {
  font-size: 10px;
  color: var(--paper-mute);
  margin-top: 3px;
}

.progress-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font: 500 13px/1 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--paper-mute);
}

/* ── Range row (1W / 1M / 3M / 6M / 1Y / ALL) ───────────────── */
.prog-ranges {
  display: flex;
  justify-content: space-between;
  padding: 0 6px;
  margin: var(--space-4) 0 var(--space-7, 32px);
}

.prog-range {
  font: 600 12px/1 var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--paper-mute);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition: all var(--motion-state) var(--ease-out-quint);
}

.prog-range--active {
  background: var(--green-glow);
  color: var(--green);
  border-color: rgba(52, 209, 113, 0.35);
}

/* ── Section eyebrow above lift list / per-lift adherence ───── */
.prog-section {
  padding: 0 var(--space-5);
  margin-top: var(--space-7, 32px);
}

.prog-section-eyebrow {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.18em;
  color: var(--paper-mute);
  text-transform: uppercase;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--hair);
  margin-bottom: var(--space-2);
}

/* ── Adherence calendar ─────────────────────────────────────── */
.adherence-calendar {
  margin: var(--space-4) 0 var(--space-6);
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cal-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-row--header {
  margin-bottom: 6px;
}

.cal-header {
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-mute);
  text-align: center;
}

.cal-cell {
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  background: var(--bg-2);
  border: 1px solid transparent;
  box-sizing: border-box;
  transition: transform var(--motion-state) var(--ease-out-quint);
}
.cal-cell:hover { transform: scale(1.08); }

.cal-cell--logged {
  background: var(--green);
  border-color: var(--green);
}

.cal-cell--missed {
  background: rgba(255, 90, 90, 0.12);
  border-color: rgba(255, 90, 90, 0.28);
}

/* Rest days and future-rest cells are pure negative space. */
.cal-cell--rest,
.cal-cell--future-rest {
  background: transparent;
  border: 1px dashed var(--hair);
}

.cal-cell--future-prescribed {
  background: transparent;
  border: 1px dashed var(--green-dim);
}

.cal-cell--today {
  outline: 1.5px solid var(--paper);
  outline-offset: -1px;
}

/* ── Position / lift list rows ──────────────────────────────── */
.position-row {
  display: grid;
  grid-template-columns: 1fr 80px 80px;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--hair-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--motion-state) var(--ease-out-quint);
}
.position-row:last-child { border-bottom: none; }
.position-row:active     { background: rgba(255, 255, 255, 0.02); }

.position-info { min-width: 0; }

.position-name {
  font: 700 16px/1.15 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--paper);
}

.position-meta {
  font: 500 10px/1.2 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-mute);
  margin-top: 4px;
}

.position-spark {
  height: 28px;
  line-height: 0;
}
.position-spark svg {
  width: 100%;
  height: 28px;
}

.position-values {
  text-align: right;
  min-width: 72px;
}

.position-value {
  font: 700 16px/1 var(--font-mono);
  color: var(--paper);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: -0.005em;
}

.position-change {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.04em;
  margin-top: 4px;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Five-bucket change-color scale per DESIGN.md. */
.pos-change--up         { color: var(--green); }
.pos-change--up-muted   { color: var(--green-dim); }
.pos-change--neutral    { color: var(--paper-mute); }
.pos-change--down-muted { color: var(--red-soft); }
.pos-change--down       { color: var(--red); }

.positions-empty {
  font: 500 13px/1.5 var(--font-mono);
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--paper-mute);
  padding: var(--space-4) 0;
}

/* ── Accessories disclosure ─────────────────────────────────── */
.positions-accessories {
  margin-top: var(--space-4);
  border-top: 1px solid var(--hair);
  padding-top: var(--space-3);
}

.positions-accessories-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font: 600 13px/1 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper-dim);
  cursor: pointer;
  list-style: none;
  padding: var(--space-3) 0;
  -webkit-tap-highlight-color: transparent;
}
.positions-accessories-summary::-webkit-details-marker { display: none; }

.positions-accessories[open]    .positions-accessories-summary::before { content: '▾'; margin-right: var(--space-1); }
.positions-accessories:not([open]) .positions-accessories-summary::before { content: '▸'; margin-right: var(--space-1); }

.positions-accessories-count {
  margin-left: auto;
  background: var(--bg-2);
  border-radius: 10px;
  padding: 2px 8px;
  font: 600 11px/1 var(--font-mono);
  color: var(--paper-mute);
  letter-spacing: 0.04em;
}

/* ── Lift picker bottom sheet rows (Strength tab) ───────────── */
.lift-picker-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--space-4);
}

.lift-picker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  background: var(--bg-2);
  border: 1px solid var(--hair);
  border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.lift-picker-row--active {
  border-color: var(--green);
  background: var(--green-glow);
}

.lift-picker-row-name {
  font: 600 16px/1 var(--font-sans);
  color: var(--paper);
}

.lift-picker-row-pr {
  font: 500 14px/1 var(--font-mono);
  color: var(--paper-dim);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Retired legacy class names (.progress-chart-wrapper, .zoom-row, .zoom-tab,
   .headline-tabs, .headline-tab, .headline-subhead, .hero-line, .hero-unit,
   .change-indicator, .lift-picker, .positions-section, .positions-header)
   are no longer emitted by JS. No CSS rules needed for them. */