/* Progress bar + ring */

.progress {
  position: relative;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--track-bg);
  overflow: hidden;
}

.progress--md { height: 7px; }

.progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  border-radius: var(--r-pill);
  background: var(--fill, var(--day-accent, var(--day-teal)));
  transform-origin: left center;
  transform: scaleX(var(--value, 0));
}

.progress--accent .progress__fill { --fill: var(--accent); }

.ring {
  position: relative;
  width: 112px;
  height: 112px;
}

.ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ring__track { stroke: var(--ring-track); }
.ring__arc { stroke: var(--accent); }

.ring__value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--fs-26);
  font-weight: 700;
  color: var(--text-title);
  font-variant-numeric: tabular-nums;
}

/* Mobile progress card */
.mobile-progress {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: var(--r-xl);
  background: var(--surface-panel);
  border: 1px solid var(--border-panel);
}

.mobile-progress__title { font-size: var(--fs-15); font-weight: 700; color: var(--text-title); }
.mobile-progress__next { font-size: var(--fs-11); color: var(--text-muted); }