/* Short, interruptible motion; no action waits for a decorative transition. */
.ops-app{--op-ease:cubic-bezier(.2,.75,.25,1)}
.ops-app :is(.btn,.icon-button,.select-trigger,.side-link,.op-mini-link,.op-back,.picker-option,.ow-tabs button,.op-mobile-nav a){transition:background-color 150ms ease,border-color 150ms ease,color 150ms ease,box-shadow 150ms ease,transform 150ms var(--op-ease)}
.ops-app :is(.btn,.icon-button,.select-trigger):active:not(:disabled){transform:scale(.975)}
.ops-app :is(.op-panel,.ow-hub-secondary-link,.op-row,.oq-order,.ow-job){transition:border-color 160ms ease,background-color 160ms ease,box-shadow 160ms ease}
@media(hover:hover){.ops-app .ow-hub-secondary-link:hover{box-shadow:0 3px 12px #244f3c08}.ops-app .oq-order:hover{background:#fafcfb}}
.ops-app :is(input,textarea){transition:border-color 150ms ease,box-shadow 150ms ease,background-color 150ms ease}
.ops-app input[type=checkbox]{transition:box-shadow 150ms ease;accent-color:#237a68}
.ops-app .modal-overlay{animation:op-overlay-in 150ms ease both}
.ops-app .modal-overlay>.modal{animation:op-dialog-in 210ms var(--op-ease) both}
.ops-app .modal-overlay.is-closing{animation:op-overlay-out 150ms ease both;pointer-events:none}
.ops-app .modal-overlay.is-closing>.modal{animation:op-dialog-out 150ms ease both}
.ops-app .picker-overlay{animation:op-overlay-in 150ms ease both}
.ops-app .picker-overlay>.select-picker{animation:op-dialog-in 190ms var(--op-ease) both}
.ops-app .picker-overlay.is-closing{animation:op-overlay-out 140ms ease both;pointer-events:none}
.ops-app .picker-overlay.is-closing>.select-picker{animation:op-dialog-out 140ms ease both}
.ops-app .toast{animation:op-toast-in 200ms var(--op-ease) both}
.ops-app .toast.is-closing{animation:op-overlay-out 150ms ease both}
.ops-app .form-error:not(:empty){animation:op-feedback-in 180ms ease both}
.ops-app .op-sidebar{transition:transform 220ms var(--op-ease),visibility 220ms}
.ops-app .op-menu-scrim{transition:opacity 180ms ease,visibility 180ms}
.ops-app .op-form-actions .btn[type=submit]:disabled{position:relative}
.ops-app form[data-busy=true] button[type=submit]::after{content:'';width:12px;height:12px;border:1.5px solid currentColor;border-inline-end-color:transparent;border-radius:50%;animation:op-spin 700ms linear infinite;flex:none}
.ops-app details::details-content{interpolate-size:allow-keywords;transition:height 180ms var(--op-ease),opacity 180ms ease,content-visibility 180ms allow-discrete;height:0;opacity:0;overflow:clip}
.ops-app details[open]::details-content{height:auto;opacity:1}
@keyframes op-overlay-in{from{opacity:0}to{opacity:1}}
@keyframes op-overlay-out{from{opacity:1}to{opacity:0}}
@keyframes op-dialog-in{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes op-dialog-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(8px)}}
@keyframes op-toast-in{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
@keyframes op-feedback-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
@keyframes op-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.ops-app *,.ops-app *::before,.ops-app *::after,.ops-app details::details-content{animation:none!important;transition:none!important;scroll-behavior:auto!important}.ops-app details[open]::details-content{height:auto;opacity:1}}
@media print{.ops-app *{animation:none!important;transition:none!important}}
