/* webapp/css/app_map.css — карта: спокойная серая подложка, на ней ярко — «я» и небесный трек.
   Как в жизни: чёрно-белая фотография города, по которой провели маркером твой маршрут. */

.leaflet-container { font-family: var(--font-body); background: #EEF0F4; }
.leaflet-tile-pane { filter: grayscale(.9) brightness(1.04) contrast(.94); }
.leaflet-control-attribution {
  font-size: 10px !important; background: rgba(255, 255, 255, .7) !important; border-radius: 8px 0 0 0;
  margin-bottom: var(--sheet-h, 0px) !important; transition: margin-bottom .22s ease;
}
.leaflet-div-icon { background: none; border: none; }

/* я */
.mk-me { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(30, 34, 48, .35); position: relative; }
.mk-me::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; background: rgba(14, 165, 233, .22);
  animation: me-ring 2s ease-out infinite; z-index: -1; }
@keyframes me-ring { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

/* старт — белая точка в графитовом кольце, финиш — графитовый флажок */
.mk-start { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--graphite);
  box-shadow: 0 2px 6px rgba(30, 34, 48, .3); }
.mk-finish { width: 32px; height: 32px; border-radius: 50%; background: var(--graphite); color: #fff; display: grid; place-items: center;
  border: 3px solid #fff; box-shadow: 0 4px 10px rgba(30, 34, 48, .3); }

/* бегун на странице слежения */
.mk-runner { width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: var(--graphite); display: grid; place-items: center;
  border: 3px solid #fff; box-shadow: 0 6px 16px rgba(30, 34, 48, .35); position: relative; }
.mk-runner::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--brand);
  animation: me-ring 1.8s ease-out infinite; }
.mk-runner.done::before { display: none; }