/* The two-step verification code step of a sign-in card (shared/two-factor.js mountCodeStep): the portal's (login.html)
   and the staff shell's (editors/, admin/). It takes the password form's place and uses the card's own .field, .btn and
   .msg; this adds its title, the wide-spaced code field and the way back. */
.mfa-step[hidden]{display:none}
.mfa-step-head{margin-bottom:20px}
.mfa-step-title{margin:0 0 6px;color:var(--text);font-size:17px;font-weight:600;line-height:1.35}
.mfa-step-lead{margin:0;color:var(--muted);font-size:14px;line-height:1.5;text-wrap-style:pretty}
.mfa-step .mfa-code{font-size:20px;font-variant-numeric:tabular-nums;letter-spacing:.32em;text-align:center}
.mfa-step .msg{margin-top:14px}
.mfa-step-help{margin:16px 0 0;color:var(--dim);font-size:12px;line-height:1.5;text-align:center;text-wrap-style:pretty}
.mfa-step-back{display:block;margin:8px auto 0;padding:8px 10px;border:0;border-radius:6px;background:none;color:var(--muted);font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mfa-step-back:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media(hover:hover){.mfa-step-back:hover{color:var(--text)}}