/* /contact.html (Ian b15 2026-10-20, prompts 4 and 4b). Page-scoped styles;
   the shared styles.css supplies the base look. No inline styles anywhere on
   the page: style-src 'self' forbids them. */

/* Type-of-contact choice (prompt 4b): a quiet bordered group that matches
   the field borders; panels rely on the hidden attribute alone. */
#contact-type {
  margin: 0 0 1.25rem;
  padding: 0.75rem 0.9rem 0.85rem;
  max-width: 34rem;
  border: 1px solid #cfc5ae;
  border-radius: 3px;
}
#contact-type legend {
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 0 0.35rem;
}
.radio-row {
  display: block;
  font-family: var(--sans);
  margin: 0.4rem 0 0;
}
.radio-row input {
  margin-right: 0.4rem;
  accent-color: #4c3f2a;
}
#panel-feedback[hidden],
#panel-story[hidden],
#panel-application[hidden] {
  display: none;
}
#panel-application ul {
  margin: 0.35rem 0 0.9rem;
  padding-left: 1.4rem;
}
.field-hint {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: #6b6252;
  margin: 0.2rem 0 0;
}
.upload-notice {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: #6b6252;
  border-left: 2px solid #cfc5ae;
  padding-left: 0.6rem;
  margin: 0.6rem 0 0;
  max-width: 34rem;
}

.contact-field {
  margin: 0 0 1rem;
}
.contact-field label {
  display: block;
  font-family: var(--sans);
  margin-bottom: 0.25rem;
}
.contact-field input,
.contact-field textarea {
  width: 100%;
  max-width: 34rem;
  font: inherit;
  padding: 0.45rem 0.55rem;
  border: 1px solid #cfc5ae;
  border-radius: 3px;
  background: #fff;
  color: inherit;
}
.char-counter {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: #6b6252;
  margin: 0.2rem 0 0;
}
.field-error {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: #8a2f21;
  margin: 0.25rem 0 0;
}
.contact-note {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: #6b6252;
}
.contact-done {
  font-size: 1.1rem;
}

/* Honeypot: visually hidden without display:none on the input itself, so
   the field still exists for form data and screen readers stay honest. */
.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

altcha-widget {
  display: block;
  margin: 0 0 1rem;
  max-width: 34rem;
}