/* Shared, quiet motion for the management and workshop panels. */
:root{--motion-ease:cubic-bezier(.2,.75,.25,1)}
button,a,input,select,textarea{transition:background-color 180ms ease,border-color 180ms ease,box-shadow 180ms ease,transform 180ms var(--motion-ease)}
button:active:not(:disabled){transform:scale(.975)}
button.primary{box-shadow:0 4px 12px #155ddd20}
button:focus-visible{box-shadow:0 0 0 5px #155ddd14}
.panel,.metric,.stat,aside,.history{box-shadow:0 4px 18px #10294c05}
.metric,.stat,.card,.service-card{transition:box-shadow 220ms ease,border-color 220ms ease,transform 220ms var(--motion-ease)}
@media(hover:hover) and (pointer:fine){button:hover:not(:disabled){box-shadow:0 4px 12px #10294c0d}.stat:hover,.card:hover,.service-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px #10294c0c;border-color:#adbfdb}}
.shell>aside,body>header{background:linear-gradient(135deg,#10294c 15%,#173c69 100%)}
.logo,.brand{animation:brand-arrive 600ms var(--motion-ease) both}
#nav button.active{box-shadow:inset 3px 0 #8dbaff,0 4px 12px #071a321a}
.work-tabs button.primary{box-shadow:0 4px 14px #155ddd25}
.bar span{transition:width 450ms var(--motion-ease);background:linear-gradient(90deg,#227e58,#34a477)}
dialog[open]{animation:dialog-arrive 240ms var(--motion-ease) both}
dialog[open]::backdrop{animation:backdrop-arrive 200ms ease both}
#toast:not([hidden]){animation:toast-arrive 260ms var(--motion-ease) both;box-shadow:0 8px 30px #10294c30}
input[type=checkbox],input[type=radio]{transition:box-shadow 160ms ease;accent-color:#155ddd}
.paper-option:has(input:checked){transition:background-color 160ms ease}
@keyframes brand-arrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes dialog-arrive{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes backdrop-arrive{from{opacity:0}to{opacity:1}}
@keyframes toast-arrive{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Motion language: draw, settle, glide. All effects keep controls immediately usable. */
html{scroll-behavior:smooth;scroll-padding-top:100px}
input[type=checkbox]{appearance:none;-webkit-appearance:none;display:inline-grid;place-content:center;position:relative;flex-shrink:0;width:22px!important;height:22px!important;min-height:22px!important;padding:0!important;border:2px solid #9aacc4!important;border-radius:6px!important;background:#fff!important;vertical-align:middle;cursor:pointer;transition:background-color .2s,border-color .2s,box-shadow .2s}
input[type=checkbox]::after{content:'';display:block;width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg);opacity:0}
input[type=checkbox]:checked{background:#18774d!important;border-color:#18774d!important;box-shadow:0 0 0 3px #18774d12}
input[type=checkbox]:checked::after{opacity:1;animation:tick-draw 360ms var(--motion-ease) both}
input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}
input[type=radio]:checked{animation:radio-settle 300ms var(--motion-ease)}
@keyframes tick-draw{0%{clip-path:inset(100% 0 0 0);transform:translateY(-1px) rotate(45deg) scale(.7)}55%{clip-path:inset(35% 0 0 0);transform:translateY(-1px) rotate(45deg) scale(1.15)}100%{clip-path:inset(0);transform:translateY(-1px) rotate(45deg) scale(1)}}
@keyframes radio-settle{50%{box-shadow:0 0 0 5px #155ddd20}}
.motion-ripple{position:fixed;overflow:hidden;pointer-events:none;z-index:10010;border-radius:12px}
.motion-ripple i{position:absolute;border-radius:50%;background:#7daeff30;animation:ripple-out 530ms ease-out forwards}
@keyframes ripple-out{from{transform:scale(.05);opacity:1}to{transform:scale(1);opacity:0}}
.motion-check{position:fixed;pointer-events:none;z-index:10011;overflow:visible}
.motion-check circle{fill:none;stroke:#299b68;stroke-width:1.6;transform-origin:center;animation:check-ring 560ms ease-out both}
.motion-check path{fill:none;stroke:white;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:25;stroke-dashoffset:25;animation:check-stroke 360ms 40ms ease-out forwards}
@keyframes check-ring{0%{opacity:.6;transform:scale(.5)}100%{opacity:0;transform:scale(1.8)}}
@keyframes check-stroke{to{stroke-dashoffset:0}}
.sync-login{animation:dialog-arrive 440ms var(--motion-ease) both}
.sync-gate{animation:backdrop-arrive 250ms ease both}
.sync-lock span{animation:dialog-arrive 250ms var(--motion-ease) both}
.step.done .step-icon{box-shadow:0 0 0 4px #1776470c}
.service,.material,.sim-controls,.cab-stage,.hero-art,.choices label{transition:transform 300ms var(--motion-ease),box-shadow 300ms ease,border-color 220ms ease,background-color 220ms ease}
.choices label:has(input:checked){background:#eef8f2;border-color:#8fc2a5}
.color-option.chosen span,.part-button.selected .mini-swatch{animation:swatch-settle 320ms var(--motion-ease)}
@keyframes swatch-settle{0%{transform:scale(.7)}65%{transform:scale(1.17)}100%{transform:scale(1)}}
.hero-art svg{animation:seat-arrive 850ms var(--motion-ease) both}
@keyframes seat-arrive{from{opacity:0;transform:translateY(24px) rotate(-3deg) scale(.95)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
body.motion-client>header{background:#fff}
body.motion-client .brand{animation:brand-arrive 650ms var(--motion-ease) both}
#result:not([hidden]),#cab-summary:not([hidden]){animation:dialog-arrive 350ms var(--motion-ease) both}
@media(hover:hover) and (pointer:fine){.service:hover,.material:hover{transform:translateY(-5px);box-shadow:0 14px 30px #10294c10}.color-option:hover span{transform:scale(1.12)}.hero-art:hover{transform:translateY(-4px)}}
::view-transition-old(root){animation:page-out 150ms ease both}
::view-transition-new(root){animation:page-in 300ms var(--motion-ease) both}
::view-transition-group(root){animation-duration:300ms}
::view-transition{pointer-events:none}
@keyframes page-out{to{opacity:0;transform:translateY(-5px)}}
@keyframes page-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@media(forced-colors:active){input[type=checkbox]{appearance:auto;-webkit-appearance:auto}input[type=checkbox]::after{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.motion-ripple,.motion-check{display:none}}

.motion-ripple[popover],.motion-check[popover]{margin:0;padding:0;border:0;background:transparent;color:inherit;inset:auto;pointer-events:none}.motion-ripple::backdrop,.motion-check::backdrop{background:transparent;pointer-events:none}

#cab-selection-label{position:static;transform:none;display:flex;align-items:center;min-height:36px;margin:10px 0 0;padding:6px 10px;background:#edf3f8;color:#405b76;border:1px solid #d8e3ed;border-radius:8px;font:500 13px/1.4 system-ui;pointer-events:none;box-shadow:none;max-width:100%;width:auto}#cab-selection-label[hidden]{display:none}.cab-picture{position:relative;isolation:isolate}.cab-stage>.hint{position:static;margin:10px 0 0;line-height:1.5}@media(max-width:1050px){.sim-layout{align-items:start}.cab-stage{position:relative;top:auto;inset:auto;transform:none}.sim-controls{position:relative;min-width:0}}
/* Quiet feedback: no flashing, bouncing swatches or full-page transitions. */
.color-option.chosen span,.part-button.selected .mini-swatch,.logo,.brand{animation:none}.color-option.chosen,.part-button.selected{box-shadow:none;border-color:#6c9dc2}.motion-ripple,.motion-check{display:none!important}button:active:not(:disabled){transform:none}.color-option:hover span{transform:none}.stat:hover,.card:hover,.service:hover,.material:hover,.hero-art:hover{transform:none}input[type=checkbox]:checked::after{animation:none}.panel,.metric,.stat,.history{box-shadow:0 2px 10px #10294c04}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #4d7fa8;outline-offset:3px}