/* Tactile feedback shared across all lesson activities. */
:is(button, a.button, .lesson-nav a, summary) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 120ms ease-out, box-shadow 120ms ease-out,
    background-color 120ms ease-out, filter 120ms ease-out;
}
:is(.button, .listen, .step, .lesson-nav a):not(:disabled) {
  box-shadow: 0 2px 0 rgb(23 47 56 / 14%);
}
@media (hover: hover) and (pointer: fine) {
  :is(button, a.button, .lesson-nav a, summary):not(:disabled):not([aria-disabled="true"]):hover {
    transform: translateY(-1px);
    filter: brightness(.97);
    box-shadow: 0 3px 8px rgb(23 47 56 / 12%);
  }
}
:is(button, a.button, .lesson-nav a, summary):not(:disabled):not([aria-disabled="true"]):is(:active, .is-pressed) {
  transform: translateY(2px) scale(.975);
  filter: brightness(.92);
  box-shadow: inset 0 2px 4px rgb(23 47 56 / 20%), 0 0 0 3px rgb(36 89 219 / 14%);
}
:is(.nav, .reveal, .text-button, summary).is-pressed {
  background-color: #e5ebe6;
  border-radius: 5px;
}
@media (prefers-reduced-motion: reduce) {
  :is(button, a.button, .lesson-nav a, summary) { transition: none !important; transform: none !important; }
}