/* Contact page only. Kept OUT of the HTML because the CSP forbids an inline <style>
   element - server/test/no-inline-style.test.js enforces that on every page. */

/*
 * 🔴 THE LOCAL `input[type=tel]` / `textarea` PATCH THAT USED TO SIT HERE IS GONE — 2026-08-03.
 *
 * It existed because app.css's shared rule listed `text, email, time, number, select` AND NOTHING
 * ELSE, so `tel` and `textarea` fell back to the browser's intrinsic ~20-character box: on this
 * page the phone field and the message box rendered as small inline controls beside their labels
 * while the name and email fields directly above them looked perfect.
 *
 * Its own comment said the real fix was adding the selectors to the shared rule, flagged it rather
 * than doing it, and promised that "if app.css is fixed later, deleting this block changes nothing
 * on screen". app.css HAS now been fixed — `password`, `tel`, `textarea`, `search`, `url` and
 * `date` are all in the shared rule — so this block is deleted rather than left as a second copy
 * of declarations free to drift from the ones they duplicate.
 *
 * ⚠ THE FLAG WAS RIGHT AND THE DELAY WAS THE DEFECT. While it sat flagged, `type=password` broke
 * the Shelly-key field and both account-PIN fields the same way, and nobody noticed because the
 * only page that had met the bug had already patched around it locally.
 */

/* A message box wants room to breathe; the shared min-height is sized for single-line controls. */
textarea {
  min-height: 160px;
  resize: vertical;
}

/* Off-screen rather than display:none - some bots skip anything that is display:none. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The radio label must sit BESIDE its control, not above it - `label { display: block }` in
   app.css would otherwise stack the word under the dot. */
.radio-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 400;
  margin-bottom: var(--space-2);
}
.radio-row input { width: auto; min-height: 0; }

/* The radio group is a fieldset; strip the default browser chrome so it matches the page. */
#contact-form fieldset { border: 0; padding: 0; margin: 0 0 var(--space-6); }