/* 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);
}

/* The profile's registrations and the organizers' record, as one framed thing
 * subdivided (§3): the registrations stack down the left, and the answers
 * every event shares sit once beside them, however many registrations there
 * are. Built the way `.panel-grid` is -- the 1px gap over an ink background
 * *is* the rule -- so the inside divisions stay square and only the outside
 * corners round.
 */
.registration-ledger {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(16rem, 2fr);
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: var(--radius-frame);
    overflow: hidden;
    margin: 0 0 var(--space-4);
}

/* A column of its own, so a list shorter than the shared record beside it
 * does not leave the ledger's ink showing underneath: the last registration
 * grows to meet the bottom edge instead.
 */
.registration-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.registration-entry,
.registration-shared {
    background: var(--surface);
    padding: var(--space-4);
}

.registration-entry {
    display: flex;
    flex-direction: column;
}

.registration-entry:last-child {
    flex: 1;
}

/* A flex column stretches every child to the full width, and a pill that wide
 * reads as a banner across the entry rather than a label on it.
 */
.registration-entry > .status-pill {
    align-self: flex-start;
}

/* The event's own answers, under its name and dates. Its top edge is the
 * dotted row rule a record already draws between rows, so it reads as the
 * first row of the entry's record rather than as a frame inside a frame.
 */
.registration-answers {
    margin-top: var(--space-3);
    border-top: 1px dotted var(--rule-dotted);
}

/* Sized as a cell heading, the way `.panel-grid > * > h2` is -- this one is an
 * h3 only because the ledger sits under the "Registrations" h2.
 */
.registration-shared > h3 {
    font-size: var(--size-ui);
    margin: 0 0 var(--space-3);
}

.registration-shared > .note {
    margin: 0 0 var(--space-2);
}

/* One column below a comfortable width for both: the shared record follows
 * the registrations it belongs to, and the 1px gap rules it off from them.
 */
@media (max-width: 760px) {
    .registration-ledger {
        grid-template-columns: minmax(0, 1fr);
    }
}