/* Mobile login uses the visible viewport; a short viewport scrolls from the top. */
@media (max-width: 760px) {
  .login-page {
    min-height: 100svh;
    min-height: 100dvh;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    justify-content: flex-start;
  }
  .login-box { width: 420px; max-width: 100%; margin-block: auto; flex-shrink: 0; }
  .login-box .brand { min-width: 0; }
  .login-box .brand span { overflow-wrap: anywhere; }
  /* Keep iOS input focus from zooming the page. */
  html body input, html body select, html body textarea { font-size: 16px !important; }
  .overlay {
    height: 100dvh;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    overflow: hidden;
  }
  .overlay > .modal { max-height: 100%; min-width: 0; overscroll-behavior-y: contain; }
  dialog[open] { overscroll-behavior-y: contain; }
  html:has(.overlay), body:has(.overlay), html:has(dialog:modal), body:has(dialog:modal) { overflow: hidden; }
}