/* Bare Earth lidar map: all styling.
   Colors are defined once as variables at the top, with a dark-mode set below. */

@font-face {
  font-family: Barlow; font-style: normal; font-weight: 400; font-display: swap;
  src: url(vendor/barlow/barlow-latin-400-normal.woff2) format("woff2");
}
@font-face {
  font-family: Barlow; font-style: normal; font-weight: 600; font-display: swap;
  src: url(vendor/barlow/barlow-latin-600-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(vendor/barlow/barlow-semi-condensed-latin-600-normal.woff2) format("woff2");
}

:root {
  --paper: #ffffff;
  --ink: #1d2a30;
  --ink-soft: #56646b;
  --rule: #d5dadc;
  --field: #eef1f0;
  --contour: #8f5527;
  --fix: #1668b8;
  --fix-ink: #ffffff;
  --void: #9aa0a3;
  --shadow: 0 1px 2px rgba(20, 30, 36, .28), 0 6px 18px rgba(20, 30, 36, .18);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1b2227;
    --ink: #e9edee;
    --ink-soft: #a3b0b6;
    --rule: #36424a;
    --field: #252e34;
    --contour: #d6a06b;
    --fix: #63b0f4;
    --fix-ink: #0d1a24;
    --void: #2b3237;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--void);
  color: var(--ink);
  font: 400 15px/1.35 Barlow, "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
}
#map { position: fixed; inset: 0; background: var(--void); }

:focus-visible { outline: 3px solid var(--fix); outline-offset: 2px; }

.noscript {
  position: fixed; inset: auto 12px 12px; z-index: 2000; margin: 0; padding: 12px 14px;
  background: var(--paper); border-radius: 6px; box-shadow: var(--shadow);
}

/* ---------- map layers ---------- */
/* The quick relief layer shows instantly while the sharper USGS lidar renders on top of it.
   The filter pulls its pale tone toward the gray of the lidar hillshade so the swap is calm. */
.quick-relief { filter: grayscale(1) brightness(.76) contrast(1.12); }

/* "Hillshade, deeper shadows": the same lidar tiles with contrast added here in the browser.
   (The USGS server's own version adjusts every tile separately and leaves a checkerboard.) */
.leaflet-terrain-pane[data-look="deep"] .lidar-tiles { filter: brightness(.86) contrast(1.6); }
.leaflet-terrain-pane[data-look="deep"] .quick-relief { filter: grayscale(1) brightness(.68) contrast(1.6); }

/* keep Leaflet's own controls clear of phone notches and home bars */
.leaflet-top { top: env(safe-area-inset-top, 0px); }
.leaflet-bottom { bottom: env(safe-area-inset-bottom, 0px); }
.leaflet-left { left: env(safe-area-inset-left, 0px); }
.leaflet-right { right: env(safe-area-inset-right, 0px); }
.leaflet-container { font: inherit; }
.leaflet-bar { border: 0 !important; box-shadow: var(--shadow); }
.leaflet-bar a {
  background: var(--paper); color: var(--ink); border-bottom-color: var(--rule);
  width: 38px; height: 38px; line-height: 38px;
}
.leaflet-bar a:hover { background: var(--field); color: var(--ink); }
.leaflet-bar a.leaflet-disabled { background: var(--field); color: var(--ink-soft); }
.leaflet-control-attribution {
  background: color-mix(in srgb, var(--paper) 82%, transparent) !important;
  color: var(--ink-soft); font-size: 11px;
}
.leaflet-control-attribution a { color: var(--ink-soft); }
.leaflet-bottom.leaflet-left .leaflet-control-scale { margin-bottom: 28px; }
.leaflet-control-scale-line {
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  color: var(--ink); border-color: var(--ink); font-size: 11px;
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow);
}
.leaflet-popup-content-wrapper { border-radius: 6px; }
.leaflet-popup-content { margin: 12px 14px; font-size: 14px; line-height: 1.35; }
.leaflet-container a.leaflet-popup-close-button { color: var(--ink-soft); }

/* ---------- legend ---------- */
.legend {
  position: fixed; z-index: 1000;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: calc(10px + env(safe-area-inset-right, 0px));
  width: min(272px, calc(100vw - 72px));
  max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column;
  background: var(--paper);
  border-radius: 6px;
  box-shadow: var(--shadow);
}
.legend-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex: none; width: 100%; min-height: 44px; padding: 0 12px 0 14px;
  background: none; border: 0; border-radius: 6px; color: var(--ink); cursor: pointer;
  font: 600 17px/1 "Barlow Semi Condensed", Barlow, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .01em; text-align: left;
}
.legend-toggle svg { flex: none; transition: transform .15s ease; }
.legend-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.legend[data-open="false"] { width: auto; }
.legend[data-open="false"] .legend-body { display: none; }
.legend-body {
  padding: 2px 14px 14px; border-top: 1px solid var(--rule);
  overflow-y: auto; overscroll-behavior: contain;
}

.field { margin: 12px 0 0; }
.field > label:not(.key), .field > .cap { display: block; color: var(--ink-soft); font-size: 13px; margin-bottom: 5px; }

