/* /waitlist/<slug>/ : waitlist pages for editions in research. The page text on the left, the sign-up card on the right;
   one column on phones, where the card follows the text. A button in the page head jumps to the card at every width.
   Builds on layout.css and components.css (.notice, .status, .field, .form-status, .consent, .form-success). */

/* Page head: the questions-style headings are long sentences, so a smaller size than the default page head. */
.page-head--waitlist h1 { font-size: clamp(2rem, 1.35rem + 2.5vw, 3.25rem); max-width: 24ch; }
.waitlist-status { margin-top: 1.5rem; max-width: 46rem; }
.waitlist-status .status { margin-right: .35rem; vertical-align: .1em; }
.waitlist-meta { margin: 1rem 0 0; }
.waitlist-jump { margin: 1.5rem 0 0; }

.waitlist-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.waitlist-prose { min-width: 0; }

/* Sign-up card */
.waitlist-card { background: var(--paper); border: 1px solid var(--rule); border-top: 4px solid var(--yellow); padding: clamp(1.25rem, 3vw, 2rem); scroll-margin-top: calc(var(--header-h) + 16px); }
.waitlist-card h2 { font-size: clamp(1.45rem, 1.2rem + .9vw, 1.85rem); margin-bottom: .35em; }
.waitlist-card-intro { margin: 0 0 1.25rem; font-size: .95rem; color: var(--ink-soft); }

.waitlist-availability { margin: 0 0 1.25rem; padding: .75rem 1rem; background: var(--yellow-soft); border: 1px solid var(--cell-input-edge); border-left-width: 4px; font-size: .95rem; font-weight: 500; }
.waitlist-availability:empty { display: none; }

.waitlist-questions { min-width: 0; margin: 1.5rem 0 0; padding: 1.1rem 0 0; border: 0; border-top: 1px solid var(--rule); }
.waitlist-questions legend { float: left; width: 100%; padding: 0; margin: 0 0 .25rem; font-size: 1rem; font-weight: 700; }
.waitlist-questions legend + .field-hint { clear: both; margin-bottom: 1rem; }
.waitlist-questions .field label { line-height: 1.45; }

.waitlist-form .field select { cursor: pointer; }
.waitlist-form .btn { margin-top: .5rem; }
.waitlist-form .form-status:empty { min-height: 0; margin: 0; }
.waitlist-form[hidden] { display: none; }
.waitlist-noscript { margin: 1rem 0 0; font-weight: 500; }

.waitlist-card .form-success { margin-top: .5rem; }
.waitlist-card .form-success p + p { margin-top: .25rem; }

/* The card is taller than most windows, so it isn't sticky. On wide screens a link after the text goes back up to it;
   on phones the card follows the text, so that link is hidden. */
.waitlist-again { max-width: 42rem; margin: 2.5rem 0 0; padding-top: .75rem; border-top: 1px solid var(--rule); }

@media (max-width: 900px) {
  .waitlist-grid { grid-template-columns: minmax(0, 1fr); }
  .waitlist-card { max-width: 34rem; }
  .waitlist-again { display: none; }
}