/* Two-step sign-in (staff-mfa.js): the code step on the sign-in screen and the set-up dialog.
   Warm neutrals, Newsreader titles and Inter text, like the rest of the app. Text colors are
   4.5:1 or more on their backgrounds. */
#authScreen.ml-auth #mfaCode{font:600 22px/1 Inter,sans-serif;letter-spacing:.2em}

.ml-mfa{width:min(460px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;box-sizing:border-box;margin:auto;padding:28px 24px;border:1px solid #E5E2DA;border-radius:16px;background:#FFFFFF;color:#192436;font:400 15px/1.5 Inter,system-ui,sans-serif;box-shadow:0 18px 48px rgba(25,36,54,.18)}
.ml-mfa::backdrop{background:rgba(25,36,54,.5)}
.ml-mfa-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ml-mfa h2{margin:0;font:500 24px/1.2 Newsreader,Georgia,serif;letter-spacing:-.01em;color:#192436}
.ml-mfa h2:focus{outline:none}
.ml-mfa p{margin:0}
.ml-mfa a{color:#1B605C;font-weight:600}
.ml-mfa-body{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.ml-mfa-muted{color:#4A5366}
.ml-mfa-block{display:block;margin-top:8px}
.ml-mfa-note{font-size:13px;line-height:19px;color:#5B6475}
.ml-mfa-status{background:#F5FAFA;border:1px solid #D5ECEA;border-radius:12px;padding:12px 14px}
.ml-mfa-close{flex:none;width:44px;height:44px;border-radius:10px;border:1px solid #CFCBC1;background:#FFFFFF;color:#192436;font:500 22px/1 Inter,sans-serif;cursor:pointer}
.ml-mfa-steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:16px}
.ml-mfa-qr{display:flex;justify-content:center;width:fit-content;max-width:100%;box-sizing:border-box;margin:10px auto 0;padding:12px;border:1px solid #E5E2DA;border-radius:12px;background:#FFFFFF}
.ml-mfa-qr img{display:block;width:176px;height:176px}
.ml-mfa-key{display:block;margin-top:6px;padding:10px 12px;border-radius:10px;background:#F6F5F1;color:#192436;font:600 15px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;word-break:normal;overflow-wrap:anywhere;user-select:all}
.ml-mfa form{display:flex;flex-direction:column;gap:8px;margin:10px 0 0}
.ml-mfa label{font-size:14px;font-weight:600}
.ml-mfa input{width:100%;max-width:220px;height:52px;box-sizing:border-box;border:1px solid #7E8798;border-radius:10px;padding:0 14px;font:600 22px/1 Inter,sans-serif;letter-spacing:.2em;color:#192436;background:#FFFFFF}
.ml-mfa-error{color:#A12C2C;font-size:14px;line-height:20px;font-weight:500}
.ml-mfa-error[hidden]{display:none}
.ml-mfa-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.ml-mfa-primary,.ml-mfa-secondary,.ml-mfa-danger{min-height:48px;padding:0 18px;border-radius:10px;font:600 15px/20px Inter,sans-serif;cursor:pointer}
.ml-mfa-primary{border:0;background:#237873;color:#FFFFFF}
.ml-mfa-secondary{border:1px solid #CFCBC1;background:#FFFFFF;color:#192436}
.ml-mfa-danger{border:1px solid #A12C2C;background:#FFFFFF;color:#A12C2C}
.ml-mfa button:disabled{opacity:.75;cursor:progress}
.ml-mfa :focus-visible{outline:3px solid #3FA7A0;outline-offset:2px}
@media (max-width:420px){.ml-mfa{padding:22px 16px}.ml-mfa-actions>button{flex:1 1 100%}}