/* devlog/static/css/picture_viewer.css */

/* Full-screen viewer a phone opens on tap: the whole screenshot fitted to the screen, a tap zooms it to pan. */
.devlog-viewer-open, .devlog-viewer-open body { overflow: hidden; }
.devlog-viewer {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    background: rgb(var(--bg-card));
}
.devlog-viewer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgb(var(--border-color));
}
.devlog-viewer-label { font-size: 0.875rem; font-weight: 600; color: rgb(var(--text-body)); }
.devlog-viewer-toggle { display: inline-flex; border: 1px solid rgb(var(--border-color)); border-radius: 9999px; padding: 2px; }
.devlog-viewer-toggle button {
    padding: 0.25rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(var(--text-body));
}
.devlog-viewer-toggle button[aria-pressed="true"] { background: rgb(var(--primary)); color: rgb(var(--on-primary, 255 255 255)); }
/* Auto margins centre the fitted picture and fall to 0 once the zoomed one overflows, so every edge stays reachable. */
.devlog-viewer-stage { flex: 1; min-height: 0; display: flex; overflow: auto; scrollbar-width: none; touch-action: pan-x pan-y pinch-zoom; }
.devlog-viewer-stage img { display: block; flex: none; margin: auto; width: 100%; height: auto; max-width: none; max-height: 100%; object-fit: contain; cursor: zoom-in; }
.devlog-viewer-stage[data-zoomed] img { width: 200%; max-height: none; cursor: zoom-out; }