/* Registration: the form, with what registering gets you set beside it. */

.register-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 64px;
    padding-top: 40px;
    align-items: start;
}

.register-form {
    display: flex;
    flex-direction: column;
    gap: 40px;
    min-width: 0;
}

/*
 * A fieldset needs its borders and padding reset before it lays out like the
 * other fields, and a legend does not inherit the heading styling by itself.
 */
.field--roster {
    border: 0;
    margin: 0;
    padding: 0;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.field--roster .section-head { width: 100%; }
.field--roster legend { padding: 0; float: left; }
/* A floated legend leaves the following content beside it unless it is
   cleared; this is the standard fix for styling a legend as a block. */
.field--roster > .field__hint { clear: both; }

.register-aside { position: sticky; top: 40px; }

.register-aside__title {
    font-size: 1.625rem;
    margin-bottom: 18px;
}

.register-aside__items {
    display: flex;
    flex-direction: column;
    gap: 18px;
    font-size: 0.75rem;
    line-height: 1.7;
}

@media (max-width: 900px) {
    .register-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
    .register-aside { position: static; }
}

/* --- The panel shown once a registration lands -------------------------- */

.success-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.success-panel:focus { outline: none; }
.success-panel .credentials { margin-top: var(--space-2); }
.success-panel .page-lede strong { font-style: normal; color: var(--color-text); }

.success-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

@media (max-width: 480px) {
    .success-panel__actions .button { width: 100%; }
}