.pk-cases-map {
    --pk-cases-map-marker-live: var(--pk-color-accent);
    --pk-cases-map-marker-archive: var(--pk-color-title);
    --pk-cases-map-marker-selected: var(--pk-color-action);
    min-height: auto;
    padding-top: 0;
    padding-bottom: var(--sv-space-f-2xl);
}

.pk-cases-map__inner {
    display: flex;
    flex-direction: column;
    gap: var(--sv-space-f-lg);
}

.pk-cases-map__header {
    align-items: end;
}

.pk-cases-map__controls {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sv-space-b-md);
    border: 1px solid var(--pk-color-line);
    border-radius: var(--sv-space-b-lg);
    padding: var(--sv-space-b-md);
    background: var(--pk-case-surface);
    box-shadow: var(--pk-case-shadow);
}

.pk-cases-map__control {
    position: relative;
    min-width: 0;
    margin: 0;
    border: 0;
    padding: 0;
    display: block;
}

.pk-cases-map__control [sv-ui="combobox"] {
    --sv-combobox-border: var(--pk-color-line);
    --sv-combobox-background: var(--pk-case-surface);
    --sv-combobox-color: var(--pk-color-text);
    --sv-combobox-focus: var(--pk-color-accent);
    --sv-combobox-hover-background: var(--pk-content-soft);
    --sv-combobox-selected-background: var(--pk-content-soft);
    --sv-combobox-selected-color: var(--pk-color-title);
    --sv-combobox-radius: var(--sv-space-b-sm);
    --sv-combobox-shadow: var(--pk-case-shadow);
}

.pk-cases-map__control [sv-role="option"][aria-disabled="true"] {
    opacity: 0.55;
}

.pk-cases-map__control [sv-role="option"][aria-disabled="true"]:hover,
.pk-cases-map__control [sv-role="option"][aria-disabled="true"][data-active] {
    background: transparent;
}

.pk-cases-map__control select {
    width: 100%;
    min-height: 3rem;
    border: 1px solid var(--pk-color-line);
    border-radius: var(--sv-space-b-sm);
    padding: var(--sv-space-b-sm) var(--sv-space-b-md);
    background: var(--pk-case-surface);
    color: var(--pk-color-text);
    font: inherit;
}

.pk-cases-map__control select:focus-visible {
    border-color: var(--pk-color-accent);
    outline: 0;
    box-shadow: 0 0 0 var(--pk-case-focus-width) var(--pk-content-interactive-border);
}

.pk-cases-map__count {
    margin: 0;
    color: var(--pk-color-muted);
    font-size: var(--sv-fs-small);
    line-height: var(--sv-flh-small);
    white-space: nowrap;
}

.pk-cases-map__frame {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--pk-color-line);
    border-radius: var(--sv-space-b-lg);
    background: var(--pk-case-surface);
    box-shadow: var(--pk-case-shadow);
}

.pk-cases-map__canvas {
    width: 100%;
    height: 65vh;
    max-height: 600px;
    min-height: 0;
}

