/* ════════════════════════════════════════════════════════════
   THE RUN · /technology, under S.03 "We built our own agent system"
   2026-08-14.

   WHY THIS PAGE NEEDED IT. /tech already answers the "show, don't
   describe" brief five times over — the expertise directory runs real
   policy syntax, real Stripe statuses and real migration filenames,
   and changing the caller on the RLS panel genuinely drops the table
   from six rows to two. /technology had none of that. Its only motion
   was two ambient loops in the hero at 16s and 18s, both below the
   threshold at which anyone perceives them as motion at all, plus
   scroll reveals. The laptop screen now carries the hero; this
   carries the middle of the page.

   WHAT IT DISPLAYS, AND IT IS NOT A DECORATION. S.03's own three
   spec lines are: one branch per task, each on its own preview URL,
   human review before anything reaches production. Those were three
   bullets making a claim. This is the same three facts as the
   mechanic, running: branches cut in parallel, each building
   independently, each stopping dead at a review gate until a person
   clears it, and only then merging.

   NOTHING HERE IS INVENTED. There are no branch names, no task ids,
   no timings presented as measurements and no counters. The lanes are
   unlabelled because labelling them would mean either publishing this
   repo's ledger ids or making some up, and the argument does not need
   them — it needs the shape of the process, which is exactly what is
   drawn.

   MOTION (emil-design-eng)
   ────────────────────────
   · CSS transitions, not keyframes, on transform and opacity only.
     The stepper can be stopped and restarted at any point (tab hidden,
     scrolled away) and the lanes retarget from where they are instead
     of snapping back to zero.
   · 220ms ease-out on a step lighting up; 320ms on the connector
     filling. Both inside the sub-300ms band bar the connector, which
     is a travelling line rather than a UI response.
   · cubic-bezier(0.23, 1, 0.32, 1) — the built-in easings are too
     weak to read at this size.
   · THE REVIEW GATE DWELLS LONGER THAN EVERY OTHER STEP, ON PURPOSE.
     Machine steps hold 900ms, the human one holds 1700ms. That
     asymmetry is the argument the section is making, made in timing
     rather than in an adjective.
   · 420ms of stagger between lanes. At the 60ms this started on, the
     three lanes sat within a frame of each other and read as one
     animation drawn three times; the claim is that several tasks are
     in flight AT ONCE, which only shows if they are visibly at
     different stages.
   · Off-screen and hidden-tab both stop it. Under reduced motion it
     never starts and every lane renders complete, which is the
     honest end state rather than a blank diagram.
   ════════════════════════════════════════════════════════════ */

#tech-run {
  position: relative;
  width: 100%;
  background: #0a0a0a;
  border-top: 1px solid rgba(245,241,232,.09);
  border-bottom: 1px solid rgba(245,241,232,.09);
  --on-black: #f5f1e8;
  --trun-ease: cubic-bezier(0.23, 1, 0.32, 1);
}
#tech-run .trun__inner {
  width: 100%; max-width: 1140px; margin: 0 auto;
  padding: clamp(2.2rem, 5vw, 3.4rem) 1.5rem clamp(2.4rem, 5.5vw, 3.6rem);
}
#tech-run .trun__label {
  font-family: var(--font-mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(245,241,232,.56); margin: 0 0 1.6rem;
}

/* ── LANES ──────────────────────────────────────────────────── */
#tech-run .trun__lanes {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: clamp(.9rem, 2vw, 1.35rem);
}
#tech-run .trun__lane {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  align-items: center; gap: 1rem;
}
#tech-run .trun__lane-name {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(245,241,232,.4);
  white-space: nowrap;
}

/* The track: five nodes with a connector between each pair. */
#tech-run .trun__steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  align-items: start;
}
#tech-run .trun__step {
  position: relative;
  padding-top: 1.15rem;
  min-width: 0;
}
/* The connector, drawn from this node toward the next. scaleX from the
   left so it reads as travel rather than as a bar appearing. */
#tech-run .trun__step::before {
  content: ""; position: absolute;
  top: .3rem; left: 0; right: 0; height: 1px;
  background: rgba(245,241,232,.14);
}
#tech-run .trun__step::after {
  content: ""; position: absolute;
  top: .3rem; left: 0; right: 0; height: 1px;
  background: var(--red);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .32s var(--trun-ease);
}
#tech-run .trun__step:last-child::before,
#tech-run .trun__step:last-child::after { right: auto; width: 0; }

