@layer components {
    /* Bottom sheet on mobile, inline panel on desktop */
    .nur-sheet {
        position: fixed;
        inset: 0;
        z-index: 90;
        display: flex;
        align-items: flex-end;
        visibility: hidden;
    }

    .nur-sheet.is-open {
        visibility: visible;
    }

    .nur-sheet__scrim {
        position: absolute;
        inset: 0;
        background: rgba(10, 31, 71, 0.5);
        opacity: 0;
        transition: opacity 0.25s;
    }

    .nur-sheet.is-open .nur-sheet__scrim {
        opacity: 1;
    }

    .nur-sheet__panel {
        position: relative;
        width: 100%;
        max-height: 88dvh;
        overflow-y: auto;
        padding: var(--nur-space-5) var(--nur-gutter) calc(var(--nur-space-5) + env(safe-area-inset-bottom));
        border-radius: var(--nur-radius-lg) var(--nur-radius-lg) 0 0;
        background: var(--nur-surface);
        transform: translateY(100%);
        transition: transform 0.28s var(--nur-ease);
        overscroll-behavior: contain;
    }

    .nur-sheet.is-open .nur-sheet__panel {
        transform: none;
    }

    .nur-sheet__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--nur-space-4);
    }

    @media (min-width: 1024px) {
        .nur-sheet--responsive {
            position: static;
            z-index: auto;
            visibility: visible;
        }

        .nur-sheet--responsive .nur-sheet__scrim,
        .nur-sheet--responsive .nur-sheet__close {
            display: none;
        }

        .nur-sheet--responsive .nur-sheet__panel {
            max-height: none;
            border: 1px solid var(--nur-line);
            border-radius: var(--nur-radius);
            transform: none;
        }
    }
}