/* Login-only spacing scales with viewport height; keep laptop controls in view. */
#login-view{--auth-air:clamp(0px,calc(8svh - 54.4px),16px);--auth-air-half:clamp(0px,calc(4svh - 27.2px),8px);grid-template-areas:"form story";grid-template-columns:1fr 1.1fr;align-items:stretch;min-height:100svh}
html[lang=en] #login-view{grid-template-areas:"story form";grid-template-columns:1.1fr 1fr}
#login-view .auth-story{grid-area:story;min-height:100svh;padding:clamp(24px,4vw,64px);justify-content:center;gap:32px}
#login-view .auth-story footer{position:absolute;bottom:24px;left:32px;right:32px}
#login-view .auth-story h1{font-size:clamp(32px,3.5vw,54px);line-height:1.5;margin:18px 0 12px}
#login-view .brand-services{margin:24px 0}
#login-view .auth-form{grid-area:form;align-self:start;width:420px;max-width:calc(100% - 64px);min-height:0;margin:0 auto;padding:clamp(16px,3vh,30px) 0;direction:rtl}
html[lang=en] #login-view .auth-form{direction:ltr}
#login-view .auth-language{margin:0 0 calc(12px + var(--auth-air-half))}
#login-view .locale-switch{min-height:32px;padding:4px 12px}
#login-view .auth-brand{margin:0 0 calc(20px + var(--auth-air));gap:5px}
#login-view .auth-brand img{width:148px;height:auto}
#login-view .auth-brand span{font-size:11px;line-height:1.4}
#login-view .small-label{font-size:12px;margin:0 0 6px}
#login-view h2{font-size:28px;line-height:1.4;margin:0 0 10px}
#login-view .auth-form>.muted{font-size:13px;line-height:1.5;margin:0 0 calc(18px + var(--auth-air-half))}
#login-view form{margin-top:0}
#login-view label{font-size:13px;line-height:1.5;margin:0 0 calc(18px + var(--auth-air-half))}
#login-view input{height:44px;min-height:44px;margin-top:6px;padding:9px 12px;font-size:14px}
#login-view .btn{min-height:44px;padding:10px 14px;margin-top:0;font-size:13px}
#login-view #microsoft-login{margin-top:calc(12px + var(--auth-air-half));justify-content:center}
#login-view #microsoft-login-status{margin:12px 0 0;font-size:12px;line-height:1.5}
#login-view .error:empty{display:none}
#login-view .login-note{margin-top:calc(16px + var(--auth-air-half));font-size:11px;line-height:1.5}
#login-view .auth-version{margin:calc(18px + var(--auth-air-half)) 0 0;line-height:1.5;font-size:10px;letter-spacing:.25px}
#login-view .auth-version:last-child{margin-top:8px}
@media(min-width:801px) and (max-height:720px){
 #login-view .auth-form{padding:10px 0}
 #login-view .auth-language{margin-bottom:4px}
 #login-view .auth-brand{margin-bottom:18px}
 #login-view label{margin-bottom:10px}
 #login-view form{margin-top:0}
 #login-view h2{margin-bottom:8px}
 #login-view .auth-form>.muted{margin-bottom:14px}
 #login-view #microsoft-login-status{margin-top:8px}
 #login-view .auth-version{margin-top:14px}
 #login-view .login-note{margin-top:10px}
 #login-view .auth-story h1{font-size:36px}
}
@media(min-width:801px) and (max-height:620px){
 #login-view .auth-form{padding:8px 0}
 #login-view .auth-brand{margin-bottom:14px}
 #login-view .small-label{margin-bottom:4px}
 #login-view h2{font-size:26px;line-height:1.35}
 #login-view .auth-version{margin-top:10px}
 #login-view #microsoft-login-status{font-size:11px}
}
@media(max-width:800px){
 #login-view,html[lang=en] #login-view{display:block;min-height:100svh}
 #login-view .auth-form{max-width:calc(100% - 40px);padding:22px 0;min-height:0}
}