/* Public race map (single-mtrail_race) */

.race-map-card {
  margin-top: 16px;
  background: #fff;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  overflow: hidden;
}
.race-map-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0.04), transparent);
}
.race-map-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #1d2327;
}
.race-map-card__stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: .8rem;
  color: #4a4a4a;
}
.race-map-card__stat strong { color: #0a8f4f; font-weight: 700; }

#race-map {
  width: 100%;
  height: 460px;
  background: #eef2f5;
}

@media (max-width: 768px) {
  #race-map { height: 360px; }
}

/* Markers */
.race-mk-wrap { background: transparent; border: 0; }
.race-mk {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}

/* Popup */
.race-popup strong { display: block; font-size: 13px; color: #1d2327; }
.race-popup__meta {
  font-size: 11px;
  color: #5a5a5a;
  margin: 4px 0;
}
.race-popup__meta span {
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 1px 6px;
  border-radius: 4px;
  color: #fff;
  background: #7f8c8d;
  font-size: 10px;
}
.race-popup__meta .t-start      { background: #0a8f4f; }
.race-popup__meta .t-finish     { background: #c0392b; }
.race-popup__meta .t-aid        { background: #2980b9; }
.race-popup__meta .t-cutoff     { background: #e67e22; }
.race-popup__meta .t-medical    { background: #e74c3c; }
.race-popup__meta .t-service    { background: #8e44ad; }
.race-popup__meta .t-checkpoint { background: #16a085; }
.race-popup__meta .t-view       { background: #27ae60; }
.race-popup__meta .t-water      { background: #3498db; }

/* Elevation profile (SVG generated from GPX) */
.race-route-elev-svg-wrap {
  width: 100%;
  margin: 0 0 12px;
  background: #fff;
  border-radius: 10px;
  padding: 8px 4px 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.mtrail-elev-svg {
  width: 100%;
  height: auto;
  max-height: 280px;
  display: block;
}

.mtrail-elev-svg .mtrail-prof__grid {
  stroke: #e1e5ea;
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.mtrail-elev-svg .mtrail-prof__tick {
  stroke: #b0b7bf;
  stroke-width: 1;
}

.mtrail-elev-svg .mtrail-prof__wpline {
  stroke: rgba(0,0,0,0.12);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.mtrail-elev-svg .mtrail-prof__xlabel,
.mtrail-elev-svg .mtrail-prof__ylabel {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11px;
  fill: #5a6470;
}

.mtrail-elev-svg .mtrail-prof__xlabel { text-anchor: middle; }
.mtrail-elev-svg .mtrail-prof__ylabel { text-anchor: end; dominant-baseline: middle; }

.race-route-elev-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin: 12px 0 8px;
  padding: 0;
  list-style: none;
}

.race-route-elev-stats li {
  background: rgba(8, 37, 106, 0.06);
  border: 1px solid rgba(8, 37, 106, 0.12);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
}

.race-route-elev-stats li span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #4b5e82;
  margin-bottom: 2px;
}

.race-route-elev-stats li strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: #08225f;
}

.race-route-profile__source {
  font-size: 0.8rem;
  color: #4b5e82;
  margin: 4px 0 0;
}

.race-route-profile__hint {
  font-size: 0.78rem;
  color: #4b5e82;
  font-style: italic;
  margin: 8px 0 0;
}

/* Legend */
.race-map-legend {
  background: rgba(255,255,255,0.95);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11px;
  color: #1d2327;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  max-width: 220px;
}
.race-map-legend strong {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.race-map-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 6px;
  margin-bottom: 4px;
}
.race-map-legend .race-mk {
  width: 18px;
  height: 18px;
  font-size: 10px;
  border-width: 1px;
}