/* Expanded figures: preserve a readable logical canvas at every viewport width. */
.figure-expand { margin-inline-start: auto; white-space: nowrap; }
.figure-viewer { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); border: 0; margin: 0; background: var(--bg); color: var(--text); }
.figure-viewer[open] { display: flex; flex-direction: column; gap: 10px; }
.figure-viewer::backdrop { background: var(--bg); }
.viewer-toolbar, .viewer-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.viewer-toolbar strong { color: var(--ink); margin-inline-end: auto; }
.viewer-help { margin: 0; font-size: 13px; }
.viewer-viewport { position: relative; overflow: hidden; flex: 1; min-height: 0; background: var(--surface); border: 1px solid var(--rule); touch-action: none; }
.viewer-canvas { position: absolute; width: 1000px; transform-origin: 0 0; }
.viewer-canvas iframe { display: block; width: 1000px; height: 700px; border: 0; }
.viewer-controls [data-status] { font-size: 12px; margin-inline-end: auto; }
.figure-viewer .btn { min-height: 42px; }
@media (min-width: 700px) { .viewer-rotate { display: none; } }
@media (max-width: 699px) { .figure-expand { display: inline-flex; min-height: 44px; } .bench-top { flex-wrap: wrap; gap: 8px; } .viewer-controls { gap: 6px; } .viewer-controls [data-status] { flex-basis: 100%; order: 1; } }
@media (prefers-reduced-motion: reduce) { .figure-viewer *, .figure-expand { scroll-behavior: auto; transition: none; animation: none; } }