/* Shared mobile layer loaded after each page stylesheet. */
@media (max-width: 760px) {
  html, body { min-width: 0; overflow-x: hidden; }
  body { padding-bottom: env(safe-area-inset-bottom); }
  .site-nav { width: 100% !important; }
  .site-brand { min-width: 0; max-width: calc(100% - 54px); }
  .site-brand > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hero h1, .catalog-heading h1, .album-heading h1, .posts-heading h1, .account-heading h1, .admin-heading h1 { max-width: 100%; overflow-wrap: anywhere; }
  .catalog-page, .album-page, .posts-page, .account-page, .admin-page { width: 100%; }
  .catalog-toolbar, .post-filters, .account-actions, .toolbar { min-width: 0; }
  .catalog-toolbar input, .catalog-toolbar select, .post-filters input, .post-filters select, .toolbar input { max-width: 100%; }
  .catalog-status, .results-line { flex-wrap: wrap; line-height: 1.5; }
  .account-grid { gap: 9px; }
  .account-card { min-width: 0; overflow: hidden; }
  .sql-layout { min-width: 0; }
  .sql-browser-top, .sql-toolbar { min-width: 0; }
  .sql-toolbar { flex-wrap: wrap; white-space: normal; }
  .logout-dialog, dialog { width: min(calc(100vw - 24px), 430px); max-width: calc(100vw - 24px); }
  dialog form, .post-form { width: 100%; min-width: 0 !important; }
  .logout-actions { flex-wrap: wrap; }
  .logout-actions button, .submit-post, .new-post-button, .discord-invite { min-height: 42px; }
  .catalog-pagination button, .album-pagination button, .pagination button { min-height: 40px; }
}
@media (max-width: 480px) {
  .site-nav-links { grid-template-columns: 1fr 1fr; }
  .catalog-grid, .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .catalog-card, .album-card { padding: 7px; }
  .account-grid { grid-template-columns: 1fr; }
  .catalog-page, .album-page, .posts-page, .account-page, .admin-page { padding-left: 12px; padding-right: 12px; }
  .sql-sidebar { max-height: 220px; }
  .hero { gap: 18px; }
  .hero h1 { font-size: clamp(52px, 19vw, 72px); }
  .hero p:not(.eyebrow) { margin-top: 16px; font-size: 13px; }
}
@media (max-width: 360px) {
  .site-nav-links { width: calc(100vw - 24px); }
  .site-nav-links a { font-size: 10px; padding-inline: 7px; }
}