/* ─────────────────────────────────────────────────────────────
   form.css — the intake form.

   The only place on the site where a visitor can hand us
   something without leaving for a mail client. Built on the
   canonical palette and type in veridom.css; adds no colours
   of its own.
   ───────────────────────────────────────────────────────────── */

.intake {
  border: 1px solid var(--border);
  background: var(--surface);
  padding: clamp(24px, 3.4vw, 42px);
}

.fgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 720px) { .fgrid { grid-template-columns: 1fr; } }
.fg.full { grid-column: 1 / -1; }

.fg { display: flex; flex-direction: column; gap: 9px; }

.fg label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--silver);
}

.fg input,
.fg select,
.fg textarea {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  color: var(--cream);
  background: var(--deep);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 13px 14px;
  width: 100%;
  transition: border-color .3s var(--ease), background .3s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.fg textarea { resize: vertical; min-height: 116px; line-height: 1.55; }

.fg input::placeholder,
.fg textarea::placeholder { color: var(--muted); }

.fg input:hover,
.fg select:hover,
.fg textarea:hover { border-color: var(--rail); }

.fg input:focus,
.fg select:focus,
.fg textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--vault);
}
.fg input:focus-visible,
.fg select:focus-visible,
.fg textarea:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 2px; }

/* the select needs its own chevron once the native one is removed */
.fg select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--silver) 50%),
    linear-gradient(135deg, var(--silver) 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
  cursor: pointer;
}
.fg select:invalid { color: var(--muted); }
.fg select option { background: var(--deep); color: var(--cream); }

/* a field the visitor got wrong, but only after they have tried */
.fg input:not(:placeholder-shown):invalid,
.fg textarea:not(:placeholder-shown):invalid { border-color: var(--blocked-deep); }

.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
  margin-top: clamp(22px, 2.6vw, 30px);
}

.form-note {
  font-size: 13.5px;
  color: var(--muted);
  max-width: 44ch;
  line-height: 1.6;
}

.form-submit[disabled] { opacity: .55; pointer-events: none; }

/* the reply line: quiet until it has something to say */
.form-result {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  line-height: 1.7;
  color: var(--silver);
  min-height: 1.2em;
}
.form-result:empty { margin-top: 0; min-height: 0; }
.form-result.ok  { color: var(--established); }
.form-result.err { color: var(--blocked); }

/* what happens after we have it — shown in place of the form */
.form-done {
  border: 1px solid var(--established-deep);
  background: var(--deep);
  padding: clamp(24px, 3.4vw, 42px);
}
.form-done h3 {
  font-family: var(--serif);
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 500;
  color: var(--cream);
  margin-bottom: 12px;
}
.form-done p { color: var(--silver); max-width: 52ch; }