/* Brief, interruptible motion; controls respond as soon as they are opened. */
:root {
  --ev-motion-ease: cubic-bezier(.2, .8, .2, 1);
  --ev-motion-spring: cubic-bezier(.2, .85, .25, 1.08);
}

/* EVMotion owns the dialog transition. Legacy CSS keyframes would otherwise
   become the computed destination of its animation and snap on completion. */
dialog {
  animation: none;
  filter: none;
}

/* Disclosure height is animated by the same runtime. */
.payment-detail-grid {
  animation: none;
}

.cs-arrow {
  transition: transform 240ms var(--ev-motion-spring), color 140ms ease;
}

.btn, .icon-btn, .cs-trigger, .account-action {
  transition: transform 180ms var(--ev-motion-spring), background-color 140ms ease,
    border-color 140ms ease, box-shadow 180ms ease;
}

.btn:active:not(:disabled), .icon-btn:active:not(:disabled),
.cs-trigger:active:not(:disabled), .account-action:active:not(:disabled) {
  transform: scale(.975);
}

details > summary {
  transition: color 160ms ease, background-color 160ms ease;
}

.modal-body {
  transform-origin: 50% 0;
}

@media (prefers-reduced-motion: no-preference) {
  dialog[open]::backdrop {
    animation: ev-backdrop-in 240ms var(--ev-motion-ease) both;
  }
  dialog[open][data-motion-closing]::backdrop {
    animation: ev-backdrop-out 150ms ease-out both;
  }
}

@keyframes ev-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ev-backdrop-out { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .btn:active, .icon-btn:active, .cs-trigger:active, .account-action:active {
    transform: none;
  }
  .cs-arrow, details > summary { transition: none; }
}

/* Shared close/back controls keep their touch target still as the glyph moves. */
.icon-btn.system-control {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid #e4ebe7;
  border-radius: 14px;
  background: #f4f7f5;
  color: #63736b;
  box-shadow: inset 0 1px 0 #ffffffd9, 0 1px 2px #203b2d06;
  touch-action: manipulation;
  transition: transform 220ms var(--ev-motion-spring), background-color 180ms ease,
    color 180ms ease, border-color 180ms ease, box-shadow 220ms ease;
}

.icon-btn.system-control .system-control-glyph {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  pointer-events: none;
  transition: transform 260ms var(--ev-motion-spring);
}

.icon-btn.system-control .system-control-glyph > svg {
  width: 20px;
  height: 20px;
}

.column-filter-menu .icon-btn.system-control {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 11px;
}

@media (hover: hover) {
  .icon-btn.system-control:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 #ffffffe6, 0 4px 10px #203b2d0b;
  }
  .icon-btn.system-control--close:hover:not(:disabled) {
    background: #fff0ef;
    border-color: #f3dcd9;
    color: #b25550;
  }
  .icon-btn.system-control--close:hover:not(:disabled) .system-control-glyph {
    transform: rotate(90deg);
  }
  .icon-btn.system-control--back:hover:not(:disabled) {
    background: #e7f5ee;
    border-color: #cbe8da;
    color: #008365;
  }
  .icon-btn.system-control--back:hover:not(:disabled) .system-control-glyph {
    transform: translateX(-3px);
  }
}

.icon-btn.system-control:active:not(:disabled) {
  transform: scale(.93);
  box-shadow: inset 0 1px 3px #203b2d0d;
}

.icon-btn.system-control:focus-visible {
  outline: 2px solid #008967;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .icon-btn.system-control,
  .icon-btn.system-control:is(:hover, :active):not(:disabled),
  .icon-btn.system-control .system-control-glyph,
  .icon-btn.system-control:is(:hover, :active):not(:disabled) .system-control-glyph {
    transform: none;
    transition: none;
  }
}