/* dev.css — §6 Development: the through-line (Variant A of the dev-layouts
   prototype; Variants B/C stay in experiments/dev-layouts, git keeps them).
   All palette/type/spacing/motion from style-lab/tokens.css.

   EVERY selector here is scoped under .dev (2026-08-13). The unscoped
   prototype names (.track, .board) collided with the reel's track and the
   evidence board in acts.css — a leaked margin/gap shoved the reel's image
   strip down inside its frame and broke its slide pitch, and the board
   inherited a Variant-B border-top. A section stylesheet must never carry
   an unscoped element or generic-name selector. The atmosphere/glow/label
   blocks the prototype carried "so it stands alone" are gone too: acts.css
   owns them on the merged page.

   Markers are squares/diamonds, never circles — the contract is hard-edged
   (--radius:0) and a round milestone dot would smuggle a pill back in. */

.dev{padding-top:calc(var(--space-section) * 1.6)}
.dev-throughline{--glow-x:30%}

/* SCOPED to .dev on merge (2026-08-01). As a bare `h2` this was harmless in the
   standalone prototype, where Development was the only section — but on the
   merged page it applied to EVERY heading. The 18ch cap clamped The World's
   headline and forced it onto a third line, adding 70px and quietly undoing
   part of that section's whole reason for being redesigned. A section
   stylesheet must never carry an unscoped element selector. */
.dev h2{text-wrap:balance;font-size:var(--text-h2);max-width:18ch}
.dev-note{
  margin:2.6rem 0 0;max-width:60ch;
  color:var(--ink-faint);font-size:calc(var(--text-body) * .88);
}

/* ============================================================
   THE THROUGH-LINE
   A single line runs through four stations. Done stations carry a
   filled diamond, the present carries an open pulsing diamond, and
   the line past the present fades out: the shape says "in motion".
   ============================================================ */
.dev .track{
  list-style:none;margin:clamp(3rem,6vw,4.5rem) 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1.1fr 1.4fr 1fr;
  gap:var(--space-gap);
}
.dev .node{position:relative;padding-top:2.6rem}
/* the line: solid behind done/now, fading past the present */
.dev .node::before{
  content:"";position:absolute;top:.4rem;left:0;right:calc(-1 * var(--space-gap));height:1px;
  background:color-mix(in srgb,var(--ink) 30%,transparent);
}
.dev .node:last-child::before{
  right:0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 30%,transparent),transparent);
}
/* the station marker: a hard-edged diamond, never a dot */
.dev .node::after{
  content:"";position:absolute;top:0;left:0;width:.8rem;height:.8rem;
  transform:rotate(45deg);
  background:var(--accent);
  transition:box-shadow var(--duration-ui) var(--ease),
             transform .35s var(--ease),
             background-color var(--duration-ui) var(--ease);
}
/* station hover — the diamond swells and throws a soft gold ring; the
   category warms with it. On the pulsing "now" station the ring animation
   owns box-shadow, so the swell alone carries the hover there. */
.dev .node:hover::after{
  transform:rotate(45deg) scale(1.3);
  box-shadow:0 0 0 .4rem color-mix(in srgb,var(--accent) 16%,transparent);
}
.dev .node.is-ahead:hover::after{background:color-mix(in srgb,var(--ink) 45%,transparent)}
.dev .node:hover .node-cat{color:var(--accent)}
.dev .node.is-now::after{
  background:transparent;
  border:1px solid var(--accent);
  box-shadow:0 0 0 .45rem color-mix(in srgb,var(--accent) 18%,transparent);
  animation:now-pulse 2.6s var(--ease) infinite alternate;
}
@keyframes now-pulse{
  from{box-shadow:0 0 0 .3rem color-mix(in srgb,var(--accent) 10%,transparent)}
  to{box-shadow:0 0 0 .6rem color-mix(in srgb,var(--accent) 24%,transparent)}
}
.dev .node.is-ahead::after{
  background:color-mix(in srgb,var(--ink) 25%,transparent);
  width:.55rem;height:.55rem;top:.12rem;
}
.dev .node-cat{
  display:block;margin-bottom:.9rem;
  transition:color var(--duration-ui) var(--ease);
  font-family:var(--font-display);font-size:calc(var(--text-label) * .9);font-weight:600;
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--ink-faint);
}
.dev .node.is-now .node-cat{color:var(--accent)}
.dev .node strong{
  font-family:var(--font-body);font-weight:600;
  font-size:var(--text-body);color:var(--ink);
}
.dev .node.is-done strong::before{content:"✓";color:var(--accent);margin-right:.55rem;font-family:var(--font-display)}
.dev .node ul{list-style:none;margin:0;padding:0;color:var(--ink);font-size:var(--text-body)}
.dev .node ul li{padding:.18rem 0}
.dev .node ul li::before{content:"—";color:var(--ink-faint);margin-right:.6rem}
.dev .node em{
  font-style:italic;color:var(--ink-faint);
  font-size:calc(var(--text-body) * .9);
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .dev .track{grid-template-columns:1fr;gap:0}
  .dev .node{padding:0 0 2.2rem 2.2rem}
  /* vertical line + diamond on the left */
  .dev .node::before{top:.4rem;bottom:calc(-1 * var(--space-gap));left:.35rem;right:auto;width:1px;height:auto}
  .dev .node:last-child::before{
    bottom:0;
    background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 30%,transparent),transparent);
  }
  .dev .node::after{top:.1rem;left:0}
  .dev .node.is-ahead::after{top:.22rem;left:.12rem}
  .dev .node-cat{margin-bottom:.4rem}
}

/* Reduced motion is handled by tokens.css (duration collapse). The pulse
   ring is the only extra; neutralise it here. */
@media (prefers-reduced-motion:reduce){
  .dev .node.is-now::after{animation:none;box-shadow:0 0 0 .45rem color-mix(in srgb,var(--accent) 18%,transparent)}
  .dev .node:hover::after{transform:rotate(45deg)}
}