/* ==========================================================================
   The qualification form.

   Same phosphor vocabulary as the rest of the page: inset wells on near-black,
   hairline rules, amber for the thing you are being asked and cyan for the
   thing you are about to do. Controls are sized for a thumb first — a lead form
   that is awkward on a phone is a lead form that does not get sent.

   `color-scheme: dark` is already declared globally, so native controls (the
   date picker, the select popup) arrive dark without being restyled.
   ========================================================================== */

/* The form's own heading, inside the contact section and below its buttons. */
.lead-form-head {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  margin-bottom: 1.5rem;
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: var(--border);
  max-width: 46rem;
}

.lead-form-head h3 {
  margin: 0.35rem 0 0.6rem;
  font-size: var(--step-2);
}

.lead-form-head p { margin: 0; max-width: 58ch; }

.lead-form {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  max-width: 46rem;
}

/* --- Blocks -------------------------------------------------------------- */

.form-block {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  background: var(--bg-panel);
  border: var(--border);
  border-radius: var(--radius);
}

/* The left edge lights up so a block that has just appeared reads as new
   rather than as something that was always there and missed. */
.form-block { border-left: 2px solid var(--rule-bright); }

.form-block__title {
  margin: 0;
  font-size: var(--step-1);
  color: var(--amber);
}

/* The paragraph for the currently chosen automation. */
.form-note {
  margin: 0;
  padding: 0.85rem 1rem;
  background: var(--bg-inset);
  border-left: 2px solid var(--cyan-dim);
  color: var(--fg-mute);
  font-size: var(--step--1);
  max-width: 60ch;
}

/* --- Fields -------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 0.35rem; }

.field__label {
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
}

.field__help {
  margin: 0;
  font-size: var(--step--1);
  color: var(--fg-faint);
  max-width: 58ch;
}

/* Two fields side by side once there is room for them to stay legible.
   Aligned to the end so the inputs line up along their bottom edge even when one
   label wraps to two lines and its neighbour does not. */
.field-row { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 34rem) {
  .field-row { grid-template-columns: 1fr 1fr; }
  /* The dial code needs far less room than the number beside it — but enough
     that its label stays on one line. */
  .field-row--phone { grid-template-columns: 9rem 1fr; }
}

/* --- Controls ------------------------------------------------------------ */

.input {
  font: inherit;
  font-size: var(--step-0);
  width: 100%;
  padding: 0.7rem 0.8rem;
  color: var(--fg);
  background: var(--bg-inset);
  border: 1px solid var(--rule-bright);
  border-radius: var(--radius);
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.input::placeholder { color: var(--fg-faint); }

.input:hover { border-color: var(--fg-faint); }

.input:focus-visible {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber-dim);
}

.textarea { resize: vertical; min-height: 6rem; line-height: 1.6; }

/* The native arrow is left in place: it is the affordance that says "there are
   more options here", and drawing a replacement buys nothing. */
.select { cursor: pointer; }

/* --- Choice cards -------------------------------------------------------- */

.choices { display: flex; flex-direction: column; gap: 0.6rem; }

.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--bg-inset);
  border: 1px solid var(--rule-bright);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}

.choice:hover { border-color: var(--fg-faint); }

/* The radio itself stays a real radio — it carries the keyboard behaviour and
   the accessibility semantics for free. It is only scaled up to match the
   weight of the text beside it. */
.choice__input {
  margin: 0;
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.28rem;
  accent-color: var(--amber);
  cursor: pointer;
}

.choice__text { display: flex; flex-direction: column; gap: 0.15rem; }
.choice__label { color: var(--fg); }
.choice__body { color: var(--fg-faint); font-size: var(--step--1); }

/* :has lets the whole card light up from the state of the radio inside it,
   with no JavaScript keeping a class in sync. */
.choice:has(.choice__input:checked) {
  border-color: var(--amber);
  background: color-mix(in srgb, var(--amber) 7%, var(--bg-inset));
}

.choice:has(.choice__input:checked) .choice__label { color: var(--amber); }

.choice:has(.choice__input:focus-visible) {
  outline: 1px solid var(--cyan);
  outline-offset: 2px;
}

/* --- Actions ------------------------------------------------------------- */

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.form-actions .btn:disabled { opacity: 0.55; cursor: progress; }

.form-status {
  margin: 0;
  font-size: var(--step--1);
  max-width: 44ch;
}

.form-status[data-kind="error"]   { color: var(--magenta); }
.form-status[data-kind="success"] { color: var(--green); }
.form-status[data-kind="sending"] { color: var(--fg-faint); }

/* Motion is only ever decoration here, so it goes away entirely on request. */
@media (prefers-reduced-motion: reduce) {
  .input, .choice { transition: none; }
}