/* 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-maps__cards { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.rw-maps__cards > li { display: grid; }
.rw-maps__card { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto 1fr auto; align-items: center; gap: .6rem 14px; 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;
  box-shadow: var(--ui-shadow-1, 0 1px 2px rgb(16 24 40 / 6%)); transition: border-color .15s, box-shadow .15s, transform .15s; }
.rw-maps__card:hover { border-color: var(--ui-brand, #0b4f8a); box-shadow: 0 6px 18px rgb(16 24 40 / 10%); }
.rw-maps__card:focus-visible { outline: 3px solid var(--ui-brand, #0b4f8a); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .rw-maps__card:hover { transform: translateY(-2px); } }
.rw-maps__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--ui-soft, #f3f5f8); color: var(--ui-brand, #0b4f8a); }
.rw-maps__icon svg { display: block; width: 36px; height: 36px; }
.rw-maps__title { font-size: 1.05rem; line-height: 1.3; }
.rw-maps__title:first-child, .rw-maps__intro, .rw-maps__open { grid-column: 1 / -1; }
.rw-maps__intro { align-self: start; color: var(--ui-muted, #5b6575); line-height: 1.45; }
.rw-maps__open { color: var(--ui-brand, #0b4f8a); font-weight: 700; }
/* The typed ask input (front page q/From/To/Via) and the single station
   field (StationField, station_field.tmpl) other pages reuse. The single
   field keeps this look inside host forms whose generic "input" rules would
   otherwise restyle it; its suggest list is the ask-inputs.css .pa-suggest. */
.pa-search__input,
.pa-stations--single .pa-search__input {
  appearance: none;
  width: 100%;
  height: var(--pa-control-lg);
  min-width: 0;
  border: 1px solid var(--pa-line-strong);
  border-radius: var(--pa-radius-pill);
  padding: 0 20px;
  color: var(--pa-ink);
  background: var(--pa-surface);
  font: inherit;
  font-size: var(--pa-fs-lg);
  line-height: var(--pa-control-lg);
  outline: none;
  box-shadow: var(--pa-shadow-3);
}

.pa-search__input:focus {
  border-color: var(--pa-red);
  box-shadow: 0 0 0 4px rgba(239, 23, 37, 0.13), 0 18px 48px var(--pa-tint-strong);
}

.pa-search__input::placeholder {
  color: var(--pa-muted-2);
}

.pa-stations--single {
  gap: 4px;
}

.pa-station__title {
  color: var(--pa-muted);
  font-size: var(--pa-fs-base);
}

.pa-stations--single .pa-search__input.pa-station__input {
  padding-left: 20px;
  padding-right: 48px;
}

.pa-stations--single .pa-search__input.pa-station__input:not(:focus) {
  box-shadow: none;
}

/* Typed station inputs (From/To/Via). From and To are always shown, Via waits
   for a picked To (is-to); without JS or when degraded only the q row remains,
   because the To input has no name and needs the stations script. The
   departure row and its drum popover live in ask-inputs-when.css. */
.pa-stations {
  position: relative;
  display: grid;
  gap: 8px;
}

.pa-station__field {
  position: relative;
  min-width: 0;
}

.pa-station__label {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pa-muted);
  font-size: var(--pa-fs-md);
  font-weight: var(--pa-fw-bold);
  letter-spacing: 0.02em;
  pointer-events: none;
}

.pa-search__input.pa-station__input {
  padding-left: 76px;
  padding-right: 48px;
}

.pa-search__input.pa-search__input--position {
  padding-right: 48px;
}

/* Clear button inside the field: a 44 px tap target at the right edge, shown
   only while the field holds text (To/Via carry placeholder=" " for that). */
.pa-station__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.pa-station__clear,
.pa-position {
  position: absolute;
  top: 50%;
  right: 4px;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--pa-radius-pill);
  background: transparent;
  color: var(--pa-muted);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.pa-station__clear:hover,
.pa-position:hover {
  color: var(--pa-navy);
}

.pa-station__clear:focus-visible,
.pa-position:focus-visible {
  outline: var(--pa-focus);
  outline-offset: -4px;
}

.pa-station__input:placeholder-shown ~ .pa-station__clear,
.pa-stations.is-degraded .pa-station__clear {
  display: none;
}

/* The "Moja poloha" toggle's own look lives in ask-position.css. */

.pa-station--via,
.pa-vias {
  display: none;
}

@media (scripting: none) {
  .pa-station--to {
    display: none;
  }
}

