/* App appearance is independent of the renderer. No canvas filters or resizing. */
:root{color-scheme:light;--ui-page:#f4f7f9;--ui-surface:#fff;--ui-raised:#f4f7fb;--ui-text:#192339;--ui-muted:#607694;--ui-line:#dbe4ef;--ui-accent:#3b73a5;--ui-selected:#eaf1f8}
:root[data-app-theme=dark]{color-scheme:dark;--ui-page:#0b1522;--ui-surface:#111e2e;--ui-raised:#1b2c40;--ui-text:#e6edf5;--ui-muted:#a5b6cb;--ui-line:#304258;--ui-accent:#8cbfea;--ui-selected:#253f59;--ink:var(--ui-text);--muted:var(--ui-muted);--border:var(--ui-line);--brand:#8cbfea;--brand-dark:#c3dff5;--brand-soft:#253f59;--brand-subtle:#1b2c40;--brand-border:#466781;--shadow:0 8px 35px #0003}
.appearance-settings{padding:18px 0;border-bottom:1px solid var(--ui-line);margin:8px 0 16px}
.appearance-settings h3{font-size:16px;margin:0 0 14px}
.appearance-settings>label:first-of-type{display:block;font-size:13px;font-weight:600;margin-bottom:8px}
.appearance-settings select{width:100%;min-height:46px;border:1px solid var(--ui-line);border-radius:9px;padding:10px 12px;background:var(--ui-raised);color:var(--ui-text)}
.appearance-settings p{font-size:12px;line-height:1.6;color:var(--ui-muted);margin:10px 0 16px}
.appearance-follow{display:flex;align-items:center;gap:10px;min-height:44px;font-size:13px;cursor:pointer}
.appearance-follow input{width:20px;height:20px;accent-color:#3b73a5;flex:none}
/* Full mobile settings page, with the same bottom navigation as other views. */
@media(max-width:700px){
 body[data-menu-open=true]{overflow:hidden}
 #mapThemeDialog.app-settings-menu{position:fixed;inset:0 0 var(--bottom-nav-height);z-index:1050;margin:0;width:100%;height:auto;max-width:none;max-height:none;padding:24px max(20px,calc((100vw - 600px)/2));border:0;border-radius:0;box-shadow:none;background:var(--ui-surface);color:var(--ui-text);overflow-y:auto;overscroll-behavior:contain}
 #mapThemeDialog.app-settings-menu .map-theme-heading{top:-24px;margin:0;padding:12px 0 16px;background:var(--ui-surface)}
 #mapThemeDialog.app-settings-menu .map-theme-heading h2{font-size:27px;margin:0}
 #mapThemeTitle:focus{outline:none}
 #primaryNav:has(#navMenu[aria-expanded=true]) .nav.active{background:none;color:var(--ui-muted)}
 #primaryNav #navMenu[aria-expanded=true]{background:var(--ui-selected);color:var(--ui-accent)}
}
html[data-app-theme=dark] body{background:var(--ui-page);color:var(--ui-text)}
html[data-app-theme=dark] body[data-view=planner][data-stage=form] main{background:linear-gradient(var(--ui-raised),var(--ui-page) 700px)}
html[data-app-theme=dark] :is(.topbar,.panel,.icon-btn,.map-controls,.map-badge,.map-legend,.update-label,.road-layer-status,.alert-map-caption,.home-links>button,.journey-card,.journey-suggestions,.journey-overview-back,.planner-view-tools,#journeySheet,.journey-sheet-heading,.preview-status,.preview-controls,.guidance-toolbar,.guidance-options,.route-guidance [data-playback],dialog,#mapThemeDialog,.map-theme-option,#mobileToggle,#primaryNav,.map-theme-heading){background:var(--ui-surface);color:var(--ui-text);border-color:var(--ui-line)}
html[data-app-theme=dark] #mapThemeDialog.app-settings-menu .map-theme-heading{background:var(--ui-surface)}
html[data-app-theme=dark] :is(.search-wrap,.journey-endpoints,.journey-time-mode,.journey-walk,.journey-change,.disruption-filters,.feed-info,.road-closure-direction,.traffic-length-summary,.guidance-toolbar>button,.guidance-toolbar>[data-guide-menu]>summary,.guidance-options-heading button,.route-guidance [data-exit],.preview-buttons button){background:var(--ui-raised);color:var(--ui-text);border-color:var(--ui-line)}
html[data-app-theme=dark] :is(.journey-time input,.journey-option-row select,.operator-select select,.city-select select,.disruption-filters input,.disruption-filters select,#swapJourney,.mode){background:var(--ui-surface);color:var(--ui-text);border-color:var(--ui-line)}
html[data-app-theme=dark] :is(input,select,textarea){color:var(--ui-text);accent-color:var(--ui-accent)}
html[data-app-theme=dark] :is(input,textarea)::placeholder{color:var(--ui-muted);opacity:1}
html[data-app-theme=dark] :is(.journey-field input,.journey-walk-instructions button,.disruption-heading h1,.disruption-card h2,.disruption-empty h2,.guidance-options-heading,.road-closure-popup,.map-3d-container .maplibregl-popup-content){color:var(--ui-text)}
html[data-app-theme=dark] :is(.mode.active,.journey-card.selected,.journey-time-mode button.active,.map-theme-option[aria-pressed=true],#toggle3d[aria-pressed=true],.journey-mode-options label,.nav-count,.disruption-line,.route-guidance .preview-progress button[aria-pressed=true]){background:var(--ui-selected);color:var(--ui-text);border-color:#52799b}
html[data-app-theme=dark] :is(.primary-btn,.journey-preview-button,.journey-point,.mobile-open,.journey-suggestions .suggestion-current,.planner-entry-icon){background:#356f9e;color:#fff}
html[data-app-theme=dark] :is(.primary-btn:hover,.journey-suggestions .suggestion-current:hover){background:#427eae;color:#fff}
html[data-app-theme=dark] :is(.eyebrow,.section-label,.stops-toggle,.operator-select,.intro,.journey-field label,.journey-time>label,.journey-option-row,.journey-time-mode button,.journey-via-summary,.row-content small,.row-end,.stats-strip span,.panel-footer,.panel-footer b,.panel-footer button,.disruption-heading>p,.disruption-filters label,.disruption-note,.disruption-meta,.disruption-period,.disruption-operators,.disruption-more,.disruption-empty,.disruption-unlocated,.disruption-lines,.disruption-toolbar>span,.alert-map-caption span,.road-layer-settings small,.road-layer-settings p,.road-layer-key,.traffic-layer-key,.road-closure-popup small,.road-closure-note,.map-theme-option>small,#mapThemeDialog>p,.app-menu-toggle small,.app-menu-about small,.preview-status>small,.preview-controls>small,.guidance-heading small,.route-guidance [data-guide-note],.journey-fare small){color:var(--ui-muted)}
html[data-app-theme=dark] :is(.map-controls button,.map-badge,.map-legend,.update-label,.road-layer-status,.journey-traffic-toggle,.journey-traffic-inline,.journey-pagination button,.disruption-toolbar button,.disruption-reset,.disruption-more summary,.disruption-more a,.road-closure-popup a,.preview-progress button,.route-guidance .preview-progress button,.route-guidance [data-correction],.app-menu-about,.map-theme-heading>div>span,.map-theme-option>span>b){color:var(--ui-accent)}
html[data-app-theme=dark] :is(.journey-traffic-toggle,.journey-traffic-inline){background:var(--ui-raised)}
html[data-app-theme=dark] :is(.search-result,.vehicle-row,.journey-card,.journey-time-mode,.journey-time input,.journey-suggestions,.journey-overview-back,.journey-endpoints,.journey-field,.journey-fare,.disruption-toolbar,.disruption-card,.disruption-filters,.road-layer-settings,.traffic-layer-settings,.app-menu-options,.app-menu-about,.road-closure-note,.traffic-length-summary,.road-closure-direction){border-color:var(--ui-line)}
html[data-app-theme=dark] #mapThemeDialog.app-settings-menu :is(.app-menu-about,.app-menu-options){border-color:var(--ui-line);color:var(--ui-text)}
html[data-app-theme=dark] :is(.map-message,.journey-notice,.journey-coverage-note,.alert-card,.disruption-type,.disruption-error,.road-closure-applies,.bridge-road-notice,.route-guidance [data-trip-warning],.route-guidance [data-gps-alert],.route-guidance.guidance-gps-test [data-guide-source],.motion-state.estimated){background:#3b301e;color:#f3cf8f;border-color:#79613b}
html[data-app-theme=dark] :is(.motion-state,.journey-arrival,.journey-guidance-button,.route-guidance [data-guide-source]){background:#193b36;color:#99d9c5;border-color:#436f62}
html[data-app-theme=dark] :is(.guidance-signal,.route-guidance [data-gps]){color:#99d9c5}
html[data-app-theme=dark] :is(.guidance-warning .guidance-signal,.guidance-gps-test .guidance-signal,.route-guidance.guidance-warning [data-gps],.route-guidance.guidance-gps-test [data-gps]){color:#f3cf8f}
html[data-app-theme=dark] :is(.guidance-simulation .guidance-signal,.route-guidance.guidance-simulation [data-guide-source]){color:var(--ui-accent)}
html[data-app-theme=dark] .route-guidance.guidance-simulation [data-guide-source]{background:var(--ui-selected)}
html[data-app-theme=dark] .guidance-toolbar>button[data-guide-stop]{background:#462b32;color:#f3b3bc}
html[data-app-theme=dark] .route-guidance .guidance-dock{background:transparent;border:0}
html[data-app-theme=dark] :is(.map-controls button:hover,.icon-btn:hover,.search-result:hover,.journey-suggestions button:hover,.journey-suggestions button.focused){background:var(--ui-selected);color:var(--ui-text)}
html[data-app-theme=dark] :is(.leaflet-popup-content-wrapper,.leaflet-popup-tip,.maplibregl-popup-content){background:var(--ui-surface);color:var(--ui-text)}
html[data-app-theme=dark] .maplibregl-popup-anchor-bottom .maplibregl-popup-tip{border-top-color:var(--ui-surface)}
html[data-app-theme=dark] .vehicle-tooltip{background:var(--ui-surface)!important;color:var(--ui-text)!important;border-color:var(--ui-line)}
html[data-app-theme=dark] :is(.leaflet-control-attribution,.maplibregl-ctrl-attrib){background:var(--ui-surface)!important;color:var(--ui-muted)}
html[data-app-theme=dark] :is(.leaflet-control-attribution a,.maplibregl-ctrl-attrib a){color:var(--ui-muted)}
html[data-app-theme=dark] .brand-logo{filter:brightness(0) invert(.9)}
html[data-app-theme=dark] .carrier-viewport{background:#e3e9ef;border-radius:12px}
html[data-app-theme=dark] dialog::backdrop{background:#030b15b3}
html[data-app-theme=dark] :is(button,a,input,select,summary):focus-visible{outline-color:#94c7f5}
@media(max-width:700px){
 html[data-app-theme=dark] #primaryNav .nav{color:var(--ui-muted)}
 html[data-app-theme=dark] #primaryNav .nav.active,html[data-app-theme=dark] #primaryNav #navMenu[aria-expanded=true]{background:var(--ui-selected);color:var(--ui-accent)}
 html[data-app-theme=dark] #primaryNav:has(#navMenu[aria-expanded=true]) .nav.active{background:none;color:var(--ui-muted)}
}
/* Older planner rules have view-specific colours; keep their text readable. */
html[data-app-theme=dark] #panel :is(.planner-heading h2,.journey-field input,.journey-field input.confirmed,.journey-card-time>strong,.journey-detail-top,.journey-stop time,.journey-change strong){color:var(--ui-text)}
html[data-app-theme=dark] #panel :is(.planner-heading p,.journey-options,.journey-coverage,.journey-field label,.journey-time label,.journey-result-subtitle,.journey-card-meta,.journey-leg-head small,.journey-stop small,.journey-walk p,.journey-walk small,.journey-detail-summary p,.journey-more>p,.detail-back,.detail-kicker,.detail-subtitle,.detail-stats span,.detail-section>small,.detail-updated){color:var(--ui-muted)}
html[data-app-theme=dark] #panel input::placeholder{color:var(--ui-muted)}
html[data-app-theme=dark] :is(.home-welcome>p,.home-benefits span,.home-links>button>span:not(.home-link-icon),.preview-status p,.preview-status small,.preview-progress,dialog p){color:var(--ui-muted)}
html[data-app-theme=dark] #panel .journey-suggestions .suggestion-current{color:white}
html[data-app-theme=dark] #panel .journey-suggestions .suggestion-current small{color:#dceaf5}
html[data-app-theme=dark] .map-badge strong{color:var(--ui-text)}
html[data-app-theme=dark] .road-closure-eyebrow{color:#f3a3aa}
html[data-app-theme=dark] .traffic-event-popup .road-closure-eyebrow{color:var(--ui-accent)}

/* Native checkboxes retain their behaviour, with a sliding switch appearance. */
#mapThemeDialog label:has(>input[type=checkbox]){display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;cursor:pointer}
#mapThemeDialog label:has(>input[type=checkbox])>span{flex:1;min-width:0}
#mapThemeDialog input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;display:block;order:2;flex:0 0 44px;width:44px;height:26px;min-width:44px;margin:9px 0;padding:3px;border:0;border-radius:20px;background:#a5b4c6;cursor:pointer;transition:background-color .18s ease;box-shadow:inset 0 0 0 1px #243a651a}
#mapThemeDialog input[type=checkbox]::before{content:'';display:block;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #15283f40;transform:translateX(0);transition:transform .18s ease}
#mapThemeDialog input[type=checkbox]:checked{background:#3b73a5}
#mapThemeDialog input[type=checkbox]:checked::before{transform:translateX(18px)}
#mapThemeDialog input[type=checkbox]:focus-visible{outline:3px solid var(--ui-accent);outline-offset:3px}
#mapThemeDialog input[type=checkbox]:disabled{opacity:.5;cursor:default}
#mapThemeDialog .traffic-layer-settings>p{margin-left:0}
html[data-app-theme=dark] #mapThemeDialog input[type=checkbox]{background:#52657d}
html[data-app-theme=dark] #mapThemeDialog input[type=checkbox]:checked{background:#4c90c3}
@media(prefers-reduced-motion:reduce){#mapThemeDialog input[type=checkbox],#mapThemeDialog input[type=checkbox]::before{transition:none}}
@media(forced-colors:active){#mapThemeDialog input[type=checkbox]{appearance:auto;-webkit-appearance:auto;box-shadow:none}#mapThemeDialog input[type=checkbox]::before{display:none}}