/* A map the shop drew (`apps/maps/templates/maps/_map.html`), on a built page, in a lesson and on
   an event. Shared by every design, like builder.css, and written against the **colour roles** so
   it follows each design in light and dark. The approved design is
   `docs/plans/2026-10-29-maps/shop.html`; the measurements are its.

   Loaded by the partial itself, because an event page does not load builder.css. Every rule is
   under `.pb-routemap`, which is not `.pb-map` ("Where to find us" owns that). */

.pb-routemap {
  --rm-ink: var(--color-ink, #0f172a);
  --rm-bg: var(--color-surface, #fff);
  --rm-line: color-mix(in srgb, var(--rm-ink) 15%, transparent);
  --rm-soft: color-mix(in srgb, var(--rm-ink) 6%, var(--rm-bg));
  --rm-muted: var(--color-ink-muted, color-mix(in srgb, var(--rm-ink) 65%, var(--rm-bg)));
  --rm-accent: var(--color-accent, var(--rm-ink));
  --rm-accent-ink: var(--color-accent-ink, var(--rm-bg));
  --rm-radius: var(--pb-radius, 14px);
  --rm-height: 480px;
  display: grid;
  gap: 1rem;
  color: var(--rm-ink);
}
.pb-routemap.is-short { --rm-height: 320px; }
.pb-routemap.is-tall { --rm-height: 640px; }
.pb-routemap [hidden] { display: none !important; }

/* Routes: one button each, only when the map has more than one. */
.pb-routemap .pb-rm-routes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pb-routemap .pb-rm-route {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.9rem; border-radius: 999px;
  border: 1px solid var(--rm-line); background: var(--rm-bg); color: var(--rm-ink);
  font: 600 0.95rem/1.2 var(--font-body, inherit); cursor: pointer;
}
.pb-routemap .pb-rm-route i { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--route); flex: none; }
.pb-routemap .pb-rm-route[aria-pressed="true"] { background: var(--rm-ink); color: var(--rm-bg); border-color: var(--rm-ink); }
.pb-routemap .pb-rm-route[aria-pressed="true"] i { box-shadow: 0 0 0 2px var(--rm-bg); }
.pb-routemap .pb-rm-route:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

/* The figures: four facts and the download. */
.pb-routemap .pb-rm-facts { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.75rem; }
.pb-routemap .pb-rm-stats {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; flex: 1 1 32rem;
  border: 1px solid var(--rm-line); border-radius: var(--rm-radius); overflow: hidden;
}
.pb-routemap .pb-rm-stats > div { padding: 0.7rem 1rem; border-left: 1px solid var(--rm-line); min-width: 0; }
.pb-routemap .pb-rm-stats > div:first-child { border-left: 0; }
.pb-routemap .pb-rm-stats dt { font-size: 0.8rem; color: var(--rm-muted); margin: 0; }
.pb-routemap .pb-rm-stats dd { margin: 0; font: 700 1.35rem/1.2 var(--font-heading, inherit); white-space: nowrap; }
.pb-routemap .pb-rm-download {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.1rem; border-radius: var(--rm-radius);
  background: var(--rm-accent); color: var(--rm-accent-ink); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.pb-routemap .pb-rm-download svg { width: 1.1rem; height: 1.1rem; flex: none; }
.pb-routemap .pb-rm-download:focus-visible { outline: 2px solid var(--rm-ink); outline-offset: 2px; }
.pb-routemap .pb-rm-route-text { flex: 1 1 100%; margin: 0; color: var(--rm-muted); }

/* The map and its list. */
.pb-routemap .pb-rm-body { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.pb-routemap.is-beside .pb-rm-body { grid-template-columns: minmax(0, 1fr) 20rem; }
.pb-routemap.is-nolist .pb-rm-list { display: none; }
.pb-routemap .pb-rm-frame {
  height: var(--rm-height); border-radius: var(--rm-radius); overflow: hidden;
  border: 1px solid var(--rm-line); background: var(--rm-soft); z-index: 0;
}
.pb-routemap .pb-rm-sketch { display: block; width: 100%; height: 100%; }
.pb-routemap .pb-rm-list {
  list-style: none; margin: 0; padding: 0; border: 1px solid var(--rm-line); border-radius: var(--rm-radius);
  overflow: auto; max-height: var(--rm-height);
}
.pb-routemap.is-below .pb-rm-list { max-height: none; columns: 2 18rem; column-gap: 0; }
.pb-routemap .pb-rm-item { break-inside: avoid; border-top: 1px solid var(--rm-line); margin: 0; }
.pb-routemap .pb-rm-item:first-child { border-top: 0; }
.pb-routemap .pb-rm-item button {
  all: unset; box-sizing: border-box; display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 0.1rem 0.75rem;
  align-items: start; width: 100%; padding: 0.65rem 0.9rem; cursor: pointer; color: var(--rm-ink);
}
.pb-routemap .pb-rm-item button:hover,
.pb-routemap .pb-rm-item button:focus-visible,
.pb-routemap .pb-rm-item.is-open button { background: var(--rm-soft); }
.pb-routemap .pb-rm-item button:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: -2px; }
.pb-routemap .pb-rm-mk { grid-row: span 2; }
.pb-routemap .pb-rm-mk svg { display: block; width: 24px; height: 32px; }
.pb-routemap .pb-rm-item b { font-weight: 600; line-height: 1.35; }
.pb-routemap .pb-rm-km { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; text-align: right; }
.pb-routemap .pb-rm-item small { grid-column: 2 / 4; color: var(--rm-muted); font-size: 0.85rem; line-height: 1.35; }
.pb-routemap .pb-rm-also {
  padding: 0.5rem 0.9rem 0.25rem; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--rm-muted); border-top: 1px solid var(--rm-line); break-after: avoid; margin: 0;
}

/* The height chart: an SVG stretched to the plot, the words around it placed in HTML so they
   keep their size (`drawing.profile`). */
.pb-routemap .pb-rm-profile { margin: 0; border: 1px solid var(--rm-line); border-radius: var(--rm-radius); padding: 0.75rem 0.75rem 0.25rem; }
.pb-routemap .pb-rm-profile figcaption { font-size: 0.85rem; color: var(--rm-muted); margin: 0 0 0.25rem 0.25rem; }
.pb-routemap .pb-rm-plot { position: relative; height: 140px; margin: 1.6rem 0.5rem 1.6rem 3.6rem; touch-action: pan-y; }
.pb-routemap .pb-rm-chart { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pb-routemap .pb-rm-grid line { stroke: var(--rm-line); stroke-width: 1; }
.pb-routemap .pb-rm-fill { fill-opacity: 0.18; }
.pb-routemap .pb-rm-line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.pb-routemap .pb-rm-y,
.pb-routemap .pb-rm-x { position: absolute; font-size: 11px; line-height: 1; color: var(--rm-muted); white-space: nowrap; }
.pb-routemap .pb-rm-y { right: calc(100% + 0.4rem); transform: translateY(-50%); }
.pb-routemap .pb-rm-x { top: calc(100% + 0.45rem); transform: translateX(-50%); }
.pb-routemap .pb-rm-cp {
  position: absolute; bottom: 100%; top: -1.4rem; transform: translateX(-50%); width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center; background: var(--rm-bg); border: 1.25px solid var(--rm-ink); color: var(--rm-ink);
  font: 700 10px/1 var(--font-body, inherit);
}
.pb-routemap .pb-rm-cp::after {
  content: ""; position: absolute; top: 100%; left: 50%; width: 0; height: calc(140px + 1.4rem - 16px);
  border-left: 1px dashed color-mix(in srgb, var(--rm-ink) 35%, transparent);
}
.pb-routemap .pb-rm-cp.is-plain { width: 8px; height: 8px; top: calc(-1.4rem + 4px); }
.pb-routemap .pb-rm-cp.is-plain::after { height: calc(140px + 1.4rem - 8px); }
.pb-routemap .pb-rm-cursor { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--rm-ink); pointer-events: none; }
.pb-routemap .pb-rm-cursor i {
  position: absolute; left: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--route);
  border: 2px solid var(--rm-bg); box-sizing: border-box; transform: translateY(-50%);
}
.pb-routemap .pb-rm-tip {
  position: absolute; top: -2.6rem; transform: translateX(-50%); background: var(--rm-ink); color: var(--rm-bg);
  font: 600 0.8rem/1.2 var(--font-body, inherit); padding: 0.3rem 0.5rem; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 2;
}
.pb-routemap .pb-rm-keys { margin: 0; font-size: 0.8rem; }

