/* Donate to a school. Two decisions and a total — the page exists to get a
   parent from "I can't make it tonight" to Stripe without a second thought. */
.phead { --phead-glow: radial-gradient(80% 90% at 15% 0%, rgba(77,140,255,.14), transparent 62%),
              radial-gradient(70% 80% at 90% 35%, rgba(255,46,107,.13), transparent 60%); }

/* Like the rate page: the page header runs full width, only the form is held
   to a readable measure. */
.donate__form { max-width: 34rem; }
.donate h1 { margin-bottom: 1rem; }
.donate .phead__lede { max-width: 34rem; }

.donate__testmode {
  max-width: 34rem;
  margin: 0 0 1.4rem;
  padding: .75rem 1rem;
  border: 2px dashed var(--amber);
  border-radius: var(--r);
  background: rgba(255, 174, 43, .1);
  font-size: .88rem;
  line-height: 1.45;
}
.donate__testmode strong { font-family: var(--display); color: var(--amber); }
.donate__testmode .mono { font-family: var(--mono); white-space: nowrap; }

.donate__legend {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: .55rem;
}

.school, .amount { border: 0; padding: 0; margin: 1.8rem 0 0; }

/* --- School picker --------------------------------------------------------
   Fifty schools. A <select> this long is a spinning wheel on a phone, so it is
   a filter over a plain list of radios: real controls, native keyboard and
   screen-reader behaviour, and typing three letters gets you there. */
.school__hint {
  margin: -.2rem 0 .6rem;
  font-size: .88rem;
  color: var(--on-dark-mute);
}

.school__filter {
  width: 100%;
  font: inherit;
  font-size: 1rem;     /* 16px or iOS zooms the page on focus */
  color: var(--on-dark);
  background: var(--ink-2);
  border: 1px solid var(--ink-line);
  border-radius: var(--r);
  padding: .8rem .9rem;
  margin-bottom: .6rem;
}
.school__filter:focus-visible { outline: 3px solid var(--neon-blue); outline-offset: 1px; }
.school__filter::placeholder { color: var(--on-dark-mute); opacity: .8; }
.school__filter::-webkit-search-cancel-button { filter: invert(1); opacity: .5; }

.school__list {
  display: grid;
  gap: .4rem;
  /* Tall enough to show the list is long and scrollable, short enough that the
     amount and the total stay reachable without hunting. */
  max-height: 17rem;
  overflow-y: auto;
  padding: .15rem;
  border: 1px solid var(--ink-line);
  border-radius: var(--r);
  background: var(--ink);
  scrollbar-width: thin;
}
.school__list label {
  display: block;
  padding: .7rem .85rem;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  background: var(--ink-2);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
  -webkit-tap-highlight-color: transparent;
}
/* display:block above outranks the UA sheet's [hidden] { display: none }, so
   filtered-out schools would stay on screen without this. */
.school__list label[hidden] { display: none; }
.school__list input:checked + label { border-color: var(--acid); background: var(--ink-3); }
.school__list input:focus-visible + label { outline: 3px solid var(--neon-blue); outline-offset: 2px; }
@media (hover: hover) {
  .school__list label:hover { background: var(--ink-3); }
}

.school__loading, .school__count, .school__none {
  font-size: .82rem;
  color: var(--on-dark-mute);
}
.school__loading { margin: .7rem .85rem; }
.school__count { margin-top: .45rem; }
.school__none { margin-top: .45rem; }

/* --- Amount ---------------------------------------------------------------- */
.amount__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.amount__row label {
  flex: 1 1 4.5rem;
  text-align: center;
  padding: .85rem .6rem;
  border: 2px solid var(--ink-line);
  border-radius: var(--r);
  background: var(--ink-2);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.amount__row input:checked + label { border-color: var(--acid); background: var(--ink-3); }
.amount__row input:focus-visible + label { outline: 3px solid var(--neon-blue); outline-offset: 2px; }

.amount__other {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .7rem;
  font-size: .92rem;
  color: var(--on-dark-mute);
}
.amount__field {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  padding: .5rem .7rem;
  border: 1px solid var(--ink-line);
  border-radius: var(--r);
  background: var(--ink-2);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--on-dark);
}
.amount__field:focus-within { outline: 3px solid var(--neon-blue); outline-offset: 1px; }
.amount__field input {
  width: 4.5rem;
  font: inherit;
  font-size: 1rem;     /* 16px or iOS zooms the page on focus */
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
}
.amount__field input:focus { outline: none; }
.amount__field input::placeholder { color: var(--on-dark-mute); opacity: .7; }

/* --- The total ------------------------------------------------------------
   The one line the whole page is arguing for: the school gets the round
   number, and this is what leaves your card. */
.donate__total {
  margin: 1.5rem 0 0;
  padding: .9rem 1rem;
  border: 1px solid var(--ink-line);
  border-left: 3px solid var(--acid);
  border-radius: var(--r);
  background: var(--ink-2);
  font-size: 1rem;
  min-height: 1.5em;
}
.donate__total:empty { display: none; }
.donate__total b { font-family: var(--display); font-weight: 800; }
.donate__total span {
  display: block;
  margin-top: .25rem;
  font-size: .82rem;
  color: var(--on-dark-mute);
}

.donate__error {
  margin-top: .9rem;
  color: var(--hot);
  font-weight: 600;
}
.donate__send { margin-top: 1.2rem; }
.donate__send:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.donate__fine {
  margin-top: 1rem;
  max-width: 44ch;
  font-size: .82rem;
  color: var(--on-dark-mute);
}

.donate [data-panel] .btn { margin-top: .6rem; }

@media (prefers-reduced-motion: reduce) {
  .school__list label, .amount__row label { transition: none; }
}