/* =====================================================================
   buttons.css: the .btn component and its variants
   ---------------------------------------------------------------------
   Use as  <a|button class="btn btn--primary|btn--outline|btn--text">
     --primary  filled olive pill (main action: Send)
     --outline  olive border only (secondary choice)
     --text     no border, small caps (Cancel)
   ===================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 56px; padding: 0 28px; border-radius: 999px;
  font: 400 14px/1 var(--sans); text-decoration: none; cursor: pointer;
  border: 1px solid transparent; background: none;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn--primary {
  background: var(--olive); color: var(--paper);
  font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
}
.btn--primary:hover { background: var(--olive-dark); }
.btn--primary:disabled { opacity: .75; cursor: progress; }
/* While sending (js/questionnaire.js): a soft pulse so it reads as working, not broken */
.btn.is-busy { animation: busy 1.2s ease-in-out infinite; }
@keyframes busy { 50% { opacity: .5; } }
.btn--outline { border-color: var(--olive); color: var(--olive-dark); }
.btn--outline:hover { background: rgba(94, 107, 71, .08); }
.btn--text {
  height: 44px; color: var(--subtle);
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
}
.btn--text:hover { color: var(--ink); }