/* ============================================================================================
   MAP BLOCK ({{ stop_map }}) — OWNED FILE. All pin-map / place-list styling lives here, not in
   styles.css, so a concurrent contrast pass on styles.css never collides with this block.
   Extracted 2026-09-25 (Oleg: "number too close to tags, list below is not readable and looks
   different for each number") from styles.css's former "Stop map" section, plus real fixes:
     1. Pin-number-to-label clearance widened (6px -> 6px+ measured, see label offsets below).
     2. The place-list rows (.stp-cards) got their OWN grid + badge system instead of reusing
        `.section-links a`, because that shared rule only ever targeted the <a> tag: the 10 of 26
        stops with no page render as `<span class="sl-dead">`, which never matched `.section-links
        a` and so never got display:grid, subgrid or the two-column layout. Every dead row rendered
        as a bare inline run of text while every linked row rendered as a bordered two-column card:
        that IS "looks different for each number". Fixed structurally: one .stp-row class shared by
        both the <a> and the <span class="sl-dead"> markup, styled identically except the badge fill.
     3. The six pin-series hues (--map-1..6) are replaced: two of the inherited six (the old
        --map-4 #707E30 and --map-6 #2F8E61) sat at 4.45:1 and 4.07:1 against white numerals,
        under the 4.5:1 floor, AND were only 1.09x apart in RGB distance from each other (a
        near-duplicate olive pair). New six all clear >=5.9:1 white-text contrast and the closest
        pair is 57.6 RGB units apart (was validated at 44 on the reference site). --map-1 (brand
        green) and --map-5 (plum) are unchanged; --map-2/3/4/6 are replaced. ---------------------- */
:root {
  /* Pin series: six genuinely separated hues, each carrying white numerals at >=4.5:1.
     Comments now match the actual hex (the inherited copy's comments were mismatched: "deep
     harbour teal" pointed at a red-brown hex, "ochre" pointed at a navy hex). */
  --map-1: #19571B;  /* mangrove green, the brand */
  --map-2: #7A2416;  /* terracotta rust */
  --map-3: #083D8A;  /* deep blue */
  --map-4: #8A5A0A;  /* deep amber/ochre */
  --map-5: #6B2F57;  /* plum */
  --map-6: #146B63;  /* deep teal */

  /* The map's own ground palette, warm-neutral so natural colours read true on it. */
  --mp-land:    #F8F4F5;
  --mp-water:   #E6CFBF;
  --mp-coast:   #A0714E;
  --mp-green:   #E3D2E3;
  --mp-grid:    #ECE3E4;
  --mp-edge:    #DFD3D5;
  --mp-road:    #B0A3A3;
  --mp-road-mj: #8A7D77;
  --mp-trail:   #7C9BC4;
  --mp-ink:     #42362A;
}

/* ---- The figure itself ----
   MIN-WIDTH, not just width:100%. Shrinking the whole SVG to fit a 358px phone card scaled
   every real-pixel clearance down with it: two labels measured >= 6px apart on desktop dropped
   to ~5.6px real px on a 390 viewport purely from that scale-down, because the viewBox (760
   units) never changes, only its displayed size did. The scroller (#stop-map-scroll), its
   scroll mask and its centre()/clipEdges() JS already existed for exactly this case but had
   nothing to scroll, since nothing ever kept the SVG wider than its container. Pinning a
   min-width activates that existing machinery instead of adding new: the map now scrolls
   horizontally on a phone rather than shrinking below the size its own de-collision math
   assumes. */
