/* Physical bolt trays: colored threaded screws accumulate in each collection bay. */
.bolt-tray{position:relative;min-height:82px;padding:7px 8px 20px;border:1px solid color-mix(in srgb,var(--bin-color) 78%,#c9d2da);background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(9,13,19,.92) 42%),radial-gradient(circle at 50% 100%,color-mix(in srgb,var(--bin-color) 28%,transparent),transparent 62%);clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 7px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 7px),0 10px);box-shadow:inset 0 0 0 2px rgba(0,0,0,.42),inset 0 -20px 25px rgba(0,0,0,.38),0 5px 12px rgba(0,0,0,.32);overflow:hidden}
.bolt-tray:before{content:'';position:absolute;inset:4px 5px auto;height:5px;background:linear-gradient(90deg,transparent,var(--bin-color),transparent);box-shadow:0 0 10px var(--bin-color);opacity:.85}.tray-kicker{display:block;color:#9ca9b4;font-size:7px;font-weight:900;letter-spacing:1.1px;line-height:1}.bolt-tray .color-bin-name{display:block;margin-top:3px;color:#f0f3f6;font-size:9px;font-weight:950;letter-spacing:1.25px}.tray-bolt-field{position:relative;display:block;height:33px;margin:3px 1px 0;border:1px solid rgba(255,255,255,.12);border-top-color:rgba(0,0,0,.72);background:linear-gradient(180deg,rgba(0,0,0,.54),rgba(31,39,47,.28));overflow:hidden}.tray-bolt{position:absolute;width:30px;height:9px;border-radius:8px;background:linear-gradient(90deg,#0e1318 0 11%,var(--bin-color) 13% 78%,#11161b 80%);box-shadow:0 2px 4px rgba(0,0,0,.55),0 0 7px color-mix(in srgb,var(--bin-color) 60%,transparent);transform:rotate(var(--bolt-angle,-18deg));transform-origin:22% 50%;transition:opacity .2s,filter .2s}.tray-bolt:before{content:'+';position:absolute;left:-5px;top:-5px;display:grid;place-items:center;width:18px;height:18px;border:1px solid rgba(255,255,255,.56);border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff8,transparent 25%),var(--bin-color);color:#14191e;font-size:14px;font-weight:950;line-height:1;box-shadow:inset 0 0 0 3px rgba(255,255,255,.16),0 1px 3px #000}.tray-bolt:after{content:'';position:absolute;left:12px;right:2px;top:2px;height:5px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.38) 0 2px,transparent 2px 5px);opacity:.6}.tray-bolt.is-needed{opacity:.2;filter:saturate(.45) grayscale(.25)}.tray-bolt.is-collected{opacity:1}.tray-bolt:nth-child(1){left:3%;top:12px;--bolt-angle:-17deg}.tray-bolt:nth-child(2){left:31%;top:17px;--bolt-angle:11deg}.tray-bolt:nth-child(3){left:58%;top:9px;--bolt-angle:-9deg}.tray-bolt:nth-child(4){left:13%;top:2px;--bolt-angle:8deg}.tray-bolt:nth-child(5){left:48%;top:2px;--bolt-angle:18deg}.tray-bolt:nth-child(6){left:70%;top:17px;--bolt-angle:-20deg}.tray-counter{position:absolute;left:8px;right:8px;bottom:4px;display:flex;justify-content:center;gap:3px;padding-top:3px;border-top:1px solid rgba(255,255,255,.16);color:#e5ebef;font-size:10px;font-weight:900;letter-spacing:.5px}.tray-counter b{color:var(--bin-color);text-shadow:0 0 7px var(--bin-color)}
.holding-slot{background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(2,6,10,.85));clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px)}.holding-slot .slot-bolt{position:relative;display:block;width:30px;height:9px;border-radius:8px;background:linear-gradient(90deg,#11171c 0 13%,var(--slot-bolt) 14% 79%,#11171c 80%);box-shadow:0 2px 4px #000,0 0 8px var(--slot-bolt);transform:rotate(-16deg)}.holding-slot .slot-bolt:before{content:'+';position:absolute;left:-5px;top:-5px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--slot-bolt);border:1px solid rgba(255,255,255,.55);color:#11171c;font-size:14px;font-weight:950;box-shadow:inset 0 0 0 3px rgba(255,255,255,.18)}.holding-slot .slot-bolt:after{content:'';position:absolute;left:12px;right:2px;top:2px;height:5px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.34) 0 2px,transparent 2px 5px)}
@media(max-width:900px){.bolt-tray{min-height:72px;padding:6px 6px 18px}.tray-bolt-field{height:27px}.tray-bolt{transform:scale(.84) rotate(var(--bolt-angle,-18deg));transform-origin:22% 50%}.tray-counter{left:6px;right:6px;font-size:9px}}
@media(max-width:560px){.bolt-tray{min-height:68px;padding:5px 5px 17px}.tray-kicker{display:none}.bolt-tray .color-bin-name{font-size:7px;margin-top:3px}.tray-bolt-field{height:25px;margin-top:2px}.tray-bolt{transform:scale(.68) rotate(var(--bolt-angle,-18deg));transform-origin:22% 50%}.tray-counter{bottom:3px;font-size:8px}.holding-slot .slot-bolt{transform:scale(.78) rotate(-16deg)}}