/* Comfortable reading and touch controls on phones. */
@media (max-width: 760px) {
  body { font-size: 16px; }
  main { margin: 0 16px; padding-top: 26px; }
  header { padding: 0 16px; }
  h1 { font-size: 28px; line-height: 1.25; }
  .intro { gap: 20px; }
  .intro>.primary { width: 100%; }
  .sub, .muted, .info-grid p, .rotation-note p:last-child { font-size: 14px; line-height: 1.65; }
  .eyebrow { font-size: 11px; line-height: 1.5; }
  .primary, .small-btn, .text-btn { min-height: 44px; font-size: 14px; }
  .text-btn { padding: 10px 4px; }
  .next, .summary { padding: 22px; }
  .next-top { font-size: 11px; letter-spacing: 1px; }
  .hero-date { font-size: 15px; line-height: 1.6; }
  .hero-time { font-size: 26px; }
  .hero-bottom { font-size: 14px; gap: 12px; }
  .pill { font-size: 12px; padding: 6px 9px; }
  .stats { gap: 8px; }
  .stats strong { font-size: clamp(24px, 7vw, 31px); }
  .stats span { font-size: 12px; line-height: 1.5; }
  .toolbar { gap: 16px; padding: 16px 12px; }
  .month-nav { width: 100%; justify-content: space-between; gap: 8px; }
  .month-nav h2 { font-size: 19px; }
  .month-nav>button:not(.text-btn) { width: 44px; height: 44px; }
  #jump { width: 155px; min-height: 44px; font-size: 16px; }
  .views { margin-left: auto; }
  .views button { min-height: 44px; font-size: 14px; padding: 8px 12px; }
  .calendar-layout { display: flex; flex-direction: column; }
  aside { order: -1; padding: 22px 18px; border-top: 0; border-bottom: 1px solid var(--border); }
  aside h2 { font-size: 20px; }
  aside .detail-number { font-size: 29px; margin-bottom: 16px; overflow-wrap: anywhere; }
  .detail-line { font-size: 15px; padding: 14px 0; }
  .detail-total { font-size: 15px; }
  .detail-total strong { font-size: 24px; }
  .calendar-layout>div { padding: 16px 8px; }
  .weekdays { font-size: 12px; }
  .day { min-height: 112px; padding: 7px 3px; gap: 5px; }
  .day.selected { padding: 6px 2px; }
  .day .num { font-size: 13px; }
  .day strong { font-size: 11px; }
  .day small { font-size: 11px; letter-spacing: 0; line-height: 1.5; }
  .day .time-divider { display: block; height: 0; overflow: hidden; }
  .day .custom-mark { font-size: 8px; }
  .list-row { grid-template-columns: 1fr 1fr; font-size: 15px; line-height: 1.6; gap: 3px 12px; padding: 15px 12px; min-height: 86px; }
  .list-row>strong, .list-row>small { text-align: right; overflow-wrap: anywhere; }
  .list-row>small { font-size: 15px; }
  .legend { font-size: 12px; gap: 12px; line-height: 1.7; }
  .notice, .data-note, .rotation-note { padding: 20px; }
  h3 { font-size: 17px; line-height: 1.5; }
  footer { font-size: 12px; flex-wrap: wrap; }
  dialog { padding: 22px; max-height: calc(100dvh - 24px); max-width: calc(100% - 24px); }
  label { font-size: 15px; }
  input, select { font-size: 16px; min-height: 46px; }
  .calc { font-size: 14px; gap: 12px; }
  .dialog-actions { position: sticky; bottom: -22px; background: var(--surface); padding: 14px 0; margin-bottom: -12px; }
  #toast { max-width: calc(100% - 24px); width: max-content; font-size: 14px; }
}
@media (max-width: 360px) {
  main { margin: 0 10px; }
  .next, .summary { padding: 18px; }
  .day strong { font-size: 10px; }
  .day small { font-size: 10px; }
  .month-nav h2 { font-size: 17px; }
}