/* Account forms may scroll when a keyboard leaves only a short viewport.
   Learning, games and MyBox retain their own fixed-screen layout. */
body[data-account-form] #app{height:var(--account-visible-height,100dvh);top:var(--account-visible-top,0px)}
body[data-account-form] main{overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scroll-padding-block:12px;-webkit-overflow-scrolling:touch}
body[data-account-form] .auth-layout{height:auto;min-height:100%}
body[data-account-form] .auth-art>img{height:min(50vh,450px);width:90%;max-height:100%}
body[data-account-form] .auth-form{flex-shrink:0}
body[data-account-form] .auth-form>*{flex-shrink:0}
body[data-account-form] .auth-form .field input{min-height:44px;scroll-margin-block:12px}
body[data-account-form] .auth-links{flex-wrap:wrap}
body[data-account-form] .auth-links button{min-height:40px}
body[data-account-form] .signup-form{height:auto;min-height:100%}
body[data-account-form] .signup-form>*{flex-shrink:0}
body[data-account-form] .field input,body[data-account-form] .field select,body[data-account-form] .field textarea{scroll-margin-block:12px}
@media(orientation:portrait){
 body[data-account-form] .auth-layout{grid-template-rows:minmax(100px,28vh) auto}
 body[data-account-form] .auth-art>img{height:100%;width:48%}
}
@media(max-height:420px){
 body[data-account-form] .auth-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;align-content:start}
 body[data-account-form] .auth-art{display:none}
 body[data-account-form] .auth-form{align-self:start;max-width:640px;padding:14px 20px;gap:10px}
 body[data-account-form] .auth-form .field{gap:4px}
 body[data-account-form] .auth-form .field>span{font-size:14px}
 body[data-account-form] .auth-form .field input{height:44px;font-size:18px}
 body[data-account-form] .auth-form .primary{height:44px;min-height:44px;font-size:18px}
 body[data-account-form] .auth-links button{font-size:14px}
 body[data-account-form] .signup-form{justify-content:flex-start}
}
body[data-account-keyboard] #app{padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
body[data-account-keyboard] .app-shell{grid-template-rows:40px minmax(0,1fr);gap:8px}
body[data-account-keyboard] .app-header{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:40px;gap:8px}
body[data-account-keyboard] .header-heading{display:none}
body[data-account-keyboard] .brand-group{grid-column:1;grid-row:1}
body[data-account-keyboard] .header-tools{grid-column:2;grid-row:1}
body[data-account-keyboard] .auth-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;align-content:start}
body[data-account-keyboard] .auth-art{display:none}
body[data-account-keyboard] .auth-form{align-self:start;max-width:640px;padding:12px 16px;gap:10px}
body[data-account-keyboard] .auth-form .field{gap:4px}
body[data-account-keyboard] .auth-form .field>span{font-size:14px}
body[data-account-keyboard] .auth-form .field input{height:44px;font-size:18px}
body[data-account-keyboard] .auth-form .primary{height:44px;min-height:44px;font-size:18px}
body[data-account-keyboard] .auth-links button{font-size:14px}
body[data-account-keyboard] .signup-form{justify-content:flex-start}