/* Theme surfaces live here; layout and typography remain in style.css. */
:root { color-scheme: light; }
.theme-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 8px 0 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--white);
  color: var(--ink);
}
.theme-picker svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.theme-picker select { min-height: 42px; border: 0; padding: 0 3px; color: inherit; background: transparent; font-size: 0.875rem; cursor: pointer; }
.theme-picker:focus-within { outline: 3px solid var(--green); outline-offset: 3px; }
.theme-picker select:focus-visible { outline: none; }
.header-right { gap: 12px; }
@media (min-width: 681px) and (max-width: 900px) {
  .header { padding: 0 20px; gap: 12px; }
  .desktop-nav { gap: 12px; }
  .header-right { gap: 8px; }
  .theme-picker { padding-left: 8px; gap: 4px; }
}
@media (max-width: 680px) {
  .header { gap: 8px; }
  .header-right { gap: 8px; }
  .theme-picker { gap: 0; padding: 0 5px; }
  .theme-picker svg { display: none; }
  .theme-picker select { font-size: 1rem; min-width: 74px; }
}
@media (max-width: 370px) {
  .header .brand { gap: 6px; }
  .header .brand img { width: 30px; height: 30px; }
  .header .brand > span { font-size: 1.1875rem; }
  .header .brand small { font-size: 0.4375rem; letter-spacing: .4px; }
  .header-right .button { padding: 8px; gap: 5px; }
  .header-right .button svg { width: 15px; }
  .header-right { gap: 5px; }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --green: #85d1ad;
  --green-dark: #a5e3c2;
  --ink: #e5ede6;
  --muted: #a7b7ab;
  --line: #35463d;
  --paper: #101a16;
  --white: #1b2822;
  --soft: #25392e;
  --orange: #e8bc75;
}
:root[data-theme="dark"] :is(.header,.mobile-nav) { background: #17231ff5; border-color: var(--line); }
:root[data-theme="dark"] :is(.button,.search-box,.search-results,.location-panel,.place-card,.weather-card,.sun-card,.forecast-panel,.dialog,.empty-state,.map-error) {
  background: var(--white);
  color: var(--ink);
  border-color: var(--line);
}
:root[data-theme="dark"] :is(.button:hover,.dialog-close,.search-box button,.hour-column,.chip,.category-label,.upload-label) {
  background: #27392e;
  color: var(--ink);
  border-color: #425748;
}
:root[data-theme="dark"] :is(.button.primary,.chip.active) { color: #10261b; background: var(--green); border-color: var(--green); }
:root[data-theme="dark"] .button.primary:hover { background: var(--green-dark); border-color: var(--green-dark); }
:root[data-theme="dark"] .skip { background: var(--green); color: #10261b; }
:root[data-theme="dark"] :is(input,textarea,select) { color: var(--ink); }
:root[data-theme="dark"] :is(input,textarea)::placeholder { color: #a2b0a5; opacity: 1; }
:root[data-theme="dark"] .dialog :is(input:not([type="file"]),textarea,select) { background: #142019; border-color: #4a5c50; color: var(--ink); }
:root[data-theme="dark"] .theme-picker select option { background: var(--white); color: var(--ink); }
:root[data-theme="dark"] input[type="file"]::file-selector-button { background: #304738; color: var(--ink); border: 1px solid #526a59; border-radius: 5px; padding: 7px 10px; }
:root[data-theme="dark"] :is(button,a,input,textarea,select):focus-visible { outline-color: #9be4be; }
:root[data-theme="dark"] :is(.date-label,.location-button,.map-legend,.panel-location .eyebrow,.mini-metric>span,.mini-metric strong small,.source-line,.panel-footnote,.sun-times,.card-region,.card-description,.card-meta,.community-search,.sharing-note p,.footer-brand span,footer>div>span,footer .text-button,.detail-description,.comment p,.info-section p,.info-section li) { color: var(--muted); }
:root[data-theme="dark"] :is(.sun-times b,.search-result strong,.card-body h3,.metric-value) { color: var(--ink); }
:root[data-theme="dark"] :is(.count,.note-symbol,.weather-location-bar,.sharing-note,.weather-explainer) { background: #21362a; color: #bcdbc3; border-color: #3b5340; }
:root[data-theme="dark"] .sharing-note .button { color: #d5e9d7; border-color: #5b745b; background: transparent; }
:root[data-theme="dark"] .sharing-note .button:hover { background: #304b38; }
:root[data-theme="dark"] :is(.weather-card .metric-label,.upload-label>span) { color: #a4d3b1; }
:root[data-theme="dark"] .hour-column .wind-bar { background: #6ea784; }
:root[data-theme="dark"] :is(.sun-times svg,.sun-card>span) { color: #dfbc79; }
:root[data-theme="dark"] :is(.airspace-status,.detail-notice,.error-inline,.stale-label) { background: #302c1e; border-color: #5d5131; color: #e7cc91; }
:root[data-theme="dark"] :is(.small-label,.status-heading strong,.airspace-status p,.airspace-status a,.status-icon) { color: #e7cc91; }
:root[data-theme="dark"] .airspace-status a { border-color: #615338; }
:root[data-theme="dark"] :is(.form-error,.delete-button) { color: #f0a395; }
:root[data-theme="dark"] :is(.card-meta,.comment) { border-color: var(--line); }
:root[data-theme="dark"] .community-search input { border-color: #54654f; }
:root[data-theme="dark"] .card-image { background: #24372b; }
:root[data-theme="dark"] .detail-image { background: #24372b; }
:root[data-theme="dark"] .demo-badge { background: #132a20ed; color: #eff7ee; }
:root[data-theme="dark"] .toast { background: #b3dfc3; color: #163021; }
:root[data-theme="dark"] .toast.error { background: #e5b09f; color: #3d2017; }
:root[data-theme="dark"] .dialog::backdrop { background: #050d09b0; }

/* Only background raster tiles are toned down. Airspace colours, location pins
   and uploaded photos retain their meaning and original colours. */
:root[data-theme="dark"] :is(.map-wrap,.leaflet-container) { background: #17251e; border-color: #3c5142; }
:root[data-theme="dark"] .leaflet-tile-pane { filter: invert(.92) hue-rotate(180deg) saturate(.45) brightness(.8) contrast(.95); }
:root[data-theme="dark"] :is(.map-layer label,.map-coordinates,.map-help,.zone-label,.leaflet-popup-content-wrapper,.leaflet-popup-tip) { background: #1b2b24f5; color: var(--ink); border-color: #4a5f4e; }
:root[data-theme="dark"] .zone-label span { filter: brightness(1.4); }
:root[data-theme="dark"] .map-demo-label { background: #302c1ef5; color: #e7cc91; border-color: #6e5d37; }
:root[data-theme="dark"] .leaflet-overlay-pane path { fill-opacity: .19; stroke-width: 2; }
:root[data-theme="dark"] .leaflet-control-zoom { border-color: #4a5f4e!important; }
:root[data-theme="dark"] .leaflet-control-zoom a { background: #1b2b24; color: #d8eadd!important; border-color: #4a5f4e; }
:root[data-theme="dark"] .leaflet-control-zoom a:hover { background: #304738; }
:root[data-theme="dark"] .leaflet-control-attribution { color: #b6c7ba; background: #16251ff0!important; }
:root[data-theme="dark"] .leaflet-control-attribution a { color: #b6dfc5; }
:root[data-theme="dark"] .leaflet-popup-content small { color: #e7cc91; }
:root[data-theme="dark"] .leaflet-container a.leaflet-popup-close-button { color: #bfd3c4; }
:root[data-theme="dark"] .map-pin { background: #247958; border-color: #d3edde; color: #fff; }
:root[data-theme="dark"] .selected-pin { background: #8ed8b0; border-color: #193e2c; box-shadow: 0 0 0 8px #b0e9c325; }
@media (forced-colors: active) {
  .leaflet-tile-pane { filter: none!important; }
  .theme-picker { border-color: ButtonText; }
}