/* Two-tap key feedback for the actions page; armed-button.js is the
   behavior. Press shrink; a slow repeating gray ring while a key is armed
   (one neutral color on every key); a breathing blue border around dimmed
   content while the confirmed request is in flight. The two states share
   neither color nor motion shape. Colors come from theme.css. */

/* touch-action: manipulation — Safari reads two quick taps on a small
   element as double-tap-to-zoom; the two-tap confirm keys invite exactly
   that gesture. This keeps tap and pinch, drops only the double-tap zoom. */
.sq, .key { touch-action: manipulation;
  transition: transform .08s, color .15s,
  background-color .15s, border-color .15s; }
.sq:enabled:active, .key:enabled:active {
  transform: scale(.92); }
.sq.armed, .key.armed {
  animation: arm-burst 1.6s ease-out infinite; }
/* in flight: element opacity stays 1 so the border keeps full strength */
.sq.inflight, .key.inflight {
  color: var(--faint);
  background: color-mix(in srgb, var(--tool) 10%, var(--bg));
  animation: hold-pulse 1.1s ease-in-out infinite alternate; }
.sq.inflight:disabled, .key.inflight:disabled {
  opacity: 1; cursor: default; }
@keyframes arm-burst {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sub) 55%, transparent); }
  100% { box-shadow: 0 0 0 9px transparent; }
}
@keyframes hold-pulse {
  from { box-shadow: inset 0 0 0 2px var(--tool); }
  to { box-shadow: inset 0 0 0 2px
         color-mix(in srgb, var(--tool) 30%, var(--bg)); }
}