@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;
    }

    /* Grey "processing…" placeholder shown after upload until the Celery
     * thermography pipeline writes hot_clusters. The thermogram-poll
     * controller polls the check endpoint and swaps this tile for the
     * real image + hotspots via a Turbo Stream replace. */
    .attachment--processing {
        align-items: center;
        aspect-ratio: 4 / 3;
        background-color: oklch(var(--lch-ink-lightest, 90% 0 0));
        block-size: var(--attachment-height, 8rem);
        border-radius: 0.3em;
        color: var(--color-ink-subtle);
        display: flex;
        inline-size: auto;
        justify-content: center;
        position: relative;

        .attachment__placeholder {
            align-items: center;
            display: flex;
            flex-direction: column;
            gap: 0.25em;
        }

        .icon {
            --icon-size: 1.4em;
            animation: attachment-processing-pulse 1400ms ease-in-out infinite;
            opacity: 0.6;
        }
    }

    @keyframes attachment-processing-pulse {
        0%, 100% { opacity: 0.35; }
        50%      { opacity: 0.85; }
    }

    /* 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;
        }
    }
}