/* Productive interaction motion: Carbon/Fluent principles, Money 3 timings.
   Interaction describes the action: a card lifts, an arrow leads to a destination,
   a panel arrives from its edge. The workspace itself stays visible throughout.
   Native page transitions remain owned by workspace-navigation.css. */
body:is([data-vps-page], [data-account-page], [data-workspace-page="login"], [data-workspace-page="reset-local"]) {
  --money3-motion-press: 70ms;
  --money3-motion-fast: 120ms;
  --money3-motion-standard: 180ms;
  --money3-motion-panel: 240ms;
  --money3-motion-ease: cubic-bezier(.2, 0, .38, .9);
  --money3-motion-enter: cubic-bezier(0, 0, .38, .9);
}
.money3-selection-group { isolation: isolate; }
.money3-selection-group:not(.settings-menu) { position: relative; }
body[data-account-page] .settings-menu.money3-selection-group { position: relative; }
.money3-selection-marker {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: block;
  border-radius: 4px;
  background: #277154;
  pointer-events: none;
}
.money3-selection-marker[hidden] { display: none; }
.settings-menu .money3-selection-marker { background: #e7d999; }
body:is([data-vps-page], [data-account-page]) .money3-is-scrolled {
  box-shadow: 0 8px 18px -14px #244b39a6;
}

@media (prefers-reduced-motion: no-preference) {
  body:is([data-vps-page], [data-account-page], [data-workspace-page="login"], [data-workspace-page="reset-local"]) :is(button, summary, [role="button"], .primary-button, .ghost-button, .account-shortcut, .sidebar-primary-link, .settings-card, .settings-link-card, .vps-workspace-card, .money3-metric, .vps-primary-action, .vps-quiet-action, .vps-secondary-button, .vps-priority-action, .vps-roster-open, .vps-workspace-nav a, .salary-button, .m3-related-card) {
    transition: color var(--money3-motion-fast) ease, background-color var(--money3-motion-fast) ease,
      border-color var(--money3-motion-fast) ease, box-shadow var(--money3-motion-fast) ease,
      scale var(--money3-motion-fast) var(--money3-motion-ease),
      translate var(--money3-motion-standard) var(--money3-motion-ease);
  }
  body:is([data-vps-page], [data-account-page], [data-workspace-page="login"], [data-workspace-page="reset-local"]) :is(button, summary, [role="button"], .primary-button, .ghost-button, .account-shortcut, .sidebar-primary-link, .settings-card, .settings-link-card, .vps-workspace-card, .money3-metric, .vps-primary-action, .vps-quiet-action, .vps-secondary-button, .vps-priority-action, .vps-roster-open, .vps-workspace-nav a, .salary-button, .m3-related-card):is(:active, .money3-is-pressed):not(:disabled):not([aria-disabled="true"]) {
    scale: .98;
    transition-duration: var(--money3-motion-press);
  }
  /* A 2% press looks excessive on a large tile. Keep its text almost full size
     and bring the raised surface back to the canvas while it is pressed. */
  body:is([data-vps-page], [data-account-page]) :is(.settings-card, .settings-link-card, a.vps-workspace-card, a.money3-metric, a.m3-related-card):is(:active, .money3-is-pressed):not(:disabled):not([aria-disabled="true"]) {
    scale: .995;
    translate: 0 0;
  }
  body:is([data-vps-page], [data-account-page]) :is(.settings-card, .settings-link-card, .vps-workspace-card-action)::after,
  body:is([data-vps-page], [data-account-page]) :is(.money3-metric-arrow, .money3-action-arrow),
  body[data-vps-page] .m3-related-card > .m3-icon {
    transition: translate var(--money3-motion-standard) var(--money3-motion-ease);
  }
  /* These are entire clickable tiles, not containers of separate row actions.
     Fine-pointer hover never moves editable record rows or the fixed sidebar. */
  @media (hover: hover) and (pointer: fine) {
    body:is([data-vps-page], [data-account-page]) :is(.settings-card, .settings-link-card, a.vps-workspace-card, a.money3-metric, a.m3-related-card):hover:not(:active):not(.money3-is-pressed):not(:disabled):not([aria-disabled="true"]) {
      translate: 0 -2px;
    }
    body:is([data-vps-page], [data-account-page]) :is(.primary-button, .vps-primary-action, .salary-primary):hover:not(:active):not(.money3-is-pressed):not(:disabled):not([aria-disabled="true"]) {
      translate: 0 -1px;
    }
    body[data-account-page] :is(.settings-card, .settings-link-card):hover::after,
    body:is([data-vps-page], [data-account-page]) :is(a, button):hover > .money3-action-arrow,
    body[data-vps-page] .vps-workspace-card:hover .vps-workspace-card-action::after,
    body[data-vps-page] .m3-related-card:hover > .m3-icon {
      translate: 3px 0;
    }
    body[data-vps-page] .money3-metric:hover .money3-metric-arrow { translate: 2px -2px; }
  }
  body:is([data-vps-page], [data-account-page]) :is(input, select, textarea) {
    transition: border-color var(--money3-motion-fast), outline-color var(--money3-motion-fast), background-color var(--money3-motion-fast);
  }
  body:is([data-vps-page], [data-account-page]) .money3-is-scrolled {
    transition: box-shadow var(--money3-motion-standard) ease;
  }
  body[data-vps-page] .vps-card-menu[open] .vps-card-menu-popover {
    transform-origin: top right;
    animation: money3-menu-open 150ms var(--money3-motion-enter);
  }
  body[data-vps-page] .vps-filter-disclosure[open] > :is(.vps-filters, .control-panel) {
    transform-origin: top right;
    animation: money3-menu-open 150ms var(--money3-motion-enter);
  }
  /* Settings panels change only after an explicit selection. Moving 4px gives
     continuity without hiding the next panel or replaying on data refresh. */
  body[data-account-page] .account-section.active {
    animation: money3-section-enter var(--money3-motion-standard) var(--money3-motion-enter);
  }
  body[data-vps-page] .vps-verify-dialog[open],
  body[data-salary-page] .salary-dialog[open] {
    animation: money3-dialog-open 180ms var(--money3-motion-enter);
  }
  body[data-vps-page] .vps-secret-modal:not(.hidden) {
    animation: money3-dialog-open 180ms var(--money3-motion-enter);
  }
  form[aria-busy="true"] button[type="submit"]::after,
  body.login-page[data-workspace-page="login"] .login-form[aria-busy="true"] .primary-button::after {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 8px;
    content: "";
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: middle;
    animation: money3-working 650ms linear infinite;
  }
  /* Discrete display transitions leave closing behavior/focus with the app.
     Only an emptied drawer may remain visually present during its exit. Secret
     dialogs and credential content always hide immediately. Older browsers
     safely retain the application's immediate close behavior. */
  @supports (transition-behavior: allow-discrete) and selector(:has(*)) {
    body[data-vps-page] .vps-drawer:not(.hidden),
    body[data-vps-page] .vps-drawer.hidden:has(#drawerContent:empty) {
      translate: 0 0;
      transition: translate var(--money3-motion-panel) var(--money3-motion-enter),
        display var(--money3-motion-panel) allow-discrete;
    }
    body[data-vps-page] .vps-drawer.hidden:has(#drawerContent:empty) {
      translate: calc(100% + 24px) 0;
      pointer-events: none;
      transition-duration: 180ms;
    }
    body[data-vps-page] .vps-drawer.hidden:has(#drawerContent:empty) > * {
      visibility: hidden !important;
    }
    @starting-style {
      body[data-vps-page] .vps-drawer:not(.hidden) { translate: calc(100% + 24px) 0; }
    }
  }
}
@keyframes money3-menu-open {
  from { translate: 0 -4px; scale: .985; }
  to { translate: 0 0; scale: 1; }
}
@keyframes money3-section-enter { from { translate: 0 4px; } to { translate: 0 0; } }
@keyframes money3-working { to { rotate: 360deg; } }
@keyframes money3-dialog-open {
  from { translate: 0 5px; scale: .99; }
  to { translate: 0 0; scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body:is([data-vps-page], [data-account-page], [data-workspace-page="login"], [data-workspace-page="reset-local"]) :is(button, summary, [role="button"], a, .vps-drawer, .vps-secret-modal, .vps-verify-dialog, .salary-dialog, .vps-card-menu-popover, .vps-filter-disclosure > .vps-filters, .vps-filter-disclosure > .control-panel, .account-section, .sessions-verify-dialog, .money3-action-arrow, .money3-metric-arrow),
  body:is([data-vps-page], [data-account-page]) :is(.settings-card, .settings-link-card, .vps-workspace-card-action)::after,
  body[data-vps-page] .vps-filter-disclosure > summary::after,
  body[data-vps-page] .m3-related-card > .m3-icon {
    animation: none !important;
    transition: none !important;
    scale: none !important;
    translate: none !important;
  }
}