/* Shared route map (pkg/ui/geomap, docs/architecture/GEOMAP.md). Theme via
   --ui-fg, --ui-muted, --ui-bg, --ui-line and --ui-accent (fallbacks: the
   product shell's --color-* tokens). */
.geomap__svg { display: block; width: 100%; height: auto; max-height: 70vh; background: var(--ui-bg, var(--color-surface, #ffffff)); border: 1px solid var(--ui-line, var(--color-border, #d9dee6)); border-radius: 10px; }
.geomap__border { fill: none; stroke: var(--ui-muted, var(--color-text-muted, #5b6575)); stroke-width: 1; stroke-opacity: 0.5; stroke-linejoin: round; }
.geomap__leg { fill: none; stroke: var(--ui-accent, var(--color-primary, #0b5cad)); stroke-width: 3; stroke-opacity: 0.7; stroke-linejoin: round; stroke-linecap: round; }
.geomap__leg--gap { stroke: var(--ui-muted, var(--color-text-muted, #5b6575)); stroke-dasharray: 6 6; }
.geomap__leg--sel { stroke: #d9480f; stroke-width: 5; stroke-opacity: 1; }
.geomap__dot { fill: var(--ui-bg, var(--color-surface, #ffffff)); stroke: var(--ui-fg, var(--color-text, #1d2430)); stroke-width: 2; vector-effect: non-scaling-stroke; }
/* Station labels in SVG user units (the viewBox scales them): larger on
   phones, a halo in the page background keeps them readable over legs. */
.geomap__label { font-size: 32px; fill: var(--ui-fg, var(--color-text, #1d2430)); paint-order: stroke; stroke: var(--ui-bg, var(--color-surface, #ffffff)); stroke-width: 6px; stroke-linejoin: round; }
@media (min-width: 600px) { .geomap__label { font-size: 22px; } }
/* Zoom and pan (geomap.js): the script sets the viewBox, --map-k =
   1/zoom (dots and labels scale about their stop and keep their screen
   size) and geomap--z<level>; a label shows from its data-z level up. */
.geomap__frame { position: relative; }
.geomap--live { touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.geomap__dot, .geomap__label, .geomap__hit, .geomap__pin { transform: scale(var(--map-k, 1)); transform-origin: 0 0; }
/* Marker pins (Options.Markers): accent fill, a page-background ring;
   --k<Kind> modifiers are caller-chosen categories, --sel the selected pin. */
.geomap__pin { fill: var(--ui-accent, var(--color-primary, #0b5cad)); stroke: var(--ui-bg, var(--color-surface, #ffffff)); stroke-width: 2; vector-effect: non-scaling-stroke; cursor: pointer; }
.geomap__pin--k2 { fill: #2b8a3e; } .geomap__pin--k3 { fill: #862e9c; } .geomap__pin--k4 { fill: #c2410c; } .geomap__pin--k5 { fill: #0c8599; } .geomap__pin--k6 { fill: #5c4033; }
.geomap__pin--sel { fill: #d9480f; stroke: var(--ui-fg, var(--color-text, #1d2430)); stroke-width: 3; }
a:focus-visible > .geomap__pin, .geomap__pin:focus-visible { stroke: var(--ui-fg, var(--color-text, #1d2430)); stroke-width: 4; outline: none; }
.geomap__hit { fill: transparent; pointer-events: all; outline: none; }
.geomap__hit:focus-visible { stroke: var(--ui-accent, var(--color-primary, #0b5cad)); stroke-width: 3px; vector-effect: non-scaling-stroke; }
/* a focused or hovered station shows its name at every zoom level */
.geomap__hit:is(:focus, :hover) + .geomap__label { display: inline; }
.geomap__label:not([data-z="1"]) { display: none; }
.geomap--z2 [data-z="2"], .geomap--z4 :is([data-z="2"], [data-z="4"]),
.geomap--z8 :is([data-z="2"], [data-z="4"], [data-z="8"]), .geomap--z16 .geomap__label { display: inline; }
/* Border source credit (CC BY): one small muted line. */
.geomap__credit { margin: 4px 0 0; font-size: .7rem; line-height: 1.3; color: var(--ui-muted, var(--color-text-muted, #5b6575)); white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.geomap__credit a { color: inherit; text-decoration: underline; }
/* Map icon: the explicit secondary link to a map, a 44 px hit area. */
.geomap-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--ui-accent, var(--color-primary, #0b5cad)); vertical-align: middle; }
.geomap-icon:hover, .geomap-icon:focus-visible { color: var(--ui-fg, var(--color-text, #1d2430)); }
/* Phones: a readable minimum map height. */
@media (max-width: 480px) { .geomap__svg { min-height: 200px; } }
/* Multi-line maps (Options.Lines, geomap_lines.js): Okabe-Ito tones without
   yellow (colour-blind safe) t1..t7, --coach dashed for a through coach,
   a wide transparent hit line (44 px on touch), the tapped line --on, and
   the line panel as a bottom sheet (a corner card from 600 px). */
.geomap__line .geomap__leg { stroke-width: 3.5; stroke-opacity: 0.9; }
.geomap__leg--t1, .geomap__swatch--t1 { stroke: #0072b2; --tone: #0072b2; }
.geomap__leg--t2, .geomap__swatch--t2 { stroke: #d55e00; --tone: #d55e00; }
.geomap__leg--t3, .geomap__swatch--t3 { stroke: #009e73; --tone: #009e73; }
.geomap__leg--t4, .geomap__swatch--t4 { stroke: #cc79a7; --tone: #cc79a7; }
.geomap__leg--t5, .geomap__swatch--t5 { stroke: #e69f00; --tone: #e69f00; }
.geomap__leg--t6, .geomap__swatch--t6 { stroke: #56b4e9; --tone: #56b4e9; }
.geomap__leg--t7, .geomap__swatch--t7 { stroke: var(--ui-fg, var(--color-text, #1d2430)); --tone: var(--ui-fg, var(--color-text, #1d2430)); }
.geomap__leg--coach { stroke-dasharray: 7 5; stroke-linecap: butt; }
.geomap__line--on .geomap__leg { stroke-width: 6; stroke-opacity: 1; }
.geomap__hitline { fill: none; stroke: transparent; stroke-width: 20px; pointer-events: stroke; cursor: pointer; outline: none; }
@media (pointer: coarse) { .geomap__hitline { stroke-width: 44px; } }
.geomap__hitline:focus-visible, a:focus-visible > .geomap__hitline { stroke: var(--ui-accent, var(--color-primary, #0b5cad)); stroke-opacity: 0.25; }
/* bottom: above the shared phone tab bar where one is shown (--ui-bottom-inset, pkg/ui/appbar). */
.geomap__panel { position: fixed; left: 0; right: 0; bottom: var(--ui-bottom-inset, 0px); z-index: 30; max-height: 55vh; overflow: auto; padding: 14px 16px 18px; background: var(--ui-bg, var(--color-surface, #ffffff)); color: var(--ui-fg, var(--color-text, #1d2430)); border-top: 1px solid var(--ui-line, var(--color-border, #d9dee6)); box-shadow: 0 -4px 18px rgba(0, 0, 0, .18); border-radius: 12px 12px 0 0; }
@media (min-width: 600px) { .geomap__panel { left: auto; right: 16px; bottom: calc(16px + var(--ui-bottom-inset, 0px)); width: 380px; border: 1px solid var(--ui-line, var(--color-border, #d9dee6)); border-radius: 12px; } }
.geomap__panel[hidden] { display: none; }
.geomap__close { float: right; min-width: 44px; min-height: 44px; margin: -10px -10px 0 8px; border: 0; background: none; color: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.geomap__ptitle { margin: 0 0 8px; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.geomap__swatch { flex: none; display: inline-block; width: 22px; height: 0; border-top: 4px solid var(--tone, var(--ui-accent, var(--color-primary, #0b5cad))); }
.geomap__swatch--coach { border-top-style: dashed; }
.geomap__prows { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 10px; }
.geomap__prows dt { color: var(--ui-muted, var(--color-text-muted, #5b6575)); }
.geomap__prows dd { margin: 0; }
.geomap__plink { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ui-accent, var(--color-primary, #0b5cad)); }
.geomap__plist { list-style: none; margin: 0; padding: 0; }
.geomap__pick { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 4px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }

/* Map-beside-list split (pkg/ui/geomap, docs/architecture/GEOMAP.md): on
   phones the optional page head (.ui-split__head: title, actions, stats)
   comes first, then the map (.ui-split--hero) or no map (.ui-split--aside),
   then the list. From 960 px the head and the list share the left column
   (~a third) and the map takes the rest from the page top. The map is static
   while the list scrolls (owner 2026-10-23): its sticky top is the position
   it starts at (--ui-top app bar + --ui-page-top frame top), so it never
   slides before sticking, and it ends 12 px above the window bottom, inside
   the shared .ui-page column (pkg/ui/appbar). Nothing in flow may sit above
   the split on a map page (a frame flash floats instead, journeylog.css).
   CSS only, no script layout. */
.ui-split--aside > .ui-split__map { display: none; }
@media (min-width: 960px) {
  .ui-split {
    display: grid; grid-template-columns: minmax(380px, 34%) minmax(0, 1fr); grid-template-rows: auto 1fr;
    gap: 0 24px; align-items: start;
  }
  .ui-split__head { grid-column: 1; grid-row: 1; min-width: 0; }
  .ui-split__main { grid-column: 1; grid-row: 2; min-width: 0; }
  .ui-split > .ui-split__map {
    display: block; grid-column: 2; grid-row: 1 / span 2; position: sticky; top: calc(var(--ui-top, 0px) + var(--ui-page-top, 0px));
    height: calc(100dvh - var(--ui-top, 0px) - var(--ui-page-top, 0px) - 12px); min-height: 420px;
  }
}
.rw-maps__cards { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.rw-maps__card { display: grid; gap: .35rem; min-height: 44px; padding: 16px; border: 1px solid var(--ui-line, #d9dee6); border-radius: var(--ui-radius, 10px);
  background: var(--ui-surface, #fff); color: var(--ui-ink, #1a2330); text-decoration: none; }
.rw-maps__card span { color: var(--ui-muted, #5b6575); }
.rw-maps__card .rw-maps__open { color: var(--ui-brand, #0b4f8a); font-weight: 700; }
.rw-maps__crumb { margin: 0 0 .25rem; }
.rw-maps__crumb a { display: inline-flex; align-items: center; min-height: 44px; }
.rw-maps__show { width: 100%; max-width: 32rem; margin: 0 0 12px; grid-template-columns: repeat(3, auto); }
.rw-maps__show .pa-route-mode__label { min-height: 44px; padding: 4px 6px; flex-wrap: wrap; column-gap: 5px; text-decoration: none; }
.rw-maps__show .pa-route-mode__label[aria-current] { background: var(--pa-surface); color: var(--pa-navy); box-shadow: var(--pa-shadow-2); }
.rw-maps__count { color: var(--pa-muted); font-variant-numeric: tabular-nums; }
.rw-maps__map { max-width: 900px; position: relative; }
.rw-maps__note { padding: 12px 16px; border-radius: var(--ui-radius, 10px); background: var(--ui-soft, #f3f5f8); }
.rw-maps__key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--ui-muted, #5b6575); font-size: .9em; }
.rw-maps__swatch { display: inline-block; width: 28px; border-top: 4px solid var(--ui-brand, #0b4f8a); }
.rw-maps__swatch--coach { border-top-style: dashed; }