/*
  Cross-product flow diagrams.

  Loaded only on the pages that render one. The conditional enqueue is in
  functions.php, beside the ICM workflow one.

  THE RAIL IS DRAWN ON THE LIST

  No SVG, no canvas, no script, no second copy of the content. Each <li> draws
  its own connector (::after) and its step draws its own node
  (.si-flow-step-main::before), so the diagram and the text are one DOM.

  WHY THE NODE IS ON THE STEP AND NOT ON THE ITEM

  On an edge flow each item opens with the crossing into it and then names the
  step. If the node sat on the item it would land beside the crossing, marking
  the arrow as though it were a stage. Putting it on .si-flow-step-main puts the
  dot on the step and leaves the crossing sitting along the connector between
  two dots, which is where a crossing belongs.

  VERTICAL AT EVERY WIDTH

  icm-workflow.css flips to horizontal above 1080px. This does not, and the
  reasoning is in the header of template-parts/portfolio-flow.php: eight steps
  rather than a fixed seven, and a labelled crossing between every pair on the
  edge flows. Above 1080px the rail stays vertical and each step widens into a
  label column and a prose column instead. A vertical rail has no minimum
  width, so there is no breakpoint at which it can overflow.

  EVERY GRID TRACK IS minmax(0, ...)

  Deliberate, not stylistic. A grid column defaults to a min-content floor, so
  one long unbroken token in a body paragraph pushes the track wider than its
  share and the section scrolls sideways. minmax(0, ...) removes the floor.
  This is what the no-horizontal-overflow tests at 320px are checking.

  MOTION

  The connectors draw once, top to bottom, and stop. Every animation is
  `1 forwards`. No loops, no scroll listeners, no script. Under
  prefers-reduced-motion the drawn state is applied with no animation at all,
  which is the finished diagram rather than a degraded one.
*/