.pa-stations.is-to .pa-station--via,
.pa-stations.is-to .pa-vias {
  display: block;
}

.pa-stations .pa-vias:empty,
.pa-stations.is-via-full .pa-station--via,
.pa-stations.is-degraded .pa-station--to,
.pa-stations.is-degraded .pa-station--via,
.pa-stations.is-degraded .pa-vias,
.pa-stations.is-degraded .pa-station__label {
  display: none;
}

.pa-stations.is-degraded .pa-search__input.pa-station__input {
  padding-left: 20px;
  padding-right: 20px;
}

.pa-station--to .pa-search__input,
.pa-station--via .pa-search__input {
  height: var(--pa-control-lg);
  line-height: var(--pa-control-lg);
  box-shadow: none;
}

.pa-station__spacer {
  display: block;
}

/* Direction swap in the action column under the search glass: a thin outline
   and a muted icon, so the red search pill stays the one strong action. */
.pa-station__swap {
  width: 100%;
  align-self: stretch;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius-pill);
  background: transparent;
  color: var(--pa-muted);
  cursor: pointer;
}

.pa-station__swap:hover {
  color: var(--pa-navy);
}

.pa-station__swap:focus-visible {
  outline: var(--pa-focus);
}

.pa-vias {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 6px;
}

.pa-via {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 4px 0 12px;
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-surface);
  font-size: var(--pa-fs-base);
}

.pa-via__remove {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--pa-radius-pill);
  background: var(--pa-soft);
  color: var(--pa-ink);
  font: inherit;
  font-size: var(--pa-fs-lg);
  line-height: 1;
  cursor: pointer;
}

.pa-suggest {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: min(360px, 60vh);
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius);
  background: var(--pa-surface);
  box-shadow: var(--pa-shadow);
}

.pa-suggest[hidden] {
  display: none;
}

.pa-suggest__row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: var(--pa-radius-sm);
  cursor: pointer;
}

.pa-suggest__row:hover,
.pa-suggest__row.is-active {
  background: var(--pa-soft);
}

