/* Small working objects, made from the same steel, paper and paint as the shop. */
.ticker i.beam-spacer{position:relative;display:block;flex:0 0 17px;width:17px;height:20px;border-top:3px solid currentColor;border-bottom:3px solid currentColor;opacity:.85}
.ticker i.beam-spacer:before{content:"";position:absolute;width:4px;background:currentColor;top:0;bottom:0;left:6.5px}

/* A native range moves the load. Its visual plate and the beam share one position. */
.steel-divider.load-rail{height:88px;padding:0 45px;isolation:isolate;overflow:visible;--load-x:54%;--load-drop:0px;--load-roll:0deg}
.load-rail>.bolt{position:absolute;top:28px;z-index:3;transform:rotate(var(--load-roll));width:13px;height:13px}
.load-rail>.bolt:first-child{left:39px}.load-rail>.bolt:last-of-type{right:39px}
.load-rail>.bolt:before{margin-top:5px}
.load-rail>.rail-caption{position:absolute;left:45px;bottom:10px;max-width:65%;font-size:8px;letter-spacing:2px;pointer-events:none}
.load-rail .beam-drawing{position:absolute;left:45px;right:45px;top:4px;height:57px;width:calc(100% - 90px);overflow:visible;pointer-events:none}
.beam-shadow{fill:none;stroke:#301b15;stroke-width:11;stroke-linecap:round;opacity:.7;transform:translateY(4px)}
.beam-face{fill:none;stroke:#d18759;stroke-width:8;stroke-linecap:round}
.beam-edge{fill:none;stroke:#ebb586;stroke-width:1;stroke-linecap:round;transform:translateY(-3px)}
.beam-drawing path{transition:d .58s cubic-bezier(.18,1.4,.35,1)}
.load-rail.is-loaded .beam-drawing path{transition-duration:.18s;transition-timing-function:ease-out}
.load-control{position:absolute;top:-8px;left:45px;width:calc(100% - 90px);height:68px;margin:0;padding:0;background:transparent;appearance:none;-webkit-appearance:none;cursor:grab;z-index:5;touch-action:pan-y;border:0;box-shadow:none;border-radius:0;outline-offset:2px}
.load-control:active{cursor:grabbing}
.load-control::-webkit-slider-runnable-track{height:42px;background:transparent;border:0}
.load-control::-moz-range-track{height:42px;background:transparent;border:0}
.load-control::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:64px;height:42px;border:0;background:transparent;border-radius:0}
.load-control::-moz-range-thumb{width:64px;height:42px;border:0;background:transparent;border-radius:0}
.load-control:focus-visible{outline:2px solid var(--sage);outline-offset:0}
.load-plate-track{position:absolute;top:-5px;left:77px;right:77px;height:48px;pointer-events:none;z-index:4;opacity:1}
.load-plate{position:absolute;left:var(--load-x);top:0;width:64px;height:43px;transform:translate(-50%,var(--load-drop));background:linear-gradient(135deg,#b6cbb2,#9ab49a 64%,#7c987c);color:#263d2c;border:1px solid #d5dec0;border-bottom:5px solid #4e6b50;border-right:4px solid #69856a;box-shadow:0 3px 2px #2f201b55,inset 0 1px #eef0d2;display:grid;place-items:center;font:22px/1 var(--display);letter-spacing:-.2px}
.load-plate:before{content:"";position:absolute;top:-8px;width:23px;height:10px;border:3px solid #92a88c;border-bottom:0;border-radius:4px 4px 0 0;box-shadow:inset 0 1px #e5e6c7}
.load-plate:after{content:"";position:absolute;width:5px;height:5px;left:5px;bottom:6px;border-radius:50%;background:#607c61;box-shadow:42px 0 #607c61}
.load-plate{transition:transform .58s cubic-bezier(.18,1.4,.35,1)}
.load-rail.is-loaded .load-plate{transition-duration:.18s;transition-timing-function:ease-out}
.load-invite{position:absolute;right:45px;bottom:9px;font:8px/1.4 var(--mono);letter-spacing:1.1px;color:#d4e1bc;pointer-events:none;text-align:right}
.load-rail.is-loaded .load-plate{box-shadow:0 1px 1px #2f201b66,inset 0 1px #eef0d2}

/* Fleet size remains the real selection; the little yard follows it. */
.fleet-options{position:relative;isolation:isolate;--fleet-index:0}
.fleet-options:before{content:"";position:absolute;left:4px;top:4px;bottom:4px;width:calc((100% - 16px)/3);background:var(--sage);box-shadow:0 2px 3px #2c462d22;transform:translateX(calc(var(--fleet-index) * (100% + 4px)));transition:transform .52s cubic-bezier(.2,.85,.25,1.08);z-index:-1}
.fleet-options button[aria-pressed="true"]{background:transparent;box-shadow:none}
.fleet-yard{position:relative;width:min(100%,360px);height:80px;margin-top:27px;grid-column:1/-1;isolation:isolate;overflow:hidden;color:var(--sage)}
.fleet-yard:before{content:"";position:absolute;left:0;right:0;bottom:18px;height:1px;background:#dfc6a16b;box-shadow:0 7px #3d201c50}
.fleet-yard:after{content:"";position:absolute;left:0;right:0;bottom:0;height:11px;border-left:1px solid #dfc6a155;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(20% - 1px),#dfc6a155 calc(20% - 1px),#dfc6a155 20%)}
.yard-truck{position:absolute;left:calc(var(--slot) * 20% + 1%);bottom:18px;width:18%;opacity:0;transform:translateX(-100px);transition:transform .7s cubic-bezier(.18,.75,.2,1),opacity .18s;transition-delay:0ms;will-change:auto}
.yard-truck.is-parked{opacity:1;transform:translateX(0);transition-delay:var(--arrival-delay)}
.yard-truck svg{display:block;width:100%;overflow:visible}
.yard-truck.is-arriving .truck-body{animation:truck-settle .75s var(--ease) var(--arrival-delay) both;transform-origin:60% 75%}
.yard-truck.is-arriving .truck-wheel{animation:truck-roll .65s ease-out var(--arrival-delay) both;transform-box:fill-box;transform-origin:center}
.yard-truck.is-parked .truck-light{fill:#efd19a}
.fleet-yard[data-fleet="one"] .yard-truck:first-child .truck-light{filter:drop-shadow(1px 0 2px #efd19a66)}
@keyframes truck-settle{0%,50%{transform:translateY(0)}70%{transform:translateY(1.7px) rotate(.8deg)}86%{transform:translateY(-.4px)}100%{transform:none}}
@keyframes truck-roll{from{transform:rotate(-245deg)}to{transform:rotate(0deg)}}

/* The round paper stamp gives under a fingertip; its text stays selectable. */
.hands-figure .round-stamp{transition:rotate .6s cubic-bezier(.2,.7,.25,1.15),box-shadow .5s}
@media(hover:hover) and (pointer:fine){.hands-figure:hover .round-stamp{rotate:-7deg;box-shadow:5px 7px 5px #231c1826}.load-control:hover~.load-plate-track .load-plate{filter:brightness(1.045)}}

@media(min-width:1500px){.fleet-yard{width:390px;height:91px;margin-top:36px}}
@media(max-width:800px){.fleet-yard{width:100%;max-width:360px;margin-top:25px;justify-self:end}.load-rail>.rail-caption{letter-spacing:1px;font-size:7px}.load-invite{font-size:7px}}
@media(max-width:540px){.steel-divider.load-rail{height:86px;padding:0 25px}.load-rail .beam-drawing{left:25px;right:25px;width:calc(100% - 50px)}.load-control{left:25px;width:calc(100% - 50px)}.load-plate-track{left:57px;right:57px}.load-rail>.bolt:first-child{left:20px}.load-rail>.bolt:last-of-type{right:20px}.load-rail>.rail-caption{left:27px;bottom:11px;max-width:60%;font-size:7px;letter-spacing:.25px;line-height:1.5}.load-invite{right:26px;bottom:11px;font-size:7px;letter-spacing:.1px;max-width:32%}.fleet-yard{height:73px;width:100%;margin-top:24px}}
.motion-paused .fleet-options:before,.motion-paused .yard-truck,.motion-paused .round-stamp,.motion-paused .load-plate,.motion-paused .beam-drawing path{transition:none!important}
.motion-paused .yard-truck *{animation:none!important}
@media(prefers-reduced-motion:reduce){.fleet-options:before,.yard-truck,.round-stamp,.load-plate,.beam-drawing path{transition:none!important}.yard-truck *{animation:none!important}}
@media(forced-colors:active){.beam-face,.beam-edge{stroke:CanvasText}.beam-shadow{display:none}.load-plate{background:ButtonFace;color:ButtonText;border:2px solid ButtonText;forced-color-adjust:auto}.load-control{accent-color:Highlight}.load-invite{color:CanvasText}.fleet-options:before{border:2px solid Highlight;background:Canvas}.fleet-options button[aria-pressed="true"]{outline:2px solid Highlight;outline-offset:-4px}.fleet-yard{display:none}}
