/* 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; a static map
   without the script): 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; visibility: visible; }
/* Live maps (geomap.js): a label keeps the server's 32-unit geometry and
   --map-l scales it to 12 CSS px at every zoom and width (halo 2.25 px);
   the label pass hides one that overlaps a label placed before it. */
.geomap--live .geomap__label { font-size: 32px; transform: scale(var(--map-l, var(--map-k, 1))); }
.geomap__label--off { visibility: hidden; }
.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 station and line sheet (below). */
.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; }
/* Options.Network without the bands script: tone 0, one thin translucent
   colour (non-scaling stroke). */
.geomap__line .geomap__leg--t0 { stroke: var(--ui-accent, var(--color-primary, #0b5cad)); stroke-width: 2.5; stroke-opacity: 0.35; }
/* Network bands (geomap_bands.js): a calm light base, soft borders, the
   base net hidden under touching strands in tones n1..n12 (luminance
   0.17-0.24: at least 3:1 on a light and on a dark map background); the
   script sets stroke-width and the gap dasharray in user units. A marked
   route lies over a casing in the map background, the rest dimmed. */
.geomap__svg--net { background: color-mix(in srgb, var(--ui-bg, var(--color-surface, #ffffff)) 90%, #d8d2c2); }
.geomap__svg--net .geomap__border { stroke-opacity: 0.28; }
.geomap__net--banded { visibility: hidden; }
.geomap__band { fill: none; stroke-linejoin: round; stroke-linecap: butt; }
.geomap__band--case { stroke: var(--ui-bg, var(--color-surface, #ffffff)); }
.geomap__bandsel[hidden] { display: none; }
.geomap__bands .geomap__band--gap { stroke-opacity: 0.45; }
.geomap__svg--dim .geomap__bands { opacity: 0.3; }
.geomap__band--n1, .geomap__swatch--tn1 { stroke: #d7263d; --tone: #d7263d; }
.geomap__band--n2, .geomap__swatch--tn2 { stroke: #1f77d0; --tone: #1f77d0; }
.geomap__band--n3, .geomap__swatch--tn3 { stroke: #2a9d3f; --tone: #2a9d3f; }
.geomap__band--n4, .geomap__swatch--tn4 { stroke: #9d53bc; --tone: #9d53bc; }
.geomap__band--n5, .geomap__swatch--tn5 { stroke: #c57300; --tone: #c57300; }
.geomap__band--n6, .geomap__swatch--tn6 { stroke: #009696; --tone: #009696; }
.geomap__band--n7, .geomap__swatch--tn7 { stroke: #d6336c; --tone: #d6336c; }
.geomap__band--n8, .geomap__swatch--tn8 { stroke: #5c6bc0; --tone: #5c6bc0; }
.geomap__band--n9, .geomap__swatch--tn9 { stroke: #63941d; --tone: #63941d; }
.geomap__band--n10, .geomap__swatch--tn10 { stroke: #b5651d; --tone: #b5651d; }
.geomap__band--n11, .geomap__swatch--tn11 { stroke: #0091c0; --tone: #0091c0; }
.geomap__band--n12, .geomap__swatch--tn12 { stroke: #a18400; --tone: #a18400; }
.geomap__line--on .geomap__leg--t0 { stroke: #d9480f; stroke-width: 4; stroke-opacity: 1; }
.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; }
/* Station and line sheet (geomap_panel.js): a nonmodal bottom sheet above
   the shared phone tab bar (--ui-bottom-inset, pkg/ui/appbar), no scrim.
   The script sets its height (full) and moves it by transform only
   (peek/half/full, drag); padding-bottom carries the safe area the script
   adds to peek. Tablets: capped at 640 px and centred. Pointer:fine or
   >= 900 px: a left side panel, no grabber. */
.geomap__panel { position: fixed; left: 0; right: 0; bottom: var(--ui-bottom-inset, 0px); z-index: 30; display: flex; flex-direction: column; box-sizing: border-box; max-width: 640px; margin: 0 auto; padding: 0 16px calc(12px + env(safe-area-inset-bottom, 0px)); 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: 14px 14px 0 0; will-change: transform; overscroll-behavior: contain; }
.geomap__panel--anim { transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
@media (prefers-reduced-motion: reduce) { .geomap__panel--anim { transition: none; } }
.geomap__panel[hidden] { display: none; }
/* Phones: a train run at full covers the whole screen (no map sliver), above
   the shared app and tab bars (z-index 40, pkg/ui/appbar). */
.geomap__panel.geomap__panel--cover { bottom: 0; z-index: 45; max-width: none; padding-top: env(safe-area-inset-top, 0px); border-top: 0; border-radius: 0; box-shadow: none; }
.geomap__panel--cover .geomap__close { top: calc(8px + env(safe-area-inset-top, 0px)); }
.geomap__grab { flex: none; align-self: center; width: 72px; height: 28px; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; }
.geomap__grab::before { content: ""; display: block; width: 36px; height: 4px; margin: 12px auto; border-radius: 2px; background: var(--ui-muted, var(--color-text-muted, #5b6575)); opacity: .55; }
/* Close: the platform round 44 px icon button (portalask .pa-run__close). */
.geomap__close { position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ui-line, var(--color-border, #d9dee6)); border-radius: 50%; background: var(--ui-bg, var(--color-surface, #ffffff)); color: inherit; font: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.geomap__close:hover { border-color: var(--ui-accent, var(--color-primary, #0b5cad)); }
.geomap__close:focus { outline: none; }
.geomap__close:focus-visible { outline: 3px solid var(--ui-accent, var(--color-primary, #0b5cad)); outline-offset: 2px; }
.geomap__phead { flex: none; padding-right: 52px; touch-action: none; -webkit-user-select: none; user-select: none; }
.geomap__pbody { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
/* Inline train run (geomap_panel_routes.js): a sticky tab bar, one pill per
   direction (at most two per row, wrapping, at every width), above the run panes;
   loading and error notes are muted. */
.geomap__ptabs { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 4px 0 8px; background: var(--ui-bg, var(--color-surface, #ffffff)); }
.geomap__ptab { flex: 1 1 calc(50% - 4px); min-width: 0; min-height: 44px; padding: 6px 12px; border: 1px solid var(--ui-line, var(--color-border, #d9dee6)); border-radius: 22px; background: none; color: inherit; font: inherit; font-size: .9rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; cursor: pointer; }
.geomap__ptab[aria-selected="true"] { background: var(--ui-accent, var(--color-primary, #0b5cad)); border-color: transparent; color: #ffffff; }
.geomap__ptab:focus-visible, .geomap__prun:focus-visible { outline: 3px solid var(--ui-accent, var(--color-primary, #0b5cad)); outline-offset: -3px; }
.geomap__pnote { margin: 8px 0; color: var(--ui-muted, var(--color-text-muted, #5b6575)); }
.geomap__ptitle { margin: 0; font-size: 1.1rem; line-height: 1.3; display: flex; align-items: center; gap: 8px; }
.geomap__psub { margin: 2px 0 10px; font-size: .9rem; color: var(--ui-muted, var(--color-text-muted, #5b6575)); }
.geomap__ptext { display: flex; flex-direction: column; min-width: 0; }
.geomap__pends { font-size: .9rem; color: var(--ui-muted, var(--color-text-muted, #5b6575)); }
.geomap__pnum { display: flex; align-items: center; gap: 6px; min-width: 0; }
.geomap__pnum > b { flex: none; }
.geomap__pname { display: inline-block; vertical-align: middle; flex: 0 1 auto; min-width: 0; max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 8px; border: 1px solid var(--ui-line, var(--color-border, #d9dee6)); border-radius: 999px; background: rgba(11, 92, 173, .08); font-size: .8rem; font-weight: 600; line-height: 1.4; }
.geomap__psub .geomap__pname { max-width: 60%; }
.geomap__pmore, .geomap__pback { min-height: 44px; padding: 0; border: 0; background: none; color: var(--ui-accent, var(--color-primary, #0b5cad)); font: inherit; font-weight: 600; cursor: pointer; }
@media (min-width: 900px), (pointer: fine) {
  .geomap__panel { left: 16px; right: auto; bottom: calc(16px + var(--ui-bottom-inset, 0px)); width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - 112px); margin: 0; padding: 12px 16px; border: 1px solid var(--ui-line, var(--color-border, #d9dee6)); border-radius: 12px; box-shadow: 0 4px 18px rgba(0, 0, 0, .18); will-change: auto; }
  .geomap__grab { display: none; }
}
@media (prefers-color-scheme: dark) {
  .geomap__panel { background: var(--ui-sheet-dark, #1c2027); color: #e6e8eb; border-color: #3a404a; box-shadow: 0 -4px 18px rgba(0, 0, 0, .5); }
  .geomap__grab::before { background: #a7afba; }
  .geomap__psub, .geomap__pends, .geomap__prows dt, .geomap__pnote { color: #a7afba; }
  .geomap__ptabs { background: var(--ui-sheet-dark, #1c2027); }
  .geomap__ptab, .geomap__close { border-color: #3a404a; }
  .geomap__close { background: var(--ui-sheet-dark, #1c2027); }
  .geomap__pname { border-color: #3a404a; background: rgba(138, 184, 255, .12); }
  .geomap__plink, .geomap__pmore, .geomap__pback { color: #8ab8ff; }
}
.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; }
.geomap__pgroup { margin: 10px 0 2px; font-weight: 600; }
/* Gesture layer (geomap.js begin/slide/end; keep this block last and
   separate): during a drag, pinch or wheel burst the svg is one composited
   layer moved by an inline transform and clip-path (the clip holds the
   visible box in place); overflow shows the map beyond the old view and a
   wide shadow in the map background fills what lies past its edge. */
.geomap--moving { will-change: transform; transform-origin: 0 0; overflow: visible; box-shadow: 0 0 0 100vmax var(--ui-bg, var(--color-surface, #ffffff)); }
/* Canvas network maps (route_canvas, assets/geomap_net*.js): the host keeps
   the map's aspect (inline aspect-ratio), the WebGL/2D layer (__cv) and the
   station overlay (__ov) fill it and follow a gesture by transform; round
   zoom buttons top right; __sr is the route button list for keyboard and
   screen readers, shown while focused. */
.geomap__canvas { position: relative; width: 100%; max-height: 70vh; overflow: hidden; touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; background: var(--ui-bg, var(--color-surface, #ffffff)); border: 1px solid var(--ui-line, var(--color-border, #d9dee6)); border-radius: 10px; }
.geomap__canvas--static { touch-action: auto; cursor: auto; }
.geomap__canvas > .geomap__svg { border: 0; max-height: none; }
.geomap__cv, .geomap__ov { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; pointer-events: none; }
.geomap__zoom { position: absolute; right: 8px; top: 8px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.geomap__zbtn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--ui-line, var(--color-border, #d9dee6)); background: var(--ui-bg, var(--color-surface, #ffffff)); color: var(--ui-fg, var(--color-text, #1d2430)); font: 20px/1 system-ui, sans-serif; cursor: pointer; }
.geomap__canvas--static .geomap__zoom { display: none; }
.geomap__sr { position: absolute; left: 8px; bottom: 8px; z-index: 2; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; list-style: none; }
.geomap__sr:focus-within { width: auto; height: auto; max-width: calc(100% - 64px); max-height: 40%; overflow: auto; clip-path: none; padding: 4px; background: var(--ui-bg, var(--color-surface, #ffffff)); border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }

/* 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-museums__filter { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: end; margin: 0 0 1rem; }
.rw-museums__filter label { display: flex; flex-direction: column; gap: .25rem; min-width: 10rem; }
.rw-museums__filter select, .rw-museums__filter input { min-height: 44px; }
.rw-museums__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.rw-museums__list { list-style: none; margin: 0; padding: 0; }
.rw-museums__list li { display: flex; flex-direction: column; gap: .15rem; padding: .6rem 0; border-bottom: 1px solid var(--ui-line, #d9dee6); }
.rw-museums__list li[aria-current] { background: var(--ui-bg-muted, #f3f5f8); }
.rw-museums__list span { color: var(--ui-muted, #5b6575); font-size: .9em; }
.rw-museums__detail { border: 1px solid var(--ui-line, #d9dee6); border-radius: 10px; padding: 1rem; margin: 0 0 1rem; }
.rw-museums__hours { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; }
.rw-museums__credit { font-size: .85em; color: var(--ui-muted, #5b6575); }