/* Join: document layout, responsive layout. */
.join-body {
    min-height: 100vh;
}

/* Join main: default placement and spacing. */
.join-main {
    padding: var(--space-20) var(--space-16) var(--space-64);
    width: 100%;
}

/* Join card: default placement and spacing. */
.join-card {
    margin: 0 auto;
    padding: var(--space-24) var(--space-20);
    width: min(100%, 640px);
}

/* Join loading: loading placement and spacing. */
.join-loading {
    align-items: center;
    display: flex;
    gap: var(--space-12);
    justify-content: center;
    min-height: 260px;
}

/* Join spinner: loading placement and spacing. */
.join-spinner {
    animation: sr-control-spin 0.7s linear infinite;
    flex: 0 0 auto;
    height: 20px;
    width: 20px;
}

/* Join button spinner: loading placement and spacing. */
.join-button-spinner {
    animation: sr-control-spin 0.7s linear infinite;
    flex: 0 0 auto;
    height: 17px;
}

/* Join header: default placement and spacing. */
.join-header {
    margin-block-end: var(--space-28);
    text-align: center;
}

/* Join eyebrow: default placement and spacing. */
.join-eyebrow {
    margin: 0 0 var(--space-6);
}

/* Join header: default placement and spacing. */
.join-header :where(h1),
.join-state :where(h1) {
    margin: 0;
}

/* Join capacity note: default placement and spacing. */
.join-header > :where(p:not(.join-eyebrow):not(.join-capacity-note)),
.join-state > :where(p) {
    margin: var(--space-12) auto 0;
}

/* Join capacity note: default placement and spacing. */
.join-capacity-note {
    margin: var(--space-14) auto 0;
    padding: var(--space-7) var(--space-11);
    width: fit-content;
}

/* Join form: default placement and spacing. */
.join-form {
    display: grid;
    gap: var(--space-20);
}

/* Join field: default placement and spacing. */
.join-field :where(label) {
    display: block;
}

/* Join field note: default placement and spacing. */
.join-field-note,
.join-legal > :where(p) {
    margin: var(--space-5) 0 var(--space-8);
}

/* Join field: default placement and spacing. */
.join-field :where(input),
.join-field :where(select),
.join-submit {
    width: 100%;
}

/* Join field error: default placement and spacing. */
.join-field-error {
    margin: var(--space-5) 0 0;
    min-height: 18px;
}

/* Join legal: default placement and spacing. */
.join-legal {
    margin: var(--space-2) 0 0;
    min-width: 0;
    padding: var(--space-18);
}

/* Join legal: default placement and spacing. */
.join-legal :where(legend) {
    display: block;
    padding: 0 var(--space-6);
}

/* Join checkbox field: default placement and spacing. */
.join-checkbox-field {
    align-items: start;
    display: grid;
    gap: var(--space-10);
    grid-template-columns: 22px 1fr;
    padding: var(--space-9);
}

/* Join checkbox field: default placement and spacing. */
.join-checkbox-field :where(input) {
    height: 20px;
    margin: var(--space-1) 0 0;
    width: 20px;
}

/* Join form status: default placement and spacing. */
.join-form-status {
    padding: var(--space-13) var(--space-14);
}

/* Join submit note: default placement and spacing. */
.join-submit-note {
    margin: calc(-1 * var(--space-10)) 0 0;
    text-align: center;
}

/* Join state: default placement and spacing. */
.join-state {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 300px;
    text-align: center;
}

/* Join state icon: default placement and spacing. */
.join-state-icon {
    height: 48px;
    margin-block-end: var(--space-18);
    width: 48px;
}

/* Join state actions: default placement and spacing. */
.join-state-actions {
    display: grid;
    gap: var(--space-10);
    margin-block-start: var(--space-24);
    width: 100%;
}

/* Responsive layout: arrange the view at this viewport. */
@media (min-width: 768px) {
    /* Join main: default placement and spacing. */
    .join-main {
        padding: var(--space-48) var(--space-24) var(--space-96);
    }

    /* Join card: default placement and spacing. */
    .join-card {
        padding: var(--space-36) var(--space-40);
    }

    /* Join state actions: default placement and spacing. */
    .join-state-actions {
        grid-template-columns: repeat(2, minmax(170px, auto));
        justify-content: center;
        width: auto;
    }

}