/* =========================================
   THE SCREENSHOT LIGHTBOX - loaded beside lightbox.js, by every page that has screenshots.

   Its own file rather than a block in shared.css, because two of the article pages carry their
   own copy of the chrome and never link shared.css - so anything that lives only there is absent
   exactly where a screenshot is most worth opening.
========================================= */

/* A screenshot, opened. The pictures are screens full of small text; at a third of their size
   they are decoration, and this is how somebody actually reads one. */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background-color: rgba(20, 18, 26, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vh 4vw;
    cursor: zoom-out;
}

.lightbox-image {
    max-width: 100%;
    max-height: 92vh;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
    cursor: default;
}

/* A phone used to open the picture at its own size and let the box scroll, on the theory that a
   wide screenshot fitted to 350px is unreadable. It is - but the cure was far worse: the picture
   filled the whole scrolling area, so there was no dimmed edge left to tap, the close button
   scrolled away off the right of it, and a phone has no Escape key. There was no way out at all.
   It fits on screen everywhere now, and reading it closely is what pinch-to-zoom is for. */

/* Fixed, not absolute: absolute puts it at the corner of the BOX, and the box is the thing that
   grows when a picture is bigger than the screen. Pinned to the screen, it cannot end up
   somewhere a thumb can't reach. */
.lightbox-close {
    position: fixed;
    top: max(12px, env(safe-area-inset-top, 0px));
    right: 12px;
    width: 44px;
    height: 44px;
    font-size: 1.6rem;
    line-height: 1;
    color: #ffffff;
    background-color: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    cursor: pointer;
}

    .lightbox-close:hover {
        background-color: rgba(255, 255, 255, .25);
    }

/* The pictures themselves say they can be opened. */
.screenshot {
    cursor: zoom-in;
}