/* ============================================================
   FORMS — donate + get in touch
   ============================================================ */

.form-layout{
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.form-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  padding: clamp(24px, 3.5vw, 44px);
}

fieldset{
  border: 0; margin: 0 0 8px; padding: 0 0 28px;
}
fieldset + fieldset{ border-top: 1px solid var(--line); padding-top: 28px; }
legend{
  padding: 0 0 16px;
  font-weight: 700; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink);
  display: flex; align-items: center; gap: 10px;
  float: left; width: 100%;
}
legend .step{
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  flex: 0 0 auto;
}
/* The legend is floated (the standard hack for styling it freely), so every
   sibling that follows must clear it — otherwise a lone .field shrinks into
   the strip beside the legend instead of taking the full width. */
fieldset > *{ clear: both; }

.field-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; clear: both; align-items: start; }
.field-grid .full{ grid-column: 1 / -1; }
.field{ display: grid; gap: 7px; }
.field label{
  font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.field label .opt{ font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea{
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 14px;
  min-height: 50px;
  width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea{ padding: 13px 14px; min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent);
}
.field.invalid input, .field.invalid select, .field.invalid textarea{
  border-color: #c0392b;
  box-shadow: 0 0 0 3px color-mix(in srgb, #c0392b 18%, transparent);
}
.field .err{
  display: none;
  font-size: 12.5px; color: #c0392b; font-weight: 600;
}
.field.invalid .err{ display: block; }
.hint{ font-size: 12.5px; color: var(--muted); margin: 4px 0 0; }

/* amount picker */
.amount-grid{
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; clear: both;
}
.amount-grid .amt{
  position: relative;
}
.amount-grid input{ position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.amount-grid label{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 64px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  font-family: var(--font-display);
  text-transform: var(--display-case);
  font-size: 22px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, transform .2s var(--ease-out);
}
.amount-grid label small{
  font-family: var(--font-body);
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.amount-grid input:checked + label{
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.amount-grid input:checked + label small{ color: var(--accent-ink); }
.amount-grid input:focus-visible + label{ box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent); }
.amount-grid label:hover{ transform: translateY(-2px); border-color: var(--accent); }
.custom-amount{ margin-top: 12px; }
.custom-amount .currency{
  position: relative;
}
.custom-amount .currency::before{
  content: "$"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-weight: 700; color: var(--muted);
}
.custom-amount input{ padding-left: 30px; }

/* checkboxes */
.check-list{ display: grid; gap: 12px; clear: both; }
.check{
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
  transition: border-color .15s;
  font-size: 14.5px; line-height: 1.5;
}
.check:hover{ border-color: color-mix(in oklab, var(--accent) 50%, var(--line)); }
.check input{
  appearance: none;
  width: 22px; height: 22px; flex: 0 0 auto;
  margin: 1px 0 0;
  border: 2px solid color-mix(in oklab, var(--ink) 35%, transparent);
  border-radius: 4px;
  cursor: pointer;
  display: grid; place-content: center;
  transition: background .15s, border-color .15s;
}
.check input::before{
  content: "";
  width: 11px; height: 11px;
  transform: scale(0);
  transition: transform .15s var(--ease-out);
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 80% 0%, 38% 62%);
  background: var(--accent-ink);
}
.check input:checked{ background: var(--accent); border-color: var(--accent); }
.check input:checked::before{ transform: scale(1); }
.check input:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.check.invalid{ border-color: #c0392b; }
.check b{ font-weight: 600; }

/* pill checks (volunteer interests, sign size) */
.pill-checks{ display: flex; flex-wrap: wrap; gap: 10px; clear: both; }
.pill-checks .pc{ position: relative; }
.pill-checks input{ position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pill-checks label{
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.pill-checks input:checked + label{
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
.pill-checks input:focus-visible + label{ box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent); }

/* stripe stub */
.stripe-stub{
  border: 1.5px dashed color-mix(in oklab, var(--ink) 30%, transparent);
  border-radius: var(--radius);
  background: repeating-linear-gradient(-45deg,
    color-mix(in oklab, var(--ink) 4%, transparent) 0 10px, transparent 10px 20px);
  padding: 22px;
  display: grid; gap: 6px;
  clear: both;
}
.stripe-stub .row1{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
}
.stripe-stub .title{ font-weight: 700; font-size: 14.5px; }
.stripe-stub .badge{
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: .06em;
  padding: 4px 9px; border-radius: 4px;
  background: color-mix(in oklab, var(--accent) 28%, var(--bg));
  color: var(--ink);
  white-space: nowrap;
}
.stripe-stub p{
  margin: 0; font-size: 13px; color: var(--muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.stripe-stub code{ color: var(--ink); }

/* summary rail */
.summary-rail{ position: sticky; top: 96px; display: grid; gap: 16px; }
.summary-card{
  background: var(--deep);
  color: var(--deep-ink);
  border-radius: calc(var(--radius) + 4px);
  padding: 28px;
  position: relative; overflow: clip;
}
.summary-card .contours{ color: var(--deep-ink); right: -40%; top: -30%; width: 420px; }
.summary-card h3{
  font-family: var(--font-display); text-transform: var(--display-case);
  font-weight: var(--display-weight);
  font-size: 24px; margin-bottom: 16px;
}
.summary-card .sum-amount{
  font-family: var(--font-display); text-transform: var(--display-case);
  font-size: 56px; line-height: 1;
  color: var(--accent);
}
.summary-card .sum-row{
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 14px;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in oklab, var(--deep-ink) 14%, transparent);
}
.summary-card .sum-row:last-of-type{ border: 0; }
.summary-card .sum-row b{ font-weight: 600; }
.rules-card{
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: calc(var(--radius) + 4px);
  padding: 24px;
}
.rules-card h4{
  margin: 0 0 12px;
  font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.rules-card ul{ margin: 0; padding: 0 0 0 18px; display: grid; gap: 9px; font-size: 13.5px; color: var(--muted); }
.rules-card li::marker{ color: var(--accent); }
.rules-card a{ color: var(--ink); }

/* form footer / submit */
.form-submit{
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  padding-top: 4px;
}
.form-submit .btn{ min-height: 58px; font-size: 16px; padding: 0 36px; }
.form-submit .note{ font-size: 12.5px; color: var(--muted); max-width: 36ch; }
.form-error-banner{
  display: none;
  background: color-mix(in srgb, #c0392b 10%, var(--surface));
  border: 1px solid color-mix(in srgb, #c0392b 40%, transparent);
  color: #8c2318;
  border-radius: var(--radius);
  padding: 14px 18px;
  font-size: 14px; font-weight: 600;
  margin-bottom: 20px;
}
html[data-theme="volt"] .form-error-banner{ color: #ff9d8f; }
.form-error-banner.show{ display: block; }

/* disclosure notice (>= $100) */
.disclosure-note{
  display: none;
  font-size: 13px;
  border: 1px solid color-mix(in oklab, var(--accent) 50%, var(--line));
  background: color-mix(in oklab, var(--accent) 10%, var(--bg));
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-top: 12px;
  color: var(--ink);
}
.disclosure-note.show{ display: block; }

/* success state */
.success-panel{
  display: none;
  text-align: center;
  padding: clamp(40px, 8vh, 80px) clamp(20px, 4vw, 60px);
}
.success-panel.show{ display: block; }
.success-panel .tick{
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--accent);
  margin: 0 auto 24px;
  display: grid; place-content: center;
}
.success-panel .tick::before{
  content: "";
  width: 30px; height: 30px;
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 80% 0%, 38% 62%);
  background: var(--accent-ink);
}
.success-panel h2{
  font-family: var(--font-display); text-transform: var(--display-case);
  font-size: clamp(32px, 5vw, 56px);
}
.success-panel p{ color: var(--muted); max-width: 46ch; margin: 16px auto 28px; text-wrap: pretty; }

/* topic segmented control (contact page) */
.topic-switch{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  padding: 6px;
  margin-bottom: 28px;
}
.topic-switch button{
  font-family: var(--font-body);
  border: 0; background: transparent;
  color: var(--muted);
  min-height: 54px;
  border-radius: var(--radius);
  font-size: 14px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.topic-switch button:hover{ color: var(--ink); }
.topic-switch button[aria-pressed="true"]{
  background: var(--ink); color: var(--bg);
}
.topic-pane{ display: none; }
.topic-pane.active{ display: block; }

@media (max-width: 980px){
  .form-layout{ grid-template-columns: 1fr; }
  .summary-rail{ position: static; order: -1; }
  .summary-rail .rules-card{ display: none; }
  .amount-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .field-grid{ grid-template-columns: 1fr; }
  .topic-switch{ grid-template-columns: 1fr; }
  .form-submit .btn{ width: 100%; }
  .form-card{ padding: 20px 16px; }
  .amount-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .amount-grid .amt:last-child{ grid-column: 1 / -1; }
  .amount-grid label{ min-height: 56px; font-size: 20px; }
  .summary-card{ padding: 22px 20px; }
  .summary-card .sum-amount{ font-size: 44px; }
  .check{ padding: 12px 12px; font-size: 13.5px; }
  .stripe-stub{ padding: 16px 14px; }
  .pill-checks label{ padding: 0 14px; font-size: 13px; }
}