/*
 * The early-access form, shared by platform.html and landing.html.
 *
 * ONE FILE ON PURPOSE. The two pages each had their own copy of this form and
 * their own copy of its handler, and both copies carried the same bug for as long
 * as they existed: a hardcoded payload, a swallowed error and an unconditional
 * "You're on the list." Duplication is what let one fix miss the other, so the
 * behaviour lives in join-form.js and the skin lives here.
 *
 * Both pages are dark and both define --royal, --cyan and --muted, so this styles
 * against those plus white-alpha. Nothing here assumes navy or gold: the lamp page
 * and the platform page can look like themselves.
 */

/* Six columns so the rows can split differently: name and email take half each,
   the three dropdowns take a third each, consent and the button span the lot.
   Five equal columns would squeeze "Prefer not to say" into a name-sized box. */
.jf {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  max-width: 620px;
  margin: 30px auto 0;
  text-align: left;
}
.jf-half   { grid-column: span 3 }
.jf-third  { grid-column: span 2 }
.jf-full   { grid-column: span 6 }

/* The shared field skin — inputs, the dropdown trigger and the combobox all wear
   it, so a row of them lines up whatever each one actually is. */
.jf-in {
  width: 100%; min-width: 0;
  padding: 14px 16px;
  border-radius: 10px;
  font-family: inherit; font-size: 15px; text-align: left;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .07);
  color: #fff;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.jf-in::placeholder { color: #8DA0BC }
.jf-in:focus { border-color: var(--royal); box-shadow: 0 0 0 3px rgba(30, 144, 255, .2) }
.jf-in.is-bad { border-color: #FF4D6D }

/* ── The dropdowns ──────────────────────────────────────────────────────────
 * Custom, not <select>. A native select's POPUP is drawn by the operating
 * system: it cannot be given this palette, so on a dark form it opens as a
 * white system menu. color-scheme:dark helps on some browsers and not others,
 * which is worse than either. Everything below is real elements, so it looks the
 * same everywhere and can be reached by keyboard.
 */
.jf-dd { position: relative }

.jf-dd-btn { cursor: pointer; padding-right: 38px; display: block }
.jf-dd-btn.is-empty, .jf-dd-input.is-empty { color: #8DA0BC }

/* The arrow. Inline SVG because a native one cannot be recoloured. */
.jf-dd::after {
  content: "";
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 7px; pointer-events: none;
  background: no-repeat center/12px 7px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238DA0BC' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  transition: transform .2s;
}
.jf-dd.is-open::after { transform: translateY(-50%) rotate(180deg) }

.jf-dd-list {
  display: none;
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px);
  max-height: 240px; overflow-y: auto;
  list-style: none; margin: 0; padding: 6px;
  border-radius: 10px;
  /* Opaque, not white-alpha: a translucent menu over body text is unreadable,
     and this one can overlap the paragraph below the form. */
  background: #0E1B33;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .6);
}
.jf-dd.is-open .jf-dd-list { display: block }

.jf-dd-opt {
  padding: 10px 12px; border-radius: 7px;
  font-size: 14.5px; color: #DCE6F5; cursor: pointer;
}
/* is-active is the keyboard cursor and hover is the mouse — the same look, so
   arrowing down and pointing at it read as the same thing. */
.jf-dd-opt:hover, .jf-dd-opt.is-active { background: rgba(30, 144, 255, .22); color: #fff }
.jf-dd-opt[aria-selected="true"]::after { content: " ✓"; color: var(--cyan) }
.jf-dd-empty { padding: 10px 12px; font-size: 13.5px; color: #8DA0BC }

/* ── Consent ────────────────────────────────────────────────────────────────
 * A real checkbox, sized up and recoloured, rather than a div pretending. It
 * keeps the native focus ring, the space key and screen-reader semantics for
 * free — on the one field in this form that has to hold up if challenged.
 */
.jf-consent {
  grid-column: span 6;
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 4px;
  font-size: 13px; line-height: 1.5; color: #B9C6DC; cursor: pointer;
}
.jf-consent input {
  flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px;
  accent-color: var(--royal); cursor: pointer;
}
.jf-consent.is-bad { color: #FFD8DF }

.jf-submit { grid-column: span 6; justify-content: center }

/* ── Outcome ────────────────────────────────────────────────────────────── */
.jf-done {
  display: none; max-width: 620px; margin: 30px auto 0;
  padding: 16px 22px; border-radius: 12px;
  background: rgba(0, 212, 255, .1); border: 1px solid rgba(0, 212, 255, .35);
  font-size: 14.5px;
}
.jf-done b { color: var(--cyan) }

/* Failure has to be visible. Neither page could show one before — both reported
   success no matter what came back, which is how a dead endpoint went unnoticed. */
.jf-error {
  display: none; max-width: 620px; margin: 14px auto 0;
  padding: 12px 18px; border-radius: 10px;
  background: rgba(255, 77, 109, .12); border: 1px solid rgba(255, 77, 109, .4);
  font-size: 13.5px; color: #FFD8DF;
}

@media (max-width: 620px) {
  .jf-half, .jf-third { grid-column: span 6 }
}