/* Interaction states the design export does not carry.
 *
 * These surfaces arrived from Claude Design as captured compositions: every element holds its
 * own inline `style`, and hover is expressed per element. What none of them have is a PRESS
 * state, and on a phone there is no hover to fall back on - so between the tap and the network
 * answering, nothing at all happens, which reads as "it did not register" and gets tapped again.
 *
 * House rule, RULES.md: anything pressable acknowledges the press. `transform: scale(.97)`,
 * around 160ms, transform and opacity only - both composited, so this never triggers layout.
 *
 * !IMPORTANT IS LOAD-BEARING HERE, NOT LAZINESS. An inline `style` attribute beats any
 * stylesheet rule, and on these pages that is every element. Without `!important` this file
 * computes to nothing and looks correct in review while doing absolutely nothing on the page.
 * Verified by reading the computed value in the browser, not by reading this file.
 *
 * Scoped to real controls, not `*`. A press state on a paragraph is noise.
 */

a[href],
button,
summary,
[role="button"],
input[type="submit"],
input[type="button"],
label[for] {
  transition: transform 160ms cubic-bezier(.2, .7, .3, 1) !important;
}

a[href]:active,
button:active,
summary:active,
[role="button"]:active,
input[type="submit"]:active,
input[type="button"]:active,
label[for]:active {
  transform: scale(.97) !important;
}

/* A slider is dragged, not tapped, so scaling it would fight the gesture and move the thumb
   under the finger. It gets a brightening instead - the same acknowledgement, no displacement. */
input[type="range"]:active {
  filter: brightness(1.25) !important;
  transform: none !important;
}

/* Someone who has asked for less motion has asked for this too. The state still changes so the
   press is still acknowledged; it simply stops moving. */
@media (prefers-reduced-motion: reduce) {
  a[href],
  button,
  summary,
  [role="button"],
  input[type="submit"],
  input[type="button"],
  label[for] {
    transition: none !important;
  }
  a[href]:active,
  button:active,
  summary:active,
  [role="button"]:active,
  input[type="submit"]:active,
  input[type="button"]:active,
  label[for]:active {
    transform: none !important;
    opacity: .72 !important;
  }
}