/* lead-form — the contact form component (form[data-lead-form], js/lead-form.js).
   Uses the tokens in site.css; load after it. */

.lead-form { display: grid; gap: 1.1rem; max-width: 40rem; }
.lead-form .field { display: grid; gap: .35rem; }
.lead-form .field-row { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .lead-form .field-row { grid-template-columns: 1fr 1fr; } }

.lead-form label,
.lead-form .label { font-family: var(--font-mono); font-size: var(--step--1); color: var(--slate); }
.lead-form .opt { color: var(--slate-2); }

.lead-form input[type="text"],
.lead-form input[type="email"],
.lead-form select,
.lead-form textarea {
  font: inherit; font-size: var(--step-0); color: var(--ink);
  background: color-mix(in srgb, var(--paper) 55%, #fff);
  border: var(--hair); border-radius: var(--radius);
  padding: .65em .8em; width: 100%; min-width: 0;
}
.lead-form textarea { min-height: 9rem; resize: vertical; }
.lead-form input:focus-visible,
.lead-form select:focus-visible,
.lead-form textarea:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; border-color: var(--amber-deep); }
.lead-form [aria-invalid="true"] { border-color: #B3412E; }

.lead-form .consent { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--step--1); color: var(--ink); }
.lead-form .consent input { margin-top: .25em; accent-color: var(--amber-deep); width: 1.05rem; height: 1.05rem; flex: none; }

/* Honeypot: off-screen, out of the tab order, hidden from assistive tech. */
.lead-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.lead-form button[aria-busy="true"] { opacity: .6; cursor: progress; }

.lead-form-status { font-family: var(--font-mono); font-size: var(--step--1); min-height: 1.4em; }
.lead-form-status[data-kind="error"] { color: #B3412E; }

.lead-form-done { max-width: 40rem; padding: 1.5rem; border: var(--hair); border-left: 3px solid var(--amber); border-radius: var(--radius); background: color-mix(in srgb, var(--paper) 55%, #fff); }
.lead-form-done h3 { font-size: var(--step-1); }
.lead-form-done p { margin-top: .5rem; }
.lead-form-done:focus { outline: none; }