/* Keep authentication readable above the compact operational typography. */
.login-layout-main,
.login-layout .auth-card,
.login-layout .auth-intro > div,
.login-layout .auth-form { min-width: 0; }

.login-layout .auth-form input { width: 100%; min-width: 0; }

@media (max-width: 760px), (max-width: 960px) and (max-height: 500px) {
    .login-layout {
        min-height: 100vh;
        min-height: 100svh;
        align-items: start;
        padding: max(20px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    }

    .login-layout .auth-shell { display: block; padding: 0; }
    .login-layout .auth-card {
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
        padding: 24px 20px;
        border-radius: 10px;
    }

    .login-layout .auth-intro { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-bottom: 18px; }
    .login-layout .auth-intro img { width: 140px; max-width: 60%; height: auto; }
    .login-layout .auth-intro h1 { font-size: 28px !important; line-height: 1.15 !important; }
    .login-layout .auth-intro .eyebrow { font-size: 11px !important; line-height: 1.4 !important; }
    .login-layout .muted,
    .login-layout .auth-help,
    .login-layout .auth-security-note,
    .login-layout .alert { font-size: 14px !important; line-height: 1.5; }
    .login-layout .auth-form { gap: 18px; margin-top: 20px; }
    .login-layout .auth-form label { gap: 8px; font-size: 14px; }
    /* iOS focuses small inputs by zooming the whole page. Keep native zoom enabled. */
    .login-layout .auth-form input { min-height: 48px; padding: 12px; font-size: 16px !important; }
    .login-layout .auth-form button { min-height: 50px; padding: 12px 16px; margin-top: 0; font-size: 16px !important; }
    .login-layout .auth-card > .button { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 16px; font-size: 16px !important; }
    .login-layout .auth-support { margin-top: -4px; }
    .login-layout .auth-support a,
    .login-layout .auth-back-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px !important; }
    .login-layout .auth-help { margin-top: 18px; padding-top: 16px; }
}

@media (max-height: 500px) and (max-width: 960px) {
    .login-layout { align-items: start; padding-top: max(12px, env(safe-area-inset-top, 0px)); }
}