/* Shared raised placement for public authentication only. No transforms: long
   forms stay in normal flow and remain scrollable on short screens/keyboards. */
#loginScreen,body:has(#login:not([hidden])){
    --auth-card-top:max(calc(env(safe-area-inset-top,0px) + 24px),clamp(32px,12svh,104px));
    --auth-card-bottom:max(24px,env(safe-area-inset-bottom,0px));
    --auth-card-shadow:0 22px 60px rgba(31,47,72,.13);
}
#loginScreen:not(.hidden){display:block;padding:0;overflow-y:auto;overscroll-behavior:contain}
#loginScreen .auth-portal{
    display:block;min-height:100vh;min-height:100svh;
    padding:var(--auth-card-top) 24px var(--auth-card-bottom);
}
#loginScreen .auth-portal-footer{display:none}
#loginScreen .login-card{
    width:100%;max-width:320px;min-height:0;margin:0 auto;
    grid-template-columns:minmax(0,1fr);align-self:start;
    border-radius:18px;box-shadow:var(--auth-card-shadow);
}
#loginScreen.auth-checking:after{top:var(--auth-card-top);left:calc(50% - 15px)}
#loginScreen .auth-promo{min-height:0;padding:10px 16px}
#loginScreen .auth-promo-brandline{gap:10px}
#loginScreen .auth-home-link img{width:28px;height:28px;border-radius:9px}
#loginScreen .auth-promo-badge{gap:6px;font-size:10px;letter-spacing:.08em}
#loginScreen .auth-promo-badge:before{width:11px}
#loginScreen .auth-promo h1{margin:6px 0 4px;font-size:19px}
#loginScreen .auth-promo p{font-size:11px;line-height:1.35}
#loginScreen .auth-feature-list{display:none}
#loginScreen .auth-form-panel{padding:14px 16px}
#loginScreen .auth-form-heading h2{font-size:20px}
#loginScreen .form-group input{height:40px;font-size:16px}
body:has(#login:not([hidden])) main{
    display:block;align-content:start;min-height:100vh;min-height:100svh;max-width:none;
    padding:var(--auth-card-top) 24px var(--auth-card-bottom);
}
#login{
    width:100%;max-width:320px;margin:0 auto;padding:18px 16px;
    border-radius:18px;box-shadow:var(--auth-card-shadow);
}
#loginScreen #registerForm > .form-group{margin-bottom:16px}
/* Keep accessible field names without duplicating the placeholder visually. */
#loginScreen #registerForm .form-group label{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
/* Stable editable text size on touch devices; do not disable pinch zoom. */
#loginScreen .form-group input:not([type=checkbox]){font-size:18px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
#loginScreen .form-group input:focus{border-color:#a1adbd;box-shadow:none;outline:none}
@media(pointer:fine){
    /* A border-color change is enough: no inset or outer focus ring. */
    #loginScreen .form-group input:focus-visible{border-color:#64748b;box-shadow:none;outline:none;outline-offset:0}
}
/* Roomier phone forms; desktop keeps its compact width and placement. */
@media(max-width:600px){
    #loginScreen .auth-portal,body:has(#login:not([hidden])) main{padding-left:16px;padding-right:16px}
    #loginScreen .login-card,#login{max-width:420px;width:100%}
    #loginScreen .auth-promo{padding:16px 20px}
    #loginScreen .auth-home-link img{width:34px;height:34px}
    #loginScreen .auth-promo-badge{font-size:11px}
    #loginScreen .auth-promo h1{font-size:24px;margin:10px 0 6px}
    #loginScreen .auth-promo p{font-size:13px;line-height:1.45}
    #loginScreen .auth-form-panel{padding:20px}
    #loginScreen .auth-form-heading h2{font-size:25px}
    #loginScreen .auth-form-heading p{font-size:13px;margin:6px 0 18px}
    #loginScreen .form-group input{height:48px;font-size:16px}
    #loginScreen .form-group label,#loginScreen .auth-form-meta,
    #loginScreen .auth-forgot-password,#loginScreen .auth-form-link,
    #loginScreen .auth-form-alternate,#loginScreen .auth-terms,
    #loginScreen .register-note{font-size:13px}
    #loginScreen .login-btn{height:50px;font-size:16px}
    #login{padding:24px 20px}
    #login .login-heading h2{font-size:28px}
    #login .login-heading p{font-size:14px}
    #login input{height:48px;min-height:48px}
    #login .login-field{margin-bottom:14px}
    #login #togglePassword{height:46px;min-height:46px}
    #login .primary{min-height:50px}
    #login .login-help,#login .login-help span{font-size:13px}
}