/* ============================================
   ASSEMBLY LINE — robot variant (robotics page).
   A cobot hangs from a carriage on an overhead rail and moves the step signs:
   off the pedestal onto the outgoing AMR (left), then the next one from the
   incoming AMR (right) onto the pedestal, where it powers on. Shared shell,
   screen and nav styles: assembly-line.css. Moving parts sit at the rig's
   bottom-centre origin and are placed by assembly-line-robot.js; the numbers
   there (in u) must match the sizes here.

   Vertical budget, in u, from the rig's bottom: pedestal and AMR decks 0–56
   (signs seat at 56), sign 56–314 (panel 241 + lug), gripper and wrist up to
   ~402 at full lift, shoulder 446, base 452–474, carriage 474–500, rail
   484–514; the rig is 520u. Height caps use 74cqh, so the rig fills ~96% of
   the stage (520/400 × 74).
   ============================================ */

.line__fleet,
.line__robot {
  display: none;
}


/* ── Signs: a panel with a lifting lug on top ── */
.line--robot .line__sign {
  position: relative;
  width: var(--line-w);
  height: calc(258 * var(--u));
}

.line__lug {
  left: calc(50% - 18 * var(--u));
  bottom: calc(243 * var(--u));
  width: calc(36 * var(--u));
  height: calc(14 * var(--u));
  --d: calc(6 * var(--u));
  --f: var(--line-alloy);
  --t: var(--line-alloy-top);
  --s: var(--line-alloy-side);
  border-radius: 3px 3px 0 0;
}


/* ── Live rig ── */
.line--robot.line--live .line__rig {
  --line-w: min(720px, 56cqw, 74cqh);
  --rig-h: 520;
}

@media (max-width: 1023px) {
  .line--robot.line--live .line__rig {
    --line-w: min(600px, 70cqw, 74cqh);
  }
}

@media (max-width: 640px) {
  .line--robot.line--live .line__rig {
    --line-w: min(92cqw, 74cqh);
  }
}

/* Zero-size layers at the rig's bottom centre; JS translates their children
   with y measured up from the floor. */
.line--robot.line--live .line__track,
.line--live .line__fleet,
.line--live .line__robot {
  display: block;
  position: absolute;
  left: 50%;
  top: 100%;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.line--live .line__fleet { z-index: 1; }
.line--robot.line--live .line__track { z-index: 2; }
.line--live .line__robot { z-index: 3; }

.line--robot.line--live .line__sign {
  position: absolute;
  left: 0;
  top: 0;
  /* The wrist joint, 44u above the lug: carried signs swing about it. */
  transform-origin: 50% calc(-44 * var(--u));
  will-change: transform;
}


/* ── Scene: rail hangers, overhead rail, pedestal ── */
.line__rods {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(514 * var(--u));
  height: 100vh;
  display: flex;
  justify-content: center;
  gap: calc(380 * var(--u));
}

.line__rod {
  flex: none;
  width: calc(6 * var(--u));
  height: 100%;
  background: var(--line-alloy-side);
  border-inline: var(--line-stroke) solid var(--line-ink);
}

.line__overhead {
  left: 0;
  right: 0;
  bottom: calc(484 * var(--u));
  height: calc(20 * var(--u));
  --d: calc(10 * var(--u));
  --t: var(--line-alloy-top);
  --s: var(--line-alloy-side);
  /* The linear guide the carriage runs in. */
  background: linear-gradient(to bottom,
    var(--line-alloy) 0 38%,
    #7D8795 38% 62%,
    var(--line-alloy) 62%);
}

.line__pedestal {
  left: calc(50% - 150 * var(--u));
  bottom: 0;
  width: calc(300 * var(--u));
  height: calc(50 * var(--u));
  --d: calc(22 * var(--u));
  --f: var(--line-alloy);
  --t: var(--line-alloy-top);
  --s: var(--line-alloy-side);
}

/* Locating blocks the sign seats on, on the pedestal and the AMR decks. */
.line__nest {
  bottom: calc(100% + var(--line-stroke));
  width: calc(30 * var(--u));
  height: calc(6 * var(--u));
  --d: calc(6 * var(--u));
  --f: var(--color-saffron);
  --t: var(--line-lit-top);
  --s: var(--color-saffron-dark);
}

.line__nest--l { left: calc(40 * var(--u)); }
.line__nest--r { right: calc(40 * var(--u)); }

/* ── AMRs ── */
.line__amr {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(320 * var(--u));
  height: calc(56 * var(--u));
  will-change: transform;
}

.line__amr .line__nest {
  bottom: calc(50 * var(--u));
}

.line__amr .line__nest--l { left: calc(60 * var(--u)); }
.line__amr .line__nest--r { right: calc(60 * var(--u)); }

.line__wheel {
  position: absolute;
  bottom: 0;
  width: calc(18 * var(--u));
  aspect-ratio: 1;
  border-radius: 50%;
  background: #242A34;
  border: var(--line-stroke) solid var(--line-ink);
  transform: rotate(var(--roll, 0rad));
}

.line__wheel::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 14%;
  bottom: 14%;
  width: 2px;
  margin-left: -1px;
  background: #8A93A1;
}

