:root { color-scheme: light; }
html, body, #map { height: 100%; margin: 0; }
html { background: #dfeaf0; }
body {
-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(326px, calc(100vw - 48px));
max-height: calc(100dvh - 48px); overflow: auto; box-sizing: border-box; padding: 12px 14px;
border-radius: 8px; background: #fff; box-shadow: 0 2px 12px #0004; font: 14px system-ui, sans-serif;
}
#route-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 5px; border-bottom: 1px solid #ddd; }
#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: 34px; height: 34px; object-fit: contain; }
.app-brand { display:flex; align-items:center; gap:7px; min-width:0; color:#17313a; text-decoration:none; }
.app-brand-name { font:850 15px/1 system-ui,sans-serif; white-space:nowrap; }
.app-brand-tagline { display:block; margin-top:2px; color:#66757a; font:650 7px/1 system-ui,sans-serif; letter-spacing:.04em; text-transform:uppercase; }
.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; }
.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; }
.route-search-title { display: block; margin-bottom: 4px; color: #17313a; font-size: 15px; }
.route-field { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 5px 7px; align-items: start; margin: 4px 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 { grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 6px; border: 2px solid #008450; border-radius: 50%; color: #008450; font-size: 10px; font-weight: 900; }
.route-field.destination .route-field-marker { border-color: #e83e74; color: #e83e74; }
.route-field.via .route-field-marker { border-color: #e77817; color: #a94d00; }
.route-field input {
grid-column: 2; grid-row: 1;
width: 100%; min-width: 0; box-sizing: border-box; padding: 8px 9px; border: 1px solid #aebcc3; border-radius: 5px;
color: #17313a; background: #fff; font: 14px system-ui, sans-serif;
}
#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 .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: 108px; }
.route-origin .place-suggestions, .route-field.destination .place-suggestions { grid-column: 2 / 4; }
.route-field input:focus { outline: 2px solid #8bc9eb; border-color: #0072bc; }
.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: 22px minmax(0, 1fr) 58px; }
.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-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; }
.route-time-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: end; }
.route-time-row label, .walking-speed-label { display: grid; gap: 3px; margin: 0; color: #526168; font-size: 11px; }
.route-time-row input { box-sizing: border-box; width: 100%; min-width: 0; padding: 6px; border: 1px solid #aebcc3; border-radius: 5px; }
.route-now-button { height: 31px; padding: 0 8px; }
.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 { width:100%; padding:6px 8px; font-size:11px; font-weight:750; }
.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; }
.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; }
.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; }
.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 {
width: max-content; min-width: 112px; max-width: 166px; box-sizing: border-box; border: 1px solid #bbc6ca; border-radius: 8px;
background: #fff; color: #17313a; padding: 4px 5px;
font: 700 11px/1.2 system-ui, sans-serif; box-shadow: 0 1px 3px #0003; white-space: normal;
}
.stop-summary-label {
width: max-content; min-width: 112px; max-width: 166px; box-sizing: border-box; border: 1px solid #aebac0; border-radius: 7px;
background: #fffffff2; color: #17313a; padding: 4px 5px;
font: 700 11px/1.2 system-ui, sans-serif; box-shadow: 0 1px 3px #0003; 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: pointer;
}
.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; }
.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; }
.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: 18px minmax(54px, auto) 20px; grid-template-rows: auto auto;
column-gap: 5px; 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: 18px; height: 18px; 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: 20px; height: 26px;
margin: 0 !important; border: 0 !important; border-left: 1px solid #d2dade !important;
border-radius: 0 !important; background: transparent !important; color: #006eb6 !important;
font-size: 20px !important; line-height: 1 !important; text-decoration: none !important;
}
.stop-detail-card {
min-width: 214px; max-width: 244px; max-height: min(330px, calc(100vh - 32px)); overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box; border: 1px solid #8da5b0; border-radius: 8px;
background: #fffffff9; color: #17313a; padding: 5px 6px;
font: 600 11px/1.18 system-ui, sans-serif; box-shadow: 0 2px 7px #0004; white-space: normal;
}
/* Leaflet's default white tooltip tip disappears on OSM. Use a high-contrast
blue pointer with a white halo so the card-to-stop relationship is obvious. */
.leaflet-tooltip.stop-summary-label::before,
.leaflet-tooltip.stop-departure-label::before,
.leaflet-tooltip.stop-detail-card::before { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff); }
.leaflet-tooltip-right.stop-summary-label::before,
.leaflet-tooltip-right.stop-departure-label::before,
.leaflet-tooltip-right.stop-detail-card::before { border-right-color:#0072bc; }
.leaflet-tooltip-left.stop-summary-label::before,
.leaflet-tooltip-left.stop-departure-label::before,
.leaflet-tooltip-left.stop-detail-card::before { border-left-color:#0072bc; }
.leaflet-tooltip-top.stop-summary-label::before,
.leaflet-tooltip-top.stop-departure-label::before,
.leaflet-tooltip-top.stop-detail-card::before { border-top-color:#0072bc; }
.leaflet-tooltip-bottom.stop-summary-label::before,
.leaflet-tooltip-bottom.stop-departure-label::before,
.leaflet-tooltip-bottom.stop-detail-card::before { border-bottom-color:#0072bc; }
.stop-detail-card .departure-list { min-width: 0; }
.vehicle-stop-arrival-label {
border: 1px solid #0072bc; border-left: 4px solid #008450; border-radius: 7px; background: #fffffff2; color: #17313a; padding: 2px 5px;
font: 700 11px/1.2 system-ui, sans-serif; box-shadow: 0 1px 3px #0003; white-space: nowrap;
}
.vehicle-stop-arrival-label::before { display: none; }
.vehicle-stop-arrival-label .vehicle-stop-time { color: #008450; }
.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; 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:hidden;
}
.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; }
.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; }
.zone-label {
display: grid; place-items: center; width: 24px; height: 24px; margin: -12px 0 0 -12px;
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; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 6px; pointer-events: none; }
.map-filter-group { position: relative; pointer-events: auto; }
.map-filter-trigger { display: inline-flex; align-items: center; justify-content: center; width: 40px; min-width: 40px; height: 40px; padding: 0; border: 1px solid #9db3bd; border-radius: 8px; background: #fff; color: #17313a; box-shadow: 0 1px 5px #0004; cursor: pointer; }
.map-filter-trigger .quick-symbol { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #8aa6b5; border-radius: 50%; background: #f7fafb; }
.map-filter-trigger .quick-symbol svg { width: 16px; height: 16px; display: block; fill: currentColor; }
.map-filter-trigger[aria-expanded="true"], .map-filter-trigger[data-filtered="true"] { border-color: #0072bc; background: #eaf6fc; color: #006eb6; }
.map-filter-clear { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid #9db3bd; border-radius: 8px; background: #fff; color: #526168; box-shadow: 0 1px 5px #0004; 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: #d5dfe3; background: #f7f9fa; color: #9aa8ad; cursor: default; box-shadow: none; }
.map-filter-menu { position: absolute; right: 0; bottom: calc(100% + 7px); display: flex; flex-direction: column; gap: 4px; max-height: min(70dvh, 390px); overflow-y: auto; padding: 5px; border: 1px solid #b7c7ce; border-radius: 8px; background: #fffffff5; box-shadow: 0 2px 8px #0004; }
.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; }
.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; }
.stop-detail-card.leaflet-tooltip-right::after, .stop-detail-card.leaflet-tooltip-left::after,
.stop-detail-card.leaflet-tooltip-top::after, .stop-detail-card.leaflet-tooltip-bottom::after {
content: ''; position: absolute; z-index: -1; background: #087fb7; box-shadow: 0 0 0 1px #fff, 0 1px 2px #0008; pointer-events: none;
}
.stop-detail-card.leaflet-tooltip-right::after { left: -24px; top: 50%; width: 28px; height: 3px; transform: translateY(-1px); }
.stop-detail-card.leaflet-tooltip-left::after { right: -24px; top: 50%; width: 28px; height: 3px; transform: translateY(-1px); }
.stop-detail-card.leaflet-tooltip-top::after { bottom: -28px; left: 50%; width: 3px; height: 28px; transform: translateX(-1px); }
.stop-detail-card.leaflet-tooltip-bottom::after { top: -28px; left: 50%; width: 3px; height: 28px; transform: translateX(-1px); }
.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; }
}
@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(46dvh, calc(100dvh - 16px)); padding: 5px 8px 7px; border-radius: 14px; }
#route-panel::before { display:none; content:none; }
#route-panel-header { padding-bottom: 4px; }
.route-search { padding-top: 4px; }
.map-filter-dock { top: auto; right: 10px; bottom: 16px; gap: 4px; }
.map-filter-clear { width: 38px; height: 40px; }
.route-search-title { margin-bottom: 3px; font-size: 14px; }
.route-field { margin: 2px 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-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: 132px; overflow-y: auto; }
.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-options-panel { 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:sticky; bottom:0; z-index:2; 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(260px, calc(100vw - 24px)); }
.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 img { width: 94px; }
.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, .route-collapse-button { min-width: 32px; width: 32px; height: 44px; padding: 0; }
}