/* The contact form. A separate stylesheet from site.css on purpose, twice over.
 *
 * MKT-3 is rewriting site.css for the home page while this lands, so the two would
 * conflict on every line. And the honeypot rule below is a defence rather than a
 * decoration: it belongs in a file whose reason for existing is written at the top of
 * it, not scattered through a theme somebody will tidy.
 *
 * Nothing here needs 'unsafe-inline'. The CSP in nginx.site.conf allows it for styles,
 * and MKT-1 left a note saying to drop it if MKT-3 lands without needing it; this file
 * does not spend it.
 */

/* ── the honeypot, which is the whole reason this file is a defence ─────────────────
 *
 * `display: none`, and NOT `position: absolute; left: -9999px`.
 *
 * This cost keepfloat four real prospects across two attempts at fixing it. An
 * off-screen input is a genuine, fillable field to every major browser and password
 * manager, and `autocomplete="off"` is widely ignored, so autofill filled it with the
 * visitor's own email and the server threw the submission away with a success message on
 * screen. Their first fix renamed the field, which did nothing at all, because autofill
 * was never keying on the name: it fills any plausible text input. A display:none input
 * is skipped.
 *
 * A CSS-parsing bot can skip it too. That is the deliberate trade: Turnstile is the
 * actual bot gate, and a false positive here costs a customer. The second half of the
 * fix is on the server, in apps/leads-api/app.py: a hidden field holding the sender's
 * own email or name is autofill, not a bot, and the lead is accepted.
 *
 * The ignore hints on the input itself are the belt to this brace. Password managers do
 * respect data-1p-ignore and data-lpignore even though they ignore autocomplete="off".
 */
.hp {
  display: none;
}

/* ── the form ─────────────────────────────────────────────────────────────────────── */
.lead-form {
  display: grid;
  gap: 1.1rem;
  max-width: 34rem;
  margin-top: 1.6rem;
}

.lead-form label {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  opacity: 0.85;
}

/* **`:is()` rather than a fourth entry in the list, and that is the fix** (TBX-5007).
   This rule enumerated `input[type=text|email|tel]` and `textarea`, and `select` was never
   added when the "how did you hear about us" control arrived. So the one control on the
   page that had no rule fell through to the user agent's default — a white box with black
   text and a native chevron, on a dark page. Written this way a fifth control type is
   styled the day it is added rather than the day somebody photographs it. */
.lead-form :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
  width: 100%;
  padding: 0.7rem 0.8rem;
  font: inherit;
  color: inherit;
  /* `background-color`, NOT the `background` shorthand. The shorthand resets
     `background-image`, and `:is()` takes the specificity of its most specific argument —
     `input[type="text"]` — so this rule outranks `.lead-form select` below and silently
     erased its chevron. Caught by looking at the rendered page; the control had gone dark
     and legible and stopped looking like a dropdown at all, which is worse than the
     white box it replaced. */
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
}

.lead-form :is(input, select, textarea):focus-visible {
  outline: 2px solid #f2a900;
  outline-offset: 1px;
}

/* The chevron. `appearance: none` is what removes the native one, and it takes the rest of
   the platform styling with it — which is the point, but it means the arrow has to be
   drawn. An inline SVG in a `background-image` keeps it in the stylesheet the CSP already
   allows rather than adding an asset or an inline style attribute, both of which
   `scripts/check-site.py` would refuse. `currentColor` cannot be used inside a data URI,
   so the stroke is the palette's `--ink` written out. */
.lead-form select {
  appearance: none;
  padding-right: 2.2rem;
  background-image: 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 1l5 5 5-5' fill='none' stroke='%23e9edf1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  /* 44px on a coarse pointer is the estate rule; `site.css` already asserts it for
     buttons and this control was the one input that could fall under it. */
  min-height: 44px;
}

/* The open list is the browser's, and on a dark page it inherits nothing from above — so
   the options are named explicitly or the panel opens white under a dark control. */
.lead-form select option {
  background: #171c21;
  color: var(--ink);
}

.lead-form textarea {
  min-height: 8.5rem;
  resize: vertical;
}

.lead-form .hint {
  font-size: 0.82rem;
  opacity: 0.7;
  margin-top: 0.35rem;
}

.lead-form button {
  justify-self: start;
  padding: 0.75rem 1.6rem;
  font: inherit;
  font-weight: 600;
  color: #0e1114;
  background: #f2a900;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.lead-form button[disabled] {
  opacity: 0.55;
  cursor: progress;
}

/* The Turnstile widget renders into this box. It reserves its own height so the button
 * does not jump down the page when the widget finishes loading. */
.lead-form .turnstile {
  min-height: 65px;
}

/* ── what the visitor is told ──────────────────────────────────────────────────────
 *
 * Both states are in the markup from the start and toggled with `hidden`, so a screen
 * reader announces the result through aria-live rather than the message appearing in a
 * place nothing is watching.
 */
.lead-note {
  padding: 0.85rem 1rem;
  border-radius: 6px;
  border-left: 3px solid;
  font-size: 0.95rem;
}

.lead-note.ok {
  border-color: #57b87a;
  background: rgba(87, 184, 122, 0.1);
}

.lead-note.bad {
  border-color: #d9534f;
  background: rgba(217, 83, 79, 0.1);
}

.lead-note[hidden] {
  display: none;
}

/* ── signup (MKT-5) ────────────────────────────────────────────────────────────────
 *
 * The signup form is the lead form with three additions, so it reuses everything above
 * rather than starting a third stylesheet. The honeypot rule at the top of this file
 * covers it too, which is the main reason it lives here: that defence should not be
 * duplicated, and a signup form with an off-screen honeypot would reintroduce the exact
 * failure the top of this file is about.
 */

/* The address field and its fixed suffix on one line, so the whole address reads as one
 * thing. The suffix is markup rather than a placeholder because a placeholder disappears
 * the moment somebody types, which is exactly when they want to see what they are
 * building. */
.slug-row {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}

.slug-row input[type="text"] {
  flex: 1 1 12rem;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.slug-suffix {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0.75;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-left: 0;
  border-radius: 0 6px 6px 0;
}

.lead-form .opt {
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.7;
}

/* What the page becomes once the shop exists. Not a toast and not a banner: the form is
 * hidden and this takes its place, because the one thing a person must not do at this
 * point is submit again. */
.signup-done {
  max-width: 34rem;
  margin-top: 1.6rem;
  padding: 1.2rem 1.3rem;
  border-radius: 6px;
  border-left: 3px solid #57b87a;
  background: rgba(87, 184, 122, 0.1);
}

.signup-done h2 {
  margin-top: 0;
}

.signup-done[hidden],
.signup-form[hidden] {
  display: none;
}