/* ============================================
   ASSEMBLY LINE: tote variant (automotive page, "How a Sort Works").
   A blue returnable tote of suspect parts on a roller conveyor. The camera
   follows it while the conveyor, the floor and one gantry per station scroll
   past; each gantry's beam carries that step's screen. Shared shell, screen,
   nav and roller-conveyor styles: assembly-line.css. Moving parts are placed
   by assembly-line-tote.js; the numbers there (in u) must match these.

   Vertical budget, in u, from the rig's bottom: conveyor legs 0–20, side
   rail 20–36, roller bed 36–92 (behind the tote), tote face 44–184 with its
   open top to 220, parts 144–210 (their tops above the rim to ~220), machines 246–312, gantry beam 312–330,
   screen 330–571, beacon and lamp to ~354; the rig is 580u. Height caps use
   66cqh, so the rig fills ~96% of the stage (580/400 × 66).
   Gantry posts stand at ±244–264u, clear of the tote (±190u, top face +36u).
   ============================================ */

.line__conveyor,
.line__frontrail,
.line__tote,
.line__gear,
.line__marker {
  display: none;
}

/* Static grid: each station is just its screen. */
.line--tote .line__unit {
  position: relative;
  width: var(--line-w);
  height: calc(241 * var(--u));
}

/* A dark HMI bezel rather than the white TV body. */
.line--tote .line__panel {
  --f: #3A4250;
  --t: #545D6C;
  --s: #262C36;
}


/* ── Live rig ── */
.line--tote.line--live .line__rig {
  --line-w: min(640px, 50cqw, 66cqh);
  --rig-h: 580;
}

@media (max-width: 1023px) {
  .line--tote.line--live .line__rig {
    --line-w: min(560px, 64cqw, 66cqh);
  }
}

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

