/* styles/press.css — v1421. THE PRESS (DESIGN-LANGUAGE AL.10), driven by modules/shared/press.js.
   Touch-down: the tint is there at once and a small control sinks to 97%. Release: the tint fades out (~⅓ s, the
   iPhone passcode key) and the control springs back past its size and settles (a small overshoot).
   The tint is a background LAYER (v1426, owner's pick — Feel Lab fix 2): it lies over the control's fill and under
   its label, inside its own corners, and it can fade; its ring, hairline and shadow stay as they are while pressed
   (v1425 used an inset shadow, which hid a selected button's ring for half a second). --press-a is registered so the fade is a real transition; where @property is
   missing the tint simply snaps off. Reduce Motion keeps the tint and drops the movement. No hex here (rule A2). */
@property --press-a { syntax:'<number>'; inherits:false; initial-value:0; }

:root { --press-c:rgba(0,0,0,.085); }
body.theme-dark { --press-c:rgba(255,255,255,.14); }

.is-press, .press-out {
  background-image:linear-gradient(var(--press-t), var(--press-t)) !important;   /* overrides the control's own background-image only while the tint shows: the tint lies over its fill */
  --press-t:color-mix(in srgb, var(--press-c) calc(var(--press-a) * 100%), transparent); }
/* M4-R5 (owner's 19 picks; owner, 2026-10-19: "Yes, update the pin"): the press is its OWN animation on the control and never
   sets its transitions — a transition list here replaced the control's own (a switch's colour jumped under a finger), and
   Settings' rules, scoped by the sheet's id, beat it the other way. Same light and sink; the sink on the design tokens (0.12 s),
   the spring back on the same overshoot (--ease-back, 0.44 s), and the light fading out on that spring.
   The sink is read from --press-s (.97 on a small control, 1 on a row and under Reduce Motion), the accent's dim from --press-b. */
:root { --press-s:1; --press-b:1; }
.press-sink { --press-s:.97; }
.is-press { --press-a:1; animation:press-sink var(--dur-1) var(--ease-out) both; }
.press-out { animation:press-out .44s var(--ease-back) both; }   /* the light goes out as it springs back (gone within ~¼ s) */
@keyframes press-sink { from { scale:1; } to { scale:var(--press-s); } }
@keyframes press-out { from { --press-a:1; scale:var(--press-s); } to { --press-a:0; scale:1; } }

/* a control that already fills with the accent lights by brightness instead (the tint would grey it); it fades back with the light */
:is(.lead, .primary, .al-go, .mw-go, .sg-sbtn) { --press-b:.93; } body.theme-dark :is(.lead, .primary, .al-go, .mw-go, .sg-sbtn) { --press-b:1.12; }
.is-press:is(.lead, .primary, .al-go, .mw-go, .sg-sbtn) { filter:brightness(var(--press-b)); }
.press-out:is(.lead, .primary, .al-go, .mw-go, .sg-sbtn) { filter:brightness(calc(1 + (var(--press-b) - 1) * var(--press-a))); }

/* Reduce Motion (both switches): the light stays and fades; nothing sinks (press-sink and press-out then move nothing) */
@media (prefers-reduced-motion:reduce) { .press-sink, .is-press, .press-out { --press-s:1; } }
body.reduce-motion .press-sink, body.reduce-motion .is-press, body.reduce-motion .press-out { --press-s:1; }

/* a sheet's head is where it is pulled down (modules/shared/sheet-pull.js): the browser must not take that finger
   for a scroll. Heads never scroll, so nothing is lost. */
.al-sheet .al-bar, .mw .mw-head, .rr-card .sh-hd, .sheet.mz-sheet .sh-hd, .mz-brkscrim .sheet .sh-hd { touch-action:none; }

/* v1426 (owner's pick, Feel Lab fix 5): every switch's knob stretches under the finger toward where it will go, as
   Settings' does (settings-grow.css). The knob widens from its own side (scale on the axis it travels), the flip still
   runs on its own transition, and the stretch springs back with it. */
:is(.sb-st-tg, .mu-toggle, .tt-sw):is(.is-press, .press-out)::after, .mkc .tog:is(.is-press, .press-out) i::after,
.mz-mk-toggle:is(.is-press, .press-out)::before {
  transform-origin:left center; transition:transform .28s cubic-bezier(.3,1.3,.5,1), left .28s cubic-bezier(.3,1.3,.5,1), background .2s, scale .22s ease; }
:is(.sb-st-tg, .mu-toggle, .tt-sw).is-press::after, .mkc .tog.is-press i::after, .mz-mk-toggle.is-press::before { scale:1.22 1; }
:is(.sb-st-tg.on, .mu-toggle.is-on, .tt-sw[aria-checked="true"]):is(.is-press, .press-out)::after,
.mkc .tog[aria-checked="true"]:is(.is-press, .press-out) i::after, .mz-mk-toggle.is-on:is(.is-press, .press-out)::before { transform-origin:right center; }
@media (prefers-reduced-motion:reduce) { :is(.sb-st-tg, .mu-toggle, .tt-sw).is-press::after, .mkc .tog.is-press i::after, .mz-mk-toggle.is-press::before { scale:none; } }

/* v1426 (fixes 3 and 4): while a sheet rises or is pulled, its dim is drawn by .sp-dim (sheet-pull.js), so it can follow */
.sp-dim { position:fixed; inset:0; z-index:-1; pointer-events:none; }
/* v1426 (fix 6): on a full-screen page a sideways finger is the edge swipe back (sheet-pull.js), not the browser's */
#dd-scrim { touch-action:pan-y; }