/* Readable lesson diagrams without changing the authored SVG or print view. */
.diagram-enlarge{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:16px;padding:10px 15px;border:1px solid var(--line);border-radius:2px;background:var(--paper);color:var(--accent);font:600 13px/1.5 var(--font-body);cursor:pointer;}
.diagram-enlarge:hover{border-color:var(--accent);background:var(--selected);}
.diagram-viewer{width:min(1100px,calc(100vw - 24px));height:min(840px,calc(100dvh - 24px));max-width:none;max-height:none;padding:0;box-sizing:border-box;border:1px solid var(--accent);border-radius:2px;background:var(--paper);color:var(--ink);overflow:hidden;}
.diagram-viewer[open]{display:flex;flex-direction:column;}
.diagram-viewer::backdrop{background:rgba(15,30,40,.76);}
.diagram-viewer__header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px 8px;flex:none;}
.diagram-viewer__title{margin:0!important;font:400 23px/1.35 var(--font-display)!important;color:var(--accent);}
.diagram-viewer__close,.diagram-viewer__zoom,.diagram-viewer__preset{min-width:44px;min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:2px;background:var(--raised);color:var(--accent);font:600 13px/1.5 var(--font-body);cursor:pointer;}
.diagram-viewer__close{flex:none;border:0;background:none;text-decoration:underline;}
.diagram-viewer__controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 20px;flex:none;}
.diagram-viewer__zoom{font-size:22px;line-height:1;padding:9px;}
.diagram-viewer__output{min-width:64px;text-align:center;font:13px/1.5 var(--font-mono);}
.diagram-viewer__presets{display:flex;gap:8px;margin-left:12px;}
.diagram-viewer__controls button:hover{border-color:var(--accent);background:var(--selected);}
.diagram-viewer__controls button:disabled{opacity:.45;cursor:default;}
.diagram-viewer__help{margin:0!important;padding:4px 20px 14px;font:12px/1.6 var(--font-body);color:var(--muted);flex:none;}
.diagram-viewer__canvas{position:relative;flex:1;min-height:120px;padding:16px;overflow:auto;overscroll-behavior:contain;background:var(--selected);border-top:1px solid var(--line);box-sizing:border-box;}
.diagram-viewer__canvas:focus-visible{outline-offset:-4px;}
.diagram-viewer__surface{position:relative;margin:0 auto;background:#fff;}
.diagram-viewer__surface svg{display:block;max-width:none;max-height:none;}
@media(max-width:520px){.diagram-viewer__header{padding:12px 12px 4px;gap:8px;}.diagram-viewer__title{font-size:18px!important;}.diagram-viewer__controls{padding:8px 12px;}.diagram-viewer__presets{flex-basis:100%;margin-left:0;}.diagram-viewer__presets button{flex:1;}.diagram-viewer__help{padding:4px 12px 12px;}.diagram-enlarge{width:100%;}}
@media print{.diagram-enlarge,.diagram-viewer{display:none!important;}body:has(.diagram-viewer[open]){overflow:visible!important;}}