/* Shared tactile feedback. Independent scale/translate preserve existing icon transforms. */
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"], a[href]) {
  -webkit-tap-highlight-color: transparent;
  transition: scale 140ms cubic-bezier(.2,.7,.3,1), translate 180ms cubic-bezier(.2,.7,.3,1),
    box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease,
    color 180ms ease, opacity 140ms ease;
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"], a[href]):not(:disabled):not([aria-disabled="true"]) {
  cursor: pointer;
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"], a[href]):not(:disabled):not([aria-disabled="true"]):is(:active, [data-qj-pressed]) {
  scale: .965;
  translate: 0 1px;
}
:where(.primary, a.primary, .entry-btn):not(:disabled):not([aria-disabled="true"]) {
  box-shadow: 0 3px 0 rgb(9 47 38 / 18%), 0 5px 14px rgb(14 64 51 / 10%), inset 0 1px 0 rgb(255 255 255 / 14%);
}
:where(.secondary, a.secondary, .entry-secondary):not(:disabled):not([aria-disabled="true"]) {
  box-shadow: 0 2px 0 rgb(31 65 49 / 7%), inset 0 1px 0 rgb(255 255 255 / 65%);
}
@media (hover: hover) and (pointer: fine) {
  :where(.primary, .secondary, a.primary, a.secondary, .entry-btn, .entry-secondary):not(:disabled):not([aria-disabled="true"]):hover {
    translate: 0 -2px;
    box-shadow: 0 4px 0 rgb(9 47 38 / 10%), 0 9px 20px rgb(14 64 51 / 14%), inset 0 1px 0 rgb(255 255 255 / 18%);
  }
}
:where(.primary, .secondary, .entry-btn, .entry-secondary):not(:disabled):not([aria-disabled="true"]):is(:active, [data-qj-pressed]) {
  translate: 0 1px;
  box-shadow: 0 1px 0 rgb(9 47 38 / 10%), inset 0 2px 4px rgb(9 47 38 / 12%);
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"], a[href]):focus-visible {
  outline: 2px solid var(--gold, #a68c55);
  outline-offset: 4px;
}
/* A separate, clipped overlay leaves button text, badges and event handlers untouched. */
.qj-button-feedback {
  position: fixed;
  z-index: 2147483000;
  display: block;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: strict;
}
.qj-button-wave {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / 32%) 0%, rgb(255 255 255 / 16%) 45%, transparent 72%);
  transform: scale(.08);
  opacity: 0;
  animation: qj-button-wave 460ms cubic-bezier(.2,.65,.3,1) both;
}
.qj-button-feedback[data-tone="light"] .qj-button-wave {
  background: radial-gradient(circle, rgb(23 79 65 / 14%) 0%, rgb(23 79 65 / 7%) 45%, transparent 72%);
}
@keyframes qj-button-wave {
  0% { transform: scale(.08); opacity: .8; }
  35% { opacity: .65; }
  100% { transform: scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  :where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"], a[href]) {
    transition-duration: .01ms;
  }
  :where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"], a[href]):is(:hover, :active, [data-qj-pressed]) {
    scale: none !important;
    translate: none !important;
  }
  .qj-button-feedback { display: none; }
}