/* The node itself. Never animates from scale(0) — it is a 5px dot at
   rest and a filled 7px dot when the run has reached it. */
#tech-run .trun__dot {
  position: absolute; top: 0; left: 0;
  width: 7px; height: 7px;
  border: 1px solid rgba(245,241,232,.34);
  background: #0a0a0a;
  transform: scale(.86);
  transition: transform .22s var(--trun-ease),
              background .22s var(--trun-ease),
              border-color .22s var(--trun-ease);
}
#tech-run .trun__step > span:not(.trun__dot) {
  display: block;
  font-family: var(--font-mono); font-size: .6rem; line-height: 1.5;
  letter-spacing: .04em;
  color: rgba(245,241,232,.38);
  padding-right: .8rem;
  transition: color .22s var(--trun-ease);
}
/* T-1120: from 900px up this diagram has 1092px of track and was still
   setting its step labels at 9.6px, so the whole band read as a wide field
   of almost nothing. The track cannot get narrower without breaking the
   parallel-lanes argument, so the labels take the room instead. This is
   still a step BELOW the page's smallest body copy — it is not a walk-back
   of the sitewide type reduction. */
@media (min-width: 900px) {
  #tech-run .trun__step > span:not(.trun__dot) { font-size: .68rem; }
  #tech-run .trun__lane-name { font-size: .64rem; }
  #tech-run .trun__label { font-size: .66rem; }
}

/* ── REACHED ────────────────────────────────────────────────── */
#tech-run .trun__step.is-on .trun__dot {
  transform: scale(1);
  background: var(--red); border-color: var(--red);
}
#tech-run .trun__step.is-on > span:not(.trun__dot) { color: rgba(245,241,232,.82); }
#tech-run .trun__step.is-through::after { transform: scaleX(1); }

/* THE HUMAN GATE READS DIFFERENTLY FROM THE MACHINE STEPS.
   A hollow ring rather than a filled dot while it is waiting, because
   that is what is actually happening: the branch has stopped and
   nothing is running. It fills only once it is cleared. */
#tech-run .trun__step--gate .trun__dot { border-color: rgba(245,241,232,.5); }
#tech-run .trun__step--gate.is-on .trun__dot {
  background: #0a0a0a; border-color: var(--red);
}
#tech-run .trun__step--gate.is-through .trun__dot { background: var(--red); }
#tech-run .trun__step--gate > span:not(.trun__dot) { color: rgba(245,241,232,.5); }
#tech-run .trun__step--gate.is-on > span:not(.trun__dot) { color: var(--on-black); }

/* T-1120: .46 measured 4.24 / 4.25 / 4.26:1 at 390 / 768 / 1440 against the
   real painted ground (this band sits on ink with the page's red ember glow
   bleeding across it, so the ground is rgb(21,10,12) rather than flat
   #0a0a0a — which is why a flat-ink calculation had it passing). .58 puts
   the worst of the three at 5.7:1. Same hue, same token family, one step up
   the elevation scale. */
#tech-run .trun__foot {
  margin: 1.8rem 0 0;
  font-family: var(--font-mono); font-size: .64rem; line-height: 1.7;
  color: rgba(245,241,232,.58); max-width: 46rem;
}

/* ── NARROW ─────────────────────────────────────────────────────
   Five mono labels across 390px is four characters each. The lanes
   keep the track and drop the per-step wording to the two that carry
   the argument; the rest stay as nodes. */
@media (max-width: 720px) {
  #tech-run .trun__lane { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  #tech-run .trun__lane-name { font-size: .55rem; }
  #tech-run .trun__step > span:not(.trun__dot) { font-size: .52rem; padding-right: .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  /* No stepper runs at all (see js/tech-run.js). Every lane renders
     complete, which is the true end state — a blank diagram would be
     less honest than a finished one. */
  #tech-run .trun__dot,
  #tech-run .trun__step > span:not(.trun__dot),
  #tech-run .trun__step::after { transition: none !important; }
}