@layer components {

    /* Measurement form
    /* -------------------------------------------------------------------- */

    .measurement-form {
        min-inline-size: 0;
        max-inline-size: 100%;
    }

    .measurement-form__files {
        border: 0;
        margin: 0;
        padding: 0;

        legend {
            padding: 0;
        }
    }

    .measurement-form__upload-row {
        display: grid;
        gap: var(--inline-space, 1ch);
        grid-template-columns: 1fr;

        @media (min-width: 100ch) {
            grid-template-columns: 1fr 1fr;
        }
    }

    .measurement-form__upload-cell {
        min-inline-size: 0;
    }

    /* Upload button (wraps a visually-hidden file input)
    /* -------------------------------------------------------------------- */

    .measurement-form__upload-btn {
        background-color: var(--surface, var(--color-canvas));
        border: 1px solid var(--rule-soft, var(--color-ink-light));
        border-radius: 2px;
        cursor: pointer;
        display: flex;
        position: relative;
        transition: border-color 80ms ease-out, background-color 80ms ease-out;

        input[type="file"] {
            border: 0;
            clip: rect(0 0 0 0);
            block-size: 1px;
            inline-size: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            white-space: nowrap;
        }

        @media (any-hover: hover) {
            &:hover {
                border-color: var(--rule, var(--color-ink));
                background-color: var(--surface-raised, var(--color-ink-lightest));

                .measurement-form__upload-slot {
                    border-inline-end-color: var(--rule, var(--color-ink));
                    color: var(--ink, var(--color-ink));
                }

                .measurement-form__upload-cta {
                    color: var(--ink, var(--color-ink));
                }
            }
        }

        &:focus-within {
            border-color: var(--color-selected);
            outline: 2px solid var(--color-selected);
            outline-offset: 2px;
        }

        /* Filed state — border solidifies, slot brightens */
        &.measurement-form__upload-btn--has-files {
            border-color: var(--rule, var(--color-ink-light));
            background-color: var(--surface-raised, var(--color-ink-lightest));

            .measurement-form__upload-slot {
                border-inline-end-color: var(--rule, var(--color-ink-light));
                color: var(--ink, var(--color-ink));
            }

            .measurement-form__upload-cta {
                color: var(--ink-soft, var(--color-ink-medium));
            }
        }

        /* Compact variant for route editor rows (old centered layout) */
        &.measurement-form__upload-btn--compact {
            align-items: center;
            font-size: var(--text-small, 0.85em);
            gap: 0.25em;
            justify-content: center;
            min-block-size: 0;
            padding: 0.35em 0.6em;
        }

        /* Old centered layout fallback (execution card, saved state) */
        &:not(:has(.measurement-form__upload-slot)) {
            align-items: center;
            border-style: dashed;
            font-size: 1em;
            font-weight: 600;
            gap: 0.5em;
            justify-content: center;
            min-block-size: 3.5em;
            padding: 0.75em 1em;

            &.measurement-form__upload-btn--has-files {
                border-style: solid;
            }
        }
    }

    /* Icon slot — square tinted block anchored to the left edge */
    .measurement-form__upload-slot {
        align-items: center;
        background-color: var(--surface-overlay, var(--color-ink-lightest));
        border-inline-end: 1px solid var(--rule-soft, var(--color-ink-light));
        color: var(--ink-soft, var(--color-ink-medium));
        display: flex;
        flex: none;
        font-size: 1.1em;
        inline-size: 3em;
        justify-content: center;
        min-block-size: 3em;
        transition: border-inline-end-color 80ms ease-out, color 80ms ease-out;
    }

    /* Center info block */
    .measurement-form__upload-info {
        align-items: flex-start;
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
        padding-block: 0.625em;
        padding-inline: 0.875em;
    }

    /* Mono uppercase type label */
    .measurement-form__upload-type {
        color: var(--ink, var(--color-ink));
        font-family: var(--font-data);
        font-size: 0.625rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    /* Right-rail CTA text */
    .measurement-form__upload-cta {
        align-items: center;
        color: var(--ink-soft, var(--color-ink-medium));
        display: flex;
        flex: none;
        font-family: var(--font-data);
        font-size: 0.5rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        padding-inline: 0.875em;
        text-transform: uppercase;
        transition: color 80ms ease-out;
    }

    /* Small photo-count pill (compact variant) */
    .measurement-form__upload-count {
        font-variant-numeric: tabular-nums;
        font-weight: 600;

        &[hidden] {
            display: none;
        }
    }

    /* File previews — stamps that hang off the bottom of the upload button
    /* -------------------------------------------------------------------- */

    .measurement-form__preview {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35em;
        inset-inline-start: 0.75em;
        position: absolute;
        inset-block-end: 0;
        transform: translateY(50%);
        z-index: 1;

        &:empty {
            display: none;
        }
    }

    /* Image stamp */
    .measurement-form__preview-item {
        position: relative;
    }

    .measurement-form__preview-thumb {
        block-size: 2.5em;
        border: 2px solid var(--color-canvas);
        border-radius: 0.3em;
        box-shadow: 0 1px 3px oklch(0% 0 0 / 0.15);
        display: block;
        inline-size: 2.5em;
        object-fit: cover;
    }

    /* File icon stamp (non-image files like .dr) */
    .measurement-form__preview-file {
        --icon-size: 1.6em;

        align-items: center;
        background-color: var(--color-canvas);
        block-size: 2.5em;
        border: 2px solid var(--color-canvas);
        border-radius: 0.3em;
        box-shadow: 0 1px 3px oklch(0% 0 0 / 0.15);
        display: flex;
        inline-size: 2.5em;
        justify-content: center;
    }

    /* Circle × at top-left of the stamp */
    .measurement-form__preview-remove {
        --size: 1.25em;

        align-items: center;
        appearance: none;
        background-color: var(--color-ink);
        block-size: var(--size);
        border: 2px solid var(--color-canvas);
        border-radius: 50%;
        color: var(--color-canvas);
        cursor: pointer;
        display: flex;
        inline-size: var(--size);
        inset-block-start: -0.35em;
        inset-inline-start: -0.35em;
        justify-content: center;
        padding: 0;
        position: absolute;
        z-index: 2;

        .icon {
            font-size: 0.5em;
        }

        @media (any-hover: hover) {
            &:hover {
                background-color: var(--color-ink-dark);
            }
        }
    }

    /* Extra bottom padding on the row when any stamp hangs below */
    .measurement-form__upload-row:has(.measurement-form__upload-btn--has-files) {
        padding-block-end: 1.5em;
    }

    /* Notes — instrument cell matching the upload buttons
    /* -------------------------------------------------------------------- */

    .measurement-form__notes-cell {
        border: 1px solid var(--rule-soft, var(--color-ink-light));
        border-radius: 2px;
        transition: border-color 80ms ease-out;

        &:focus-within {
            border-color: var(--rule, var(--color-ink));
            outline: 2px solid var(--color-selected);
            outline-offset: 2px;
        }
    }

    /* Header row — reuses upload-slot + upload-type for visual unity */
    .measurement-form__notes-head {
        align-items: stretch;
        border-block-end: 1px solid var(--rule-soft, var(--color-ink-light));
        display: flex;
        min-block-size: 3em;

        .measurement-form__upload-type {
            align-self: center;
            padding-inline: 0.875em;
        }
    }

    /* Notes — .comments wrapper provides the custom-property context
     * (--comment-padding-inline etc.) that .comment__content needs.
     * Reset container-level layout so it sits inline inside the form.
     * Strip the gray card appearance when inside the notes cell.
     */
    .measurement-form__comments-wrap {
        --comment-max: none;

        display: block;
        min-inline-size: 0;
        max-inline-size: 100%;
        padding: 0;
        place-items: unset;
        text-align: start;

        .comment {
            max-inline-size: none;
        }

        .comment__content {
            background-color: transparent;
            background-image: none;
            inline-size: 100%;
            max-inline-size: 100%;
            padding: 0;
        }

        trix-toolbar {
            margin-inline: 0;
            padding-inline: 0.875em;
        }

        trix-editor {
            min-block-size: 5em;
            padding: 0.75em 0.875em;
        }
    }

    /* Inline notes — click-to-edit inside the measurement card
    /* -------------------------------------------------------------------- */

    .measurement-notes {
        margin-block: var(--block-space-half);
        text-align: start;
    }

    .measurement-notes--display,
    .measurement-notes--empty {
        border: 1px dashed transparent;
        border-radius: 0.3em;
        color: inherit;
        cursor: text;
        display: block;
        padding: 0.4em 0.6em;
        transition: border-color 100ms ease-out, background-color 100ms ease-out;

        @media (any-hover: hover) {
            &:hover {
                background-color: var(--color-ink-lightest);
                border-color: var(--color-ink-light);
            }
        }

        /* Don't override cursor on trix attachment links inside the note */
        a {
            cursor: pointer;
        }
    }

    .measurement-notes--display .trix-content {
        margin: 0;

        img {
            max-block-size: 10rem;
        }
    }

    .measurement-notes--empty {
        border-style: dashed;
        border-color: var(--color-ink-light);
    }

    .measurement-notes__actions {
        display: flex;
        gap: 0.5em;
        margin-block-start: 0.5em;
    }

    /* Attachment grid (measurement detail)
    /* -------------------------------------------------------------------- */

    .attachments {
        --attachment-height: var(--attachment-lg);

        display: flex;
        gap: 0.4em;
        overflow-x: auto;
        padding-block-end: 0.4em;
        padding-inline-end: 0.4em;
    }

    .attachments > .attachment {
        border-radius: 0.3em;
        box-shadow: 0 1px 3px oklch(0% 0 0 / 0.15);
        flex: none;
        block-size: var(--attachment-height);
        position: relative;
    }

    .attachments > .attachment .attachment__thumb {
        block-size: 100%;
        border-radius: 0.3em;
        cursor: zoom-in;
        display: block;
        inline-size: auto;
    }

    .attachment__icon {
        --icon-size: 2em;

        align-items: center;
        aspect-ratio: 1;
        background-color: var(--color-ink-lightest);
        block-size: 100%;
        border-radius: 0.3em;
        color: var(--color-ink-subtle);
        display: flex;
        justify-content: center;
    }

    /* Circle download badge — overlaps bottom-right corner */
    .attachment__download {
        --size: 1.5em;

        align-items: center;
        appearance: none;
        background-color: var(--color-ink);
        block-size: var(--size);
        border: 2px solid var(--color-canvas);
        border-radius: 50%;
        color: var(--color-canvas);
        cursor: pointer;
        display: flex;
        inline-size: var(--size);
        inset-block-end: -0.3em;
        inset-inline-end: -0.3em;
        justify-content: center;
        padding: 0;
        position: absolute;
        z-index: 2;

        .icon {
            font-size: 0.5em;
        }

        @media (any-hover: hover) {
            &:hover {
                background-color: var(--color-ink-dark);
            }
        }
    }
}

@layer modules {

    /* Measurement capture page
    /* -------------------------------------------------------------------- */

    .measurement-capture {
        display: flex;
        flex-direction: column;
        gap: var(--block-space, 1.25rem);
        margin-inline: auto;
        max-inline-size: var(--main-width);
        padding-block-end: var(--block-space, 1.25rem);
        text-align: start;
    }

    /* Measurement hero — extends .asset-hero, adds topology row
    /* -------------------------------------------------------------------- */

    .measurement-hero__topology {
        border-block-start: 1px solid var(--rule-soft, var(--color-ink-lightest));
        grid-column: 1 / -1;
        padding-block-start: 0.625rem;

        .machine-body {
            --machine-body-height: 2em;
            --sensor-circle-size: calc(var(--machine-body-height) * 0.7);
        }
    }

    /* Alarm gauge bar
    /* -------------------------------------------------------------------- */

    .alarm-gauge {
        --gauge-minor: 33%;
        --gauge-major: 67%;
        --gauge-value: 0%;

        display: flex;
        flex-direction: column;
        gap: 0.4em;
    }

    .alarm-gauge__track {
        background: linear-gradient(
            to right,
            oklch(var(--lch-green-light)) var(--gauge-minor),
            oklch(var(--lch-yellow-light)) var(--gauge-minor) var(--gauge-major),
            oklch(var(--lch-red-light)) var(--gauge-major)
        );
        block-size: 6px;
        border-radius: 3px;
        position: relative;

        &::after {
            background-color: var(--ink);
            block-size: 150%;
            border-radius: 2px;
            content: "";
            inline-size: 2px;
            inset-block-start: -25%;
            inset-inline-start: var(--gauge-value);
            position: absolute;
            transform: translateX(-50%);
        }
    }

    .alarm-gauge__labels {
        color: var(--ink-soft, var(--color-ink-medium));
        display: flex;
        font-family: var(--font-data);
        font-size: 0.625rem;
        justify-content: space-between;
        letter-spacing: 0.06em;
    }

    .alarm-gauge__label-mid {
        color: var(--ink-soft);
        text-align: center;
    }
}