/* live-event-map.css — the Live Event map extras (assets/js/live-event-map.js): the
   Map / Sat, Relief and 3D buttons, the bubble where riders bunch up, the fanned-out
   ring, the follow chip. Used by the dashboard and the public live page.
   Never a position or a transform on a marker element: MapLibre places it with both. */

.lem-ctl { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.lem-b { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:32px; padding:0 10px; border-radius:9px;
  border:1px solid #2e3239; background:#1b1d23d9; color:#cbd5e1; font:700 12px system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.06em; text-transform:uppercase; cursor:pointer; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); white-space:nowrap; }
.lem-b:hover { color:#fff; }
.lem-b.on { background:#e9eef5; color:#10131a; border-color:#e9eef5; }
.lem-seg { display:inline-flex; gap:3px; padding:3px; border-radius:10px; border:1px solid #2e3239; background:#1b1d23d9;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.lem-seg .lem-b { height:24px; border:0; background:none; border-radius:7px; padding:0 9px; backdrop-filter:none; -webkit-backdrop-filter:none; }
.lem-seg .lem-b.on { background:#e9eef5; color:#10131a; }

/* Bubbles: over the riders they stand for, under a fanned-out ring and the followed rider. */
.maplibregl-marker.lem-bubble { z-index:4; cursor:pointer; }
.lem-bubble-face { width:40px; height:40px; box-sizing:border-box; border-radius:50%; background:#16a34a; border:3px solid #fff; color:#fff;
  font:800 15px system-ui,-apple-system,"Segoe UI",sans-serif; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 6px rgba(34,197,94,.32), 0 2px 10px #000a; transition:transform .12s; }
.lem-bubble:hover .lem-bubble-face { transform:scale(1.08); }
.lem-bubble.hand .lem-bubble-face { background:#d97706; box-shadow:0 0 0 6px rgba(245,158,11,.38), 0 2px 10px #000a; }
.maplibregl-marker.lem-fanned { z-index:6 !important; }
.maplibregl-marker.lem-followed { z-index:5 !important; }
.maplibregl-marker.lem-spot { z-index:5; }
.lem-spot { width:12px; height:12px; box-sizing:border-box; border-radius:50%; background:#fff; border:3px solid #111827; box-shadow:0 0 0 4px #ffffff55; pointer-events:none; }

/* More riders in one spot than a ring holds: a list. */
.lem-list-pop .maplibregl-popup-content { padding:8px 8px 6px; }
.lem-list { display:flex; flex-direction:column; gap:2px; max-height:260px; overflow:auto; min-width:150px; }
.lem-list-h { font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#9ca3af; padding:2px 26px 4px 4px; }
.lem-list button { text-align:left; background:none; border:0; border-radius:7px; color:#e5e7eb; padding:6px 8px; font:600 14px system-ui,-apple-system,"Segoe UI",sans-serif; cursor:pointer; }
.lem-list button:hover { background:#ffffff14; }

/* Who the map follows. */
.lem-follow { display:inline-flex; align-items:center; gap:8px; max-width:100%; box-sizing:border-box; height:36px; padding:0 4px 0 12px;
  border-radius:18px; border:1px solid #22d3ee; background:#0b2530e6; color:#e0f7fb; font:500 14px system-ui,-apple-system,"Segoe UI",sans-serif;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); cursor:pointer; box-shadow:0 2px 10px #0007; }
.lem-follow[hidden] { display:none; }
.lem-follow-dot { width:9px; height:9px; border-radius:50%; background:#22d3ee; flex:none; animation:lemBlink 1.6s infinite; }
@keyframes lemBlink { 50% { opacity:.35; } }
.lem-follow-t { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lem-follow-t b { color:#fff; }
.lem-follow button { flex:none; width:28px; height:28px; border-radius:50%; border:0; background:#ffffff1a; color:#fff; font-size:14px; cursor:pointer; }
.lem-follow button:hover { background:#ffffff33; }