/* Buttons: quiet outline (default, like the header button), solid (form submit), cookie (equal pair). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--color-line);
  border-radius: var(--size-radius-pill);
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--size-text-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  translate: var(--mx, 0) var(--my, 0);
  transition: border-color var(--dur-fast) var(--ease-soft), background-color var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft),
    translate 450ms var(--ease-spring), scale 90ms var(--ease-out), opacity 120ms var(--ease-soft);
}
.btn.is-magnet { transition-duration: var(--dur-fast), var(--dur-fast), var(--dur-fast), 160ms, 90ms, 120ms; transition-timing-function: var(--ease-soft), var(--ease-soft), var(--ease-soft), var(--ease-out), var(--ease-out), var(--ease-soft); }
.btn__label {
  display: inline-block;
  translate: var(--lx, 0) var(--ly, 0);
  transition: translate 450ms var(--ease-spring);
}
.is-magnet .btn__label { transition-duration: 160ms; transition-timing-function: var(--ease-out); }
@media (hover: hover) {
  .btn:hover { border-color: var(--color-ink); }
  .btn--solid:hover { background: var(--color-ink-2); border-color: var(--color-ink-2); }
}
.btn--solid {
  min-height: 56px;
  padding: 0 26px;
  border-color: var(--color-ink);
  border-radius: 14px;
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: var(--size-text);
}
.btn[disabled] { opacity: .6; cursor: default; }
.btn--cookie { min-width: 132px; flex: 1 1 0; border-color: var(--color-ink); }
@media (max-width: 380px) { .btn { padding: 0 14px; } }

/* Press: squash while down, jelly bounce and a soft ring on release (JS adds is-down / is-pop; see button.js). */
.btn::after, [data-press]::after, [data-magnet]::after {
  content: '';
  position: absolute;
  inset: -2px;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}
.btn.is-down, [data-press].is-down, [data-magnet].is-down { scale: .94; }
.btn.is-pop, [data-press].is-pop, [data-magnet].is-pop { animation: btn-jelly 650ms var(--ease-soft); }
.btn.is-pop::after, [data-press].is-pop::after, [data-magnet].is-pop::after { animation: btn-ring 600ms var(--ease-out); }
@keyframes btn-jelly {
  0% { scale: .94; }
  30% { scale: 1.07 .93; }
  50% { scale: .97 1.04; }
  70% { scale: 1.02 .99; }
  100% { scale: 1; }
}
@keyframes btn-ring {
  from { opacity: .45; scale: 1; }
  to { opacity: 0; scale: 1.18 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn__label { translate: none; }
  .btn.is-down, [data-press].is-down, [data-magnet].is-down { scale: none; opacity: .7; transition-duration: 120ms !important; }
  .btn.is-pop, [data-press].is-pop, [data-magnet].is-pop, .is-pop::after { animation: none !important; }
}