@layer components {

    /* Thermography overlay — works inside .attachment cards.
     * Removes the square aspect-ratio so the image keeps its natural
     * proportions and hotspot dots map to correct pixel positions.
     */
    .thermography-overlay {
        position: relative;
    }

    /* Hotspot dots — positioned at cluster pixel coordinates */
    .thermography-hotspot {
        appearance: none;
        block-size: 0.6em;
        border: 1.5px solid var(--color-canvas);
        border-radius: 50%;
        box-shadow: 0 0 0 1px oklch(0% 0 0 / 0.4);
        cursor: pointer;
        inline-size: 0.6em;
        margin: -0.3em 0 0 -0.3em;
        padding: 0;
        position: absolute;
        transition: scale 100ms ease-out;
        z-index: 1;

        @media (any-hover: hover) {
            &:hover {
                scale: 1.5;
            }
        }
    }

    /* Severity colours: 2=MINOR (yellow/orange), 3=MAJOR (red) */
    .thermography-hotspot--2 {
        background-color: oklch(var(--lch-yellow-medium));
    }

    .thermography-hotspot--3 {
        background-color: oklch(var(--lch-red-medium));
    }

    /* Tooltip shown on dot focus/hover — uses fixed positioning
       so it escapes overflow-clipping ancestors (thumbnail cards). */
    .thermography-tooltip {
        background-color: var(--color-ink);
        border-radius: 0.3em;
        color: var(--color-canvas);
        font-size: var(--text-small);
        margin: 0;
        padding: 0.3em 0.6em;
        pointer-events: none;
        position: fixed;
        text-align: center;
        transform: translate(-50%, -100%);
        white-space: nowrap;
        z-index: 10000;

        &::after {
            border: 0.3em solid transparent;
            border-block-start-color: var(--color-ink);
            content: "";
            inset-block-start: 100%;
            inset-inline-start: 50%;
            margin-inline-start: -0.3em;
            position: absolute;
        }
    }

    .thermography-tooltip__temp {
        font-weight: 600;
    }

    .thermography-tooltip__delta {
        color: oklch(80% 0 0);
        margin-inline-start: 0.4em;
    }

    /* Full-size overlay inside the lightbox dialog */
    .thermography-lightbox {
        display: inline-block;
        position: relative;

        .lightbox__image {
            display: block;
            max-block-size: 80vh;
            max-inline-size: 90vw;
        }

        .thermography-hotspot {
            block-size: 1em;
            border-width: 2px;
            inline-size: 1em;
            margin: -0.5em 0 0 -0.5em;
        }
    }
}