@layer modules {

    /* Routes container — width constraints */
    .routes {
        --routes-item-padding-inline: 0;

        margin: 0 auto;
        max-inline-size: min(80ch, 100%);
    }

    /* Routes — group picker list */
    .routes__asset-list {
        list-style: none;
        margin: 0;
        padding: 0;
        padding-inline-start: var(--routes-item-padding-inline);
    }

    /* Execution report — grid layout for response rows */
    .execution-report__row {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 0 1ch;
        padding-inline: var(--space-half);
        padding-block: 0.4em;

        &>.separator--horizontal {
            width: 100%;
        }
    }

    .execution-report__response--alert {
        background-color: oklch(var(--lch-red-lightest) / 0.3);
    }

    /* Execution report — notes and files */
    .execution-report__note {
        grid-column: 1 / -1;
        width: fit-content;
        margin: 0.4em 0 0;
        padding: 0.3em 0.75em;
        display: flex;
        align-items: center;
        gap: 0.5ch;
        background-color: var(--color-highlight);
        border-radius: 0.3em;
    }

    .execution-report__files {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5em;
        padding-block-start: 0.25em;
    }

    .execution-report__file-img {
        display: block;
        max-width: 8rem;
        max-height: 6rem;
        border-radius: var(--radius, 4px);
        object-fit: cover;
        cursor: zoom-in;
    }

    /* Execution report — multi-check subchecks */
    .execution-report__subchecks {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
    }

    .execution-report__subcheck {
        display: flex;
        align-items: center;
        gap: 0.5ch;
        padding-inline-start: 0.5em;
    }

    .execution-report__subcheck--fail {
        color: oklch(var(--lch-red-dark));
        font-weight: 500;
    }

    /* Route editor — turbo-frame layout */
    [data-item]>turbo-frame {
        display: contents;
    }

    /* Route editor — drag-and-drop affordances */
    .drag-handle {
        display: inline-flex;
        cursor: grab;
        padding: 0.25em;
    }

    .drag-handle:active {
        cursor: grabbing;
    }

    .sortable-ghost {
        opacity: 0.3;
    }

    .sortable-chosen {
        box-shadow: 0 2px 8px oklch(0% 0 0 / 0.15);
    }

    [data-route-editor-target="itemList"]:empty {
        min-block-size: 2em;
        border: 1px dashed var(--color-ink-lighter);
        border-radius: 0.5em;
    }

    /* Non-conformity stamp on asset detail card (mirrors .card__closed pattern) */
    .card__nc-stamp {
        --stamp-color: oklch(var(--lch-red-medium) / 0.65);

        align-items: center;
        background-color: color-mix(in srgb, var(--card-bg-color) 90%, transparent);
        border-radius: 0.2em;
        border: 0.5ch solid var(--stamp-color);
        color: var(--color-ink-dark);
        display: flex;
        flex-direction: column;
        font-weight: bold;
        inset: auto 1ch 1ch auto;
        justify-content: center;
        max-inline-size: 25ch;
        min-inline-size: 16ch;
        padding: 1ch;
        position: absolute;
        rotate: -3deg;
        text-decoration: none;
        transform-origin: top right;
    }

    .card__nc-stamp-title {
        color: var(--stamp-color);
        font-size: 1.3em;
        font-weight: 900;
        text-align: center;
        text-transform: uppercase;
    }

    .card__nc-stamp-date {
        font-family: var(--font-mono);
        text-transform: uppercase;
    }

    .card__nc-stamp-by {
        border-block-end: 1px dashed currentcolor;
    }

    /* Non-conformity panel in comments section (mirrors comment-by-system look) */
    .nc-panel {
        display: flex;
        margin-inline: auto;
        max-inline-size: var(--comment-max, 70ch);

        &::before {
            content: "";
            display: flex;
            inline-size: calc(var(--comment-padding-inline, 2ch) * 0.9);
            flex-shrink: 0;
        }
    }

    .nc-panel__content {
        --stripe-color: color-mix(in srgb, var(--color-negative) 10%, var(--color-canvas));

        background-color: var(--color-ink-lightest);
        background-image: repeating-linear-gradient(45deg in srgb,
                var(--color-canvas) 0 1px,
                var(--stripe-color) 1px 10px);
        border-radius: 0.2em;
        flex-grow: 1;
        padding: var(--block-space-half, 0.75em) var(--comment-padding-inline, 2ch);
        text-align: start;
    }

    /* Non-conformity row in asset panel */
    .asset-nc-row {
        padding-block: 0.5em;

        &:not(:last-child) {
            border-block-end: 1px solid var(--color-ink-lighter);
        }
    }

    /* Resolved state in execution report */
    .execution-report__response--resolved {
        opacity: 0.5;

        & .badge {
            background-color: var(--color-positive);
        }
    }

    /* Resolution form in resolve turbo-frame */
    .resolve-form {
        display: flex;
        flex-direction: column;
        gap: var(--space-half);
        padding: var(--space-half);
        background: var(--color-highlight);
        border-radius: 0.5em;
        margin-block-start: 0.25em;
    }

    .resolve-form__buttons {
        display: flex;
        gap: 0.5ch;
        justify-content: flex-end;
    }

    /* Resolution timeline entry - green accent */
    .comment-by-system--resolution {
        --card-color: var(--color-positive);
    }

    /* Execution UI
  /* ------------------------------------------------------------------------ */

    .execution__progress {
        position: sticky;
        top: 0;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 2.5em;
        background: var(--color-canvas);
        border-block-end: 1px solid var(--color-ink-lighter);
        margin-block-end: var(--space);
    }

    .execution__progress-fill {
        position: absolute;
        inset: 0;
        background: oklch(var(--lch-green-lightest) / 0.5);
        transform-origin: left;
        transform: scaleX(var(--progress, 0));
        transition: transform 0.25s ease;
    }

    .execution__progress-text {
        position: relative;
        font-size: var(--text-small);
        font-weight: 600;
    }

    .execution__item {
        display: flex;
        flex-direction: column;
        gap: var(--space-half);
        padding: var(--space-half) var(--space-half);

        &:nth-child(odd) {
            background: oklch(var(--lch-ink-lightest) / 0.3);
        }
    }

    .execution__item-label {
        padding-block-end: 0.25em;
    }

    .execution__severity {
        margin-inline-start: 0.5ch;
    }

    .execution__check-row {
        display: flex;
        flex-direction: column;
        gap: 0.25em;
        padding-block: 0.4em;

        &:not(:last-child) {
            border-block-end: 1px solid var(--color-ink-lighter);
        }
    }

    .execution__notes {
        summary {
            cursor: pointer;
            list-style: none;

            &::marker,
            &::-webkit-details-marker {
                display: none;
            }
        }

        textarea {
            margin-block-start: 0.25em;
            inline-size: 100%;
        }
    }

    .execution__wizard-nav {
        position: sticky;
        bottom: 0;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-half);
        background: var(--color-canvas);
        border-block-start: 1px solid var(--color-ink-lighter);
    }

    .execution__actions {
        display: flex;
        justify-content: center;
        padding-block: var(--space);
    }

    @media (min-width: 640px) {
        .execution__wizard-nav {
            display: none;
        }
    }
}