/* Presentation only; all map actions remain on the original live controls. */
#mapControls.map-controls-pending,
#mapControls.map-controls-pending * {
    visibility: hidden !important;
    pointer-events: none !important;
}

#mapControls.map-controls-compact {
    position: fixed !important;
    inset: 0 auto auto 0 !important;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    pointer-events: none !important;
    cursor: default;
    z-index: 105;
    font: 13px/1.2 Arial, Helvetica, sans-serif;
    color: #343a38;
}

#mapControls.map-controls-compact * { box-sizing: border-box; }
#mapControls.map-controls-compact [hidden],
body.google-map-view #mapControls.map-controls-compact,
#mapControls.map-controls-off { display: none !important; }

#mapControls .map-control-surface {
    position: fixed;
    inset: auto;
    margin: 0;
    padding: 3px;
    border: 1px solid #bbc2bd;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 2px 6px #0002;
    pointer-events: auto;
}

#mapControls .map-control-action,
#mapControls.map-controls-compact #zoomColourMode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
    inset: auto;
    float: none;
    min-height: 32px;
    height: auto;
    width: auto;
    margin: 0;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: #fff;
    color: #343a38;
    box-shadow: none;
    font: inherit;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    text-align: center;
}

#mapControls .map-control-action:hover { background-color: #f0f3f0; }
#mapControls .map-control-action:active { background-color: #e4ebe3; }
#mapControls .map-control-action:focus-visible,
#mapControls #zoomColourMode:focus-visible { outline: 2px solid #397d35; outline-offset: 2px; }
#mapControls .map-control-action[aria-pressed="true"],
#mapControls .map-control-action[aria-expanded="true"] { background: #e9f2e6; border-color: #73a166; color: #285d25; }

#mapControls.map-controls-compact #zoomColourMode {
    position: fixed;
    width: 214px !important;
    min-height: 38px;
    padding: 8px 10px 8px 30px;
    background-color: #fff !important;
    background-image: url(../images/map-controls/compact-colour.svg) !important;
    color: #343a38 !important;
    background-size: 16px;
    background-position: 9px center;
    background-repeat: no-repeat;
    border: 1px solid #bbc2bd;
    border-radius: 6px;
    box-shadow: 0 2px 6px #0002;
    white-space: nowrap;
    font: 13px/1.2 Arial, Helvetica, sans-serif;
}

#mapControls.map-controls-compact #zoomColourMode:hover { background-color: #f0f3f0 !important; }
#mapControls #mapOrientationControls { display: flex; gap: 2px; width: max-content; height: auto; }
#mapControls #mapOrientationControls .map-control-action { padding: 5px 7px; gap: 5px; }
#mapControls.map-controls-stacked #zoomColourMode,
#mapControls.map-controls-stacked #mapOrientationControls { width: var(--controls-stack-width) !important; }
#mapControls.map-controls-stacked #mapOrientationControls .map-control-action { flex: 1 1 auto; }
#mapControls .map-control-action img {
    position: static;
    inset: auto;
    display: block;
    float: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin: 0;
    padding: 0 !important;
    border: 0;
    transform: none;
    scale: none;
    object-fit: contain;
}

#mapControls #mapNavigationControls { display: flex; flex-wrap: wrap; gap: 2px; width: max-content; }
#mapControls #magnifyingGlasses { display: flex; position: static; width: auto; margin: 0; padding: 0; }
#mapControls #magnifyingGlasses .map-control-action { width: 32px; padding: 6px; }
#mapControls #resetZoomButton { background-image: url(../images/map-controls/compact-fit.svg); background-size: 16px; background-position: 8px center; background-repeat: no-repeat; padding-left: 30px; }
#mapControls #toggleTab { background: #fff; transform: none; line-height: inherit; }
#mapControls #toggleTab:hover { background: #f0f3f0; }
#mapControls #toggleTab[aria-expanded="true"] { background: #e9f2e6; border-color: #73a166; }

#mapControls.map-controls-compact #panControls {
    display: grid;
    grid-template-columns: repeat(3, 32px);
    grid-template-rows: repeat(3, 32px);
    gap: 3px;
    width: max-content;
    height: auto;
    padding: 6px;
}

#mapControls #panControls .map-control-action { width: 32px; height: 32px; padding: 0; background-size: 18px; background-position: center; background-repeat: no-repeat; }
#mapControls #panNorth { grid-area: 1 / 2; background-image: url(../images/map-controls/compact-north.svg); }
#mapControls #panWest { grid-area: 2 / 1; background-image: url(../images/map-controls/compact-west.svg); }
#mapControls #panSouth { grid-area: 3 / 2; background-image: url(../images/map-controls/compact-south.svg); }
#mapControls #panEast { grid-area: 2 / 3; background-image: url(../images/map-controls/compact-east.svg); }
#mapControls .map-pan-centre { grid-area: 2 / 2; }
#mapControls.map-controls-disabled .map-control-surface,
#mapControls.map-controls-disabled .map-control-surface * { pointer-events: none !important; }

/* Where the open sidebar or floating card leaves very little map space,
   stack the same groups in a small scrollable strip. Transparent gaps stay inert. */
#mapControls.map-controls-rail {
    left: var(--controls-rail-left) !important;
    top: var(--controls-rail-top) !important;
    width: var(--controls-rail-width);
    height: auto;
    max-height: var(--controls-rail-height);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}
