/* Authentication has one natural page flow. Never trap the form in a second
   viewport-height scroll container: extra fields/errors must stay reachable. */
.vis-ui .login-shell {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  grid-template-rows: auto;
  overflow: visible;
}
.vis-ui .login-shell > .login-panel {
  height: auto;
  min-height: 0;
  max-height: none;
  padding: clamp(24px, 4dvh, 48px) clamp(24px, 4vw, 64px);
  overflow: visible;
  overscroll-behavior: auto;
}
.vis-ui .login-shell > .login-brand {
  height: auto;
  min-height: calc(100dvh - 36px);
}
.vis-ui .login-shell #login-form {
  width: min(440px, 100%);
  padding: clamp(22px, 3dvh, 32px) clamp(24px, 3vw, 36px);
}
.vis-ui .login-shell #login-form > p:not(.eyebrow) { margin: 10px 0 24px; }
.vis-ui .login-shell #login-form .field { margin-bottom: 16px; }
@media (min-width: 901px) and (max-height: 820px) {
  .vis-ui .login-shell > .login-brand { padding-block: 28px; }
  .vis-ui .login-shell .login-copy { padding-block: 12px; margin-block: 20px; }
  .vis-ui .login-shell .login-copy h1 { font-size: clamp(34px, min(4.3vw, 7dvh), 58px); }
  .vis-ui .login-shell #login-form h2 { font-size: 32px; }
  .vis-ui .login-shell #login-form > .eyebrow { margin-bottom: 10px; }
  .vis-ui .login-shell #login-form > p:not(.eyebrow) { margin: 8px 0 20px; }
  .vis-ui .login-shell #login-form .field { margin-bottom: 14px; }
  .vis-ui .login-shell #login-form .auth-divider { margin-block: 10px; }
}
@media (max-width: 900px) {
  .vis-ui .login-shell > .login-panel {
    min-height: calc(100dvh - 24px);
    padding: 56px max(16px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  }
  .vis-ui .login-shell #login-form { padding: 24px; }
  .vis-ui .login-shell #login-form .mobile-logo { width: 128px; margin-bottom: 24px; }
}
@media (max-width: 900px) and (max-height: 720px) {
  .vis-ui .login-shell > .login-panel { padding-block: 48px max(16px, env(safe-area-inset-bottom, 0px)); }
  .vis-ui .login-shell #login-form { padding: 18px 20px; }
  .vis-ui .login-shell #login-form .mobile-logo { width: 112px; margin-bottom: 18px; }
  .vis-ui .login-shell #login-form > p:not(.eyebrow) { margin: 8px 0 16px; }
  .vis-ui .login-shell #login-form .field { margin-bottom: 12px; }
  .vis-ui .login-shell #login-form .auth-divider { margin-block: 10px; }
}