/* Shared tactile button treatment. Keep page colors, dimensions and actions intact. */
:where(button, input[type="button"], input[type="submit"], input[type="reset"], a[role="button"], a.btn, a.button) {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 28%), 0 2px 0 rgb(15 23 42 / 24%), 0 3px 5px rgb(15 23 42 / 12%) !important;
  transition: translate 80ms ease-out, box-shadow 80ms ease-out, filter 120ms ease-out;
}
@media (hover:hover) {
  :where(button, input[type="button"], input[type="submit"], input[type="reset"], a[role="button"], a.btn, a.button):not(:disabled):not([aria-disabled="true"]):hover {
    filter: brightness(1.05);
  }
}
:where(button, input[type="button"], input[type="submit"], input[type="reset"], a[role="button"], a.btn, a.button):not(:disabled):not([aria-disabled="true"]):active {
  translate: 0 2px;
  box-shadow: inset 0 2px 3px rgb(15 23 42 / 23%), 0 0 0 transparent !important;
  filter: brightness(.95);
}
:where(button, input[type="button"], input[type="submit"], input[type="reset"], a[role="button"], a.btn, a.button):focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 3px;
}
:where(button, input[type="button"], input[type="submit"], input[type="reset"]):disabled,
:where(button, a[role="button"], a.btn, a.button)[aria-disabled="true"] {
  box-shadow: none !important;
}
@media (prefers-reduced-motion:reduce) {
  :where(button, input[type="button"], input[type="submit"], input[type="reset"], a[role="button"], a.btn, a.button) { transition:none; }
}