/* Shared interaction motion. Initial content always renders immediately. */
:root { --motion-fast:140ms; --motion-normal:180ms; --motion-ease:cubic-bezier(.2,.75,.25,1); }
:is(.workspace-app,.account-page,.landing) :is(.btn,.site-button,.password-toggle) {
    transition:background-color var(--motion-fast) ease,color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,translate var(--motion-fast) var(--motion-ease),scale 100ms ease;
}
.landing .site-button:hover { transform:none; }
:is(.workspace-app,.account-page,.landing) :is(.btn,.site-button):not(:disabled):not(.is-disabled):not([aria-disabled="true"]):active { scale:.98; translate:0 1px; }
@media(hover:hover) and (pointer:fine) {
    :is(.workspace-app,.account-page,.landing) :is(.btn-primary,.site-button):not(:disabled):not(.is-disabled):hover { translate:0 -1px; }
    .workspace-app .hub-tool { transition:translate var(--motion-normal) var(--motion-ease),border-color var(--motion-fast) ease,box-shadow var(--motion-normal) ease; }
    .workspace-app .hub-tool:hover { translate:0 -2px; }
    .landing .showcase-card { transition:transform 320ms var(--motion-ease); }
}
.workspace-app :is(.app-menu,.address-menu):not([hidden]) { animation:surface-in 140ms var(--motion-ease) both; transform-origin:top center; }
.workspace-app .modal-backdrop:not([hidden]) { animation:veil-in 120ms ease both; }
.workspace-app .modal-backdrop:not([hidden])>.modal { animation:surface-in 180ms var(--motion-ease) both; }
.workspace-app .toast { animation:surface-in 160ms var(--motion-ease) both; }
.landing .public-faq details[open]>p { animation:content-in 160ms ease both; }
@media(max-width:900px) {
    .workspace-app .app-sidebar.is-open { animation:drawer-in 180ms var(--motion-ease) both; }
    .workspace-app .app-scrim:not([hidden]) { animation:veil-in 120ms ease both; }
}
:is(.workspace-app,.account-page) .motion-tabs { position:relative; }
.workspace-app .motion-tabs .tab.is-active { border-bottom-color:transparent; }
.workspace-app .motion-tabs .tab.is-active::after { opacity:0; }
.motion-tab-indicator { position:absolute; left:0; bottom:-1px; height:2px; background:#1465e9; border-radius:2px; pointer-events:none; }
.motion-tabs-ready>.motion-tab-indicator { transition:transform var(--motion-normal) var(--motion-ease),width var(--motion-normal) var(--motion-ease); }
@keyframes surface-in { from { opacity:.4; translate:0 5px; } to { opacity:1; translate:0 0; } }
@keyframes content-in { from { opacity:.65; translate:0 3px; } to { opacity:1; translate:0 0; } }
@keyframes veil-in { from { opacity:0; } to { opacity:1; } }
@keyframes drawer-in { from { opacity:.7; translate:-12px 0; } to { opacity:1; translate:0 0; } }
/* Small state changes should feel consistent on every route. */
:is(.workspace-app,.account-page,.landing) :is(.app-nav-link,.area-nav a,.menu-item,.ws-switch,.user-switch,.tab,.note-filter,.seg-opt>span,.copy-btn,.card-link,.ws-item) {
    transition:background-color var(--motion-fast) ease,color var(--motion-fast) ease,border-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,opacity var(--motion-fast) ease;
}
:is(.workspace-app,.account-page) :is(.input,.select,.textarea,.topbar-search) {
    transition:border-color var(--motion-fast) ease,box-shadow var(--motion-normal) ease,background-color var(--motion-fast) ease;
}
:is(.workspace-app,.account-page) .switch .track::after { transition:transform var(--motion-normal) var(--motion-ease); }
.workspace-app .area-nav a:first-child>.icon,
.landing .site-button>svg { transition:translate var(--motion-normal) var(--motion-ease); }
@media(hover:hover) and (pointer:fine) {
    .workspace-app .area-nav a:first-child:hover>.icon,
    .landing .site-button:hover>svg { translate:2px 0; }
}
.workspace-app .copy-btn.is-copied { color:#1465e9; }
.workspace-app .copy-btn.is-copied .check { animation:feedback-in 160ms var(--motion-ease); }
@keyframes feedback-in { from { opacity:0; scale:.8; } to { opacity:1; scale:1; } }
.page-loading { position:fixed; inset:0 0 auto; height:2px; z-index:10000; pointer-events:none; overflow:hidden; background:#dce8ff; }
.page-loading[hidden] { display:none; }
.page-loading-line { display:block; width:35%; height:100%; background:#1465e9; animation:page-loading-travel 1.4s ease-in-out infinite; }
.page-loading-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@keyframes page-loading-travel { from { transform:translateX(-100%); } to { transform:translateX(386%); } }
@media(prefers-reduced-motion:reduce) {
    .page-loading-line { animation:none; width:100%; }
    :is(.workspace-app,.account-page,.landing) *,
    :is(.workspace-app,.account-page,.landing) *::before,
    :is(.workspace-app,.account-page,.landing) *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
    :is(.workspace-app,.account-page,.landing) :is(.btn,.site-button,.hub-tool) { translate:none !important; scale:none !important; }
}

/* Final authority for app motion, loaded after component and page styles. */
body:is(.workspace-app,.account-page) :is(.btn,.password-toggle,.app-nav-link,.area-nav a,.menu-item,.ws-switch,.user-switch,.tab,.seg-opt>span,.card-link,.cal-day,.cal-daynum,.cal-pill,.deadline-stat) {
    transition: background-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease), translate var(--motion-fast) var(--motion-ease), scale var(--motion-fast) var(--motion-ease);
}
body:is(.workspace-app,.account-page) :is(.input,.select,.textarea,.topbar-search) {
    transition: border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease);
}
body.workspace-app :is(.today-summary-card,.hub-tool) { transition: translate var(--motion-normal) var(--motion-ease), box-shadow var(--motion-normal) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease); }
body.workspace-app :is(.today-summary-card,.hub-tool):hover { translate: 0 -1px; }
body.workspace-app .app-shell .app-main details > summary:not(.btn) { transition: background-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease); }
body.workspace-app .app-shell .app-main details > summary:not(.btn)::after,
body.workspace-app .deadline-act .icon { transition: transform var(--motion-normal) var(--motion-ease); }
body.workspace-app :is(.app-menu,.address-menu,.toast):not([hidden]),
body.workspace-app .modal-backdrop:not([hidden]) > .modal { animation: surface-in var(--motion-normal) var(--motion-ease) both; }
body.workspace-app :is(.modal-backdrop,.app-scrim):not([hidden]) { animation: veil-in var(--motion-fast) var(--motion-ease) both; }
body.workspace-app .today-chart-bar { transition: height var(--motion-normal) var(--motion-ease); }
@media (hover:none) {
    body.workspace-app :is(.today-summary-card,.hub-tool):hover { translate: none; }
}
@media (prefers-reduced-motion:reduce) {
    body.workspace-app :is(.today-summary-card,.hub-tool):hover { translate: none !important; }
}

/* ---- The control that started a page load shows it, not only the bar at the top ---- */
body:is(.workspace-app,.account-page) .btn.is-loading { opacity: .7; pointer-events: none; }
body:is(.workspace-app,.account-page) .is-navigating { opacity: .5; cursor: progress; pointer-events: none; transition: opacity var(--motion-fast) var(--motion-ease); }
body:is(.workspace-app,.account-page) tr.is-navigating > td { background-color: #f5f8ff; }
body:is(.workspace-app,.account-page) form.is-submitting { cursor: progress; }
body:is(.workspace-app,.account-page) form.is-submitting :is(.btn,.card-link,.choice,.auth-alt):not(.is-loading) { opacity: .5; pointer-events: none; }