[data-image-view],.news-infographic-link{cursor:zoom-in}
[data-image-view]:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
dialog.image-viewer{position:fixed;inset:0;max-width:none;max-height:none;width:100vw;height:100dvh;margin:0;padding:56px 24px 24px;border:0;border-radius:0;background:rgba(10,13,17,.96);color:#fff;overflow:hidden;animation:viewer-in .22s ease-out;box-sizing:border-box}
.image-viewer::backdrop{background:rgba(0,0,0,.65)}
.image-viewer-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;touch-action:pan-y pinch-zoom}
.image-viewer-stage>img{position:absolute;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;opacity:0;transform:scale(.98);pointer-events:none;transition:opacity .24s ease,transform .24s ease}
.image-viewer-stage>img.is-active{opacity:1;transform:scale(1);pointer-events:auto}
/* The empty side gutter is the button, not just the visible arrow. */
dialog.image-viewer .image-viewer-arrow{position:absolute;top:0;bottom:0;display:grid;place-items:center;width:var(--viewer-rail,76px);height:100%;min-height:0;padding:0;border:0;border-radius:0;background:transparent;color:#fff;z-index:2;transform:none;box-shadow:none;cursor:pointer}
.image-viewer-prev{left:0}.image-viewer-next{right:0}
.image-viewer-arrow::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .18s ease;background:linear-gradient(90deg,#ffffff12,transparent)}
.image-viewer-next::before{transform:scaleX(-1)}
.image-viewer-arrow svg{position:relative;width:28px;height:28px;opacity:.75;transition:opacity .18s ease}
dialog.image-viewer:has(.image-viewer-arrow){padding-inline:76px}
dialog.image-viewer .image-viewer-close{position:absolute;right:max(16px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));width:44px;height:44px;min-height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:#fff;line-height:1;z-index:3;transform:none}
.image-viewer-close svg{width:22px;height:22px;display:block;pointer-events:none}
@media(hover:hover){.image-viewer-arrow:hover::before{opacity:1}.image-viewer-arrow:hover svg{opacity:1}dialog.image-viewer .image-viewer-close:hover{background:#ffffff14}}
.image-viewer-arrow:active::before{opacity:1}
.image-viewer-avatar.avatar{display:grid;place-items:center;width:min(70vw,60vh,480px);height:min(70vw,60vh,480px);font-size:clamp(70px,20vw,200px);flex-shrink:0}
dialog.image-viewer.is-closing{animation:viewer-out .22s ease-in forwards;pointer-events:none}
@keyframes viewer-in{from{opacity:0}to{opacity:1}}
@keyframes viewer-photo-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
@keyframes viewer-out{to{opacity:0}}
@media(max-width:700px){dialog.image-viewer{padding:64px 10px 20px}dialog.image-viewer:has(.image-viewer-arrow){padding-inline:10px}.image-viewer-arrow svg{width:24px;height:24px}}
/* Shared, restrained control states in both themes. */
html :is(button,a,summary,[role="button"]){-webkit-tap-highlight-color:transparent;transition:background-color .16s ease,border-color .16s ease,color .16s ease,opacity .16s ease}
html :is(button,.primary,.secondary,.danger):not(:disabled):is(:hover,:active){transform:none}
html[data-theme] :is(button,a,summary,[role="button"],[data-image-view]):focus-visible{outline:2px solid var(--orange);outline-offset:3px;box-shadow:none}
html[data-focus-input="pointer"] :is(button,a,summary,[role="button"],[data-image-view]):focus{outline:none!important;box-shadow:none}
dialog.image-viewer:focus{outline:none}
html[data-theme] dialog.image-viewer .image-viewer-arrow:focus-visible{outline-color:#fff;outline-offset:-5px}
html[data-theme] dialog.image-viewer .image-viewer-close:focus-visible{outline-color:#fff}
html[data-theme] .dialog-heading .dialog-close{display:grid;place-items:center;padding:0;margin:0;line-height:1;flex-shrink:0;transform:none}
.dialog-close svg{display:block;width:20px;height:20px;pointer-events:none}
@media(prefers-reduced-motion:reduce){dialog.image-viewer,.image-viewer-stage>img,dialog.image-viewer.is-closing,.image-viewer-arrow::before,.image-viewer-arrow svg,html :is(button,a,summary,[role="button"]){animation:none!important;transition:none!important}}