/*
 * Homepage/login centering refinement.
 * Keeps the login card centered on desktop across browser zoom 80%–110%.
 * Loaded after mobile.css so short desktop viewports are not mistaken for
 * compact mobile screens.
 */
@media (min-width: 721px) {
  body:has(#login:not(.hidden)) {
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden !important;
  }

  #login.login-screen:not(.hidden) {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(16px, 3vh, 32px) !important;
    overflow: auto !important;
  }

  #login.login-screen:not(.hidden) .login-card {
    width: min(410px, calc(100vw - 32px)) !important;
    max-height: calc(100dvh - 32px) !important;
    margin: auto !important;
    overflow-y: auto !important;
    flex: 0 0 auto;
  }

  #login.login-screen.hidden {
    display: none !important;
  }
}