.pa-suggest__name {
  min-width: 0;
  font-weight: var(--pa-fw-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pa-suggest__cc {
  flex: none;
  padding: 1px var(--pa-sp-3);
  border-radius: var(--pa-radius-xs);
  font-size: var(--pa-fs-xs);
  letter-spacing: var(--pa-caps-tracking);
}

.pa-suggest__meta {
  min-width: 0;
  color: var(--pa-muted);
  font-size: var(--pa-fs-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .pa-station__label { left: 16px; }
  .pa-search__input.pa-station__input { padding-left: 74px; }
  .pa-station--to .pa-search__input,
  .pa-station--via .pa-search__input { height: 46px; line-height: 46px; }
}

/* One on/off option (heritage toggle): the pill fills the row. */
.pa-route-mode--single {
  grid-template-columns: minmax(0, 1fr);
}

/* Selected-option check: every option label reserves a fixed slot before its
   text (empty when off), so the text never moves; :checked draws the tick.
   Decorative (a pseudo-element); state stays in the native input. */
.pa-route-mode__label::before {
  content: "";
  flex: none;
  box-sizing: border-box;
  width: 0.38em;
  height: 0.72em;
  margin: -0.16em 0.6em 0 0.2em;
  border: solid transparent;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}
.pa-route-mode__input:checked + .pa-route-mode__label::before {
  border-color: currentColor;
}

/* Full-screen map page (maps_full.go): the map fills the viewport behind a
   top search pill, a right control column, the collapsed source credit and
   a bottom text switcher. Surfaces are custom properties, dark with the
   system setting. maps-full.js sets --rw-fm-sheet (the visible line/station
   panel height) and the rw-fm--search / --moving / --half / --full classes. */
html:has(> .rw-body--fullmap) { height: 100%; overflow: hidden; overscroll-behavior: none; scrollbar-gutter: auto; /* no page scroll: no frame.css gutter */ }
.rw-body--fullmap {
  --rw-fm-surface: rgb(255 255 255 / 92%);
  --rw-fm-solid: #ffffff;
  --rw-fm-soft: #eef1f5;
  --rw-fm-ink: #1a2330;
  --rw-fm-muted: #5b6575;
  --rw-fm-line: rgb(16 24 40 / 12%);
  --rw-fm-shadow: 0 2px 10px rgb(16 24 40 / 18%);
  --rw-fm-accent: var(--ui-brand, #0b4f8a);
  --rw-fm-accent-soft: rgb(11 79 138 / 12%);
  --rw-fm-top: calc(8px + env(safe-area-inset-top, 0px));
  --rw-fm-left: calc(8px + env(safe-area-inset-left, 0px));
  --rw-fm-right: calc(12px + env(safe-area-inset-right, 0px));
  --rw-fm-switch: 56px;
  --rw-fm-dock: calc(var(--rw-fm-switch) + env(safe-area-inset-bottom, 0px));
  --rw-fm-under: var(--rw-fm-dock); /* what sits under the sheet: the switcher at peek */
  --rw-fm-sheet: 0px;
  --ui-bottom-inset: var(--rw-fm-under); /* geomap panel bottom */
  height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; color: var(--rw-fm-ink);
}
@media (prefers-color-scheme: dark) {
  .rw-body--fullmap {
    color-scheme: dark;
    --rw-fm-surface: rgb(30 34 42 / 92%);
    --rw-fm-solid: #1c2028;
    --rw-fm-soft: #2a303b;
    --rw-fm-ink: #e8ecf2;
    --rw-fm-muted: #a5afbd;
    --rw-fm-line: rgb(255 255 255 / 14%);
    --rw-fm-shadow: 0 2px 12px rgb(0 0 0 / 55%);
    --rw-fm-accent: #8cbcff;
    --rw-fm-accent-soft: rgb(140 188 255 / 18%);
  }
}
.rw-body--fullmap.rw-fm--half, .rw-body--fullmap.rw-fm--full { --rw-fm-under: 0px; }
.rw-fullmap { position: fixed; inset: 0; }
.rw-fm__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rw-fm__map .geomap__canvas { position: fixed; inset: 0; width: auto; height: auto; max-height: none; aspect-ratio: auto !important; margin: 0; border: 0; border-radius: 0; touch-action: none; }

/* top overlay: one 48 px pill */
.rw-fm__top { position: fixed; z-index: 40; top: var(--rw-fm-top); left: var(--rw-fm-left); right: var(--rw-fm-left); max-width: 560px; margin: 0 auto; transition: opacity .15s; }
.rw-fm__pill { display: flex; align-items: center; gap: 4px; height: 48px; padding: 0 4px 0 8px; border-radius: 24px; background: var(--rw-fm-surface); color: var(--rw-fm-ink);
  box-shadow: var(--rw-fm-shadow); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-sizing: border-box; }
.rw-fm__back { flex: none; display: none; place-items: center; width: 40px; height: 44px; padding: 0; border: 0; background: none; color: inherit; border-radius: 22px; cursor: pointer; }
.rw-fm__pill .pa-stations { flex: 1; min-width: 0; margin: 0; }
.rw-fm__pill .pa-station { margin: 0; padding: 0; border: 0; background: none; }
.rw-fm__pill .pa-station__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rw-fm__pill .pa-station__field { display: flex; align-items: center; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.rw-fm__pill .pa-station__input { flex: 1; min-width: 0; height: 44px; min-height: 44px; margin: 0; padding: 0 4px 0 12px; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font-size: 16px; outline: none; }
.rw-fm__pill .pa-station__input::placeholder { color: var(--rw-fm-muted); opacity: 1; }
.rw-fm__pill .pa-station__input::-webkit-search-cancel-button { display: none; }
.rw-fm__pill:focus-within { box-shadow: var(--rw-fm-shadow), 0 0 0 2px var(--rw-fm-accent); }
.rw-fm__note { margin: 8px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--rw-fm-surface); color: var(--rw-fm-ink); box-shadow: var(--rw-fm-shadow); font-size: 14px; }
.rw-fm__note[hidden] { display: none; }

/* search view: focus turns the top overlay into a full-screen panel */
.rw-fm--search .rw-fm__top { inset: 0; max-width: none; margin: 0; padding: var(--rw-fm-top) var(--rw-fm-left) calc(8px + env(safe-area-inset-bottom, 0px)); overflow: auto; background: var(--rw-fm-solid); opacity: 1; z-index: 60; }
.rw-fm--search .rw-fm__pill, .rw-fm--search .rw-fm__recent, .rw-fm--search .rw-fm__top .pa-suggest { max-width: 560px; margin-left: auto; margin-right: auto; }
.rw-fm--search .rw-fm__pill { background: var(--rw-fm-soft); box-shadow: none; }
.rw-fm--search .rw-fm__back { display: grid; }
/* suggestions: a full-width list under the pill, not a card beside the back arrow */
.rw-fm--search .rw-fm__pill { position: relative; -webkit-backdrop-filter: none; backdrop-filter: none; }
.rw-fm--search .rw-fm__pill .pa-stations, .rw-fm--search .rw-fm__pill .pa-station, .rw-fm--search .rw-fm__pill .pa-station__field { position: static; }
.rw-fm--search .rw-fm__top .pa-suggest { top: calc(100% + 8px); left: 0; right: 0; max-height: calc(100dvh - 120px); padding: 0; border: 0; border-radius: 0; background: var(--rw-fm-solid); box-shadow: none; }
.rw-fm__recent h2 { margin: 16px 8px 4px; font-size: 13px; font-weight: 600; color: var(--rw-fm-muted); }
.rw-fm__recent ul { list-style: none; margin: 0; padding: 0; }
.rw-fm__recent button { display: flex; width: 100%; min-height: 48px; align-items: center; gap: 8px; padding: 0 8px; border: 0; border-bottom: 1px solid var(--rw-fm-line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rw-fm__recent small { margin-left: auto; color: var(--rw-fm-muted); }

/* right control column, 12 px above the sheet or the switcher */
.rw-fm__ctl, .rw-fm__map .geomap__zoom { position: fixed; z-index: 35; right: var(--rw-fm-right); left: auto; top: auto; display: flex; flex-direction: column; gap: 8px; transition: opacity .15s; }
.rw-fm__ctl { bottom: calc(var(--rw-fm-under) + var(--rw-fm-sheet) + 12px); }
.rw-fm__map .geomap__zoom { bottom: calc(var(--rw-fm-under) + var(--rw-fm-sheet) + 12px + 2 * 44px + 2 * 8px); }
.rw-fm__btn, .rw-fm__map .geomap__zbtn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 22px; background: var(--rw-fm-surface); color: var(--rw-fm-ink);
  box-shadow: var(--rw-fm-shadow); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font: 700 18px/1 Georgia, serif; cursor: pointer; }
.rw-fm__map .geomap__zbtn { font: 400 22px/1 system-ui, sans-serif; }
@media (pointer: coarse) { .rw-fm__map .geomap__zbtn[data-zoom="in"], .rw-fm__map .geomap__zbtn[data-zoom="out"] { display: none; } }
.rw-fm--full .rw-fm__ctl, .rw-fm--full .rw-fm__map .geomap__zoom { display: none; }

/* source credit: a collapsed © at bottom-left, above the switcher */
.rw-fm__credit { position: fixed; z-index: 34; left: var(--rw-fm-left); bottom: calc(var(--rw-fm-under) + var(--rw-fm-sheet) + 4px); max-width: min(520px, calc(100vw - 88px)); transition: opacity .15s; }
.rw-fm__credit summary { display: grid; place-items: center; width: 44px; height: 44px; list-style: none; cursor: pointer; }
.rw-fm__credit summary::-webkit-details-marker { display: none; }
.rw-fm__credit summary span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 12px; background: var(--rw-fm-surface); color: var(--rw-fm-muted); box-shadow: var(--rw-fm-shadow); font-size: 13px; }
.rw-fm__credit[open] summary span { color: var(--rw-fm-accent); }
.rw-fm__creditbox { position: absolute; left: 4px; bottom: 48px; width: min(520px, calc(100vw - 88px)); max-height: 40vh; overflow: auto; padding: 10px 12px; border-radius: 12px;
  background: var(--rw-fm-solid); color: var(--rw-fm-ink); box-shadow: var(--rw-fm-shadow); font-size: 12px; line-height: 1.45; box-sizing: border-box; }
.rw-fm__creditbox .geomap__credit { margin: 0; font-size: inherit; }
.rw-fm__creditbox a, .rw-fm__link { color: var(--rw-fm-accent); }
.rw-fm__link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* bottom map switcher: text segments, real links */
.rw-fm__switch { position: fixed; z-index: 38; left: 0; /* over the peek sheet's lower, translated part */ right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 6px; height: var(--rw-fm-switch);
  padding: 0 max(8px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(8px, env(safe-area-inset-left, 0px)); overflow-x: auto; scrollbar-width: none;
  background: var(--rw-fm-solid); border-top: 1px solid var(--rw-fm-line); box-sizing: content-box; }
.rw-fm__switch a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 22px; color: var(--rw-fm-ink); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
.rw-fm__switch a[aria-current="page"] { background: var(--rw-fm-accent-soft); color: var(--rw-fm-accent); }
.rw-fm__switch a:focus-visible, .rw-fm__btn:focus-visible, .rw-fm__credit summary:focus-visible { outline: 3px solid var(--rw-fm-accent); outline-offset: 2px; }
.rw-fm--half .rw-fm__switch, .rw-fm--full .rw-fm__switch { display: none; }

/* the platform line/station panel and the legend sheet on the page surfaces */
.rw-body--fullmap .geomap__panel { z-index: 37; --ui-bg: var(--rw-fm-solid); --ui-fg: var(--rw-fm-ink); --ui-line: var(--rw-fm-line); padding-bottom: 18px; }
.rw-body--fullmap .geomap__panel--cover { z-index: 45; /* a phone train run covers the whole screen, the top pill (40) too */ padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.rw-fm__legend { width: 100%; max-width: 560px; max-height: 70vh; margin: auto auto 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: 16px 16px 0 0;
  background: var(--rw-fm-solid); color: var(--rw-fm-ink); box-shadow: var(--rw-fm-shadow); box-sizing: border-box; }
.rw-fm__legend::backdrop { background: rgb(0 0 0 / 25%); }
.rw-fm__legend h2 { margin: 4px 48px 8px 0; font-size: 18px; }
.rw-fm__legend p { margin: 0; line-height: 1.5; }
.rw-fm__legend form { float: right; margin: -6px -6px 0 0; }
.rw-fm__close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 22px; background: var(--rw-fm-soft); color: inherit; font-size: 22px; cursor: pointer; }

/* hide-on-pan: overlays fade while the user moves the map */
.rw-fm--moving .rw-fm__top, .rw-fm--moving .rw-fm__ctl, .rw-fm--moving .rw-fm__map .geomap__zoom, .rw-fm--moving .rw-fm__credit { opacity: .3; }
@media (prefers-reduced-motion: reduce) { .rw-fm__top, .rw-fm__ctl, .rw-fm__map .geomap__zoom, .rw-fm__credit { transition: none; } }

/* desktop: full-bleed map, pill top-left, the switcher a floating bar */
@media (min-width: 900px) {
  .rw-body--fullmap { --rw-fm-dock: 0px; }
  .rw-fm__top { left: calc(16px + env(safe-area-inset-left, 0px)); right: auto; width: 400px; margin: 0; }
  .rw-fm__switch { left: calc(16px + env(safe-area-inset-left, 0px)); right: auto; bottom: 16px; height: 52px; padding: 0 4px; border: 0; border-radius: 26px; background: var(--rw-fm-surface); box-shadow: var(--rw-fm-shadow); }
  .rw-fm__credit { bottom: 76px; }
  .rw-fm__ctl { bottom: calc(var(--rw-fm-sheet) + 16px); }
  .rw-fm__map .geomap__zoom { bottom: calc(var(--rw-fm-sheet) + 16px + 2 * 44px + 2 * 8px); }
}

/* site app bar (maps_full.go): from 960 px, the bar's own section width, it
   tops the page and the map frame fills the rest; layout containment makes
   the frame the containing block of every fixed overlay above, so they keep
   their offsets inside it. Below 960 px the map keeps the whole screen. */
.rw-body--fullmap > .ui-appbar { display: none; }
@media (min-width: 960px) {
  .rw-body--fullmap { display: flex; flex-direction: column; }
  .rw-body--fullmap > .ui-appbar { display: flex; flex: none; }
  .rw-body--fullmap > .rw-fullmap { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; overflow: hidden; contain: layout; }
  .rw-body--fullmap .geomap__panel { max-height: calc(100% - 112px); }
}
.rw-fm--speed .geomap__swatch--tn1, .rw-fm--speed .geomap__band--n1 { stroke: var(--ui-danger, #b3261e); --tone: var(--ui-danger, #b3261e); }
.rw-fm--speed .geomap__swatch--tn2, .rw-fm--speed .geomap__band--n2 { stroke: var(--ui-info, #1d4f91); --tone: var(--ui-info, #1d4f91); }
.rw-fm--speed .geomap__swatch--tn3, .rw-fm--speed .geomap__band--n3 { stroke: #e5b000; --tone: #e5b000; }
.rw-fm__key { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.rw-fm__key li { display: flex; align-items: center; gap: 10px; }
.rw-fm__key .geomap__swatch { width: 28px; border-top-width: 5px; }
.rw-fm__keycredit { margin-top: 12px !important; color: var(--rw-fm-muted, #5b6575); font-size: 13px; }