/*
 * styles.css — plain CSS, no framework, no imports, no web fonts.
 *
 * Note the font stack: it is entirely system fonts. Loading a font from Google
 * would mean every volunteer's browser announcing to a third party that they
 * are filling out this specific form, and it would require widening the CSP.
 * Nothing on this page is fetched from anywhere except this origin and
 * Turnstile.
 */

:root {
  --ink: #16202c;
  --ink-soft: #4a5766;
  --ink-faint: #6b7887;
  --line: #d4dae1;
  --line-soft: #e6eaef;
  --bg: #f4f6f8;
  --panel: #ffffff;
  --accent: #12507e;
  --accent-dark: #0d3a5c;
  --danger: #a32020;
  --danger-bg: #fdf1f1;
  --ok: #1c6b3f;
  --ok-bg: #f0f8f3;
  --note-bg: #f7f9fb;
  --focus: #2a7fc4;
  --radius: 6px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0 1rem 4rem;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

main {
  max-width: 46rem;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.page-header {
  padding: 2.5rem 0 1.5rem;
}

/*
 * League logo, centred above the heading. Sized in rem so it scales with the
 * user's text size, and capped so it stays a mark rather than a banner.
 */
.league-logo {
  display: block;
  width: 100%;
  max-width: 11rem;
  height: auto;
  margin: 0 auto 1.25rem;
}

@media (max-width: 620px) {
  .league-logo { max-width: 9rem; }
}

h1 {
  margin: 0 0 0.75rem;
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.lede {
  margin: 0 0 1rem;
  color: var(--ink-soft);
}

.assurance {
  margin: 0;
  padding: 0.9rem 1rem;
  background: var(--ok-bg);
  border-left: 3px solid var(--ok);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.95rem;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Form structure
   -------------------------------------------------------------------------- */
fieldset {
  margin: 0 0 1.25rem;
  padding: 1.25rem 1.5rem 1.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);

  /*
   * Browsers give <fieldset> a default `min-width: min-content`, which no other
   * element has. It means a fieldset refuses to shrink below its widest child —
   * so Turnstile's fixed 300px widget dragged the whole form past the edge of a
   * 320px phone, and no amount of `overflow-x` on the container could stop it,
   * because the fieldset itself had already grown.
   *
   * Resetting it to 0 lets the fieldset shrink normally and hands overflow
   * control back to the child that actually needs it.
   */
  min-width: 0;
}

legend {
  padding: 0 0.5rem;
  margin-left: -0.5rem;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.005em;
}

.section-note {
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
  color: var(--ink-faint);
}

/* Rows collapse to a single column on narrow screens. Many volunteers will
   fill this out on a phone, standing at a field. */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
}

.row > .field {
  flex: 1 1 12rem;
  min-width: 0;
}

.field {
  margin-bottom: 1.1rem;
}

.field:last-child {
  margin-bottom: 0;
}

label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}

.optional {
  font-weight: 400;
  color: var(--ink-faint);
}

input[type="text"],
input[type="date"],
input[type="email"],
input[type="tel"],
input[type="number"],
select {
  width: 100%;
  padding: 0.55rem 0.65rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* 16px minimum prevents iOS Safari from zooming in on focus. */
}

input:focus-visible,
select:focus-visible,
button:focus-visible,
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
}

