/* Galway Pulse v17: brighter road flow and uncluttered map controls. */
.map-layout { grid-template-columns: minmax(0,1.72fr) minmax(288px,.60fr); gap: 15px; }
.map-frame.street-map-ready { min-height: 600px; background: #e9eee8; }
#trafficStreetMap { position: absolute; inset: 0; height: 100%; width: 100%; z-index: 0; }
#trafficStreetMap.maplibregl-map { position: absolute; inset: 0; height: 100%; width: 100%; }
.street-map-ready .leaflet-container { font-family: 'DM Sans',system-ui,sans-serif; background: #dbe8e2; }
.street-map-ready .leaflet-tile-pane { filter: saturate(.7) contrast(.92) brightness(1.05); }
.street-map-ready .leaflet-control-attribution { background: rgba(255,255,255,.92); color: #425c5c; font-size: 10px; }
.street-map-ready .leaflet-control-attribution svg.leaflet-attribution-flag { width: 16px; height: 12px; min-height: 0; display: inline-block; }
.street-map-ready .leaflet-pane svg { min-height: 0; }
.street-map-ready .leaflet-control-attribution a { color: #276d68; }
.street-map-ready .leaflet-bar { border: 1px solid #cbd7d2; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 16px #16374320; }
.street-map-ready .leaflet-bar a { background: #fffcf7; color: #1c4450; }
.street-map-ready .leaflet-popup-content-wrapper { border-radius: 15px; box-shadow: 0 12px 40px #0e2e3d24; }
.street-map-ready .leaflet-popup-content { margin: 16px 18px; min-width: 210px; }
.street-map-ready .leaflet-popup-tip { box-shadow: 0 4px 12px #0e2e3d12; }
.street-map-ready .maplibregl-map { font-family: 'DM Sans',system-ui,sans-serif; }
.street-map-ready .maplibregl-ctrl-attrib { background: #fffefae8; font-size: 10px; }
.street-map-ready .maplibregl-ctrl-attrib a { color: #276d68; }
.street-map-ready .maplibregl-ctrl-group { border-radius: 10px; overflow: hidden; box-shadow: 0 4px 16px #16374320; }
.street-map-ready .maplibregl-popup-content { border-radius: 14px; box-shadow: 0 12px 40px #0e2e3d24; padding: 17px; }
.map-gl-marker { border: 0; background: transparent; padding: 0; cursor: pointer; }
.map-gl-marker:focus-visible { outline: 3px solid #ffce75; border-radius: 10px; }
.street-map-ready.map-no-webgl #trafficStreetMap { background: #dcece5; background-image: linear-gradient(#ffffff30 1px,transparent 1px),linear-gradient(90deg,#ffffff30 1px,transparent 1px); background-size: 44px 44px; }
.map-webgl-warning { position: absolute; z-index: 550; left: 50%; top: 36%; transform: translate(-50%,-50%); max-width: 270px; width: 65%; border: 1px solid #d9e7df; background: #fffcf3f5; color: #28505a; border-radius: 12px; padding: 13px 15px; box-shadow: 0 9px 30px #244b4b19; pointer-events: auto; text-align: center; }
.map-webgl-warning[hidden] { display: none; }
.map-offline-note { top: auto; bottom: 106px; left: auto; right: 14px; transform: none; width: 210px; max-width: 33%; padding: 9px 11px; }
.map-webgl-warning b { display: block; font: 800 12px/1.4 'Space Grotesk',sans-serif; }
.map-webgl-warning span { display: block; font-size: 10px; line-height: 1.5; margin-top: 4px; }
.map-webgl-warning a { color: #165f73; font-weight: 700; }
.map-lede { position: absolute; top: 12px; left: 12px; z-index: 600; display: flex; flex-direction: column; gap: 7px; pointer-events: none; }
.map-lede-title { background: #102c38ec; color: #fff; width: max-content; max-width: 85%; border-radius: 20px; padding: 8px 12px; box-shadow: 0 7px 19px #112c3820; }
.map-lede-title strong { font: 800 10px 'Space Grotesk',sans-serif; letter-spacing: .7px; text-transform: uppercase; display: flex; align-items: center; gap: 7px; }
.map-lede-title strong::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #4bd6a3; box-shadow: 0 0 0 3px #4bd6a321; }
.map-lede-title small { display: none; }
.map-lede button { pointer-events: auto; background: #fffefaef; border: 1px solid #d9e2df; padding: 7px 10px; font-size: 10px; font-weight: 800; border-radius: 10px; color: #1d4a50; width: max-content; box-shadow: 0 3px 12px #112c3820; }
.map-lede #mapCloseAll {background:#b8493f;color:#fff;border-color:#f2a69d;box-shadow:0 5px 15px #74211a50;}
.map-lede #mapCloseAll:hover {background:#cf5548;}
.map-pin-coverage{display:block;margin-top:5px;font-weight:800;color:#ac5b1b}
.map-pin-coverage[hidden]{display:none}
.map-key { position: absolute; z-index: 600; bottom: 26px; left: 17px; background: #fffefaf2; border-radius: 11px; box-shadow: 0 6px 24px #112c3820; padding: 11px 13px; color: #415c5e; font-size: 10px; pointer-events: none; max-width: calc(100% - 35px); }
.map-key-title { text-transform: uppercase; font-weight: 900; letter-spacing: 1px; margin-bottom: 6px; color: #27484c; font-size: 9px; }
.map-key-items { display: flex; flex-wrap: wrap; gap: 10px; }
.map-key-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.map-key-item i { width: 10px; height: 10px; display: inline-block; border-radius: 50%; background: var(--item-color); }
.map-key-note { font-size: 9px; color: #61767a; margin-top: 7px; max-width: 420px; line-height: 1.4; }
.leaflet-div-icon.map-label-pin { background: transparent; border: 0; }
.map-marker-body { min-width: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 12px; border: 2px solid #fff; padding: 6px 8px 5px; background: #173641; color: #fff; box-shadow: 0 6px 18px #10293780; text-align: center; white-space: nowrap; transform: translateY(-3px); }
.map-marker-body span { font: 800 10px/1 'Space Grotesk',sans-serif; letter-spacing: 1px; color: #a9c6c7; }
.map-marker-body b { font: 800 16px/1.05 'Space Grotesk',sans-serif; margin-top: 3px; }
.map-marker-body b small { font: 700 9px 'DM Sans',sans-serif; }
.map-marker-body.is-selected { border-color: #ffcd8c; background: #0e2935; transform: translateY(-6px) scale(1.09); }
.map-list-item { width: 100%; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; text-align: left; gap: 10px; border: 1px solid #e4e8df; background: #fffefa; border-radius: 12px; padding: 12px 10px; margin-top: 9px; color: #183743; cursor: pointer; }
.map-list-item:hover,.map-list-item.is-selected { background: #f2f7f3; border-color: #a4c6be; }
.map-list-item:focus-visible { outline: 3px solid #ffce75; outline-offset: 2px; }
.map-list-id { height: 32px; width: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--item-color); color: #fff; font: 800 11px 'Space Grotesk',sans-serif; }
.map-list-copy { min-width: 0; }
.map-list-copy b { display: block; font: 700 13px/1.27 'Space Grotesk',sans-serif; }
.map-list-copy small { display: block; font-size: 10px; line-height: 1.45; color: #738789; margin-top: 4px; }
.map-list-time { text-align: right; font: 800 18px/1 'Space Grotesk',sans-serif; white-space: nowrap; }
.map-list-time small { display: block; font: 800 9px 'DM Sans',sans-serif; color: #8d9da0; margin-top: 5px; }
.map-sidebar-foot { font-size: 10px; line-height: 1.55; color: #718789; border-top: 1px solid #e3e8e3; margin-top: 17px; padding-top: 15px; }
.map-pop-head { font: 800 16px/1.17 'Space Grotesk',sans-serif; margin: 0 0 7px; color: #193a44; }
.map-pop-route { font-size: 10px; color: #708488; margin-bottom: 11px; }
.map-pop-metrics { display: flex; gap: 18px; border-top: 1px solid #e5e8e5; padding-top: 11px; }
.map-pop-metric b { display: block; font: 800 23px 'Space Grotesk',sans-serif; color: #193a44; }
.map-pop-metric b small { font-size: 10px; }
.map-pop-metric span { font-size: 10px; color: #6c8083; }
.map-pop-note { font-size: 10px; line-height: 1.5; color: #637b7d; margin-top: 9px; }
.map-pop-action { margin-top: 12px; background: #143642; color: white; border: 0; border-radius: 8px; padding: 9px 11px; font-size: 11px; font-weight: 800; cursor: pointer; width: 100%; }
.map-pop-action:hover { background: #28656d; }
@media(max-width:900px) { .map-layout { grid-template-columns: 1fr; } .map-frame.street-map-ready { min-height: 485px; } }
@media(max-width:650px) { .map-frame.street-map-ready { min-height: 465px; } .map-lede { top: 12px; left: 12px; } .map-lede-title { padding: 9px 11px; } .map-lede-title strong { font-size: 10px; } .map-key { bottom: 17px; left: 12px; padding: 9px 11px; } .map-key-items { gap: 7px; } .map-key-item { font-size: 9px; } }