/*
 * 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;
    /* The sheet the map is drawn on. Each host names its own; the fallback is the
       site's slightly deeper paper. */
    --map-panel: var(--paper-deep, #ece7da);
    /* The site's own shape and edge for anything rectangular, so the map meets the
       page the way a photograph does. The literals are copies of --grown-radius and
       --grown-mottle in assets/site/site.css — the same arrangement as the colours
       above, and it is what gives the admin's preview the published treatment
       without the admin having to know the site's token names. */
    --map-radius: var(--grown-radius, 1.6rem 1.2rem 1.8rem 1.3rem / 1.2rem 1.7rem 1.1rem 1.6rem);
    /* No fallback drawing here, unlike the colours above: the mottle is four
       kilobytes, and a copy of it in this file would be four kilobytes of dead
       weight in the published stylesheet, which inlines this one. A host that does
       not define it loses the mask entirely and gets a plain rounded map, which is
       the same thing an old browser gets. */
    --map-mottle: var(--grown-mottle);

    /* Shallower than a photograph's, and drawn at a smaller tile size so that it is
       still two ranks of discs deep rather than one rank of beads. Shallower because
       there is something in the corner to protect: the scale bar is set 32 units in
       from the left and 34 up from the bottom, which is about 24px and 26px at the
       width a post shows the map at, and it is the one part of the drawing that is a
       measurement rather than a picture. This fringe stops short of it. */
    --map-fringe: 1.4rem;

    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;
    /* The sheet, so that the rounded and mottled edge below has something to be an
       edge OF — the drawing itself is strokes on nothing. */
    background: var(--map-panel);
    border-radius: var(--map-radius);
    /* The same four-layer bite the photographs get; see "nothing has a hard edge" in
       assets/site/site.css for what each layer does. The panel and the outermost
       coastlines and streets go together, which is the point: the map stops being a
       framed picture of somewhere and becomes a patch of somewhere. */
    mask-image:
        linear-gradient(#000, #000),
        var(--map-mottle),
        linear-gradient(to right, #000, transparent var(--map-fringe), transparent calc(100% - var(--map-fringe)), #000),
        linear-gradient(to bottom, #000, transparent var(--map-fringe), transparent calc(100% - var(--map-fringe)), #000);
    mask-size: auto, 44px 44px, auto, auto;
    mask-repeat: no-repeat, repeat, no-repeat, no-repeat;
    mask-composite: subtract, intersect, add, add;
}

.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; }
/* Internal boundaries: the same dashed language as a country border, a little
   finer, because a state line is the same kind of fact told at a smaller scale.
   Not much fainter, though — on a regional map these are often the only thing
   saying where you are, and a trip to a place where three states meet is a blank
   rectangle without them. */
.route-map__states { stroke: var(--map-context); stroke-width: 0.6; stroke-dasharray: 3 3; opacity: 0.65; }

/* 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); }

/* The number beside a stop.
   paint-order is doing the work: it draws the stroke first and the fill over it, so
   the paper-coloured stroke becomes a halo knocked out of whatever the number is
   sitting on. Without it a number over a street is unreadable, and the alternative —
   a filled rectangle behind each one — puts a hole in the map. */
.route-map__number {
    fill: var(--map-here);
    /* The panel rather than the page: the halo has to match what the map is drawn
       on, which since the mottled edge arrived is --map-panel. */
    stroke: var(--map-panel);
    stroke-width: 3;
    paint-order: stroke fill;
    font-family: var(--map-font);
    /* In the map's own units, not the page's: the whole drawing is scaled down to
       the column width, so this lands at about 11px on a post. */
    font-size: 15px;
    font-weight: 700;
    dominant-baseline: central;
}

.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 ul { margin: 0; padding: 0; list-style: none; }
.route-map__stop-name { margin-bottom: 0.35rem; }

/* The number, repeated from the drawing. Fixed width so the names line up whether a
   stop is numbered or not, which is what makes the other days read as the aside they
   are rather than as items that lost their numbers. */
.route-map__stop-index {
    display: inline-block;
    min-width: 1.4em;
    font-weight: 700;
    color: var(--map-here);
}
.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);
}