/* Waitlist form states, driven by assets/waitlist-form.js. The message inherits its colour from
   the block the form sits in, so it reads on the pink footer and on the white popup alike. */

/* .wait sets display:flex, which would otherwise beat the hidden attribute. */
form[data-waitlist-form][hidden]{display:none}

/* Busy is shown by the button's label ("Joining…"); no dimming, which would drop the text below
   readable contrast. */
form[data-waitlist-form] button[aria-busy="true"]{cursor:progress}

.wl-msg{max-width:460px;margin:12px auto 0;padding:0 20px;font:600 13.5px/1.5 var(--ui);text-align:center}
.wl-msg:empty{display:none}
.wl-msg:focus{outline:none}

/* The footer field carries a 40px bottom margin (footer .wait in index.html): pull the message up
   under the field. If that margin changes, change the -26px with it. */
footer .wait + .wl-msg{margin-top:-26px;margin-bottom:34px}
footer .wait[hidden] + .wl-msg{margin-top:22px}