/* Lightbox: full-screen viewer for drawings and plans (lightbox- prefix). */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 90px 60px 60px;
    background: var(--viewer-bg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
    cursor: default;
}

.lightbox[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.35s ease, visibility 0s linear 0s;
}

.lightbox-logo {
    position: absolute;
    top: 26px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.2rem;
    color: var(--white);
    z-index: 10010;
    letter-spacing: 0.04em;
    opacity: 0.85;
    transition: opacity 0.4s ease;
    animation: sketch-wobble var(--sketch-timing);
}

.lightbox-counter {
    position: absolute;
    top: 78px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.25rem;
    color: rgb(255 255 255 / 35%);
    z-index: 10010;
    letter-spacing: 0.04em;
    transition: opacity 0.4s ease;
}

.lightbox-tools {
    position: absolute;
    top: 20px;
    right: 28px;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 10010;
}

.lightbox-tool,
.lightbox-close {
    color: var(--muted);
    transition: color var(--dur-base) ease, transform var(--dur-base) ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
}

.lightbox-close {
    font-size: 2.4rem;
    line-height: 1;
    top: max(18px, calc(18px + env(safe-area-inset-top)));
}

.lightbox-tool:hover,
.lightbox-close:hover {
    color: var(--white);
    transform: scale(1.15);
}

.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: rgb(255 255 255 / 35%);
    z-index: 10005;
    padding: 14px;
    transition: color 0.25s ease, transform 0.25s ease;
}

.lightbox-arrow--prev { left: 18px; }
.lightbox-arrow--next { right: 18px; }

.lightbox-arrow:hover {
    color: var(--white);
    transform: translateY(-50%) scale(1.2);
}

/* Stage: holds the image or the canvas on display. */
.lightbox-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    z-index: 10001;
    overflow: hidden;
    padding: 110px 70px 50px;
}

.lightbox-stage img,
.lightbox-stage canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    cursor: zoom-in;
    transition: transform var(--dur-base) ease;
}

/* Zoom slider: shown only while the image is zoomed. A hand-drawn track sits under a native
   range input whose own track and thumb are transparent. */
.lightbox-zoom {
    position: relative;
    width: 120px;
    height: 30px;
    display: none;
    align-items: center;
    margin-right: 5px;
    opacity: 0;
    transform: translateX(10px);
    transition: opacity var(--dur-base) ease, transform var(--dur-base) ease;
}

.lightbox.is-zoomed .lightbox-zoom {
    display: flex;
    opacity: 1;
    transform: translateX(0);
}

.lightbox-zoom-track {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 20px;
    transform: translateY(-50%);
    pointer-events: none;
    animation: sketch-wobble var(--sketch-timing);
}

.lightbox-zoom-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
    cursor: pointer;
    z-index: 2;
}

.lightbox-zoom-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 30px;
    background: transparent;
}

.lightbox-zoom-range::-moz-range-thumb {
    width: 20px;
    height: 30px;
    background: transparent;
    border: none;
}

/* Zoomed: the script handles panning and pinching itself. */
.lightbox.is-zoomed .lightbox-stage { touch-action: none; }

.lightbox.is-zoomed .lightbox-stage img,
.lightbox.is-zoomed .lightbox-stage canvas {
    cursor: grab;
}

/* A dragged image follows the pointer without easing. */
.lightbox.is-zoomed .lightbox-stage img.is-dragging,
.lightbox.is-zoomed .lightbox-stage canvas.is-dragging {
    cursor: grabbing;
    transition: none;
}

.lightbox-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) ease;
}

.lightbox-loader.is-active { opacity: 1; }

.lightbox-spinner {
    width: 32px;
    height: 32px;
    border: 2.5px solid rgb(255 255 255 / 12%);
    border-top: 2.5px solid var(--red);
    border-radius: 50%;
    animation: lightbox-spin 0.9s linear infinite;
}

.lightbox-dots {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10010;
}

.lightbox-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgb(255 255 255 / 25%);
    cursor: pointer;
    transition: background var(--dur-base) ease, transform 0.25s ease;
}

.lightbox-dot.is-active {
    background: var(--white);
    transform: scale(1.35);
}

.lightbox-dot:hover:not(.is-active) { background: rgb(255 255 255 / 50%); }

/* The controls fade out while the visitor is idle. */
.lightbox.is-controls-hidden .lightbox-logo,
.lightbox.is-controls-hidden .lightbox-counter,
.lightbox.is-controls-hidden .lightbox-close,
.lightbox.is-controls-hidden .lightbox-arrow,
.lightbox.is-controls-hidden .lightbox-dots {
    opacity: 0;
    pointer-events: none;
}

/* The viewer normally fades in over 0.35s. During a view transition the browser snapshots the
   incoming image while opacity is still 0, and the sheet would grow towards nothing. This class
   shows the viewer at once and is removed right after, so closing keeps its fade. Same weight
   as .lightbox[aria-hidden="false"] and declared after it. */
.lightbox.is-instant {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none;
}

