/* Layout for /join/ and /join/submitted/ only: a readable single column and the spacing between form sections.
   The controls themselves come from components/form.css. */

.join { padding-block: var(--space-7) var(--space-8); }
.join__inner { max-width: 46rem; }

.join .alert { margin-bottom: var(--space-6); }
.join .form-section { margin-bottom: 0; padding-block: var(--space-6); border-top: 1px solid var(--line); }
.join .form-section .form-grid + .choice-group,
.join .choice-group + .form-grid,
.join .form-grid + .form-grid,
.join .choice-group + .choice-group,
.join .field + .field { margin-top: var(--space-5); }
.join .form-grid > .field + .field { margin-top: 0; }

/* trap for bots: off screen, never reached by keyboard or announced */
.join__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.join__done { max-width: 46rem; }
.join__done .steps { grid-template-columns: 1fr; margin-bottom: var(--space-6); }