/**
 * Contact form, two tracks.
 *
 * `.form-grid`, `.field`, `.field--full`, `.field--file`, `.hint`, `.req` and
 * `.consent` are all owned by pages.css §12 and are not repeated here. What is
 * new is the panel, the segmented switch, the fieldset reset, and the two rules
 * that make the whole thing work with JavaScript off.
 *
 * THE `html:not(.js)` PAIR IS LOAD-BEARING. `main.js` adds `.js` to <html>.
 * Until it does (or if it never does), the switch row is hidden because it
 * cannot switch anything, and both tracks render one after the other with a
 * dashed rule between them. Written as `:not(.js)` rather than as a `.no-js`
 * class so the fallback is the default state and cannot be forgotten.
 *
 * Every class is prefixed `contact-form__`, per AGENTS.md §2.
 */

.contact-form__panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lift);
  padding: var(--s-5);
}

/* ---- The segmented switch ------------------------------------------------ */
.contact-form__switch-row {
  display: flex;
  justify-content: center;
  margin-block-end: var(--s-5);
}

.contact-form__switch {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-1);
  padding: var(--s-1);
  background: var(--cloud);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}

.contact-form__switch button {
  flex: 1 1 auto;
  min-block-size: var(--btn-min-height);
  padding-block: var(--s-1);
  padding-inline: var(--s-4);
  border-radius: var(--r-pill);
  font-family: var(--body);
  font-weight: 700;
  font-size: var(--text-s);
  color: var(--ink-soft);
  transition:
    background-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    box-shadow var(--dur-normal) var(--ease-out-soft);
}

.contact-form__switch button:hover { color: var(--blue); }

.contact-form__switch button[aria-pressed="true"] {
  background: var(--blue);
  color: var(--white);
  box-shadow: var(--shadow-s);
}

/* ---- Tracks -------------------------------------------------------------- */
/* `min-inline-size: 0` is what lets a fieldset's grid children shrink. Without
   it a fieldset takes its min-content width from its contents and the two
   column grid inside overflows on a narrow screen. */
.contact-form__track {
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}

.contact-form__legend {
  padding: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--navy);
}

.contact-form__hint {
  margin-block: var(--s-1) var(--s-4);
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

.contact-form__hint .req { color: var(--red); }

/* No JavaScript: the switch is inert, so it is hidden entirely and both tracks
   render, quietly separated. */
html:not(.js) .contact-form__switch-row { display: none; }

html:not(.js) .contact-form__track + .contact-form__track {
  margin-block-start: var(--s-6);
  padding-block-start: var(--s-5);
  border-block-start: 1px dashed var(--line);
}

/* ---- Submit -------------------------------------------------------------- */
.contact-form__submit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  margin-block-start: var(--s-5);
}

.contact-form__pending { align-self: stretch; }

/* The direct routes in the pending callout are an email address, a phone number
   and a Messenger link: unbreakable strings in a fixed-width box. At 320px the
   address ran 43px out of its paragraph (review finding F-12d, the same defect
   as the contact card). Scoped to the links rather than to the callout, because
   they are the only tokens here with no break opportunity, and `anywhere`
   rather than `break-word` so the block's min-content contribution shrinks too.
   Wrapped, never truncated – the address has to stay readable and copyable. */
.contact-form__pending a { overflow-wrap: anywhere; }

/* The button is switched off until a forms plugin is wired up, so it has to
   read as switched off. Cloud on ink-soft measures about 8.3:1, well clear of
   AA, because an inactive control still has to be readable.

   Keyed on `aria-disabled`, not on `disabled`. The control deliberately does
   not carry the disabled attribute: that removes it from the tab order, so a
   keyboard or screen reader user met no send button at all and no explanation
   for its absence (review finding F-10). It stays focusable, and the global
   :focus-visible ring in base.css still lands on it, which is the point. */
.contact-form__submit .btn[aria-disabled="true"] {
  background: var(--cloud);
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 var(--btn-border-width) var(--line);
  cursor: not-allowed;
}

.contact-form__submit .btn[aria-disabled="true"]:hover {
  background: var(--cloud);
  box-shadow: inset 0 0 0 var(--btn-border-width) var(--line);
  transform: none;
}

.contact-form__privacy {
  max-inline-size: 62ch;
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

.contact-form__privacy a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
}

.contact-form__intro { text-align: center; }

/* The honeypot. A real text input that no person sees, reaches by keyboard or
   hears announced; a form-filling bot fills it and the handler drops the
   submission. Off-canvas rather than display:none, because some bots skip
   fields that are not rendered. */
.contact-form .form-hp {
  position: absolute;
  inset-inline-start: -9999px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

/* The sent / not-sent callout above the fields. */
.contact-form__notice {
  margin-block-end: var(--s-4);
}
.contact-form__notice a { overflow-wrap: anywhere; }
.contact-form__notice:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }