/* Waitlist form — the only page on the site with an input, so this loads on
   /agents/ alone and styles.css stays the untouched shared copy.
   Everything below borrows the site's own variables so the form inherits the
   paper, the type, and both themes without redefining any of them. */

.waitlist {
  margin: 1.6rem 0 0;
}

.waitlist-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.6rem;
}

.waitlist input[type="email"] {
  flex: 1 1 16rem;
  min-width: 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  transition: opacity 150ms ease;
}

/* the prose sets its own colour per theme; the field follows it rather than
   carrying a second palette that would drift from it */
.waitlist input[type="email"]::placeholder { color: inherit; opacity: 0.45; }
.waitlist input[type="email"]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.waitlist input[type="email"][aria-invalid="true"] { outline: 2px solid #9d3b32; outline-offset: 2px; }

.waitlist button {
  flex: 0 0 auto;
  padding: 0.55rem 1.1rem;
  border: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: var(--mono-font, ui-monospace, monospace);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.waitlist button:hover { background: currentColor; }
/* the label has to invert with the fill, and it cannot use currentColor for
   both, so it borrows the page background */
.waitlist button:hover > * { color: rgb(var(--page-veil, 250, 249, 246)); }
.waitlist button:hover { color: rgb(var(--page-veil, 250, 249, 246)); background: var(--color-text-day, #111); }
.waitlist button[disabled] { opacity: 0.5; cursor: default; }

.waitlist-note,
.waitlist-error {
  margin: 0.7rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  opacity: 0.75;
}
.waitlist-error { color: #9d3b32; opacity: 1; }

.waitlist-done { margin: 1.6rem 0 0; }

@media (max-width: 30rem) {
  .waitlist button { width: 100%; }
}