/* Responsive
 * Phone-width adjustments, kept together and loaded last.
 *
 * This block spans several components — header, wheel, stat row, reflect card —
 * so it lives on its own rather than inside any one of them. Lifted from the
 * prototype unchanged.
 */

@media (max-width: 480px) {
  .brand h1 { font-size: 22px; }
  .wheel-center .num { font-size: 32px; }
  /* Narrower cells on a phone, so three weeks are visible rather than one and
     two slivers.
     
     No side padding on .weeknav any more: it is a scroll container, and
     padding on it would offset the snap centre. The strip's own padding is
     what lets the first and last week reach the middle. */
  .weeknav { --weekcell: 132px; }
  .modeToggle { display: flex; }
  .modeToggle button { flex: 1; white-space: nowrap; }
  /* Smaller circles. They were 78px (92px for the total) and took 136px of a
     385px header with their labels — a lot of a phone screen for seven numbers
     you scroll past. The row still scrolls horizontally; only the size
     changed. */
  .stat-item { width: 64px; gap: 6px; }
  .statcircle { width: 64px; height: 64px; }
  .statcircle.total-circle { width: 70px; height: 70px; }
  .statcircle .stat-icon svg { width: 21px; height: 21px; }
  .stat-num { font-size: 18px; }
  .statcircle.total-circle .stat-num { font-size: 20px; }
  .stat-label { font-size: 11.5px; max-width: 68px; }
  .statrow { gap: 12px; }
}