/* Account pages: the one centred card used for signing in, registering, resetting a password
   and managing an account. Layout only. Colour, type, spacing, shape, buttons, inputs and
   status messages all come from theme.css. */

.account {
    /* Colin: "only has a small form in the middle of the screen yet there is a scroll down to the
       footer." The page already fills the window (body, .site-main); a second full height here added the header's
       height on top, so the footer always sat below the fold. */
    display: grid;
    place-items: start center;
    padding: var(--lc-space-8) var(--lc-space-4);
}

.account-card {
    width: 100%;
    max-width: 30rem;
    background: var(--lc-card);
    border: 1px solid var(--lc-line);
    border-radius: var(--lc-radius);
    box-shadow: var(--lc-shadow-card);
    padding: var(--lc-space-6) 2.25rem;
}

.account-card h1 {
    font-size: var(--lc-text-lg);
    margin: 0 0 var(--lc-space-4);
}

.field { margin-bottom: var(--lc-space-4); }
.field label { display: block; font-size: var(--lc-text-base); margin-bottom: 0.3rem; }
.field.checkbox label { display: flex; gap: var(--lc-space-2); align-items: center; }

.links {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 1.25rem;
    font-size: var(--lc-text-base);
}

.external-logins {
    margin-top: var(--lc-space-5);
    border-top: 1px solid var(--lc-line);
    padding-top: var(--lc-space-4);
}

.code-entry { display: flex; align-items: center; gap: var(--lc-space-2); }
.code-root { font-family: var(--lc-font-mono); letter-spacing: 0.1em; }
.totp-key { font-family: var(--lc-font-mono); word-break: break-all; }
.qr { margin: var(--lc-space-3) 0; }
.steps li { margin-bottom: var(--lc-space-4); }

.account-summary {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: var(--lc-space-6);
    row-gap: var(--lc-space-3);
    align-items: baseline;
    margin: var(--lc-space-5) 0;
    padding: var(--lc-space-5);
    background: var(--lc-card);
    border: 1px solid var(--lc-line);
    border-radius: var(--lc-radius);
}
.account-summary dt { font-weight: 600; display: flex; align-items: baseline; gap: var(--lc-space-3); }
.account-summary dt i { color: var(--lc-highlight); width: 1.25em; text-align: center; }
.account-summary dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 36rem) {
    .account-summary { grid-template-columns: 1fr; row-gap: 0; }
    .account-summary dd { margin: 0.2rem 0 var(--lc-space-3) calc(1.25em + var(--lc-space-3)); }
}

/* Colin: "My email wraps round. Let's make the card wider." The account page only; the
   sign-in forms keep their narrow card. Its actions are buttons, not bare links. */
.account-card:has(.account-summary) { max-width: 46rem; }
.account-summary dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--lc-space-3); }
.account-summary dd .btn { margin: 0; }

/* The sign-in page asks for the address first, then shows only what applies to it. */
.btn-wide { width: 100%; justify-content: center; }
.btn-provider { display: inline-flex; align-items: center; gap: var(--lc-space-3); }
.provider-logo { width: 1.15rem; height: 1.15rem; flex: none; }
.provider-buttons, .other-ways { display: flex; flex-direction: column; gap: var(--lc-space-3); }
.other-ways { margin-top: var(--lc-space-4); }
.other-ways > .muted { margin: 0; text-align: center; }
.external-logins.bare { margin-top: 0; border-top: 0; padding-top: 0; }
.signing-in-as { display: flex; justify-content: space-between; align-items: baseline; gap: var(--lc-space-3); flex-wrap: wrap;
    padding: var(--lc-space-2) var(--lc-space-3); background: var(--lc-info-ground); border: 1px solid var(--lc-line);
    border-radius: var(--lc-radius); overflow-wrap: anywhere; }
.field-link { display: inline-block; margin-top: 0.4rem; font-size: var(--lc-text-base); }