/* Canonical viewer styles. Theme selectors must not style the shared shell. */
[data-cnv-lightbox] {
    position: fixed;
    inset: 0;
    z-index: 100000;
    box-sizing: border-box;
    display: none;
    align-items: center;
    justify-content: center;
    height: 100dvh;
    padding: 24px 16px;
    background: rgb(8 9 11 / .86);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-family: var(--cnv-font, system-ui);
}
[data-cnv-lightbox] *,
[data-cnv-lightbox] *::before,
[data-cnv-lightbox] *::after { box-sizing: border-box; }
[data-cnv-lightbox].is-open { display: flex; }
[data-cnv-lightbox] [hidden] { display: none !important; }
[data-cnv-lightbox-figure] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(94vw, 1800px);
    min-height: 240px;
    max-width: 100%;
    max-height: 94vh;
    margin: 0;
    text-align: center;
}
[data-cnv-lightbox-frame] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 240px;
    max-height: 88vh;
    border-radius: 14px;
    overflow: hidden;
    touch-action: pan-y;
    transition: background 200ms ease-out, transform 200ms ease-out;
}
[data-cnv-lightbox-frame].is-busy { background: rgb(255 255 255 / .04); }
[data-cnv-lightbox-image] {
    display: block !important;
    max-width: 100% !important;
    max-height: 88vh !important;
    width: auto !important;
    height: auto !important;
    border-radius: 8px !important;
    box-shadow: 0 24px 64px rgb(0 0 0 / .55), 0 6px 18px rgb(0 0 0 / .35) !important;
    opacity: 0 !important;
    transform: scale(.98) !important;
    transition: opacity 240ms ease-out, transform 240ms ease-out !important;
}
[data-cnv-lightbox-image].is-loaded { opacity: 1 !important; transform: scale(1) !important; }
[data-cnv-lightbox-spinner] {
    position: absolute;
    width: 32px;
    height: 32px;
    border: 3px solid rgb(255 255 255 / .18);
    border-top-color: rgb(255 255 255 / .75);
    border-radius: 50%;
    animation: cnv-gallery-lightbox-spin 800ms linear infinite;
}
@keyframes cnv-gallery-lightbox-spin { to { transform: rotate(360deg); } }
[data-cnv-lightbox-error] {
    position: absolute;
    max-width: 100%;
    margin: 0;
    padding: 16px 24px;
    color: rgb(255 255 255 / .75);
    font-size: 13.5px;
    text-align: center;
}
[data-cnv-lightbox-caption] {
    max-width: 640px;
    margin: 14px 0 0;
    color: rgb(255 255 255 / .82);
    font: 400 13.5px/1.55 var(--cnv-font, system-ui);
    overflow-wrap: anywhere;
}
[data-cnv-lightbox-controls] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 14px;
}
[data-cnv-lightbox-count] {
    color: rgb(255 255 255 / .5);
    font: 400 12px/1.5 var(--cnv-font, system-ui);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
[data-cnv-lightbox] button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgb(255 255 255 / .12);
    border-radius: 999px;
    background: rgb(255 255 255 / .06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgb(255 255 255 / .88);
    font: 400 17px/1 var(--cnv-font, system-ui);
    cursor: pointer;
    transition: background 150ms ease-out, border-color 150ms ease-out, transform 150ms ease-out;
}
[data-cnv-lightbox-close] {
    position: fixed;
    top: calc(20px + env(safe-area-inset-top, 0px));
    right: calc(20px + env(safe-area-inset-right, 0px));
    z-index: 2;
}
[data-cnv-lightbox] button:hover { background: rgb(255 255 255 / .14); border-color: rgb(255 255 255 / .24); }
[data-cnv-lightbox] button:active { transform: scale(.94); }
[data-cnv-lightbox] button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
[data-cnv-lightbox].is-side-nav :is([data-cnv-lightbox-prev], [data-cnv-lightbox-next]) {
    position: fixed;
    top: var(--cnv-nav-top, 50%);
    z-index: 2;
    transform: translateY(-50%);
}
[data-cnv-lightbox].is-side-nav [data-cnv-lightbox-prev] { left: var(--cnv-nav-left, 20px); }
[data-cnv-lightbox].is-side-nav [data-cnv-lightbox-next] { right: var(--cnv-nav-right, 20px); }
[data-cnv-lightbox].is-side-nav :is([data-cnv-lightbox-prev], [data-cnv-lightbox-next]):active { transform: translateY(-50%) scale(.94); }
[data-cnv-lightbox] .cnv-lightbox__exif {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3px 12px;
    max-width: min(100%, 1000px);
    margin: 10px 0 0;
    color: rgb(255 255 255 / .78);
    font: 400 13px/1.6 var(--cnv-font, system-ui);
    font-variant-numeric: tabular-nums;
    text-align: center;
    overflow-wrap: anywhere;
}
[data-cnv-lightbox] .cnv-lightbox__exif span { max-width: 100%; }
[data-cnv-lightbox] .cnv-lightbox__exif span:not(:last-child)::after { content: "·"; margin-left: 12px; color: rgb(255 255 255 / .4); }
[data-cnv-lightbox].has-exif [data-cnv-lightbox-image] { max-height: calc(100dvh - 210px) !important; }
/* Albums preserve image height and scroll long captions rather than clipping. */
[data-cnv-lightbox].is-album {
    align-items: flex-start;
    overflow-y: auto;
    padding: calc(64px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    background: rgb(8 9 11 / .96);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
[data-cnv-lightbox].is-album [data-cnv-lightbox-figure] { min-height: 0; max-height: none; margin: auto 0; }
[data-cnv-lightbox].is-album [data-cnv-lightbox-frame] { min-height: 0; flex: 0 0 auto; }
[data-cnv-lightbox].is-album [data-cnv-lightbox-frame]:is(.is-busy, .has-error) { min-height: min(240px, 40dvh); }
[data-cnv-lightbox].is-album :is([data-cnv-lightbox-caption], [data-cnv-lightbox-controls], .cnv-lightbox__exif) { flex: 0 0 auto; }
[data-cnv-lightbox].is-album [data-cnv-lightbox-close] { top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); }
@media (max-width: 767px) {
    [data-cnv-lightbox] .cnv-lightbox__exif { font-size: 12px; gap: 3px 10px; }
    [data-cnv-lightbox].has-exif [data-cnv-lightbox-image] { max-height: calc(100dvh - 230px) !important; }
}
@media (max-width: 600px) {
    [data-cnv-lightbox]:not(.is-album) { padding: 24px 12px; }
    [data-cnv-lightbox-close] { top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
    [data-cnv-lightbox-image], [data-cnv-lightbox-frame] { transition: none !important; }
    [data-cnv-lightbox-image] { transform: none !important; }
    [data-cnv-lightbox-spinner] { animation-duration: 1400ms; }
}