/* Keep access forms usable within the available viewport without scaling the page. */
#auth-dialog{max-height:calc(100dvh - 16px);max-width:calc(100vw - 20px);overflow:auto;overscroll-behavior:contain}
#auth-dialog .auth-brand{height:min(200px,27dvh)}
#auth-dialog .auth-brand img{width:min(180px,24dvh);height:min(180px,24dvh);object-fit:contain}
#auth-content .auth-links{flex-wrap:wrap;align-items:center;row-gap:8px}
#auth-content .form-status:empty{display:none}
@media(max-height:650px){
 #auth-dialog[data-mode="login"] .auth-brand{height:min(90px,16dvh)}
 #auth-dialog[data-mode="login"] .auth-brand img{height:min(76px,13dvh);width:140px}
}
#auth-dialog:is([data-mode="register"],[data-mode="invite"]){width:520px}
#auth-dialog:is([data-mode="register"],[data-mode="invite"]) .auth-brand{height:88px}
#auth-dialog:is([data-mode="register"],[data-mode="invite"]) .auth-brand img{height:72px;width:120px;max-width:calc(100% - 90px)}
#auth-dialog:is([data-mode="register"],[data-mode="invite"]) #auth-content{padding:18px 22px}
#auth-dialog:is([data-mode="register"],[data-mode="invite"]) h2{margin:0 0 5px;font-size:23px;line-height:1.2}
#auth-dialog:is([data-mode="register"],[data-mode="invite"]) .auth-intro{margin:0 0 14px;font-size:12px;line-height:1.4}
#auth-dialog:is([data-mode="register"],[data-mode="invite"]) form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 14px}
#auth-dialog:is([data-mode="register"],[data-mode="invite"]) form>*{grid-column:1/-1;min-width:0}
#auth-dialog:is([data-mode="register"],[data-mode="invite"]) form>.field{grid-column:auto;display:flex;flex-direction:column;gap:5px;margin:0;font-size:12px;line-height:1.3}
#auth-dialog:is([data-mode="register"],[data-mode="invite"]) .field input{width:100%;min-width:0;margin:0;height:40px;padding:8px 10px;font-size:16px}
#auth-dialog:is([data-mode="register"],[data-mode="invite"]) .field small{font-size:10px;line-height:1.3;margin:0}
#auth-dialog:is([data-mode="register"],[data-mode="invite"]) .auth-password-confirm{padding-bottom:13px}
#auth-dialog:is([data-mode="register"],[data-mode="invite"]) .auth-verification-note{margin:0;padding:0;border:0;background:none;color:#536981;font-size:11px;line-height:1.4}
#auth-dialog:is([data-mode="register"],[data-mode="invite"]) .check{margin:0;align-items:flex-start;font-size:11px;line-height:1.45;gap:8px}
#auth-dialog:is([data-mode="register"],[data-mode="invite"]) .check input{width:16px;height:16px;flex:0 0 16px;margin:0;accent-color:var(--brand)}
#auth-dialog:is([data-mode="register"],[data-mode="invite"]) .button[type="submit"]{min-height:40px;padding:10px 14px;margin:0}
#auth-dialog:is([data-mode="register"],[data-mode="invite"]) .auth-links{margin:0}
#auth-dialog:is([data-mode="register"],[data-mode="invite"]) .form-status{margin:0;font-size:12px;line-height:1.3}
@media(max-width:420px),(max-height:650px){
 #auth-dialog:is([data-mode="register"],[data-mode="invite"]) .auth-brand{height:68px}
 #auth-dialog:is([data-mode="register"],[data-mode="invite"]) .auth-brand img{height:56px;width:100px}
 #auth-dialog:is([data-mode="register"],[data-mode="invite"]) #auth-content{padding:14px 16px}
 #auth-dialog:is([data-mode="register"],[data-mode="invite"]) .auth-intro{margin-bottom:10px}
 #auth-dialog:is([data-mode="register"],[data-mode="invite"]) form{gap:9px 10px}
 #auth-dialog:is([data-mode="register"],[data-mode="invite"]) form>.field{font-size:11px}
 #auth-dialog:is([data-mode="register"],[data-mode="invite"]) .check{font-size:11px;line-height:1.4}
}
@media(max-height:500px) and (min-width:500px){
 #auth-dialog:is([data-mode="register"],[data-mode="invite"]){width:650px}
 #auth-dialog:is([data-mode="register"],[data-mode="invite"]) .auth-brand{height:40px}
 #auth-dialog:is([data-mode="register"],[data-mode="invite"]) .auth-brand img{height:32px}
 #auth-dialog:is([data-mode="register"],[data-mode="invite"]) h2{font-size:20px}
 #auth-dialog:is([data-mode="register"],[data-mode="invite"]) .auth-intro{display:none}
 #auth-dialog:is([data-mode="register"],[data-mode="invite"]) form{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 12px}
 #auth-dialog:is([data-mode="register"],[data-mode="invite"]) .field input{height:36px}
 #auth-dialog[data-mode="invite"] form>.field{grid-column:span 2}
}
@media(max-height:350px) and (min-width:500px){
 #auth-dialog:is([data-mode="register"],[data-mode="invite"]) .auth-brand{height:28px}
 #auth-dialog:is([data-mode="register"],[data-mode="invite"]) .auth-brand img{height:24px}
 #auth-dialog:is([data-mode="register"],[data-mode="invite"]) #auth-content{padding:8px 12px}
 #auth-dialog:is([data-mode="register"],[data-mode="invite"]) h2{font-size:18px}
 #auth-dialog:is([data-mode="register"],[data-mode="invite"]) form{gap:4px 10px}
 #auth-dialog:is([data-mode="register"],[data-mode="invite"]) .field input{height:32px}
 #auth-dialog:is([data-mode="register"],[data-mode="invite"]) .button[type="submit"]{min-height:34px;padding:8px 12px}
}