/* Shared map frame and route-independent milestone cards. */
.pocket-map{position:relative;width:100%;aspect-ratio:2/1}
.pocket-map > .pocket-map-stage{position:absolute;inset:0}
.article-map-frame.pocket-map{aspect-ratio:2/1;isolation:isolate;background:#eef0ea}
.pocket-map-stage{position:relative;width:100%;height:100%;min-width:0;min-height:0;background:#eef0ea;overflow:hidden;border-radius:4px}
/* MapLibre CSS is loaded later. Keep the map container explicitly sized and
   more specific than .maplibregl-map, whose relative positioning collapses an
   otherwise empty container and clips the canvas, markers and navigation. */
.pocket-map-stage > .pocket-map-canvas{position:absolute;inset:0;width:100%;height:100%;font-family:var(--font-text)}
.pocket-map-stage,.pocket-map-stage *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.pocket-map-stage button{-webkit-tap-highlight-color:transparent}
.pocket-map-status{position:absolute;z-index:5;top:50%;left:50%;transform:translate(-50%,-50%);width:max-content;max-width:80%;padding:8px 12px;border-radius:3px;background:#eeeeeef2;color:#202020;font:14px/1.4 var(--font-text);text-align:center}
.pocket-map-status[hidden]{display:none}
.pocket-map-status button{display:block;margin:8px auto 0;font:inherit;padding:4px 10px;color:var(--ui-heading-color);background:none;border:1px solid currentColor;cursor:pointer}
.pocket-map-status button[hidden]{display:none}
.pocket-map-stage .maplibregl-ctrl-group{background:#f7f4e9;border:1px solid #b8b4a9;border-radius:3px;box-shadow:0 2px 5px #0002}
.pocket-map-stage .maplibregl-ctrl-group button{width:30px;height:30px}
.pocket-map-stage .maplibregl-ctrl-compass::after{content:'N';position:absolute;right:1px;bottom:0;font:bold 8px/1 var(--font-menu);color:#202020}
.pocket-map-stage .maplibregl-ctrl-compass{position:relative}
.pocket-map-stage .maplibregl-ctrl-attrib{font:9px/1.4 var(--font-text);max-width:min(80%,420px)}
.pocket-map-stage .maplibregl-control-container{position:absolute;inset:0;z-index:5;pointer-events:none}
.pocket-map-stage .maplibregl-ctrl{pointer-events:auto}
.pocket-map-stage .map-live{z-index:4}
.pocket-point{display:flex;align-items:center;gap:5px;white-space:nowrap}
.pocket-point-button{display:grid;place-items:center;width:34px;height:34px;padding:7px;border:1px solid #c0b5a7;border-radius:50%;background:#f7f4e9;color:#a00000;cursor:pointer;box-shadow:0 3px 5px #0003}
.pocket-point-button svg{display:block;width:100%;height:100%;pointer-events:none}
.pocket-point-button.place-badge{padding:0;background:var(--ui-badge-background);color:var(--ui-badge-foreground);border:2px solid var(--ui-badge-border-color)}
/* Place selection uses the filled badge only; keep a distinct keyboard focus. */
.pocket-point-button.place-badge:focus{outline:none}
.pocket-point-button.place-badge:focus-visible{outline:2px solid var(--anthracite);outline-offset:2px}
.pocket-point-button:not(.place-badge)[aria-expanded=true]{outline:2px solid #a00000;outline-offset:2px}
.pocket-place-name{position:absolute;right:calc(100% + 5px);top:50%;transform:translateY(-50%);font:15px/1.2 var(--font-menu);letter-spacing:1px;text-transform:uppercase;color:#2c2f33;text-shadow:0 0 2px #fff,0 0 3px #fff}
.pocket-place-information .pocket-point-button{width:22px;height:22px;padding:0;border:0;background:none;box-shadow:none}
.pocket-map-dialog{box-sizing:border-box;width:min(1200px,calc(100vw - 32px));height:min(820px,calc(100dvh - 40px));max-width:none;max-height:none;padding:12px;border:1px solid #b8b4a9;border-radius:6px;background:var(--soft-white);color:var(--anthracite);overflow:hidden;font-family:var(--font-text)}
.pocket-map-dialog::backdrop{background:#0008}
.pocket-map-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:12px;height:36px;padding:0 0 8px;font-weight:700}
.pocket-map-close{display:grid;place-items:center;min-width:36px;min-height:36px;border:0;background:none;color:inherit;font:28px/1 var(--font-menu);cursor:pointer}
.pocket-map-explorer{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,340px);gap:14px;height:calc(100% - 36px)}
.pocket-map-expanded-slot{min-width:0;min-height:0}
.pocket-map-card{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;border:1px solid #c0b5a7;border-radius:4px;background:#f7f4e9;padding:16px}
.pocket-map-card-title{flex:none;margin:0 0 12px;color:#a00000;font:700 19px/1.3 var(--font-title);white-space:pre-line;overflow-wrap:anywhere}
.pocket-map-card-title:focus{outline:none}
.pocket-map-card-title .place-badge{margin-inline-end:8px;vertical-align:middle}
.pocket-map-card-title svg{width:34px;height:28px;display:inline-block;vertical-align:middle;margin-inline-end:8px}
.pocket-map-card-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;font-size:16px;line-height:1.4;padding-inline-end:5px;scrollbar-width:thin;scrollbar-color:#a0000066 transparent}
.pocket-map-card-body p{margin:0 0 12px;white-space:pre-line}
.pocket-map-card-body h4{margin:12px 0 5px;font-size:17px}
.pocket-map-card-body a{color:#a00000;text-underline-offset:3px}
.pocket-map-card-navigation{display:flex;justify-content:space-between;gap:10px;flex:none;padding-top:12px;margin-top:auto}
.pocket-map-card-navigation[hidden]{display:none}
.pocket-map-card-navigation button{border:1px solid #a0000066;border-radius:3px;background:none;color:#a00000;font:600 13px/1.3 var(--font-menu);min-height:36px;padding:6px 12px;cursor:pointer}
.pocket-map-card-navigation button:disabled{opacity:.3;cursor:default}
@media(max-width:768px){
 .pocket-map-dialog{width:calc(100vw - 20px);height:calc(100dvh - 24px);padding:10px}
 .pocket-map-explorer{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(160px,42%) minmax(0,1fr);gap:10px}
 .pocket-map-card{padding:12px}
 .pocket-point-button{width:30px;height:30px;padding:6px}
}

.pocket-map-stage .pocket-point{z-index:2}
.pocket-map-stage .pocket-point:focus-within,
.pocket-map-stage .pocket-point:has(.place-badge[aria-pressed=true]){z-index:3}
.pocket-map-stage .map-live:not(:disabled){cursor:pointer}
/* Active LIVE green matches Durmitor Rings #reliefLive. */
.pocket-map-stage .map-live[aria-pressed=true]{background:#1c6b3a;border-color:#1c6b3a;color:var(--soft-white);box-shadow:none}
.pocket-map-stage .map-live[aria-pressed=true] svg{color:inherit}
.pocket-user-position{width:14px;height:14px;border:3px solid #eee;border-radius:50%;background:#1875ce;z-index:3;pointer-events:none}
.place-distance{display:block;font-size:14px;line-height:1.4;color:var(--ui-caption-color);margin-top:4px;margin-bottom:4px}

/* Opacity-only pulse: the blue centre, ring diameter and GPS anchor stay fixed. */
.pocket-user-position::before{content:"";position:absolute;inset:-8px;border:5px solid #1875ce66;border-radius:50%;pointer-events:none;animation:pocket-live-halo 3s ease-in-out infinite}
@keyframes pocket-live-halo{0%,100%{opacity:0}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.pocket-user-position::before{animation:none;opacity:.6}}