:root{color-scheme:light;--surface:white}
.appearance-options{border:1px solid var(--line);border-radius:16px;padding:16px;margin:20px 0;display:flex;flex-wrap:wrap;gap:12px}
.appearance-options legend{font-weight:700;padding:0 6px}.appearance-options label{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}.appearance-options input{width:20px;height:20px;accent-color:var(--evergreen)}
html:is([data-theme=dark],[data-theme=green]){color-scheme:dark;--surface:#1c2c24;--cream:#111e19;--forest:#d8ebdd;--evergreen:#9bcaa7;--sage:#2d4235;--charcoal:#e4efe6;--muted:#afbeb2;--line:#405348;--soft:#23362a;--trail:#e8a079;--gold:#edb478;--shadow:0 8px 28px #0003;--shadow-raised:0 12px 30px #0005}
html:is([data-theme=dark],[data-theme=green]) body{color:var(--ink);background:var(--cream)}
html:is([data-theme=dark],[data-theme=green]) :is(#header,#footer,#mobile-nav,dialog,.button,input,select,textarea,.card,.gallery-card,.trailcard,.mapcard,.panel,.home-product-panel,.searchbar,.searchbox,.filter-panel,.explore-list,.explore-toolbar,.destination-menu a,.notice,.empty,.profile-card,.group-card,.post-card,.collection-card,.route-summary){background-color:var(--surface);color:var(--ink);border-color:var(--line)}
html:is([data-theme=dark],[data-theme=green]) :is(.button.primary,.primary,.live-start-nav){background:#2d6847;color:#fff;border-color:#42855e}
html:is([data-theme=dark],[data-theme=green]) :is(.muted,.gallery-caption,.gallery-info p,.section-intro,small){color:var(--muted)}
html:is([data-theme=dark],[data-theme=green]) :is(.chip,.tag,.pill){background:var(--soft);color:var(--ink);border-color:var(--line)}
html:is([data-theme=dark],[data-theme=green]) :is(.chip.active,.chip[aria-pressed=true]){background:#365b42;color:#edf8ef}
html:is([data-theme=dark],[data-theme=green]) :is(input,textarea)::placeholder{color:var(--muted)}
html:is([data-theme=dark],[data-theme=green]) :is(.leaflet-popup-content-wrapper,.leaflet-popup-tip,.leaflet-control-layers,.leaflet-bar a){background:var(--surface);color:var(--ink)}
html:is([data-theme=dark],[data-theme=green]) .leaflet-container{background:#24342b}
html:is([data-theme=dark],[data-theme=green]) .trail-skeleton{background:var(--soft)}
[hidden]{display:none!important}

/* Legacy feature surfaces share the same night palette. */
html:is([data-theme=dark],[data-theme=green]) .route-experience,
html:is([data-theme=dark],[data-theme=green]) .route-experience .sidepanel.route-summary,
html:is([data-theme=dark],[data-theme=green]) .route-experience .route-expand,
html:is([data-theme=dark],[data-theme=green]) .challenge-card,
html:is([data-theme=dark],[data-theme=green]) body,
html:is([data-theme=dark],[data-theme=green]) .button,
html:is([data-theme=dark],[data-theme=green]) .iconbutton,
html:is([data-theme=dark],[data-theme=green]) .searchfield,
html:is([data-theme=dark],[data-theme=green]) .heart.saved,
html:is([data-theme=dark],[data-theme=green]) .toolbar .searchfield,
html:is([data-theme=dark],[data-theme=green]) .chip,
html:is([data-theme=dark],[data-theme=green]) .listcard,
html:is([data-theme=dark],[data-theme=green]) .sidepanel,
html:is([data-theme=dark],[data-theme=green]) .field input,
html:is([data-theme=dark],[data-theme=green]) .field select,
html:is([data-theme=dark],[data-theme=green]) .field textarea,
html:is([data-theme=dark],[data-theme=green]) .skip,
html:is([data-theme=dark],[data-theme=green]) .route-profile,
html:is([data-theme=dark],[data-theme=green]) .trail-tools,
html:is([data-theme=dark],[data-theme=green]) .source-facts,
html:is([data-theme=dark],[data-theme=green]) .trail-tools select,
html:is([data-theme=dark],[data-theme=green]) .trail-tools textarea,
html:is([data-theme=dark],[data-theme=green]) .leaflet-control-layers,
html:is([data-theme=dark],[data-theme=green]) .group-card,
html:is([data-theme=dark],[data-theme=green]) .group-hike,
html:is([data-theme=dark],[data-theme=green]) #header,
html:is([data-theme=dark],[data-theme=green]) .button.subtle,
html:is([data-theme=dark],[data-theme=green]) .card,
html:is([data-theme=dark],[data-theme=green]) .toolbar,
html:is([data-theme=dark],[data-theme=green]) .mapnotice,
html:is([data-theme=dark],[data-theme=green]) .leaflet-popup-content-wrapper,
html:is([data-theme=dark],[data-theme=green]) .tiles-loading:after,
html:is([data-theme=dark],[data-theme=green]) .profile-stats,
html:is([data-theme=dark],[data-theme=green]) .review,
html:is([data-theme=dark],[data-theme=green]) .activity,
html:is([data-theme=dark],[data-theme=green]) .settings,
html:is([data-theme=dark],[data-theme=green]) dialog,
html:is([data-theme=dark],[data-theme=green]) .heart:hover,
html:is([data-theme=dark],[data-theme=green]) #mobile-nav,
html:is([data-theme=dark],[data-theme=green]) .explore-v2[data-view=split] .results,
html:is([data-theme=dark],[data-theme=green]) .swipe-trail,
html:is([data-theme=dark],[data-theme=green]) .place-results,
html:is([data-theme=dark],[data-theme=green]) .place-option,
html:is([data-theme=dark],[data-theme=green]) .wag-map-style,
html:is([data-theme=dark],[data-theme=green]) .wag-map-style select,
html:is([data-theme=dark],[data-theme=green]) .trip-collection-card,
html:is([data-theme=dark],[data-theme=green]) .planner-trail,
html:is([data-theme=dark],[data-theme=green]) .dog-fact,
html:is([data-theme=dark],[data-theme=green]) .condition-report,
html:is([data-theme=dark],[data-theme=green]) .condition-tags span,
html:is([data-theme=dark],[data-theme=green]) .dog-empty,
html:is([data-theme=dark],[data-theme=green]) .trip-basics,
html:is([data-theme=dark],[data-theme=green]) .live-page input,
html:is([data-theme=dark],[data-theme=green]) .live-page select,
html:is([data-theme=dark],[data-theme=green]) #live-share-form select,
html:is([data-theme=dark],[data-theme=green]) #live-share-form input[type=datetime-local],
html:is([data-theme=dark],[data-theme=green]) .live-stats,
html:is([data-theme=dark],[data-theme=green]) .community-card,
html:is([data-theme=dark],[data-theme=green]) .community-card footer,
html:is([data-theme=dark],[data-theme=green]) .hike-calendar,
html:is([data-theme=dark],[data-theme=green]) [data-phone] .sidepanel,
html:is([data-theme=dark],[data-theme=green]) [data-phone] .route-profile,
html:is([data-theme=dark],[data-theme=green]) .adventure-history-card,
html:is([data-theme=dark],[data-theme=green]) .home-product-panel,
html:is([data-theme=dark],[data-theme=green]) dialog .modalhead,
html:is([data-theme=dark],[data-theme=green]) .formactions,
html:is([data-theme=dark],[data-theme=green]) .wag-map-fullscreen,
html:is([data-theme=dark],[data-theme=green]) .mobile-preferences,
html:is([data-theme=dark],[data-theme=green]) .license-entry,
html:is([data-theme=dark],[data-theme=green]) .gallery-card{background-color:var(--surface);border-color:var(--line)}
html:is([data-theme=dark],[data-theme=green]) body{background-color:var(--cream)}
html:is([data-theme=dark],[data-theme=green]) :is(.place-option,.swipe-trail,.listcard,.sidepanel,.review,.activity,.settings,.trip-collection-card,.planner-trail){color:var(--ink)}

/* White is the initial experience. Green remains an explicit preference. */
html[data-theme=light]{color-scheme:light;--cream:#fff;--surface:#fff;--soft:#f5f6f5;--ink:#17211d}
html[data-theme=light] body{background:#fff}
html[data-theme=dark]{--surface:#242628;--cream:#17191b;--forest:#e3e8e5;--evergreen:#b5cdbb;--sage:#343a36;--charcoal:#eceeed;--ink:#eceeed;--muted:#b7bdb9;--line:#42474a;--soft:#2e3234}
html[data-theme=green]{--ink:#e4efe6}