/* קלורי — page: התקדמות (#/progress). Every selector is prefixed .pg-progress (SPEC §3, §9.5).
   Shared components (cards, stats, charts, lists, sheets) come from components.css;
   only page layout, the BMI scale, the trend card and the sheet bodies live here. */

/* ---------- layout: one column on phones, main + side ≥ 1024px ---------- */
.pg-progress__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}
.pg-progress__col { display: grid; gap: var(--sp-4); min-inline-size: 0; }
.pg-progress__col:empty { display: none; }

@media (min-width: 1024px) {
  .pg-progress__grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: var(--sp-5);
  }
}

/* ---------- stat tiles ---------- */
.pg-progress__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg-progress__stats .stat__value .icon {
  inline-size: 20px;
  block-size: 20px;
  align-self: center;
}
.pg-progress__stats .stat__value bdi { font-variant-numeric: tabular-nums; }
@media (min-width: 600px) {
  .pg-progress__stats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

/* ---------- charts ---------- */
.pg-progress__range { margin-block-end: var(--sp-3); }
.pg-progress__range .field { margin-block-end: 0; }
.pg-progress__range .field__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pg-progress__chart { padding-block: var(--sp-1); }
.pg-progress__chart > .chart { display: block; }
.pg-progress__band-swatch { background: var(--c-primary); opacity: .25; }

/* ---------- trend card ---------- */
.pg-progress__rate {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.3;
}
.pg-progress__rate bdi { font-variant-numeric: tabular-nums; }
.pg-progress__rate-label { margin: 0 0 var(--sp-2); }
.pg-progress__band { margin: 0 0 var(--sp-3); }
.pg-progress__projection {
  margin: 0 0 var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-2);
  background: var(--c-primary-soft);
  color: var(--c-primary-text);
  font-weight: 600;
  font-size: var(--fs-sm);
}
.pg-progress__caveat { margin: 0; }
.pg-progress__caveat + .pg-progress__caveat { margin-block-start: var(--sp-1); }
.pg-progress__trend[data-status="fast"] .pg-progress__rate,
.pg-progress__trend[data-status="off"] .pg-progress__rate { color: var(--c-warning); }
.pg-progress__trend[data-status="ok"] .pg-progress__rate { color: var(--c-success); }

/* ---------- BMI card ---------- */
.pg-progress__bmi-value {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xl);
  font-weight: 700;
}
.pg-progress__bmi-cat { font-weight: 600; }
.pg-progress__bmi-scale {
  position: relative;
  padding-block: 4px 18px;
  margin-block-end: var(--sp-2);
}
.pg-progress__bmi-bar {
  display: flex;
  block-size: 10px;
  border-radius: var(--r-full);
  overflow: hidden;
  background: var(--c-surface-3);
}
.pg-progress__bmi-seg {
  --w: 25%;
  flex: 0 0 var(--w);
  opacity: .45;
}
.pg-progress__bmi-seg--on { opacity: 1; }
.pg-progress__bmi-seg--underweight { background: var(--c-info); }
.pg-progress__bmi-seg--normal { background: var(--c-success); }
.pg-progress__bmi-seg--overweight { background: var(--c-warning); }
.pg-progress__bmi-seg--obese { background: var(--c-danger); }
.pg-progress__bmi-marker {
  --pos: 0%;
  position: absolute;
  inset-block-start: 0;
  left: var(--pos);
  inline-size: 4px;
  block-size: 18px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--c-text);
  box-shadow: 0 0 0 2px var(--c-surface);
}
.pg-progress__bmi-ticks {
  position: relative;
  block-size: 14px;
  margin-block-start: 2px;
  font-size: var(--fs-xs);
  color: var(--c-text-2);
}
.pg-progress__bmi-ticks > span {
  --pos: 0%;
  position: absolute;
  left: var(--pos);
  transform: translateX(-50%);
}
.pg-progress__bmi-note { margin: 0; }

/* ---------- body fat / waist ---------- */
.pg-progress__bf-current {
  margin: 0 0 var(--sp-2);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-2);
}
.pg-progress__bf .card__actions .btn .icon { inline-size: 20px; block-size: 20px; }

/* ---------- calories ---------- */
.pg-progress__adherence {
  margin: var(--sp-2) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

/* ---------- weight log ---------- */
.pg-progress__log-list { margin: 0; }
.pg-progress__log-row .list__title { font-size: var(--fs-md); }
.pg-progress__log-row .list__end { gap: 0; }
.pg-progress__danger:hover { color: var(--c-danger); background: var(--c-danger-soft); }

/* ---------- empty state ---------- */
.pg-progress__empty { padding-block: var(--sp-6); }

/* ---------- sheets: weigh-in + measurement forms ---------- */
.pg-progress__form { display: grid; gap: 0; }
.pg-progress__form .field--number .input-unit { max-inline-size: none; }
.pg-progress__form input[type="date"].input { max-inline-size: 260px; }
.pg-progress__measure-hint { margin: 0 0 var(--sp-3); }
.pg-progress__live {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-2);
  background: var(--c-surface-2);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}
.pg-progress__live--on {
  background: var(--c-primary-soft);
  color: var(--c-primary-text);
  font-weight: 700;
}
.pg-progress__manual > summary { font-size: var(--fs-sm); }
.pg-progress__manual > .disclosure__body .field { margin-block-end: var(--sp-2); }