/* Shared viewer roles inherit the Hattie palette on every public design. */
dialog#lightbox.photo-viewer {
 --viewer-canvas:var(--hattie-black);--viewer-ink:var(--hattie-white);--viewer-muted:var(--hattie-grey-light);--viewer-focus:var(--hattie-blue-light);--viewer-accent:var(--hattie-brand-blue);
 --viewer-control:var(--front-control,44px);--viewer-gap:var(--front-space-8,8px);--viewer-pad:var(--front-space-16,16px);--viewer-thumb:64px;--viewer-meta:var(--front-secondary-size,15px);
 --viewer-control-pad-inline:var(--front-space-12,12px);--viewer-small-gap:var(--hattie-space-4,4px);--viewer-focus-width:var(--hattie-focus-width,2px);--viewer-focus-offset:var(--hattie-focus-offset,4px);--viewer-icon-size:var(--hattie-space-24,24px);--viewer-mobile-thumb:48px;
 position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;border:0;border-radius:0;padding:max(var(--viewer-pad),env(safe-area-inset-top)) max(var(--viewer-pad),env(safe-area-inset-right)) max(var(--viewer-pad),env(safe-area-inset-bottom)) max(var(--viewer-pad),env(safe-area-inset-left));
 background:var(--viewer-canvas);color:var(--viewer-ink);overflow:hidden;box-sizing:border-box;
}
dialog#lightbox.photo-viewer[open]{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto minmax(0,1fr) auto auto;gap:var(--viewer-gap)}
dialog#lightbox.photo-viewer::backdrop{background:var(--viewer-canvas);backdrop-filter:none}
#lightbox.photo-viewer button{min-width:var(--viewer-control);min-height:var(--viewer-control);padding:var(--viewer-gap) var(--viewer-control-pad-inline);border:1px solid var(--viewer-muted);border-radius:0;background:var(--viewer-canvas);color:var(--viewer-ink);font:inherit;font-size:var(--viewer-meta);cursor:pointer;flex-shrink:0}
#lightbox.photo-viewer button:disabled{color:var(--viewer-muted);border-color:var(--viewer-muted);cursor:default;opacity:1}
#lightbox.photo-viewer button:focus-visible{outline:var(--viewer-focus-width) solid var(--viewer-focus);outline-offset:var(--viewer-focus-offset)}
#lightbox.photo-viewer button:hover:not(:disabled){background:var(--viewer-accent)}
#lightbox.photo-viewer .photo-viewer-header{grid-column:1/-1;display:flex;align-items:center;gap:var(--viewer-gap);min-width:0}
#lightbox.photo-viewer .photo-viewer-toolbar{display:flex;align-items:center;gap:var(--viewer-gap);grid-row:1;grid-column:1;flex-wrap:wrap}
#lightbox.photo-viewer .lightbox-close{position:static;grid-row:1;grid-column:2;margin:0 0 0 auto;align-self:start}
#lightbox.photo-viewer .photo-viewer-viewport{grid-row:2;grid-column:1/-1;min-height:0;min-width:0;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:pan-y pinch-zoom;user-select:none}
#lightbox.photo-viewer .photo-viewer-viewport[data-zoomed=true]{touch-action:pinch-zoom;cursor:grab}
#lightbox.photo-viewer .photo-viewer-viewport[data-zoomed=true]:active{cursor:grabbing}
dialog#lightbox.photo-viewer img.photo-viewer-image{max-width:100%;max-height:100%;width:auto;height:auto;margin:0;object-fit:contain;transform-origin:center;flex-shrink:0;pointer-events:none}
#lightbox.photo-viewer [hidden]{display:none!important}
#lightbox.photo-viewer .photo-viewer-info{grid-row:3;grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:var(--viewer-gap);flex-wrap:wrap;min-width:0}
#lightbox.photo-viewer .lightbox-caption{margin:0;padding:0;text-align:center;font-size:var(--viewer-meta);line-height:1.5;overflow-wrap:anywhere;max-height:3em;overflow:auto;flex:1 1 50%}
#lightbox.photo-viewer .photo-viewer-count{font-size:var(--viewer-meta);white-space:nowrap;font-variant-numeric:tabular-nums}
#lightbox.photo-viewer .photo-viewer-status{font-size:var(--viewer-meta);color:var(--viewer-ink);margin:0;text-align:center}
#lightbox.photo-viewer .photo-viewer-status:empty{display:none}
#lightbox.photo-viewer .photo-viewer-help{flex-basis:100%;margin:0;text-align:center;font-size:var(--viewer-meta);line-height:1.5;color:var(--viewer-muted)}
#lightbox.photo-viewer .lightbox-prev,#lightbox.photo-viewer .lightbox-next{position:absolute;top:45%;width:var(--viewer-control);height:var(--viewer-control);z-index:1;font-size:var(--viewer-icon-size);padding:0}
#lightbox.photo-viewer .lightbox-prev,#lightbox.photo-viewer .lightbox-next{border-radius:50%}
#lightbox.photo-viewer .lightbox-prev{left:max(var(--viewer-pad),env(safe-area-inset-left))}
#lightbox.photo-viewer .lightbox-next{right:max(var(--viewer-pad),env(safe-area-inset-right))}
#lightbox.photo-viewer .photo-viewer-filmstrip{grid-row:4;grid-column:1/-1;display:flex;gap:var(--viewer-gap);overflow-x:auto;overflow-y:hidden;padding:var(--viewer-small-gap);min-width:0;overscroll-behavior-x:contain;scrollbar-color:var(--viewer-muted) var(--viewer-canvas)}
#lightbox.photo-viewer .photo-viewer-filmstrip button{width:var(--viewer-thumb);height:var(--viewer-thumb);padding:var(--viewer-small-gap);border:var(--viewer-focus-width) solid transparent}
#lightbox.photo-viewer .photo-viewer-filmstrip button[aria-pressed=true]{border-color:var(--viewer-focus);background:var(--viewer-accent)}
dialog#lightbox.photo-viewer .photo-viewer-filmstrip img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;margin:0}
@media(max-width:480px){dialog#lightbox.photo-viewer{--viewer-pad:var(--viewer-gap);--viewer-thumb:var(--viewer-mobile-thumb)}#lightbox.photo-viewer .photo-viewer-header{display:grid;grid-template-columns:1fr auto;gap:var(--viewer-gap)}#lightbox.photo-viewer .photo-viewer-count{grid-column:1;grid-row:1}#lightbox.photo-viewer .photo-viewer-toolbar{grid-row:2;grid-column:1/-1;justify-content:center;gap:var(--viewer-gap)}#lightbox.photo-viewer button{padding:var(--viewer-gap)}#lightbox.photo-viewer .photo-viewer-zoom-value{display:none}}
@media(prefers-reduced-motion:reduce){#lightbox.photo-viewer *{scroll-behavior:auto;transition:none;animation:none}}