/* Short, task-oriented motion shared by the public site and workspace. */
:where(button,a,input,select,textarea,[role="button"]) {
 transition:color var(--motion-hover) ease,background-color var(--motion-hover) ease,border-color var(--motion-hover) ease,box-shadow var(--motion-hover) ease;
}
:is(button,a,input,select,textarea,[tabindex]):focus-visible {
 outline:2px solid var(--brand);outline-offset:3px;
}
.sidebar :focus-visible {outline-color:var(--nav-accent)}
.btn,.button,.btn-login,.close-icon,.menu-toggle {transition:transform var(--motion-press) ease,background-color var(--motion-hover) ease,border-color var(--motion-hover) ease,box-shadow var(--motion-hover) ease}
:is(.btn,.button,.btn-login,.close-icon,.menu-toggle):active:not(:disabled) {transform:translateY(1px)}
.lf-field input,.da-item {transition:border-color var(--motion-hover) ease,background-color var(--motion-hover) ease,box-shadow var(--motion-hover) ease}
:where(button,input,select,textarea):disabled {cursor:not-allowed;opacity:.55}
:where(button)[aria-busy="true"] {cursor:progress}
.tbl tbody tr,.work-table tbody tr {transition:background-color var(--motion-hover) ease}
#mTbody tr:focus-within {background:var(--brand-soft)}
.transaction-link {font:inherit;color:var(--brand);background:none;border:0;padding:4px 0;cursor:pointer;text-align:left}
.transaction-link:hover {text-decoration:underline;text-underline-offset:3px}
#monitorFlowState {font-size:12px;color:var(--t2)}
#monitorPause[aria-pressed="true"] {background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-deep)}
.demo-grid {animation:panel-reveal var(--motion-panel) var(--motion-ease)}
.menu-pop.show {animation:panel-reveal var(--motion-menu) var(--motion-ease)}
.modal {animation:panel-reveal var(--motion-panel) var(--motion-ease)}
.mask.is-closing {opacity:0;transition:opacity var(--motion-panel) ease;pointer-events:none}
.drawer-dialog[open] {animation:drawer-reveal var(--motion-drawer) var(--motion-ease)}
.drawer-dialog.is-closing {animation:drawer-dismiss var(--motion-drawer) var(--motion-ease) forwards;pointer-events:none}
.drawer-dialog::backdrop {animation:backdrop-reveal var(--motion-panel) ease}
.drawer-dialog.is-closing::backdrop {opacity:0;transition:opacity var(--motion-drawer) ease}
.toast {animation:panel-reveal var(--motion-panel) var(--motion-ease)}
.toast.is-closing {opacity:0;transform:translateY(4px);transition:opacity var(--motion-panel) ease,transform var(--motion-panel) ease}
.route-loading {padding:20px 0;animation:loading-reveal 1ms 120ms both}
.route-loading p {font-size:13px;color:var(--t2);margin:0 0 24px}
.route-skeleton {height:12px;max-width:240px;background:var(--line-2);border-radius:4px;margin-bottom:12px}
.route-skeleton.wide {max-width:none;height:120px;margin-top:28px}
.tb-pill .d.live,.scrn-hd .rt .lk i {animation:none}
@keyframes panel-reveal {from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes drawer-reveal {from{opacity:.4;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes drawer-dismiss {to{opacity:0;transform:translateX(24px)}}
@keyframes backdrop-reveal {from{opacity:0}to{opacity:1}}
@keyframes loading-reveal {from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce) {
 *,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .route-loading {opacity:1}
}

/* A single arrival cue; list pausing and focused-row protection remain authoritative. */
#mTbody tr:first-child{animation:transaction-arrive 450ms ease-out}
@keyframes transaction-arrive{from{background:var(--brand-soft)}to{background:transparent}}
@media(prefers-reduced-motion:reduce){#mTbody tr:first-child{animation:none}}