/* Route-only chrome. Keep the real map, data and ordinary prefecture UI intact. */
body.route-mode .route-thumb[aria-disabled="false"] { cursor:pointer; }
body.route-mode .route-thumb:focus-visible { outline:2px solid #208ab4; outline-offset:2px; }
body.route-mode .route-photo-caption { margin:0; font-size:9px; line-height:1.3; color:#354d63; }
body.route-mode .route-memory-missing-icon svg { width:16px; height:16px; }
body.route-mode .route-bottom[data-replaying="true"] .route-station-nav,
body.route-mode .route-bottom[data-replaying="true"] .route-collapse,
body.route-mode .route-bottom[data-replaying="true"] .route-visit-list,
body.route-mode .route-bottom[data-replaying="true"] .route-order-note,
body.route-mode .route-bottom[data-replaying="true"] .route-photo-notice { display:none; }
body.route-mode .route-photo-viewer { position:absolute; inset:0; z-index:12000; display:grid; place-items:center; padding:12px; background:#102c4b40; backdrop-filter:blur(3px); }
body.route-mode .route-photo-viewer[hidden] { display:none; }
body.route-mode .route-memory-photo-panel { width:min(520px,100%); max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding:8px; overflow-y:auto; color:#102c4b; }
body.route-mode .route-memory-photo-heading { display:flex; align-items:center; gap:3px; }
body.route-mode .route-memory-photo-heading > div { flex:1; min-width:0; }
body.route-mode .route-memory-photo-heading strong { display:block; font-size:14px; overflow-wrap:anywhere; }
body.route-mode .route-memory-photo-heading p { margin:3px 0; font-size:10px; line-height:1.3; }
body.route-mode .route-memory-photo-heading button, body.route-mode .route-memory-photo-footer button { min-width:44px; min-height:44px; border:0; border-radius:10px; background:#ffffffac; font-size:22px; color:#102c4b; cursor:pointer; }
body.route-mode .route-photo-viewer .route-memory-photo-image { width:100%; max-width:100%; aspect-ratio:auto; margin-block:3px; height:min(58dvh,420px); background:#e9f9fb; border-radius:10px; }
body.route-mode .route-photo-viewer .route-memory-photo-image img { width:100%; height:100%; object-fit:contain; }
body.route-mode .route-memory-photo-footer { display:flex; align-items:center; justify-content:center; gap:3px; font-size:10px; }
body.route-mode .route-memory-photo-footer[hidden] { display:none; }
body.route-mode [data-memory-note] { display:block; margin-top:3px; font-size:10px; color:#354d63; }
body.route-mode .route-guide-arrival { position:absolute; width:30px; height:30px; pointer-events:none; }
body.route-mode .route-memory-arrival-skin { display:grid; place-items:center; width:30px; height:30px; border:2px solid white; border-radius:11px 11px 11px 4px; background:#08bfe9; color:#102c4b; box-shadow:0 0 0 6px #d6faff66; font-size:13px; font-weight:700; }
body.route-mode .route-memory-arrival-skin svg { width:20px; height:20px; }
body.route-mode .route-guide-map { position:absolute; inset:0; z-index:500; background:#d9eef2; pointer-events:auto; }
body.route-mode .route-guide-vehicle { position:absolute; width:30px; height:30px; pointer-events:none; }
body.route-mode .route-guide-vehicle-skin { position:relative; display:grid; place-items:center; width:30px; height:30px; background:#f6ffff; border:2px solid white; border-radius:50%; box-shadow:0 2px 8px #102c4b33; }
body.route-mode .route-guide-vehicle svg { width:22px; height:22px; }
body.route-mode .route-guide-arrow { position:absolute; top:-15px; font-size:16px; line-height:1; color:#102c4b; text-shadow:0 0 3px white; }
body.route-mode .route-guide-vehicle[hidden] { display:none; }
body.route-guide-active .route-basemap-status { visibility:hidden; }
body.route-mode .route-guide-map .maplibregl-ctrl-top-right { top:calc(env(safe-area-inset-top) + 4px); right:12px; }
body.route-mode .route-guide-map .maplibregl-ctrl-top-right .maplibregl-ctrl { margin:0; }
body.route-mode .route-guide-map .maplibregl-ctrl-group { display:flex; background:#e1f9fb; border:1px solid white; border-radius:12px; overflow:hidden; box-shadow:none; }
body.route-mode .route-guide-map .maplibregl-ctrl-group button { width:44px; height:44px; }
body.route-mode .route-guide-map .maplibregl-ctrl-attrib { font-size:9px; }
body.route-mode .route-playback [data-play-follow] { display:block; margin:3px auto 0; }
@media (max-height:500px) {
    body.route-mode .route-guide-map .maplibregl-ctrl-group { display:block; }
}
/* Date navigation is scroll-first; secondary actions live in one disclosure. */
body.route-mode { --route-ink: #102c4b; --route-muted: #354d63; --route-blue: #08bfe9; }
body.route-mode #timeline-sidebar, body.route-mode #footprint-drawer-container,
body.route-mode #map-add-control, body.route-mode #home-utility-actions { display: none; }
body.route-mode #trip-route-banner {
    position: absolute; top: calc(env(safe-area-inset-top) + 76px); left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right)); width: auto; max-width: 740px; margin-inline: auto;
    z-index: 9999; padding: 0; border: 0 !important; box-shadow: none !important; background: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    color: var(--route-ink); pointer-events: auto; font-family: inherit;
}
body.route-mode .route-glass {
    background: linear-gradient(115deg, #ddfaf7d9, #b9edffd4 65%, #d5f7e6d8);
    border: 1px solid #fffffff2 !important; box-shadow: 0 6px 22px #33788712 !important;
    backdrop-filter: blur(14px) saturate(1.12); -webkit-backdrop-filter: blur(14px) saturate(1.12); border-radius: 16px;
}
body.route-mode .route-shell button, body.route-mode .route-bottom button {
    min-height: 44px; border: 0 !important; box-shadow: none !important; color: var(--route-ink); font: inherit; cursor: pointer;
}
body.route-mode #layer2 #trip-route-banner button, body.route-mode #layer2 #trip-route-bottom button,
body.route-mode #layer2 .route-size-handle { border: 0 !important; box-shadow: none !important; }
body.route-mode .route-info { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; }
body.route-mode .route-info-text { flex: 1; min-width: 0; }
body.route-mode .route-eyebrow { display: block; line-height: 1.25; color: #388aff; font-size: 9px; letter-spacing: .15em; font-weight: 800; }
body.route-mode #trip-route-title { font-size: 20px; line-height: 1.2; font-weight: 900; margin: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.route-mode #trip-route-meta { font-size: 10px; color: var(--route-muted); font-weight: 650; margin: 0; line-height: 1.4; white-space: nowrap; }
body.route-mode .route-info-actions { display: flex; flex: none; align-items: center; gap: 12px; }
body.route-mode .route-day-context { padding-left: 14px; border-left: 1px solid #7ab7c82b; font-size: 12px; font-weight: 750; margin: 0; white-space: nowrap; }
body.route-mode .route-info-actions button { display: grid; place-items: center; width: 44px; padding: 0; background: transparent !important; color: #59657f; border-radius: 10px; font-size: 20px; font-weight: 400; line-height: 1; }
body.route-mode .route-date-bar { display: flex; align-items: center; height: 40px; box-sizing: border-box; gap: 1px; padding: 0 1px; margin-top: 6px; border-radius: 12px; }
body.route-mode .route-days { display: flex; flex: 1; min-width: 0; height: 44px; gap: 1px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
body.route-mode .route-days::-webkit-scrollbar { display: none; }
body.route-mode .route-date-page { flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 10px; background: transparent !important; color: var(--route-ink); font-size: 22px; line-height: 1; }
body.route-mode .route-date-page:disabled { opacity: .3; }
body.route-mode .route-date-page[hidden] { display: none; }
body.route-mode .route-days button, body.route-mode button.route-appearance-button {
    flex: 0 0 auto; width: calc((100% - (var(--route-day-slots, 6) - 1) * 1px) / var(--route-day-slots, 6)); min-width: 44px; min-height: 44px; border-radius: 12px;
    position: relative; background: transparent !important; display: grid; place-items: center; padding: 0 2px; font-size: 10px; font-weight: 750;
    transition: color 200ms ease;
}
/* Inset the visible surface without shrinking its touch target. */
body.route-mode .route-days button::before, body.route-mode .route-appearance-button::before { content: ''; position: absolute; inset: 6px 2px; border-radius: 9px; background: #ffffff75; transition: background 200ms ease; }
body.route-mode .route-days button span, body.route-mode .route-appearance-button span { position: relative; }
body.route-mode button.route-appearance-button { width: calc((100% - var(--route-day-slots, 6) * 1px) / (var(--route-day-slots, 6) + 1)); min-width: 44px; padding: 0; white-space: nowrap; }
body.route-mode .route-days small { display: none; }
body.route-mode .route-days button[aria-pressed="true"], body.route-mode button.route-appearance-button[aria-expanded="true"] { color: white; }
body.route-mode .route-days button[aria-pressed="true"]::before, body.route-mode .route-appearance-button[aria-expanded="true"]::before { background: linear-gradient(145deg, #42d4f5, var(--route-blue)); outline: 1px solid white; outline-offset: -1px; }
body.route-mode .route-members[hidden] { display: none; }
body.route-mode .route-bottom {
    position: absolute; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
    bottom: calc(env(safe-area-inset-bottom) + 12px); max-width: 740px; margin-inline: auto; z-index: 9999; color: var(--route-ink); padding: 12px 5px 5px;
}
body.route-mode .route-collapse { position: absolute; top: -14px; left: calc(50% - 34px); width: 68px; height: 44px; padding: 0; background: transparent !important; z-index: 1; border-radius: 12px; }
body.route-mode .route-handle { position: absolute; top: 19px; left: 19px; width: 30px; height: 3px; border-radius: 9px; background: #8cacbc; }
body.route-mode #trip-route-summary, body.route-mode .route-collapse-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body.route-mode .route-card { padding: 12px; border-radius: 13px; border: 1px solid #ffffffeb; background: #ffffffad; touch-action: pan-y; }
body.route-mode .route-card[hidden], body.route-mode .route-card-row[hidden] { display: none; }
body.route-mode .route-card-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; }
body.route-mode .route-thumb { width: 78px; flex: 0 0 78px; }
body.route-mode .route-selected-number { position: absolute; left: -4px; top: -4px; display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid white; border-radius: 50%; background: #08bfe9; color: white; font-size: 10px; font-weight: 700; }
body.route-mode .route-card-text { flex: 1; min-width: 0; text-align: center; }
body.route-mode .route-selected-name { margin: 0; max-height: 48px; overflow: hidden; overflow-wrap: anywhere; font-size: 19px; font-weight: 850; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
body.route-mode .route-card-meta { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; margin-top:6px; }
body.route-mode .route-card-meta p { margin:0; font-family:inherit; font-size:10px; line-height:1.35; font-weight:600; color:var(--route-muted); }
body.route-mode .route-detail { flex: 0 0 44px; width: 44px; padding: 0; background: transparent !important; border-radius: 10px; }
body.route-mode .route-detail span { display: block; font-size: 32px; line-height: 1; font-weight: 400; }
body.route-mode .route-status, body.route-mode .route-photo-notice { color: #607c91; font-size: 11px; line-height: 1.5; margin: 4px 0; }
body.route-mode .route-photo-notice[hidden] { display: none; }
body.route-mode .route-order-note { font-size: 10px; color: #607c91; margin: 3px 0 0; }
body.route-mode .route-station-nav { display: grid; grid-template-columns:32px minmax(0,1fr) 32px 32px; align-items:center; gap:8px; margin-top:12px; padding-top:8px; border-top:1px solid #74a6b31a; }
body.route-mode .route-station-nav[data-edit-available="false"] { grid-template-columns:32px minmax(0,1fr) 32px; }
body.route-mode .route-station-nav .route-edit-open { min-width:0; background:transparent; display:grid; place-items:center; }
body.route-mode .route-edit-open svg { width:16px; height:16px; }
body.route-mode .route-edit-open[hidden] { display: none; }
body.route-mode .route-transport-editor { padding: 6px 10px 8px; max-height: min(440px, calc(100dvh - 210px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); overflow-y: auto; overscroll-behavior: contain; }
body.route-mode .route-transport-editor[hidden], body.route-mode .route-edit-active .route-card, body.route-mode .route-edit-active .route-collapse { display: none; }
body.route-mode .route-edit-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 13px; }
body.route-mode .route-edit-heading small { color: #607c91; font-size: 10px; }
body.route-mode .route-mode-scope { display: flex; gap: 2px; background: #ffffff50; border-radius: 12px; padding: 2px; }
body.route-mode .route-mode-scope button { min-width: 54px; min-height: 40px; font-size: 11px; color: #52778b; border-radius: 10px; }
body.route-mode .route-mode-scope button[aria-pressed="true"] { background: #ffffffdb; color: #173044; box-shadow: 0 1px 3px #20445712; }
body.route-mode .route-mode-options { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; padding: 0 0 12px; }
body.route-mode .route-mode-options button { display: grid; place-items: center; gap: 3px; min-height: 48px; border: 1px solid transparent; background-clip: padding-box; border-radius: 12px; color: #52778b; background-color: #ffffff70; padding: 5px 2px; }
body.route-mode .route-mode-options button[aria-pressed="true"] { color: white; background: #09bde9; box-shadow: 0 2px 5px #09bde920; }
body.route-mode .route-mode-options svg { width: 17px; height: 17px; }
body.route-mode .route-mode-options small { font-size: 9px; line-height: 1; white-space: nowrap; }
body.route-mode .route-segment-bar { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-block: 1px solid #74a6b325; margin-bottom: 10px; }
body.route-mode .route-select-hit { display:contents; }
body.route-mode .route-transport-editor select { flex: 1; min-width: 0; width: 0; min-height: 44px; font-size: 11px; color: #173044; border: 0; border-radius: 12px; background: #ffffffa0; padding: 0 8px; }
body.route-mode .route-segment-source { flex: 1; font-size: 9px; color: #607c91; }
body.route-mode .route-edit-message { margin: 10px 0 0; padding: 7px 9px; background: #ffffff80; border-radius: 8px; color: #426579; font-size: 10px; line-height: 1.5; }
body.route-mode .route-order-toolbar { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #173044; }
body.route-mode .route-order-toolbar button { width: 44px; height: 44px; font-size: 21px; color: #52778b; background: transparent; border-radius: 10px; }
body.route-mode .route-order-toolbar [data-edit-confirm] { color: #1299b4; font-size: 15px; }
body.route-mode .route-order-list { display: flex; gap: 5px; list-style: none; margin: 0; padding: 0 0 4px; overflow-x: auto; overscroll-behavior: contain; }
body.route-mode .route-order-list li { flex: 0 0 auto; border-radius: 12px; }
body.route-mode .route-order-handle { display: flex; align-items: center; gap: 5px; max-width: 130px; min-height: 44px; padding: 5px 8px; border: 1px solid #ffffffa0; border-radius: 12px; background: #ffffff86; color: #173044; touch-action: none; cursor: grab; }
body.route-mode .route-order-handle[aria-pressed="true"] { background: #ffffffd6; border-color: #6bd7e7; }
body.route-mode .route-order-number { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: #bfeef3; color: #3188a3; font-size: 9px; }
body.route-mode .route-order-name { min-width: 0; font-size: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body.route-mode .route-mode-options button:focus-visible, body.route-mode .route-mode-scope button:focus-visible, body.route-mode .route-order-handle:focus-visible { outline: 2px solid #238aaf; outline-offset: -2px; }
body.route-mode .route-order-target { background: #ffffffa0; outline: 1px solid #09bde9; outline-offset: -1px; }
body.route-mode .route-order-dragging { cursor: grabbing; color: #09bde9; }
body.route-mode .route-edit-actions { display: flex; justify-content: flex-end; gap:12px; position:static; margin-top:14px; padding:0; background:none; border-radius:0; }
body.route-mode .route-edit-actions button { min-width:52px; min-height:0; padding:2px 10px; font-size:11px; border-radius:9px; background:transparent; }
body.route-mode .route-edit-actions [data-edit-save] { background: #09bde9; color: white; }
body.route-mode .route-transport-editor button:disabled, body.route-mode .route-transport-editor select:disabled { opacity: .45; cursor: default; }
body.route-mode .route-transport-symbol { pointer-events: none; }
body.route-mode .route-transport-symbol svg { width: 24px; height: 24px; background: #ffffffe8; border-radius: 50%; padding: 3px; }
body.route-mode .route-segment-hit { cursor: pointer; }
body.route-mode .route-segment-hit:focus-visible { stroke-opacity: .2; outline: none; }
body.route-mode .route-station-nav button { min-width:0; font-size:11px; border-radius:9px; background:#ffffff8c; }
body.route-mode .route-station-nav .route-picker-toggle { display:flex; align-items:center; justify-content:center; gap:8px; background:transparent; color:var(--route-muted); font-size:9px; }
body.route-mode .route-visit-list { display:flex; gap:6px; overflow-x:auto; overscroll-behavior:contain; padding:8px 1px 2px; scroll-snap-type:x proximity; }
body.route-mode .route-visit-list button { display:flex; align-items:center; gap:5px; flex:0 0 auto; max-width:180px; border:1px solid #ffffffc9; border-radius:10px; padding-inline:7px; background:#ffffff85; font-size:11px; scroll-snap-align:center; transition:background 180ms,border-color 180ms; }
body.route-mode .route-visit-list button > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.route-mode .route-visit-number { display:grid; place-items:center; width:18px; height:18px; flex:0 0 18px; border-radius:50%; color:#1286a8; background:#d7f5fa; font-size:9px; }
body.route-mode .route-visit-list button[aria-pressed="true"] { border-color:#40c9e5; background:#d8f6fc; }
body.route-mode .route-visit-list button[aria-pressed="true"] .route-visit-number { color:white; background:#08bfe9; }
body.route-mode .route-visit-list[hidden], body.route-mode .route-status[hidden], body.route-mode .route-bottom[data-expanded="false"] .route-visit-list { display:none; }
body.route-mode .route-station-nav button:disabled { opacity: .4; }
body.route-mode .route-station-nav[hidden], body.route-mode .route-bottom[data-expanded="false"] .route-station-nav,
body.route-mode .route-bottom[data-expanded="false"] .route-order-note, body.route-mode .route-bottom[data-expanded="false"] .route-status { display: none; }
body.route-mode .route-bottom[data-empty="true"] .route-status { display: block; }
body.route-mode .route-shell button:focus-visible, body.route-mode .route-bottom button:focus-visible,
body.route-mode .route-bottom select:focus-visible { outline: 2px solid #208ab4; outline-offset: 2px; }
body.route-mode #map-back-control { top: calc(env(safe-area-inset-top) + 12px); left: max(12px, env(safe-area-inset-left)); }
body.route-mode #map-back-control button { min-height: 44px; padding: 0 15px; border-radius: 16px; border: 1px solid #ffffff90 !important; box-shadow: none !important; background: #dffaffdd !important; font-size: 13px; }
body.route-mode .leaflet-top { top: calc(env(safe-area-inset-top) + 16px); }
body.route-mode .leaflet-right { right: max(12px, env(safe-area-inset-right)); }
body.route-mode .leaflet-control-zoom { display: flex; width: var(--route-zoom-width, 84px); height: 36px; box-sizing: border-box; margin: 0; border: 1px solid white !important; border-radius: 12px !important; box-shadow: none !important; overflow: hidden; }
body.route-mode .leaflet-control-zoom a { display: block; flex: 1; width: auto !important; height: 34px !important; min-height: 34px; line-height: 34px !important; border: 0; border-radius: 0; background: #def9fddb !important; color: var(--route-ink) !important; font-size: 21px !important; }
body.route-mode .leaflet-control-zoom a:first-child { border-right: 1px solid #a5c6cf55; }
body.route-mode #leaflet-map { height: 100% !important; }
/* Numbered pins and the only selected photo remain anchored to real coordinates. */
body.route-mode .route-stamp-hit { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; }
body.route-mode .route-stamp { position: relative; width: 30px; height: 32px; display: grid; place-items: center; border: 2px solid white; border-radius: 50%; background: var(--stamp-color); color: #12304b; font-size: 12px; font-weight: 800; box-shadow: 0 2px 5px #22495e25; transition: transform 220ms cubic-bezier(.16,1,.3,1); }
body.route-mode .route-stamp::after { content: ''; position: absolute; width: 8px; height: 8px; bottom: -5px; left: calc(50% - 4px); transform: rotate(45deg); background: var(--stamp-color); border-right: 2px solid white; border-bottom: 2px solid white; border-radius: 0 0 3px 0; }
body.route-mode .route-stamp span { position: relative; z-index: 1; }
body.route-mode .route-stamp:not(.route-stamp-uncertain) { color: white; }
body.route-mode .route-stamp-uncertain { border-style: dashed; }
body.route-mode .route-marker-selected .route-stamp { transform: translateY(-2px) scale(1.08); box-shadow: 0 3px 7px #22495e25; }
body.route-mode .route-stamp-hit:focus-visible { outline: 2px solid #208ab4; border-radius: 50%; }
body.route-mode .route-photo-popup .leaflet-popup-content-wrapper { padding: var(--route-bubble-gap, 5px); border-radius: var(--route-bubble-radius, 20px); box-shadow: 0 5px 16px #0f172a29; color: var(--route-ink); background: #fffffff0; }
/* Individual translate leaves Leaflet's coordinate/zoom transform untouched. */
body.route-mode .route-photo-popup { margin-bottom: 0; animation: route-bubble-float 3600ms ease-in-out infinite; will-change: translate; }
body.route-mode .route-photo-popup[data-route-editing="true"] { animation: none; translate: none; will-change: auto; }
body.route-mode .route-photo-popup .leaflet-popup-content { margin: 0; width: auto !important; line-height: 1.4; }
body.route-mode .route-photo-popup .leaflet-popup-tip-container { width: 14px; margin-left: -7px; height: 8px; overflow: visible; }
body.route-mode .route-photo-popup .leaflet-popup-tip { width: 14px; height: 8px; margin: 0; transform: none; clip-path: polygon(0 0, 100% 0, 50% 100%); box-shadow: none; background: #fffffff0; }
body.route-mode .route-photo-popup .route-photo-frame { border-radius: max(0px, calc(var(--route-bubble-radius, 20px) - var(--route-bubble-gap, 5px))); }
body.route-mode .route-photo-popup a.leaflet-popup-close-button { top: 0; right: 0; width: 44px; height: 44px; line-height: 44px; border-radius: 12px; color: white; background: transparent; text-shadow: 0 1px 3px #102c4b90; font-size: 17px; z-index: 1; }
body.route-mode .route-photo-frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 9px; background: linear-gradient(145deg,#eaf6f5,#dcecf2); }
body.route-mode .route-photo-frame img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; opacity: 0; transition: opacity 180ms ease; }
body.route-mode .route-photo-ready img { opacity: 1; }
body.route-mode .route-photo-placeholder { display: grid; place-items: center; position: absolute; inset: 0; font-size: 10px; color: #71889c; }
body.route-mode .route-photo-placeholder[hidden], body.route-mode .route-photo-frame img[hidden] { display: none; }
body.route-mode .route-bubble-name { margin: 0 !important; padding: 3px 5px 0; max-height: 35px; box-sizing: border-box; font-size: 13px; line-height: 16px; font-weight: 750; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
body.route-mode .route-photo-bubble { position: relative; }
body.route-mode .route-size-handle { position: absolute; right: -3px; bottom: -4px; width: 44px; height: 44px; touch-action: none; cursor: nwse-resize; border: 0; background: transparent; color: #227d9d; font-size: 20px; z-index: 2; }
body.route-mode .route-size-handle::before { content: ''; position: absolute; right: 6px; bottom: 6px; width: 16px; height: 16px; border-right: 2px solid #227d9d; border-bottom: 2px solid #227d9d; border-radius: 0 0 5px 0; }
body.route-mode .route-size-handle[hidden], body.route-mode .route-appearance[hidden] { display: none; }
body.route-mode .route-size-handle:focus-visible { outline: 2px solid #208ab4; border-radius: 8px; }
body.route-mode .route-appearance { padding: 6px 12px 10px; }
body.route-mode .route-size-heading { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; }
body.route-mode .route-size-heading output { font-size: 11px; color: #506e86; }
body.route-mode .route-appearance input { appearance: none; -webkit-appearance: none; width: 100%; height: 30px; margin: 4px 0 0; background: transparent; cursor: ew-resize; --range-fill: 50%; }
body.route-mode .route-appearance p { font-size: 10px; color: #607c91; margin: 0; }
body.route-mode .route-size-actions { display: flex; justify-content: flex-end; gap: 6px; }
body.route-mode .route-size-actions button { min-width: 56px; font-size: 12px; border-radius: 12px; background: #ffffff8c; }
body.route-mode .route-size-actions button[data-size-action="reset"] { margin-right: auto; }
body.route-mode .route-size-actions button[data-size-action="apply"] { background: #09bde9; color: white; }
body.route-mode .route-size-actions button:disabled { opacity: .4; }
body.route-mode .route-group-hit { background: transparent; }
body.route-mode .route-group-stamp { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 44px; border: 1.5px solid white; border-radius: 18px 18px 18px 6px; background: var(--stamp-color, #71d1e9); color: #173044; box-shadow: 0 3px 8px #22495e20; }
body.route-mode .route-group-stamp strong { max-width: 84px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; font-weight: 750; }
body.route-mode .route-group-stamp small { font-size: 9px; }
body.route-mode .route-group-hit:focus-visible { outline: 2px solid #208ab4; border-radius: 18px; }
body.route-mode .route-members { padding: 6px 10px; }
body.route-mode .route-members-heading { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
body.route-mode .route-members button { min-width: 44px; font-size: 12px; background: #ffffffb3; border-radius: 12px; padding: 0 10px; }
body.route-mode .route-members select { width: 100%; font-size: 12px; border-radius: 12px; background: #ffffffcf; padding: 4px; }
body.route-mode .route-members option { padding: 8px 4px; }
body.route-mode .route-members [data-members-photo] { display: block; margin: 5px 0 0 auto; }
@media (max-width: 500px) {
    body.route-mode .route-info { gap: 5px; padding-inline: 10px; }
    body.route-mode .route-info-actions { gap: 8px; }
    body.route-mode .route-day-context { font-size: 10px; padding-left: 8px; max-width: 105px; overflow: hidden; text-overflow: ellipsis; }
    body.route-mode #trip-route-meta { font-size: 8.5px; }
    body.route-mode #trip-route-title { max-width: 100%; }
}
@media (min-width: 768px) {
    body.route-mode #trip-route-banner { top: calc(env(safe-area-inset-top) + 20px); left: 160px; right: 160px; }
    body.route-mode #trip-route-title { font-size: 24px; }
    body.route-mode #trip-route-meta { font-size: 12px; }
    body.route-mode .route-thumb { width: 90px; flex-basis: 90px; }
}
@media (max-height: 500px) {
    body.route-mode #trip-route-banner { top: calc(env(safe-area-inset-top) + 8px); left: 110px; right: 72px; }
    body.route-mode .route-info { padding: 5px 10px; }
    body.route-mode #trip-route-title { font-size: 17px; margin: 0; }
    body.route-mode .route-eyebrow { font-size: 8px; }
    body.route-mode .route-info-actions button { min-height: 44px; }
    body.route-mode .route-date-bar { margin-top: 4px; }
    body.route-mode .route-days button, body.route-mode .route-appearance-button { min-height: 44px; }
    body.route-mode .route-bottom { bottom: calc(env(safe-area-inset-bottom) + 6px); padding-top: 9px; }
    body.route-mode .route-thumb { width: 56px; flex-basis: 56px; }
    body.route-mode .route-card-row { min-height: 44px; }
    body.route-mode .route-selected-name { font-size: 16px; max-height: 40px; }
    body.route-mode .route-selected-number { width: 24px; height: 24px; flex-basis: 24px; }
    body.route-mode .route-appearance-active .route-collapse { display: none; }
    body.route-mode .route-appearance { display: grid; grid-template-columns: minmax(120px,1fr) auto; gap: 8px; padding: 2px 8px; }
    body.route-mode .route-appearance[hidden] { display: none; }
    body.route-mode .route-size-actions { grid-column: 2; grid-row: 1; align-self: center; }
    body.route-mode .route-appearance .route-size-heading, body.route-mode .route-appearance p { display: none; }
    body.route-mode .route-appearance[data-error="true"] p { display: block; grid-column: 1 / -1; }
    body.route-mode .route-members select { height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
    body.route-mode .route-days button, body.route-mode .route-days button::before, body.route-mode .route-appearance-button::before, body.route-mode .route-stamp, body.route-mode .route-photo-frame img { transition: none; }
    body.route-mode .route-photo-popup { animation: none; translate: none; will-change: auto; }
}

/* The curve handle is separate from the photo-size editor and absent in browse mode. */
body.route-mode .route-curve-hit button {
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
    display: grid; place-items: center; background: transparent; touch-action: none; cursor: grab;
}
body.route-mode .route-curve-hit button:active { cursor: grabbing; }
body.route-mode .route-curve-hit span {
    width: 16px; height: 16px; border: 2px solid #09bde9; border-radius: 50%;
    background: white; box-shadow: 0 2px 5px #20445726;
}
body.route-mode .route-curve-hit button:focus-visible { outline: 2px solid #238aaf; outline-offset: -3px; }
body.route-mode .route-curve-tools { display:grid; grid-template-columns:1fr; gap:12px; }
body.route-mode .route-curve-tools[hidden] { display:none; }
body.route-mode .route-curve-tools p { grid-column:1 / -1; font-size:11px; color:#52778b; margin:4px 0 0; }
body.route-mode .route-curve-tools > div { display:flex; align-items:center; gap:10px; }
body.route-mode .route-curve-tools > .route-curve-heading { grid-column:1 / -1; justify-content:space-between; margin-bottom:2px; }
body.route-mode .route-curve-heading [data-manual-road-snap] { background:#cff5fc; color:#087b9c; }
body.route-mode .route-curve-tools button,
body.route-mode [data-curve-start] { min-height: 44px; border: 1px solid #ffffffb8; border-radius: 12px; background: #ffffffa8; font-size: 11px; color: #183e56; }
body.route-mode .route-curve-tools button { padding-inline:10px; border-radius:9px; }
body.route-mode .route-curve-tools [data-curve-undo], body.route-mode .route-curve-tools [data-curve-redo] { width:30px; padding-inline:5px; display:grid; place-items:center; background:transparent; border-color:transparent; }
body.route-mode .route-curve-tools [data-curve-reset] { margin-left:auto; }
body.route-mode .route-curve-tools [data-curve-done] { color:#087b9c; background:#cff5fc; }
body.route-mode [data-curve-start] { flex: 0 0 44px; width: 44px; display: grid; place-items: center; }
body.route-mode [data-curve-start] svg { width: 22px; height: 22px; }
body.route-mode .route-curve-active .route-order-row { display:none; }
body.route-mode .route-leave-confirm {
    position: fixed; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
    width: min(360px, calc(100vw - 32px)); box-sizing: border-box;
    max-height: calc(100dvh - 32px); overflow: auto; z-index: 10001; padding: 12px;
    border: 1px solid white; border-radius: 16px; background: #e7faf9f5;
    box-shadow: 0 4px 18px #20445724; backdrop-filter: blur(12px);
}
body.route-mode .route-leave-confirm p { margin: 0 0 8px; font-size: 12px; }
body.route-mode .route-leave-confirm button { min-height: 0; padding: 2px 10px; font-size: 11px; border-radius: 12px; background: #ffffffb8; }

/* Compact route controls: visible buttons follow text height; map editing handles stay 44px. */
body.route-mode .route-eyebrow { font-size: 7px; }
body.route-mode #trip-route-title { font-size: 18px; }
body.route-mode #trip-route-meta { font-size: 9px; }
body.route-mode .route-day-context { font-size: 10px; }
body.route-mode .route-info-actions button { font-size: 18px; }
body.route-mode .route-selected-name { font-size: 17px; }

body.route-mode .route-group-stamp strong { font-size: 10px; }
body.route-mode .route-date-bar { height: 36px; padding-inline: 0; }
body.route-mode .route-days { height: 40px; }
body.route-mode .route-days button, body.route-mode button.route-appearance-button { min-height: 40px; font-size: 9px; padding-inline: 1px; }
body.route-mode .route-days button::before, body.route-mode .route-appearance-button::before { inset: 6px 1px; }
body.route-mode .route-bubble-name { font-size: var(--route-name-size, 12px); line-height: 1.25; max-height: calc(var(--route-name-size, 12px) * 2.5 + 3px); }
body.route-mode .route-bottom button:not(.route-collapse):not(.route-size-handle) { min-height: 0; height: auto; padding-block: 2px; line-height: 1.3; }
body.route-mode .route-transport-editor select { min-height: 0; padding-block: 2px; line-height: 1.3; }
body.route-mode .route-station-nav button { padding-inline:4px; }
body.route-mode .route-detail span { font-size: 24px; }
body.route-mode .route-mode-scope button { min-height: 0; padding-block: 2px; }
body.route-mode .route-mode-options button { min-height: 0; padding: 4px 2px; gap: 4px; border-radius: 9px; }
body.route-mode .route-mode-options svg { width: 17px; height: 17px; }
body.route-mode .route-order-name { font-size: 9px; }
body.route-mode .route-order-number { width: 16px; height: 16px; flex-basis: 16px; font-size: 8px; }
body.route-mode .route-order-handle { max-width: 112px; transition: background 160ms, box-shadow 160ms; }
body.route-mode .route-order-dragging { opacity: .7; scale: 1.06; background: #dbf8ff; }
body.route-mode .route-order-target { outline: 1px dashed #09bde9; }
body.route-mode .route-order-target::after { content: ''; display: block; height: 2px; background: #09bde9; border-radius: 2px; }
body.route-mode .route-order-list li { animation: route-chip-arrive 180ms ease-out; }
@keyframes route-chip-arrive { from { opacity: .65; translate: 0 3px; } to { opacity: 1; translate: 0 0; } }
body.route-mode [data-curve-start] svg { width: 20px; height: 20px; }
body.route-mode .route-curve-hit span { display:grid; place-items:center; width:17px; height:17px; border:2px solid white; background:#09bde9; color:white; font-size:12px; }
body.route-mode .route-curve-hit [data-pen-kind="anchor"] span { border-radius:50%; }
body.route-mode .route-curve-hit button[aria-pressed="true"] span { background: #bceffa; border-color: #08789e; }
body.route-mode .route-curve-tools > .route-pen-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width: 500px) {
    body.route-mode #trip-route-meta { font-size: 6.5px; }
    body.route-mode .route-day-context { font-size: 8px; }
}
@media (min-width: 768px) {
    body.route-mode #trip-route-title { font-size: 22px; }
    body.route-mode #trip-route-meta { font-size: 10px; }
}
@media (max-height: 500px) {
    body.route-mode #trip-route-title { font-size: 15px; }
    body.route-mode .route-eyebrow { font-size: 6px; }
    body.route-mode .route-selected-name { font-size: 14px; }
    body.route-mode .route-days button, body.route-mode .route-appearance-button { min-height: 40px; }
    body.route-mode .route-appearance { display: block; }
    body.route-mode .route-appearance .route-size-heading { display: flex; }
    body.route-mode .route-appearance { max-height: 160px; overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) {
    body.route-mode .route-order-list li { animation: none; }
    body.route-mode .route-order-handle { transition: none; }
}
body.route-mode [data-curve-start][hidden] { display: none; }
body.route-mode .route-pen-actions button[aria-pressed="true"] { background: #bceefa; color: #07698c; }

/* Step 8: a small playback island above the card; motion only follows an action. */
body.route-mode .route-playback { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 100%; padding: 5px 7px; border-radius: 18px; text-align: center; }
body.route-mode .route-playback[hidden], body.route-mode .route-playback [hidden] { display: none !important; }
body.route-mode .route-playback-controls { display: flex; align-items: center; justify-content: center; gap: 5px; }
body.route-mode #trip-route-bottom .route-playback button { padding: 2px 7px; border-radius: 12px; background: #ffffff9c; white-space: nowrap; font-size: 10px; line-height: 1.3; }
body.route-mode #trip-route-bottom .route-playback [data-play-toggle] { font-weight: 750; color: #102c4b; background: #cff5ff; }
body.route-mode .route-playback [data-play-toggle]::before { content: ''; display: inline-block; width: 6px; height: 8px; margin-right: 5px; background: var(--route-blue); clip-path: polygon(0 0, 100% 50%, 0 100%); }
body.route-mode .route-playback[data-state="playing"] [data-play-toggle]::before { clip-path: none; background: none; border-inline: 2px solid var(--route-blue); box-sizing: border-box; }
body.route-mode .route-playback [data-play-note] { display: block; margin-top: 3px; font-size: 8px; line-height: 1.3; color: #53758a; }
body.route-mode .route-preference-status { display:block; max-width:100%; font-size:9px; line-height:1.3; color:#354d63; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.route-mode .route-playback [data-preference-retry] { align-self:center; }
body.route-mode .route-playback :is(button,select,input):focus-visible { outline:2px solid #208ab4; outline-offset:1px; }
body.route-mode .route-playback [data-play-note] { margin-top:0; }
body.route-mode .route-playback[data-needs-order="true"] { display: flex; align-items: center; gap: 6px; }
body.route-mode .route-playback[data-needs-order="true"] [data-play-note] { margin-top: 0; white-space: nowrap; }
body.route-mode .route-playback[data-state]:not([data-state="idle"]) { display:flex; flex-direction:column; gap:3px; width:min(330px,100%); }
body.route-mode .route-playback[data-state]:not([data-state="idle"])::before { inset:0; }
body.route-mode .route-recap-progress { display:grid; grid-template-columns:76px minmax(80px,1fr) minmax(50px,.6fr); align-items:center; gap:3px; order:-1; }
body.route-mode .route-recap-select { position:relative; min-width:0; isolation:isolate; }
body.route-mode .route-recap-select::before { content:''; position:absolute; height:23px; left:0; right:0; top:50%; transform:translateY(-50%); border-radius:10px; background:#ffffffad; z-index:-1; }
body.route-mode #trip-route-bottom .route-recap-progress select { width:100%; min-width:0; font-size:10px; line-height:1.3; height:23px; padding:3px 4px; border:0; border-radius:10px; color:#102c4b; background:transparent; }
body.route-mode #trip-route-bottom .route-recap-progress input { width:100%; min-width:0; height:23px; margin:0; padding:0; accent-color:#0798b5; }
@media (max-height:500px) and (min-width:600px) {
    body.route-mode .route-playback[data-state]:not([data-state="idle"]) { display:grid; width:min(620px,100%); grid-template-columns:minmax(220px,1fr) auto; }
    body.route-mode .route-recap-progress { grid-column:1; grid-row:1; }
    body.route-mode .route-playback-controls { grid-column:2; grid-row:1; }
    body.route-mode .route-playback [data-play-note], body.route-mode .route-playback [data-play-follow] { grid-column:1/-1; }
    body.route-mode .route-preference-status, body.route-mode .route-playback [data-preference-retry] { grid-column:1/-1; }
}
@media (pointer:coarse) {
    body.route-mode #trip-route-bottom .route-recap-progress select { height:44px; }
    body.route-mode #trip-route-bottom .route-recap-progress input { height:44px; }
}
body.route-mode .route-replay-cursor { display: grid; place-items: center; pointer-events: none; background: #ffffffed; border: 1px solid #fff; border-radius: 50%; box-shadow: 0 2px 6px #24536428; }
body.route-mode .route-replay-cursor svg { width: 16px; height: 16px; }
body.route-mode .route-replay-dot { width: 6px; height: 6px; background: #8b9fac; border-radius: 50%; }
body.route-mode .route-replay-stamp .route-stamp { width: 22px; height: 24px; font-size: 10px; }
body.route-mode .route-replay-stamp .route-stamp::after { width: 6px; height: 6px; left: calc(50% - 3px); bottom: -4px; }
body.route-mode .route-replay-symbol svg { width: 14px; height: 14px; }

body.route-mode .route-routing-attribution[hidden] { display:none; }
body.route-mode .route-basemap-status { position:absolute; top:54px; right:12px; z-index:1000; padding:3px 8px; border:1px solid #ffffffb8; border-radius:8px; background:#e6f9f8ed; color:#31576b; font-size:10px; line-height:1.4; box-shadow:0 2px 6px #244b6018; }
body.route-mode .route-basemap-status[hidden] { display:none; }
body.route-mode .route-basemap-status:disabled { opacity:1; cursor:default; }
body.route-mode .route-segment-bar > button:not([data-curve-start]) { font-size:11px; line-height:1.3; padding:2px 8px; border-radius:10px; background:#ffffffa8; color:#183e56; }
body.route-mode .route-routing-attribution { display:block; text-align:right; font-size:8px; padding:2px 6px; color:#43677b; }
body.route-mode .route-routing-attribution a { text-decoration:underline; }
body.route-mode .route-order-toolbar .route-segment-source { white-space:normal; }

/* A quiet settings sheet; each slider remains a generous transparent touch target. */
body.route-mode .route-appearance { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 18px; }
body.route-mode .route-appearance-title { grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; font-size:13px; }
body.route-mode .route-appearance-title small { font-size:9px; font-weight:400; color:#607c91; }
body.route-mode .route-size-field { padding:8px 0; border-top:1px solid #74a6b325; }
body.route-mode .route-size-heading { align-items:center; font-size:11px; }
body.route-mode .route-size-heading label { white-space:nowrap; }
body.route-mode .route-size-heading output { flex:none; white-space:nowrap; font-size:10px; font-variant-numeric:tabular-nums; background:#ffffff85; padding:2px 7px; border-radius:6px; }
body.route-mode .route-appearance input::-webkit-slider-runnable-track { height:3px; border-radius:3px; background:linear-gradient(to right,#0cb7d5 var(--range-fill),#99b8c34d var(--range-fill)); }
body.route-mode .route-appearance input::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:12px; height:12px; margin-top:-4.5px; border:2px solid white; border-radius:50%; background:#0cb7d5; box-shadow:0 1px 4px #24536430; }
body.route-mode .route-appearance input::-moz-range-track { height:3px; border-radius:3px; background:#99b8c34d; }
body.route-mode .route-appearance input::-moz-range-progress { height:3px; background:#0cb7d5; }
body.route-mode .route-appearance input::-moz-range-thumb { width:9px; height:9px; border:2px solid white; border-radius:50%; background:#0cb7d5; }
body.route-mode .route-appearance input:focus-visible { outline:1px solid #208ab4; outline-offset:1px; border-radius:5px; }
body.route-mode .route-appearance .route-size-actions { grid-column:1 / -1; grid-row:auto; margin-top:6px; gap:12px; }
body.route-mode .route-appearance p { grid-column:1 / -1; margin-top:4px; font-size:9px; }
body.route-mode .route-curve-heading p { margin:0; font-size:10px; }
body.route-mode .route-curve-tools > .route-history-actions { display:grid; grid-template-columns:30px 30px 1fr auto; gap:12px; }
body.route-mode .route-curve-tools [data-curve-reset] { justify-self:end; }
body.route-mode .route-station-nav .route-edit-open { background:#d7f5fa; color:#087b9c; border-radius:7px; }
body.route-mode .route-card-meta p { font-weight:500; }
body.route-mode .route-card-meta .route-order-note { font-size:9px; letter-spacing:.08em; }
body.route-mode .route-bottom[data-expanded="true"] .route-order-note { display:none; }
body.route-mode .route-group-stamp { animation:none; }
@keyframes route-bubble-float { 0%,100% { translate:0 0; } 50% { translate:0 -2px; } }
/* Hide the old preview connection UI without restarting its in-memory service/key. */
body.route-mode #route-service-open, body.route-mode #route-service-setup { display:none !important; }
/* One focused workspace at a time: points, then the selected travel leg. */
body.route-mode .route-work-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0 0 14px; }
body.route-mode .route-work-actions[hidden], body.route-mode .route-access-panel[hidden] { display:none; }
body.route-mode .route-work-actions button { display:flex; justify-content:center; align-items:center; gap:5px; width:auto; border:0; border-radius:9px; font-size:10px; color:#183e56; background:#ffffffa8; }
body.route-mode .route-work-actions [data-curve-start] { width:auto; }
body.route-mode .route-work-actions [data-curve-start] svg { width:15px; height:15px; }
body.route-mode .route-segment-bar { padding:10px 0; margin-bottom:10px; border-bottom:0; }
body.route-mode .route-access-panel { display:grid; gap:12px; margin:0; padding:0; border:0; background:none; }
body.route-mode .route-access-heading { display:flex; align-items:center; justify-content:space-between; font-size:11px; }
body.route-mode .route-access-heading button { font-size:10px; color:#087b9c; background:#ffffffa8; padding-inline:10px; border-radius:8px; }
body.route-mode .route-access-points { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
body.route-mode .route-access-points button { display:flex; align-items:center; gap:8px; text-align:left; font-size:11px; padding:2px 8px; border:1px solid #ffffffb8; border-radius:10px; background:#ffffff85; }
body.route-mode .route-access-points strong { display:block; font-weight:600; }
body.route-mode .route-access-points small { display:block; font-size:9px; opacity:.8; line-height:1.3; }
body.route-mode .route-access-number { display:grid; place-items:center; flex:none; width:20px; height:20px; border-radius:50%; background:#d1f2f5; color:#087b9c; font-size:10px; }
body.route-mode .route-access-legs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
body.route-mode .route-access-legs button { position:relative; display:grid; justify-items:center; align-content:center; gap:3px; min-width:0; font-size:10px; padding:2px; border-radius:10px; background:#ffffff85; }
body.route-mode .route-access-legs button:not(:last-child)::after { content:''; position:absolute; right:-10px; top:50%; width:4px; height:4px; border-top:1px solid #4c8999; border-right:1px solid #4c8999; transform:translateY(-50%) rotate(45deg); }
body.route-mode .route-access-legs small { font-size:8px; opacity:.85; }
body.route-mode .route-access-legs svg { width:15px; height:15px; }
body.route-mode .route-access-tools { display:grid; grid-template-columns:24px 24px auto 1fr auto; gap:10px; align-items:center; }
body.route-mode .route-access-tools button { font-size:10px; padding-inline:7px; border-radius:8px; background:#ffffff85; color:#183e56; }
body.route-mode .route-access-tools [data-access-history] { display:grid; place-items:center; background:none; padding-inline:0; }
body.route-mode .route-access-tools [data-access-draw] { justify-self:end; }
body.route-mode .route-access-tools [data-access-snap] { background:#d1f2f5; color:#087b9c; }
body.route-mode .route-curve-tools { padding-top:0; gap:12px; }
body.route-mode .route-curve-tools > .route-history-actions { grid-template-columns:24px 24px 1fr; gap:12px; }
body.route-mode .route-curve-heading [data-curve-done] { background:#ffffffa8; font-size:10px; }
body.route-mode .route-curve-heading p { margin-right:auto; }
body.route-mode .route-access-panel button[aria-pressed="true"] { background:#08b9d8; color:white; }
body.route-mode .route-access-panel p { font-size:9px; color:#52778b; margin:0; }
body.route-mode .route-access-hit { display:grid; place-items:center; cursor:grab; }
body.route-mode .route-access-hit span { display:grid; place-items:center; width:25px; height:25px; border-radius:8px; border:2px solid white; background:#244b60; color:white; font-size:11px; box-shadow:0 2px 8px #183e5635; }
body.route-mode .route-access-hit:focus-visible { outline:2px solid #208ab4; border-radius:12px; }
body.route-mode .route-access-selecting :is(.route-mode-options,.route-segment-bar,.route-order-row,.route-edit-actions,.route-access-legs) { display:none; }
body.route-mode .route-access-selecting .route-access-panel { margin-bottom:0; }
body.route-mode .route-access-active .route-order-row { display:none; }
body.route-mode .route-access-selecting .route-access-source { display:none; }
body.route-mode .route-access-selecting .route-access-tools { display:none; }
body.route-mode .route-curve-active .route-mode-options, body.route-mode .route-curve-active .route-mode-scope { display:none; }
body.route-mode .route-access-active .route-mode-scope { display:none; }
@media (max-width:600px) {
    body.route-mode .route-mode-options { grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
    body.route-mode .route-mode-options button { display:flex; justify-content:center; padding:5px 2px; gap:5px; }
    body.route-mode .route-mode-options small { font-size:8px; }
    body.route-mode .route-mode-options svg { width:15px; height:15px; flex:none; }
    body.route-mode .route-thumb { width:64px; flex-basis:64px; }
    body.route-mode .route-selected-name { font-size:16px; }
    body.route-mode .route-detail { flex-basis:24px; width:24px; }
}
@media (max-height:500px) {
    body.route-mode .route-appearance { display:block; max-height:180px; overflow-y:auto; }
    body.route-mode .route-appearance .route-size-heading { display:flex; }
    body.route-mode .route-size-field { padding:4px 0; }
}
@media (prefers-reduced-motion:reduce) {
    body.route-mode .route-photo-popup { animation:none; translate:none; will-change:auto; }
    body.route-mode .route-group-stamp { animation:none; }
}

/* Accessibility finish: keep the approved compact skins, not tall painted buttons. */
body.route-mode .route-eyebrow { color:#154581; }
body.route-mode .route-status, body.route-mode .route-photo-notice,
body.route-mode .route-photo-placeholder,
body.route-mode .route-segment-source, body.route-mode .route-edit-heading small,
body.route-mode .route-appearance-title small { color:var(--route-muted); }
body.route-mode .route-days button[aria-pressed="true"],
body.route-mode button.route-appearance-button[aria-expanded="true"],
body.route-mode .route-mode-options button[aria-pressed="true"],
body.route-mode .route-edit-actions [data-edit-save] { color:var(--route-ink); }
body.route-mode .route-mode-options button[aria-pressed="true"] svg { color:white; }
body.route-mode .route-leave-confirm button:focus-visible { outline:2px solid #208ab4; outline-offset:2px; }
body.route-mode .route-stamp { color:var(--stamp-ink,#102c4b) !important; }
body.route-mode .route-selected-number,
body.route-mode .route-visit-list button[aria-pressed="true"] .route-visit-number { color:var(--route-ink); }
body.route-mode .route-card-meta p, body.route-mode .route-appearance .route-size-heading output,
body.route-mode .route-visit-number, body.route-mode .route-order-note { color:var(--route-muted); }
body.route-mode .route-mode-options button:not([aria-pressed="true"]),
body.route-mode .route-mode-scope button:not([aria-pressed="true"]),
body.route-mode .route-access-hint, body.route-mode .route-access-source,
body.route-mode .route-access-points small, body.route-mode .route-appearance p,
body.route-mode .route-playback [data-play-note], body.route-mode .route-routing-attribution { color:var(--route-muted); }
body.route-mode .route-size-actions [data-size-action="apply"] { color:var(--route-ink); }
@media (max-width:500px) {
    body.route-mode #trip-route-meta { font-size:8px; }
    body.route-mode .route-day-context { font-size:9px; }
}

@media (pointer:coarse) {
    body.route-mode .route-appearance input[type="range"] { min-height:44px; height:44px; }
    body.route-mode #trip-route-bottom button:not(.route-collapse):not(.route-size-handle),
    body.route-mode .route-leave-confirm button {
        position:relative; isolation:isolate; min-height:44px; min-width:44px;
        height:auto; padding-block:0; background:transparent !important;
    }
    body.route-mode #trip-route-bottom button:not(.route-collapse):not(.route-size-handle)::after,
    body.route-mode .route-leave-confirm button::after {
        content:''; position:absolute; z-index:-1; pointer-events:none;
        inset:calc((100% - var(--route-touch-skin, 22px)) / 2) 0;
        border-radius:inherit; background:var(--route-touch-fill, #ffffffa8);
    }
    body.route-mode .route-detail { flex-basis:44px; width:44px; --route-touch-fill:transparent; }
    body.route-mode .route-station-nav { grid-template-columns:44px minmax(0,1fr) 44px 44px; }
    body.route-mode .route-station-nav[data-edit-available="false"] { grid-template-columns:44px minmax(0,1fr) 44px; }
    body.route-mode .route-picker-toggle { --route-touch-fill:transparent; }
    body.route-mode .route-edit-open { --route-touch-fill:#d7f5fa; }
    body.route-mode .route-mode-options button { --route-touch-skin:22px; }
    body.route-mode .route-mode-options button[aria-pressed="true"],
    body.route-mode [data-edit-save] { --route-touch-fill:#09bde9; }
    body.route-mode .route-mode-scope { background:none; padding:0; }
    body.route-mode .route-mode-scope button { --route-touch-fill:#ffffff50; }
    body.route-mode .route-mode-scope button[aria-pressed="true"] { --route-touch-fill:#ffffffdb; }
    body.route-mode .route-order-toolbar button,
    body.route-mode [data-curve-undo], body.route-mode [data-curve-redo],
    body.route-mode [data-edit-cancel] { --route-touch-fill:transparent; }
    body.route-mode .route-curve-tools > .route-history-actions { grid-template-columns:44px 44px 1fr auto; }
    body.route-mode .route-select-hit { display:flex; flex:1; min-width:0; min-height:44px; align-items:center; }
    body.route-mode .route-transport-editor { max-height:min(560px,calc(100dvh - 210px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); }
    body.route-mode .route-edit-heading { margin-bottom:0; }
    body.route-mode .route-segment-bar { padding-block:0; }
    body.route-mode .route-date-bar { height:44px; }
    body.route-mode .route-days { height:44px; }
    body.route-mode .route-days button, body.route-mode button.route-appearance-button { min-height:44px; }
    body.route-mode .route-days button::before, body.route-mode .route-appearance-button::before { inset-block:8px; }
    body.route-mode .leaflet-control-zoom { height:44px; }
    body.route-mode .leaflet-control-zoom a { height:44px !important; min-height:44px; line-height:44px !important; }
    body.route-mode .route-playback {
        isolation:isolate; bottom:calc(100% + 16px); background:transparent;
        border-color:transparent !important; box-shadow:none !important; backdrop-filter:none;
    }
    body.route-mode .route-playback::before {
        content:''; position:absolute; inset:calc((100% - 28px) / 2) 0; z-index:-1;
        border:1px solid white; border-radius:18px; background:linear-gradient(115deg,#ddfaf7ed,#b9edffed,#d5f7e6ed);
    }
    body.route-mode .route-playback [data-play-toggle] { --route-touch-fill:#cff5ff; --route-touch-skin:18px; }
    body.route-mode .route-playback [data-play-speed] { --route-touch-skin:18px; }
    body.route-mode .route-bottom .route-access-points button { --route-touch-skin:32px; }
    body.route-mode .route-access-tools { grid-template-columns:44px 44px auto 1fr auto; }
    body.route-mode .route-access-tools [data-access-history] { --route-touch-fill:transparent; }
    body.route-mode .route-access-legs button { --route-touch-skin:44px; }
    body.route-mode .route-access-legs button::after { transform:none; width:auto; height:auto; border:0; }
    body.route-mode .route-access-legs button:not(:last-child)::before {
        content:''; position:absolute; right:-10px; top:50%; width:4px; height:4px;
        border-top:1px solid #4c8999; border-right:1px solid #4c8999; transform:translateY(-50%) rotate(45deg);
    }
    @media (max-width:360px) {
        body.route-mode .route-access-tools { grid-template-columns:repeat(3,minmax(44px,1fr)); }
        body.route-mode .route-access-tools [data-access-draw] { grid-column:1 / 3; justify-self:stretch; }
    }
}

/* Remove stacked mobile gutters, without overlapping the existing 44px touch targets. */
@media (pointer:coarse) and (max-width:767px) {
    body.route-mode #map-back-control, body.route-mode .leaflet-top { top:calc(env(safe-area-inset-top) + 4px); }
    body.route-mode #trip-route-banner { top:calc(env(safe-area-inset-top) + 52px); }
    body.route-mode .route-date-bar { margin-top:-3px; }
    body.route-mode .route-info { padding-block:4px; }
}
@media (pointer:coarse) and (max-width:767px), (pointer:coarse) and (max-height:500px) {
    body.route-mode .route-bottom.route-edit-active { padding:2px 5px; bottom:calc(env(safe-area-inset-bottom) + 4px); }
    body.route-mode .route-transport-editor { padding:0 10px; }
    body.route-mode .route-mode-options { row-gap:0; padding-bottom:0; }
    body.route-mode .route-segment-bar { margin-bottom:0; }
    body.route-mode .route-work-actions { margin-bottom:0; }
    body.route-mode .route-order-list { padding-bottom:0; }
    body.route-mode .route-edit-message { margin-top:0; padding:4px 9px; }
    body.route-mode .route-edit-actions { margin-top:0; }
    body.route-mode .route-access-panel, body.route-mode .route-curve-tools { gap:2px; }
}

/* Equal date slots, with compact paging icons and inset visual surfaces. */
body.route-mode .route-date-bar { height:44px; padding:0 4px; gap:3px; }
body.route-mode .route-days { height:44px; gap:3px; touch-action:pan-x pinch-zoom; scroll-snap-type:x mandatory; }
body.route-mode .route-days button { width:calc((100% - (var(--route-day-slots,8) - 1)*3px)/var(--route-day-slots,8)); min-width:44px; min-height:44px; padding:0; font-size:11px; scroll-snap-align:start; }
/* Compact visible pills sit inside the unchanged, non-overlapping touch targets. */
body.route-mode .route-days button::before { display:none; }
body.route-mode .route-days button span { box-sizing:border-box; width:100%; padding:3px 4px; line-height:14px; border-radius:8px; background:#ffffff75; white-space:nowrap; }
body.route-mode .route-date-bar::before { content:''; position:absolute; inset:7px -1px; border-radius:12px; background:linear-gradient(115deg,#ddfaf7d9,#b9edffd4 65%,#d5f7e6d8); border:1px solid #fffffff2; pointer-events:none; }
body.route-mode .route-date-bar.route-glass { position:relative; background:transparent; border-color:transparent !important; box-shadow:none !important; backdrop-filter:none; -webkit-backdrop-filter:none; }
body.route-mode .route-date-bar > * { position:relative; }
body.route-mode .route-date-page { display:grid; place-items:center; flex:0 0 10px; width:10px; min-width:10px; height:44px; padding:0 1px; font-size:16px; }
body.route-mode .route-date-page span { display:block; width:8px; line-height:1; text-align:center; }
body.route-mode .route-days button[aria-pressed="true"] span { background:linear-gradient(145deg,#42d4f5,var(--route-blue)); outline:1px solid white; outline-offset:-1px; }
body.route-mode .route-more-wrap { position:relative; flex:0 0 44px; height:44px; }
body.route-mode .route-more-toggle { display:grid; place-items:center; width:44px; height:44px; padding:0; background:transparent !important; border-radius:10px; }
body.route-mode .route-more-toggle svg { width:6px; height:18px; }
body.route-mode .route-more-toggle[aria-expanded="true"] { color:#08789e; }
body.route-mode .route-more-menu { position:absolute; top:calc(100% + 4px); right:0; display:flex; gap:2px; width:max-content; padding:0 4px; z-index:10002; border-radius:12px; transform-origin:top right; animation:route-more-reveal 180ms cubic-bezier(.2,.7,.2,1) both; }
body.route-mode .route-more-menu.route-glass { background:transparent; border-color:transparent !important; box-shadow:none !important; backdrop-filter:none; -webkit-backdrop-filter:none; }
body.route-mode .route-more-menu::before { content:''; position:absolute; inset:7px -1px; border:1px solid #fffffff2; border-radius:inherit; background:linear-gradient(115deg,#e7faf7f5,#c9effff5 65%,#ddf8edf5); pointer-events:none; }
body.route-mode .route-more-menu[hidden] { display:none !important; }
body.route-mode .route-more-menu button { position:relative; display:grid; place-items:center; flex:none; width:auto; min-width:44px; min-height:44px; padding:0; color:var(--route-ink); font-size:11px; font-weight:400; border-radius:8px; background:transparent !important; }
body.route-mode .route-more-menu button::before { display:none; }
body.route-mode .route-more-menu button span { display:inline-flex; align-items:center; gap:4px; padding:4px 8px; line-height:14px; font-weight:400; border-radius:inherit; background:#ffffff80; white-space:nowrap; }

/* Route overview: compact skins retain independent 44px marker hit targets. */
body.route-mode .route-overview-group { display:grid; place-items:center; }
body.route-mode .route-overview-group .route-group-stamp { width:28px; height:28px; border-radius:50%; }
body.route-mode .route-overview-group .route-group-stamp strong { font-size:11px; }
body.route-mode .route-overview-pin .route-stamp { width:22px; height:25px; font-size:10px; }
body.route-mode .route-overview-pin .route-stop-stamp { width:22px; height:22px; border-radius:7px; }
body.route-mode .route-overview-pin .route-stop-stamp svg { width:14px; height:14px; }
body.route-mode .route-endpoint-hit { display:grid; place-items:center; }
body.route-mode .route-endpoint-hit span { display:grid; place-items:center; width:20px; height:20px; border-radius:6px; border:1px solid white; background:#163f54; color:white; font-size:10px; }
body.route-mode .route-day-map-label span { display:inline-block; padding:1px 3px; border:1px solid white; border-radius:5px; background:#effcfbe8; color:#163f54; font-size:8px; line-height:12px; white-space:nowrap; }
body.route-mode .route-context-pin { display:grid; place-items:center; border-radius:50%; background:#effcfb80; color:#779aa8; opacity:.4; font-size:15px; }
body.route-mode .route-context-pin svg { width:12px; height:12px; }
body.route-mode .route-overview-legend { margin:2px 0 0; color:#354d63; font-size:8px; line-height:1.3; }
body.route-mode .route-basemap-status { min-height:44px; isolation:isolate; border:0; background:transparent; box-shadow:none; padding:0 8px; }
body.route-mode .route-basemap-status::before { content:''; position:absolute; inset:calc((100% - 22px) / 2) 0; z-index:-1; pointer-events:none; border:1px solid #ffffffb8; border-radius:8px; background:#e6f9f8ed; }
body.route-mode .route-more-menu button svg { flex:none; width:14px; height:14px; }
body.route-mode .route-more-menu button[aria-pressed="true"] span { background:#09bde9; }
body.route-mode .route-more-menu button:focus-visible, body.route-mode .route-more-toggle:focus-visible { outline:2px solid #238aaf; outline-offset:-2px; }
@keyframes route-more-reveal { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { body.route-mode .route-more-menu { animation:none; } }