@media (max-width: 920px) {
  .app-shell, .masthead, .footer-inner { max-width: none; }
}
@media (max-width: 720px) {
  .app-header h1 { font-size: 30px; }
  .masthead { padding: var(--space-6) var(--space-4) var(--space-5); }
  .app-shell { padding: var(--space-4) var(--space-3) var(--space-6); }
  .filter-bar { padding: var(--space-2); top: var(--space-2); }
  .toolbar-row { flex-direction: column; align-items: stretch; }
  .sort-label { justify-content: space-between; }
  .footer-inner { flex-direction: column; gap: var(--space-4); }
  .footer-note { text-align: center; }
}
@media (max-width: 420px) {
  .app-header h1 { font-size: 26px; }
  .meta-row { flex-direction: column; gap: var(--space-1); }
  .list-row .secondary { display: none; }
}
@media (max-width: 375px) {
  body { font-size: 16px; }   /* fallback for very narrow screens */
}