/* Join the waitlist (site/lib/downloads.cjs puts it where each Download button is while downloads are closed). The
   button opens into an email field of the same height with its submit inside, and the thanks takes the same place:
   nothing around it moves. */
.wl { position: relative; display: inline-flex; vertical-align: middle; }
.wl[data-wl-open] > .wl-open, .wl[data-wl-done] > .wl-open, .wl[data-wl-done] > .wl-form { display: none; }
.wl .wl-form[hidden], .wl .wl-done[hidden] { display: none; }
.wl-form { display: flex; align-items: center; gap: 4px; margin: 0; padding: 3px 3px 3px 14px; border-radius: 999px;
  border: 1px solid var(--site-hover-line); background: var(--site-fill); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.wl-form:focus-within { outline: 2px solid var(--site-hover-line); outline-offset: 2px; }
.wl-form[data-wl-bad] { border-color: #b4472f; }
.wl .wl-email { width: 15em; min-width: 0; min-height: 0; height: auto; flex: 1; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; outline: none;
  font: 13px/1 var(--site); color: var(--site-ink); -webkit-appearance: none; appearance: none; }
.wl .wl-email:focus-visible { outline: none; }
.wl .wl-email::placeholder { color: var(--site-dim); }
.wl .wl-go { flex: none; margin: 0; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--site-ink); cursor: pointer;
  background: var(--site-ink); color: #fbfaf7; font: 500 12.5px/1 var(--site); }
.wl .wl-go:disabled { opacity: .6; cursor: default; }
.wl-done { display: inline-flex; align-items: center; font: 500 13px/1 var(--site); color: var(--site-ink); padding: 9px 15px;
  border-radius: 999px; border: 1px solid var(--site-line); background: var(--site-fill); }
.wl .wl-note { position: absolute; top: calc(100% + 6px); left: 14px; right: 0; margin: 0; font: 12px/1.3 var(--site); color: #b4472f; text-align: left; }
.wl .wl-note:empty { display: none; }
.wl-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Touch screens: 16px text so the phone doesn't zoom in on the field, and 44px to tap. */
@media (pointer: coarse) {
  .wl .wl-email { font-size: 16px; }
  .wl .wl-go { min-height: 36px; padding: 0 16px; font-size: 14px; }
  .wl-form { padding-left: 16px; }
}
.bar .wl-form, .bar .wl-done { height: 33px; box-sizing: border-box; }
@media (pointer: coarse) { .bar .wl-form, .bar .wl-done { height: 44px; } }

/* The page of its own (/api/download) and the invite. */
.doc .wl { display: flex; max-width: 400px; margin: 24px 0; }
.doc .wl-form { display: flex; gap: 4px; margin: 0; max-width: none; }
.doc .wl .wl-open, .doc .wl-form, .doc .wl-done { width: 100%; min-height: 46px; box-sizing: border-box; font-size: 14px; }
.doc .wl .wl-open { justify-content: center; padding: 12px 18px; }
.doc .wl .wl-email { font-size: 16px; }
.doc .wl .wl-go { min-height: 38px; padding: 0 16px; font-size: 14px; }

/* The phone's card: full width, the card's 52px. */
.ph-send .wl { display: flex; width: 100%; text-align: left; }
.ph-send .wl .wl-open { width: 100%; min-height: 52px; justify-content: center; font-size: 16px; }
.ph-send .wl-form, .ph-send .wl-done { width: 100%; height: 52px; box-sizing: border-box; }
.ph-send .wl-form { padding-left: 18px; }
.ph-send .wl .wl-email { font-size: 16px; }
.ph-send .wl .wl-go { width: auto; min-height: 44px; padding: 0 18px; font-size: 15px; display: flex; align-items: center; }
.ph-send .wl-done { justify-content: center; font-size: 16px; }
.ph-send .wl .wl-note { left: 18px; }
/* A phone's bar keeps its own Join the waitlist, which goes down to the card. */
@media (max-width: 600px), (pointer: coarse) and (max-height: 500px) { .bar > .wl { display: none; } }
/* The card's small print gives its line to a message. */
.ph-send:has(.wl-note:not(:empty)) > small { visibility: hidden; }