.si-flow {
  padding: 4.5rem 1.5rem;
  background: var(--si-white, #fff);
  border-top: 1px solid rgba(24, 44, 67, 0.09);
}

.si-flow-inner {
  max-width: 1180px;
}

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

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

/* ── The sequence in one sentence ────────────────────────────────────
   Visible copy rather than a visually-hidden span. It is the text
   equivalent of the diagram and also the thing a reader wants first,
   and those are the same sentence. */

.si-flow-summary {
  max-width: 78ch;
  margin: 0 0 2.5rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid rgba(24, 44, 67, 0.18);
  background: var(--si-off-white, #F4F6F8);
  border-radius: 0 var(--si-radius-sm, 6px) var(--si-radius-sm, 6px) 0;
}

.si-flow-summary-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--si-text-body-dark, #4a5e78);
}

/* ── The rail ────────────────────────────────────────────────────── */

.si-flow-steps {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.si-flow-step {
  position: relative;
  min-width: 0;
  padding: 0 0 2.25rem 2.5rem;
}

.si-flow-step:last-child {
  padding-bottom: 0;
}

/* The connector, running the height of the item. */
.si-flow-step::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.35rem;
  width: 2px;
  height: 100%;
  background: var(--si-prussian, #182C43);
  opacity: 0.2;
  transform-origin: top center;
  transform: scaleY(0);
  animation: si-flow-draw 0.5s ease-out forwards 1;
  animation-delay: calc(var(--si-flow-order, 0) * 0.08s);
}

.si-flow-step:last-child::after {
  display: none;
}

/* The node, on the step rather than on the item. */
.si-flow-step-main {
  position: relative;
  min-width: 0;
}

.si-flow-step-main::before {
  content: "";
  position: absolute;
  left: -2.5rem;
  top: 0.35rem;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--si-white, #fff);
  border: 3px solid var(--si-prussian, #182C43);
  box-sizing: border-box;
  z-index: 1;
}

@keyframes si-flow-draw {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ── The crossing, on edge flows ─────────────────────────────────── */

.si-flow-arrival {
  min-width: 0;
  margin: 0 0 1.25rem;
  padding: 0 0 0 0.25rem;
}

/*
  There is deliberately no rule hiding an arrival on the first step. Nothing
  arrives at the start of a sequence, so the template emits no arrival there and
  this stylesheet has nothing to suppress. A `display: none` here would look like
  insurance and behave like a cover-up: si_flow_text_equivalent() reads the data
  rather than the markup, so a flow that wrongly declared an arrival on its first
  node would still name it in the summary sentence while the diagram silently
  dropped it, and the text equivalent would no longer describe the diagram. That
  belongs in a failing test, not in a hidden div.
*/

.si-flow-arrival-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.4rem;
}

.si-flow-arrival-mark {
  color: var(--si-text-subtle-dark, #5a6d85);
  opacity: 0.6;
  font-size: 0.875rem;
}

.si-flow-arrival-label {
  min-width: 0;
  font-family: var(--si-font-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--si-text-subtle-dark, #5a6d85);
}

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

/* ── The step ────────────────────────────────────────────────────── */

.si-flow-step-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin: 0 0 0.5rem;
}

.si-flow-step-label {
  min-width: 0;
  margin: 0;
  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-flow-step-detail {
  min-width: 0;
}

.si-flow-step-body {
  max-width: 68ch;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--si-text-body-dark, #4a5e78);
}

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

/* 12px for the same reason as the dt labels above, and this one was 10px.

   "Still planned" is the tag that stops a reader taking a step for something
   that works today. A maturity disclosure set in the smallest type on the page
   is a disclosure designed to be missed, which defeats the point of writing it.
   The brief requires the maturity of every edge to be legible, so the tag holds
   the same 12px floor as everything else here. */
.si-flow-note-tag {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0.1rem 0.5rem;
  border-radius: var(--si-radius-pill, 100px);
  background: rgba(24, 44, 67, 0.08);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--si-text-subtle-dark, #5a6d85);
}

/* ── State badges ────────────────────────────────────────────────────
   The word carries the meaning, the glyph carries it a second time by
   shape, and the colour is third. Removing the stylesheet removes the
   colour and the shape and keeps the word. Same four colours as
   icm-workflow.css, because they are the same four states. */

/* 12px, and this is the badge the whole diagram turns on.

   Planned, Simulated, Gated and Available are the words that separate a claim
   about what the software does today from a claim about what it is intended to
   do. Setting them at 11px put the maturity of every edge in smaller type than
   the description of the edge, which reads as a footnote to the capability
   rather than a qualification of it.

   icm-workflow.css sets its equivalent badge at 11px and stays there: those
   classes are in this test's exempt list and belong to open work on another
   branch, so they are not restyled here. The two diagrams therefore differ by
   1px until that is reconciled, which is recorded in the evidence packet rather
   than fixed by editing files this branch does not own. */
.si-flow-state {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--si-radius-sm, 6px);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.si-flow-state-glyph {
  font-size: 0.8125rem;
  line-height: 1;
}

.si-flow-state-available {
  background: rgba(70, 180, 145, 0.14);
  color: #24705a;
}

.si-flow-state-gated {
  background: rgba(220, 116, 14, 0.13);
  color: #8a4708;
}

.si-flow-state-simulated {
  background: rgba(0, 120, 212, 0.11);
  color: #10508a;
}

/* Same pill background as the ICM state badges and the same 4.23 miss. */
.si-flow-state-planned {
  background: rgba(24, 44, 67, 0.08);
  color: var(--si-text-subtle-aa, #546685);
}

/* ── Scope, the no-state reason, disclosures, approval ───────────── */

.si-flow-no-state,
.si-flow-scope {
  max-width: 74ch;
  margin: 0 0 1.5rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--si-text-subtle-dark, #5a6d85);
}

.si-flow-sub {
  margin: 0 0 0.9rem;
  font-family: var(--si-font-display, system-ui, sans-serif);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--si-text-strong, #182C43);
}

.si-flow-disclosures {
  margin: 0 0 2.5rem;
  padding: 1.5rem;
  border: 1px solid rgba(24, 44, 67, 0.1);
  border-radius: var(--si-radius-sm, 6px);
  background: var(--si-off-white, #F4F6F8);
}

.si-flow-disclosure-list {
  margin: 0;
  padding: 0 0 0 1.1rem;
  max-width: 74ch;
}

.si-flow-disclosure-list li {
  margin: 0 0 0.55rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--si-text-body-dark, #4a5e78);
}

.si-flow-disclosure-list li:last-child {
  margin-bottom: 0;
}

.si-flow-approval {
  margin: 0;
  padding: 1.75rem;
  border: 1px solid rgba(24, 44, 67, 0.1);
  border-radius: var(--si-radius-sm, 6px);
}

.si-flow-approval-list {
  margin: 0;
}

.si-flow-approval-row {
  min-width: 0;
  padding: 0.9rem 0;
  border-top: 1px solid rgba(24, 44, 67, 0.08);
}

.si-flow-approval-row:first-child {
  padding-top: 0;
  border-top: 0;
}

/* 12px, not 11px, and the floor rather than a preference.

   These dt labels name the six things the approval model has to answer: what
   the person reviews, which version they approve, what becomes possible, what
   invalidates it, how failure is detected, and how recovery or escalation
   works. They were 0.6875rem, which is 11px, uppercase, mono, letter-spaced
   and in a subtle grey, and at 320px that combination is the least legible
   text on the page attached to the most load-bearing content on it.

   simple-merge-mobile.spec.ts caught it: no body text below 12px except four
   named upstream classes it deliberately exempts. 0.75rem matches
   .si-section-label in si-theme.css, which is the house size for an uppercase
   eyebrow, so this is the design system's value rather than a number picked to
   clear a threshold. */
.si-flow-approval-row dt {
  min-width: 0;
  margin: 0 0 0.35rem;
  font-family: var(--si-font-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--si-text-subtle-dark, #5a6d85);
}

.si-flow-approval-row dd {
  min-width: 0;
  max-width: 74ch;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--si-text-body-dark, #4a5e78);
}

.si-flow-approval-caveat {
  max-width: 74ch;
  margin: 1.25rem 0 0;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--si-orange, #DC740E);
  background: rgba(220, 116, 14, 0.07);
  font-size: 0.875rem;
  line-height: 1.6;
  color: #8a4708;
}

/* ── Compact entry point ─────────────────────────────────────────────
   The homepage form. A bordered card rather than a full section,
   because it sits inside the portfolio section rather than beside it,
   and no rail: it is a summary that links to the diagram, and drawing
   a second smaller rail would make it read as the diagram itself. */

.si-flow-entry {
  max-width: 74ch;
  margin: 2.5rem 0 0;
  padding: 1.5rem;
  border: 1px solid rgba(24, 44, 67, 0.12);
  border-radius: var(--si-radius-sm, 6px);
  background: var(--si-off-white, #F4F6F8);
}

.si-flow-entry-title {
  margin: 0 0 0.75rem;
  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-flow-entry-text,
.si-flow-entry-seam {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--si-text-body-dark, #4a5e78);
}

.si-flow-entry-seam {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: var(--si-text-subtle-dark, #5a6d85);
}

.si-flow-entry-list {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.si-flow-entry-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.si-flow-entry-label {
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--si-text-body-dark, #4a5e78);
}

.si-flow-entry-link {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
}

/* ── Wider than 1080px: two columns per step, rail unchanged ─────── */

@media (min-width: 1080px) {
  .si-flow {
    padding: 5.5rem 2rem;
  }

  .si-flow-step-main {
    display: grid;
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    gap: 0 2.5rem;
    align-items: start;
  }

  .si-flow-step-head {
    margin-bottom: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .si-flow-arrival {
    padding-left: 0;
  }

  .si-flow-approval-row {
    display: grid;
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    gap: 0 2.5rem;
    align-items: start;
  }

  .si-flow-approval-row dt {
    margin-bottom: 0;
    padding-top: 0.2rem;
  }
}

/* ── Reduced motion ──────────────────────────────────────────────────
   The finished diagram, applied at once. Not a smaller diagram and not
   a diagram with a step missing. */

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