/* Floating Donate button. Pill with label when it appears, circle after a few seconds (circle from the start below 720 px),
   pill again on hover or keyboard focus. Only exists with JS. */
.fab {
  display: none;
  position: fixed; z-index: 20;
  right: max(clamp(1rem, 2.5vw, 2rem), env(safe-area-inset-right));
  bottom: max(clamp(1rem, 2.5vw, 2rem), env(safe-area-inset-bottom));
  align-items: center; height: 3.5rem; padding-inline: 1rem;
  border-radius: 999px; background: var(--lime); color: var(--navy-900);
  font-weight: 800; font-size: 1.0625rem; line-height: 1; text-decoration: none; white-space: nowrap;
  box-shadow: 0 16px 34px -12px rgb(16 16 45 / .6), 0 0 0 2px rgb(16 16 45 / .12);
  opacity: 0; visibility: hidden; transform: translateY(1.25rem);
  transition: opacity .4s var(--ease-out), transform .5s var(--ease-out), visibility 0s .5s, background-color .2s ease;
}
html.js .fab { display: inline-flex; }
.fab.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.fab i { flex: none; font-size: 1.5rem; }
.fab__label {
  display: block; overflow: hidden; max-width: 9rem; padding-left: .65rem;
  transition: max-width .5s var(--ease-out), padding .5s var(--ease-out), opacity .3s ease;
}
.fab.is-compact .fab__label { max-width: 0; padding-left: 0; opacity: 0; }
.fab:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; box-shadow: 0 0 0 6px var(--navy-900); }
.fab.is-compact:focus-visible .fab__label { max-width: 9rem; padding-left: .65rem; opacity: 1; }
@media (hover: hover) {
  .fab:hover { background: var(--white); }
  .fab.is-compact:hover .fab__label { max-width: 9rem; padding-left: .65rem; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .fab, .fab__label { transition: none; }
}