/* 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; }
  .weeknav { gap: 0; padding: 0 14px; }
  .weekpeek { flex-basis: 46px; font-size: 13px; }
  .weekpeek.prev { margin-left: -14px; padding-left: 14px; }
  .weekpeek.next { margin-right: -14px; padding-right: 14px; }
  .weeknav .weeklabel { font-size: 16px; min-height: 40px; }
  .weeknav .weeklabel .jumphint { font-size: 11.5px; }
  .modeToggle { display: flex; }
  .modeToggle button { flex: 1; white-space: nowrap; }
  .stat-item { width: 78px; }
  .statcircle { width: 78px; height: 78px; }
  .stat-label { font-size: 12.5px; max-width: 78px; }
}