/* Tour Roads on Mapbox GL (index-gl.html): what the app's own stylesheets
   took from leaflet.css, for the elements js/glmap.js builds in its image -
   markers made as divIcons, the famous roads' tooltip - and the GL map's own
   controls put where Leaflet's were. */

/* ----- markers: a zero-size GL marker at the point, the icon hung off it by
   its anchor (margins), exactly as Leaflet places a divIcon ----- */
.gl-marker { width: 0; height: 0; }
.gl-marker .leaflet-marker-icon {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
}
.gl-marker .leaflet-marker-icon:not(.leaflet-interactive) { pointer-events: none; }
.gl-marker .leaflet-interactive { cursor: pointer; }
.leaflet-div-icon { background: #fff; border: 1px solid #666; }

/* ----- the famous roads' tooltip (dressed further by .road-tip) ----- */
.leaflet-tooltip {
  position: absolute;
  z-index: 5;
  padding: 6px;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 3px;
  color: #222;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.leaflet-tooltip[hidden] { display: none; }
.leaflet-tooltip-top::before {
  position: absolute;
  pointer-events: none;
  border: 6px solid transparent;
  background: transparent;
  content: "";
  left: 50%;
  margin-left: -6px;
  bottom: 0;
  margin-bottom: -12px;
  border-top-color: #fff;
}

/* ----- the GL map's credit and logo: lifted clear of the home indicator,
   as style.css lifts Leaflet's bottom corners ----- */
#map .mapboxgl-ctrl-bottom-left,
#map .mapboxgl-ctrl-bottom-right { bottom: calc(var(--indicator, 0px) + var(--safe-env, 0px)); }
#map.leaflet-container { font: inherit; }

/* ----- the two 3D buttons: the letters over a wall, and over a mountain ----- */
.m3d-icon .m3d-letters {
  font: 800 8.4px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-anchor: middle;
  fill: currentColor;
  stroke: var(--tool-halo);
  stroke-width: 2.6px;
  stroke-linejoin: round;
  paint-order: stroke;
}
.m3d-icon .ink path { stroke-width: 1.6; }

/* ----- the GPS dot waits for the opening draw, and comes up with the roads'
   dots (the intro-* classes: see revealRoads in js/app_gl.js) ----- */
body.intro-roads .you-marker { opacity: 0; }
body.intro-fade .you-marker { transition: opacity 600ms ease; }

/* ----- a famous road's name takes the mouse only where it is drawn. The
   44px halo is a finger's target (style.css), and the dot's taps are the
   map's own here (roadDotAtPoint); with a mouse the halo only stole the
   pointer from the names round it. ----- */
@media (hover: hover) and (pointer: fine) {
  .gl-marker .climb-label::before { display: none; }
}
/* ...and a name put up by its dot's hover gives way to a shown name it
   covers (hoverDot's `yield` in js/app_gl.js) */
.gl-marker .climb-label.yield { pointer-events: none; }
.gl-marker .climb-label.yield .climb-name { display: none !important; }

/* ----- markers are never text: a finger held on a famous road's name (the
   one-finger zoom's second press, a long press) selected it ----- */
.gl-marker, .gl-marker * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* A summit finish's climb dot (the one the map's layer cannot draw over the
   chequered flag - see showKomDots): the layer's dots' look, a dark ring
   and no halo, in either skin. It grows as they do (DOT_R's hover size). */
html body .kom-dot .kom-pin,
html.tr body .kom-dot .kom-pin {
  border: 1px solid rgba(11, 11, 11, 0.85);
  box-shadow: none;
}
/* ...an HC one white, its ring twice as heavy (as dotSize draws them) */
html body .kom-dot .kom-pin.kom-hc,
html.tr body .kom-dot .kom-pin.kom-hc {
  border: 2px solid #0b0b0b;
}