show carpool areas on the map only while the accordion is open

themes/mms43/assets/css/main.css

@@ -2429,31 +2429,54 @@ a {
 }
 
 /* Map Markers */
+/* MapLibre writes `transform: translate(-50%,-50%) translate(Xpx,Ypx)` on
+   .map-marker to position it, and rewrites it on every map frame. Any
+   transform or transition declared here would fight that — a hover scale
+   would also scale the pixel offset, and a transition would make the marker
+   lag behind the map. So .map-marker only reserves space; everything visual
+   lives on .map-marker-inner, which MapLibre never touches. */
 .map-marker {
   width: 36px;
   height: 36px;
+  cursor: pointer;
+}
+
+.map-marker-inner {
+  width: 100%;
+  height: 100%;
   border-radius: 10px;
   border: 2px solid var(--color-white);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
   transition: transform 0.2s ease;
 }
 
-.map-marker:hover {
+.map-marker-inner:hover {
   transform: scale(1.1);
 }
 
-.map-marker-departure {
+.map-marker-departure .map-marker-inner {
   background-color: var(--color-secondary);
 }
 
-.map-marker-arrival {
+.map-marker-arrival .map-marker-inner {
   background-color: var(--color-highlight);
 }
 
+/* Carpooling areas: smaller than trip endpoints, they are context not
+   destinations. */
+.map-marker-area {
+  width: 24px;
+  height: 24px;
+}
+
+.map-marker-area .map-marker-inner {
+  background-color: var(--color-highlight);
+  border-width: 1px;
+}
+
 /* MapLibre Popup Styling */
 .maplibregl-popup-content {
   padding: 12px 16px;