/* The waitlist form. Its own file, because the guide pages carry it too
   (tools/build.mjs cuts the finished form out of the home page).
   One row: the email and the button beside it (on a phone they stack). Under
   it, "How we use your email", which opens the notice the visitor agrees to
   (js/waitlist.js; Privacy 15). While sign-up is closed, or without
   JavaScript, the row shows dimmed. */

.waitlist {
  max-width: 42rem; margin: 2.5rem auto 0; text-align: start;
  display: grid; gap: 1rem; padding: clamp(1.1rem, 3vw, 1.6rem);
  background: var(--surface); border-radius: calc(var(--r-card) + 6px);
  box-shadow: inset 0 0 0 1px var(--line), 0 30px 70px -40px rgba(var(--shadow-rgb), .45);
}
.waitlist [hidden] { display: none !important; }
.wl-fields { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: .8rem; }
.wl-fields:disabled .wl-row { opacity: .5; }
.wl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: end; }
.wl-row .btn { min-height: 52px; }
/* While sign-up is closed, there is nothing to explain. */
.wl-fields:disabled .wl-more { display: none; }
.wl-field { display: grid; gap: .4rem; font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.wl-field input {
  width: 100%; min-height: 52px; padding: .6rem 1rem;
  font: inherit; font-size: 1.02rem; font-weight: 400; color: var(--ink);
  background: var(--bg); border: 1px solid var(--field-line); border-radius: 999px;
  transition: border-color .2s, box-shadow .2s;
}
/* A transparent outline, not none: in Windows' high contrast mode the shadow
   is dropped and the outline takes the system colour, so focus still shows. */
.wl-field input:focus-visible { outline: 2px solid transparent; outline-offset: 2px; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
[dir="rtl"] .wl-field input[type="email"] { text-align: right; }
.wl-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }
.wl-more summary { cursor: pointer; font-size: .92rem; font-weight: 600; color: var(--ink-2); width: fit-content; padding-block: .2rem; }
.wl-more summary:hover { color: var(--ink); }
/* The link to the children's notice stays in sight while the notice is
   closed (COPPA 312.4(d)). */
.wl-links { font-size: .92rem; }
.wl-links a { color: var(--brand); font-weight: 600; }
.wl-fields:disabled .wl-links { display: none; }
/* The notice the sending agrees to (PPL s.11; Privacy 15): no lighter than
   the field label, never the smallest text on the form. */
.wl-consent { margin-top: .6rem; font-size: .95rem; line-height: 1.55; color: var(--ink-2); }
.wl-consent a { color: var(--brand); font-weight: 600; overflow-wrap: anywhere; }
.wl-note { font-weight: 600; padding: .8rem 1.1rem; border-radius: var(--r-md); background: var(--brand-tint); color: var(--ink); }
.wl-err { background: var(--flame-tint, #FBEEDC); }
@media (max-width: 560px) {
  .wl-row { grid-template-columns: 1fr; }
  .wl-row .btn { width: 100%; justify-content: center; }
  .waitlist .btn { white-space: normal; }
}