/* Standalone route map under the stat band on the home page.
   GENERATED by _build/map/build_route_section.py -- edit that script, not this.
   `python build_route_section.py --revert` removes this and the map section. */

/* The map's archival palette. These lived in the SVG's own <style>, but inline
   SVG styles leak into the whole page -- the map's .sub/.title were clobbering
   the hero subtitle -- so they are declared here, scoped under .route-map-svg
   so nothing escapes the map. (.title and .sub are dropped; the clean map has
   no title or scale bar, so they were unused as well as harmful.) */
.route-map-svg .cty { fill:#e9e2cf; stroke:#b3a988; stroke-width:1.1; stroke-linejoin:round; }
.route-map-svg .cty-lbl { fill:#7c7053; font-size:19px; letter-spacing:.02em;
  text-anchor:middle; paint-order:stroke; stroke:#f3eee1; stroke-width:3.4px; }
.route-map-svg .rail { fill:none; stroke:#17324f; stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round; }
.route-map-svg .tie { stroke:#17324f; stroke-width:1.5; stroke-linecap:round; }
.route-map-svg .stop-dot-o { fill:#b8892d; }
.route-map-svg .stop-dot-i { fill:#17324f; }
.route-map-svg .stop-lbl { font-size:20px; fill:#17324f; paint-order:stroke;
  stroke:#f3eee1; stroke-width:3.6px; }

.route-map-section { padding: 40px 0 4px; }

.route-map-section .route-map {
  width: min(760px, 92%);
  margin: 0 auto;
  display: block;
}

.route-map-section .route-map-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* only the names take the pointer; the shapes and rail line stay inert */
.route-map .mlink { cursor: pointer; }
.route-map .mlink text { transition: fill .15s ease; }
.route-map .mlink:hover .stop-lbl,
.route-map .mlink:focus-visible .stop-lbl { fill: var(--rust); }
.route-map .mlink:hover .cty-lbl,
.route-map .mlink:focus-visible .cty-lbl { fill: var(--rust); }
.route-map .mlink:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* The five stats are an auto-fit 1fr grid; once they wrap, the last row's
   orphan sits hard left. Flex with the same basis centers the final row.
   stat-band only exists on index.html, so this override stays here. */
.stat-band .stats { display: flex; flex-wrap: wrap; justify-content: center; }
.stat-band .stat { flex: 1 1 150px; }

/* Phones: full page width sets the 1600-unit labels near 5px, so the county
   names and the closest-spaced towns drop out and the rest are enlarged. */
@media (max-width: 640px) {
  .route-map-section .route-map { width: 96%; }
  .route-map .cty-link { display: none; }
  .route-map .mlink.minor { display: none; }
  .route-map .stop-lbl { font-size: 58px; stroke-width: 9px; }
  .route-map .stop-dot-o { r: 9; }
  .route-map .stop-dot-i { r: 4; }
  .route-map .rail { stroke-width: 4.5; }
  .route-map .tie { stroke-width: 2.6; }
  /* Ashland is anchored at its start near the right edge; at this size its
     name would run off, so turn it back on itself */
  .route-map [data-town="Ashland"] .stop-lbl {
    text-anchor: end;
    transform: translateX(-30px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .route-map .mlink text { transition: none; }
}