:root { color-scheme: light; --ui-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
    html, body, #map { height: 100%; margin: 0; }
    html { background: #dfeaf0; }
    body {
      font-family: var(--ui-font);
      -webkit-tap-highlight-color: transparent;
      overscroll-behavior: none;
    }

    .install-banner {
      position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 1200;
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      padding: 10px 12px; border: 1px solid rgba(20, 75, 102, 0.18); border-radius: 14px;
      background: rgba(255, 255, 255, 0.94); box-shadow: 0 10px 30px rgba(11, 32, 46, 0.14);
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      transform: translateY(12px); opacity: 0; pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .install-banner[hidden], .install-help[hidden] { display: none; }
    .install-banner.is-visible {
      opacity: 1; transform: translateY(0); pointer-events: auto;
    }
    .install-banner-copy {
      display: grid; gap: 2px; min-width: 0; color: #17313a;
    }
    .install-banner-copy strong { font-size: 13px; }
    .install-banner-copy span { color: #486068; font-size: 11px; line-height: 1.3; }
    .install-banner-copy .install-help { max-width: 240px; color: #17313a; }
    .install-banner-actions { display: inline-flex; align-items: center; gap: 8px; }
    .install-button, .install-dismiss, .route-map-pick, .route-own-location, .route-via-remove, .route-now-button, .route-add-via, .route-more-button, .panel-collapse-button, .locate-button, .follow-location-button {
      min-height: 44px;
    }
    .install-button, .install-dismiss {
      border: 1px solid #88a7ba; border-radius: 10px; background: #fff; color: #006eb6; font: 800 12px/1 system-ui, sans-serif; cursor: pointer;
      padding: 0 12px;
    }
    .install-button {
      border-color: #0072bc; background: #0072bc; color: #fff;
    }
    .install-button:focus-visible, .install-dismiss:focus-visible { outline: 3px solid #83c8eb; outline-offset: 2px; }
    @media (prefers-reduced-motion: reduce) {
      .install-banner { transition: none; }
    }

    @media (min-width: 768px) {
      .install-banner {
        left: 50%; right: auto; width: min(420px, calc(100vw - 32px));
        transform: translate(-50%, 12px);
      }
      .install-banner.is-visible {
        transform: translate(-50%, 0);
      }
    }

    @media (pointer: coarse) {
      button, input, select, summary, .route-option, .route-leg, .transport-toggle, .settings-button, .clear-map-button, .route-collapse-button, .panel-collapse-button {
        min-height: 44px;
      }
      .settings-button, .route-collapse-button { width: 44px; }
      .route-field input { min-height: 44px; }
    }
    #panel {
      display: none; position: fixed; z-index: 1010; top: 16px; left: 358px;
      width: min(326px, calc(100vw - 48px)); max-height: calc(100dvh - 48px);
      overflow: auto; box-sizing: border-box; background: #fff; padding: 14px 16px;
      border-radius: 8px; box-shadow: 0 2px 12px #0004; font: 14px system-ui, sans-serif;
    }
    #panel.is-open { display: block; }
    #route-panel {
      position: fixed; z-index: 1000; top: 16px; left: 16px; width: min(350px, calc(100vw - 32px));
      max-height: calc(100dvh - 32px); overflow: auto; box-sizing: border-box; padding: 12px 14px;
      border: 1px solid #d5e1e6; border-radius: 15px; background: rgba(255,255,255,.97); box-shadow: 0 8px 28px #17313a24, 0 2px 6px #17313a12; font: 14px system-ui, sans-serif;
    }
    #route-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 7px; border-bottom: 1px solid #e6ecef; }
    #route-panel.is-collapsed { width: min(326px, calc(100vw - 48px)); max-height: none; overflow: hidden; }
    #route-panel.is-collapsed #route-search { display: none; }
    #route-panel.is-collapsed #route-panel-header { padding-bottom: 0; border-bottom: 0; }
    #route-panel-header img { display: block; width: 48px; height: 48px; flex: 0 0 48px; object-fit: contain; }
    .app-brand { display:flex; align-items:center; gap:8px; min-width:0; color:#17313a; text-decoration:none; }
    .app-brand-copy { display:block; min-width:0; }
    .app-brand-name { display:block; font:850 16px/1 system-ui,sans-serif; white-space:nowrap; }
    .app-brand-tagline { display:block; margin-top:3px; color:#66757a; font:700 7.5px/1 system-ui,sans-serif; letter-spacing:.035em; text-transform:uppercase; white-space:nowrap; }
    .route-header-actions { display: inline-flex; align-items: center; gap: 5px; }
    .route-edit-main { display:none; border:0; background:transparent; color:#006eb6; font:750 11px system-ui,sans-serif; padding:4px 5px; cursor:pointer; white-space:nowrap; }
    #route-panel.has-route-details .route-edit-main { display:inline-block; }
    .settings-button, .clear-map-button, .route-collapse-button {
      display: inline-grid; place-items: center; min-width: 34px; width: 34px; height: 34px; min-height: 34px; padding: 0; box-sizing: border-box; border: 1px solid #8aa6b5;
      border-radius: 5px; background: #fff; color: #003c64; font: 800 14px/1 system-ui, sans-serif; cursor: pointer;
    }
    .clear-map-button svg { width: 16px; height: 16px; fill: currentColor; }
    .route-collapse-button { min-width: 32px; width: 32px; height: 32px; min-height: 32px; border: 0; background: transparent; color: #526775; }
    .route-collapse-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
    .route-collapse-button:hover, .route-collapse-button:focus-visible { background: #edf7fc; color: #006eb6; outline: none; }
    .route-collapse-button .route-collapse-open { display: none; }
    .route-collapse-button.is-collapsed .route-collapse-close { display: none; }
    .route-collapse-button.is-collapsed .route-collapse-open { display: block; }
    .settings-button:hover, .clear-map-button:hover, .route-collapse-button:hover { background: #edf7fc; }
    .clear-map-button:active { color: #a12e35; }
    .clear-map-button:disabled { color: #9aa8ad; border-color: #d5dfe3; background: #f7f9fa; cursor: default; }
    .clear-map-button:disabled:hover { background: #f7f9fa; }
    .route-search { padding-top: 6px; }
    .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    .route-time-toolbar { display: grid; grid-template-columns: 40px minmax(0, 1.2fr) minmax(0, .8fr) 40px; gap: 6px; align-items: center; margin-top: 8px; }
    .route-time-mode-toggle { display: grid; place-items: center; width: 40px; height: 40px; min-height: 40px; padding: 0; border: 1px solid #cbd9df; border-radius: 10px; background: #f7fafb; color: #31515f; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
    .route-time-mode-toggle:hover, .route-time-mode-toggle:focus-visible, .route-time-mode-toggle[aria-pressed="true"] { border-color: #0072bc; background: #eaf6fc; color: #006eb6; outline: none; }
    .route-time-mode-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .route-time-mode-toggle:not(.arrive-by) .route-icon-arrival, .route-time-mode-toggle.arrive-by .route-icon-departure { display: none; }
    .route-time-input, .route-time-input input { display: block; width: 100%; min-width: 0; box-sizing: border-box; margin: 0; }
    .route-date-input { position: relative; min-width: 0; }
    .route-time-input input { height: 40px; padding: 4px 8px; border: 1px solid #cbd9df; border-radius: 10px; background: #fff; color: #17313a; font: 12px/1.2 ui-monospace, "Cascadia Code", Consolas, monospace; font-variant-numeric: tabular-nums; }
    .route-time-input input[aria-invalid="true"] { border-color: #c64b51; }
    .route-date-input .route-time-input input { padding-right: 31px; }
    .route-date-picker { position: absolute; top: 0; right: 2px; display: grid; place-items: center; width: 32px; height: 40px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #526775; cursor: pointer; }
    .route-date-picker svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
    .route-date-picker:hover, .route-date-picker:focus-visible { background: #edf7fc; color: #006eb6; outline: none; }
    #route-date { position: absolute; top: 0; right: 4px; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
    .route-time-icon-button { display: grid; place-items: center; width: 40px; height: 40px; min-height: 40px; padding: 0; border: 1px solid #cbd9df; border-radius: 10px; background: #f7fafb; color: #31515f; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
    .route-time-icon-button:hover, .route-time-icon-button:focus-visible { border-color: #0072bc; background: #eaf6fc; color: #006eb6; outline: none; }
    .route-time-icon-button svg { width: 17px; height: 17px; fill: currentColor; }
    .route-search-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
    .route-search-title { display: block; color: #17313a; font-size: 15px; letter-spacing: -.01em; }
    #aikakartta-clock.aikakartta-clock { display:block; margin:0; color:#708087; font-size:10px; font-weight:650; font-variant-numeric:tabular-nums; line-height:1.2; white-space:nowrap; }
    .route-field { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 6px; row-gap: 6px; align-items: start; margin: 6px 0; }

    .route-rerun { border:1px solid #8eb7c8; border-radius:8px; background:#eef8fc; color:#006eb6; padding:6px 12px; font:800 12px system-ui,sans-serif; cursor:pointer; }
    .route-map-time::before { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff); }
    .route-field-marker {
      position: relative; z-index: 1; grid-column: 1; grid-row: 1; display: grid; place-items: center;
      width: 40px; height: 40px; box-sizing: border-box; margin: 0; border: 0; border-radius: 50%;
      background: radial-gradient(circle, #fff 0 8px, #008450 8px 10px, transparent 10.5px);
      color: #007444; font-size: 10px; font-weight: 900;
    }
    .route-field-marker::after {
      content: ''; position: absolute; z-index: 0; top: calc(50% + 10px); left: 50%;
      width: 2px; height: calc(100% - 14px); transform: translateX(-50%);
      background: linear-gradient(#9eafb5, #b9c5ca);
    }
    .route-field.destination .route-field-marker {
      background: radial-gradient(circle, #fff 0 8px, #e83e74 8px 10px, transparent 10.5px);
      color: #d72c63;
    }
    .route-field.destination .route-field-marker::after { display: none; }
    .route-field.via .route-field-marker {
      background: radial-gradient(circle, #fff 0 8px, #e77817 8px 10px, transparent 10.5px);
      color: #a94d00;
    }
    .route-field input {
      grid-column: 2; grid-row: 1;
      width: 100%; min-width: 0; box-sizing: border-box; min-height: 40px; padding: 8px 11px; border: 1px solid #cbd9df; border-radius: 10px;
      color: #17313a; background: #fff; font: 14px system-ui, sans-serif; transition: border-color .15s ease, box-shadow .15s ease;
    }
    #route-from, #route-to { grid-column: 2 / 4; }
    #route-from { padding-right: 48px; }
    .route-origin .locate-actions { grid-column: 2 / 4; grid-row: 1; justify-self: end; align-self: center; z-index: 2; margin-right: 4px; pointer-events: none; }
    .route-origin .locate-actions button { pointer-events: auto; }
    .route-origin .locate-button { display: grid; place-items: center; width: 30px; height: 30px; min-height: 30px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #006eb6; }
    .route-origin .follow-location-button { box-sizing: border-box; height: 30px; min-height: 30px; padding: 0 7px; font-size: 11px; }
    .route-origin .locate-button:hover { background: #edf7fc; }
    .route-origin .locate-button svg { display: block; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .route-origin:has(#route-follow-location:not([hidden])) #route-from { padding-right: 96px; }
    .route-origin .place-suggestions, .route-field.destination .place-suggestions { grid-column: 2 / 4; }
    .route-field input:focus, .route-time-input input:focus { outline: none; border-color: #1684bf; box-shadow: 0 0 0 3px #1684bf24; }
    .route-map-pick, .route-own-location, .route-via-remove, .route-now-button, .route-add-via, .route-more-button {
      border: 1px solid #aebcc3; border-radius: 5px; background: #fff; color: #006eb6; cursor: pointer;
    }
    .route-map-pick { grid-column: 3; grid-row: 1; width: 30px; height: 34px; padding: 0; font-size: 17px; }
    .route-own-location { grid-column:3; grid-row:1; height:34px; padding:0 8px; font-size:11px; font-weight:750; white-space:nowrap; }
    .route-field.is-map-pick .route-map-pick { border-color: #e77817; background: #fff4e8; color: #a94d00; }
    .route-via-actions { grid-column: 3; grid-row: 1; display: grid; grid-template-columns: 30px 24px; gap: 4px; }
    .route-via-actions .route-map-pick { grid-column: auto; grid-row: auto; }
    .route-via-remove { width: 24px; height: 34px; padding: 0; color: #6a4b4b; }
    .route-via-item { grid-template-columns: 40px minmax(0, 1fr) 58px; column-gap: 6px; }
    .route-add-via { margin: 2px 0 4px 29px; padding: 5px 8px; font-size: 12px; }
    .route-add-via:disabled { opacity: .55; cursor: default; }
    .place-suggestions {
      grid-column: 2; grid-row: 2; max-height: 230px; min-width: 0; overflow: auto;
      margin: -2px 0 2px; padding: 4px; list-style: none; border: 1px solid #b9c8cf; border-radius: 0 0 6px 6px;
      background: #fff; box-shadow: 0 4px 10px #0002;
    }
    .place-suggestions[hidden] { display: none; }
    .place-suggestion { display: block; width: 100%; box-sizing: border-box; padding: 7px 8px; border: 0; border-radius: 4px; background: #fff; color: #17313a; text-align: left; cursor: pointer; }
    .place-suggestion:hover, .place-suggestion:focus { background: #e9f5fb; outline: none; }
    .place-suggestion strong, .place-suggestion span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .place-suggestion span { margin-top: 2px; color: #66757a; font-size: 11px; }
    .route-search-status { min-height: 16px; margin: 7px 0 0; color: #5c6b71; font-size: 11px; }
    .route-search-status:empty { display: none; }
    .route-options-panel { margin: 4px 0 1px 29px; border-top: 1px solid #dbe2e5; padding-top: 4px; }
    .route-options-panel summary { color: #31515f; font-size: 12px; font-weight: 750; cursor: pointer; }
    .route-options-content { display: grid; gap: 8px; padding: 8px 0 2px; }
    .section.route-settings-section { margin-top: 4px; padding-top: 0; border-top: 0; }
    .route-settings-section .route-options-content { gap: 12px; padding-top: 10px; }
    .route-settings-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .route-settings-actions .route-add-via,
    .route-settings-actions .route-now-button {
      min-height: 44px; margin: 0; padding: 0 12px; border-color: #a8bbc4; border-radius: 8px;
      font-size: 12px; font-weight: 650;
    }
    .route-settings-actions .route-add-via:hover,
    .route-settings-actions .route-now-button:hover { border-color: #0072bc; background: #edf7fc; }
    .route-settings-actions button:focus-visible { outline: 3px solid #1684bf55; outline-offset: 2px; }
    .walking-speed-label { display: grid; gap: 3px; margin: 0; color: #526168; font-size: 11px; }
    .route-now-button { justify-self: start; height: 31px; min-height: 31px; padding: 0 8px; font-size: 11px; }
    .route-mode-options { margin: 0; padding: 0; border: 0; }
    .route-mode-options legend { margin-bottom: 4px; color: #526168; font-size: 11px; }
    .route-mode-grid { display: flex; flex-wrap: wrap; gap: 4px 9px; }
    .route-mode-grid label { display: inline-flex; align-items: center; gap: 3px; margin: 0; font-size: 11px; }
    .route-mode-grid input { margin: 0; }
    .walking-speed-heading { display: flex; justify-content: space-between; gap: 8px; }
    .walking-speed-label input { width: 100%; }
    .route-walk-only-toggle { display: flex !important; align-items: flex-start; gap: 6px; margin: 0 !important; color: #40545d; font-size: 11px; line-height: 1.25; }
    .route-walk-only-toggle input { margin: 1px 0 0; }
    #map.is-route-picking { cursor: crosshair; }
    .map-route-pick-menu strong{display:block;margin-bottom:5px}.map-route-pick-menu button{margin:3px 2px 0 0;padding:6px 8px;border:1px solid #8aa6b5;border-radius:5px;background:#fff;color:#006eb6;font:inherit;cursor:pointer}
    .route-results { display: grid; gap: 6px; margin-top: 9px; }
    .route-results[hidden] { display: none; }
    .route-more-button { position:static; width:100%; padding:6px 8px; font-size:11px; font-weight:750; cursor:pointer; }
    .route-more-button:disabled { color:#7d8b91; background:#f4f7f8; cursor:wait; }
    .route-option {
      display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 7px; align-items: center; width: 100%;
      box-sizing: border-box; padding: 8px; border: 1px solid #c3d0d6; border-left: 4px solid #0072bc;
      border-radius: 6px; background: #fff; color: #17313a; text-align: left; cursor: pointer;
    }
    .route-option:hover, .route-option.is-selected { background: #edf7fc; border-color: #0072bc; }
    .route-option-time { display: grid; gap: 1px; font-weight: 850; white-space: nowrap; }
    .route-option-time small { color: #5f6e74; font-size: 10px; font-weight: 650; }
    .route-option-legs { overflow: hidden; color: #334b55; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
    .route-option-duration { color: #526168; font-size: 12px; font-weight: 750; white-space: nowrap; }
    .route-details { margin-top: 8px; padding: 8px; border: 1px solid #b9cbd4; border-radius: 7px; background: #f8fbfc; }
    .route-details[hidden] { display: none; }
    .route-details-header { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; padding-bottom: 6px; border-bottom: 1px solid #d8e2e6; }
    .route-details-header strong { color: #17313a; font-size: 13px; }
    .route-edit-search,.route-details-toggle{border:0;background:transparent;color:#006eb6;font:700 11px system-ui,sans-serif;cursor:pointer;padding:2px 0}.route-edit-search{display:none}
    .route-details-header span { color: #526168; font-size: 11px; white-space: nowrap; }
    .route-details-summary { margin: 5px 0 3px; color: #526168; font-size: 10px; }
    .route-leg-list { display: grid; gap: 2px; margin-top: 4px; }
    .route-leg { --leg-color: #59676d; display: grid; grid-template-columns: 39px minmax(0, 1fr) auto; gap: 6px; align-items: center; min-height: 36px; padding: 4px 0; border-top: 1px solid #e1e7ea; }
    .route-leg-time { color: #334b55; font-size: 10px; font-weight: 750; line-height: 1.2; white-space: nowrap; }
    .route-leg-main { min-width: 0; }
    .route-leg-title, .route-leg-places { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .route-leg-title { color: var(--leg-color); font-size: 12px; font-weight: 850; }
    .route-leg-places { margin-top: 2px; color: #5d6c72; font-size: 10px; }
    .route-leg-duration { color: #526168; font-size: 10px; font-weight: 700; white-space: nowrap; }
    .route-map-time.leaflet-tooltip { padding:3px 6px; border:2px solid var(--route-time-color,#0072bc); border-radius:9px; background:#fff; color:#17313a; box-shadow:0 2px 7px #0003; font:800 11px/1.15 system-ui,sans-serif; white-space:nowrap; }
    .route-map-time .route-map-time-name { display:block; max-width:130px; overflow:hidden; text-overflow:ellipsis; font-size:9px; font-weight:650; color:#526168; }
    .route-map-time.is-endpoint { font-size:12px; }
    .route-map-time.is-keypoint { padding:4px 7px; font-size:11px; box-shadow:0 2px 8px #0004; }
    .route-map-time.is-secondary { opacity:.94; font-size:10px; }
    #panel, #route-panel, .line-options, .stop-detail-card, .place-suggestions { scrollbar-width: none; }
    #panel::-webkit-scrollbar, #route-panel::-webkit-scrollbar, .line-options::-webkit-scrollbar,
    .stop-detail-card::-webkit-scrollbar, .place-suggestions::-webkit-scrollbar { display: none; width: 0; height: 0; }
    #panel-header {
      display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 9px;
      border-bottom: 1px solid #ddd; cursor: grab; user-select: none;
    }
    #panel-header.is-dragging { cursor: grabbing; }
    @media (pointer: coarse) {
      #panel-header { cursor: default; touch-action: auto; }
    }
    #panel-title { display: inline-flex; align-items: center; min-width: 0; }
    #panel-title img { display: block; width: 114px; height: auto; }
    .panel-header-actions { display: inline-flex; align-items: center; gap: 6px; }
    .locate-actions { display: inline-flex; align-items: center; gap: 4px; }
    .locate-button, .follow-location-button {
      display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid #0072bc; border-radius: 5px; padding: 5px 7px;
      background: #fff; color: #006eb6; font: 700 12px/1.1 system-ui, sans-serif; cursor: pointer; white-space: nowrap;
    }
    .locate-button:hover, .follow-location-button:hover { background: #edf7fc; }
    .locate-button.is-locating { opacity: .65; cursor: wait; }
    .follow-location-button.is-active { background: #0072bc; color: #fff; box-shadow: 0 0 0 2px #0072bc33; }
    .follow-location-button.is-active::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #fff5; }
    .follow-location-button.is-paused { border-color: #c47b00; color: #9a5f00; background: #fffaf0; }
    .follow-location-button[hidden] { display: none !important; }
    .panel-collapse-button {
      display: none; place-items: center; width: 29px; height: 29px; padding: 0; border: 1px solid #8aa6b5;
      border-radius: 5px; background: #fff; color: #003c64; font: 800 19px/1 system-ui, sans-serif; cursor: pointer;
    }
    #panel label { display: block; margin: 8px 0; }
    #panel button, #panel select, #panel input { font: inherit; }
    .note, #status { font-size: 12px; color: #555; max-width: 285px; margin: 9px 0; line-height: 1.35; }
    .section { border-top: 1px solid #ddd; margin-top: 12px; padding-top: 10px; }
    .section-title { display: block; margin-bottom: 3px; }
    .keys select { box-sizing: border-box; width: 100%; margin: 4px 0; padding: 7px; }
    .busy { opacity: .55; pointer-events: none; }
    .mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
    .mode-toggle {
      --mode-color: #0072bc;
      display: flex !important; align-items: center; gap: 7px; margin: 0 !important;
      min-height: 39px; box-sizing: border-box; padding: 5px 7px; cursor: pointer;
      border: 1px solid #cfd6da; border-radius: 5px; background: #fff; user-select: none;
    }
    .mode-toggle:has(input:checked) { border-color: var(--mode-color); background: color-mix(in srgb, var(--mode-color) 10%, white); }
    .mode-toggle input { margin: 0; accent-color: var(--mode-color); }
    .mode-icon { display: inline-grid; place-items: center; width: 25px; height: 25px; flex: 0 0 25px; }
    .mode-icon img, .live-icon { width: 25px; height: 25px; display: block; }
    .mode-name { font-weight: 600; font-size: 13px; }
    .transport-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 9px; }
    .transport-column { min-width: 0; }
    .transport-column-title { display: block; margin-bottom: 7px; font-size: 15px; }
    .transport-stack { display: grid; gap: 5px; }
    .transport-toggle {
      display: flex !important; align-items: center; justify-content: space-between; gap: 6px; margin: 0 !important;
      min-height: 29px; cursor: pointer;
    }
    .transport-toggle-copy { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
    .transport-toggle input { margin: 0; }
    .transport-toggle .mode-icon, .transport-toggle .live-icon { width: 27px; height: 27px; flex: 0 0 27px; }
    .transport-toggle .mode-name { font-size: 12px; }
    .transport-detail-toggle { font-size: 12px; margin-top: 3px !important; }
    .detail-icon { border-radius: 4px; background: #49636d; color: #fff; font-weight: 800; font-size: 15px; line-height: 27px; text-align: center; }
    .mode-line-controls { display: grid; gap: 8px; margin-top: 11px; }
    .mode-line-picker { overflow: hidden; border: 1px solid #cbd7dd; border-radius: 8px; background: #fff; box-shadow: 0 1px 3px #003c6414; }
    .line-module-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; background: #edf7fc; color: #003c64; }
    .line-module-heading strong { font-size: 14px; }
    .line-count-badge { min-width: 20px; padding: 2px 6px; border-radius: 10px; background: #0072bc; color: #fff; font-size: 11px; font-weight: 800; text-align: center; }
    .selected-lines { display: grid; gap: 6px; padding: 7px; border-bottom: 1px solid #dce4e8; }
    .selected-line-card { --line-color: #0072bc; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 7px; align-items: center; min-height: 37px; padding: 5px 6px; border: 1px solid color-mix(in srgb, var(--line-color) 35%, #d7e0e4); border-left: 5px solid var(--line-color); border-radius: 6px; background: color-mix(in srgb, var(--line-color) 7%, white); }
    .selected-line-badge { min-width: 31px; box-sizing: border-box; padding: 4px 6px; border-radius: 11px; background: var(--line-color); color: #fff; font-weight: 850; line-height: 1; text-align: center; }
    .selected-line-copy { min-width: 0; }
    .selected-line-title, .selected-line-subtitle { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .selected-line-title { color: #17313a; font-size: 12px; font-weight: 750; }
    .selected-line-subtitle { color: #66757a; font-size: 10px; }
    .selected-line-remove { width: 25px; height: 25px; margin: 0 !important; padding: 0 !important; border: 1px solid #b8c6cc; border-radius: 50%; background: #fff; color: #42565f; font-weight: 800; cursor: pointer; }
    .selected-vehicle-follow { min-height:25px; margin:0 !important; padding:4px 6px !important; border:1px solid #8aa6b5; border-radius:5px; background:#fff; color:#006eb6; font:800 10px/1 system-ui,sans-serif; cursor:pointer; white-space:nowrap; }
    .selected-vehicle-follow:hover, .selected-vehicle-follow:focus-visible { border-color:#0072bc; background:#edf7fc; outline:none; }
    .selected-vehicle-follow.is-active { border-color:#0072bc; background:#0072bc; color:#fff; }
    .line-search-panel { padding: 7px; }
    .mode-line-picker input[type="search"] { box-sizing: border-box; width: 100%; margin: 0; padding: 7px 8px; border: 1px solid #aebcc3; border-radius: 5px; }
    .line-actions { display: flex; justify-content: flex-end; padding: 0 8px 8px; }
    .line-actions button { margin: 0; padding: 4px 7px; border: 1px solid #aebcc3; border-radius: 4px; background: #fff; color: #334b55; cursor: pointer; }
    .line-options { display: grid; gap: 3px; max-height: 178px; overflow: auto; margin-top: 6px; padding: 3px; border: 1px solid #cfd6da; border-radius: 4px; background: #fff; }
    .line-options[hidden], .selected-lines[hidden], .line-actions:empty { display: none; }
    .line-option { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px; align-items: center; min-height: 31px; padding: 4px; border-radius: 4px; }
    .line-option:has(input:checked) { background: color-mix(in srgb, var(--mode-color) 10%, white); }
    .line-option input[type="checkbox"] { margin: 0; accent-color: var(--mode-color); }
    .line-option-label { min-width: 0; margin: 0 !important; cursor: pointer; font-weight: inherit !important; }
    .line-option-title, .line-option-subtitle { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .line-option-title { font-weight: 700; }
    .line-option-subtitle { color: #666; font-size: 12px; }
    .selected-line-card .line-color { width: 26px; height: 28px; margin: 0; }
    .map-selection-dock {
      position: fixed; z-index: 1190; width: min(326px, calc(100vw - 32px)); max-height: min(55dvh, 360px); overflow: auto;
      box-sizing: border-box; border: 1px solid #b7c7ce; border-radius: 8px; background: #fffffff7; box-shadow: 0 2px 10px #0004;
    }
    .map-selection-dock[hidden] { display: none; }
    .line-search-panel-overlay {
      position: fixed; z-index: 1205; top: 16px; left: 358px; width: min(326px, calc(100vw - 32px));
      max-height: min(72dvh, 520px); overflow: auto; box-sizing: border-box; padding: 12px;
      border: 1px solid #b7c7ce; border-radius: 8px; background: #fffffff7; box-shadow: 0 2px 12px #0004;
    }
    .line-search-panel-overlay[hidden] { display: none; }
    .line-search-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 7px; border-bottom: 1px solid #d7dee1; color: #17313a; }
    .line-search-panel-header button { width: 30px; height: 30px; border: 1px solid #b7c7ce; border-radius: 6px; background: #fff; color: #42565f; font-size: 20px; cursor: pointer; }
    .line-search-trigger[aria-expanded="true"] { border-color: #0072bc; background: #eaf6fc; color: #006eb6; }
    .line-search-panel-overlay > .note { margin: 6px 0; }
    .map-selection-dock .line-module-heading { padding: 7px 9px; }
    .map-selection-dock .selected-lines { border-bottom: 0; }
    .line-search-section > .note { margin: 4px 0 7px; }
    .line-search-section .mode-line-controls { margin-top: 0; }
    .live-toggle { display: flex !important; justify-content: space-between; align-items: center; gap: 12px; }
    .live-toggle input { margin: 0; }
    .live-toggle-copy { display: inline-flex; align-items: center; gap: 7px; }
    .info-toggle { display: flex !important; justify-content: space-between; align-items: center; gap: 12px; }
    .info-toggle input { margin: 0; }
    .mode-help { color: #66757a; font-size: 10px; font-weight: 500; }
    .line-color { width: 28px; height: 30px; padding: 1px; border: 0; background: transparent; cursor: pointer; }
    .advanced-settings { border-top: 1px solid #ddd; margin-top: 12px; padding-top: 10px; }
    .advanced-settings summary { cursor: pointer; font-weight: 650; }
    .advanced-settings .keys { border-top: 0; margin-top: 8px; padding-top: 0; }
    /* Leaflet käyttää markerin ulkoelementin transformia karttasijaintiin.
       Ajoneuvon pehmeä liike tehdään JS:llä sisemmän .vehicle-marker-elementin
       päälle, jotta zoomaus/panorointi ei animoi markereita väärään paikkaan. */
    .vehicle-marker { will-change: transform; }
    @media (prefers-reduced-motion: reduce) {
      .vehicle-marker { will-change: auto; }
    }
    .vehicle-marker { position: relative; display: block; width: 40px; height: 40px; pointer-events: none; }
    .vehicle-marker .vehicle-direction {
      position: absolute; z-index: 1; inset: 4px; border: 2px solid #fff; border-radius: 50%;
      background: var(--vehicle-color); box-shadow: 0 1px 4px #0006;
    }
    .vehicle-marker .vehicle-direction::before {
      content: ''; position: absolute; z-index:3; left:50%; top:50%; width:8px; height:8px;
      background:#fff; clip-path:polygon(50% 0,100% 100%,50% 76%,0 100%);
      transform:translate(-50%,-17px) rotate(var(--heading)); transform-origin:50% 17px;
      filter:drop-shadow(0 1px 1px #0006);
    }
    .vehicle-marker .vehicle-direction::after { display:none; }
    .vehicle-marker .vehicle-line {
      position: absolute; z-index: 2; inset: 0; display: grid; place-items: center;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 5px;
      color: #fff; font-size: 11px; font-weight: 900; line-height: 1; text-shadow: 0 1px 2px #0006;
    }
    .vehicle-marker.is-selected .vehicle-direction { border-color: #ffdf00; box-shadow: 0 0 0 2px #003c64, 0 2px 5px #0008; }
    .vehicle-selected-badge {
      position: absolute; z-index: 3; top: 2px; right: 0; display: grid; place-items: center; width: 14px; height: 14px;
      border: 2px solid #fff; border-radius: 50%; background: #003c64; color: #fff; font: 800 10px/1 system-ui, sans-serif;
      box-shadow: 0 1px 3px #0006;
    }
    .vehicle-popup-title { font-size: 15px; }
    .vehicle-popup-destination { margin: 3px 0 5px; font-weight: 600; }
    .vehicle-popup-grid { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; font-size: 12px; }
    .vehicle-popup-grid dt { color: #666; }
    .vehicle-popup-grid dd { margin: 0; }
    /* During touch panning Leaflet only needs to move the map panes. Hiding the
       dense permanent timetable labels avoids repainting dozens of cards per frame;
       they return immediately when the gesture ends. */
    #map.is-panning .leaflet-tooltip.stop-departure-label,
    #map.is-panning .leaflet-tooltip.stop-summary-label,
    #map.is-panning .leaflet-tooltip.station-summary-label { visibility: hidden; }

    .stop-departure-label {
      --stop-bubble-outline: #637a85;
      width: max-content; min-width: 108px; max-width: 158px; box-sizing: border-box; border: 1px solid var(--stop-bubble-outline); border-radius: 7px;
      background: #fff; color: #17313a; padding: 3px 4px;
      font: 700 11px/1.15 system-ui, sans-serif; box-shadow: 0 0 0 1px #fff, 0 1px 4px #0004; white-space: normal;
    }
    .stop-summary-label {
      --stop-bubble-outline: #637a85;
      width: max-content; min-width: 108px; max-width: 158px; box-sizing: border-box; border: 1px solid var(--stop-bubble-outline); border-radius: 7px;
      background: #fff; color: #17313a; padding: 3px 4px;
      font: 700 11px/1.15 system-ui, sans-serif; box-shadow: 0 0 0 1px #fff, 0 1px 4px #0004; white-space: normal;
    }
    .station-summary-label { width: max-content; max-width: min(280px, 88vw); padding: 5px 6px; }
    .station-summary-header {
      display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 5px; align-items: center;
      padding-bottom: 4px; border-bottom: 1px solid #d6dde0;
    }
    .station-summary-header .stop-mode-icon { width: 19px; height: 19px; margin: 0; }
    .station-summary-name { overflow: hidden; font-size: 12px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
    .station-summary-count { color: #617077; font-size: 9px; font-weight: 700; white-space: nowrap; }
    .station-platform-list { display: grid; gap: 2px; margin-top: 3px; width: 100%; }
    .station-platform-row {
      display: grid !important; grid-template-columns: 36px 44px minmax(56px,1fr) 52px; column-gap: 6px; align-items: center;
      min-height: 23px; margin: 0 !important; padding: 2px 3px !important; border: 0 !important;
      border-radius: 5px !important; background: transparent !important; color: #17313a !important;
      font: 700 10px/1.15 system-ui, sans-serif !important; text-align: left; cursor: default;
    }
    .station-platform-row:hover { background: #e9f5fb !important; }
    .station-platform-name { justify-self:end; padding:2px 6px; border:1px solid #d4dde1; border-radius:999px; background:#f4f7f8; color:#40545d; font-size:9px; font-weight:850; white-space:nowrap; }
    button.station-platform-name { cursor:pointer; font:inherit; line-height:inherit; }
    button.station-platform-name:hover, button.station-platform-name:focus-visible { border-color:#0072bc; background:#e8f5fb; color:#005b96; outline:none; }
    .station-platform-line { justify-self:start; padding: 2px 6px; border-radius: 999px; background: #6f287f; color: #fff; font-size: 10px; font-weight: 850; white-space: nowrap; }
    button.station-platform-line, button.departure-line { border:0; font-family:inherit; cursor:pointer; }
    button.station-platform-line-action:hover, button.station-platform-line-action:focus-visible { box-shadow:0 0 0 2px #006eb6; outline:none; }
    .station-platform-time { color: #33434a; white-space: nowrap; }
    .station-platform-time.is-realtime { color: #008450; }
    .station-platform-destination { max-width:120px; overflow: hidden; color: #263a42; font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
    .rail-track { color: #526168; font-size: 11px; font-weight: 800; white-space: nowrap; }
    .rail-detail-list li {
      grid-template-columns: max-content max-content minmax(0, 1fr) 36px; grid-template-areas: "time line destination track";
      column-gap: 6px; row-gap: 0; align-items: center;
    }
    .rail-detail-list .departure-time { grid-area: time; }
    .rail-detail-list .departure-line { grid-area: line; }
    .rail-detail-list .rail-track { grid-area: track; justify-self: start; }
    .rail-detail-list .departure-headsign {
      grid-area: destination; overflow: hidden; min-width: 0; max-width: none; padding-top: 0; white-space: nowrap; text-overflow: ellipsis;
      color: #53646b; font-size: 11px; line-height: 1.2;
    }
    .station-platform-badge {
      display: grid; place-items: center; width: 20px !important; height: 20px !important; margin: -10px 0 0 -10px !important;
      border: 2px solid #fff; border-radius: 50%; background: #762a83; color: #fff;
      font: 850 10px/1 system-ui, sans-serif; box-shadow: 0 1px 4px #0007;
    }
    .stop-mode-icon { width: 17px; height: 17px; margin-right: 4px; vertical-align: -4px; border-radius: 3px; }
    .stop-summary-content {
      display: grid; grid-template-columns: 17px minmax(52px, auto) 18px; grid-template-rows: auto auto;
      column-gap: 4px; align-items: center; width: max-content; max-width: 100%; min-width: 0;
    }
    .stop-summary-content .stop-mode-icon { grid-column: 1; grid-row: 1 / 3; width: 17px; height: 17px; margin: 0; }
    .stop-summary-name {
      grid-column: 2; grid-row: 1; overflow: hidden; color: #17313a; font-size: 11px;
      line-height: 1.15; text-overflow: ellipsis; white-space: nowrap;
    }
    .stop-summary-departure {
      grid-column: 2; grid-row: 2; overflow: hidden; color: #40545d; font-size: 10px;
      font-weight: 650; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap;
    }
    .stop-summary-open {
      grid-column: 3; grid-row: 1 / 3; display: grid !important; place-items: center; width: 18px; height: 22px; min-height: 22px !important;
      margin: 0 !important; padding: 0 !important; border: 0 !important;
      border-radius: 50% !important; background: transparent !important; color: #006eb6 !important;
      line-height: 1 !important; text-decoration: none !important;
    }
    .stop-summary-open:hover:not(:disabled) { background: #e7f3f9 !important; text-decoration: none !important; }
    .stop-summary-chevron {
      display: block; width: 6px; height: 6px; box-sizing: border-box;
      border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg);
    }
    .stop-detail-card {
      --stop-link-color: #0072bc;
      min-width: 214px; max-width: 244px; max-height: min(330px, calc(100vh - 32px)); overflow: visible;
      box-sizing: border-box; border: 2px solid var(--stop-link-color); border-radius: 8px;
      background: #fffffff9; color: #17313a; padding: 5px 6px;
      font: 600 11px/1.18 system-ui, sans-serif; box-shadow: 0 2px 9px #0005; white-space: normal;
    }
    /* Pienet pysäkkikortit ovat valkoisia puhekuplia. Kaksikerroksinen kärki
       ulottuu pysäkkipalloon asti ja tumma ulkoreuna erottaa sen kartasta. */
    .leaflet-tooltip.stop-summary-label::before,
    .leaflet-tooltip.stop-departure-label::before {
      z-index: 2; border-width: 7px; filter: none;
    }
    .leaflet-tooltip.stop-summary-label::after,
    .leaflet-tooltip.stop-departure-label::after {
      content: ''; position: absolute; z-index: 1; border: 8px solid transparent;
      pointer-events: none; filter: drop-shadow(0 1px 1px #0005);
    }
    .leaflet-tooltip-right.stop-summary-label::before,
    .leaflet-tooltip-right.stop-departure-label::before {
      margin-top: -7px; margin-left: -14px; border-right-color: #fff;
    }
    .leaflet-tooltip-right.stop-summary-label::after,
    .leaflet-tooltip-right.stop-departure-label::after {
      top: 50%; left: 0; margin-top: -8px; margin-left: -16px; border-right-color: var(--stop-bubble-outline);
    }
    .leaflet-tooltip-left.stop-summary-label::before,
    .leaflet-tooltip-left.stop-departure-label::before {
      margin-top: -7px; margin-right: -14px; border-left-color: #fff;
    }
    .leaflet-tooltip-left.stop-summary-label::after,
    .leaflet-tooltip-left.stop-departure-label::after {
      top: 50%; right: 0; margin-top: -8px; margin-right: -16px; border-left-color: var(--stop-bubble-outline);
    }
    .leaflet-tooltip-top.stop-summary-label::before,
    .leaflet-tooltip-top.stop-departure-label::before {
      margin-bottom: -14px; margin-left: -7px; border-top-color: #fff;
    }
    .leaflet-tooltip-top.stop-summary-label::after,
    .leaflet-tooltip-top.stop-departure-label::after {
      bottom: 0; left: 50%; margin-bottom: -16px; margin-left: -8px; border-top-color: var(--stop-bubble-outline);
    }
    .leaflet-tooltip-bottom.stop-summary-label::before,
    .leaflet-tooltip-bottom.stop-departure-label::before {
      margin-top: -14px; margin-left: -7px; border-bottom-color: #fff;
    }
    .leaflet-tooltip-bottom.stop-summary-label::after,
    .leaflet-tooltip-bottom.stop-departure-label::after {
      top: 0; left: 50%; margin-top: -16px; margin-left: -8px; border-bottom-color: var(--stop-bubble-outline);
    }
    .stop-detail-card.stop-summary-expanded {
      --stop-bubble-outline: #637a85;
      z-index: 10; border: 1px solid var(--stop-bubble-outline); background: #fff;
      box-shadow: 0 0 0 1px #fff, 0 2px 7px #0005;
    }
    .stop-summary-expanded .departure-popup-title {
      margin: 0 0 3px; padding-bottom: 3px; border-bottom: 1px solid #d6dde0;
    }
    .stop-summary-expanded .stop-popup-name { font-size: 12px; }
    .stop-summary-expanded .stop-popup-collapse { flex: 0 0 24px; color: #006eb6; }
    .stop-summary-expanded .stop-popup-collapse .stop-summary-chevron { transform: rotate(135deg); }
    .stop-summary-expanded.leaflet-tooltip-right::before,
    .stop-summary-expanded.leaflet-tooltip-right::after,
    .stop-summary-expanded.leaflet-tooltip-left::before,
    .stop-summary-expanded.leaflet-tooltip-left::after { top: var(--stop-pointer-y, 50%); }
    .leaflet-tooltip.is-obscured-by-expanded-stop { visibility: hidden !important; pointer-events: none !important; }
    .stop-detail-card .departure-list { min-width: 0; }
    .stop-detail-card > .departure-list {
      max-height: min(238px, calc(100vh - 150px)); overflow-y: auto; overflow-x: hidden;
      overscroll-behavior: contain; scrollbar-width: thin;
    }
    .vehicle-stop-arrival-label {
      --selected-line-color: #008450;
      display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 5px; align-items: center;
      min-width: 124px; max-width: 178px; border: 2px solid #17313a; border-radius: 8px; background: #fff; color: #17313a; padding: 3px 4px;
      font: 750 11px/1.12 system-ui, sans-serif; box-shadow: 0 0 0 1px #fff, 0 2px 5px #0005; white-space: normal;
    }
    .vehicle-stop-arrival-label::before { display: none; }
    .vehicle-stop-arrival-time {
      grid-column: 1; grid-row: 1 / 3; min-width: 36px; padding: 4px 3px; border-radius: 5px;
      background: var(--selected-line-color); color: #fff; font: 850 11px/1 system-ui, sans-serif; text-align: center; white-space: nowrap;
    }
    .vehicle-stop-arrival-time.is-realtime { box-shadow: inset 0 -2px 0 #ffffff88; }
    .vehicle-stop-arrival-copy { display: grid; grid-template-columns: auto auto 1fr; column-gap: 4px; align-items: baseline; min-width: 0; }
    .vehicle-stop-arrival-copy > b { color: #17313a; font-size: 12px; }
    .vehicle-stop-arrival-rt { color: #008450; font-size: 9px; font-weight: 900; }
    .vehicle-stop-arrival-label .vehicle-stop-name {
      grid-column: 1 / -1; overflow: hidden; color: #40545d; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap;
    }
    .selected-vehicle-stop-halo { filter: drop-shadow(0 1px 2px #0007); }
    .selected-vehicle-stop-halo.is-next-stop { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 1px 2px #0008); }
    .selected-vehicle-stop-marker { filter: drop-shadow(0 1px 2px #0008); }
    .selected-vehicle-stop-marker.is-next-stop { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 1px 3px #0009); }

    /* Ajoneuvon korostuksessa tavallinen pysäkkimassa jää taustalle. Valitun
       ajoneuvon omat seuraavat pysäkit ja niiden aikakortit säilyvät täysvärisinä. */
    #map.has-selected-vehicle-focus .general-stop-marker {
      opacity: .30;
      /* Avoid per-marker CSS filters during vehicle focus changes. */
    }
    #map.has-selected-vehicle-focus .leaflet-tooltip.stop-departure-label:not(.stop-summary-expanded),
    #map.has-selected-vehicle-focus .leaflet-tooltip.stop-summary-label:not(.stop-summary-expanded),
    #map.has-selected-vehicle-focus .leaflet-tooltip.station-summary-label:not(.stop-summary-expanded) {
      --stop-bubble-outline: #a9b3b7;
      background: #edf0f1;
      color: #637077;
      opacity: .48 !important;
      box-shadow: 0 0 0 1px #f8f9f9, 0 1px 3px #0002;
      /* Opacity-only focus state: no expensive filter animation. */
    }
    #map.has-selected-vehicle-focus .vehicle-stop-arrival-label {
      z-index: 20;
      opacity: 1 !important;
      filter: none;
    }
    .departure-popup-title { margin-bottom: 2px; }
    .stop-popup-heading { display: flex; align-items: center; gap: 6px; min-width: 0; }
    .stop-popup-heading .stop-mode-icon { width: 20px; height: 20px; margin: 0; flex: 0 0 20px; }
    .stop-popup-name { display: block; color: #17313a; font-size: 14px; line-height: 1.15; }
    .stop-popup-code { color: #5b686d; font-size: 11px; font-weight: 700; white-space: nowrap; }
    .stop-popup-close { margin-left:auto; width:24px; height:24px; min-height:24px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:#53646b; font:800 18px/1 system-ui,sans-serif; cursor:pointer; }
    .stop-popup-close:hover { background:#eef3f5; color:#17313a; }
    .stop-timetable-label { margin: 3px 0 2px; color: #526168; font-size: 11px; font-weight: 750; }
    .departure-popup-subtitle { margin: 5px 0 2px; color: #526168; font-size: 11px; font-weight: 750; }
    .departure-error { max-width: 250px; color: #9c2d2d; font-size: 12px; }
    .departure-list { list-style: none; margin: 0; padding: 0; min-width: 198px; }
    .departure-list li { display: grid; grid-template-columns: 58px 34px minmax(68px, 1fr); gap: 4px; align-items: start; min-height: 22px; padding: 1px 2px 1px 4px; border-top: 0; border-left: 3px solid transparent; font-size: 11px; }
    /* Canonical stop-detail sizing. Keep rail details independent from the compact stop card. */
    .stop-detail-card { width:auto; max-width:min(244px, calc(100vw - 34px)); }
    .stop-detail-card.rail-detail-card {
      width:min(258px, calc(100vw - 32px));
      min-width:0;
      max-width:min(258px, calc(100vw - 32px));
      overflow:visible;
    }
    .stop-detail-card .departure-list { min-width: 0; }
    .stop-detail-card .departure-line { font-size: 12px; }
    .stop-detail-card .departure-headsign { font-size: 11px; }
    .stop-detail-card .rail-detail-shell { display:flex; flex-direction:column; min-height:0; width:100%; max-width:100%; max-height:238px; overflow:hidden; }
    .stop-detail-card .rail-detail-list { flex:0 1 148px; min-height:92px; height:148px; max-height:148px; overflow-y:auto !important; overflow-x:hidden; overscroll-behavior:contain; touch-action:pan-y !important; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
    .stop-detail-card .rail-detail-footer { flex:0 0 auto; padding-top:4px; background:#fffffff9; }
    .stop-detail-card .rail-detail-footer .stop-popup-action { margin-top:0; }
    .stop-detail-card .rail-detail-list li { grid-template-columns:max-content max-content minmax(0,1fr) max-content; column-gap:6px; align-items:center; min-height:25px; padding:2px 2px 2px 4px; }
    .stop-detail-card .rail-detail-list .departure-time { font-size:10px; }
    .stop-detail-card .rail-detail-list .departure-line { padding:2px 5px; border-radius:999px; background:#6f287f; color:#fff; font-size:10px; line-height:1.1; white-space:nowrap; }
    .stop-detail-card .rail-detail-list .rail-track { padding:2px 5px; border-radius:999px; background:#eef1f2; color:#526168; font-size:9px; font-weight:800; white-space:nowrap; }
    .stop-detail-card .rail-detail-list .departure-headsign { min-width:0; padding:0; color:#263a42; font-size:10px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .departure-line { color: #003c64; font-size: 14px; font-weight: 800; line-height: 1.1; }
    button.departure-line-action { padding:1px 3px; border-radius:4px; background:#e8f5fb; color:#005b96; }
    button.departure-line-action:hover, button.departure-line-action:focus-visible { background:#cfeafa; outline:2px solid #0072bc; outline-offset:1px; }
    .departure-time { display: inline-block; color: #33434a; font-weight: 800; line-height: 1.1; white-space: nowrap; }
    .departure-time.is-realtime { color: #008450; }
    .departure-list li.is-realtime { border-left-color: #008450; background: linear-gradient(90deg, #e8f8ed 0, #fff 72%); }
    .departure-scheduled { display: block; margin-top: 2px; color: #69767b; font-size: 10px; font-weight: 600; text-decoration: line-through; }
    .departure-headsign { overflow: hidden; padding-top: 1px; color: #4d5c61; font-size: 12px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
    .realtime-badge { display: inline-block; margin: 0 0 2px 4px; padding: 0; background: transparent; color: #008450; font-size: 10px; font-weight: 800; vertical-align: middle; }
    .stop-popup-action { display: inline-flex; align-items: center; min-height: auto; margin-top: 4px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #006eb6; font: 750 11px/1.2 system-ui, sans-serif; cursor: pointer; }
    .stop-popup-action:hover:not(:disabled) { background: transparent; color: #004f85; text-decoration: underline; }
    .stop-popup-action:disabled { border: 0; color: #6b787d; cursor: wait; }
    .stop-detail-card .stop-popup-action {
      display: flex; justify-content: center; width: 100%; min-height: 28px; box-sizing: border-box;
      margin-top: 5px; border: 1px solid #a9c4d3; border-radius: 5px; background: #edf7fc;
      text-decoration: none;
    }
    .stop-detail-card .stop-popup-action:hover:not(:disabled) { background: #dff1fa; text-decoration: none; }
    .stop-summary-label .is-realtime { color: #008450; }
    .vehicle-detail-label {
      max-width: 180px; border: 1px solid #aab6bc; border-radius: 7px; background: #fffffff0; color: #17313a; padding: 2px 4px;
      font: 650 10px/1.18 system-ui, sans-serif; box-shadow: 0 1px 3px #0003; white-space: normal;
    }
    .vehicle-detail-label::before { display: none; }
    .vehicle-detail-label.vehicle-detail-label-selected {
      min-width: 196px; max-width: 236px; padding: 6px 8px; font: 600 11px/1.26 system-ui, sans-serif;
      border-color: #006eb6; box-shadow: 0 2px 7px #0004;
    }
    .vehicle-detail-label-selected .vehicle-popup-title { font-size: 13px; }
    .vehicle-detail-label-selected .vehicle-popup-destination { margin: 2px 0 5px; color: #42565f; }
    .vehicle-detail-label-selected .vehicle-popup-grid { margin: 0; font-size: 11px; }
    .stop-popup-meta { margin: 4px 0 0; color: #66757a; font-size: 10px; }
    /* Kartan päälle avautuvat kortit käyttävät yhtä tiivistä typografia-asteikkoa.
       Näin pysäkki-, asema- ja ajoneuvotiedot tuntuvat samalta käyttöliittymältä. */
    #map .leaflet-tooltip, #map .leaflet-popup-content { font-family: var(--ui-font); }
    .stop-departure-label, .stop-summary-label { font: 600 11px/1.25 var(--ui-font); }
    .stop-summary-name { font-size: 11px; font-weight: 700; }
    .stop-summary-departure { font-size: 10px; font-weight: 600; }
    .station-summary-name { font-size: 12px; font-weight: 750; }
    .station-summary-count, .station-platform-name { font-size: 9px; font-weight: 700; }
    .station-platform-row { font: 600 10px/1.2 var(--ui-font) !important; }
    .station-platform-line { font-size: 10px; font-weight: 750; }
    .station-platform-destination { font-size: 10px; font-weight: 650; }
    .stop-detail-card { font: 500 11px/1.3 var(--ui-font); }
    .stop-popup-name, .stop-summary-expanded .stop-popup-name { font-size: 13px; font-weight: 750; }
    .stop-popup-code, .stop-timetable-label, .departure-popup-subtitle { font-size: 10px; font-weight: 650; }
    .departure-list li { font-size: 11px; line-height: 1.25; }
    .departure-line, .stop-detail-card .departure-line { font-size: 12px; font-weight: 750; }
    .departure-time { font-size: 11px; font-weight: 700; }
    .departure-headsign, .stop-detail-card .departure-headsign { font-size: 11px; font-weight: 500; }
    .vehicle-detail-label { font: 500 11px/1.3 var(--ui-font); }
    .vehicle-detail-label.vehicle-detail-label-selected { font: 500 11px/1.3 var(--ui-font); }
    .vehicle-detail-label-selected .vehicle-popup-title { font-size: 13px; font-weight: 750; }
    .vehicle-detail-label-selected .vehicle-popup-destination { font-size: 11px; font-weight: 500; }
    .vehicle-detail-label-selected .vehicle-popup-grid { font-size: 10px; line-height: 1.3; }
    .vehicle-popup-grid dt { font-weight: 500; }
    .vehicle-popup-grid dd { font-weight: 650; }
    .vehicle-stop-arrival-label { font: 600 11px/1.2 var(--ui-font); }
    .vehicle-stop-arrival-time { font: 750 11px/1 var(--ui-font); }
    .vehicle-stop-arrival-copy > b { font-size: 11px; font-weight: 750; }
    .vehicle-stop-arrival-label .vehicle-stop-name { font-size: 10px; font-weight: 600; }
    .zone-label-marker { background: transparent; border: 0; pointer-events: none; }
    .zone-label {
      /* Leaflet's iconAnchor centers the 24 px icon; do not offset it twice. */
      display: grid; place-items: center; box-sizing: border-box;
      width: 24px; height: 24px; margin: 0; pointer-events: none; user-select: none;
      border: 2px solid #fff; border-radius: 50%; background: #0072bc; color: #fff;
      font: 850 12px/1 system-ui, sans-serif; box-shadow: 0 1px 4px #0005;
    }
    .map-filter-dock { position: fixed; z-index: 1200; top: 16px; left: 352px; display: flex; align-items: center; gap: 7px; padding: 0; border: 0; background: transparent; pointer-events: none; }
    .map-filter-dock > .map-filter-trigger { pointer-events: auto; }
    .map-filter-group { position: relative; pointer-events: auto; }
    .map-filter-trigger { display: inline-flex; align-items: center; justify-content: center; width: 42px; min-width: 42px; height: 42px; padding: 0; border: 1px solid #d5e1e6; border-radius: 12px; background: rgba(255,255,255,.97); color: #31515f; box-shadow: 0 3px 12px #17313a20; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
    .map-filter-trigger .quick-symbol { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 0; background: transparent; }
    .map-filter-trigger .quick-symbol svg { width: 21px; height: 21px; display: block; fill: currentColor; }
    .map-location-trigger .quick-symbol svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .line-search-trigger .quick-symbol svg, .map-layers-trigger .quick-symbol svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .map-location-trigger.is-locating { opacity: .65; cursor: wait; }
    .leaflet-control-zoom { border: 1px solid #9db3bd !important; border-radius: 8px !important; overflow: hidden; box-shadow: 0 1px 5px #0004 !important; }
    .leaflet-control-zoom a { width: 40px !important; height: 40px !important; line-height: 38px !important; color: #17313a !important; }
    .leaflet-control-zoom a:hover { background: #edf7fc !important; }
    .leaflet-bottom.leaflet-right { margin: 0 10px 10px 0; }
    .map-filter-trigger:hover, .map-filter-trigger:focus-visible { border-color: #9fcce0; background: #f1f9fc; color: #006eb6; box-shadow: 0 4px 14px #17313a2b; outline: none; }
    .map-filter-trigger[aria-expanded="true"], .map-filter-trigger[data-filtered="true"] { border-color: #8fc5df; background: #e8f5fb; color: #006eb6; }
    .map-filter-clear { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid #d5e1e6; border-radius: 12px; background: rgba(255,255,255,.97); color: #687980; box-shadow: 0 3px 12px #17313a20; pointer-events: auto; cursor: pointer; }
    .map-filter-clear svg { width: 18px; height: 18px; fill: currentColor; }
    .map-filter-clear:hover:not(:disabled) { border-color: #bd7777; background: #fff5f4; color: #a12e35; }
    .map-filter-clear:disabled { border-color: #e1e8eb; background: rgba(255,255,255,.78); color: #aab6bb; cursor: default; box-shadow: 0 2px 8px #17313a12; }
    .map-filter-menu { position: absolute; top: calc(100% + 7px); right: 0; display: flex; align-items: flex-start; gap: 6px; max-height: min(70dvh, 420px); padding: 5px; border: 1px solid #b7c7ce; border-radius: 8px; background: #fffffff5; box-shadow: 0 2px 8px #0004; }
    #map-vehicle-filter-menu { right: auto; left: 0; }
    .map-filter-column { display: flex; flex-direction: column; gap: 4px; max-height: calc(min(70dvh, 420px) - 12px); overflow-y: auto; }
    .map-filter-operators { display: flex; flex-direction: column; gap: 5px; width: 196px; max-height: calc(min(70dvh, 420px) - 12px); padding-left: 6px; border-left: 1px solid #dde5e8; }
    .map-filter-operators header { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 2px 2px 0; color: #17313a; font: 700 12px/1.2 system-ui,sans-serif; }
    .map-filter-operators header small { color: #6b7b81; font-weight: 500; }
    .operator-chip-list { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
    .operator-chip { display: flex; align-items: center; gap: 7px; width: 100%; min-height: 30px; padding: 3px 7px 3px 3px; border: 1px solid #d1dade; border-radius: 999px; background: #fff; color: #17313a; font: 600 12px/1.2 system-ui,sans-serif; text-align: left; cursor: pointer; }
    .operator-chip:hover { border-color: #0072bc; }
    .operator-chip[aria-pressed="true"] { border-color: #8fb9d6; background: #f3f9fd; }
    .operator-chip[aria-pressed="false"] { opacity: .5; }
    .operator-chip[aria-pressed="false"] .operator-badge { filter: grayscale(1); }
    .operator-chip[aria-pressed="false"] .operator-name { text-decoration: line-through; }
    .operator-badge { display: grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; color: #fff; font: 800 10px/1 system-ui,sans-serif; letter-spacing: .02em; }
    .operator-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .operator-count { flex: 0 0 auto; min-width: 18px; padding: 1px 5px; border-radius: 999px; background: #e7eef1; color: #40545b; font-size: 11px; text-align: center; }
    .operator-count:empty { display: none; }
    .operator-empty { margin: 0; padding: 4px 2px; color: #6b7b81; font: 500 12px/1.35 system-ui,sans-serif; }
    .micromobility-icon svg { width: 19px; height: 19px; fill: #fff; }
    .scooter-icon, .map-filter-option .detail-icon.scooter-icon { background: #00a3e0; }
    .bike-icon, .map-filter-option .detail-icon.bike-icon { background: #f0a500; }
    .map-filter-menu[hidden] { display: none; }
    .map-filter-option { display: grid; place-items: center; width: 36px; height: 36px; padding: 3px; border: 1px solid #d1dade; border-radius: 6px; background: #fff; cursor: pointer; }
    .map-filter-option img { display: block; width: 27px; height: 27px; }
    .map-filter-option .detail-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 4px; background: #49636d; color: #fff; font: 800 15px/1 system-ui,sans-serif; }
    .map-filter-option[aria-pressed="false"] { filter: grayscale(1); opacity: .42; }
    .other-operators-icon, .map-filter-option .detail-icon.other-operators-icon { background: #0072bc; font-size: 11px; letter-spacing: .02em; }
    .map-filter-option:disabled { cursor: not-allowed; }
    .vehicle-marker.is-external:not(.has-heading) .vehicle-direction::before { display: none; }
    .external-vehicle-popup dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 6px 0; }
    .external-vehicle-popup dt { color: #5f6b76; }
    .external-vehicle-popup dd { margin: 0; }
    .external-vehicle-popup small { color: #5f6b76; }
    .national-stop-popup { min-width: 230px; max-width: 300px; }
    .national-stop-popup .national-stop-meta { color: #5f6b76; font-size: 12px; margin-top: 2px; }
    .national-departures { list-style: none; margin: 6px 0; padding: 0; }
    .national-departures li { display: grid; grid-template-columns: 42px auto 1fr; gap: 6px; align-items: center; padding: 3px 0; border-top: 1px solid #eef2f4; }
    .national-departures time { font-weight: 700; font-variant-numeric: tabular-nums; }
    .national-departures time.is-realtime { color: #00853e; }
    .national-departures .line-badge { min-width: 30px; padding: 1px 5px; border-radius: 4px; background: var(--line-color, #0072bc); color: #fff; font-weight: 800; font-size: 12px; text-align: center; }
    .national-departures .headsign { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .national-departures .operator { display: block; color: #5f6b76; font-size: 11px; }
    .national-stop-popup small, .bike-station-popup small { color: #5f6b76; }
    .map-filter-option[aria-pressed="true"] { border-color: #0072bc; box-shadow: inset 0 0 0 1px #0072bc; }
    .map-filter-reset { width: 36px; height: 30px; padding: 0; border: 1px solid #c6d2d7; border-radius: 6px; background: #f4f7f8; color: #526168; font: 800 22px/1 system-ui,sans-serif; cursor: pointer; }
    .map-filter-reset:disabled { opacity: .4; cursor: default; }
    .map-detail-toggle[aria-pressed="true"] { background: #0072bc; color: #fff; }
    .map-detail-toggle[aria-pressed="true"] .quick-symbol { border-color: transparent; background: #0072bc; }
    .map-detail-toggle:hover { filter: brightness(.97); }
    @media (max-width: 760px) {
      #panel { top: calc(8px + env(safe-area-inset-top, 0px)); left: 8px; right: 8px; width: auto; max-height: calc(100dvh - 16px); }
      body.settings-open #route-panel { display: none; }
      body.settings-open .map-selection-dock { display: none; }
      body.settings-open #line-search-panel { display: none; }
    }
    @media (max-width: 560px) {
      #panel { top: calc(8px + env(safe-area-inset-top, 0px)); left: 8px; right: 8px; width: auto; max-height: min(58dvh, calc(100dvh - 16px)); padding: 10px 12px; }
      #route-panel { top: auto; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); left: 8px; right: 8px; width: auto; max-height: min(48dvh, calc(100dvh - 16px)); padding: 8px 10px 10px; border-radius: 16px; }
      #route-panel::before { display:none; content:none; }
      #route-panel-header { padding-bottom: 6px; }
      .route-search { padding-top: 6px; }
      .map-filter-dock { top: calc(10px + env(safe-area-inset-top, 0px)); right: auto; bottom: auto; left: 10px; gap: 6px; padding: 0; }
      .map-filter-menu { top: auto; bottom: calc(100% + 7px); }
      #map-vehicle-filter-menu { right: 0; left: auto; }
      .map-filter-operators { width: min(176px, calc(100vw - 96px)); }
      .map-selection-dock { width: auto; max-height: min(38dvh, 300px); }
      .line-search-panel-overlay { top: auto; left: 8px; right: 8px; width: auto; max-height: min(48dvh, 380px); }
      .map-filter-trigger { width: 40px; min-width: 40px; height: 40px; }
      .map-filter-clear { width: 40px; height: 40px; }
      .route-search-heading { margin-bottom: 5px; }
      .route-search-title { font-size: 14px; }
      .route-field { margin: 4px 0; }
      .route-field input { padding: 6px 8px; font-size: 13px; }
      .route-map-pick, .route-own-location { height: 30px; }
      .route-own-location { padding:0 6px; font-size:10px; }
      .route-add-via { margin: 0 0 2px; padding: 3px 7px; justify-self:start; }
      .route-options-panel { margin-top: 2px; padding-top: 2px; }
      .route-options-panel summary { display:flex; align-items:center; min-height:24px; padding:0; line-height:1.15; }
      .route-search-status { margin-top: 3px; min-height: 0; line-height: 1.2; }
      .route-search-status:empty { display:none; }
      .route-results { gap: 4px; margin-top: 5px; }
      .route-option { grid-template-columns: 88px minmax(0,1fr) auto; padding: 4px 6px; min-height: 34px; }
      .route-option-time { display:flex; gap:3px; align-items:baseline; }
      .route-option-time small { display:inline; }
      .route-option-time, .route-option-legs, .route-option-duration { font-size: 11px; }
      .route-option-time small { font-size: 9px; }
      .route-results { max-height: none; overflow: visible; }
      .route-details { margin-top: 5px; padding: 6px 7px; }
      .route-leg { min-height: 31px; padding: 2px 0; }
      #route-panel.has-route-details { max-height: min(34vh, calc(100vh - 16px)); }
      #route-panel.has-route-details .route-search-title,
      #route-panel.has-route-details .route-field,
      #route-panel.has-route-details .route-add-via,
      #route-panel.has-route-details .route-time-toolbar { display:none; }
      #route-panel.has-route-details .route-search { padding-top:3px; }
      #route-panel.has-route-details .route-search-status { display:none; }
      #route-panel.has-route-details .route-results { max-height: none; overflow: visible; }
      #route-panel.has-route-details .route-more-button { display:block; position:static; background:#fff; }
      #route-panel.has-route-details .route-option:not(.is-selected) { display:grid; }
      #route-panel.has-route-details .route-details { display:none; }
      #route-panel.has-route-details .route-edit-search{display:inline-block}
      body.settings-open #route-panel { display: none; }
      #panel.is-open { max-height: calc(100vh - 16px); }
      #panel.is-collapsed { right: auto; width: min(326px, calc(100vw - 16px)); max-height: none; overflow: hidden; }
      #panel.is-collapsed > :not(#panel-header) { display: none; }
      #panel.is-collapsed #panel-header { padding-bottom: 0; border-bottom: 0; }
      #panel-title img { width: 100px; }
      .locate-button { padding: 5px 6px; font-size: 11px; }
      .panel-collapse-button { display: inline-grid; }
      .transport-columns { gap: 10px; }
      .stop-summary-label, .stop-departure-label { min-width: 108px; max-width: 150px; }
      .station-summary-label { max-width: min(244px, calc(100vw - 24px)); padding: 4px 5px; }
      .station-summary-header { gap: 4px; padding-bottom: 3px; }
      .station-platform-list { gap: 1px; margin-top: 2px; }
      .station-platform-row { grid-template-columns: 34px 40px minmax(46px,1fr) 48px; column-gap: 4px; min-height: 22px; padding: 1px 2px !important; }
      .station-platform-row button.station-platform-line, .station-platform-row button.station-platform-name { min-height: 20px; }
      .stop-detail-card button.departure-line { min-height: 20px; }
      .station-platform-destination { max-width: none; }
      .stop-detail-card { max-width: min(250px, calc(100vw - 32px)); max-height: 46vh; }
      .stop-detail-card.rail-detail-card { width:min(258px, calc(100vw - 32px)); max-width:min(258px, calc(100vw - 32px)); }
    }
    @media (max-width: 420px) {
      #route-panel-header .app-brand > img { width: 34px; height: 34px; flex: 0 0 34px; }
      .app-brand-name { font-size: 16.5px; }
      .app-brand-tagline { font-size: 7.5px; }
      .route-header-actions { gap: 3px; }
      .locate-button { padding: 5px; font-size: 10px; }
      .route-edit-main { display:none; border:0; background:transparent; color:#006eb6; font:750 11px system-ui,sans-serif; padding:4px 5px; cursor:pointer; white-space:nowrap; }
    #route-panel.has-route-details .route-edit-main { display:inline-block; }
    .settings-button, .clear-map-button { min-width: 32px; width: 32px; height: 44px; padding: 0; }
    .route-collapse-button { min-width: 32px; width: 32px; height: 32px; min-height: 32px; padding: 0; }
    }
  

/* 0.2.22 r2: valtakunnallisten juna-asemien saapuvat/lahtevat ja klikattavat junavuorot. */
.national-stop-popup { min-width: 250px; max-width: 340px; }
.national-stop-section-title { margin-top: 7px; padding-top: 5px; border-top: 1px solid #e2e8eb; color: #42545d; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.national-stop-section-title:first-of-type { margin-top: 4px; }
.national-departures li { grid-template-columns: minmax(48px, auto) auto minmax(0, 1fr); }
.national-departures time { white-space: nowrap; }
.national-departures .national-train-action { appearance: none; border: 0; font: inherit; line-height: 1.35; cursor: pointer; }
.national-departures .national-train-action:hover,
.national-departures .national-train-action:focus-visible { outline: 2px solid color-mix(in srgb, var(--line-color, #7b2182) 45%, #ffffff); outline-offset: 2px; filter: brightness(.94); }
.national-stop-action-hint { margin-top: 7px; padding-top: 6px; border-top: 1px solid #eef2f4; color: #5f6b76; font-size: 11px; line-height: 1.3; }


/* 0.2.24: tickets stay visible even when the itinerary summary is truncated. */
.route-ticket-policy-label { display:grid; gap:4px; font-size:12px; font-weight:700; }
.route-ticket-policy-label select { width:100%; max-width:100%; min-width:0; min-height:38px; padding:7px; border:1px solid #b9cbd4; border-radius:6px; background:#fff; color:#17313a; font:inherit; }
.route-ticket-policy-help { color:#526168; font-size:11px; line-height:1.4; }
.route-ticket { display:block; width:fit-content; max-width:100%; box-sizing:border-box; padding:3px 6px; border-radius:4px; font-size:11px; line-height:1.3; font-weight:750; white-space:normal; overflow-wrap:anywhere; }
.route-option > .route-ticket { grid-column:1 / -1; margin-top:-2px; }
.route-ticket-hsl { color:#075577; background:#e8f4fb; border:1px solid #b8d7e6; }
.route-ticket-separate, .route-ticket-check { color:#73440a; background:#fff4df; border:1px solid #d9b875; }
.route-details-body > .route-ticket { margin:6px 0 4px; }
.route-ticket-policy-label select:focus-visible { outline:2px solid #0072bc; outline-offset:2px; }
@media (max-width:560px) {
  .route-option { row-gap:4px; }
  .route-ticket-policy-label select { min-height:44px; font-size:13px; }
  .route-ticket { font-size:11px; }
}

.route-ticket-notice { padding:7px 8px; border:1px solid #d9b875; border-radius:6px; background:#fff4df; color:#73440a; font-size:11px; line-height:1.4; }


/* 0.2.24 r2: journey context wins over automatic background information.
   Do not hide route-map-time or explicitly opened stop-summary-expanded cards.
   This guard also covers markers whose asynchronous layer creation is pending. */
.has-route-focus .leaflet-tooltip.stop-summary-label:not(.stop-summary-expanded),
.has-route-focus .leaflet-tooltip.stop-departure-label:not(.stop-summary-expanded),
.has-route-focus .leaflet-tooltip.vehicle-detail-label:not(.vehicle-detail-label-selected) {
  display: none !important;
  pointer-events: none !important;
}

/* 0.2.25: one scroll surface; pagination stays after the last visible result. */
#route-panel { overflow-anchor: none; overscroll-behavior-y: contain; }
.route-option, .route-more-button { scroll-margin-block: 8px; }
.route-option:focus-visible, .route-more-button:focus-visible { outline: 2px solid #0072bc; outline-offset: 2px; }
.route-options-feedback { padding: 7px 8px; border: 1px solid #c3d0d6; border-radius: 6px; background: #f5f8fa; color: #334b55; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  #route-panel.has-route-details { max-height: min(38dvh, calc(100dvh - 16px)); }
  .route-option { min-height: 44px; }
  .route-more-button { min-height: 44px; flex-shrink: 0; }
}

/* 0.2.26: planned alighting and its onward walk are route information, not a
   background station board. Their full text remains available on the point. */
.route-map-time .route-map-followup { display:block; margin-top:2px; color:#526168; font-size:10px; font-weight:600; }
.route-map-time.is-final-alight .route-map-time-name { max-width:170px; }
.route-event-point:focus-visible { outline:2px solid #0072bc; outline-offset:3px; }
.route-event-content .route-map-time-name, .route-event-content .route-map-followup { display:block; margin-top:4px; white-space:normal; }
.route-event-content { color:#17313a; font:650 12px/1.4 system-ui,sans-serif; }

/* Satellite-only vehicle presentation; marker position animation unchanged. */
.vehicle-marker .vehicle-sprite { display:none; }
#map.vehicle-sprites-active .has-vehicle-sprite:not(.sprite-unavailable) .vehicle-direction { display:none; }
#map.vehicle-sprites-active .has-vehicle-sprite:not(.sprite-unavailable) .vehicle-sprite {
 position:absolute; inset:0; display:grid; place-items:center;
 transform:rotate(var(--heading)); transform-origin:50% 50%; transition:transform 350ms linear;
}
.vehicle-sprite img { width:26px; height:38px; object-fit:contain; filter:drop-shadow(0 0 2px white) drop-shadow(0 1px 2px #0008); }
#map.vehicle-sprites-active .has-vehicle-sprite:not(.sprite-unavailable) .vehicle-line {
 inset:auto; left:34px; top:11px; min-width:22px; height:20px; padding:0 4px;
 border:2px solid white; border-radius:5px; background:var(--vehicle-color); overflow:visible; box-shadow:0 1px 3px #0006;
}
#map.vehicle-sprites-active .has-vehicle-sprite.is-selected .vehicle-sprite img { filter:drop-shadow(0 0 2px #ffdf00) drop-shadow(0 0 3px #ffdf00); }
@media (prefers-reduced-motion:reduce) { #map.vehicle-sprites-active .vehicle-sprite { transition:none; } }

/* One visible marker per matched physical bus stop; source data is retained. */
#map .shared-stop-duplicate { display:none !important; pointer-events:none !important; }

/* 0.2.49.2: progressively disclosed station board and visible train loading state. */
.station-summary-expand { width:100%; margin-top:4px; padding:5px 7px; border:1px solid #cddfe8; border-radius:6px; background:#f1f8fc; color:#00649c; font:700 10px/1.3 system-ui,sans-serif; cursor:pointer; }
.station-summary-expand:hover,.station-summary-expand:focus-visible { background:#e2f1f9; outline:2px solid #0072bc; }
.rail-action-loading { opacity:.7; cursor:progress!important; position:relative; padding-right:16px!important; }
.rail-action-loading::after { content:""; position:absolute; right:2px; top:50%; width:9px; height:9px; margin-top:-5px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:rail-loading-spin .75s linear infinite; }
@keyframes rail-loading-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .rail-action-loading::after { animation:none; } }

/* 0.2.49.4: show progress while fetching a selected national train's route. */
.rail-selection-loading .selected-line-subtitle::before { content:""; display:inline-block; width:9px; height:9px; margin-right:6px; border:2px solid #7b2182; border-right-color:transparent; border-radius:50%; animation:rail-loading-spin .75s linear infinite; vertical-align:-2px; }
@media(prefers-reduced-motion:reduce) { .rail-selection-loading .selected-line-subtitle::before { animation:none; } }

/* 0.2.49.6: compact station departure expander, matching bus stop chevrons. */
.station-summary-label .station-summary-expand { display:flex; align-items:center; justify-content:center; width:100%; min-height:16px; height:16px; margin:1px 0 0; padding:0; border:0; border-radius:4px; background:transparent; color:#00649c; font:900 16px/1 system-ui,sans-serif; cursor:pointer; }
.station-summary-label .station-summary-expand:hover, .station-summary-label .station-summary-expand:focus-visible { background:#e9f5fb; outline:1px solid #0072bc; }
.station-summary-label .station-platform-list { margin-top:2px; }
.station-summary-label .station-summary-header { padding-bottom:2px; }
.station-summary-label .station-platform-row { min-height:22px; }
.leaflet-tooltip.station-summary-label { z-index: 800; }

/* 0.2.49.7: compact accessible station summary collapse control. */
.station-summary-label .station-summary-header { display:flex; align-items:center; }
.station-summary-label .station-summary-count { margin-left:auto; }
.station-summary-label .station-summary-collapse { border:0; background:transparent; color:#00649c; min-width:22px; min-height:22px; padding:0 3px; cursor:pointer; font:700 17px/1 system-ui,sans-serif; }
.station-summary-label .station-summary-collapse:focus-visible { outline:2px solid #0072bc; border-radius:4px; }

/* 0.2.49.8 - Unified departure cards: down opens, up collapses. */
.stop-summary-open .stop-summary-chevron { transform: rotate(135deg); }
.stop-summary-expanded .stop-popup-collapse .stop-summary-chevron { transform: rotate(-45deg); }
.station-summary-label .station-summary-header { display:flex; align-items:center; gap:6px; }
.station-summary-label .station-summary-name { flex:1; min-width:0; }
.station-summary-label .station-summary-collapse { margin-left:auto; display:grid; place-items:center; flex:0 0 24px; }
.station-toggle-chevron { display:block; width:7px; height:7px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(135deg); }
.station-summary-collapse[aria-expanded="true"] .station-toggle-chevron { transform:rotate(-45deg); }
.station-summary-label .station-summary-expand { width:100%; min-height:26px; height:auto; margin-top:5px; border:1px solid #a9c4d3; border-radius:5px; background:#edf7fc; color:#006eb6; font:750 11px/1.2 var(--ui-font,system-ui,sans-serif); }
.station-summary-label .station-summary-expand:hover { background:#dff1fa; }
.stop-detail-card .departure-list li { grid-template-columns:58px 42px minmax(0,1fr); align-items:center; }
.stop-detail-card .departure-list li > .departure-line { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; width:100%; min-width:0; min-height:20px; margin:0; text-align:center; }
.stop-detail-card .departure-list li > .departure-time { font-variant-numeric:tabular-nums; }
.stop-detail-card .departure-list li > .departure-headsign { min-width:0; }
/* Track-specific railway boards retain their own four-column layout. */
.stop-detail-card .rail-detail-list li { grid-template-columns:max-content max-content minmax(0,1fr) max-content; }

/* Verified track markers: platform codes are shown only at source coordinates. */
.rail-track-marker { background: transparent; border: 0; }
.rail-track-marker span { display: flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 50%; background: #702d83; border: 2px solid #fff; box-shadow: 0 1px 5px #0005; color: white; font-size: 11px; font-weight: 700; box-sizing: border-box; }
.rail-track-popup .departure-list { margin-top: 8px; max-height: 270px; overflow-y: auto; }

/* Railway track and station cards share the same visual surface. */
.leaflet-popup.station-track-leaflet-popup .leaflet-popup-content-wrapper { border:1px solid #8096a2; border-radius:7px; padding:0; box-shadow:0 2px 7px #0002; }
.leaflet-popup.station-track-leaflet-popup .leaflet-popup-content { margin:0; width:auto !important; }
.leaflet-popup.station-track-leaflet-popup .rail-track-popup.station-summary-label { box-sizing:border-box; width:250px; max-width:min(280px,88vw); padding:5px 6px; }
.leaflet-popup.station-track-leaflet-popup .leaflet-popup-tip { box-shadow:0 1px 2px #0002; }

/* Rail platform cards use the exact same Leaflet tooltip shell as station summaries. */
.leaflet-tooltip.station-track-tooltip { width:max-content; }
.leaflet-tooltip.station-track-tooltip .rail-track-card { width:100%; }

/* Rail card: explicit close control for click-pinned tooltips. */
.station-track-tooltip .rail-track-close { border: 0; background: transparent; color: #526a79; font-size: 17px; line-height: 1; padding: 3px 5px; cursor: pointer; margin-left: 2px; }
.station-track-tooltip .rail-track-close:hover { color: #153c55; }

/* 0.2.49.26: HSL bus terminal and numbered bay markers */
.bus-terminal-marker { border:0; background:transparent; }
.bus-terminal-marker span { display:flex; width:24px; height:24px; align-items:center; justify-content:center; border-radius:50%; background:#0873b7; border:2px solid #fff; color:white; font:800 11px/1 system-ui,sans-serif; box-shadow:0 1px 5px #0006; }
.bus-terminal-main span { background:#064d82; font-size:13px; }
.bus-terminal-tooltip .rail-track-card { min-width:235px; }
.terminal-heading-icon { display:inline-flex; align-items:center; justify-content:center; color:#0873b7; font-size:16px; }
.terminal-departure-row { grid-template-columns:36px 40px minmax(65px,1fr) 35px !important; }
.terminal-departure-time { color:#008450; white-space:nowrap; }
.terminal-departure-line { color:#fff; background:#0873b7; border-radius:4px; padding:3px 4px; text-align:center; }
.terminal-departure-destination { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.terminal-departure-bay { justify-self:end; color:#40545d; font-size:9px; }

/* 0.2.50.5: Finland clock in the persistent header (desktop + mobile). */
@media (max-width:420px) { #aikakartta-clock.aikakartta-clock { font-size:9px; } }

/* 0.2.50.6: consistent vehicle details across HSL and national sources. */
.vehicle-popup-title { font-weight: 750; line-height: 1.25; }
.vehicle-popup-destination { margin: 3px 0 7px; line-height: 1.3; overflow-wrap: anywhere; }
.vehicle-popup-grid { display: grid; grid-template-columns: minmax(76px, auto) minmax(0, 1fr); gap: 4px 10px; margin: 6px 0 0; align-items: baseline; }
.vehicle-popup-grid dt { color: #5f6b76; font-weight: 500; }
.vehicle-popup-grid dd { min-width: 0; margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.vehicle-detail-label-selected .vehicle-popup-grid { grid-template-columns: minmax(70px, auto) minmax(0, 1fr); }

/* 0.2.50.9: keep selected vehicle tooltips legible at every zoom level.
   Leaflet positions tooltips with transforms; let Leaflet position the box,
   but never let its contents shrink to a one-character column. */
#map .leaflet-tooltip.vehicle-detail-label.vehicle-detail-label-selected {
  box-sizing: border-box;
  width: 230px;
  min-width: 230px;
  max-width: 230px;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}
#map .leaflet-tooltip.vehicle-detail-label-selected .vehicle-popup-grid {
  display: grid;
  grid-template-columns: minmax(75px, 90px) minmax(0, 1fr);
  gap: 4px 8px;
  width: 100%;
}
#map .leaflet-tooltip.vehicle-detail-label-selected .vehicle-popup-grid dt,
#map .leaflet-tooltip.vehicle-detail-label-selected .vehicle-popup-grid dd {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
}
#map .leaflet-tooltip.vehicle-detail-label-selected .vehicle-popup-title,
#map .leaflet-tooltip.vehicle-detail-label-selected .vehicle-popup-destination {
  overflow-wrap: break-word;
  word-break: normal;
}
@media (max-width: 360px) {
  #map .leaflet-tooltip.vehicle-detail-label.vehicle-detail-label-selected {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
  }
}

/* 0.2.50.10: national vehicles use Leaflet popups, not HSL tooltips.
   Give the popup content a real width so grid values never collapse vertically. */
#map .leaflet-popup-content:has(> .vehicle-popup-card) {
  width: 250px !important;
  max-width: calc(100vw - 76px);
  margin: 12px 14px;
}
#map .vehicle-popup-card {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  font: 500 12px/1.4 var(--ui-font);
  white-space: normal;
}
#map .vehicle-popup-card .vehicle-popup-grid {
  display: grid;
  grid-template-columns: minmax(88px, 42%) minmax(0, 1fr);
  gap: 5px 9px;
  width: 100%;
  align-items: start;
}
#map .vehicle-popup-card .vehicle-popup-grid dt,
#map .vehicle-popup-card .vehicle-popup-grid dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
}
#map .vehicle-popup-card .vehicle-popup-grid dd { font-variant-numeric: tabular-nums; }
@media (max-width: 420px) {
  #map .leaflet-popup-content:has(> .vehicle-popup-card) {
    width: min(235px, calc(100vw - 76px)) !important;
  }
}

/* 0.2.50.11: one compact, opaque detail-card appearance for all vehicles.
   Scope strictly to selected vehicle tooltips and national vehicle popups;
   do not alter the separate optional information labels or stop-card dimming. */
#map .leaflet-tooltip.vehicle-detail-label.vehicle-detail-label-selected {
  background: #fff !important;
  opacity: 1 !important;
  width: 218px;
  min-width: 218px;
  max-width: 218px;
  padding: 6px 8px;
  border: 1px solid #aab6bc;
  border-radius: 7px;
  box-shadow: 0 2px 7px #0003;
}
#map .leaflet-popup:has(.vehicle-popup-card) .leaflet-popup-content-wrapper,
#map .leaflet-popup:has(.vehicle-popup-card) .leaflet-popup-tip {
  background: #fff !important;
  opacity: 1 !important;
}
#map .leaflet-popup-content:has(> .vehicle-popup-card) {
  width: 202px !important;
  max-width: calc(100vw - 76px);
  margin: 7px 9px;
}
#map .vehicle-popup-card { font: 500 11px/1.3 var(--ui-font); }
#map .vehicle-popup-card .vehicle-popup-title { font-size: 13px; }
#map .vehicle-popup-card .vehicle-popup-destination { margin: 2px 0 5px; font-size: 11px; }
#map .vehicle-popup-card .vehicle-popup-grid,
#map .leaflet-tooltip.vehicle-detail-label-selected .vehicle-popup-grid {
  grid-template-columns: minmax(68px, 42%) minmax(0, 1fr);
  gap: 3px 6px;
  font-size: 10px;
  line-height: 1.3;
}
#map .vehicle-popup-card .vehicle-popup-grid dd,
#map .leaflet-tooltip.vehicle-detail-label-selected .vehicle-popup-grid dd {
  overflow-wrap: break-word;
  word-break: normal;
}
@media (max-width: 360px) {
  #map .leaflet-tooltip.vehicle-detail-label.vehicle-detail-label-selected {
    width: 200px; min-width: 200px; max-width: 200px;
  }
  #map .leaflet-popup-content:has(> .vehicle-popup-card) {
    width: min(190px, calc(100vw - 76px)) !important;
  }
}