/* Markers: one inline SVG each (`icons.marker_svg`). */
.pb-rm-marker svg { display: block; width: 30px; height: 40px; filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.35)); }
.pb-rm-here { width: 16px; height: 16px; border-radius: 50%; background: var(--route, #000); border: 3px solid #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.3); box-sizing: border-box; }

/* The pop-up: Leaflet's, recoloured from the design. */
.pb-routemap .leaflet-popup-content-wrapper,
.pb-routemap .leaflet-popup-tip { background: var(--rm-bg); color: var(--rm-ink); }
.pb-routemap .leaflet-popup-content-wrapper { border-radius: 12px; padding: 0; overflow: hidden; }
.pb-routemap .leaflet-popup-content { margin: 0; width: 260px !important; font: 15px/1.5 var(--font-body, inherit); }
.pb-routemap .leaflet-container a.leaflet-popup-close-button { color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / 0.6); }
.pb-routemap .pb-pop img { display: block; width: 100%; height: 110px; object-fit: cover; }
.pb-routemap .pb-pop-body { padding: 0.75rem 0.9rem 0.9rem; display: grid; gap: 0.35rem; }
.pb-routemap .pb-pop h3 { margin: 0; font: 700 1.05rem/1.25 var(--font-heading, inherit); color: var(--rm-ink); }
.pb-routemap .pb-pop-note {
  justify-self: start; font-size: 0.8rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 999px;
  background: color-mix(in srgb, var(--rm-accent) 15%, transparent); color: var(--rm-ink);
}
.pb-routemap .pb-pop p { margin: 0; }
.pb-routemap .pb-pop-km { font-size: 0.85rem; color: var(--rm-muted); }
.pb-routemap .pb-pop-product { display: grid; gap: 0.1rem; color: var(--rm-ink); text-decoration: none; }
.pb-routemap .pb-pop-links { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.25rem; }
.pb-routemap .pb-pop-links a {
  font-size: 0.85rem; font-weight: 600; padding: 0.35rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--color-border, var(--rm-line)); color: var(--rm-ink); text-decoration: none;
}
.pb-routemap .pb-pop-links a.is-primary { background: var(--rm-accent); border-color: var(--rm-accent); color: var(--rm-accent-ink); }