.pk-cases-map__marker--case {
    color: var(--pk-cases-map-marker-live);
    box-shadow: 0 0 0 0.25rem var(--pk-case-surface);
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.pk-cases-map__marker--archive {
    border-color: var(--pk-cases-map-marker-archive);
    background: var(--pk-case-surface);
    color: var(--pk-cases-map-marker-archive);
    box-shadow: 0 0 0 0.1875rem var(--pk-case-surface);
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.pk-cases-map__marker--case:hover,
.pk-cases-map__marker--archive:hover {
    border-color: var(--pk-cases-map-marker-selected);
    box-shadow: 0 0 0 0.3125rem var(--pk-case-surface);
}

.pk-cases-map__marker--selected {
    border-color: var(--pk-cases-map-marker-selected);
    background: var(--pk-cases-map-marker-selected);
    color: var(--pk-cases-map-marker-selected);
    box-shadow: 0 0 0 0.3125rem var(--pk-case-surface);
}

.pk-cases-map__cluster {
    border-color: var(--pk-color-accent);
    background: var(--pk-case-surface);
    color: var(--pk-color-title);
    box-shadow: var(--pk-case-shadow);
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.pk-cases-map__cluster:hover {
    border-color: var(--pk-cases-map-marker-selected);
    box-shadow: 0 0 0 0.25rem var(--pk-case-surface), var(--pk-case-shadow);
}

.pk-cases-map__card {
    position: absolute;
    z-index: 4;
    inset: 0 auto 0 0;
    display: flex;
    box-sizing: border-box;
    width: min(26rem, 42%);
    max-width: 100%;
    height: 100%;
    min-width: 0;
    max-height: 100%;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    border-right: 1px solid var(--pk-color-line);
    border-radius: 0;
    background: var(--pk-case-surface);
    box-shadow: var(--sv-space-b-sm) 0 var(--sv-space-f-lg) color-mix(in srgb, var(--pk-case-border) 72%, transparent);
}

.pk-cases-map__card[hidden],
.pk-cases-map__status[hidden],
.pk-cases-map__empty[hidden],
.pk-cases-map__card-single[hidden],
.pk-cases-map__card-media[hidden],
.pk-cases-map__card-link[hidden],
.pk-cases-map__card-back[hidden],
.pk-cases-map__cluster-header[hidden],
.pk-cases-map__cluster-panel[hidden],
.pk-cases-map__card-body [hidden] {
    display: none;
}

.pk-cases-map__card-actions {
    display: flex;
    min-width: 0;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sv-space-b-sm);
    border-bottom: 1px solid var(--pk-color-line);
    padding: var(--sv-space-b-sm) var(--sv-space-f-md);
}

.pk-cases-map__card-back,
.pk-cases-map__card-close {
    border: 1px solid var(--pk-color-line);
    background: var(--pk-case-surface);
    color: var(--pk-color-title);
    cursor: pointer;
    font: inherit;
}

.pk-cases-map__card-back {
    display: inline-flex;
    min-width: 0;
    align-self: stretch;
    align-items: center;
    margin-right: auto;
    border-radius: var(--sv-space-b-sm);
    padding: 0 var(--sv-space-b-sm);
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
}

.pk-cases-map__card-close {
    flex: 0 0 auto;
    width: var(--sv-space-i-xl);
    height: var(--sv-space-i-xl);
    border-radius: 50%;
    padding: 0;
}

.pk-cases-map__card-media {
    height: 9rem;
    background: var(--pk-content-soft);
}

.pk-cases-map__card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pk-cases-map__card-single {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: clip;
    overflow-y: auto;
}

.pk-cases-map__card-body {
    display: flex;
    flex-direction: column;
    gap: var(--sv-space-b-sm);
    padding: var(--sv-space-f-md);
}

.pk-cases-map__card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sv-space-b-xs);
    color: var(--pk-color-accent);
    font-size: var(--sv-fs-label);
    font-weight: var(--sv-fw-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pk-cases-map__card--archive .pk-cases-map__card-meta {
    color: var(--pk-color-muted);
}

.pk-cases-map__card h3,
.pk-cases-map__card p {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.pk-cases-map__card h3 {
    color: var(--pk-color-title);
    font-size: var(--sv-fs-lead);
    line-height: var(--sv-flh-lead);
}

.pk-cases-map__card p {
    color: var(--pk-color-body);
    font-size: var(--sv-fs-small);
    line-height: var(--sv-flh-small);
}

.pk-cases-map__card-link {
    align-self: flex-start;
    color: var(--pk-color-action);
    font-weight: var(--sv-fw-medium);
}

.pk-cases-map__cluster-panel {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
}

.pk-cases-map__cluster-header {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sv-space-b-xs);
}

.pk-cases-map__cluster-header h3,
.pk-cases-map__cluster-header p {
    margin: 0;
}

.pk-cases-map__cluster-header h3 {
    color: var(--pk-color-title);
    font-size: var(--sv-fs-small);
    line-height: var(--sv-flh-small);
}

.pk-cases-map__cluster-header p {
    color: var(--pk-color-muted);
    font-size: var(--sv-fs-label);
    line-height: var(--sv-flh-label);
}

.pk-cases-map__cluster-list {
    flex: 1 1 auto;
    max-height: none;
    min-width: 0;
    min-height: 0;
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.pk-cases-map__cluster-item {
    min-width: 0;
}

.pk-cases-map__cluster-item-button {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sv-space-b-xs);
    border: 0;
    border-bottom: 1px solid var(--pk-color-line);
    border-bottom-color: color-mix(in srgb, var(--pk-color-line) 70%, transparent);
    padding: var(--sv-space-b-md) var(--sv-space-f-md);
    background: transparent;
    color: var(--pk-color-text);
    cursor: pointer;
    font: inherit;
    text-align: left;
    text-decoration: none;
}

.pk-cases-map__cluster-item:last-child .pk-cases-map__cluster-item-button {
    border-bottom: 0;
}

.pk-cases-map__cluster-item-button:hover {
    background: var(--pk-content-soft);
}

.pk-cases-map__cluster-item-button:focus-visible {
    outline: var(--pk-case-focus-width) solid var(--pk-content-interactive-border);
    outline-offset: calc(-1 * var(--pk-case-focus-width));
}

.pk-cases-map__cluster-item-title {
    display: block;
    min-width: 0;
    color: var(--pk-color-title);
    font-weight: var(--sv-fw-medium);
    line-height: var(--sv-flh-small);
    overflow-wrap: anywhere;
    white-space: normal;
}

.pk-cases-map__cluster-item-meta {
    display: block;
    min-width: 0;
    color: var(--pk-color-muted);
    font-size: var(--sv-fs-label);
    line-height: var(--sv-flh-label);
    overflow-wrap: anywhere;
    white-space: normal;
}

.pk-cases-map__cluster-item-direction {
    color: var(--pk-color-accent);
    font-weight: var(--sv-fw-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pk-cases-map__status {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: var(--sv-space-f-xl);
    background: var(--pk-content-soft);
    color: var(--pk-color-body);
    text-align: center;
}

.pk-cases-map__progress {
    position: absolute;
    z-index: 3;
    top: var(--sv-space-b-md);
    left: 50%;
    display: flex;
    max-width: min(18rem, calc(100% - 2 * var(--sv-space-b-md)));
    flex-direction: column;
    gap: var(--sv-space-b-2xs);
    border: 1px solid var(--pk-color-line);
    border-radius: var(--sv-space-b-sm);
    padding: var(--sv-space-b-xs) var(--sv-space-b-sm);
    background: color-mix(in srgb, var(--pk-case-surface) 94%, transparent);
    box-shadow: var(--pk-case-shadow);
    color: var(--pk-color-title);
    font-size: var(--sv-fs-label);
    line-height: var(--sv-flh-label);
    opacity: 1;
    pointer-events: none;
    transform: translateX(-50%);
    transition: opacity 280ms ease;
}

.pk-cases-map__frame:has(.pk-cases-map__card:not([hidden])) .pk-cases-map__progress {
    left: 71%;
    max-width: min(18rem, calc(58% - 2 * var(--sv-space-b-md)));
}

.pk-cases-map__progress[hidden] {
    display: none;
}

.pk-cases-map__progress strong,
.pk-cases-map__progress span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.pk-cases-map__progress span {
    color: var(--pk-color-muted);
}

.pk-cases-map__progress--error {
    border-color: var(--pk-color-action);
}

.pk-cases-map__progress--leaving {
    opacity: 0;
}

.pk-cases-map__empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sv-space-b-md);
    border: 1px dashed var(--pk-color-line);
    border-radius: var(--sv-space-b-lg);
    padding: var(--sv-space-f-md);
    color: var(--pk-color-muted);
}

.pk-cases-map__empty p {
    margin: 0;
}

@media (max-width: 767px) {
    .pk-cases-map__header,
    .pk-cases-map__controls {
        align-items: stretch;
    }

    .pk-cases-map__controls {
        grid-template-columns: minmax(0, 1fr);
    }

    .pk-cases-map__count {
        justify-self: center;
    }

    .pk-cases-map__progress,
    .pk-cases-map__frame:has(.pk-cases-map__card:not([hidden])) .pk-cases-map__progress {
        left: 50%;
        max-width: calc(100% - 2 * var(--sv-space-b-md));
    }

    .pk-cases-map__empty {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 576px) {
    .pk-cases-map__card {
        inset: 0;
        width: 100%;
        max-width: none;
        border-right: 0;
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pk-cases-map *,
    .pk-cases-map *::before,
    .pk-cases-map *::after {
        scroll-behavior: auto;
        transition: none;
    }
}