/* Presentation-only interactions for the dashboard presentation. */
#app .view { animation: none; }

#app :is(.nav a,.tab,.fchips button,.btn,.rcard,.alert-card),
.drawer .btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 160ms ease, color 160ms ease,
    border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

#app :is(.nav a,.tab,.fchips button,.btn):active,
.drawer .btn:active { transform: translateY(1px); }

#app :is(.rcard,.alert-card):active { transform: translateY(0) scale(.992); }

#app :is(a,button,input,select,textarea,[tabindex]):focus-visible,
.drawer :is(button,input,select,textarea,[tabindex]):focus-visible {
  outline: 2px solid var(--accent, #0f7d8f);
  outline-offset: 4px;
}

#app :is(input,select,textarea) {
  transition: border-color 160ms ease, box-shadow 160ms ease,
    background-color 160ms ease;
}

#app :is(.nav a,.tab,.fchips button)[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 12%, transparent);
}

#app tbody tr { transition: background-color 120ms ease; }
.drawer { transition: transform 220ms cubic-bezier(.2,.8,.2,1); }
.drawer-back.on { animation: concept-backdrop 160ms ease both; }

@keyframes concept-backdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* A disabled motion option must also stop animations inherited from the page. */
html[data-motion="off"] #app *,
html[data-motion="off"] #app *::before,
html[data-motion="off"] #app *::after,
html[data-motion="off"] .drawer,
html[data-motion="off"] .drawer *,
html[data-motion="off"] .drawer-back {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

html[data-motion="off"] #app :is(.nav a,.rcard,.alert-card):hover,
html[data-motion="off"] #app :is(.nav a,.tab,.fchips button,.btn,.rcard,.alert-card):active,
html[data-motion="off"] .drawer .btn:active { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  #app *, #app *::before, #app *::after,
  .drawer, .drawer *, .drawer-back {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  #app :is(.nav a,.rcard,.alert-card):hover,
  #app :is(.nav a,.tab,.fchips button,.btn,.rcard,.alert-card):active,
  .drawer .btn:active { transform: none !important; }
}