/* Styles for templates/map.html (served at /map) — moved out of an inline <style> block so the
   page (loaded in an iframe on the ride calendar) needs no style-src 'unsafe-inline'. */
html, body { height: 100%; margin: 0; background: var(--color-bg); }
#wrap { display: grid; grid-template-columns: 1fr 264px; height: 100%; }
#map { position: relative; height: 100%; background: var(--color-neutral-200); }
.leaflet-tile-pane { filter: grayscale(1) contrast(1.06) brightness(1.05); }
#map::after { content: ""; position: absolute; inset: 0; z-index: 400; pointer-events: none;
  background: var(--color-accent); mix-blend-mode: color; opacity: .5; }
.pin { display: grid; place-items: center; width: 22px; height: 22px;
  background: var(--color-accent); border: 1px solid var(--color-bg);
  box-shadow: var(--shadow-sm); color: var(--color-bg);
  font: 600 12px/1 var(--font-heading); letter-spacing: .02em; }
.pin.far { background: var(--color-accent-900); }
.pin.on { background: var(--color-text); transform: scale(1.18); }
.leaflet-popup-content-wrapper { border-radius: 0; background: var(--color-bg);
  border: 1px solid var(--color-divider); box-shadow: var(--shadow-md); }
.leaflet-popup-content { margin: 10px 12px; font-family: var(--font-body); font-size: 13px; width: 200px !important; }
.leaflet-popup-tip { background: var(--color-bg); }
.pop-t { font-family: var(--font-heading); font-weight: 600; font-size: 16px; line-height: 1.15; margin-bottom: 4px; }
.pop-r { display: flex; gap: 6px; font-size: 11.5px; color: var(--color-neutral-700); margin-top: 3px; }
.pop-r-type { margin-top: 6px; }
.pop-r b { font-weight: 500; color: var(--color-text); font-variant-numeric: tabular-nums; }
aside { border-left: 1px solid var(--color-divider); overflow: auto; padding: 14px 0 20px; }
.lgh { padding: 0 14px 10px; font: 600 10px/1 var(--font-body); letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-neutral-600); }
.row { display: grid; grid-template-columns: 22px 1fr; gap: 9px; align-items: start; width: 100%;
  padding: 9px 14px; background: none; border: 0; border-top: 1px solid var(--color-divider);
  text-align: left; cursor: pointer; font: inherit; color: inherit; }
.row:hover { background: color-mix(in srgb, var(--color-accent) 9%, transparent); }
.row[aria-current="true"] { background: color-mix(in srgb, var(--color-accent) 15%, transparent); }
.row .num { display: grid; place-items: center; height: 22px; background: var(--color-accent);
  color: var(--color-bg); font: 600 12px/1 var(--font-heading); }
.row .num.far { background: var(--color-accent-900); }
.row .nm { font: 600 14px/1.15 var(--font-heading); letter-spacing: -.01em; }
.row .mt { font-size: 11px; color: var(--color-neutral-700); margin-top: 2px; line-height: 1.35; }
.scope { display: flex; gap: 6px; padding: 0 14px 12px; }
.scope button { flex: 1 1 auto; font: 600 11.5px/1 var(--font-heading); padding: 7px 4px; cursor: pointer;
  background: transparent; color: var(--color-text); border: 1px solid var(--color-divider); }
.scope button:disabled { opacity: .4; cursor: default; }
.scope button[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.attrib { padding: 12px 14px 0; font-size: 10px; line-height: 1.4; color: var(--color-neutral-600); }
.attrib a { color: var(--color-accent-700); }
@media (max-width: 640px) {
  /* Fixed shares: an auto row sized to the legend's full content and squeezed the map. */
  #wrap { grid-template-columns: 1fr; grid-template-rows: 60% 40%; }
  aside { border-left: 0; border-top: 1px solid var(--color-divider); }
}