/* Motion layer for the modern design. Financial values never count up or disappear. */
.xs-motion-toggle{
  display:flex;align-items:center;gap:12px;width:100%;min-height:44px;
  border:0;border-radius:8px;background:transparent;color:var(--muted);
  padding:10px 12px;font:500 12px var(--body-font);text-align:left;cursor:pointer;
}
.xs-motion-toggle>svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;flex-shrink:0}
.xs-motion-state{margin-left:auto;font-size:10px;line-height:20px;padding:0 7px;border-radius:6px;background:#232a32;color:#a6b0bc}
.xs-motion-toggle[aria-pressed=true] .xs-motion-state{background:#27352f;color:#a8d6c1}
.xs-motion-toggle:hover{background:#20262d;color:var(--text)}
.xs-motion-toggle:disabled{cursor:default;opacity:.7}
.xs-drawer-close{min-width:44px;min-height:44px}
.xs-login-options{display:flex;position:fixed;bottom:max(18px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);align-items:center;gap:16px;width:max-content;max-width:calc(100vw - 24px)}
body:not(.is-authenticated) .xs-login-options .xs-login-switch{position:static;transform:none;white-space:nowrap;padding:10px 8px}
.xs-login-options .xs-motion-toggle{width:auto;gap:10px;padding:10px 8px;white-space:nowrap}
.xs-pending{position:relative;padding-right:44px!important}
.xs-pending:after{content:'';position:absolute;right:15px;top:50%;margin-top:-7px;width:14px;height:14px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;opacity:.85}
.xs-toast-feedback{display:flex;align-items:center;gap:10px}
.xs-toast-feedback>svg{width:20px;height:20px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html[data-motion=on] .xs-page-enter{animation:xs-page-enter 180ms cubic-bezier(.2,.8,.2,1)}
html[data-motion=on] .xs-salary-summary{animation:xs-result-enter 220ms ease-out}
html[data-motion=on] .histBtn.open .histDetails{animation:xs-details-enter 160ms ease-out}
html[data-motion=on] .btn,html[data-motion=on] .xs-menu-open,html[data-motion=on] .xs-drawer-close{transition:transform 120ms ease,background-color 140ms ease,border-color 140ms ease}
html[data-motion=on] .btn:active,html[data-motion=on] .xs-menu-open:active,html[data-motion=on] .xs-drawer-close:active{transform:scale(.98)}
html[data-motion=on] .xs-nav-link,html[data-motion=on] .xs-motion-toggle,html[data-motion=on] .xs-table tbody tr{transition:background-color 140ms ease,color 140ms ease}
html[data-motion=on] .xs-pending:after{animation:xs-pending-spin 700ms linear infinite}
html[data-motion=on] .xs-toast-feedback{animation:xs-feedback-enter 180ms ease-out}
html[data-motion=on] .xs-toast-feedback path{stroke-dasharray:28;animation:xs-check-draw 220ms ease-out}
html[data-motion=on] #xs-nav-dialog[open]::backdrop{animation:xs-backdrop-in 180ms ease-out}
html[data-motion=on] #xs-nav-dialog.xs-closing::backdrop{animation:xs-backdrop-out 160ms ease-in}
html[data-motion=off] *,html[data-motion=off] *:before,html[data-motion=off] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@keyframes xs-page-enter{from{opacity:.96;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes xs-result-enter{from{border-color:#a95b67;background:#282027}to{border-color:var(--stroke);background:var(--card)}}
@keyframes xs-details-enter{from{opacity:.85;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
@keyframes xs-feedback-enter{from{opacity:0}to{opacity:1}}
@keyframes xs-check-draw{from{stroke-dashoffset:28}to{stroke-dashoffset:0}}
@keyframes xs-pending-spin{to{transform:rotate(360deg)}}
@keyframes xs-backdrop-in{from{background:#0000}to{background:#0009}}
@keyframes xs-backdrop-out{from{background:#0009}to{background:#0000}}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}