/*
  Per-product ICM workflow diagram.

  Loaded only on product pages that have an entry in inc/icm-workflow.php. The
  conditional enqueue is in functions.php, next to the long-product-page one.

  THE THREAD IS DRAWN ON THE LIST

  There is no SVG here and no second copy of the content. Each <li> carries its
  own node (::before) and its own connector to the next step (::after), so the
  diagram and the text are one DOM. Turning the diagram from horizontal to
  vertical is a change of flex-direction plus a swap of which axis the connector
  runs along. Nothing is positioned by coordinate, so nothing drifts.

  BREAKPOINT

  Horizontal above 1080px, vertical below it. Seven columns of prose need real
  width; a tablet gets the vertical rail rather than seven squeezed columns,
  and the vertical rail is the better reading experience anyway. The founder
  requirement is horizontal on desktop and vertical on mobile, and 1080px is
  where the horizontal version stops being readable rather than where a device
  category nominally starts.

  MOTION

  The connectors draw once, left to right, 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.
*/

/*
  NOT .si-icm. That class already belongs to the methodology page, where
  style.css uses it to set a 820px prose column and to step the headings
  down for a page with eleven H2s. Its comment says it is scoped so that
  nothing reaches another page, and that was true until this section
  borrowed the name: the diagram came out 820px wide inside a 1440px
  window, seven columns at 84px each, thirteen characters to a line.
  Found by measuring the rendered boxes, not by reading the markup.
*/
.si-icm-workflow {
  background: var(--si-off-white, #F4F6F8);
  padding: 5rem 1.5rem;
}

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

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

/* ── The derived maturity line ───────────────────────────────────────
   Tone comes from si_icm_maturity(). Green for built, orange for part
   built, muted for designed. Nothing here is typed into a template. */

.si-icm-maturity {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 2.75rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--si-radius-pill, 100px);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.si-icm-maturity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
}

