/* v3.59: compact records layout only. Storage and calendar behavior stay unchanged. */
@media(max-width:800px) {
  #view-records {
    display:grid;
    grid-template-columns:78px minmax(0,1fr);
    grid-auto-rows:max-content;
    align-content:start;
    gap:4px 6px;
    min-height:0;
    max-height:calc(100dvh - var(--header) - var(--nav));
    padding:4px 10px 8px;
    overflow-y:auto;
    overflow-x:hidden;
    scroll-padding-bottom:8px;
  }
  #view-records>* {grid-column:1/-1;min-width:0}
  #view-records .records-heading {
    grid-column:1;
    grid-row:1;
    min-height:40px;
    margin:0;
    padding:0;
    align-items:center;
  }
  #view-records .records-heading small {font-size:10px;line-height:1.15}
  #view-records .records-heading h1 {font-size:24px;line-height:1.05;margin:1px 0 0}
  #view-records .records-month-tools {
    grid-column:2;
    grid-row:1;
    min-height:40px;
    margin:0;
    padding:2px 3px;
    gap:3px;
  }
  #view-records .records-month-tools input {min-height:34px;padding:2px 0;font-size:14px}
  #view-records .records-month-tools button {min-height:34px;min-width:28px;padding:2px 5px}
  #view-records .records-month-tools #recordsAll {min-height:34px;padding-inline:6px;font-size:11px}
  #view-records #recordStats {order:1;gap:4px;grid-template-columns:repeat(3,minmax(0,1fr))}
  #view-records #recordStats>.record-stat {
    height:46px;
    min-height:46px;
    padding:3px 4px;
    gap:1px;
    border-radius:12px;
  }
  #view-records #recordStats>.record-stat strong {
    font-size:clamp(14px,4.1vw,17px);
    line-height:1.1;
    letter-spacing:-.3px;
  }
  #view-records #recordStats>.record-stat small {font-size:10.5px;line-height:1.1}
  #view-records #recordStats>.record-upload {gap:1px}
  #view-records #recordStats>.record-upload strong {font-size:11.5px;line-height:1.1;letter-spacing:0}
  #view-records .record-upload-icon {font-size:18px;line-height:1}
  #view-records .records-calendar {
    order:2;
    margin:0;
    padding:6px 8px;
    border-radius:14px;
  }
  #view-records .records-calendar>summary {
    min-height:28px;
    padding-left:27px;
    font-size:14px;
    line-height:1.1;
  }
  #view-records .records-calendar>summary::before {width:21px;height:23px;top:1px}
  #view-records .records-calendar>summary::after {font-size:22px;line-height:1}
  #view-records .records-calendar-caption {font-size:10px;line-height:1.1;margin-top:1px}
  #view-records .record-weekdays {margin:4px 0 3px;font-size:11px;line-height:1.1;gap:3px}
  #view-records .record-calendar-grid {gap:3px}
  #view-records .record-calendar-day {
    height:34px;
    min-height:34px;
    padding:1px;
    font-size:14px;
    line-height:1.05;
    border-radius:7px;
  }
  #view-records .record-calendar-day small {font-size:9px;line-height:1.05}
  #view-records .records-list-heading {order:3;min-height:21px;margin:0}
  #view-records .records-list-heading h2 {font-size:16px;line-height:1.15}
  #view-records #recordsMessage {order:4;margin:0;font-size:12px;line-height:1.3}
  #view-records #recordsMessage:empty {display:none}
  #view-records .personal-record-list {order:5;gap:8px;align-self:start}
  #view-records .records-empty {
    min-height:0;
    padding:8px 12px;
    border-radius:16px;
  }
  #view-records .records-empty strong {font-size:17px;line-height:1.2;letter-spacing:-.4px}
  #view-records .records-empty p {font-size:11px;line-height:1.25;margin:3px 0 6px}
  #view-records .records-empty .record-primary {
    min-height:44px;
    margin-top:3px;
    padding:6px 12px;
    font-size:13px;
    border-radius:12px;
  }
  #view-records #recordsMore {order:6;margin-top:0}
  #view-records .record-more-stats {order:7;margin:2px 0 0}
  #view-records .record-more-stats>summary {min-height:28px;padding:5px 0;font-size:11px;line-height:1.3}
  #view-records .records-storage-tools {order:8;margin-top:4px;padding-top:6px}
}
@media(max-width:800px) and (max-height:780px) {
  #view-records .record-calendar-day {height:30px;min-height:30px;font-size:13px}
  /* Keep the action visible; the description is optional guidance. */
  #view-records .records-empty p {display:none}
}
@media(max-width:360px) {
  #view-records {grid-template-columns:70px minmax(0,1fr);padding-inline:8px;column-gap:4px}
  #view-records .records-heading h1 {font-size:23px}
  #view-records .records-month-tools {gap:2px;padding-inline:2px}
  #view-records .records-month-tools input {font-size:13px}
  #view-records .records-month-tools button {min-width:26px;padding-inline:4px}
  #view-records .records-empty strong {font-size:16px}
}