/* Solution: machine tiles as live, connected machines (ms-live.js). Black / white / grey + orange accent. */
.ms.msl { display: flex; flex-direction: column; padding: 18px 20px 20px; border-radius: 22px; background: radial-gradient(rgba(0,0,0,.04) 1px, transparent 1.3px) 0 0 / 16px 16px, #fff;
  box-shadow: 0 24px 44px -34px rgba(0,0,0,.28), inset 0 0 0 1px #e8e8e8; transition: box-shadow .4s; }
.ms.msl:hover { box-shadow: 0 34px 56px -34px rgba(0,0,0,.35), inset 0 0 0 1px #dcdcdc; }
/* the photo is a machine on a floor, not a product shot */
.msl .ms-img { aspect-ratio: 1000 / 600; margin: 0; }
.msl .ms-img::after { display: none; }
.msl .ms-img::before { left: 14%; right: 14%; bottom: 7%; height: 10%; background: radial-gradient(ellipse, rgba(0,0,0,.22), transparent 70%); filter: blur(2px); }
.msl .ms-img img { left: 0; width: 72%; height: 86%; top: 8%; filter: drop-shadow(0 10px 10px rgba(0,0,0,.14)); animation: none !important; transition: filter .6s, opacity .6s; }
.ms.msl:hover .ms-img img { transform: none; }
.ms.msl:hover .ms-img::before { transform: none; opacity: 1; }
.msl.idle .ms-img img { filter: grayscale(1) drop-shadow(0 10px 10px rgba(0,0,0,.10)); opacity: .6; }
/* gateway clipped on the machine */
.msl-gw { position: absolute; z-index: 3; left: 4%; bottom: 6%; display: flex; align-items: center; gap: 6px; padding: 4px 9px 4px 4px; border-radius: 999px; background: #fff; box-shadow: 0 6px 14px -6px rgba(0,0,0,.25), 0 0 0 1px #ececec; }
.msl-gw img { position: static !important; width: 30px !important; height: auto !important; filter: none !important; animation: none !important; }
.msl-gw em { font-style: normal; font-size: 10.5px; font-weight: 800; color: #111; }
.msl-rip { position: absolute; left: 22px; top: 2px; width: 8px; height: 8px; border-radius: 50%; background: #f7861e; }
.msl.play .msl-rip { animation: msl-rip 1.8s ease-out infinite; }
@keyframes msl-rip { 0% { box-shadow: 0 0 0 0 rgba(247,134,30,.55); } 100% { box-shadow: 0 0 0 10px rgba(247,134,30,0); } }
/* live read-out */
.msl-hud { position: absolute; z-index: 3; right: 0; top: 6%; width: 40%; min-width: 132px; padding: 10px 12px 8px; border-radius: 14px; background: rgba(255,255,255,.96);
  box-shadow: 0 14px 28px -16px rgba(0,0,0,.3), 0 0 0 1px #e8e8e8; }
.msl-st { display: flex; align-items: center; gap: 6px; }
.msl-st i { width: 8px; height: 8px; border-radius: 50%; background: #f7861e; }
.msl.play:not(.idle) .msl-st i { animation: msl-rip 1.8s ease-out infinite; }
.msl.idle .msl-st i { background: #b0b0b0; }
.msl-st b { font-size: 11px; font-weight: 800; color: #111; }
.msl-st small { margin-left: auto; font-size: 8.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #9a9a9a; }
.msl-k { margin-top: 8px; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b6b6b; }
.msl-v { font-size: 20px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: #111; font-variant-numeric: tabular-nums; }
.msl.idle .msl-v { color: #9a9a9a; }
.msl-sp { display: block; width: 100%; height: 22px; margin-top: 4px; overflow: visible; }
.msl-sp polyline { fill: none; stroke: #f7861e; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.msl.idle .msl-sp polyline { stroke: #b0b0b0; }
/* shift timeline */
.msl-tl { position: relative; margin-top: 6px; }
.msl-bar { display: flex; gap: 2px; height: 10px; }
.msl-bar span { flex: 1; border-radius: 2px; background: #f7861e; }
.msl-bar span.i { background: #e3e3e3; }
.msl-now { position: absolute; top: -3px; right: 0; width: 2px; height: 16px; border-radius: 2px; background: #111; }
.msl-ax { display: flex; justify-content: space-between; margin-top: 5px; font-size: 9.5px; font-weight: 700; color: #9a9a9a; }
/* title row + protocol */
.msl .ms-b { flex-wrap: wrap; margin-top: 14px; }
.msl .ms-ic { background: #f4f4f4; color: #111; }
.msl-proto { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 4px 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #d4d4d4; font-size: 11px; font-weight: 700; color: #3a3a3a; white-space: nowrap; }
.msl-proto svg { width: 13px; height: 13px; fill: none; stroke: #f7861e; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.msl p { margin-top: 10px; }
@media (max-width: 1100px) { .msl-proto { margin-left: 0; } }
@media (max-width: 640px) { .msl-hud { width: 46%; } .msl-v { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .msl-rip, .msl-st i { animation: none !important; } }
.ms-sec .mss { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 28px; }
@media (max-width: 1000px) { .ms-sec .mss { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ms-sec .mss { grid-template-columns: minmax(0, 1fr); } }
.ms.msl { width: 100%; min-width: 0; }