.si-icm-maturity-built {
  background: rgba(70, 180, 145, 0.12);
  color: #24705a;
}
.si-icm-maturity-built .si-icm-maturity-dot { background: var(--si-emerald, #46B491); }

.si-icm-maturity-mixed {
  background: rgba(220, 116, 14, 0.12);
  color: #94500a;
}
.si-icm-maturity-mixed .si-icm-maturity-dot { background: var(--si-orange, #DC740E); }

.si-icm-maturity-designed {
  background: rgba(24, 44, 67, 0.08);
  color: var(--si-text-subtle-dark, #5a6d85);
}
.si-icm-maturity-designed .si-icm-maturity-dot { background: var(--si-text-muted, #8a9ab5); }

/* ── The thread ──────────────────────────────────────────────────────
   Vertical is the base case, because it is the one a phone gets and the
   one that needs no minimum width. Horizontal is the enhancement. */

.si-icm-thread {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.si-icm-step {
  position: relative;
  padding: 0 0 2.25rem 2.5rem;
}

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

/* The node. */
.si-icm-step::before {
  content: "";
  position: absolute;
  left: 0;
  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;
}

/* The connector to the next step. Drawn top to bottom. */
.si-icm-step::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.35rem;
  width: 2px;
  height: 100%;
  background: var(--si-prussian, #182C43);
  opacity: 0.22;
  transform-origin: top center;
  transform: scaleY(0);
  animation: si-icm-draw-y 0.5s ease-out forwards 1;
  animation-delay: calc(var(--si-icm-order, 0) * 0.09s);
}

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

/* The one seam. Orange, larger, filled: the same signal the homepage
   thread uses for the same thing, so a reader who saw one recognises
   the other. */
.si-icm-step.is-seam::before {
  width: 21px;
  height: 21px;
  left: -4px;
  top: 0.1rem;
  background: var(--si-orange, #DC740E);
  border-color: var(--si-orange, #DC740E);
  box-shadow: 0 0 0 5px rgba(220, 116, 14, 0.16);
}

.si-icm-kind {
  margin: 0 0 0.35rem;
  font-family: var(--si-font-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--si-text-subtle-dark, #5a6d85);
}

.si-icm-seam-flag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  border-radius: var(--si-radius-pill, 100px);
  background: rgba(220, 116, 14, 0.14);
  color: #94500a;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
}

.si-icm-step-label {
  margin: 0 0 0.5rem;
  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-icm-step.is-seam .si-icm-step-label {
  color: #94500a;
}

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

/* Per-step badge. Rendered only where a workflow is part built and part
   designed, so this rule is dormant on most pages. */
.si-icm-step-evidence {
  display: inline-block;
  margin: 0.7rem 0 0;
  padding: 0.15rem 0.55rem;
  border-radius: var(--si-radius-sm, 6px);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.si-icm-evidence-built {
  background: rgba(70, 180, 145, 0.14);
  color: #24705a;
}

.si-icm-evidence-designed {
  background: rgba(24, 44, 67, 0.08);
  color: var(--si-text-subtle-dark, #5a6d85);
}

/* ── Scope line and attribution ──────────────────────────────────── */

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

/* ── The methodology note is deliberately not restyled here ──────────
   style.css already styles .si-icm-attribution, its paragraphs and its
   label, because the methodology page at /how-we-build/interpretable-
   context/ renders the same block with the same class names. It loads on
   every page, so those rules reach this section too.

   Restyling them here was the first version and it was wrong twice over.
   It made the same credit look like two different components on two
   pages, and it lost a specificity contest without saying so: style.css
   scopes the label as `.si-icm-attribution .si-icm-note-title`, which
   beats a bare `.si-icm-note-title` whatever the load order. Half the
   overrides applied and half did not, which is the worst of both.

   Only the link below is new markup, so it is the only thing added. */

.si-icm-note-link a {
  color: var(--si-accent, #0078D4);
  font-weight: 600;
}

/* ── Horizontal, on a desktop only ───────────────────────────────────
   FOUR ACROSS, NOT SEVEN

   The first version put all seven steps in one row. It was unreadable and
   measuring it said so: 84 to 104 pixels a column, about thirteen
   characters to a line, columns between 450 and 872 pixels tall for
   bodies of 30 to 66 words. Seven abreast needs roughly 2300 pixels
   before the measure stops fighting the reader, and no desktop has it.

   So the thread wraps, four then three, and reads left to right and then
   down, the same order as the sentence you are reading now. That keeps
   the founder requirement (horizontal on a desktop, vertical on a phone)
   and keeps a column wide enough to hold a sentence. The rail is drawn
   inside each row, so the connector stops at the end of a row rather
   than pointing off the right edge at nothing. */

@media (min-width: 1080px) {

  .si-icm-thread {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    column-gap: 0;
    row-gap: 2.75rem;
    margin-bottom: 3rem;
  }

  .si-icm-step {
    padding: 3.25rem 1.5rem 0 0;
  }

  /* The fourth step ends the first row and the seventh ends the diagram.
     Neither has a next step beside it. */
  .si-icm-step:nth-child(4n),
  .si-icm-step:last-child {
    padding-right: 0;
  }

  .si-icm-step:nth-child(4n)::after {
    display: none;
  }

  /* The node moves onto a rail above the text. */
  .si-icm-step::before {
    left: 0;
    top: 1.25rem;
  }

  /* The connector now runs left to right. It spans the full column so
     the rail is continuous across the band, and it stops before the
     last node rather than running off the right edge. */
  .si-icm-step::after {
    left: 6px;
    top: calc(1.25rem + 5px);
    width: 100%;
    height: 2px;
    transform-origin: left center;
    transform: scaleX(0);
    animation-name: si-icm-draw-x;
  }

  .si-icm-step.is-seam::before {
    left: -4px;
    top: 1rem;
  }

  .si-icm-step.is-seam::after {
    left: 13px;
  }

  .si-icm-step-label {
    font-size: 1rem;
  }

  /* Set back up to 14px now the column is wide enough to earn it. The
     13px in the seven-across version was an attempt to buy lines that
     were never going to be long enough to matter. */
  .si-icm-step-body {
    font-size: 0.875rem;
    line-height: 1.6;
  }

  .si-icm-kind {
    font-size: 0.6875rem;
  }

  /* The seam flag wraps under the kind label in a narrow column. */
  .si-icm-seam-flag {
    display: block;
    margin: 0.3rem 0 0;
    width: fit-content;
  }
}

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

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

/*
  The finished diagram, immediately. Not a reduced one: a person who has
  asked the operating system to stop moving things should see the same
  seven steps joined by the same thread, just without watching it happen.
*/
@media (prefers-reduced-motion: reduce) {
  .si-icm-step::after {
    animation: none;
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 1080px) {
  .si-icm-step::after {
    transform: scaleX(1);
  }
}

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

@media (max-width: 400px) {
  .si-icm-workflow {
    padding: 3.5rem 1.125rem;
  }

  .si-icm-step {
    padding-left: 2.125rem;
    padding-bottom: 2rem;
  }

  .si-icm-lede {
    font-size: 1rem;
  }

  .si-icm-step-body {
    font-size: 0.9375rem;
  }
}