/* Shared motion language. Content is visible and usable without this stylesheet. */
:root {
  --tap-motion-fast: 160ms;
  --tap-motion-base: 260ms;
  --tap-motion-ease: cubic-bezier(.22, 1, .36, 1);
}
:is(.btn, .nav-button, .mobile-user-menu-button, .modal-close, .mobile-quick-actions a, .mobile-menu-grid a, .admin-command-card, .renewal-task, .tracking-filter button, .shift-type-selector button) {
  transition: transform var(--tap-motion-fast) var(--tap-motion-ease), background-color var(--tap-motion-fast) ease, border-color var(--tap-motion-fast) ease, box-shadow var(--tap-motion-base) ease, color var(--tap-motion-fast) ease;
  -webkit-tap-highlight-color: transparent;
}
:is(.btn, .nav-button, .mobile-user-menu-button, .modal-close, .mobile-quick-actions a, .mobile-menu-grid a, .admin-command-card, .tracking-filter button, .shift-type-selector button):not(:disabled):not([aria-disabled="true"]):active {
  transform: scale(.97);
  transition-duration: 75ms;
}
.clock-action-grid .btn:not(:disabled):active, .mobile-punch-button:not(:disabled):active { transform: scale(.96); }
:is(input, select, textarea) { transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease; }
:is(input, select, textarea):focus-visible { outline-offset: 3px; box-shadow: 0 0 0 4px #635bff18; }
input:is([type="checkbox"], [type="radio"]) { accent-color: #635bff; transition: transform 160ms var(--tap-motion-ease); }
input:is([type="checkbox"], [type="radio"]):active { transform: scale(.88); }
summary { transition: color 180ms ease, background-color 180ms ease; }
.mobile-menu-group > summary::marker { color: #635bff; }
.tap-touch-ripple { position: fixed; z-index: 150; border: 1px solid #635bff55; border-radius: 50%; background: #8b80ff24; pointer-events: none; }
.toast { transition: opacity 220ms ease, transform 280ms var(--tap-motion-ease); }
.toast[data-kind="success"]::before { content: '✓'; display: inline-grid; place-items: center; width: 23px; height: 23px; margin-right: 9px; border-radius: 50%; background: #ffffff24; color: #c7ffec; font-weight: 900; vertical-align: middle; }
.toast.show[data-kind="success"]::before { animation: tap-check-in 420ms var(--tap-motion-ease) both; }
.startup-skeleton, .startup-summary-grid > span { position: relative; overflow: hidden; }
.startup-skeleton::after, .startup-summary-grid > span::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 15%, #ffffffa6 50%, transparent 85%); animation: tap-loading-sweep 1.6s ease-in-out infinite; }
.expense-form[aria-busy="true"] .expense-upload { position: relative; overflow: hidden; }
.expense-form[aria-busy="true"] .expense-upload::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 30%, #635bff0e 50%, transparent 70%); animation: tap-loading-sweep 1.6s ease-in-out infinite; }
.expense-steps li { transition: color 220ms ease, background-color 220ms ease; }
.expense-steps li > span { transition: background-color 220ms ease, color 220ms ease, box-shadow 260ms ease; }
.expense-steps .is-current > span { box-shadow: 0 0 0 4px #635bff15; }
.clock-progress-step, .clock-progress-step > span { transition: background-color 220ms ease, color 220ms ease; }
@keyframes tap-loading-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes tap-check-in { from { transform: scale(.55) rotate(-20deg); opacity: .3; } 70% { transform: scale(1.12); } to { transform: scale(1); opacity: 1; } }
@media (hover: hover) and (pointer: fine) {
  :is(.mobile-quick-actions a, .mobile-menu-grid a, .admin-command-card, .renewal-task):hover { transform: translateY(-3px); box-shadow: 0 8px 22px #30267014; }
  .btn:not(:disabled):hover { transform: translateY(-1px); }
  .nav-button:not(.active):hover svg { transform: translateY(-2px); }
  .nav-button svg { transition: transform 200ms var(--tap-motion-ease); }
}
/* Include existing landing/GPS effects in the same accessibility preference. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  #app *, #app *::before, #app *::after, .toast, .toast::before { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  :is(.btn, .nav-button, .mobile-user-menu-button, .modal-close, .mobile-quick-actions a, .mobile-menu-grid a, .admin-command-card, .renewal-task, .tracking-filter button, .shift-type-selector button):active,
  :is(.btn, .nav-button, .mobile-quick-actions a, .mobile-menu-grid a, .admin-command-card, .renewal-task):hover { transform: none !important; }
  .tap-touch-ripple { display: none; }
}