/* Reviewed in-repository diagrams, never arbitrary SVG from the CMS. */
.article-diagram { width: 100%; max-width: 100%; min-width: 0; padding: 16px; border: 1px solid var(--border); background: var(--surface); }
.article-diagram svg { display: block; width: 100%; max-width: 100%; height: auto; font-family: var(--font-family); }
.article-diagram .diagram-mobile { display: none; }
.article-diagram figcaption { margin-top: 16px; white-space: pre-line; }
.article-diagram figcaption p { margin-top: 8px; }
.article-diagram .diagram-play { margin-top: 16px; font: inherit; color: var(--fg); background: var(--surface); border: 1px solid var(--border); padding: 6px 12px; cursor: pointer; }
.article-diagram .diagram-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.article-diagram .diagram-play[hidden] { display: none; }
@media (max-width: 799px) {
  .article-diagram { padding: 8px; }
  .article-diagram .diagram-wide { display: none; }
  .article-diagram .diagram-mobile { display: block; max-width: 480px; margin-inline: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .article-diagram.is-playing .diagram-node { animation: diagram-emphasis 800ms ease-out 1; }
  .article-diagram.is-playing .diagram-edge { animation: diagram-trace 800ms ease-out 1; }
  .article-diagram.is-playing .diagram-step-1 { animation-delay: 600ms; }
  .article-diagram.is-playing .diagram-step-2 { animation-delay: 1200ms; }
  .article-diagram.is-playing .diagram-step-3 { animation-delay: 1800ms; }
}
@keyframes diagram-emphasis { 0%,100% { opacity: 1; } 40% { opacity: .45; } }
@keyframes diagram-trace { from { stroke-dasharray: 8 8; stroke-dashoffset: 32; stroke: var(--accent); } to { stroke-dasharray: 8 8; stroke-dashoffset: 0; stroke: var(--accent); } }
@media (prefers-reduced-motion: reduce) {
  .article-diagram .diagram-node, .article-diagram .diagram-edge { animation: none !important; }
  .article-diagram .diagram-play { display: none; }
}