/* ============================================================================
 * VOICEINSIGHTS DIAGRAM SYSTEM — the drawn language's colours and type
 * ----------------------------------------------------------------------------
 * Every value here resolves to a token style.css already owns, so both themes
 * work and the diagrams cannot drift from the rest of the site. Nothing is
 * hard-coded to a palette the design system does not control.
 *
 * Colour carries meaning and is never the only carrier: each role also has a
 * distinct position in the sequence and its own words, and the legend states
 * what each one means in text.
 * ========================================================================== */

.vi-diagram {
  --vi-d-surface: var(--surface);
  --vi-d-ink: var(--text);
  --vi-d-muted: var(--text-muted);
  --vi-d-line: var(--border-strong, var(--border));
  --vi-d-line-strong: var(--text-dim);
  /* Evidence is the emerald spine of the whole story. */
  --vi-d-evidence: var(--accent-2);
  --vi-d-evidence-soft: color-mix(in srgb, var(--accent-2) 9%, var(--surface));
  /* Governance is the restrained gold: the step that can refuse. */
  --vi-d-govern: var(--accent-text);
  --vi-d-govern-soft: color-mix(in srgb, var(--accent) 10%, var(--surface));
  /* An output is ink on the page. */
  --vi-d-output: var(--text-dim);
  --vi-d-output-soft: var(--surface-2);
  /* A decision is the darkest, because it is the point of all of it. */
  --vi-d-decision: var(--text);
  --vi-d-decision-soft: color-mix(in srgb, var(--text) 6%, var(--surface));

  display: block;
  margin: 0;
  container-type: inline-size;
}

.vi-d-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Two label weights only. Sizes are declared in px and never scale down: a
 * diagram that becomes unreadable at 390px has not been made responsive, it has
 * been made decorative. The LAYOUT changes on small screens instead. */
.vi-d-title { font-family: var(--font-body); font-size: 13px; font-weight: 650; letter-spacing: -.01em; }
.vi-d-cap { font-family: var(--font-body); font-size: 10.5px; font-weight: 450; }
.vi-d-cap-strong { font-family: var(--font-body); font-size: 11.5px; font-weight: 600; }

/* The text equivalent. Available to assistive technology and to anyone who
 * prefers the sequence as words; visually hidden because the drawing above says
 * the same thing. Not display:none — that would remove it from the accessible
 * tree, which is the opposite of the intent. */
.vi-d-alt {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* The legend: what the colours mean, in words. */
.vi-diagram-legend {
  display: flex; flex-wrap: wrap; gap: .55rem 1.1rem;
  margin-top: 1rem; padding: 0; list-style: none;
  font-size: .74rem; color: var(--text-muted);
}
.vi-diagram-legend li { display: inline-flex; align-items: center; gap: .4rem; }
/* A swatch, not a checkbox. An outlined empty square beside a word reads as a
 * control the reader can tick; the swatch has to carry the node's fill as well
 * as its stroke, because that is what it is standing for. */
.vi-diagram-legend i {
  width: 13px; height: 13px; border-radius: 3px; flex: none;
  border: 1.25px solid currentColor; background: var(--swatch-fill, transparent);
}
.vi-diagram-legend .is-evidence { color: var(--accent-2); --swatch-fill: color-mix(in srgb, var(--accent-2) 14%, var(--surface)); }
.vi-diagram-legend .is-govern { color: var(--accent-text); --swatch-fill: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.vi-diagram-legend .is-output { color: var(--text-dim); --swatch-fill: var(--surface-2); }
.vi-diagram-legend .is-decision { color: var(--text); --swatch-fill: color-mix(in srgb, var(--text) 10%, var(--surface)); }

/* Served markup a diagram has superseded. Present in the document and in the
 * page a visitor gets with no JavaScript; removed from view, and from the
 * accessible tree, only once the drawing has actually been produced. */
.vi-d-superseded { display: none; }

.vi-diagram-caption {
  margin: .85rem 0 0; font-size: .78rem; color: var(--text-muted); max-width: 62ch; line-height: 1.55;
}

/* A section that carries a diagram beside its prose. Falls to one column early,
 * because a diagram squeezed into half of a tablet is worse than a diagram
 * given the full width below the text. */
.vi-diagram-split {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 981px) {
  .vi-diagram-split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

/* Motion is opt-in and explains sequence: the connectors draw in the order the
 * process runs. It never delays reading — the diagram is complete and legible
 * from the first frame; only the stroke reveal is animated. */
@media (prefers-reduced-motion: no-preference) {
  /* Connectors declare pathLength="1", so the dash pattern is expressed in
   * fractions of the connector's own length and reveals a 46px arrow and a
   * 975px wrapping path identically. A literal dasharray cannot do this: 220
   * left every connector longer than 220px permanently broken into segments. */
  .vi-diagram[data-animate="true"] .vi-d-arrow line,
  .vi-diagram[data-animate="true"] .vi-d-arrow path {
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: vi-d-draw .5s ease forwards;
  }
  .vi-diagram[data-animate="true"] .vi-d-arrow:nth-of-type(1) { animation-delay: .05s; }
  .vi-diagram[data-animate="true"] .vi-d-arrow:nth-of-type(2) { animation-delay: .12s; }
  .vi-diagram[data-animate="true"] .vi-d-arrow:nth-of-type(3) { animation-delay: .19s; }
  .vi-diagram[data-animate="true"] .vi-d-arrow:nth-of-type(4) { animation-delay: .26s; }
  .vi-diagram[data-animate="true"] .vi-d-arrow:nth-of-type(5) { animation-delay: .33s; }
  @keyframes vi-d-draw { to { stroke-dashoffset: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .vi-diagram[data-animate="true"] .vi-d-arrow line,
  .vi-diagram[data-animate="true"] .vi-d-arrow path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
}

/* ---------- The living evidence line -------------------------------------
 * The signature mark: a waveform that resolves into evidence, then into a
 * decision. Drawn in CSS and one small SVG rather than a video, because a
 * background video is weight the next scale mission has to pay for. */
.vi-evidence-line { display: block; width: 100%; height: auto; overflow: visible; }
.vi-evidence-line .vel-wave { stroke: var(--accent-2); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.vi-evidence-line .vel-node { fill: var(--surface); stroke: var(--accent-2); stroke-width: 1.4; }
.vi-evidence-line .vel-node-verified { fill: color-mix(in srgb, var(--accent-2) 16%, var(--surface)); }
.vi-evidence-line .vel-rail { stroke: var(--border-strong, var(--border)); stroke-width: 1.1; stroke-dasharray: 3 5; }
.vi-evidence-line .vel-label { font-family: var(--font-body); font-size: 10px; fill: var(--text-muted); letter-spacing: .04em; text-transform: uppercase; }
.vi-evidence-line .vel-decision { fill: var(--accent-text); }

@media (prefers-reduced-motion: no-preference) {
  .vi-evidence-line .vel-pulse { animation: vel-pulse 3.4s ease-in-out infinite; transform-origin: center; }
  @keyframes vel-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
}

/* The band the living evidence line sits in: a quiet rule above and below, so
 * it reads as a transition between two sections rather than as a section of its
 * own competing with them. */
/* .pub-section sets a 112px block padding through a shorthand, which beats a
 * longhand at equal specificity — the band rendered 358px tall around a 132px
 * mark. Qualifying the selector wins the cascade without a !important. */
.pub-section.vi-evidence-band {
  padding-block: clamp(1.4rem, 3vw, 2.4rem);
  border-block: 1px solid var(--border);
}