/* Phone sign-in additions use the active appearance variables. */
.sms-login-tabs{display:flex;gap:4px;padding:4px;margin-top:24px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft)}
.sms-login-tabs button{flex:1;min-width:0;min-height:42px;padding:8px;font-size:13px;border-radius:8px;color:var(--muted)}
.sms-login-tabs button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 2px 8px var(--shadow)}
.sms-login-tabs button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
#loginView #loginForm,#loginView #smsLoginForm{margin-top:20px}
#loginView #loginForm[hidden],#smsLoginForm[hidden],#smsBindVerifyForm[hidden],#smsRemoveForm[hidden]{display:none!important}
#loginView .sms-form,#smsBindingsModal .sms-form,#smsBindingsModal .sms-remove-form{display:flex;flex-direction:column;gap:10px;min-width:0}
#loginView .sms-form input,#smsBindingsModal input{width:100%;min-width:0;font-size:16px}
#loginView .sms-form .sms-code-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:8px;min-width:0}
#loginView .sms-code-row button{margin:0;min-width:0;white-space:nowrap;font-size:12px;justify-content:center;padding:8px 10px}
#loginView .sms-note,#smsBindingsModal .sms-note{margin:0;font-size:12px;line-height:1.8;color:var(--muted);overflow-wrap:anywhere}
#loginView .sms-password-fallback{margin:0;justify-content:center;min-height:36px;font-size:12px;color:var(--muted)}
#loginView .sms-success,#smsBindingsModal .sms-success{color:var(--green)}
#smsBindingsModal{width:min(490px,calc(100% - 32px));overflow-y:auto}
#smsBindingsModal .dialog-head h2{font-size:23px}
#smsBindingsModal .dialog-head [data-close]{min-width:44px;min-height:44px;flex-shrink:0}
#smsBindingsModal #smsBindingsAvailability{margin-top:10px}
#smsBindingsModal .sms-bindings-list{margin-top:15px}
#smsBindingsModal .sms-binding-row{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line)}
#smsBindingsModal .sms-binding-row>div{min-width:0;display:flex;flex-direction:column;gap:4px}
#smsBindingsModal .sms-binding-row strong{font-size:13px;font-weight:550;overflow-wrap:anywhere}
#smsBindingsModal .sms-binding-row span{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
#smsBindingsModal .sms-binding-row button{flex-shrink:0;min-width:44px;min-height:44px;padding:8px;font-size:12px}
#smsBindingsModal .sms-remove-button{color:var(--red)}
#smsBindingsModal .sms-remove-form{padding:16px;margin-top:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft)}
#smsBindingsModal .sms-form-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
#smsBindingsModal .sms-add-section{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
#smsBindingsModal .sms-add-section h3{margin-bottom:16px;font-size:16px}
#smsBindingsModal .sms-form button{min-height:44px;justify-content:center;white-space:normal}
#smsBindingsModal #smsBindVerifyForm{margin-top:10px;padding-top:18px;border-top:1px solid var(--line)}
#smsBindingsModal .form-message{margin:0;overflow-wrap:anywhere}
@media(max-width:360px){
 #loginView .sms-code-row{gap:6px}
 #loginView .sms-code-row input{padding-left:10px;padding-right:8px}
 #loginView .sms-code-row button{padding-left:8px;padding-right:8px}
 #smsBindingsModal{padding:20px 15px;width:calc(100% - 20px)}
 #smsBindingsModal .sms-remove-form{padding:12px}
}