/* responsive.css */
@media (min-width: 640px) {
  .cards-grid { max-width:680px; margin:0 auto; }
  #reader-sheet { max-width:560px; left:50%; right:auto; width:560px; transform:translateX(-50%) translateY(100%); }
  #reader-sheet.open { transform:translateX(-50%) translateY(0); }
  #auth-modal { bottom:auto; top:50%; transform:translateY(-50%) translateY(100%); border-radius:20px; }
  #auth-modal.open { transform:translateY(-50%); }
}

@supports (padding-top: env(safe-area-inset-top)) {
  #topbar { padding-top: env(safe-area-inset-top); height: calc(var(--topbar-h) + env(safe-area-inset-top)); }
  #section-nav { top: calc(var(--topbar-h) + env(safe-area-inset-top)); }
  #subnav-track { top: calc(var(--topbar-h) + var(--secnav-h) + env(safe-area-inset-top)); }
  #pages-track { top: calc(var(--topbar-h) + var(--secnav-h) + var(--subnav-h) + env(safe-area-inset-top)); }
}