html:has(body.map-page),
body.map-page {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
}

body.map-page .map-container {
    width: 100%;
    height: calc(100svh - 68px);
    margin-top: 68px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: #05030b;
}

body.map-page .map-intro {
    display: grid;
    padding: 14px clamp(16px, 2vw, 32px) 12px;
    color: #f7f3ff;
    background: radial-gradient(circle at 15% 0%, rgba(126, 82, 190, .28), transparent 42%), #0b0711;
}

body.map-page .map-intro > div {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px 32px;
}
body.map-page .map-intro span { color: #bea2e8; font-size: .74rem; letter-spacing: .18em; }
body.map-page .map-intro h1 { margin: 4px 0 3px; font-size: clamp(1.45rem, 1.6vw, 2rem); line-height: 1.05; }
body.map-page .map-intro p { margin: 0; max-width: 760px; color: #c9c0d2; font-size: .82rem; line-height: 1.35; }
body.map-page .map-intro-links {
    grid-column: 2;
    grid-row: 1 / span 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
}
body.map-page .map-intro-links a {
    padding: 7px 10px;
    border: 1px solid rgba(190, 162, 232, .35);
    border-radius: 999px;
    color: #eee5fb;
    text-decoration: none;
    background: rgba(126, 82, 190, .12);
}
body.map-page .map-intro-links a:hover,
body.map-page .map-intro-links a:focus-visible { border-color: #bea2e8; background: rgba(126, 82, 190, .24); }

body.map-page .map-viewer {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: 44px minmax(0, 1fr);
    overflow: hidden;
    background: #05030b;
}

body.map-page .map-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 5px 12px;
    border-bottom: 1px solid rgba(190, 162, 232, .16);
    background: #0b0711;
}

body.map-page .map-viewer iframe {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    display: block;
}

body.map-page .map-fullscreen {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    border: 1px solid rgba(232, 218, 255, .32);
    border-radius: 9px;
    color: #f7f3ff;
    background: rgba(12, 8, 20, .88);
    box-shadow: 0 5px 16px rgba(0, 0, 0, .28);
    font: 700 .78rem/1 system-ui, sans-serif;
    cursor: pointer;
}

body.map-page .map-fullscreen:hover { background: rgba(42, 27, 62, .94); }
body.map-page .map-fullscreen:focus-visible { outline: 2px solid #d8b8ff; outline-offset: 2px; }
body.map-page .map-fullscreen svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
body.map-page .map-fullscreen-exit { display: none; }
body.map-page .map-fullscreen[aria-pressed="true"] .map-fullscreen-enter { display: none; }
body.map-page .map-fullscreen[aria-pressed="true"] .map-fullscreen-exit { display: block; }

body.map-page .map-viewer:fullscreen {
    width: 100vw;
    height: 100vh;
    background: #05030b;
}

body.map-page .map-viewer:fullscreen iframe { width: 100%; height: 100%; }

/* The shared header uses a three-column grid. On an ultrawide map page its
   navigation is centered in the leftover column, not in the viewport. Keep
   the brand and actions at the edges, while the navigation is truly centered. */
@media (min-width: 1181px) {
    body.map-page .kwd-header-inner {
        position: relative;
        display: flex !important;
        justify-content: space-between;
    }

    body.map-page .kwd-header .kwd-brand,
    body.map-page .kwd-header .kwd-header-actions {
        position: relative;
        z-index: 1;
        flex: 0 0 auto;
    }

    body.map-page .kwd-header .kwd-nav {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: max-content;
    }
}

@media (min-width: 1500px) {
    body.map-page .map-container {
        height: calc(100svh - 78px);
        margin-top: 78px;
    }
}

@media (max-width: 900px) {
    body.map-page .map-intro > div { grid-template-columns: 1fr; }
    body.map-page .map-intro-links {
        grid-column: 1;
        grid-row: auto;
        justify-content: flex-start;
        margin-top: 8px;
    }
}

@media (max-width: 640px) {
    body.map-page .map-container {
        height: calc(100svh - 62px);
        margin-top: 62px;
    }
    body.map-page .map-intro { padding: 14px 16px 12px; }
    body.map-page .map-intro p { display: none; }
    body.map-page .map-intro h1 { font-size: clamp(1.55rem, 8vw, 2.1rem); }
    body.map-page .map-intro-links a { padding: 7px 10px; font-size: .82rem; }
    body.map-page .map-toolbar { padding-inline: 8px; }
    body.map-page .map-fullscreen { padding-inline: 10px; }
    body.map-page .map-fullscreen span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}