/* Shared interaction motion; no layout animation on data tables or charts. */
:root{--motion-fast:130ms;--motion-panel:200ms;--motion-ease:cubic-bezier(.2,.7,.2,1)}
/* Folder-style disclosure: right when closed, down when open, around a fixed center. */
#sidenav .nav-group>summary>.chevron{display:block;width:16px;height:16px;flex:0 0 16px;align-self:center;margin-left:auto;transform-box:view-box;transform-origin:50% 50%;transform:rotate(0deg);transition:transform 170ms var(--motion-ease);pointer-events:none}
#sidenav .nav-group[open]>summary>.chevron{transform:rotate(90deg)}
:where(button,summary,a[href],[role="button"]):not(:disabled):not([aria-disabled="true"]){transition:background-color var(--motion-fast) ease,color var(--motion-fast) ease,border-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,scale 100ms var(--motion-ease),opacity var(--motion-fast) ease}
:where(button,summary,a[href],[role="button"]):not(:disabled):not([aria-disabled="true"]):not(svg *):active{scale:.98}
:where(.live-card[role="button"],.shortcut):active{scale:.99}
:where(.cm-cover,.cm-card,.live-card[role="button"],.shortcut){transition:background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,scale var(--motion-fast) var(--motion-ease)}
/* Native dialog lifecycle preserves top-layer/focus behavior during exit. */
dialog{opacity:0;translate:0 10px;scale:.99;transition:opacity var(--motion-panel) var(--motion-ease),translate var(--motion-panel) var(--motion-ease),scale var(--motion-panel) var(--motion-ease),display var(--motion-panel) allow-discrete,overlay var(--motion-panel) allow-discrete}
dialog[open]{opacity:1;translate:0 0;scale:1}
dialog:not([open]),dialog:not([open])::backdrop{pointer-events:none}
dialog.pw-dialog{translate:22px 0;scale:1}
dialog.pw-dialog[open]{translate:0 0}
dialog::backdrop{opacity:0;transition:opacity var(--motion-panel) ease,display var(--motion-panel) allow-discrete,overlay var(--motion-panel) allow-discrete}
dialog[open]::backdrop{opacity:1}
@starting-style{
 dialog[open]{opacity:0;translate:0 10px;scale:.99}
 dialog.pw-dialog[open]{opacity:0;translate:22px 0;scale:1}
 dialog[open]::backdrop{opacity:0}
}
.ds-menu,.dp-popover,.rp-popover{opacity:1;translate:0 0;transition:opacity 150ms var(--motion-ease),translate 150ms var(--motion-ease)}
@starting-style{.ds-menu:popover-open,.dp-popover:popover-open,.rp-popover:popover-open{opacity:0;translate:0 -5px}}
.filter-popover[open] .filter-popup{animation:motion-menu-in 150ms var(--motion-ease)}
@keyframes motion-menu-in{from{opacity:0;translate:0 -5px}to{opacity:1;translate:0 0}}
@supports selector(::details-content){
 .filter-popover::details-content{opacity:0;transition:opacity 110ms ease,content-visibility 110ms allow-discrete}
 .filter-popover[open]::details-content{opacity:1}
 .filter-popover:not([open]) .filter-popup{pointer-events:none}
}
/* Only small navigation trees animate height; large data lists never do. */
@supports (interpolate-size:allow-keywords){
 .nav-group::details-content{interpolate-size:allow-keywords;overflow:hidden;height:0;opacity:0;transition:height 170ms var(--motion-ease),opacity 130ms ease,content-visibility 170ms allow-discrete}
 .nav-group[open]::details-content{height:auto;opacity:1}
}
:where(input,textarea){transition:border-color var(--motion-fast) ease,background-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease}
#feedback.show{animation:motion-notice-in 150ms var(--motion-ease)}
@keyframes motion-notice-in{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 :where(button,summary,a[href],[role="button"]):active,dialog,dialog.pw-dialog{scale:1!important;translate:0 0!important}
 @supports selector(::details-content){*::details-content{transition:none!important}}
}