/* 16px on form controls: anything smaller makes iPhones zoom the whole page when you tap into one */
select, input[type="search"] {
  width: 100%; min-height: 40px; padding: 0 10px;
  background: var(--field); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 4px;
  font: inherit; font-size: 16px;
}
.fade { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-size: 14px; }
input[type="range"] { width: 100%; height: 28px; margin: 0; accent-color: var(--contour); }

.key { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; font-size: 15px; }
.key input { width: 20px; height: 20px; margin: 0; accent-color: var(--contour); flex: none; }
.swatch {
  flex: none; width: 40px; height: 22px; border-radius: 3px;
  background: #7c8387; display: grid; place-items: center; overflow: hidden;
}
.swatch-road::before {
  content: ""; width: 54px; height: 4px; background: #f6f1e4;
  box-shadow: 0 0 0 1px #3d4447; transform: rotate(-14deg);
}
.swatch-place {
  color: #fff; font: 600 12px/1 Barlow, Arial, sans-serif;
  text-shadow: 0 0 2px #1d2427, 0 0 2px #1d2427, 0 0 3px #1d2427;
}
.hint { margin: 12px 0 0; color: var(--ink-soft); font-size: 13px; }

/* ---------- place search ---------- */
.search-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
input[type="search"] { min-width: 0; -webkit-appearance: none; appearance: none; }
input[type="search"]::placeholder { color: var(--ink-soft); opacity: 1; font-size: 14px; }
.search-go {
  width: 40px; min-height: 40px; padding: 0; display: grid; place-items: center;
  background: var(--contour); color: var(--paper);
  border: 0; border-radius: 4px; cursor: pointer;
}
.search-go[aria-busy="true"] { opacity: .55; cursor: progress; }
.search-note, .field-note { margin: 6px 0 0; color: var(--ink-soft); font-size: 13px; }
.search-note:empty, .field-note:empty { display: none; }
.results { list-style: none; margin: 6px 0 0; padding: 0; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.results[hidden] { display: none; }
.results li + li { border-top: 1px solid var(--rule); }
.results button {
  display: block; width: 100%; min-height: 40px; padding: 7px 10px;
  background: none; border: 0; color: var(--ink); cursor: pointer;
  font: inherit; font-size: 14px; text-align: left;
}
.results button:hover { background: var(--field); }
.results small { display: block; color: var(--ink-soft); font-size: 12px; }

/* ---------- locate button ---------- */
.locate {
  position: fixed; z-index: 1000;
  right: calc(10px + env(safe-area-inset-right, 0px));
  bottom: calc(34px + env(safe-area-inset-bottom, 0px));
  width: 52px; height: 52px; padding: 0;
  display: grid; place-items: center;
  background: var(--paper); color: var(--ink);
  border: 0; border-radius: 6px; box-shadow: var(--shadow); cursor: pointer;
}
.locate[data-state="tracking"] { color: var(--fix); }
.locate[data-state="following"] { background: var(--fix); color: var(--fix-ink); }
.locate .pip { display: none; }
.locate[data-state="following"] .pip, .locate[data-state="tracking"] .pip { display: block; }

/* ---------- position readout, status, loading ---------- */
.readout {
  position: fixed; z-index: 1000;
  left: calc(10px + env(safe-area-inset-left, 0px));
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  max-width: calc(100vw - 90px);
  padding: 7px 10px; border-radius: 6px;
  background: var(--paper); box-shadow: var(--shadow);
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.readout b { font-weight: 600; }
.readout span { color: var(--ink-soft); margin-left: 8px; }
.readout[hidden] { display: none; }

.status {
  position: fixed; z-index: 1001; left: 50%; transform: translateX(-50%);
  bottom: calc(108px + env(safe-area-inset-bottom, 0px));
  width: max-content; max-width: min(420px, calc(100vw - 24px));
  padding: 10px 14px; border-radius: 6px;
  background: var(--ink); color: var(--paper);
  font-size: 14px; box-shadow: var(--shadow);
}
.status:empty { display: none; }

.loading {
  position: fixed; z-index: 999; left: calc(58px + env(safe-area-inset-left, 0px));
  top: calc(14px + env(safe-area-inset-top, 0px));
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 6px;
  background: var(--paper); box-shadow: var(--shadow); font-size: 13px;
}
.loading[hidden] { display: none; }
.loading i { width: 8px; height: 8px; border-radius: 50%; background: var(--contour); animation: pulse 1s ease-in-out infinite alternate; }
@keyframes pulse { from { opacity: .25; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .loading i { animation: none; }
  .legend-toggle svg { transition: none; }
}

/* ---------- elevation popup ---------- */
.spot-elev { font: 600 20px/1.1 "Barlow Semi Condensed", Barlow, Arial, sans-serif; }
.spot-elev small { font: 400 13px/1 Barlow, Arial, sans-serif; color: var(--ink-soft); margin-left: 6px; }
.spot-note { margin-top: 4px; color: var(--ink-soft); font-size: 13px; }
.spot-note:empty { display: none; }
.spot-ll { margin-top: 4px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.spot-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.spot-btn {
  min-height: 36px; padding: 0 12px;
  background: var(--field); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 4px; font: inherit; cursor: pointer;
}
.spot-btn[hidden] { display: none; }