input:disabled,
select:disabled {
  background: var(--line-soft);
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   Fields that need attention
   --------------------------------------------------------------------------
   The summary at the bottom of the form says WHAT is wrong; this says WHERE.
   Without it, "“Place of birth — city” is required" means scrolling back
   through thirty fields hunting for the one it meant.

   Colour is not the only signal: the border thickens, and app.js sets
   aria-invalid so screen readers announce the state. Anyone who cannot
   distinguish the red still gets both.
   -------------------------------------------------------------------------- */
input.field-invalid,
select.field-invalid,
textarea.field-invalid {
  border: 2px solid var(--danger);
  background: var(--danger-bg);
  /* Compensate for the thicker border so the field does not jump. */
  padding: calc(0.55rem - 1px) calc(0.65rem - 1px);
}

input.field-invalid:focus-visible,
select.field-invalid:focus-visible,
textarea.field-invalid:focus-visible {
  outline: 2px solid var(--danger);
  outline-offset: 1px;
  border-color: var(--danger);
}

/* The consent checkbox is too small for a border to read as an error, so the
   whole row is tinted instead. */
input[type="checkbox"].field-invalid {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
  padding: 0;
}

.checkbox-field:has(.field-invalid) {
  padding: 0.6rem 0.75rem;
  margin: -0.6rem -0.75rem;
  background: var(--danger-bg);
  border-radius: var(--radius);
}

/* The label above a flagged field turns red too, so the pairing is obvious at
   a glance when several fields sit side by side in a row. */
.field:has(.field-invalid) > label {
  color: var(--danger);
}

.hint {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-faint);
}

code {
  padding: 0.05em 0.3em;
  background: var(--line-soft);
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
}

/* Height ft/in and weight sit inline with their unit label. */
.inline-pair {
  display: flex;
  gap: 0.75rem;
}

.inline-pair > span,
.field > span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.unit {
  font-size: 0.9rem;
  color: var(--ink-faint);
}

#height_ft,
#height_in,
#weight_lb {
  width: 5rem;
}

/* --------------------------------------------------------------------------
   Consent
   -------------------------------------------------------------------------- */
.consent-block {
  border-color: var(--accent);
}

.consent-statement {
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  background: var(--note-bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.consent-statement h2 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
}

.consent-statement p {
  margin: 0 0 0.75rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.consent-statement p:last-child {
  margin-bottom: 0;
}

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.checkbox-field input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.15rem 0 0;
  accent-color: var(--accent);
}

.checkbox-field label {
  margin: 0;
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Turnstile
   -------------------------------------------------------------------------- */
/*
 * The widget is a fixed 300px wide iframe we do not control. On a 320px phone,
 * once body and fieldset padding are subtracted there is less than that to give
 * it, and it would push the whole page sideways.
 *
 * `overflow-x: auto` confines that to this one box: in the worst case the badge
 * itself nudges a few pixels, while the form around it stays put. Far better
 * than every field on the page shifting.
 */
#turnstile-container {
  min-height: 65px;
  overflow-x: auto;
}

/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */
.actions {
  margin-top: 1.5rem;
  text-align: center;
}

button {
  padding: 0.75rem 2rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent-dark);
  border-radius: var(--radius);
  cursor: pointer;
}

button:hover:not(:disabled) {
  background: var(--accent-dark);
}

button:disabled {
  background: var(--ink-faint);
  border-color: var(--ink-faint);
  cursor: not-allowed;
}

.submit-note {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-faint);
}

.status-error {
  color: var(--danger);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Review step — "check your answers" before anything is sent
   -------------------------------------------------------------------------- */
#review-view {
  padding-top: 1rem;
}

#review-view h2 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