.line__wheel--l { left: calc(44 * var(--u)); }
.line__wheel--r { right: calc(54 * var(--u)); }

.line__amr-body {
  left: 0;
  bottom: calc(8 * var(--u));
  width: 100%;
  height: calc(42 * var(--u));
  --d: calc(16 * var(--u));
  border-radius: 3px;
  /* White shell over a dark bumper band. */
  background: linear-gradient(to top, #333A46 0 26%, var(--line-white) 26%);
}

.line__amr-strip {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 30%;
  height: calc(5 * var(--u));
  border-radius: 99px;
  background: var(--color-saffron);
  box-shadow: 0 0 8px rgba(243, 144, 20, 0.5);
}


/* ── The cobot ── */
.line__robot > * {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}

.line__carriage {
  width: calc(92 * var(--u));
  height: calc(26 * var(--u));
  --d: calc(12 * var(--u));
  --f: var(--color-saffron);
  --t: var(--line-lit-top);
  --s: var(--color-saffron-dark);
}

.line__base {
  width: calc(52 * var(--u));
  height: calc(26 * var(--u));
  border: var(--line-stroke) solid var(--line-ink);
  border-radius: 3px 3px 40% 40% / 3px 3px 30% 30%;
  background: linear-gradient(to bottom, var(--line-white) 0 58%, #D6CFC5 58%);
}

.line__link {
  height: calc(22 * var(--u));
  border: var(--line-stroke) solid var(--line-ink);
  border-radius: 999px;
  background: var(--line-white);
  box-shadow:
    inset 0 calc(3 * var(--u)) 0 rgba(255, 255, 255, 0.95),
    inset 0 calc(-4 * var(--u)) 0 rgba(12, 24, 41, 0.12);
  transform-origin: calc(11 * var(--u)) 50%;
}

.line__link--fore {
  height: calc(18 * var(--u));
  transform-origin: calc(9 * var(--u)) 50%;
}

/* Joint caps with a saffron ring — the cobot's one accent colour. */
.line__joint {
  width: calc(30 * var(--u));
  aspect-ratio: 1;
  border: var(--line-stroke) solid var(--line-ink);
  border-radius: 50%;
  background: var(--line-white);
  box-shadow:
    inset 0 0 0 calc(3 * var(--u)) var(--line-white),
    inset 0 0 0 calc(5.5 * var(--u)) var(--color-saffron);
}

.line__joint--elbow { width: calc(26 * var(--u)); }
.line__joint--wrist { width: calc(20 * var(--u)); }

/* Tool: wrist block, flange, gripper body, fingers. Its top is the wrist
   joint; --open (0–1) spreads the fingers. Drawn bottom-up (fingers first) and
   each piece overlaps the one below by a few u, so a joint shows one outline
   instead of two stacked ones — the gripper reads as one assembly. The body
   spans the fingers' full stroke, so they always slide out from under it. */
.line__tool {
  width: calc(80 * var(--u));
  height: calc(58 * var(--u));
  transform-origin: 50% 0;
  --open: 1;
}

.line__tool > i {
  position: absolute;
  box-sizing: border-box;
  border: var(--line-stroke) solid var(--line-ink);
}

.line__wrist {
  left: calc(50% - 9 * var(--u));
  top: 0;
  width: calc(18 * var(--u));
  height: calc(20 * var(--u));
  border-radius: 0 0 3px 3px;
  background: var(--line-white);
}

.line__flange {
  left: calc(50% - 14 * var(--u));
  top: calc(17 * var(--u));
  width: calc(28 * var(--u));
  height: calc(7 * var(--u));
  border-radius: 2px;
  background: var(--line-alloy);
}

.line__gripper {
  left: calc(50% - 37 * var(--u));
  top: calc(21 * var(--u));
  width: calc(74 * var(--u));
  height: calc(15 * var(--u));
  border-radius: 3px;
  /* Body over the guide the jaws slide in. */
  background: linear-gradient(to bottom, #3A4250 0 62%, #232932 62%);
}

.line__finger {
  top: calc(32 * var(--u));
  width: calc(7 * var(--u));
  height: calc(24 * var(--u));
  border-radius: 0 0 2px 2px;
  background: var(--line-alloy);
}

/* Jaw pads on the inner tips — they bite into the lug when closed. */
.line__finger::after {
  content: '';
  position: absolute;
  bottom: calc(-1 * var(--line-stroke));
  width: calc(4 * var(--u));
  height: calc(7 * var(--u));
  box-sizing: border-box;
  border: var(--line-stroke) solid var(--line-ink);
  background: #232932;
}

.line__finger--l::after { left: 100%; border-left: 0; }
.line__finger--r::after { right: 100%; border-right: 0; }

.line__finger--l { left: calc(50% - 25 * var(--u) - var(--open) * 7 * var(--u)); }
.line__finger--r { left: calc(50% + 18 * var(--u) + var(--open) * 7 * var(--u)); }