/* Diagrams adapt their geometry rather than shrinking their labels. */
.explanatory-diagram { margin:2.7rem 0 3.3rem; break-inside:avoid; }
.workflow .explanatory-diagram > h3 { font:500 clamp(1.4rem,2.3vw,1.85rem)/1.3 var(--font-sans); letter-spacing:-.025em; max-width:48ch; margin:0 0 1.5rem; text-wrap:pretty; }
.diagram-canvas { container-type:inline-size; padding:1.2rem 0; border-block:1px solid #d6e0d9; background:#fff; }
.diagram-svg { font-family:var(--font-sans); display:block; width:100%; height:auto; overflow:visible; }
.diagram-small { max-width:400px; margin:0 auto; }.diagram-wide { display:none; }
.diagram-caption { font-size:1rem; line-height:1.65; max-width:80ch; color:#42594d; margin:1rem 0 0; }
.workflow-notes { margin-top:2rem; border-block:1px solid #d6e0d9; padding:1.2rem 0; }
.workflow-notes > summary { font-size:1rem; font-weight:600; color:#17675d; cursor:pointer; }
.workflow-notes[open] > summary { margin-bottom:2rem; }
.workflow-notes > .workflow { border:0; margin:0; padding:0; }
.diagram-nav { display:flex; flex-wrap:wrap; gap:.8rem 1.5rem; margin:1.5rem 0 2rem; font-size:1rem; }
.diagram-nav a { text-decoration:underline; text-underline-offset:.3em; color:#17675d; padding:.35rem 0; }
.explanatory-diagram h3, [id$="-records"] { scroll-margin-top:2rem; }
@container (min-width:800px) { .diagram-wide { display:block; }.diagram-small { display:none; } }
@media print { .diagram-wide { display:block; }.diagram-small { display:none; }.workflow-notes { display:none; } }