.heatmap-tabs,
.heatmap-rail {
    display: none;
}

@media (min-width: 1024px) {
    body:has(.toc.heatmap-show-maps) {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 1024px) {
    .heatmap-tabs {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .heatmap-tabs button {
        padding: 0.25rem 0.5rem;
        border-bottom: 2px solid transparent;
        cursor: pointer;
    }

    .heatmap-tabs button[aria-selected="true"] {
        border-bottom-color: currentColor;
        font-weight: 600;
    }

    .heatmap-show-maps #TOCView {
        display: none;
    }

    .toc.heatmap-show-maps {
        width: min(500px, 35vw);
    }

    div:has(> .toc.heatmap-show-maps) {
        max-width: none;
    }

    .heatmap-rail:not([hidden]) {
        display: flex;
        width: 100%;
        max-width: 100%;
        max-height: calc(100vh - 8rem);
        flex-direction: column;
        gap: 0.75rem;
        padding-right: 1.25rem;
        padding-left: 1.25rem;
        border-left: 1px dotted rgb(212 212 212);
        overflow-y: auto;
    }

    .dark .heatmap-rail:not([hidden]) {
        border-left-color: rgb(82 82 82);
    }

    .heatmap-rail__title {
        margin: 0 0 0.4rem;
        font-size: 0.875rem;
        font-weight: 600;
        line-height: 1.3;
    }

    .heatmap-rail__map {
        flex: none;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        border: 1px solid rgb(212 212 212);
        border-radius: 0.5rem;
        background: white;
    }

    .dark .heatmap-rail__map {
        border-color: rgb(82 82 82);
        background: rgb(38 38 38);
    }

    .heatmap-rail__map iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
    }
}