/* Shared static SVG diagrams. Layouts share one accessible SVG per article. */
.diagram{margin:32px 0;padding:24px 0;border-top:1px solid var(--lex-line);border-bottom:1px solid var(--lex-line)}
.diagram>svg{display:block;width:100%;height:auto;aspect-ratio:var(--dg-wide);overflow:visible}
.diagram .dg-mobile{display:none}
.diagram .dg-box,.diagram .dg-panel{fill:none;stroke:var(--lex-line);stroke-width:1;vector-effect:non-scaling-stroke}
.diagram text{fill:var(--lex-text);font-size:16px}
.diagram .dg-head{font-weight:700;font-size:16px}
.diagram .dg-edge{fill:none;stroke:var(--lex-gold);stroke-width:1.3;vector-effect:non-scaling-stroke}
.diagram .dg-arrow{fill:var(--lex-gold)}
.diagram .dg-edge-label{fill:var(--lex-text);font-size:14px}
.diagram[data-topic="event-sourcing"] .dg-desktop text{font-size:14px}
.diagram figcaption{margin-top:18px;color:var(--lex-soft);font-size:.9rem;line-height:1.7}
@media(max-width:768px){
.diagram>svg{aspect-ratio:var(--dg-tall)}
.diagram .dg-desktop{display:none}
.diagram .dg-mobile{display:block;transform:var(--dg-map);transform-origin:0 0}
}

/* One warm gold outline guides attention; text remains high-contrast. */
.diagram .dg-accent{stroke:var(--warning);stroke-width:1.8}

/* Block 204: quantitative plots; scoped styles leave earlier diagrams unchanged. */
.quant-chart{margin:2rem 0;padding:1.4rem 0;border-top:1px solid var(--lex-line);border-bottom:1px solid var(--lex-line)}
.quant-chart .qc-kicker{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--lex-soft);margin:0 0 .65rem}
.quant-chart h3{font-size:1.2rem;line-height:1.35;margin:0 0 1rem;color:var(--lex-text)}
.quant-chart>svg{display:block;width:100%;max-width:560px;height:auto;margin:0 auto;overflow:visible;font-family:inherit}
.quant-chart svg text{fill:var(--lex-text);font-family:inherit;font-size:13px}
.quant-chart .qc-tick{font-size:12px}
.quant-chart .qc-axis-title,.quant-chart .qc-point-label{font-weight:650}
.quant-chart .qc-grid{stroke:var(--lex-line);stroke-width:.7}
.quant-chart .qc-axis{stroke:var(--lex-soft);stroke-width:1}
.quant-chart .qc-reference{stroke:var(--lex-soft);stroke-dasharray:4 4;stroke-width:1.2;fill:none}
.quant-chart .qc-series-green{stroke:var(--lex-gold);fill:var(--lex-gold)}
.quant-chart .qc-series-gold{stroke:var(--warning);fill:var(--warning)}
.quant-chart .qc-series-dark{stroke:var(--lex-text);fill:var(--lex-text)}
.quant-chart .qc-curve{fill:none;stroke-width:1.7}
.quant-chart .qc-fill-green{fill:var(--lex-gold)}
.quant-chart .qc-fill-gold{fill:var(--warning)}
.quant-chart .qc-bar-value{fill:var(--panel);font-weight:700}
.quant-chart .qc-gold-label{fill:var(--warning);font-weight:700}
.quant-chart .qc-green-label{fill:var(--lex-gold);font-weight:700}
.quant-chart .qc-legend{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;list-style:none;padding:0;margin:1rem 0;font-size:.86rem}
.quant-chart .qc-key{display:inline-block;width:1.2rem;border-top:3px solid;margin-right:.5rem;vertical-align:middle}
.quant-chart .qc-key-gold{border-color:var(--warning)}
.quant-chart .qc-key-green{border-color:var(--lex-gold)}
.quant-chart .qc-key-reference{border-color:var(--lex-soft);border-top-style:dashed}
.quant-chart figcaption,.quant-chart .qc-method{font-size:.9rem;color:var(--lex-soft);line-height:1.7}
.quant-chart .qc-method{margin-top:1rem}
.quant-chart .qc-method p{font-size:inherit}

/* Block 205: intervals encode observed minima/maxima, not uncertainty. */
.quant-chart .qc-range{stroke:var(--lex-gold);stroke-width:2;fill:none}
.quant-chart .qc-value-small{font-size:11px;font-weight:650}

/* Block 207: scoped editorial charts; existing process diagrams unchanged. */
.quant-chart.qc-polished{padding:1.2rem 0;margin:1.7rem 0}
.quant-chart.qc-polished>svg{max-width:480px;margin:.8rem auto 1rem}
.quant-chart.qc-polished h3{font-size:1.2rem;line-height:1.4;margin-bottom:.8rem}
.quant-chart.qc-polished svg text{font-size:11px}
.quant-chart.qc-polished .qc-label{font-size:12px;font-weight:550}
.quant-chart.qc-polished .qc-number{font-size:12px;font-weight:650}
.quant-chart.qc-polished .qc-secondary{font-size:10px;fill:var(--lex-soft)}
.quant-chart.qc-polished .qc-unit{font-size:10px;fill:var(--lex-soft);font-weight:550;letter-spacing:.02em}
.quant-chart.qc-polished .qc-grid{stroke-width:.6;opacity:.65}
.quant-chart.qc-polished figcaption{font-size:.82rem;line-height:1.6}

/* Block 211: dense editorial diagrams use slightly smaller desktop labels where needed. */
.diagram[data-topic="workflow-models"] .dg-desktop text,
.diagram[data-topic="process-patterns"] .dg-desktop text{font-size:14px}
.diagram[data-topic="workflow-engine"] .dg-desktop text{font-size:14px}

/* Block 212: source-backed event, RBAC and task-lifecycle diagrams. */
.diagram[data-topic="process-events"] .dg-desktop text,
.diagram[data-topic="role-based-control"] .dg-desktop text,
.diagram[data-topic="task-orchestration"] .dg-desktop text{font-size:14px}
.diagram[data-topic="role-based-control"] .dg-mobile text,
.diagram[data-topic="task-orchestration"] .dg-mobile text{font-size:15px}