/*
 * screenshot-modal.css — style the full-size screenshot modal that opens
 * when a visitor clicks a thumbnail wrapped in <a class="screenshot"
 * data-screenshot> on the home page.
 *
 * The modal is created by /js/screenshot-modal.js; this stylesheet is
 * loaded eagerly so the modal appears already-styled the moment the script writes it into the DOM. Visitors
 * without scripting still see a working page — each <a> href points at
 * the full-size PNG, so the thumbnail links straight to the image.
 *
 * The HTML carries a `hidden` attribute on the modal element until the
 * visitor opens it; the `[hidden]` rule below MUST appear so the page
 * never flashes the dialog box before the script engages.
 *
 * No @import, no external URLs: the site's Content-Security-Policy is
 * `default-src 'none'; style-src 'self' 'unsafe-inline'`, which would
 * refuse an `@import` from a foreign origin.
 */

/*
 * The backdrop is a fixed-position full-viewport overlay. `inset: 0`
 * is a shorthand for top/right/bottom/left = 0; pairing it with
 * `display: flex` and `align/justify-content: center` centres the
 * dialog box on every viewport without computing margins.
 *
 * The high z-index keeps the modal above the cookie banner
 * (z-index 1000) and any sticky page header; raise further only when
 * another overlay legitimately needs to sit on top.
 */
.screenshot-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    box-sizing: border-box;
    padding: 2.5rem;
    margin: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
 * The dialog box itself. `max-width: 95vw` / `max-height: 95vh`
 * leave a small gutter around the dialog on any viewport; the
 * flex-centred backdrop above does the centring, so this rule
 * only constrains size and look.
 */
.screenshot-modal__box {
    box-sizing: border-box;
    max-width: 95vw;
    max-height: 95vh;
    margin: 0;
    padding: 1rem;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: auto;
}

/*
 * The full-size image inside the dialog. `display: block` removes the
 * baseline gap an inline image leaves below text; `max-width: 100%`
 * + `max-height: 85vh` keep the picture inside the viewport on both
 * small phones and tall landscape monitors, while `width: auto` /
 * `height: auto` preserve the PNG's intrinsic aspect ratio.
 */
.screenshot-modal__box img {
    display: block;
    max-width: 100%;
    max-height: 85vh;
    width: auto;
    height: auto;
    margin: 0 auto;
    border-radius: 4px;
}

/*
 * The close button sits at the top-right of the dialog box. It is
 * created by the script (the markup is part 2); this rule only
 * paints it.
 */
.screenshot-modal__close {
    align-self: flex-end;
    flex: 0 0 auto;
    appearance: none;
    -webkit-appearance: none;
    background: #2c3e50;
    color: #fff;
    border: 1px solid #2c3e50;
    border-radius: 3px;
    padding: 0.3rem 0.8rem;
    margin: 0 0 0.5rem 0;
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.screenshot-modal__close:focus,
.screenshot-modal__close:hover {
    background: #1a252f;
    border-color: #1a252f;
}

/*
 * The HTML5 `hidden` attribute must win over the `display: flex`
 * declaration on `.screenshot-modal` above. Specificity: this
 * selector is 0,2,0 (one class + one attribute) versus 0,1,0 for
 * `.screenshot-modal`, so the `[hidden]` rule wins without needing
 * `!important`. Without it, an editor who later tweaks the modal
 * markup could accidentally reveal a closed dialog.
 */
.screenshot-modal[hidden] {
    display: none;
}

/*
 * On a phone the 2.5rem backdrop padding and the 1rem box padding leave
 * the 1920px panel screenshot only ~278px of usable width, so the shot
 * opens too small to read. Trim the padding on small screens: the dialog
 * then uses the full width of the viewport and the screenshot fills it.
 */
@media (max-width: 600px) {
    .screenshot-modal {
        padding: .5rem;
    }

    .screenshot-modal__box {
        padding: .5rem;
        border-radius: 4px;
    }

    .screenshot-modal__box img {
        max-height: 82vh;
    }
}

/*
 * Never print the modal — there is no dialog to view on paper, and
 * printers do not have an Escape key to close it.
 */
@media print {
    .screenshot-modal {
        display: none !important;
    }
}

/*
 * The trigger. Every panel screenshot on the home page is wrapped in
 * <a class="screenshot" data-screenshot href="/images/…">: without
 * scripting the anchor is a plain link to the full-size PNG, with
 * scripting the modal opens instead. `display: block` keeps the
 * thumbnail exactly where the bare <picture> sat — an inline anchor
 * would leave a line-box gap under the picture — and the focus ring
 * stays visible so a keyboard visitor can see which shot they are on.
 */
a.screenshot {
    display: block;
    color: inherit;
    text-decoration: none;
}

a.screenshot:focus-visible {
    outline: 3px solid #1d6b3d;
    outline-offset: 3px;
}