/* Forgot password (templates/account_forgot.html) and Set your password (templates/account_set_password.html): the
   sign-in card of auth.css with the states static/management/account_access.js draws (design.md 11.9, 11.10).
   Tokens only (plan.md 1.9 R2). */

/* Each new state's heading takes focus (for screen readers); it needs no ring. */
#acctView .auth-title:focus { outline: none; }

/* A state card: an icon tile, the title, what happened, then the way on (a full-width button, a link button). */
.acct-state { display: flex; flex-direction: column; align-items: flex-start; }
.acct-state .err-ic { margin-bottom: var(--space-3); }
.acct-state .auth-desc { overflow-wrap: anywhere; }
.acct-actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); width: 100%; }
.acct-actions .ds-linkbtn { align-self: center; }
.acct-actions .auth-submit { margin-top: 0; }

/* The account a link is for: initials, name, username. */
.acct-chip { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); margin-bottom: var(--space-4);
    border: 1px solid var(--clr-border); border-radius: var(--radius-lg); background: var(--clr-surface-muted); min-width: 0; }
.acct-chip-text { display: flex; flex-direction: column; min-width: 0; }
.acct-chip-name { font-weight: var(--fw-semibold); color: var(--clr-text-heading); overflow-wrap: anywhere; }
.acct-chip-sub { font-size: var(--fs-sm); color: var(--clr-text-muted); overflow-wrap: anywhere; }

/* New password with its show/hide button inside the field. */
.acct-pw-box { position: relative; }
.acct-pw-box .ds-input { width: 100%; padding-right: var(--ctl-h-touch); }
.acct-pw-eye { position: absolute; right: var(--space-0-5); top: 50%; transform: translateY(-50%); }
/* One show/hide button for both fields: Edge's own reveal button would add a second one. */
.acct-pw::-ms-reveal { display: none; }

/* The live checklist under the password fields: icon + text, never color alone. */
.acct-checks { list-style: none; margin: calc(-1 * var(--space-1)) 0 var(--space-4); padding: 0; display: flex; flex-direction: column;
    gap: var(--space-1); font-size: var(--fs-sm); color: var(--clr-text-muted); }
.acct-checks li { display: flex; align-items: center; gap: var(--space-2); }
.acct-checks li svg.ds-i { width: var(--icon-sm); height: var(--icon-sm); flex: none; }
.acct-checks li.is-met { color: var(--clr-success-text); }

/* The verification code's field, then its links and the Lost-your-phone note (outside the field, so the field's error
   stays under the hint). */
.acct-code-links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: var(--space-2); }
.acct-code-note:not(:empty) { margin-top: var(--space-3); }
.acct-note { margin: var(--space-4) 0 0; font-size: var(--fs-sm); color: var(--clr-text-muted); text-align: center; }

/* "Didn't get it?" on the Check your email card. */
.acct-help { margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--clr-surface-muted);
    border: 1px solid var(--clr-border); font-size: var(--fs-sm); color: var(--clr-text-body); width: 100%; }
.acct-help h2 { margin: 0 0 var(--space-1); font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--clr-text-heading); }
.acct-help ul { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); }
.acct-nowrap { white-space: nowrap; }

/* "Checking your link..." */
.acct-checking { width: 100%; }

@media (max-width: 600px) {
    .acct-code-links { flex-direction: column; align-items: flex-start; gap: 0; }
}
/* Touch screens at every width: the link buttons and the show/hide button are the kit's 44 px targets there
   (portal-components.css); the show/hide button then fills the field's padding at its right end. */
@media (pointer: coarse) {
    .acct-pw-eye { right: 0; }
}

/* The sign-in notice's "Forgot password?" is the way back in for a locked-out person: a 44 px target on touch
   screens that leaves the notice's line as it is, whatever that line's height (1lh). */
@media (pointer: coarse) {
    #auth-feedback .ds-notice .ds-linkbtn { padding-block: calc((var(--ctl-h-touch) - 1lh) / 2); margin-block: calc((1lh - var(--ctl-h-touch)) / 2); }
}