.review-group {
  margin-bottom: 1.25rem;
  padding: 1.1rem 1.35rem 1.35rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.review-group h3 {
  margin: 0 0 0.9rem;
  font-size: 1rem;
  font-weight: 650;
}

/* Two columns on wide screens, stacked on narrow. <dl> keeps the label/value
   relationship meaningful to screen readers, which a table of divs would not. */
.review-list {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: 0.1rem 1rem;
  margin: 0;
}

.review-list dt {
  padding: 0.4rem 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.review-list dd {
  margin: 0;
  padding: 0.4rem 0;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.review-list dt + dd { border-top: 1px solid var(--line-soft); }
.review-list dt { border-top: 1px solid var(--line-soft); }
.review-list dt:first-of-type,
.review-list dt:first-of-type + dd { border-top: 0; }

/* The three fields a wrong digit actually costs the volunteer a second trip. */
.review-verify {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 650;
  letter-spacing: 0.02em;
  background: var(--warn-bg, #fdf6e7);
  border-radius: 3px;
  padding-left: 0.4rem !important;
  padding-right: 0.4rem !important;
}

.alert-verify {
  background: #fdf6e7;
  border: 1px solid #e4c98a;
  border-left: 3px solid #8a5a00;
  color: #5c3d00;
  margin-bottom: 1.25rem;
}

.review-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-secondary {
  background: var(--panel);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--line-soft);
  border-color: var(--ink-faint);
  color: var(--ink);
}

@media (max-width: 620px) {
  .review-list { grid-template-columns: 1fr; gap: 0; }
  .review-list dt { padding-bottom: 0; border-top: 1px solid var(--line-soft); }
  .review-list dd { padding-top: 0.15rem; border-top: 0; }
  .review-list dt:first-of-type + dd { border-top: 0; }
  .review-actions { flex-direction: column-reverse; }
  .review-actions button { width: 100%; }
}

@media (prefers-color-scheme: dark) {
  .alert-verify { background: #2e2718; border-color: #5c4a24; color: #e8d9b0; }
  .review-verify { background: #2e2718; }
}

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */
.alert {
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  font-size: 0.93rem;
}

.alert-error {
  background: var(--danger-bg);
  border: 1px solid #e8b4b4;
  border-left: 3px solid var(--danger);
  color: #6d1616;
}

noscript .alert-error {
  display: block;
  margin: 1.25rem 0;
}

/* --------------------------------------------------------------------------
   Success
   -------------------------------------------------------------------------- */
.success-panel {
  padding: 2rem;
  margin-top: 1rem;
  background: var(--panel);
  border: 1px solid var(--ok);
  border-top: 3px solid var(--ok);
  border-radius: var(--radius);
}

.success-panel h2 {
  margin: 0 0 0.75rem;
  color: var(--ok);
  font-size: 1.35rem;
}

.success-panel p {
  margin: 0 0 0.85rem;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.page-footer {
  margin-top: 2rem;
  font-size: 0.85rem;
  color: var(--ink-faint);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Print — actively discouraged. A printout of this form is an unencrypted
   copy of everything this project exists to protect.
   -------------------------------------------------------------------------- */
@media print {
  body::before {
    content: "This form contains sensitive personal information and should not be printed.";
    display: block;
    padding: 1rem;
    border: 2px solid #000;
    font-weight: bold;
  }
  form {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Dark mode — follows the operating system setting.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8ecf1;
    --ink-soft: #b3bdc9;
    --ink-faint: #8b97a5;
    --line: #38414d;
    --line-soft: #2b333d;
    --bg: #151a20;
    --panel: #1d242c;
    --accent: #3d8fd0;
    --accent-dark: #2f74ab;
    --danger: #f08a8a;
    --danger-bg: #33201f;
    --ok: #6cc48f;
    --ok-bg: #1a2c22;
    --note-bg: #222a33;
    --focus: #5ba7e0;
  }

  input[type="text"],
  input[type="date"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  select {
    background: #131920;
    color: var(--ink);
    border-color: var(--line);
  }

  button {
    color: #0d1319;
  }

  .alert-error {
    border-color: #6b3b3b;
    color: #f5c0c0;
  }

  /* Date inputs render a black calendar glyph that vanishes on dark. */
  input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
  }
}

/* --------------------------------------------------------------------------
   Reduced motion / high contrast courtesies
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Very small phones (iPhone SE and similar, 320–400px)
   --------------------------------------------------------------------------
   At 320px the default padding alone was enough to push the fieldsets past the
   edge and scroll the whole page sideways. Buying back roughly 40px of
   horizontal room fixes it without making anything feel cramped.
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
  body { padding-left: 0.75rem; padding-right: 0.75rem; }

  fieldset { padding: 1rem 0.85rem 1.15rem; }
  .review-group { padding: 0.9rem 0.85rem 1rem; }
  .consent-statement { padding: 0.85rem 0.9rem; }
  .success-panel { padding: 1.5rem 1.1rem; }

  h1 { font-size: 1.45rem; }

  /* Give value text the full width rather than sharing a line with its label. */
  .review-list dd { font-size: 0.92rem; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}