/*
   Global image viewer — P8-06.

   The overlay for QRMASKUI.openImageViewer(), built by assets/js/lightbox.js. Every
   colour, radius, spacing and elevation here comes from tokens.css; the ONE exception is
   the scrim, which matches .modal__scrim in app.css deliberately so the two overlays read
   as one family. A translucent black over arbitrary image content is not a text pair, so
   ContrastTest - which measures a hand-listed set of token pairs - does not apply to it,
   and ImageViewerTest pins that this file carries exactly one literal colour and no hex at
   all. Do not restate that rule here using the function-call spelling; a source-level
   count matches prose as readily as code, and this file has already failed that way once.

   LAYERING, and why 70: the drawer sits at 60 with its backdrop at 50, the confirmation
   dialog at 80 and toasts at 100. The viewer goes between the drawer and the confirm
   dialog because a decision must always be able to interrupt a browse - an image opened
   from page content should never cover the dialog that asks about an action - while still
   covering the drawer that may have been open when it was invoked. Toasts stay on top so
   the message about the action that opened the viewer is never hidden by it.

   The closed state is the [hidden] attribute, which the global rule turns into
   display:none !important. That is what removes the dialog from the accessibility tree
   rather than only from view; .is-open drives the fade only.
*/

.imgview {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: center;
    padding: var(--s-4);
    opacity: 0;
    transition: opacity var(--t-base) var(--ease-standard);
}

.imgview.is-open {
    opacity: 1;
}

/* Clicking the scrim closes, exactly like the confirmation dialog. */
.imgview__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgb(0 0 0 / 0.55);
}

.imgview__frame {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    max-inline-size: min(92vw, 60rem);
    max-block-size: 92vh;
    padding: var(--s-4);
    background: var(--surface-container-high);
    color: var(--on-surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--r-lg);
    box-shadow: var(--e-4);
}

/* contain, never cover: a QR image must stay fully readable at any viewport. */
.imgview__img {
    align-self: center;
    max-inline-size: 100%;
    max-block-size: 66vh;
    object-fit: contain;
    padding: var(--s-3);
    background: var(--surface-container-highest);
    border-radius: var(--r-md);
}

.imgview__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
}

/* tabular so "10 of 12" does not shift width as the digits change. */
.imgview__count {
    color: var(--on-surface-variant);
    font-size: var(--fs-label);
    font-variant-numeric: tabular-nums;
}

.imgview__nav {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.imgview__caption {
    color: var(--on-surface-variant);
    font-size: var(--fs-body);
    text-align: center;
    overflow-wrap: anywhere;
}

/* Stops the page scrolling behind the overlay while it is open. A class on <body>
   rather than an inline style, because the component library tests sweep for those. */
body.imgview-locked {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .imgview {
        transition: none;
    }
}