/* Keep public navigation available while browsing the roster and show cards. */
@media (max-width: 760px) {
  :root {
    --mobile-header-height: calc(68px + env(safe-area-inset-top, 0px));
  }

  html {
    scroll-padding-top: calc(var(--mobile-header-height) + 14px);
  }

  .section-anchor,
  #main-content {
    scroll-margin-top: 0;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    height: var(--mobile-header-height);
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: max(17px, env(safe-area-inset-left, 0px));
    padding-right: max(17px, env(safe-area-inset-right, 0px));
    border-bottom: 1px solid var(--border, #dfdfda);
    background: var(--background, #f5f5f3);
  }

  .mobile-menu,
  .topbar .login-button {
    min-width: 44px;
    min-height: 44px;
  }

  .sidebar {
    width: min(270px, calc(100vw - 44px));
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    padding-top: calc(24px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    padding-left: max(24px, env(safe-area-inset-left, 0px));
    padding-right: 24px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .nav-backdrop {
    touch-action: none;
  }
}