:root {
  --keyboard-inset: 0px;
  --native-keyboard-inset: 0px;
}

.auth-screen,
.login-screen {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(
    24px,
    calc(16px + env(safe-area-inset-bottom, 0px)),
    var(--keyboard-inset, 0px)
  );
}

@media (max-height: 700px) and (orientation: landscape) {
  .auth-screen,
  .login-screen {
    align-content: start;
    place-items: start center;
  }
}

html.keyboard-open .auth-screen,
html.keyboard-open .login-screen {
  align-content: start;
  place-items: start center;
  min-height: 100dvh;
  padding-bottom: max(24px, var(--keyboard-inset, 0px));
}

html.keyboard-open .auth-card,
html.keyboard-open .login-card {
  margin-bottom: 12px;
}