/* ============================================================================
   The waitlist form, and the three pieces of landing furniture the live page
   needs that the concept did not have.

   Concept E's `edge.css` is the visual system and is loaded unmodified above
   this file, so everything here is built from its variables -- the same navy
   surfaces, the same one signal ink, the same spacing scale. The rule from
   tokens.css holds: --accent is for the action you can take and the data line,
   never for decoration. The only new colours are the two semantic inks the form
   needs, and both already exist as --positive and --negative.

   Loaded after tokens.css and edge.css, and before nothing else.
   ========================================================================== */

/* ---- the waitlist section ---- */
.e-wait {
  max-width: var(--e-measure);
}

.e-wait-lede {
  color: var(--text-2);
  font-size: var(--fs-16);
  margin: 0 0 var(--s6);
  max-width: 46ch;
}

.e-form {
  margin: 0;
}

.e-form-label {
  display: block;
  color: var(--text-2);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  margin-bottom: var(--s2);
}

.e-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

.e-input {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  color: var(--text);
  flex: 1 1 18rem;
  font-family: var(--font);
  font-size: var(--fs-16);
  min-width: 0;
  padding: var(--s3) var(--s4);
}

.e-input::placeholder {
  color: var(--text-3);
}

/* The border is the only focus affordance that survives a dark surface, so it
   is a full-strength ink rather than a soft one: 3:1 against what it sits on. */
.e-input:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.e-input[aria-invalid="true"] {
  border-color: var(--negative);
}

.e-form-row .e-btn {
  flex: 0 0 auto;
}

.e-btn[disabled] {
  cursor: progress;
  opacity: 0.6;
}

/* ---- the honeypot ----
   Off-screen rather than `display:none`, because some scripts fill only what
   they believe is visible, and `display:none` is what they check for. It is
   also `tabindex="-1"` and `aria-hidden`, so a person never reaches it. */
.e-hp {
  height: 0;
  left: -9999px;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 1px;
}

/* ---- Turnstile's mount point ----
   Empty and therefore invisible until the widget is injected. `:empty` is what
   keeps a stray gap from appearing when the check is switched off. */
#waitlist-turnstile {
  margin-top: var(--s4);
}

#waitlist-turnstile:empty {
  display: none;
}

/* ---- the status line ----
   One element, three states, and it is a live region so a screen reader hears
   the answer without the form moving. Colour is never the only carrier: the
   sentence itself says what happened. */
.e-form-status {
  font-size: var(--fs-13);
  margin: var(--s4) 0 0;
  min-height: 1.4em;
}

.e-form-status[data-state="ok"] {
  color: var(--positive);
}

.e-form-status[data-state="error"] {
  color: var(--negative);
}

.e-form-status[data-state="busy"] {
  color: var(--text-2);
}

.e-form-status:empty {
  margin-top: 0;
}

.e-form-note {
  color: var(--text-3);
  font-size: var(--fs-12);
  margin: var(--s3) 0 0;
  max-width: 52ch;
}

.e-form-note a {
  color: var(--accent-on-soft);
}

/* ---- the two-item nav ----
   The mockup nav carried six entries, four of which pointed at screens that do
   not exist on the live site. Two remain, and the sign-in action is gone: there
   are no accounts in Phase 0 to sign in to. */
.e-nav-links {
  gap: var(--s6);
}

@media (max-width: 620px) {
  .e-nav-links {
    display: none;
  }

  .e-form-row {
    flex-direction: column;
  }

  .e-form-row .e-btn {
    width: 100%;
  }
}