/* Fit the complete login experience in a typical desktop/laptop viewport. */
@media (min-width: 521px) {
  .login-page { min-height: 100vh; min-height: 100svh; padding: 12px 24px; }
  .login-card { padding: 22px 30px; }
  .login-brand img { width: 46px; height: 46px; }
  .login-heading { margin: 18px 0 17px; }
  .login-heading h1 { font-size: 1.95rem; }
  .login-card form { gap: 10px; }
  .login-card form > label { gap: 5px; }
  .login-card input[type="text"],
  .login-card input[type="password"] { min-height: 42px; padding: 9px 14px; }
  .captcha-heading { margin-bottom: -6px; }
  .captcha-box, .captcha-box img { height: 52px; }
  .captcha-box button { min-height: 52px; }
  .login-card .captcha-input-label { margin-top: -5px; }
  .login-card .captcha-input-label input { min-height: 42px; padding: 9px 14px; }
  .login-card .login-submit { min-height: 46px; }
  .login-register { margin-top: 13px; }
  .session-expiry { margin-top: 15px; padding: 10px 12px; }
  .login-card .logout-form { margin-top: 9px; }
}

@media (min-width: 521px) and (max-height: 760px) {
  .login-page { padding-top: 8px; padding-bottom: 8px; }
  .login-card { padding: 16px 26px; }
  .login-brand img { width: 40px; height: 40px; }
  .login-heading { margin: 11px 0; }
  .login-heading h1 { font-size: 1.72rem; }
  .login-card form { gap: 7px; }
  .login-card form > label { gap: 4px; }
  .login-card input[type="text"],
  .login-card input[type="password"] { min-height: 39px; padding: 7px 12px; }
  .captcha-box, .captcha-box img { height: 46px; }
  .captcha-box button { min-height: 46px; }
  .login-card .captcha-input-label input { min-height: 39px; padding: 7px 12px; }
  .login-card .login-submit { min-height: 42px; }
  .login-register { margin-top: 8px; }
}

/* Add breathing room when there is enough height, without reintroducing
   scrolling on short laptop-sized viewports. */
@media (min-width: 521px) and (min-height: 600px) and (max-height: 760px) {
  .login-page { padding-top: 12px; padding-bottom: 12px; }
  .login-card { padding: 24px 30px; }
  .login-brand img { width: 44px; height: 44px; }
  .login-heading { margin: 16px 0 15px; }
  .login-heading h1 { font-size: 1.82rem; }
  .login-card form { gap: 11px; }
  .login-card form > label { gap: 5px; }
  .login-card input[type="text"],
  .login-card input[type="password"] { min-height: 42px; padding: 9px 13px; }
  .captcha-box, .captcha-box img { height: 50px; }
  .captcha-box button { min-height: 50px; }
  .login-card .captcha-input-label input { min-height: 42px; padding: 9px 13px; }
  .login-card .login-submit { min-height: 45px; }
  .login-register { margin-top: 12px; }
}