@layer components {
    .map-shell {
        display: grid;
        gap: var(--space-4);
    }

    @media (min-width: 1024px) {
        .map-shell {
            grid-template-columns: 1fr 320px;
            align-items: start;
        }
    }

    .map-viewport {
        position: relative;
        overflow: hidden;
        height: min(70vh, 640px);
        border: 1px solid var(--line);
        border-radius: var(--radius-l);
        background: var(--sky-tint);
        touch-action: none;
        cursor: grab;
    }

    .map-viewport.is-dragging {
        cursor: grabbing;
    }

    .map-tile {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        width: 256px;
        height: 256px;
        pointer-events: none;
        user-select: none;
    }

    .map-marker {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--touch-target);
        height: var(--touch-target);
        margin-block-start: calc(var(--touch-target) / -2);
        margin-inline-start: calc(var(--touch-target) / -2);
        border-radius: var(--radius-round);
        border: 2px solid var(--paper);
        background: var(--sky);
        color: var(--paper);
        font-weight: 600;
        text-decoration: none;
        box-shadow: var(--shadow-2);
    }

    .map-marker[data-accent="moss"] {
        background: var(--moss);
    }

    .map-marker[data-accent="sky-deep"] {
        background: var(--sky-deep);
    }

    .map-marker[data-kind="classified"] {
        background: var(--wheat);
        color: var(--soil);
        border-color: var(--soil);
        border-radius: var(--radius-m);
    }

    .map-marker[data-accent="fog"] {
        background: var(--fog);
    }

    .map-marker-cluster {
        background: var(--soil);
        font-family: var(--font-data);
    }

    .map-controls {
        position: absolute;
        inset-block-start: var(--space-3);
        inset-inline-end: var(--space-3);
        display: grid;
        gap: var(--space-2);
        z-index: 5;
    }

    .map-attribution {
        position: absolute;
        inset-block-end: 0;
        inset-inline-end: 0;
        padding: 2px var(--space-2);
        background: var(--paper);
        font-size: var(--size-micro);
        color: var(--soil);
        z-index: 5;
    }

    .map-side-list {
        display: grid;
        gap: var(--space-2);
        max-height: min(70vh, 640px);
        overflow-y: auto;
    }

    .map-side-list li {
        display: grid;
        gap: 2px;
        padding: var(--space-2);
        border: 1px solid var(--line);
        border-radius: var(--radius-m);
    }

    .map-side-list a {
        min-height: var(--touch-target);
        display: inline-flex;
        align-items: center;
    }

    .map-side-list span {
        color: var(--fog);
        font-size: var(--size-small);
    }
}