/* Shared viewer controls use the physical lower-right corner in every language. */
.design-viewer .design-viewer-actions>.design-viewer-fullscreen{margin-left:auto;flex:none;width:44px;height:44px;padding:9px;border-radius:6px;display:flex!important}
.design-viewer .design-viewer-fullscreen svg{width:24px;height:24px}
.design-viewer .design-viewer-fullscreen:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.design-viewer .design-viewer-fullscreen[hidden]{display:none!important}

/* Phones retain their fitted viewer, swipe navigation and font pinch/pan. */
.design-viewer.design-viewer-phone .design-viewer-actions>.design-viewer-fullscreen{display:none!important}

/* Single-pointer and keyboard alternatives to font pinch/pan. Keep controls
   outside the artwork: zoom changes neither the opaque source nor its theme. */
.font-dialog .design-viewer-font-tools{display:flex;flex:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;max-width:100%;direction:ltr}
.font-dialog .design-viewer-font-tools [data-font-action][hidden]{display:none!important}
.font-dialog .design-viewer-font-zoom,.font-dialog .design-viewer-font-pan{display:grid;grid-template-columns:44px 52px 44px;align-items:center;justify-items:center;gap:6px}
.font-dialog .design-viewer-stage .design-viewer-font-tools button{position:static;transform:none;box-sizing:border-box;flex:none;width:44px;height:44px;padding:0;border:1px solid #958f8466;border-radius:8px;background:var(--surface,#fff);color:var(--ink,#222);font-size:24px;line-height:1;opacity:1;text-shadow:none;box-shadow:none;backdrop-filter:none}
.font-dialog .design-viewer-stage .design-viewer-font-tools button:disabled{opacity:.3}
.font-dialog .design-viewer-font-tools output{min-width:52px;text-align:center;font-size:14px;font-variant-numeric:tabular-nums}
/* Both rows keep their space at every zoom; only viewport changes can resize them. */
.font-dialog.design-viewer-phone .design-viewer-panel{min-height:0}
@media(max-height:420px){.font-dialog .design-viewer-stage{gap:6px}.font-dialog .design-viewer-font-tools{gap:6px}}

/* Desktop: minus / percentage / plus, then left / reset / right.
   Phone places reset below the percentage, between previous and next. */
.font-dialog.design-viewer-phone .design-viewer-font-tools{display:grid;grid-template-columns:44px 52px 44px;gap:6px}
.font-dialog.design-viewer-phone .design-viewer-font-zoom,.font-dialog.design-viewer-phone .design-viewer-font-pan{display:contents}

/* Each zoomed font page clips its own raster while pages follow the pointer. */
.font-dialog .design-viewer-font-page{position:absolute;inset:0;overflow:hidden;background-color:inherit}
.font-dialog .design-viewer-font-page[hidden]{display:none!important}
.font-dialog .design-viewer-font-page .design-viewer-neighbor{visibility:visible;left:0;width:100%}
/* Draw the frame above all image layers, including a zoomed raster. */
.font-dialog .design-viewer-artwork:after{content:"";position:absolute;inset:0;z-index:10;pointer-events:none;border:1px solid #b8bfb7;border-radius:inherit;box-sizing:border-box}
html[data-theme="dark"] .font-dialog .design-viewer-artwork:after{border-color:#75818a}
.font-dialog.design-viewer-phone .design-viewer-navigation{gap:10px}
.font-dialog .design-viewer-stage .design-viewer-navigation [data-font-action="reset"]{font-size:24px;border-radius:8px}