.reconnaissance-map {
    --reconnaissance-panel-top: 164px;
    color: #26352b;
    font: 13px/1.4 system-ui, sans-serif;
    grid-column: 1 / -1;
}

.reconnaissance-map[hidden],
.reconnaissance-map-panel[hidden] { display: none; }

/* A panel inside journey-controls must rise above the sibling HUD cards. */
#journey-controls:has(.reconnaissance-map-toggle[aria-expanded="true"]) { z-index: 130; }
html[data-reconnaissance="true"] #journey-actions > * { flex-shrink: 0; white-space: nowrap; }

.reconnaissance-map-toggle {
    min-height: 38px;
    padding: 7px 13px;
    color: #26352b;
    background: #fff1d3;
    border: 2px solid #926842;
    border-radius: 9px;
    font: inherit;
    font-weight: 650;
    cursor: pointer;
    touch-action: manipulation;
    white-space: nowrap;
}

.reconnaissance-map-toggle[aria-expanded="true"] { background: #e3eed0; }
.reconnaissance-map-toggle:focus-visible,
.reconnaissance-map-text summary:focus-visible { outline: 3px solid #13596b; outline-offset: 3px; }

.reconnaissance-map-panel {
    white-space: normal;
    position: fixed;
    z-index: 120;
    left: 20px;
    top: var(--reconnaissance-panel-top);
    box-sizing: border-box;
    width: min(310px, calc(100vw - 40px));
    max-height: calc(100vh - var(--reconnaissance-panel-top) - 190px);
    max-height: calc(100dvh - var(--reconnaissance-panel-top) - 190px);
    overflow: auto;
    overscroll-behavior: contain;
    padding: 12px;
    background: #fff4df;
    border: 2px solid #926842;
    border-radius: 12px;
    box-shadow: 0 6px 18px #26352b33;
    scrollbar-gutter: stable;
}

.reconnaissance-map-panel h2,
.reconnaissance-map-panel h3,
.reconnaissance-map-panel p { margin: 0; }
.reconnaissance-map-title { font-size: 16px; }
.reconnaissance-map-orientation { font-weight: 700; }
.reconnaissance-map-description,
.reconnaissance-map-persistence { font-size: 12px; }
.reconnaissance-map-level { margin-top: 10px; }
.reconnaissance-map-height { font-size: 13px; }
.reconnaissance-map-sketch {
    display: block;
    width: 100%;
    height: auto;
    margin: 4px 0;
    background: #eee6d2;
    border: 1px solid #d0bea0;
    border-radius: 8px;
}
.reconnaissance-map-visited { fill: #796a51; }
.reconnaissance-map-landmark { fill: #fffaf0; stroke: #84572f; stroke-width: 2; }
.reconnaissance-map-landmark-shelter,
.reconnaissance-map-landmark-grove { stroke-width: 1.5; stroke-linejoin: round; }
.reconnaissance-map-shelter-door { fill: #84572f; stroke: none; }
.reconnaissance-map-landmark-grove { fill: #718565; stroke: #425946; }
.reconnaissance-map-current { fill: #00807733; stroke: #006a63; stroke-width: 3; }
/* Keep the place silhouette visible when Dolly stands at that same known point. */
.reconnaissance-map-current-at-landmark { fill: none; }
.reconnaissance-map-number { fill: #563816; font: bold 12px system-ui, sans-serif; }
.reconnaissance-map-landmarks { margin: 4px 0; padding: 0; list-style: none; overflow-wrap: anywhere; }
.reconnaissance-map-text { margin-top: 4px; font-size: 12px; overflow-wrap: anywhere; }
.reconnaissance-map-text summary { cursor: pointer; padding: 4px 0; }
.reconnaissance-map-text p { margin-top: 4px; }
.reconnaissance-map-persistence { margin-top: 12px !important; padding-top: 8px; border-top: 1px solid #d0bea0; }

@media (max-width: 600px) {
    html[data-reconnaissance="true"] #journey-actions { grid-column: 1 / -1; grid-row: 3; }
    html[data-reconnaissance="true"] #run-hud { top: 166px; }
    .reconnaissance-map { --reconnaissance-panel-top: 180px; }
    .reconnaissance-map-toggle { min-height: 34px; padding: 5px 10px; font-size: 12px; }
    .reconnaissance-map-panel { width: calc(100vw - 40px); }
}

@media (max-height: 550px) and (min-width: 700px) {
    .reconnaissance-map-panel {
        left: auto;
        right: 20px;
        top: 64px;
        width: min(270px, calc(50vw - 120px));
        max-height: calc(100vh - 84px);
        max-height: calc(100dvh - 84px);
    }
}