/* The support page. Builds on styles.css. */

.support-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.9rem; margin: 1.25rem 0 0.75rem; }
.support-title .i { color: var(--accent); }

.ways { display: grid; gap: 1rem; }
.way h3 { margin: 0; }
.way .support-go {
  display: block;
  text-align: center;
  background: var(--accent-ink);
  color: var(--on-accent);
  border-color: var(--accent-ink);
  font-weight: 500;
}
.way .support-go:hover { filter: brightness(1.06); }
.way .support-go[hidden] { display: none; }
/* The visitor's own region comes first and is quietly outlined. */
.way.mine { border-color: var(--accent); }
.way:not(.mine) .support-go { background: transparent; color: var(--ink); border-color: var(--line); }
.way:not(.mine) .support-go:hover { background: var(--hover); filter: none; }

.support-notes { margin-top: 2rem; }
.support-notes h3 { margin: 0 0 0.25rem; }
.support-notes ul { padding-left: 1.1rem; margin: 0; }
.support-notes li + li { margin-top: 0.4rem; }

.pay-form .support-go { width: 100%; }
.pay-form [hidden] { display: none; }
.amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.amounts label { margin: 0; }
.amounts input { position: absolute; opacity: 0; width: 1px; }
.amounts span {
  display: block;
  text-align: center;
  padding: 0.55rem 0.25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.amounts input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
.amounts input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-soft); }
.pay-status { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--accent-ink); }
.pay-status.error { color: var(--warn); }

/* Room under the last note for Ko-fi's floating button. */
.support { padding-bottom: 7rem; }