/* mote.so waitlist form, shared by the homepage and Meet Mote so both behave
   the same. Sizes follow each page's --u (a viewport unit both pages define).

   Layout: email, trade, then JOIN WAITLIST on one row when the form is wide
   enough; otherwise the trade field sits under the email at the same width
   with the button beside the email. "Other" opens a text field under the
   trade field. Phones stack everything.

   Desktop (mouse/trackpad) gets a custom trade menu built by waitlist.js;
   phones keep their own picker and only the closed field is styled. */

.wl-form {
  --wl-h: clamp(46px, calc(var(--u) * 3.7), 60px);
  --wl-pad: calc(var(--u) * 1.4);
  --wl-font: clamp(0.95rem, calc(var(--u) * 1.35), 1.2rem);
  --wl-gap: calc(var(--u) * 1.26);
  --wl-field-bg: var(--input-bg, #FFFFFF);
  --wl-placeholder: #5A5A57;
  --wl-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23111111' stroke-width='1.25'/%3E%3C/svg%3E");
  position: relative;
  container-type: inline-size;
  max-width: min(clamp(320px, calc(var(--u) * 42), 640px), 100%);
}
.wl-form[hidden] { display: none; }

.wl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 37%;
  grid-template-areas: "email button" "trade ." "other .";
  gap: var(--wl-gap);
}
.wl-email  { grid-area: email; }
.wl-trade  { grid-area: trade; position: relative; min-width: 0; }
.wl-other  { grid-area: other; }
.wl-submit { grid-area: button; }
.wl-other[hidden] { display: none; }

/* Wide enough for all three on one row. */
@container (min-width: 720px) {
  .wl-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas: "email trade button" ". other .";
  }
  .wl-submit { padding: 0 2.4rem; }
}

/* The closed fields: email, trade (native or custom) and "Your trade" all match. */
.wl-field, .wl-trade-btn {
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  height: var(--wl-h);
  padding: 0 var(--wl-pad);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--wl-font);
  font-weight: 300;
  color: var(--fg);
  background-color: var(--wl-field-bg);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.wl-field::placeholder { color: var(--wl-placeholder); }
.wl-field[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(180,35,24,0.15);
}

/* Trade: a thin ink chevron, never the browser's arrow. */
.wl-select, .wl-trade-btn {
  -webkit-appearance: none; appearance: none;
  padding-right: calc(var(--wl-pad) + 1.25rem);
  background-image: var(--wl-chevron);
  background-repeat: no-repeat;
  background-position: right var(--wl-pad) center;
  cursor: pointer;
  text-align: left;
}
.wl-select.is-empty, .wl-trade-btn.is-empty { color: var(--wl-placeholder); }
.wl-select option { color: #111111; }
.wl-trade-btn {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wl-trade.is-enhanced .wl-select { display: none; }

/* The custom menu (desktop). */
.wl-list {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 4px);
  z-index: 30;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: #FFFFFF;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  box-shadow: 0 10px 28px rgba(26,26,26,0.12);
}
.wl-list[hidden] { display: none; }
.wl-list.is-up { top: auto; bottom: calc(100% + 4px); box-shadow: 0 -10px 28px rgba(26,26,26,0.12); }
.wl-option {
  position: relative;
  padding: 0.6em var(--wl-pad);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--wl-font);
  font-weight: 300;
  line-height: 1.3;
  color: #111111;
  cursor: pointer;
  user-select: none;
}
.wl-option:hover, .wl-option.is-active { background: #EFE9E1; }
.wl-option[aria-selected="true"]::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  background: var(--accent);
}

.wl-submit {
  height: var(--wl-h);
  padding: 0 1rem;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(0.8rem, calc(var(--u) * 1.1), 1.05rem);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--bg-deep, #111111);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.wl-submit:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79,201,198,0.3);
}
.wl-submit:active { transform: translateY(0); }
.wl-submit:disabled { cursor: default; transform: none; box-shadow: none; }

/* A field people never see; bots that fill it are dropped by the server. */
.wl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.wl-note {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--error);
  font-weight: 400;
}
.wl-note:empty { display: none; }
.wl-success {
  font-size: clamp(1rem, calc(var(--u) * 1.5), 1.3rem);
  color: var(--fg);
  font-weight: 400;
}
.wl-success[hidden] { display: none; }
.wl-check {
  display: inline-block;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: #111111;
  text-align: center;
  line-height: 20px;
  font-size: 0.7rem;
  margin-right: 0.6rem;
  vertical-align: middle;
}

@media (max-width: 640px) {
  .wl-form { max-width: 100%; }
  .wl-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "email" "trade" "other" "button";
    gap: 0.6rem;
  }
  .wl-field, .wl-submit { height: 50px; }
}

/* Phones set to dark (the dark palette itself lives in each page). */
@media (prefers-color-scheme: dark) and (max-width: 640px) {
  .wl-form {
    --wl-field-bg: rgba(247,242,236,0.04);
    --wl-placeholder: #8E8A83;
    --wl-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23F2EDE6' stroke-width='1.25'/%3E%3C/svg%3E");
  }
  .wl-field[aria-invalid="true"] { box-shadow: 0 0 0 3px rgba(249,112,102,0.18); }
  .wl-submit { color: #1A1A1A; }
}