/* ImageGen frame, pin and cartouche surround live Leaflet content. */
body.ts-route .card.route-atlas-map { padding:26px 0; border:0; background:none; box-shadow:none; }
.route-map-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
.route-map-kicker { font:500 10px/1.5 var(--atlas-sans,sans-serif); color:#79613c; letter-spacing:.15em; text-transform:uppercase; }
body.ts-route .route-map-heading h2 { color:#203f2b; font:500 40px/1.1 var(--atlas-serif,Georgia,serif); margin:8px 0 0; }
.route-map-heading img { width:64px; height:64px; object-fit:contain; }
.route-map-frame { box-sizing:border-box; border:24px solid transparent; border-image:url('/assets/atlas-art/route-map-frame-v1.png') 130 / 24px stretch; background:#203f2b; box-shadow:0 6px 20px #203f2b20; }
body.ts-route .route-atlas-map #kaart { height:400px; width:100%; margin:0; border:1px solid #b69c65; border-radius:0; box-shadow:none; z-index:0; background:#e4dcc7; }
.route-atlas-tiles { filter:sepia(.55) saturate(.42) contrast(.92); }
.route-atlas-pin span { display:flex; align-items:flex-start; justify-content:center; padding-top:13px; width:48px; height:56px; background:url('/assets/atlas-art/map-pin-v1.png') center/100% 100% no-repeat; color:#fff0ce; font:500 18px/1 var(--atlas-serif,Georgia,serif); filter:drop-shadow(0 3px 3px #173e3044); }
.route-atlas-pin:hover span,.route-atlas-pin.is-selected span { filter:brightness(1.25) drop-shadow(0 0 4px #d8b46d); }
body.ts-route .route-atlas-map .leaflet-control-zoom { border:0; border-radius:0; box-shadow:0 3px 8px #203f2b22; }
body.ts-route .route-atlas-map .leaflet-control-zoom a { box-sizing:border-box; width:44px; height:44px; line-height:30px; border:7px solid transparent; border-image:url('/assets/atlas-icons/label-frame-v1.webp') 64 fill / 7px stretch; border-radius:0; color:#203f2b; background:#f1ead9; }
body.ts-route .route-atlas-map .leaflet-control-attribution { background:#f7edd9e8; font-size:10px; color:#40503f; }
body.ts-route .route-atlas-map .leaflet-control-attribution a { color:#40503f; }
.route-atlas-popup .leaflet-popup-content-wrapper { padding:0; background:none; border:0; border-radius:0; box-shadow:none; }
.route-atlas-popup .leaflet-popup-content { width:240px !important; max-width:calc(100vw - 110px); margin:0; }
.route-atlas-popup-content { padding:34px 24px 30px; background:url('/assets/atlas-art/map-popup-v1.png') center/100% 100% no-repeat; filter:drop-shadow(0 5px 8px #203f2b33); color:#203f2b; }
.route-atlas-popup-content small { font:500 9px var(--atlas-sans,sans-serif); letter-spacing:.1em; text-transform:uppercase; color:#79613c; }
body.ts-route .route-atlas-popup-content h3 { font:500 30px/1.1 var(--atlas-serif,Georgia,serif); margin:8px 0 12px; color:#203f2b; overflow-wrap:anywhere; }
body.ts-route .route-atlas-popup-content p { font:400 12px/1.6 var(--atlas-sans,sans-serif); margin:0 0 16px; color:#40503f; }
body.ts-route .route-atlas-popup-content a { display:block; padding:12px; border:1px solid #a68b53; background:#203f2b; color:#fff0ce !important; font:500 12px/1.5 var(--atlas-sans,sans-serif); text-decoration:none; }
body.ts-route .route-atlas-popup .leaflet-popup-close-button { width:30px; height:30px; top:8px; right:8px; border:1px solid #a68b53; border-radius:50%; color:#203f2b; background:#f1ead9; z-index:1; }
.route-atlas-popup .leaflet-popup-tip { background:#f1ead9; }
.route-map-caption { display:flex; align-items:center; justify-content:flex-end; gap:16px; padding:16px 0; color:#59634d; font:400 12px/1.7 var(--atlas-sans,sans-serif); }
.route-map-caption button { flex:none; min-height:44px; padding:8px 14px; border:7px solid transparent; border-image:url('/assets/atlas-icons/label-frame-v1.webp') 64 fill / 7px stretch; background:#f1ead9; color:#203f2b; font:500 12px var(--atlas-sans,sans-serif); cursor:pointer; }
.route-atlas-map :is(a,button):focus-visible { outline:2px solid #923e31; outline-offset:3px; }
#route-map-status { color:#923e31; font-size:12px; }
@media(max-width:480px) { .route-map-frame { border-width:18px; border-image-width:18px; } body.ts-route .route-atlas-map #kaart { height:370px; } .route-map-caption { align-items:flex-start; flex-direction:column; gap:10px; } body.ts-route .route-map-heading h2 { font-size:34px; } }