/* Figure captions and controls stay in the reading column while the drawing scrolls. */
.paper-diagram{overflow:visible!important;scroll-margin-top:84px}
.paper-diagram>figcaption{position:static}
.paper-diagram>figcaption::before{content:none!important}
.diagram-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px;font:13px/1.45 var(--sans)}
.diagram-hint{color:var(--muted);flex:1 1 180px}
.diagram-open,.diagram-dialog button{font:600 13px/1.35 var(--sans);color:var(--ink);background:var(--white);border:1.5px solid var(--rule);border-radius:8px;min-height:40px;padding:8px 12px;cursor:pointer}
.diagram-open{margin-left:auto;flex:none}
.diagram-open:hover,.diagram-dialog button:hover{border-color:var(--ink)}
.diagram-scroll{overflow:auto;overscroll-behavior-x:contain;border-radius:6px}
.diagram-scroll:focus-visible,.diagram-dialog button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.diagram-scroll>svg{display:block;width:max(100%,var(--diagram-width,100%));min-width:0!important;max-width:none;height:auto}
.diagram-dialog{position:fixed;inset:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;margin:0;border:0;padding:16px;background:var(--paper);color:var(--ink);overflow:hidden}
.diagram-dialog[open]{display:flex;flex-direction:column;gap:12px}
.diagram-dialog::backdrop{background:rgba(0,0,0,.6)}
.diagram-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.diagram-dialog h2{font:600 18px/1.3 var(--sans);margin:0}
.diagram-zoom{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:13px/1.4 var(--sans)}
.diagram-zoom button{min-width:44px}
.diagram-zoom output{min-width:4ch;font-variant-numeric:tabular-nums}
.diagram-dialog .diagram-scroll{margin:0;flex:1;min-height:0;min-width:0;border:1px solid var(--rule);border-radius:10px;background:var(--paper)}
.diagram-dialog .diagram-scroll>svg{margin:0}
.diagram-dialog .diagram-hint{flex:none;margin:0;font:13px/1.45 var(--sans)}
/* A readable, keyboard-scrollable fallback also works without JavaScript. */
@media screen{.paper-diagram:not([data-diagram-ready]) .diagram-scroll>svg{--diagram-width:960px}}
@media print{
  .diagram-tools,.diagram-dialog{display:none!important}
  .paper-diagram,.diagram-scroll{overflow:visible!important;break-inside:avoid}
  .diagram-scroll>svg{width:100%!important;min-width:0!important;max-width:100%;--diagram-width:0px}
}