/* v5-1031 · trip map. Same tokens as style.css (--bg, --surface, --ink, --accent, --spring ...). Nothing here uses a font under 16 px.
   Map colours are tokens too, so dark mode is a full palette, not an inverted one. */
:root {
  --map-sea: #cddde1; --map-land: #efe8d8; --map-lake: #b8ced4; --map-river: #7da0ab; --map-label: #3e4c50; --map-label-land: #5d5444; --map-route: var(--accent);
  --map-pin-ring: #fff; --map-pin-ink: #fff;
}
@media (prefers-color-scheme: dark) {
  :root { --map-sea: #172529; --map-land: #2c251b; --map-lake: #223940; --map-river: #4f7783; --map-label: #b9ccd0; --map-label-land: #c9bca3; --map-pin-ring: #14100b; --map-pin-ink: #14100b; }
}
.mapdefs { position: absolute; width: 0; height: 0; overflow: hidden; }
.g-land { fill: var(--map-land); stroke: var(--map-land); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.g-water { fill: var(--map-lake); stroke: var(--map-river); stroke-width: .75px; vector-effect: non-scaling-stroke; }
.g-river { fill: none; stroke: var(--map-river); stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Home: the entry card ---------- */
.mapentry-wrap { max-width: 640px; margin-inline: auto; padding: var(--s1) var(--gr) var(--s2) var(--gl); }
.is-live .mapentry-wrap { order: -1; padding-bottom: var(--s4); }
.mapentry { position: relative; display: flex; align-items: center; gap: var(--s4); min-height: 5.5rem; padding: var(--s3) 3rem var(--s3) var(--s3); background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); color: inherit; text-decoration: none; transition: background-color .25s; }
.mapentry:active { transition-duration: 0s; background-color: var(--press); }
@media (hover: hover) and (pointer: fine) { .mapentry:hover { background-color: var(--press); } }
.mapentry__thumb { flex: 0 0 auto; width: 3.6rem; height: 4.4rem; border-radius: var(--r-s); overflow: hidden; background: var(--map-sea); box-shadow: inset 0 0 0 .5px var(--line-strong); }
.mapentry__thumb svg { display: block; width: 100%; height: 100%; }
.mapentry__t { display: grid; gap: 2px; min-width: 0; }
.mapentry__h { font: 600 1.35rem/1.2 var(--serif); letter-spacing: -.012em; }
.mapentry__s { font-size: var(--t-small); color: var(--muted); line-height: 1.35; }
.mapentry__i { position: absolute; right: var(--s4); top: 50%; width: 1.1rem; height: 1.1rem; margin-top: -.55rem; background: var(--chev); -webkit-mask: no-repeat center / contain var(--i-chev-r); mask: no-repeat center / contain var(--i-chev-r); }
.daymap { display: inline-flex; align-items: center; gap: var(--s2); min-height: 2.75rem; margin: 0 0 var(--s2); color: var(--accent); font-size: var(--t-body); font-weight: 600; text-decoration: none; border-radius: var(--r-s); }
.daymap__i { width: 1.15rem; height: 1.15rem; background: currentColor; -webkit-mask: no-repeat center / contain var(--i-pin); mask: no-repeat center / contain var(--i-pin); }
.daymap:active { background-color: var(--press); }

/* ---------- Locator on the stop page ---------- */
.mloc { position: relative; display: block; margin: var(--s4) 0 0; aspect-ratio: 16 / 10; max-height: 15rem; width: 100%; overflow: hidden; border-radius: var(--radius); background: var(--map-sea); box-shadow: var(--shadow); color: inherit; text-decoration: none; }
.mloc__svg { display: block; width: 100%; height: 100%; }
.mloc__dot { fill: var(--accent); opacity: .5; }
.mloc__halo { fill: color-mix(in srgb, var(--accent) 22%, transparent); stroke: var(--accent); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.mloc__area { fill: color-mix(in srgb, var(--accent) 12%, transparent); stroke: var(--accent); stroke-width: 1.5px; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.mloc__me { fill: var(--accent); stroke: var(--map-pin-ring); stroke-width: 3px; vector-effect: non-scaling-stroke; }
.mloc__chip { position: absolute; right: var(--s2); bottom: var(--s2); display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--s3) 0 var(--s4); border-radius: 999px; font: 600 var(--t-body)/1 var(--sans); color: var(--accent); background: color-mix(in srgb, var(--surface) 86%, transparent); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); box-shadow: 0 1px 2px rgba(20,14,8,.2); }
.mloc__chip::after { content: ""; width: 1rem; height: 1rem; margin-left: .3rem; background: currentColor; -webkit-mask: no-repeat center / contain var(--i-chev-r); mask: no-repeat center / contain var(--i-chev-r); }
.mloc:active .mloc__chip { background: var(--press); }
.mloc:focus-visible { outline-offset: 3px; border-radius: var(--radius); }
.vhere .mloc ~ .maplink--here { margin-top: var(--s3); }

/* ---------- Map screen ---------- */
.mwrap { max-width: 640px; margin-inline: auto; padding: calc(var(--bar-h) + var(--s3)) var(--gr) var(--s2) var(--gl); }
.mwrap--body { padding-top: 0; padding-bottom: calc(var(--s7) + var(--sab)); }
.mtitle { margin: 0 0 var(--s2); font: 600 min(var(--t-title), 9vw)/1.12 var(--serif); letter-spacing: -.02em; }
.view--map { padding-bottom: 0; }
.mchips { position: sticky; top: var(--bar-h); z-index: 4; margin: var(--s2) 0 var(--s3); background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: 0 .5px 0 var(--line); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .mchips { background: var(--bg); } }
.mchips__track { display: flex; gap: var(--s2); overflow-x: auto; padding: var(--s2) var(--gr) var(--s2) var(--gl); scrollbar-width: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain; max-width: 640px; margin-inline: auto; }
.mchips__track::-webkit-scrollbar { display: none; }
.mchip { flex: 0 0 auto; scroll-snap-align: center; display: grid; place-items: center; align-content: center; min-width: 3.3rem; min-height: 3.6rem; padding: var(--s1) var(--s3); border: 0; border-radius: var(--r-s); background: var(--fill); color: var(--ink); line-height: 1.1; font-family: var(--sans); cursor: pointer; transition: transform var(--spring-dur) var(--spring), background-color .25s, color .25s; }
.mchip small { font-size: .95rem; color: var(--muted); }
.mchip b { font-size: 1.2rem; font-weight: 700; }
.mchip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.mchip[aria-pressed="true"] small { color: inherit; }
.mchip:active { transition-duration: 0s; transform: scale(.97); }

.mapbox { position: relative; height: min(58svh, 34rem); min-height: 22rem; overflow: hidden; border-radius: var(--radius-lg); background: var(--map-sea); box-shadow: var(--shadow); touch-action: pan-y; -webkit-user-select: none; user-select: none; isolation: isolate; }
.mapbox.is-zoomed { touch-action: none; }
.mapsvg { position: absolute; inset: 0; display: block; }
.mroute { fill: none; stroke: var(--map-route); stroke-width: 1.5px; opacity: .5; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.mroute--day { stroke-width: 3px; opacity: .85; }
.mlabels { position: absolute; inset: 0; pointer-events: none; }
.mlabel { position: absolute; left: 0; top: 0; white-space: nowrap; font: italic 500 var(--t-body)/1.2 var(--serif); letter-spacing: .04em; color: var(--map-label-land); opacity: .9; transition: opacity .3s; }
.mlabel--sea, .mlabel--water { color: var(--map-label); }
.mlabel--sea { white-space: normal; width: 6.6rem; text-align: center; }
.mpins { position: absolute; inset: 0; }
.mp { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; font-family: var(--sans); color: var(--map-pin-ink); will-change: transform; -webkit-tap-highlight-color: transparent; }
.mp[hidden] { display: none; }
.mp__d { display: grid; place-items: center; box-sizing: border-box; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); border: 2.5px solid var(--map-pin-ring); box-shadow: 0 1px 4px rgba(20,14,8,.4); font: 700 16px/1 var(--sans); transition: transform var(--spring-dur) var(--spring), background-color .25s; }
.mp--area .mp__d { width: 44px; height: 44px; border: 2px dashed var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: none; color: var(--ink); }
.view--map .mp[data-n]:not([data-n=""]) .mp__d { width: 30px; height: 30px; }
.view--map .mp--area[data-n]:not([data-n=""]) .mp__d { width: 44px; height: 44px; }
.mp--cluster .mp__d { width: 36px; height: 36px; font-size: 16px; background: var(--ink); color: var(--bg); border-color: var(--map-pin-ring); }
.mp.is-sel { z-index: 3; }
.mp.is-sel .mp__d { transform: scale(1.22); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent), 0 3px 10px rgba(20,14,8,.45); }
.mp--area.is-sel .mp__d { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.mp:active .mp__d { transform: scale(.92); transition-duration: 0s; }
.mp:focus-visible { outline: none; }
.mp:focus-visible .mp__d { outline: 3px solid var(--ink); outline-offset: 3px; }
.mzoom { position: absolute; right: var(--s3); bottom: var(--s3); z-index: 2; display: grid; border-radius: 14px; overflow: hidden; background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: var(--shadow); }
.mz { width: 2.75rem; height: 2.75rem; border: 0; background: none; color: var(--accent); font: 500 1.6rem/1 var(--sans); cursor: pointer; }
.mz + .mz { border-top: .5px solid var(--line-strong); }
.mz:disabled { opacity: .35; cursor: default; }
.mz:active { background: var(--press); }
.mnote { margin: var(--s3) var(--s1) 0; font-size: var(--t-small); line-height: 1.45; color: var(--muted); }

/* the list under the map: the same stops in order (screen readers get this as an ordered list) */
.mlistwrap { margin-top: var(--s5); }
.mlist__h { margin: var(--s5) var(--s1) var(--s2); font: 600 var(--t-h3)/1.25 var(--serif); letter-spacing: -.01em; }
.mlist__h:first-child { margin-top: 0; }
.mlist { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.mlist li + li { border-top: .5px solid var(--line); }
.mrow { position: relative; display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 3.6rem; padding: var(--s2) 48px var(--s2) var(--s4); border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color .25s; }
.mrow::after { content: ""; position: absolute; right: var(--s4); top: 50%; width: 1.1rem; height: 1.1rem; margin-top: -.55rem; background: var(--chev); -webkit-mask: no-repeat center / contain var(--i-chev-r); mask: no-repeat center / contain var(--i-chev-r); }
.mrow:active { transition-duration: 0s; background-color: var(--press); }
@media (hover: hover) and (pointer: fine) { .mrow:hover { background-color: var(--press); } }
.mrow:focus-visible { outline-offset: -3px; border-radius: 0; }
.mrow__n { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--fill); color: var(--accent); font: 700 1rem/1 var(--sans); }
.mrow__t { display: grid; min-width: 0; gap: 1px; }
.mrow__name { font: 600 var(--t-lead)/1.25 var(--serif); letter-spacing: -.008em; overflow-wrap: anywhere; }
.mrow__sub { font-size: var(--t-small); line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; }

/* ---------- The sheet: material, grabber, springs in; follows a finger down ---------- */
.msheet { position: fixed; z-index: 12; left: 0; right: 0; bottom: 0; max-width: 640px; margin-inline: auto; padding: calc(var(--s4) + 8px) var(--gr) calc(var(--s4) + var(--sab)) var(--gl); background: color-mix(in srgb, var(--surface) 90%, transparent); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: 0 -10px 40px rgba(20,14,8,.28), inset 0 .5px 0 rgba(255,255,255,.4); transform: translateY(108%); transition: transform var(--spring-dur) var(--spring); touch-action: none; outline: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .msheet { background: var(--surface); } }
.msheet[hidden] { display: none; }
.msheet.is-open { transform: none; }
.msheet.is-drag { transition: none; }
.msheet__grab { position: absolute; top: 8px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--line-strong); opacity: .6; }
.msheet__x { position: absolute; top: var(--s2); right: var(--s2); width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--fill); cursor: pointer; }
.msheet__x::before, .msheet__x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1rem; height: 2px; margin: -1px 0 0 -.5rem; border-radius: 1px; background: var(--ink); transform: rotate(45deg); }
.msheet__x::after { transform: rotate(-45deg); }
.msheet__row { display: flex; gap: var(--s4); align-items: center; padding-right: 52px; flex-wrap: wrap; }
.msheet__thumb { flex: 0 0 auto; width: min(5.6rem, 24vw); height: 4.2rem; border-radius: var(--r-s); overflow: hidden; background: var(--fill); }
.msheet__thumb[hidden] { display: none; }
.msheet__thumb img { width: 100%; height: 100%; object-fit: cover; }
.msheet__info { min-width: 0; flex: 1 1 9rem; }
.msheet__h { hyphens: none; overflow-wrap: break-word; margin: 0 0 2px; font: 600 min(1.35rem, 8.2vw)/1.15 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.msheet__m, .msheet__p, .msheet__n { margin: 0; font-size: var(--t-small); line-height: 1.4; color: var(--muted); }
.msheet__p { color: var(--ink); font-weight: 500; }
.msheet__n { margin-top: var(--s2); }
.msheet__n[hidden] { display: none; }
.msheet__open { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 3.25rem; margin-top: var(--s3); border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 600 var(--t-body)/1.2 var(--sans); cursor: pointer; transition: transform var(--spring-dur) var(--spring), filter .25s; }
.msheet__open:active { transition-duration: 0s; transform: scale(.98); filter: brightness(.92); }
.msheet__x:focus-visible, .msheet__open:focus-visible, .mz:focus-visible, .mchip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.view--map.is-sheet .mwrap--body { padding-bottom: calc(14rem + var(--sab)); }

@media (prefers-contrast: more) { .mapbox, .mlist, .mapentry, .mloc { box-shadow: inset 0 0 0 1px var(--line-strong); } .mlabel { opacity: 1; } }
@media (prefers-reduced-transparency: reduce) { .msheet { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; } .mchips { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } .mzoom, .mloc__chip { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* Reduced motion: no spring, no slide or scale. The sheet fades. The map moves with one short step (map.js jumps instead of gliding). */
@media (prefers-reduced-motion: reduce) {
  .msheet { transform: none; opacity: 0; transition: opacity .2s; }
  .msheet.is-open { opacity: 1; }
  .mp__d, .mchip, .msheet__open { transition: none; }
  .mp:active .mp__d, .mchip:active, .msheet__open:active { transform: none; }
  .mp.is-sel .mp__d { transform: none; }
}

/* ---------- GL upgrade (apple-pro 1101, assets/mapgl.js + landmap.css) ----------
   The host is always in the page once the module has loaded but stays hidden until the module reports a live GL engine (.view--gl).
   The module reads plain token names; these map them onto this app's tokens so both colour schemes follow the app. */
.glhost {
  visibility: hidden; pointer-events: none; position: fixed; inset: 0; z-index: 4;
  --tint: var(--accent); --on-tint: var(--accent-ink); --tint-press: var(--accent); --tint-fill: var(--press);
  --canvas: var(--bg); --card: var(--surface); --ink-2: var(--muted); --ink-3: var(--muted); --gold: var(--accent); --gold-soft: color-mix(in srgb, var(--accent) 12%, var(--surface));
  --pin-ring: var(--map-pin-ring); --map-water: var(--map-sea); --map-water-line: var(--map-river);
  --map-label-halo: color-mix(in srgb, var(--bg) 90%, transparent);
  --glass-bar: color-mix(in srgb, var(--bg) 82%, transparent); --glass-sheet: color-mix(in srgb, var(--surface) 90%, transparent);
  --mat-bar-solid: var(--bg); --safe-t: var(--sat); --safe-b: var(--sab); --bar-h: 60px; --gutter: var(--gl);
}
.view--gl .glhost { visibility: visible; pointer-events: auto; }
.view--gl > .mwrap, .view--gl > .mchips { visibility: hidden; }

.mapentry__priv { margin: var(--s2) 0 0; font-size: var(--t-small); line-height: 1.4; color: var(--muted); }
.glhost .glpriv { font-weight: 400; font-size: var(--t-small); line-height: 1.35; border-radius: 16px; }