@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 {
        --btn-background: var(--color-canvas);

        align-items: center;
        background-color: var(--btn-background);
        border: 1px dashed var(--color-ink-light);
        border-radius: 0.5em;
        cursor: pointer;
        display: flex;
        font-size: 1em;
        font-weight: 600;
        gap: 0.5em;
        justify-content: center;
        min-block-size: 3.5em;
        padding: 0.75em 1em;
        position: relative;
        transition: border-color 100ms ease-out, background-color 100ms 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(--color-ink);
                background-color: var(--color-ink-lightest);
            }
        }

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

        /* Solid border once files are selected */
        &.measurement-form__upload-btn--has-files {
            border-style: solid;
        }
    }

    /* 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 — .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.
     */
    .measurement-form__comments-wrap {
        display: block;
        min-inline-size: 0;
        max-inline-size: 100%;
        overflow: hidden;
        padding: 0;
        place-items: unset;
        text-align: start;
    }

    /* 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: 8rem;

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