/* The account pages: signing in, signing up, the password flow, and the
 * profile (§3.1). Foundations and anything that appears on more than one
 * surface live in base.css; what is here is the little these pages need on top
 * of it -- a column narrow enough to read, and the identity block at the top of
 * the record.
 */

/* A sign-in form is two fields; across a 1180px page it reads as a form for
 * something else entirely. `--measure` is the reading column (§3) and is a good
 * deal wider than this needs, so the cap is the narrower of the two.
 */
.auth-column {
    max-width: 30rem;
    margin-left: auto;
    margin-right: auto;
}

/* The ways out of an account page -- "forgot your password?", "create one",
 * "back to your profile". They sit under the action, not beside it: they are
 * the other doors off this screen and not alternatives to the button (§5).
 */
.auth-alternatives {
    margin: var(--space-5) 0 0;
    padding-top: var(--space-4);
    border-top: 1px dotted var(--rule-dotted);
    font-size: var(--size-ui);
}

.auth-alternatives p {
    margin: 0 0 var(--space-2);
}

.auth-alternatives p:last-child {
    margin-bottom: 0;
}

/* Avatar beside name, wrapping to stacked on a narrow screen. The gap is the
 * §3 scale rather than a bespoke value, and nothing here draws a rule: the
 * header sits above the first framed thing on the page and a rule of its own
 * would make it read as one more panel.
 */
.profile-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.profile-header h1 {
    margin: 0;
}

.profile-header .note {
    margin: var(--space-1) 0 0;
}

/* Fully round, per §3: anything that reads as a tappable object is a circle,
 * and a face is the clearest case of one. Fixed square box so a portrait and a
 * landscape upload both land as the same circle, and `cover` rather than
 * `contain` so neither is letterboxed inside it.
 */
.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-pill);
    object-fit: cover;
    border: 1px solid var(--rule);
    background: var(--surface-2);
}