/* Vignelli system rules: a single two-pixel line, five-pixel nodes, and a restrained route palette. */
.system-diagram {
  margin: 0;
  padding: 24px 0;
  border-top: 1px solid var(--champagne);
  border-bottom: 1px solid var(--champagne);
}

.system-diagram svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  background: var(--paper);
}

.system-diagram .diagram-mobile { display: none; }
.system-diagram .route,
.system-diagram .rail,
.system-diagram .branch,
.system-diagram .leader,
.system-diagram .gate-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.system-diagram .route-main { stroke: var(--gold); }
.system-diagram .branch-exception { stroke: var(--teal); }
.system-diagram .node { fill: var(--ink); }
.system-diagram .node-main { fill: var(--gold); }
.system-diagram .node-exception { fill: var(--teal); }
.system-diagram .decision { fill: var(--paper); stroke: var(--ink); stroke-width: 2; stroke-linejoin: miter; }
.system-diagram .gate { fill: var(--paper); stroke: var(--gold); stroke-width: 2; }
.system-diagram text {
  fill: var(--ink);
  font-family: "Jost", sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .01em;
}
.system-diagram .diagram-label { font-size: 12px; fill: var(--ink); }
.system-diagram .diagram-label-muted { font-size: 12px; fill: var(--ink); }
.system-diagram .diagram-label-gold { fill: var(--gold); font-weight: 500; }
.system-diagram .diagram-label-teal { fill: var(--teal); font-weight: 500; }
.system-diagram .gate-label { fill: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: .08em; }
.diagram-copy { margin: 20px 0 0; padding-left: 20px; }
.diagram-copy li + li { margin-top: 9px; }

/* Content is visible before enhancement. JS only opts an observed diagram into the reveal. */
.system-diagram.is-enhanced .diagram-reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 480ms ease, transform 480ms ease;
}
.system-diagram.is-enhanced .route,
.system-diagram.is-enhanced .rail,
.system-diagram.is-enhanced .branch,
.system-diagram.is-enhanced .leader,
.system-diagram.is-enhanced .gate-line {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  transition: stroke-dashoffset 680ms ease;
}
.system-diagram.is-enhanced.is-visible .diagram-reveal { opacity: 1; transform: translateY(0); }
.system-diagram.is-enhanced.is-visible .route,
.system-diagram.is-enhanced.is-visible .rail,
.system-diagram.is-enhanced.is-visible .branch,
.system-diagram.is-enhanced.is-visible .leader,
.system-diagram.is-enhanced.is-visible .gate-line { stroke-dashoffset: 0; }
.system-diagram.is-enhanced.is-visible .diagram-reveal:nth-child(2) { transition-delay: 90ms; }
.system-diagram.is-enhanced.is-visible .diagram-reveal:nth-child(3) { transition-delay: 180ms; }
.system-diagram.is-enhanced.is-visible .diagram-reveal:nth-child(4) { transition-delay: 270ms; }

@media (max-width: 700px) {
  .system-diagram { padding: 20px 0; }
  .system-diagram .diagram-desktop { display: none; }
  .system-diagram .diagram-mobile { display: block; }
  .system-diagram text { font-size: 14px; }
  .system-diagram .diagram-label,
  .system-diagram .diagram-label-muted,
  .system-diagram .gate-label { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .system-diagram.is-enhanced .diagram-reveal { opacity: 1; transform: none; transition: none; }
  .system-diagram.is-enhanced .route,
  .system-diagram.is-enhanced .rail,
  .system-diagram.is-enhanced .branch,
  .system-diagram.is-enhanced .leader,
  .system-diagram.is-enhanced .gate-line { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
}

/* --- Legibility fix (post-build QA) ---------------------------------
   Measured in a browser at 375/768/820/1280.

   Two faults were found and corrected here.

   1. The wide horizontal diagram sat inside the 2fr prose column and
      was scaled to ~0.61, dropping labels to 7-9 effective pixels.
      It now breaks out to the full .case-section width. The offsets
      mirror the grid in site.css: 1fr 2fr with a 36px gap above 900px.

   2. The horizontal diagram was being shown from 701px upward, where
      a 1060-unit viewBox still only had ~707px to live in (9 effective
      pixels). The vertical diagram now covers everything up to 900px,
      and the horizontal one appears only above 1060px, the point
      at which it finally renders near full size.

   The vertical diagram is capped so it does not balloon on a tablet. */

@media (max-width: 1060px) {
  .system-diagram .diagram-desktop { display: none; }
  .system-diagram .diagram-mobile { display: block; max-width: 380px; margin-inline: auto; }
}

@media (min-width: 1061px) {
  .prose > .system-diagram {
    margin-left: calc(-50% - 36px);
    width: calc(150% + 36px);
    max-width: none;
  }
  /* The step list aligns with the diagram so the two read as one block. */
  .prose > .diagram-copy {
    margin-left: calc(-50% - 36px);
    width: calc(150% + 36px);
    max-width: none;
  }
  /* The note that follows the list belongs to the same block. */
  .prose > .diagram-copy + p {
    margin-left: calc(-50% - 36px);
    width: calc(150% + 36px);
    max-width: none;
  }
  .prose > .diagram-copy > li,
  .prose > .diagram-copy + p { max-width: 84ch; }
  /* At a ~0.95 render scale these land between 12.8 and 14.3 real pixels. */
  .system-diagram .diagram-desktop text { font-size: 15px; }
  .system-diagram .diagram-desktop .diagram-label,
  .system-diagram .diagram-desktop .diagram-label-muted { font-size: 13.5px; }
  .system-diagram .diagram-desktop .gate-label { font-size: 14px; }
}