/* figzoom — readable diagram panels, shared by every page that carries a map.
   Project-local classes only; no shared bzh.css class is restyled.

   The diagrams are drawn on fixed viewBoxes (1180–1420 units). Dropped into the
   960px prose wrap they render at 63–76% and their 10–12px labels fall to 8–9px,
   which is what made them unreadable. Pages carrying a map therefore use the wide
   wrap, and each panel gets a zoom control: --z multiplies the rendered width and
   the panel scrolls once it exceeds its container.

   A 100vw breakout is deliberately avoided: 100vw includes the scrollbar, so it
   puts a horizontal scrollbar on the whole page. */

.figure-panel{background:var(--ink);border:1px solid var(--line);
  border-radius:var(--radius-card,10px);padding:12px;overflow:auto}
.figure-panel svg{display:block;height:auto;width:calc(100% * var(--z,1))}
.figure-panel text{font-family:'IBM Plex Sans',system-ui,sans-serif}

.fig-bar{display:flex;align-items:center;gap:6px;margin-top:12px;flex-wrap:wrap}
.fig-bar button{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.04em;
  padding:5px 11px;border:1px solid var(--line);background:var(--panel-2);
  color:var(--paper-dim);border-radius:var(--radius-sm,6px);cursor:pointer;transition:.12s}
.fig-bar button:hover{border-color:var(--teal);color:var(--paper)}
.fig-bar button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.fig-bar .zval{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--paper);
  min-width:52px;text-align:center}
.fig-bar .zhint{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--paper-dim);margin-left:4px}

/* The wide wrap is for the diagrams; prose inside it stays at a readable measure. */
.wrap.wide .sec-cap,
.wrap.wide .sec-note,
.wrap.wide .page-head .sub,
.wrap.wide .step-body p{max-width:88ch}

@media print{.fig-bar{display:none}}