/* Contact page only — the form, and the state it shows after sending. */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.contact-form label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
}

/* The design styled these three inline and identically. One rule now, and — more to the point —
   they inherit the font, which they did not: an unstyled <textarea> falls back to the browser's
   monospace default, so the message box was in a different typeface from the fields above it. */
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 60%, var(--surface));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  outline: none;
  transition: border-color 0.15s ease;
}

.contact-form textarea { resize: vertical; min-height: 120px; }

.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--text-dim); }

/* The design carried a `style-focus` attribute, which is a design-tool convention no browser
   implements — so in a real page the fields had no focus indication at all. */
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  border-color: color-mix(in srgb, var(--brand) 60%, transparent);
  outline: 2px solid color-mix(in srgb, var(--brand) 35%, transparent);
  outline-offset: 1px;
}

/* Browser validation, shown only once the field has been interacted with — `:invalid` alone marks a
   required field red before it has been touched, which reads as an error the reader just made. */
.contact-form input:user-invalid,
.contact-form textarea:user-invalid {
  border-color: color-mix(in srgb, #F87171 70%, transparent);
}

.contact-form button { margin-top: var(--space-xs); transition: filter 0.15s ease, transform 0.15s ease; }
.contact-form button:hover { filter: brightness(1.12); transform: translateY(-1px); }

/* The confirmation panel. Hidden in the markup with the `hidden` attribute so it is absent for
   everyone — including screen readers — until there is something to confirm. */
.contact-sent[hidden] { display: none; }