/* ============================================================
   Account pages — additions to the design handoff.

   login.css is used UNMODIFIED, as its README asks. It covers the sign-in screen; the rest of
   the /Account flow needs a few more patterns (status messages, recovery codes, the
   authenticator QR, secondary actions, body copy on the confirmation pages).

   Everything here is built from the handoff's own :root tokens and keeps the dd- prefix, so it
   inherits any future change to login.css rather than fighting it.
   ============================================================ */

/* Body copy on pages that are prose rather than a form (Lockout, confirmations, 2FA status). */
.dd-text {
    margin: 0;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--dd-muted);
}

.dd-text strong {
    font-weight: 600;
    color: var(--dd-ink);
}

.dd-text + .dd-text {
    margin-top: 10px;
}

/* Status message carried across a redirect (Identity.StatusMessage cookie). Mirrors .dd-alert
   geometry so success and failure read as the same component. */
.dd-status {
    margin: 0;
    border: 1px solid #bfe0d2;
    border-left: 4px solid #1c7c54;
    border-radius: var(--dd-radius);
    background: #f1f8f5;
    padding: 12px 15px;
    font-size: 12.5px;
    font-weight: 600;
    color: #145c3e;
}

/* Blazor's ValidationMessage / ValidationSummary. */
.dd-form .validation-message,
.dd-form .validation-errors {
    margin: 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--dd-danger);
}

.dd-form .validation-errors {
    padding-left: 16px;
}

/* Secondary action — visually quieter than .dd-submit, same geometry. */
.dd-submit--secondary {
    height: 50px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--dd-blue);
    background: transparent;
    border: 1px solid var(--dd-line-2);
    border-radius: var(--dd-radius);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.dd-submit--secondary:hover {
    background: #eef3f5;
    border-color: var(--dd-blue);
}

/* Destructive confirmation (disable 2FA). */
.dd-submit--danger {
    background: var(--dd-danger);
}

.dd-submit--danger:hover {
    background: #8f1d16;
}

/* A row of trailing links (back to sign-in, use a recovery code, …). */
.dd-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    align-items: baseline;
}

/* Recovery codes: shown exactly once, so they need to be readable and copyable. Monospace on
   purpose — these are transcribed by hand more often than pasted. */
.dd-codes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--dd-line-2);
    border-radius: var(--dd-radius);
    background: var(--dd-surface);
    font-family: Consolas, 'SF Mono', Menlo, monospace;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--dd-ink);
}

/* Authenticator enrolment: white plate so the QR keeps its quiet zone against the paper pane. */
.dd-qr {
    align-self: center;
    padding: 12px;
    background: #ffffff;
    border: 1px solid var(--dd-line-2);
    border-radius: var(--dd-radius);
}

/* The manual-entry key shown beneath the QR. */
.dd-key {
    margin: 0;
    padding: 10px 14px;
    border-radius: var(--dd-radius);
    background: #eef3f5;
    font-family: Consolas, 'SF Mono', Menlo, monospace;
    font-size: 12.5px;
    letter-spacing: 0.08em;
    color: var(--dd-ink);
    word-break: break-all;
}

/* Key/value rows on the account hub. */
.dd-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--dd-line-2);
    border-radius: var(--dd-radius);
    background: var(--dd-surface);
}

.dd-meta div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: baseline;
}

.dd-meta dt {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--dd-ink-2);
}

.dd-meta dd {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--dd-ink);
}