/**
 * The image viewer, in both apps.
 *
 * Shaped like the viewers people already know: the picture floats on a dark scrim
 * with nothing framing it, the controls ride in an overlay bar that gradients into
 * the scrim, arrows sit at the edges and the caption and counter sit under the
 * image. Nothing here is a card — a panel around the image only makes the picture
 * smaller and adds an edge to look at.
 *
 * Buttons keep the house geometry (6px radius, 12px semibold, same padding as
 * `.ds-btn`) in the tones a dark overlay needs, so they read as the same family as
 * the rest of the system rather than as a different product.
 *
 * Deliberately dark in both themes: the point is to get the page out of the way and
 * let a bank screenshot be read. Sits above Bootstrap's modal (1055) so it can be
 * opened from the contributor's proof modal.
 */

.sx-lb {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    grid-template-rows: auto 1fr auto;
    animation: sx-lb-in 0.15s ease-out;
}

.sx-lb[hidden] {
    display: none !important;
}

@keyframes sx-lb-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.sx-lb__scrim {
    position: absolute;
    inset: 0;
    background: rgba(9, 13, 24, 0.88);
}

/* Locks the page behind the scrim so a scroll gesture does not move the table. */
body.sx-lb-open {
    overflow: hidden;
}

/* --- Overlay bar ---------------------------------------------------------- */

/* Gradient rather than a solid strip: over a pale screenshot the buttons still
   have something to sit on, and over a dark one the bar disappears. */
.sx-lb__bar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

.sx-lb__ident {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sx-lb__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #f1f5f9;
    white-space: nowrap;
}

/* The house identifier chip, on a dark ground. */
.sx-lb__chip {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    color: #c7d2fe;
    background: rgba(99, 102, 241, 0.22);
    border: 1px solid rgba(165, 180, 252, 0.4);
    border-radius: 6px;
    padding: 0.15rem 0.45rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sx-lb__chip:empty {
    display: none;
}

.sx-lb__tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* --- Buttons: house geometry, dark-surface tones -------------------------- */

/* Icon-only, all three the same: a filled accent button over a bank screenshot
   pulled the eye away from the image it sits on. White glyph, faint glass behind
   it, house radius. */
.sx-lb__btn {
    width: 32px;
    height: 32px;
    padding: 0;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.sx-lb__btn:hover {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Square glyph buttons need the glyph centred, not baseline-aligned. */
.sx-lb__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sx-lb__btn:focus-visible {
    outline: 2px solid var(--sx-accent-line-2);
    outline-offset: 2px;
}

.sx-lb__btn:disabled {
    opacity: 0.6;
    cursor: progress;
}

.sx-lb__btn[hidden] {
    display: none;
}


/* --- Stage ---------------------------------------------------------------- */

.sx-lb__stage {
    position: relative;
    z-index: 1;
    margin: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 64px;
    overflow: auto;
}

.sx-lb__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: zoom-in;
    border-radius: 2px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}

/* Actual size: the stage scrolls, so a tall receipt can be read top to bottom
   instead of being scaled down to nothing. */
.sx-lb--zoomed .sx-lb__stage {
    align-items: flex-start;
    justify-content: flex-start;
}

.sx-lb--zoomed .sx-lb__img {
    max-width: none;
    max-height: none;
    cursor: zoom-out;
}

.sx-lb__state {
    position: absolute;
    font-size: 0.8125rem;
    color: var(--sx-ink-01);
}

/* --- Paging --------------------------------------------------------------- */

.sx-lb__nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    font-family: inherit;
    font-size: 22px;
    line-height: 1;
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    cursor: pointer;
}

.sx-lb__nav:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.22);
}

.sx-lb__nav[hidden] {
    display: none;
}

.sx-lb__nav--prev { left: 14px; }
.sx-lb__nav--next { right: 14px; }

/* --- Foot ----------------------------------------------------------------- */

.sx-lb__foot {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 18px 18px;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.55));
}

.sx-lb__caption {
    font-size: 0.6875rem;
    color: var(--sx-ink-08);
    text-align: center;
}

/* The house count pill. */
.sx-lb__count {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--sx-ink-01);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
}

.sx-lb__count[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .sx-lb {
        animation: none;
    }
}

@media (max-width: 640px) {
    .sx-lb__stage {
        padding: 0 12px;
    }

    .sx-lb__bar {
        flex-wrap: wrap;
        gap: 8px;
    }

    .sx-lb__nav {
        width: 34px;
        height: 34px;
        font-size: 18px;
    }
}