/*
  The product milestone rail.

  Loaded only on product pages whose entry places the product on the scale.
  The conditional enqueue is in functions.php, next to the ICM one, and is
  keyed on si_product_rail() rather than on a template choice, because both
  product templates render the section.

  THE TRACK IS THE LIST

  Same approach as assets/icm-workflow.css and for the same reason: no SVG, no
  second copy of the content, no coordinates. Each <li> draws its own marker
  (.si-rail-marker) and its own connector to the next node (::after). Turning
  the rail from horizontal to vertical is a change of flex-direction and a swap
  of which axis the connector runs along, so nothing drifts at any width and
  there is only one DOM for a screen reader to read.

  BREAKPOINT

  Horizontal above 900px, vertical below. Five short columns need less width
  than the ICM diagram's seven, which is why this breaks at 900px and that one
  breaks at 1080px. Below 900px the vertical rail is the better read anyway.

  THREE SIGNALS, NOT ONE

  Completed nodes are solid Ocean Green with a tick. The current node is a ring
  with a soft steady glow. Future nodes are a hollow neutral outline. Each also
  carries a word in the markup, so none of this is load-bearing: strip the CSS
  and the list still says Done, Done, Done, Now, Not started.

  MOTION

  One property animates: the connector's scale, once, on load, `1 forwards`.
  Nothing pulses and nothing loops. The current node's glow is a static
  box-shadow, not an animation. Under prefers-reduced-motion the connectors are
  simply drawn.
*/

.si-milestone-rail {
  background: var(--si-off-white, #F4F6F8);
  padding: 4.5rem 1.5rem;
}

.si-milestone-rail .si-section-title {
  margin-bottom: 1.25rem;
}

.si-rail-lede {
  max-width: 62ch;
  margin: 0 0 2.5rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--si-text-body-dark, #4a5e78);
}

/* ── The track ───────────────────────────────────────────────────── */

.si-rail-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.si-rail-node {
  position: relative;
  padding: 0 0 2rem 3.25rem;
}

.si-rail-node:last-child {
  padding-bottom: 0;
}

/* The marker. A 20px box on both axes so the connector can be centred on it
   without measuring anything. */
.si-rail-marker {
  position: absolute;
  top: 0.2rem;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-sizing: border-box;
}

/* The connector to the next node. Drawn from the marker, not from the box, so
   the line meets the circle at both ends. */
.si-rail-node::after {
  content: '';
  position: absolute;
  top: 1.65rem;
  left: 9px;
  width: 2px;
  height: calc(100% - 1.65rem);
  background: var(--si-emerald, #46B491);
  transform: scaleY(0);
  transform-origin: top center;
  animation: si-rail-draw 0.45s ease-out forwards 1;
  animation-delay: calc(var(--si-rail-order, 0) * 0.09s);
}

.si-rail-node:last-child::after {
  display: none;
}

/* A connector out of an unfinished node is not a path anyone has walked. */
.si-rail-node.is-current::after,
.si-rail-node.is-future::after {
  background: rgba(24, 44, 67, 0.16);
}

@keyframes si-rail-draw {
  to { transform: scaleY(1); }
}

/* ── Node states ─────────────────────────────────────────────────── */

/* Complete: solid Ocean Green with a tick drawn in the marker box. The tick is
   a rotated rectangle border rather than a glyph, so it cannot be swapped by a
   missing font and it is not read out by a screen reader on its way past. */
.si-rail-node.is-complete .si-rail-marker {
  background: var(--si-emerald, #46B491);
  border: 2px solid var(--si-emerald, #46B491);
}

.si-rail-node.is-complete .si-rail-marker::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 3px;
  width: 5px;
  height: 9px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Current: a ring, and one soft steady glow on the page. No pulse. */
.si-rail-node.is-current .si-rail-marker {
  background: var(--si-white, #FFFFFF);
  border: 3px solid var(--si-emerald, #46B491);
  box-shadow: 0 0 0 5px rgba(70, 180, 145, 0.18);
}

/* Future: a hollow neutral outline. Not green, not grey-green, not a tint of
   the accent. Nothing about it should read as partially done. */
.si-rail-node.is-future .si-rail-marker {
  background: transparent;
  border: 2px solid rgba(24, 44, 67, 0.24);
}

/* ── Node contents ───────────────────────────────────────────────── */

.si-rail-word {
  display: inline-block;
  margin-bottom: 0.35rem;
  font-family: var(--si-font-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--si-text-subtle-dark, #5a6d85);
}

.si-rail-node.is-complete .si-rail-word {
  color: #2f7d64;
}

.si-rail-node.is-current .si-rail-word {
  color: var(--si-prussian, #182C43);
  font-weight: 600;
}

.si-rail-label {
  margin: 0 0 0.35rem;
  font-family: var(--si-font-display, system-ui, sans-serif);
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--si-text-strong, #182C43);
}

.si-rail-node.is-future .si-rail-label {
  color: var(--si-text-subtle-dark, #5a6d85);
}

.si-rail-blurb {
  margin: 0;
  max-width: 44ch;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--si-text-body-dark, #4a5e78);
}

.si-rail-node.is-future .si-rail-blurb {
  color: var(--si-text-subtle-dark, #5a6d85);
}

/* ── Trailing prose ──────────────────────────────────────────────── */

.si-rail-note {
  margin: 2.5rem 0 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--si-orange, #DC740E);
  background: rgba(220, 116, 14, 0.06);
  max-width: 68ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--si-text-body-dark, #4a5e78);
}

.si-rail-scope {
  margin: 2rem 0 0;
  max-width: 68ch;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--si-text-subtle-dark, #5a6d85);
}

/* ── Horizontal above 900px ──────────────────────────────────────── */

@media (min-width: 900px) {
  .si-rail-track {
    flex-direction: row;
    align-items: flex-start;
  }

  .si-rail-node {
    flex: 1 1 0;
    padding: 3rem 1.25rem 0 0;
  }

  .si-rail-node:last-child {
    padding-right: 0;
  }

  .si-rail-marker {
    top: 0;
    left: 0;
  }

  .si-rail-node::after {
    top: 9px;
    left: 26px;
    width: calc(100% - 26px);
    height: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    animation-name: si-rail-draw-x;
  }

  @keyframes si-rail-draw-x {
    to { transform: scaleX(1); }
  }

  .si-rail-blurb {
    max-width: none;
  }
}

/* ── Reduced motion ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .si-rail-node::after {
    animation: none;
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 900px) {
  .si-rail-node::after {
    transform: scaleX(1);
  }
}

/* ── Small phones ────────────────────────────────────────────────── */

@media (max-width: 400px) {
  .si-milestone-rail {
    padding: 3.5rem 1rem;
  }

  .si-rail-node {
    padding-left: 2.75rem;
  }
}