.line--tote.line--live .line__conveyor,
.line--tote.line--live .line__frontrail {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.line--tote.line--live .line__conveyor  { z-index: 1; }
.line--tote.line--live .line__tote      { z-index: 2; }
.line--tote.line--live .line__frontrail { z-index: 3; }
.line--tote.line--live .line__track     { z-index: 4; }

.line--tote.line--live .line__walkway {
  left: calc(-40 * var(--u));
  right: calc(-40 * var(--u));
  will-change: transform;
}

/* Stations: every gantry is rig-tall and centred on the rig; JS slides it
   along the line. The screen sits on the beam. */
.line--tote.line--live .line__track {
  display: block;
  position: absolute;
  inset: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.line--tote.line--live .line__unit {
  position: absolute;
  left: calc(50% - var(--line-w) / 2);
  bottom: 0;
  height: 100%;
  will-change: transform;
}

.line--tote.line--live .line__panel {
  bottom: calc(330 * var(--u));
}

.line--tote.line--live .line__gear {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 0;
}

.line__gear > i {
  position: absolute;
  box-sizing: border-box;
}


/* ── Gantry: posts and beam ── */
.line__tg-post {
  bottom: 0;
  width: calc(20 * var(--u));
  height: calc(330 * var(--u));
  --d: calc(10 * var(--u));
  --f: var(--line-alloy);
  --t: var(--line-alloy-top);
  --s: var(--line-alloy-side);
}

.line__tg-post--l { left: calc(-264 * var(--u)); }
.line__tg-post--r { left: calc(244 * var(--u)); }

.line__tg-beam {
  left: calc(-264 * var(--u));
  bottom: calc(312 * var(--u));
  width: calc(528 * var(--u));
  height: calc(18 * var(--u));
  --d: calc(10 * var(--u));
  --f: var(--color-saffron);
  --t: var(--line-lit-top);
  --s: var(--color-saffron-dark);
}


/* ── The tote: open-top blue bin, parts, hang tag, certified label ── */
.line--tote.line--live .line__tote {
  display: block;
  position: absolute;
  left: 50%;
  bottom: calc(44 * var(--u));
  width: 0;
  height: 0;
  will-change: transform;
}

.line__tote > span {
  position: absolute;
}

.line__bin {
  left: calc(-190 * var(--u));
  bottom: 0;
  width: calc(380 * var(--u));
  height: calc(140 * var(--u));
  --d: calc(36 * var(--u));
  --f: #2D6BC4;
  --t: #173A6E;   /* the open top: the bin's shadowed inside */
  --s: #1F4F96;
  border-radius: 2px;
}

/* The front wall again, drawn over the parts so they stand inside the bin
   (the bin itself carries the shadowed inside and the end wall). */
.line__bin-front {
  left: calc(-190 * var(--u));
  bottom: 0;
  width: calc(380 * var(--u));
  height: calc(140 * var(--u));
  box-sizing: border-box;
  border: var(--line-stroke) solid var(--line-ink);
  border-radius: 2px;
  --f: #2D6BC4;
  /* Moulded ribs down the face. */
  background:
    repeating-linear-gradient(90deg,
      transparent 0 calc(30 * var(--u)),
      rgba(10, 19, 34, 0.18) calc(30 * var(--u)) calc(33 * var(--u)),
      transparent calc(33 * var(--u)) calc(36 * var(--u))),
    var(--f);
}

.line__bin-front > i {
  position: absolute;
  box-sizing: border-box;
}

.line__bin-grip {
  left: calc(150 * var(--u));
  top: calc(14 * var(--u));
  width: calc(80 * var(--u));
  height: calc(16 * var(--u));
  border: var(--line-stroke) solid var(--line-ink);
  border-radius: 99px;
  background: #0F2447;
}

/* Barcode plate at the right end; the intake scanner reads it. */
.line__bin-code {
  left: calc(330 * var(--u));
  bottom: calc(20 * var(--u));
  width: calc(36 * var(--u));
  height: calc(26 * var(--u));
  border: 1.5px solid var(--line-ink);
  background: #FFFDF7;
}

.line__bin-code::after {
  content: '';
  position: absolute;
  inset: calc(4 * var(--u));
  background: repeating-linear-gradient(90deg,
    var(--line-ink) 0 1.5px, transparent 1.5px 3px,
    var(--line-ink) 3px 4px, transparent 4px 6.5px);
}

/* Parts standing inside the bin, 18u back from its face; the front wall
   hides all but their tops. */
.line__parts {
  left: 0;
  bottom: 0;
}

.line__part {
  bottom: calc(100 * var(--u));
  width: calc(44 * var(--u));
  height: calc(66 * var(--u));
  --d: calc(10 * var(--u));
  --f: #9AA3AE;
  --t: #C3C9D1;
  --s: #6F7885;
  border-radius: 2px;
  transition: background-color 0.15s;
}

.line__part:nth-child(1) { left: calc(-152 * var(--u)); }
.line__part:nth-child(2) { left: calc(-94 * var(--u)); }
.line__part:nth-child(3) { left: calc(-36 * var(--u)); }
.line__part:nth-child(4) { left: calc(22 * var(--u)); }
.line__part:nth-child(5) { left: calc(80 * var(--u)); }
.line__part:nth-child(6) { left: calc(138 * var(--u)); }

.line__part.is-fail {
  --f: #E0483E;
  --t: #F07A70;
  --s: #A8322A;
}

/* A green dot sticker once a part has passed. */
.line__part > b {
  position: absolute;
  left: 50%;
  top: calc(7 * var(--u));
  width: calc(12 * var(--u));
  aspect-ratio: 1;
  margin-left: calc(-6 * var(--u));
  border: 1.5px solid var(--line-ink);
  border-radius: 50%;
  background: #3DDC7A;
  transform: scale(0);
  transition: transform 0.18s var(--ease-out);
}

.line__part.is-pass > b {
  transform: none;
}

/* SUSPECT hang tag on the bin face, hung from its top edge. */
.line__tag {
  left: calc(64 * var(--u));
  bottom: calc(52 * var(--u));
  width: calc(76 * var(--u));
  height: calc(40 * var(--u));
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding-top: calc(6 * var(--u));
  border: var(--line-stroke) solid var(--line-ink);
  border-radius: 3px;
  background: #D8412F;
  color: #FFFFFF;
  transform-origin: 50% 0;
  visibility: hidden;
  will-change: transform, opacity;
}

.line__tag > b {
  font-family: var(--font-mono);
  font-size: max(7px, calc(11 * var(--u)));
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.line__tag-hole {
  position: absolute;
  left: 50%;
  top: calc(5 * var(--u));
  width: calc(7 * var(--u));
  aspect-ratio: 1;
  margin-left: calc(-3.5 * var(--u));
  border: 1.5px solid var(--line-ink);
  border-radius: 50%;
  background: #173A6E;
}

/* CERTIFIED label, pressed onto the face by station 05's tamp pad. */
.line__cert {
  left: calc(-172 * var(--u));
  bottom: calc(60 * var(--u));
  width: calc(122 * var(--u));
  height: calc(52 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--u));
  box-sizing: border-box;
  border: var(--line-stroke) solid var(--line-ink);
  border-radius: 3px;
  background: #2FA866;
  color: #FFFFFF;
  visibility: hidden;
  will-change: transform;
}

.line__cert > b {
  font-family: var(--font-mono);
  font-size: max(7px, calc(12 * var(--u)));
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.line__cert-icon {
  width: calc(18 * var(--u));
  height: auto;
  stroke-width: 3;
}


/* ── 01 Intake: a barcode scanner low on the right post ── */
.line__tg-scanner {
  left: calc(222 * var(--u));
  bottom: calc(64 * var(--u));
  width: calc(24 * var(--u));
  height: calc(26 * var(--u));
  --d: calc(8 * var(--u));
  --f: #3A4250;
  --t: #545D6C;
  --s: #262C36;
  border-radius: 3px;
}

/* The beam from the scanner's nose, flat across to the barcode plate
   (tote-face x 140–176, 64–90u off the floor). */
.line__tg-laser {
  left: calc(170 * var(--u));
  bottom: calc(76 * var(--u));
  width: calc(52 * var(--u));
  height: 2px;
  background: #FF4B3E;
  box-shadow: 0 0 6px 2px rgba(255, 75, 62, 0.6);
  opacity: 0;
  transition: opacity 0.1s;
}

.line__unit.is-acting .line__tg-laser {
  opacity: 1;
}


/* ── 02 Hold: a mesh cage front and a hold beacon ── */
.line__tg-mesh {
  left: calc(-244 * var(--u));
  bottom: 0;
  width: calc(488 * var(--u));
  height: calc(250 * var(--u));
  border: var(--line-stroke) solid var(--line-ink);
  border-top-width: calc(6 * var(--u));
  border-top-color: var(--color-saffron);
  background:
    repeating-linear-gradient(90deg, rgba(205, 211, 219, 0.55) 0 1.5px, transparent 1.5px calc(14 * var(--u))),
    repeating-linear-gradient(0deg, rgba(205, 211, 219, 0.55) 0 1.5px, transparent 1.5px calc(14 * var(--u)));
}

.line__tg-beacon {
  left: calc(-266 * var(--u));
  bottom: calc(330 * var(--u));
  width: calc(24 * var(--u));
  height: calc(22 * var(--u));
  border: var(--line-stroke) solid var(--line-ink);
  border-radius: 50% 50% 2px 2px;
  background: #6B4D12;
  transition: background-color 0.2s, box-shadow 0.2s;
}

.line__unit.is-acting .line__tg-beacon {
  background: #FFB020;
  box-shadow: 0 0 16px 5px rgba(255, 176, 32, 0.55);
}


/* ── 03 Inspect: a line-scan camera that travels the beam ── */
.line__tg-scan {
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  will-change: transform;
}

.line__tg-scan > i {
  position: absolute;
  box-sizing: border-box;
}

.line__tg-cam {
  left: calc(-24 * var(--u));
  bottom: calc(272 * var(--u));
  width: calc(48 * var(--u));
  height: calc(40 * var(--u));
  --d: calc(10 * var(--u));
  --f: #3A4250;
  --t: #545D6C;
  --s: #262C36;
  border-radius: 3px;
}

/* The light sheet, from the lens down past the parts. */
.line__tg-sheet {
  left: calc(-6 * var(--u));
  bottom: calc(170 * var(--u));
  width: calc(12 * var(--u));
  height: calc(102 * var(--u));
  background: linear-gradient(to bottom, rgba(140, 225, 255, 0.85), rgba(140, 225, 255, 0.12));
  box-shadow: 0 0 14px 3px rgba(140, 225, 255, 0.35);
  opacity: 0;
  transition: opacity 0.1s;
}

.line__unit.is-acting .line__tg-sheet {
  opacity: 1;
}


/* ── 04 Rework: a driver on a rod over the failed part ── */
.line__tg-rod {
  left: calc(51 * var(--u));
  width: calc(6 * var(--u));
  bottom: calc(280 * var(--u));   /* JS moves it with the tool */
  height: calc(34 * var(--u));
  border-inline: 1.5px solid var(--line-ink);
  background: var(--line-alloy-side);
}

.line__tg-driver {
  left: calc(38 * var(--u));
  bottom: calc(280 * var(--u));
  width: calc(32 * var(--u));
  height: calc(30 * var(--u));
  --d: calc(8 * var(--u));
  --f: var(--color-saffron);
  --t: var(--line-lit-top);
  --s: var(--color-saffron-dark);
  border-radius: 3px;
  will-change: transform;
}

.line__tg-bit {
  position: absolute;
  left: 50%;
  top: 100%;
  width: calc(6 * var(--u));
  height: calc(14 * var(--u));
  margin-left: calc(-3 * var(--u));
  border: 1.5px solid var(--line-ink);
  border-top: 0;
  background: #C3C9D1;
}


/* ── 05 Label: a tamp pad over the label spot, left of the grip ── */
.line__tg-rod--pad {
  left: calc(-114 * var(--u));
}

.line__tg-pad {
  left: calc(-172 * var(--u));
  bottom: calc(290 * var(--u));
  width: calc(122 * var(--u));
  height: calc(16 * var(--u));
  --d: calc(8 * var(--u));
  --f: var(--color-saffron);
  --t: var(--line-lit-top);
  --s: var(--color-saffron-dark);
  border-radius: 3px;
  will-change: transform;
}


/* ── 06 Close out: a tally board hung under the beam (inside a phone's
   width), and a green lamp on the right post ── */
.line__tg-tally {
  left: calc(100 * var(--u));
  bottom: calc(268 * var(--u));
  padding: 0.35em 0.55em 0.3em;
  border: 1.5px solid var(--line-ink);
  border-radius: 3px;
  background: var(--color-navy);
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-mono);
  font-size: max(8px, calc(11 * var(--u)));
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
}

.line__tg-tally b {
  color: #6EE39A;
  font-weight: 700;
}

.line__tg-lamp {
  left: calc(242 * var(--u));
  bottom: calc(330 * var(--u));
  width: calc(24 * var(--u));
  height: calc(22 * var(--u));
  border: var(--line-stroke) solid var(--line-ink);
  border-radius: 50% 50% 2px 2px;
  background: #1D4A2E;
  transition: background-color 0.2s, box-shadow 0.2s;
}

.line__unit.is-lit .line__tg-lamp {
  background: #3DDC7A;
  box-shadow: 0 0 16px 5px rgba(61, 220, 122, 0.5);
}


/* ── Station marker on the floor, fixed with the tote ── */
.line--tote.line--live .line__marker {
  display: block;
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: calc(4 * var(--u));
  transform: translateX(-50%);
}

.line--tote .line__marker .line__plate {
  position: static;
  transform: none;
  display: inline-block;
}