@media (orientation: landscape) and (max-height: 500px) and (min-width: 769px) {
    /* Phone held sideways: the viewer and its stage each reserve room for the controls, and the
       two stacked paddings would leave about a fifth of a 393px-high screen to the image. The
       stage padding alone clears the logo, the counter (top) and the dots (bottom). Narrower
       screens use the bottom toolbar layout below. */
    .lightbox { padding: 0; }
    .lightbox-stage { padding: 104px 70px 44px; }
}

@media (max-width: 768px) {
    /* Safe-area padding for notches. */
    .lightbox {
        padding: 0;
        padding-top: env(safe-area-inset-top, 0);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    /* Logo: raised, resized, still centred. */
    .lightbox-logo {
        font-size: 1.6rem;
        top: calc(12px + env(safe-area-inset-top, 0px));
        white-space: nowrap;
    }

    /* Smaller counter under the logo. */
    .lightbox-counter {
        top: calc(50px + env(safe-area-inset-top, 0px));
        font-size: 0.9rem;
    }

    /* On phones the toolbar moves to the bottom so it never overlaps the top logo. */
    .lightbox-tools {
        top: auto;
        bottom: calc(44px + env(safe-area-inset-bottom, 0px));
        right: 50%;
        transform: translateX(50%);
        gap: 24px;
        background: rgb(18 18 18 / 75%);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        border-radius: 30px;
        padding: 10px 22px;
        border: 1px solid rgb(255 255 255 / 8%);
    }

    /* Bigger tool buttons for fingers. */
    .lightbox-tool {
        padding: 8px;
        min-width: 44px;
        min-height: 44px;
    }

    .lightbox-tool svg {
        width: 22px;
        height: 22px;
    }

    /* The close button joins the bottom bar. */
    .lightbox-close {
        font-size: 2rem;
        padding: 8px;
        min-width: 44px;
        min-height: 44px;
    }

    /* Zoom slider: visible, in the bottom bar. */
    .lightbox-zoom {
        width: 90px;
        height: 36px;
        margin-right: 0;
    }

    /* Stage: the whole screen, leaving room for the logo and the bottom bar. No side room for
       the arrows: they are short and centred, so they float over the image, which gets the
       width back. Swiping stays the main gesture. */
    .lightbox-stage { padding: 70px 10px 120px; }

    .lightbox-arrow svg {
        width: 18px;
        height: 18px;
    }

    /* Dots raised so they clear the bar. */
    .lightbox-dots {
        bottom: calc(125px + env(safe-area-inset-bottom, 0px));
        gap: 12px;
    }

    .lightbox-dot {
        width: 10px;
        height: 10px;
    }

    /* The arrows join the toolbar: all controls form one bottom row, previous | fullscreen zoom
       close | next. A slight shadow keeps them legible over a light sheet. */
    .lightbox-arrow {
        padding: 12px 8px;
        min-width: 44px;
        top: auto;
        bottom: calc(44px + env(safe-area-inset-bottom, 0px));
        height: 70px;
        min-height: 70px;
        transform: none;
        filter: drop-shadow(0 0 6px rgb(0 0 0 / 85%));
    }

    .lightbox-arrow--prev { left: 14px; }
    .lightbox-arrow--next { right: 14px; }

    /* On touch, :hover sticks after a tap: without this rule the desktop translateY(-50%) would
       come back and the tapped arrow would jump 35px up. Only the colour change is kept. */
    .lightbox-arrow:hover,
    .lightbox-arrow:focus,
    .lightbox-arrow:active {
        transform: none;
    }
}

@media (max-width: 341px) {
    /* Very narrow phones: the toolbar (226px) is wider than the gap between the two arrows and
       would slide under them. Its spacing tightens; the buttons keep their 44px touch size. */
    .lightbox-tools {
        gap: 4px;
        padding: 10px 6px;
    }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 768px) {
    /* Small phone held sideways: logo, counter, dots and bottom toolbar would leave under 45% of
       the screen height to the image. The dots and the counter move to the logo row and the
       toolbar shrinks. Close button and arrows stay on the bottom row. */
    .lightbox-logo {
        top: 4px;
        font-size: 1.3rem;
    }

    .lightbox-counter {
        top: 12px;
        left: calc(50% + 56px);
        transform: none;
    }

    .lightbox-dots {
        inset: 16px 14px auto auto;
        transform: none;
    }

    .lightbox-tools {
        bottom: calc(4px + env(safe-area-inset-bottom, 0px));
        padding: 4px 22px;
    }

    .lightbox-arrow {
        bottom: calc(4px + env(safe-area-inset-bottom, 0px));
        height: 54px;
        min-height: 54px;
    }

    .lightbox-stage { padding: 40px 10px calc(62px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: no-preference) {
    /* Opening as a view transition: the default duration buries the movement. The sheet leads
       (slower, strongly decelerating, like lifting a sheet) and the rest fades out faster. With
       reduced motion the script opens the viewer without a transition. */
    ::view-transition-group(open-sheet) {
        animation-duration: 460ms;
        animation-timing-function: var(--ease-out);
    }

    ::view-transition-old(open-sheet),
    ::view-transition-new(open-sheet) {
        animation-duration: 460ms;
        animation-timing-function: var(--ease-out);
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 240ms;
    }
}

@keyframes lightbox-spin {
    to { transform: rotate(360deg); }
}

/* Any element that opens the viewer on its own. */
.lightbox-trigger { cursor: zoom-in; }