/*
 * The route map.
 *
 * Shared deliberately: imported by BOTH the published site's stylesheet and the
 * admin's, because the editor shows the same SVG the build publishes. Keeping two
 * copies in step by hand is exactly the drift that stops an editor preview being a
 * preview — and the first symptom here was worse than drift, because the admin had
 * no copy at all and every map rendered as unstyled black shapes.
 *
 * It asks for its colours through --map-* tokens rather than reaching for either
 * palette directly, because the two hosts name their colours differently. Each one
 * assigns these from its own palette; the fallbacks mean a map still renders
 * legibly if a host forgets.
 */

.route-map {
    --map-context: var(--vine-pale, #9aa88a);
    --map-route: var(--vine, #6d7f4e);
    --map-here: var(--bark, #7c5c3b);
    --map-paper: var(--paper, #f6f3ea);
    --map-ink: var(--ink-soft, #5b564b);
    --map-font: var(--sans, system-ui, sans-serif);
    --map-water: #6f8fa8;

    margin: 2rem 0;
}

.route-map svg {
    display: block;
    width: 100%;
    height: auto;
    /* Reserves the space before the SVG lays out, so the page does not jump. */
    aspect-ratio: 720 / 460;
}

.route-map path { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Context. Deliberately faint — it is there so the route has somewhere to be, and
   the moment it competes with the route it has stopped doing its job.

   The weights are the whole legibility of a city map: a motorway and a side street
   drawn identically is worse than no streets at all, because it reads as noise
   rather than as a place. */
.route-map__grid { stroke: var(--map-context); stroke-width: 0.5; opacity: 0.4; }
.route-map__coastline { stroke: var(--map-context); stroke-width: 1; }
.route-map__borders { stroke: var(--map-context); stroke-width: 0.75; stroke-dasharray: 4 3; opacity: 0.7; }

/* Streets, from OpenStreetMap. */
.route-map__road-major { stroke: var(--map-context); stroke-width: 1.1; opacity: 0.85; }
.route-map__road-minor { stroke: var(--map-context); stroke-width: 0.55; opacity: 0.5; }
.route-map__rail { stroke: var(--map-context); stroke-width: 0.6; stroke-dasharray: 5 4; opacity: 0.45; }
/* Water gets its own colour rather than another grey — a river is the one piece of
   context that tells you which way a city faces. */
.route-map__water { stroke: var(--map-water, #6f8fa8); stroke-width: 1.1; opacity: 0.6; }

/* The whole journey. */
.route-map__track { stroke: var(--map-route); stroke-width: 1.75; opacity: 0.55; }

/* This post's share of it, over the top. */
.route-map__walked { stroke: var(--map-here); stroke-width: 2.75; }

.route-map__stop { stroke: var(--map-paper); stroke-width: 1.5; }

/* Three states, and the point of them is that a post about day three shows days
   one and two behind it and days four onward still waiting. */
.route-map__stop--past { fill: var(--map-route); opacity: 0.45; }
.route-map__stop--ahead { fill: var(--map-context); opacity: 0.35; }
.route-map__stop--here { fill: var(--map-here); }

.route-map__scale path { stroke: var(--map-ink); stroke-width: 1; }
.route-map__scale text { fill: var(--map-ink); font-family: var(--map-font); font-size: 11px; }

/* The stops as text. Not decoration: an SVG <title> needs a hover, which a phone
   does not have, so this is where the information actually lives. */
.route-map__stops { margin-top: 1rem; font-family: var(--map-font); font-size: 0.875rem; }
.route-map__stops ol { margin: 0; padding-left: 1.4rem; }
.route-map__stop-name { margin-bottom: 0.35rem; }
.route-map__stop-name--past, .route-map__stop-name--ahead { color: var(--map-ink); }
.route-map__stop-note { color: var(--map-ink); }

.route-map__credit {
    margin-top: 0.75rem;
    font-family: var(--map-font);
    font-size: 0.75rem;
    color: var(--map-ink);
}