/* Site-local viewer. All styles are scoped; other dialogs keep their appearance. */
.art-image-viewer {
    position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none;
    margin: 0; padding: 0; border: 0; background: transparent; color: #f08056;
    overflow: hidden; font: 14px Arial, sans-serif; overscroll-behavior: contain;
}
.art-image-viewer[open] { display: flex; align-items: center; justify-content: center; }
.art-image-viewer::backdrop { background: rgba(0, 0, 0, .8); }
.art-image-viewer *, .art-image-viewer *::before, .art-image-viewer *::after { box-sizing: border-box; }
.art-image-viewer [hidden] { display: none !important; }
.art-viewer-frame {
    position: relative; width: 90vw; height: min(90vw, 90dvh); overflow: hidden;
    border-radius: 8px; background: rgba(57, 30, 23, .18);
}
.art-viewer-surface { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; touch-action: none; }
.art-viewer-surface > img {
    display: block; position: relative; flex: 0 0 auto; width: auto; height: auto; max-width: 86%; max-height: 86%;
    margin: 0; padding: 0; border: 0; border-radius: 0; object-fit: contain; transform-origin: center;
    cursor: grab; user-select: none; -webkit-user-select: none; transition: none;
}
.art-image-viewer button {
    display: inline-flex; justify-content: center; align-items: center; min-width: 36px; min-height: 36px;
    margin: 0; padding: 5px 10px; border: 1px solid rgba(240, 128, 86, .42); border-radius: 6px;
    background: rgba(240, 101, 58, .12); color: #f08056; font: inherit; font-weight: 400;
    box-shadow: none; cursor: pointer; transform: none; text-shadow: none;
}
.art-image-viewer button:hover { background-color: rgba(240, 101, 58, .24); color: #ff9b70; transform: none; }
.art-image-viewer button:focus-visible { outline: 2px solid #f08056; outline-offset: 2px; }
.art-image-viewer button:disabled { opacity: .5; cursor: wait; }
.art-image-viewer .art-viewer-close, .art-image-viewer .art-viewer-reset { position: absolute; top: 8px; font-size: 24px; line-height: 1; }
.art-viewer-close { right: 8px; }
.art-viewer-reset { left: 8px; }
.art-viewer-tools { position: absolute; bottom: 10px; right: 10px; display: flex; gap: 10px; align-items: center; }
.art-viewer-settings { position: absolute; right: 0; bottom: calc(100% + 8px); display: flex; align-items: center; gap: 10px; padding: 10px; max-width: 82vw; flex-wrap: wrap; background: rgba(35, 18, 14, .94); border: 1px solid #f080566b; border-radius: 6px; }
.art-image-viewer .art-viewer-settings-toggle { color: #c7b8ae; background: rgba(35, 18, 14, .4); border-color: #ffffff29; font-size: 22px; }
.art-viewer-backgrounds { display: flex; gap: 6px; padding: 4px; border-radius: 5px; background: rgba(35, 18, 14, .7); }
.art-image-viewer .art-viewer-backgrounds button { min-width: 16px; width: 16px; min-height: 28px; padding: 0; background: var(--swatch); border-radius: 2px; }
.art-image-viewer .art-viewer-backgrounds button[aria-pressed="true"] { outline: 1px solid #f08056; outline-offset: 2px; }
.art-viewer-help { position: absolute; right: 0; bottom: calc(100% + 10px); width: min(320px, 75vw); padding: 12px; background: rgba(35, 18, 14, .94); border: 1px solid #f080566b; border-radius: 6px; color: #ddcec5; white-space: pre-line; line-height: 1.7; }
.art-viewer-status { position: absolute; top: 45%; left: 0; width: 100%; padding: 1rem; text-align: center; pointer-events: none; color: #ddcec5; }
.reference-board button.ref-image-open { display: block; width: 100%; padding: 0; border: 0; background: transparent; border-radius: 0; cursor: zoom-in; }
@media (pointer: coarse) {
    .art-image-viewer button { min-width: 40px; min-height: 40px; }
    .art-image-viewer .art-viewer-backgrounds button { min-width: 24px; min-height: 32px; }
    .art-viewer-backgrounds { gap: 10px; }
    .art-viewer-settings { width: 285px; }
}