/* v3.57: fit the records overview on phones. Details and saved records
   retain natural height and scrolling; no data or controls are hidden. */
@media (max-width:800px) {
  #view-records {padding:8px 12px 14px;overflow-y:auto;overflow-x:hidden}
  #view-records .records-heading {
    min-height:clamp(48px,9dvh,72px);padding:4px 2px;margin:0 0 6px;
    align-items:center;
  }
  #view-records .records-heading::before {inset:-8px -12px -5px}
  #view-records .records-heading small {font-size:11px;line-height:1.3}
  #view-records .records-heading h1 {font-size:28px;line-height:1.15;margin:2px 0}
  #view-records .records-heading .record-primary {
    min-height:44px;margin:0;padding:8px 13px;font-size:14px;border-radius:14px;
  }
  #view-records .records-month-tools {min-height:44px;margin:0 0 6px;padding:2px 5px;gap:4px}
  #view-records .records-month-tools input {min-height:38px;padding:3px;font-size:15px}
  #view-records .records-month-tools button {min-height:40px;min-width:36px;padding:4px 8px}
  #view-records .records-month-tools #recordsAll {min-height:40px;font-size:12px}
  #view-records #recordStats {gap:8px}
  #view-records #recordStats>.record-stat {
    min-height:clamp(62px,11dvh,88px);padding:9px 8px 9px 43px;border-radius:16px;gap:2px;
  }
  #view-records #recordStats>.record-stat::before {left:9px;width:27px;height:31px;top:calc(50% - 15px)}
  #view-records #recordStats>.record-stat strong {font-size:25px;line-height:1.15;letter-spacing:-.6px}
  #view-records #recordStats>.record-stat small {font-size:11px;line-height:1.3}
  #view-records .record-more-stats {margin:4px 0 6px}
  #view-records .record-more-stats>summary {font-size:10px;line-height:1.4;padding:2px 0}
  #view-records .records-calendar {padding:9px 12px;margin:0 0 6px;border-radius:15px}
  #view-records .records-calendar>summary {min-height:34px;padding-left:33px;font-size:15px;line-height:1.3}
  #view-records .records-calendar>summary::before {width:24px;height:27px;top:3px}
  #view-records .records-calendar>summary::after {font-size:25px;line-height:1.2}
  #view-records .records-calendar-caption {font-size:10px;line-height:1.3;margin-top:2px;padding-right:17px}
  #view-records .records-list-heading {margin:0 0 5px;min-height:23px}
  #view-records .records-list-heading h2 {font-size:17px;line-height:1.3}
  #view-records .personal-record-list {gap:9px}
  #view-records .records-empty {min-height:0;padding:14px 16px;border-radius:18px}
  #view-records .records-empty strong {font-size:20px;line-height:1.3;letter-spacing:-.6px}
  #view-records .records-empty p {max-width:none;font-size:12px;line-height:1.4;margin:6px 0 10px}
  #view-records .records-empty .record-primary {min-height:44px;padding:8px 14px;font-size:13px;border-radius:12px}
  #view-records .records-storage-tools {margin-top:12px;padding-top:9px;font-size:10px}
  #view-records .records-storage-tools>div {margin-top:6px;gap:7px}
  #view-records .records-storage-tools button,
  #view-records .records-import-label {min-height:36px;font-size:11px}
}
@media (max-width:800px) and (max-height:660px) {
  #view-records {padding:5px 10px 10px}
  #view-records .records-heading {min-height:43px;padding:0 2px;margin-bottom:4px}
  #view-records .records-heading h1 {font-size:25px;line-height:1.1}
  #view-records .records-heading small {font-size:10px}
  #view-records .records-month-tools {margin-bottom:4px}
  #view-records #recordStats>.record-stat {min-height:57px;padding-block:6px}
  #view-records #recordStats>.record-stat strong {font-size:23px}
  #view-records .record-more-stats {margin:2px 0 4px}
  #view-records .records-calendar {padding:6px 10px;margin-bottom:4px}
  #view-records .records-calendar>summary {min-height:33px;font-size:14px}
  #view-records .records-list-heading {min-height:20px;margin-bottom:4px}
  #view-records .records-list-heading h2 {font-size:16px}
  #view-records .records-empty {padding:10px 13px}
  #view-records .records-empty strong {font-size:18px;line-height:1.25}
  #view-records .records-empty p {font-size:11.5px;line-height:1.3;margin:4px 0 7px}
}