.ix-map { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.stp-map { width:100%; min-width:640px; height:auto; display:block; }
.stp-frame { fill:var(--mp-land); stroke:var(--mp-edge); stroke-width:1.25; }
.stp-grid line { stroke:var(--mp-grid); stroke-width:1; }
.stp-leader line { stroke:var(--mp-ink); stroke-width:1; opacity:.45; stroke-dasharray:2 2; }

/* ---- Basemap, real OSM geometry. Weight order runs lightest to heaviest so the eye lands on the
   featured route last and stays there: water, green, trails, lanes, streets, coast, funicular. ---- */
.bm-water path { fill:var(--mp-water); stroke:none; }
.bm-green path { fill:var(--mp-green); stroke:none; }
.bm-trail path { fill:none; stroke:var(--mp-trail); stroke-width:.85; opacity:.55; stroke-dasharray:3.5 3; stroke-linecap:round; }
.bm-lane path { fill:none; stroke:var(--mp-road); stroke-width:.9; opacity:.55; }
.bm-road-minor path { fill:none; stroke:var(--mp-road); stroke-width:1.3; opacity:.85; }
.bm-road-major path { fill:none; stroke:var(--mp-road-mj); stroke-width:2.2; opacity:.95; stroke-linecap:round; }
.bm-coast path { fill:none; stroke:var(--mp-coast); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.bm-border path { fill:none; stroke:var(--mp-coast); stroke-width:1.1; stroke-dasharray:6 4;
  stroke-linecap:round; stroke-linejoin:round; opacity:.55; }
.bm-river path { fill:none; stroke:var(--mp-water); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.bm-funicular path { fill:none; stroke:var(--map-1); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round;
  filter: drop-shadow(0 0 1.6px rgba(255,255,255,.95)); }
.bm-fun-join { stroke:var(--map-1); stroke-width:2.4; stroke-dasharray:4 3.5; opacity:.7; stroke-linecap:round; }

/* ---- Pins and labels ---- */
.stp-lbl { font-size:12.5px; fill:var(--mp-ink); font-weight:650; letter-spacing:.005em;
  paint-order:stroke fill; stroke:var(--mp-land); stroke-width:2.2px; stroke-linejoin:round; }
.stp-lbl-home { font-size:14.5px; fill:#1A2420; font-weight:800; letter-spacing:-.005em;
  paint-order:stroke fill; stroke:var(--mp-land); stroke-width:2.8px; stroke-linejoin:round; }
.stp-num { font-size:10px; font-weight:700; fill:#fff; paint-order:fill; }
.stp-dot { stroke:var(--mp-land); stroke-width:1.75; }
.stp-pin .stp-dot, .stp-pin .stp-num, .stp-labels text { transition: opacity .16s ease; }
.stp-pin:not(.is-on) .stp-dot { opacity:.16; }
.stp-pin:not(.is-on) .stp-num { opacity:.2; }
.stp-labels text[data-group]:not(.is-on) { opacity:.22; }
.stp-map .stp-labels text.is-cut { opacity:0; }
@media (prefers-reduced-motion: reduce) {
  .stp-pin .stp-dot, .stp-pin .stp-num, .stp-labels text { transition:none; }
}
.stp-pin { cursor:pointer; }
.stp-pin .stp-dot { transition: r .14s ease, stroke-width .14s ease; }
.stp-pin:hover .stp-dot, .stp-pin:focus-visible .stp-dot { stroke:#1A2420; stroke-width:2.5; }
.stp-pin:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { .stp-pin .stp-dot { transition:none; } }
.stp-home circle:first-child { fill:var(--mp-land); stroke:var(--map-1); stroke-width:2; }
.stp-home-dot { fill:var(--map-1); }

.stp-g0 .stp-dot { fill:var(--map-1); } .stp-legend .stp-g0 .stp-key { background:var(--map-1); }
.stp-g1 .stp-dot { fill:var(--map-2); } .stp-legend .stp-g1 .stp-key { background:var(--map-2); }
.stp-g2 .stp-dot { fill:var(--map-3); } .stp-legend .stp-g2 .stp-key { background:var(--map-3); }
.stp-g3 .stp-dot { fill:var(--map-4); } .stp-legend .stp-g3 .stp-key { background:var(--map-4); }
.stp-g4 .stp-dot { fill:var(--map-5); } .stp-legend .stp-g4 .stp-key { background:var(--map-5); }
.stp-g5 .stp-dot { fill:var(--map-6); } .stp-legend .stp-g5 .stp-key { background:var(--map-6); }

/* ---- Container: the map reads as a card, like every other block on the page ---- */
.stp-wrap { position:relative; margin-top:var(--s3); }
.ix .ix-map, .ix-map { border-radius:var(--radius); background:var(--mp-land);
  box-shadow:0 1px 2px rgba(28,22,14,.05), 0 8px 24px rgba(28,22,14,.07); }

/* ---- Legend: chips, not loose dots ---- */
.stp-legend { list-style:none; margin:1.6rem 0 0; padding:0; display:flex; flex-wrap:wrap;
  gap:.45rem .5rem; align-items:center; position:relative; }
.stp-legend li { display:inline-flex; align-items:center; gap:.42rem; font-size:var(--step--2, .72rem);
  color:var(--ink-soft); font-weight:500; line-height:1.3; }
.stp-chip .stp-key { width:10px; height:10px; border-radius:50%; display:inline-block; flex:0 0 auto;
  margin-right:.45rem; box-shadow:0 0 0 1.5px rgba(255,255,255,.6) inset; }
.stp-chip { display:inline-flex; align-items:center; }
.stp-g0 .stp-key { background:var(--map-1); } .stp-g1 .stp-key { background:var(--map-2); }
.stp-g2 .stp-key { background:var(--map-3); } .stp-g3 .stp-key { background:var(--map-4); }
.stp-g4 .stp-key { background:var(--map-5); } .stp-g5 .stp-key { background:var(--map-6); }
.stp-bar-line { stroke:var(--mp-ink); stroke-width:1.6; opacity:.75; }
.stp-north-head { fill:var(--mp-ink); opacity:.75; }
.stp-furn-lbl { font-weight:600; opacity:.85; stroke-width:0; }
.stp-legend li.stp-attrib { opacity:.75; }
.stp-legend li.stp-swipe { display:none; }

/* ---- Narrow screens ---- */
@media (max-width: 620px) {
  .ix-map {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  }
  .stp-lbl { font-size:11.5px; }
  .stp-legend li.stp-swipe { display:inline-flex; }
  .stp-legend { gap:.4rem .45rem; }
}

/* ---- Dark theme: the map keeps its own ground, darkened. ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mp-land:    #31251B;
    --mp-water:   #493417;
    --mp-coast:   #96704E;
    --mp-green:   #38242A;
    --mp-grid:    #3C3024;
    --mp-edge:    #47392C;
    --mp-road:    #74675A;
    --mp-road-mj: #95897C;
    --mp-trail:   #556D8A;
    --mp-ink:     #E2D9D3;
  }
  :root:not([data-theme="light"]) .stp-lbl-home { fill:#B89A2E; }
  :root:not([data-theme="light"]) .stp-home circle:first-child { stroke:#B89A2E; }
  :root:not([data-theme="light"]) .stp-home-dot { fill:#B89A2E; }
  :root:not([data-theme="light"]) .stp-pin:hover .stp-dot { stroke:#B89A2E; }
}
:root[data-theme="dark"] {
  --mp-land:    #31251B;
  --mp-water:   #493417;
  --mp-coast:   #96704E;
  --mp-green:   #38242A;
  --mp-grid:    #3C3024;
  --mp-edge:    #47392C;
  --mp-road:    #74675A;
  --mp-road-mj: #95897C;
  --mp-trail:   #556D8A;
  --mp-ink:     #E2D9D3;
}
:root[data-theme="dark"] .stp-lbl-home { fill:#B89A2E; }
:root[data-theme="dark"] .stp-home circle:first-child { stroke:#B89A2E; }
:root[data-theme="dark"] .stp-home-dot { fill:#B89A2E; }
:root[data-theme="dark"] .stp-pin:hover .stp-dot { stroke:#B89A2E; }

/* ============================================================================================
   THE PLACE LIST (.stp-cards): ONE shared row class, .stp-row, applied to BOTH the real <a>
   rows and the dead <span class="sl-dead"> rows (10 of 26 stops carry no page). Before this,
   `.section-links a { display:grid; ... }` in styles.css only ever matched the <a> tag, so a
   dead row (a bare <span>) got none of that grid, padding, border or card treatment: it rendered
   as a plain inline text run while every linked row rendered as a bordered two-column card. Same
   defect Oleg reported ("looks different for each number"). Every row now carries a number badge
   (colour = its group's pin colour, same series as the map) plus name and distance in one shared
   3-column grid, so every row is byte-identical in structure regardless of whether it links out.
   ============================================================================================ */
.stp-cards { grid-template-columns: 28px minmax(0,1fr) minmax(0,max-content); }
.stp-cards li { grid-column: 1 / -1; }
@supports (grid-template-columns: subgrid) {
  .stp-cards li { display:grid; grid-template-columns:subgrid; }
}
.stp-cards .stp-row {
  display:grid; grid-template-columns:28px minmax(0,1fr) minmax(0,max-content);
  align-items:center; gap:.3rem .8rem;
  padding:.7rem .95rem; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); text-decoration:none; color:var(--ink);
}
@supports (grid-template-columns: subgrid) {
  .stp-cards .stp-row { grid-column:1 / -1; grid-template-columns:subgrid; }
}
.stp-cards a.stp-row:hover { border-color:var(--brand); background:var(--paper-2); }
.stp-cards .sl-dead { cursor:default; }
.stp-cards .sl-name { font-family:var(--display); font-weight:700; font-size:var(--step-0); line-height:1.3; }
.stp-cards .sl-note { color:var(--ink-soft); font-size:var(--step--1); line-height:1.4; text-align:right; }

/* The badge: same size/shape everywhere, only the fill changes with the place's own group,
   using the SAME six-slot series as the pins so map and list read as one system. White numerals
   at >=5.9:1 on every slot (measured against the new six-hue palette above). */
.stp-badge {
  grid-row: 1 / -1;
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%; flex:0 0 auto;
  font-size:11px; font-weight:700; line-height:1; color:#fff;
}
.stp-badge.stp-g0 { background:var(--map-1); }
.stp-badge.stp-g1 { background:var(--map-2); }
.stp-badge.stp-g2 { background:var(--map-3); }
.stp-badge.stp-g3 { background:var(--map-4); }
.stp-badge.stp-g4 { background:var(--map-5); }
.stp-badge.stp-g5 { background:var(--map-6); }

@media (max-width:760px) {
  .stp-cards .stp-row { grid-template-columns:28px 1fr; }
  .stp-cards .sl-note { grid-column:2; text-align:left; }
}