/*
  Design plan
  Color: ink #1c2b2a (deep teal-black), paper #f7f3ea (warm ivory),
         rule #cbbfa0 (sand), accent #c98a1f (marigold), confirm #2f6f5e (teal-green)
  Type: serif for headings/masthead (an official-document register),
        system sans for form labels/inputs (legibility on a form people fill in carefully)
  Layout: single column, left-aligned, numbered step rail across the top —
          numbering is earned here because the content genuinely is a sequence.
  Principle: this reads like a civic/association document, not a marketing page —
             one accent color, used only for progress and calls to action.
*/

:root {
  --ink: #1c2b2a;
  --paper: #f7f3ea;
  --panel: #ffffff;
  --rule: #cbbfa0;
  --accent: #c98a1f;
  --confirm: #2f6f5e;
  --error: #a33d3d;
  --serif: 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
}

.masthead {
  background: var(--ink);
  color: var(--paper);
  padding: 1.6rem 1.5rem;
}

.masthead-inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.masthead-logo {
  height: 56px;
  width: auto;
  flex-shrink: 0;
}

.masthead h1 {
  font-family: var(--serif);
  font-size: 1.3rem;
  margin: 0;
  font-weight: normal;
}

.masthead-sub {
  margin: 0.15rem 0 0 0;
  font-size: 0.85rem;
  opacity: 0.75;
}

.stepper {
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
}

.stepper ol {
  max-width: 640px;
  margin: 0 auto;
  padding: 0.9rem 1.5rem;
  display: flex;
  gap: 0.4rem;
  list-style: none;
  overflow-x: auto;
}

.stepper li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: #9a9284;
  white-space: nowrap;
  flex-shrink: 0;
}

.step-num {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid #d8d2c2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.stepper li.active { color: var(--ink); font-weight: 600; }
.stepper li.active .step-num { background: var(--accent); border-color: var(--accent); color: white; }
.stepper li.done { color: var(--confirm); }
.stepper li.done .step-num { background: var(--confirm); border-color: var(--confirm); color: white; }

.form-shell {
  max-width: 640px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: 1.8rem 1.6rem;
}

.panel h2 {
  font-family: var(--serif);
  font-weight: normal;
  font-size: 1.35rem;
  margin: 0 0 0.3rem 0;
}

.panel h3 {
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin: 1.4rem 0 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.3rem;
}

.panel-hint {
  color: #5c554a;
  font-size: 0.92rem;
  margin: 0 0 1.3rem 0;
}

.panel-hint.small { font-size: 0.82rem; margin-top: 1rem; }

form label[hidden] { display: none; }
form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  margin-bottom: 1rem;
  color: #3a352c;
  /* Flex items default to a min-width of their own content, same issue as
     the grid columns above (see .field-row > label comment) — without
     this, an input inside a narrowed .ref-row column can refuse to shrink
     and force the column (and its neighbors) wider than intended. */
  min-width: 0;
}

.checkbox-line {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 0.6rem !important;
  font-size: 0.85rem;
}

.checkbox-line input { margin-top: 0.2rem; }

form input[type="text"],
form input[type="date"],
form input[type="tel"],
form input[type="email"],
form input[type="file"],
form select {
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-size: 0.95rem;
  font-family: var(--sans);
  color: var(--ink);
}

form input:focus, form select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: end;
}

/* Grid columns default to a min-width of their content's min-content size
   (effectively minmax(auto, Nfr)), not 0 — so a column whose label text or
   input can't shrink below some width gets clamped to that floor instead
   of its fr-share. With three columns in .ref-row this made all three
   columns collapse to the SAME clamped width regardless of the declared
   1.4fr/0.9fr/1fr ratio, overflowing the row and throwing off alignment
   whenever a label wrapped. Resetting min-width to 0 on the grid items
   lets the fr ratio actually govern the layout. */
.field-row > label,
.field-row > input {
  min-width: 0;
}

.child-row {
  grid-template-columns: 1.4fr 0.7fr 1fr;
  margin-bottom: 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px dashed var(--rule);
}

.field-row.ref-row { grid-template-columns: 1.4fr 0.9fr 1fr; }

@media (max-width: 480px) {
  .field-row { grid-template-columns: 1fr; }
}

/* Autofill-from-member-database lookup fields (references, parents) */
form label { position: relative; }
.lookup-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: none;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.lookup-results button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.7rem;
  background: var(--paper);
  border: none;
  border-bottom: 1px solid var(--rule);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}
.lookup-results button:hover,
.lookup-results button:focus { background: var(--accent); color: #fff; }
.lookup-results p.no-match { margin: 0; padding: 0.5rem 0.7rem; font-size: 0.85rem; color: #777; }

.duplicate-warning {
  border: 1px solid #c77a1f;
  background: #fff8ec;
  padding: 1rem 1.2rem;
  margin-top: 1rem;
}
.duplicate-warning h3 { margin-top: 0; }
.duplicate-warning ul { margin: 0.6rem 0; padding-left: 1.2rem; }
.duplicate-warning-actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 0.8rem;
}
.secondary-btn {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
  padding: 0.6rem 1.1rem;
  font: inherit;
  cursor: pointer;
}
.secondary-btn:hover { background: var(--paper); }

button[type="submit"], #btn-final-submit {
  background: var(--accent);
  color: white;
  border: none;
  padding: 0.75rem 1.4rem;
  font-size: 0.95rem;
  cursor: pointer;
  margin-top: 0.4rem;
}

button[type="submit"]:disabled, #btn-final-submit:disabled {
  background: #d8c9a3;
  cursor: not-allowed;
}

button.secondary {
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink);
  padding: 0.75rem 1.2rem;
  cursor: pointer;
}

button.secondary:disabled { color: #b3ab9c; cursor: not-allowed; }

.form-error {
  color: var(--error);
  font-size: 0.85rem;
  min-height: 1.1em;
  margin: 0.3rem 0;
}

.pay-box {
  text-align: center;
  padding: 2rem 1.5rem;
  border: 1px dashed var(--rule);
}

.btn-pay {
  background: var(--accent);
  color: white;
  border: none;
  padding: 1rem 2.4rem;
  font-size: 1.1rem;
  cursor: pointer;
}

.btn-pay:disabled { background: #d8c9a3; cursor: not-allowed; }

.status-line {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--accent);
}

.status-line.paid { color: var(--confirm); font-weight: 600; }

.review-list {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  row-gap: 0.5rem;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.review-list dt { color: #8a8272; }
.review-list dd { margin: 0; }

.panel-success {
  text-align: center;
  border-color: var(--confirm);
}

.panel-success h2 { color: var(--confirm); }

.intro-banner {
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
  padding: 1.3rem 1.5rem;
  max-width: 640px;
  margin: 0 auto;
}

.intro-banner p {
  margin: 0.3rem 0;
  font-size: 0.92rem;
  color: #3a352c;
}

.intro-question {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--accent);
  margin-top: 0 !important;
}