/* ============================================================
   SECTION 02 — "Every job has a name on it" — six treatments.

   The section's claim is that a call becomes a JOB, a job gets a
   PERSON on it, and everything after that happens without anyone
   remembering. So the visual has to show assignment, not a list.
   The version that is live shows a list, which is why it argues
   less than it could.

   All six use real job data. What differs is which part of the
   lifecycle the artefact makes visible.
   ============================================================ */

.jb__t   { font-size: var(--t-sm); font-weight: 600; color: var(--ink); line-height: 1.25; }
.jb__n   { font-size: var(--t-xs); color: var(--ink-4); margin-top: 3px; line-height: 1.35; }
.jb__mono{ font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-4); }
.jb__who { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-xs);
  font-weight: 600; color: var(--ink); }
.jb__av  { width: 20px; height: 20px; border-radius: 99px; display: grid; place-items: center;
  background: var(--ink); color: var(--white); font-size: 9px; font-weight: 700; flex: 0 0 auto; }
.jb__av--none { background: var(--alarm-wash); color: var(--alarm-dim);
  border: 1px dashed var(--alarm); }
.jb__pill { display: inline-flex; padding: 4px 9px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600; border: 1px solid var(--line); color: var(--ink-3); }
.jb__pill--done { background: var(--brand-wash); border-color: var(--brand-line); color: var(--brand); }
.jb__pill--warn { background: var(--alarm-wash); border-color: var(--alarm); color: var(--alarm-dim); }

/* ---- THE CHAIN — the cards connect to each other -----------------
   No centre rule. The steps are wired together directly: out of one
   card, across, down or up, and into the next.

   The rule went because it was a spine the cards hung off, and a
   spine implies the line is the subject and the cards are labels on
   it. Here the cards ARE the subject and the wiring is just how they
   are attached, which is the right way round for a section whose
   claim is that each step hands to the next without anyone carrying
   it.

   GEOMETRY. Every number below is derived from --gap, so the elbows
   cannot drift away from the cards:
     card width  = the column minus --gap
     elbow out   = --gap/2 across, then the riser, then --gap/2 in
     tap height  = --tap from the row's top (up cards) or bottom (down)
   One weight throughout. An earlier version drew the leg a person
   holds in solid ink to show how little of the job is manual — true,
   but it made the human step the loudest thing in a section arguing
   the opposite, and the wiring is plumbing, not the point.
   Taps are measured from the ROW, never from the card, so a card
   that gains a line of text cannot move the wiring. That was the
   failure mode of the stepped version: geometry that depended on
   content height and broke the moment the copy changed. */
.trace { position: relative; padding-block: var(--s5);
  --gap: 60px; --rh: 340px; --tap: 46px; }
.trace__row { display: grid; grid-template-columns: repeat(5,1fr); position: relative;
  height: var(--rh); }
.trace__s { position: relative; }

.trace__lab { position: absolute; left: 0; width: calc(100% - var(--gap));
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px 14px; box-shadow: var(--lift-1); }
.trace__s--up   .trace__lab { top: 0; }
.trace__s--down .trace__lab { bottom: 0; }
.trace__lab .jb__t { font-size: var(--t-sm); }

/* the wiring */
.trace__w { position: absolute; background: var(--ink-4); opacity: 0.45; }
.trace__w--h { height: 1px; width: calc(var(--gap) / 2); }
.trace__w--v { width: 1px; }
.trace__j { position: absolute; width: 7px; height: 7px; border-radius: 99px;
  background: var(--paper); border: 1px solid var(--ink-4); translate: -50% -50%; }

@media (max-width: 1000px) {
  .trace__row { grid-template-columns: 1fr; height: auto; gap: var(--s3); }
  .trace__lab { position: static; width: auto; }
  .trace__w, .trace__j { display: none; }
}