/* The enlarged graph with the ink (graph-zoom.js): Straight-Line Graphs and Simultaneous Equations matching */
.gwrap{ position:relative; }
.gwrap > .annot{ position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; }
.zoom:has(.zscroll){ background:rgba(0,20,60,.3); cursor:default; }
.zoom .zbox{ max-width:96vw; }
.ztools{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:8px; }
.ztools .zt{ font:inherit; font-size:.9rem; font-weight:700; height:38px; min-width:38px; padding:0 10px; border-radius:9px; border:1.5px solid var(--line, #c5d0e3); background:#fff; color:var(--navy); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:4px; }
.ztools .zt.on{ border-color:var(--navy); box-shadow:0 0 0 2px var(--navy) inset; }
.ztools .zpen i{ display:block; width:20px; height:20px; border-radius:50%; }
.ztools .zsp{ flex:1; }
.ztools .zclose{ font:inherit; font-size:1.1rem; font-weight:800; width:38px; height:38px; border-radius:9px; border:1.5px solid var(--navy); background:var(--navy); color:#fff; cursor:pointer; }
.zscroll{ position:relative; max-width:100%; }
.zoom{ position:fixed; inset:0; z-index:60; background:rgba(0,20,60,.3); display:flex; align-items:center; justify-content:center; cursor:default; }
.zoom .zbox{ background:#fff; border-radius:16px; padding:16px; position:relative; box-shadow:0 20px 60px rgba(0,0,0,.35); max-width:96vw; }
.zoom .gsvg{ display:block; width:100%; height:auto; max-width:none; }
.zoom .gwrap{ max-width:none; }
/* beside the bank: a panel over the graphs' column only, so the bank stays in view and keeps scrolling */
.zoom.zside{ position:sticky; inset:auto; top:10px; height:0; width:100%; background:none; display:block; z-index:40; }
.zoom.zside .zbox{ position:absolute; left:50%; top:0; transform:translateX(-50%); box-shadow:0 10px 36px rgba(0,0,0,.4); border:2px solid var(--navy, #002060); }
/* the ink's own rules (ink.js adds them to a page only once it is used), here too so the Present display's copy lays the drawing over the graph */
.zscroll{ position:relative; }
.zscroll .ink-canvas{ position:absolute; left:0; top:0; z-index:2; touch-action:none; display:block; }
.zscroll .ink-copy{ position:absolute; left:0; top:0; z-index:2; pointer-events:none; display:none; }
body.mwm-display .zscroll .ink-copy{ display:block; }
body.mwm-display .zscroll .ink-copy[src="data:,"], body.mwm-display .zscroll .ink-copy:not([src]){ visibility:hidden; }   /* (no broken-picture mark before anything is drawn) */