/* Fit phone layouts to the layout viewport. Keep deliberate lists scrollable locally. */
@media (max-width: 720px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: auto; }
  #app-shell, #main-content, .topbar, .screen { width: 100%; min-width: 0; }
  #main-content { padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
  .screen > *, .simple-screen form, .checkin-question, .calendar-week-summary,
  .calendar-week-totals > *, .world-hero > *, .progress-section-head > * { min-width: 0; max-width: 100%; }
  .simple-screen { width: 100%; max-width: 100%; }
  .simple-heading h1 { font-size: clamp(26px, 7.6vw, 34px); line-height: 1.18; white-space: normal; overflow-wrap: anywhere; }
  .simple-heading p, .checkin-question-title, .checkin-help, .calendar-week-totals span { overflow-wrap: anywhere; }
  .simple-screen .button, .simple-screen .text-link { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .simple-screen .button.full { width: 100%; text-align: left; }
  .calendar-week-totals { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .calendar-week-summary { padding: 18px 14px; }
  .topbar .brand { min-width: 0; }
  .topbar .profile-button { flex-shrink: 0; }
  #personal-space .progress-section-head { flex-wrap: wrap; }
  #personal-space .progress-welcome h1 { font-size: clamp(28px, 7.6vw, 38px); }
  #personal-space .progress-goal-ring { max-width: 36%; }
  #month.month-screen { width: 100%; min-width: 0; padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)); }
  body[data-view="month"] #main-content, body.chat-open #main-content { padding-inline: 0; }
  .month-weekdays, .month-days { width: 100%; min-width: 0; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .month-day, .month-gap { min-width: 0; max-width: 100%; }
  .month-actions { flex-wrap: wrap; column-gap: 18px; }
  .world-screen, .world-hero, .world-stage, .world-scene-switch { min-width: 0; max-width: 100%; }
  .world-stage canvas, .world-route-overlay { max-width: 100%; }
  .world-scene-switch { flex-wrap: wrap; }
  .world-hero h1, .world-intro, .world-distance { overflow-wrap: anywhere; }
  .site-footer, .footer-policies { min-width: 0; max-width: 100%; flex-wrap: wrap; }
  /* Safari zooms focused inputs below 16px, leaving later pages wider on screen. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]),
  select, textarea { font-size: 16px !important; min-width: 0; max-width: 100%; }
}