/* Form fields and notices. */
.form { display: flex; flex-direction: column; gap: var(--s2); max-width: 400px; }
.form label { font-weight: 600; margin-top: var(--s2); }
.form input {
  font: inherit; padding: var(--s2) var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-control);
}
.form input:focus-visible, .form textarea:focus-visible { border-color: var(--brand-dark); outline: 2px solid var(--brand-dark); outline-offset: 2px; }
.form .btn { align-self: flex-start; margin-top: var(--s3); }

.notice {
  border: 2px solid var(--charcoal); border-radius: var(--r-card);
  padding: var(--s3); margin-bottom: var(--s3); background: var(--surface-2);
}
.notice ul { margin: var(--s2) 0 0; padding-left: var(--s4); }

.form select {
  font: inherit; padding: var(--s2) var(--s3); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-control);
}
.form select:focus-visible { border-color: var(--brand-dark); outline: 2px solid var(--brand-dark); outline-offset: 2px; }

/* Honeypot: off-screen for people and screen readers, still in the page for bots. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form textarea { font: inherit; padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r-control); width: 100%; }

/* Public pages: taller, calmer fields with a drawn arrow on selects, and notices with a coloured edge instead of a heavy box. */
.public .form label { margin-top: var(--s3); }
.public .form input:not([type="radio"]):not([type="checkbox"]), .public .form select { min-height: 48px; }
.public .form input:not([type="radio"]):not([type="checkbox"]):hover, .public .form select:hover, .public .form textarea:hover { border-color: var(--charcoal); }
.public .form select {
  appearance: none; padding-right: var(--s6); background-color: var(--white);
  background-image: linear-gradient(45deg, transparent 50%, var(--charcoal) 50%), linear-gradient(135deg, var(--charcoal) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.public .notice { border: 1px solid var(--border); border-left: 4px solid var(--charcoal); padding: var(--s3) var(--s4); }
.public .notice--info { background: var(--info-bg); border-left-color: var(--info-line); }
.public .notice--ok { background: var(--ok-bg); border-left-color: var(--ok-line); }
.public .notice--warn { background: var(--warn-bg); border-left-color: var(--warn-line); }
.public .notice--error { background: var(--error-bg); border-left-color: var(--error-line); }
.public .notice--privacy { margin-top: var(--s3); font-size: 14px; line-height: 20px; border-left-color: var(--blue); }
.public .notice--privacy p { margin: var(--s1) 0 0; }