#mapControls.map-controls-rail .map-control-surface {
    position: relative !important;
    inset: auto !important;
    max-width: 100%;
    width: 100% !important;
    margin-bottom: 6px;
    box-shadow: none;
}
#mapControls.map-controls-rail #zoomColourMode { white-space: normal; padding-left: 24px; background-position-x: 5px; }
#mapControls.map-controls-rail #mapOrientationControls { flex-wrap: wrap; }
#mapControls.map-controls-rail #mapOrientationControls .map-control-action { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; padding: 5px 2px; }
#mapControls.map-controls-rail #mapNavigationControls .map-control-action { flex: 1 1 auto; }
#mapControls.map-controls-rail #magnifyingGlasses { width: 100%; }
#mapControls.map-controls-narrow #mapOrientationControls .map-control-action span { display: none; }
#mapControls.map-controls-narrow #zoomColourMode { padding: 26px 2px 6px; background-position: center 6px; font-size: 11px; overflow-wrap: anywhere; }
#mapControls.map-controls-rail #panControls { grid-template-columns: repeat(3, minmax(0, 32px)); gap: 0; padding: 2px; }
#mapControls.map-controls-rail #panControls .map-control-action { width: 100%; min-width: 0; }

/* Colouring and map detail share an anchor while keeping their own surfaces. */
#mapControls #mapPrimaryControls {
    position: fixed;
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: max-content;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    pointer-events: none;
}
#mapControls #mapPrimaryControls #zoomColourMode {
    position: relative;
    inset: auto !important;
    flex: 1 1 214px;
    width: 214px !important;
    max-width: 100%;
}
#mapControls #mapDetailButton {
    position: relative;
    inset: auto !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    gap: 7px;
    min-width: 0;
    min-height: 38px;
    max-width: 240px;
    padding: 8px 10px;
    color: #315777;
    font: 13px/1.2 Arial, Helvetica, sans-serif;
    cursor: pointer;
    touch-action: manipulation;
}
#mapControls #mapDetailButton img { width: 17px; height: 17px; flex: none; margin: 0; }
#mapControls #mapDetailButtonText { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mapControls .map-detail-chevron { width: 7px; height: 7px; flex: none; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
#mapControls #mapDetailButton:hover,
#mapControls #mapDetailButton[aria-expanded="true"] { background: #eef4f8; }
#mapControls #mapDetailButton:focus-visible { outline: 2px solid #315777; outline-offset: 2px; }
#mapControls.map-controls-stacked #mapPrimaryControls { width: var(--controls-stack-width); }
#mapControls.map-controls-rail #mapPrimaryControls {
    position: relative;
    inset: auto !important;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    margin-bottom: 6px;
    gap: 6px;
}
#mapControls.map-controls-rail #mapPrimaryControls .map-control-surface { margin-bottom: 0; }
#mapControls.map-controls-rail #mapDetailButton { flex: 1 1 100%; max-width: 100%; gap: 4px; padding: 8px 6px; }
#mapControls.map-controls-rail #mapDetailButtonText { white-space: normal; overflow-wrap: anywhere; }
#mapControls.map-controls-narrow #mapDetailButton { flex-wrap: wrap; padding: 6px 2px; font-size: 11px; gap: 4px; }
#mapControls.map-controls-narrow #mapDetailButtonText { flex-basis: 100%; white-space: normal; overflow-wrap: anywhere; }
#mapControls.map-controls-narrow .map-detail-chevron { display: none; }

/* Native popover keeps the panel above the narrow scrollable controls rail.
   It opens only on request and dismisses on Escape or an outside click. */
#mapDetailPopover {
    position: fixed;
    inset: auto;
    width: 300px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    overflow: auto;
    margin: 0;
    padding: 16px;
    border: 1px solid #bbc2bd;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 3px 12px #0003;
    color: #25384a;
    font: 14px/1.45 Arial, Helvetica, sans-serif;
    text-align: left;
    pointer-events: auto;
}
#mapDetailPopover::backdrop { background: transparent; }
#mapDetailPopover:not(:popover-open) { display: none; }
#mapDetailPopover:popover-open { display: block; }
#mapDetailPopover h3,
#mapDetailPopover h4 { margin: 0; padding: 0; background: none; border: 0; color: #25384a; font: bold 14px/1.4 Arial, Helvetica, sans-serif; }
#mapDetailPopover h3 { padding-right: 22px; font-size: 16px; }
#mapDetailPopover p { margin: 6px 0 0; font: inherit; }
#mapDetailPopover .map-detail-current { color: #626f7b; }
#mapDetailPopover .map-detail-recommendation { margin-top: 14px; padding-top: 12px; border-top: 1px solid #dde2e5; }
#mapDetailPopover #mapDetailClose {
    position: absolute;
    z-index: 1;
    top: 5px;
    right: 5px;
    width: 28px;
    height: 28px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #7d8992;
    font: 24px/28px Arial, Helvetica, sans-serif;
    cursor: pointer;
}
#mapDetailPopover #tryNowButton {
    display: inline-block;
    float: none;
    width: auto;
    margin: 12px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #1765a0;
    font: 14px/1.45 Arial, Helvetica, sans-serif;
    text-align: left;
    text-decoration: underline;
}
#mapDetailPopover #tryNowButton:hover { color: #10456e; }
#mapDetailPopover button:focus-visible,
#mapDetailPopover a:focus-visible { outline: 2px solid #315777; outline-offset: 3px; }