/*
 * Night theme. Selected by theme.js via html[data-theme="dark"].
 * Interface surfaces are inverted (with hue preserved) rather than restyled
 * one by one, so every control stays consistent. Map data stays in its
 * original colors; only road-style basemaps are darkened.
 */
html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="dark"] .rail,
html[data-theme="dark"] .view-panel,
html[data-theme="dark"] .map-search,
html[data-theme="dark"] .map-tools,
html[data-theme="dark"] .map-notice,
html[data-theme="dark"] .leaflet-control,
html[data-theme="dark"] .leaflet-popup-content-wrapper,
html[data-theme="dark"] .leaflet-popup-tip {
  filter: invert(0.9) hue-rotate(180deg);
}

/* Controls nested inside an already-inverted control must not flip twice. */
html[data-theme="dark"] .leaflet-control .leaflet-control {
  filter: none;
}

/* Basemap: darken road maps, dim everything else. */
html[data-theme="dark"] .leaflet-tile-pane {
  filter: brightness(0.72) contrast(0.95);
}

html[data-theme="dark"] #map[data-basemap="esri"] .leaflet-tile-pane,
html[data-theme="dark"] #map[data-basemap="vector"] .leaflet-tile-pane,
html[data-theme="dark"] #map[data-basemap="osm-standard"] .leaflet-tile-pane,
html[data-theme="dark"] #map[data-basemap="osm-hot"] .leaflet-tile-pane {
  filter: invert(0.92) hue-rotate(180deg) brightness(0.9) contrast(0.95);
}

html[data-theme="dark"] .leaflet-container {
  background: #1d1e1a;
}

/* Settings page: invert the whole document. */
html[data-theme="dark"] body:not(.app-body) {
  background: var(--paper);
}

html[data-theme="dark"]:has(body:not(.app-body)) {
  filter: invert(0.9) hue-rotate(180deg);
  background: #f5f4ef;
}

/*
 * Installed iPhone app (black-translucent status bar): page content extends
 * under the status bar, whose text is always white. Draw a dark strip behind
 * it so the time and battery stay readable in both themes.
 */
/*
 * Installed iPhone app (black-translucent status bar). The app is laid out
 * below the status bar on a solid themed background instead of overlaying a
 * fixed strip, and uses the full screen height.
 */
html.is-standalone {
  background: #26352b;
}

html.is-standalone[data-theme="dark"] {
  background: #1d1e1a;
}

html.is-standalone body.app-body {
  background: #26352b;
}

html.is-standalone[data-theme="dark"] body.app-body {
  background: #1d1e1a;
}

html.is-standalone:has(body.app-body),
html.is-standalone body.app-body {
  height: var(--app-h, 100%);
}

html.is-standalone .app {
  bottom: auto;
  height: var(--app-h, 100%);
  padding-top: env(safe-area-inset-top, 0px);
  background: #26352b;
}

html.is-standalone[data-theme="dark"] .app {
  background: #1d1e1a;
}

/*
 * iOS 26 blurs page content under the status bar unless a solid, header-like
 * fixed element sits at the top edge. WebKit finds it by hit-testing just below
 * the status bar, so the strip must extend past it and accept pointer events.
 */
.status-strip {
  display: none;
}

html.is-standalone .status-strip {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(env(safe-area-inset-top, 0px) + 6px);
  background: #26352b;
  z-index: 3000;
}

html.is-standalone[data-theme="dark"] .status-strip {
  background: #1d1e1a;
}

/* Offset (3% of the map height) that clears the iOS 26 top-edge blur. */
html.is-standalone .app {
  --ctl-off: calc((var(--app-h, 100vh) - env(safe-area-inset-top, 0px)) * 0.03);
}

/* Center the sidebar toggle on the search bar's menu button. */
html.is-standalone .rail {
  padding-top: calc(15.5px + var(--ctl-off));
}

/* Standalone: keep the search bar and tools clear of the iOS 26 top-edge blur. */
html.is-standalone .map-search,
html.is-standalone .map-tools {
  top: calc(12px + var(--ctl-off));
}

@media (max-width: 800px) {
  html.is-standalone .rail,
  html.is-standalone .view-panel {
    top: env(safe-area-inset-top, 0px);
  }
}

html:has(body.app-body):not(.is-standalone) {
  background: #f5f4ef;
}

html[data-theme="dark"]:has(body.app-body):not(.is-standalone) {
  background: #1d1e1a;
}
/* Settings page in the installed app: start below the status bar. */
html.is-standalone body:not(.app-body) {
  padding-top: env(safe-area-inset-top, 0px);
}

html.is-standalone[data-theme="dark"]:has(body:not(.app-body)) {
  background: #f5f4ef;
}

html.is-standalone .map-notice { padding: 3px 12px 4px; line-height: 1.2; min-height: 0; }

/* The iPhone app bundles its files, so there is no web file cache to clear. */
html.is-native #storage-clear-files { display: none; }
html.is-native [data-web-only] { display: none !important; }

/*
 * iPhone app: the map runs behind the status bar. A faint, non-interactive
 * gradient keeps the time and battery readable over busy basemaps.
 */
html.is-native .app {
  --ctl-off: 0px;
  padding-top: 0;
  background: var(--paper);
}

html.is-native .status-strip {
  height: calc(env(safe-area-inset-top, 0px) + 10px);
  background: linear-gradient(rgba(245, 244, 239, 0.7), rgba(245, 244, 239, 0));
  pointer-events: none;
  z-index: 1150;
}

html.is-native[data-theme="dark"] .status-strip {
  background: linear-gradient(rgba(29, 30, 26, 0.7), rgba(29, 30, 26, 0));
}

html.is-native .map-search,
html.is-native .map-tools {
  top: calc(12px + env(safe-area-inset-top, 0px));
}

html.is-native .rail {
  padding-top: calc(15.5px + env(safe-area-inset-top, 0px));
}

html.is-native .view-panel {
  padding-top: env(safe-area-inset-top, 0px);
}

@media (max-width: 800px) {
  html.is-native .rail,
  html.is-native .view-panel {
    top: 0;
  }
}