/* Tiles are drawn for a light page and no style has a dark version: a dark design dims them. */
.pb-routemap.rm-dark .leaflet-tile-pane { filter: brightness(0.72) contrast(1.1) saturate(0.75); }
@media (prefers-color-scheme: dark) {
  .pb-routemap.rm-auto .leaflet-tile-pane { filter: brightness(0.72) contrast(1.1) saturate(0.75); }
}
.pb-routemap .leaflet-control-attribution { font-size: 10px; }

/* A phone: one column, the figures two by two, the download full width. */
@media (max-width: 720px) {
  .pb-routemap { --rm-height: 380px; }
  .pb-routemap.is-short { --rm-height: 300px; }
  .pb-routemap.is-tall { --rm-height: 460px; }
  .pb-routemap.is-beside .pb-rm-body { grid-template-columns: minmax(0, 1fr); }
  .pb-routemap .pb-rm-list { max-height: none; }
  .pb-routemap.is-below .pb-rm-list { columns: auto; }
  .pb-routemap .pb-rm-stats { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); flex-basis: 100%; }
  .pb-routemap .pb-rm-stats > div:nth-child(odd) { border-left: 0; }
  .pb-routemap .pb-rm-stats > div:nth-child(n + 3) { border-top: 1px solid var(--rm-line); }
  .pb-routemap .pb-rm-download { flex: 1 1 100%; justify-content: center; }
  .pb-routemap .pb-rm-routes { flex-wrap: nowrap; overflow-x: auto; }
  .pb-routemap .pb-rm-route { flex: none; }
  .pb-routemap .pb-rm-plot { height: 110px; }
  .pb-routemap .pb-rm-cp::after { height: calc(110px + 1.4rem - 16px); }
  .pb-routemap .pb-rm-cp.is-plain::after { height: calc(110px + 1.4rem - 8px); }
  .pb-routemap .pb-pop img { height: 80px; }
}