/* Stage 10F3 — Premium self-service password recovery. */
.password-recovery-page .recovery-brand-copy { margin-bottom: 30px; }
.password-recovery-page .recovery-capability-grid article { min-height: 76px; }
.password-recovery-page .recovery-card-premium { max-width: 510px; }
.password-recovery-page .recovery-form { gap: 14px; }

.recovery-form-note,
.recovery-expiry-note,
.recovery-password-status {
    min-height: 52px;
    padding: 10px 11px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
}

.recovery-form-note > span,
.recovery-expiry-note > span,
.recovery-password-status > span:first-child {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--primary-soft);
    color: var(--primary);
}

.recovery-form-note .ui-svg,
.recovery-expiry-note .ui-svg { width: 15px; height: 15px; }
.recovery-form-note p,
.recovery-expiry-note p,
.recovery-password-status p {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}
.recovery-expiry-note strong { color: var(--text); font-weight: 600; }

.recovery-password-status > span:first-child::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--muted-2);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--muted-2) 13%, transparent);
}
.recovery-password-status strong {
    display: block;
    margin-bottom: 2px;
    color: var(--text);
    font-size: 11px;
    font-weight: 600;
}
.recovery-password-status.is-ready > span:first-child { background: var(--green-soft); color: var(--green); }
.recovery-password-status.is-ready > span:first-child::before {
    background: var(--green);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 13%, transparent);
}
.recovery-password-status.is-mismatch > span:first-child { background: var(--red-soft); color: var(--red); }
.recovery-password-status.is-mismatch > span:first-child::before {
    background: var(--red);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 13%, transparent);
}

.recovery-back-link {
    width: fit-content;
    margin: 0 auto;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
    text-decoration: none;
}
.recovery-back-link:hover,
.recovery-back-link:focus-visible { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

.recovery-message { margin-bottom: 0; }

.recovery-invalid-state {
    padding: 32px 26px 28px;
    display: grid;
    justify-items: center;
    text-align: center;
}
.recovery-invalid-state > span {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    border-radius: 13px;
    background: var(--red-soft);
    color: var(--red);
}
.recovery-invalid-state > span .ui-svg { width: 23px; height: 23px; }
.recovery-invalid-state strong { color: var(--text); font-size: 15px; font-weight: 600; }
.recovery-invalid-state p { max-width: 360px; margin: 6px 0 16px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.recovery-invalid-state .primary-btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding-inline: 16px; }
.recovery-invalid-state .recovery-back-link { margin-top: 14px; }

@media (max-width: 760px) {
    .password-recovery-page .login-access-wrap { padding-top: 30px; }
    .recovery-invalid-state { padding-inline: 20px; }
}