:root {
  color-scheme: light;
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 240 5% 64.9%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --radius: 0.5rem;
}

* {
  box-sizing: border-box;
}

html,
body,
#map {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background: #111715;
}

#map {
  background: #dfe7df;
}

.panel {
  position: absolute;
  z-index: 500;
  top: 16px;
  left: 16px;
  width: min(420px, calc(100vw - 32px));
  color: hsl(var(--popover-foreground));
  background: hsl(var(--popover));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 2px);
  box-shadow:
    0 18px 50px rgb(0 0 0 / 0.16),
    0 1px 2px rgb(0 0 0 / 0.08);
  overflow: hidden;
}

.panel:focus-within {
  border-color: hsl(var(--ring));
  box-shadow:
    0 0 0 3px hsl(var(--ring) / 0.18),
    0 18px 50px rgb(0 0 0 / 0.16),
    0 1px 2px rgb(0 0 0 / 0.08);
}

.command {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
}

.command-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 12px;
}

.command-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: hsl(var(--muted-foreground));
}

#search-input,
#locator-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  border: 0;
  outline: 0;
  background: transparent;
  color: hsl(var(--foreground));
  font: inherit;
  font-size: 14px;
}

#search-input::placeholder,
#locator-input::placeholder {
  color: hsl(var(--muted-foreground));
}

.command-clear {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.command-clear:hover,
.command-clear:focus-visible {
  outline: 0;
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.command-clear[hidden] {
  display: none;
}

.icon {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.spinner {
  width: 16px;
  height: 16px;
  animation: spinner-spin 1s linear infinite;
  color: hsl(var(--muted-foreground));
}

@keyframes spinner-spin {
  to {
    transform: rotate(360deg);
  }
}

.command-list {
  max-height: min(420px, calc(100vh - 90px));
  overflow-y: auto;
}

.command-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  color: hsl(var(--muted-foreground));
  font-size: 14px;
  line-height: 1.35;
}

.command-empty[hidden],
.command-group[hidden],
.command-items[hidden] {
  display: none;
}

.command-group {
  overflow: hidden;
  padding: 4px;
  border-top: 1px solid hsl(var(--border));
}

.command-group + .command-group {
  border-top: 1px solid hsl(var(--border));
}

.command-items {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.command-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 8px;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: hsl(var(--foreground));
  text-align: left;
  cursor: pointer;
}

.command-item:hover,
.command-item:focus-visible {
  outline: 0;
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.command-item-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--background));
  color: hsl(var(--muted-foreground));
}

.command-item-svg {
  width: 16px;
  height: 16px;
}

.command-item-content {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
}

.command-item-label {
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Secondary line under a label, e.g. the lat/lon of a reverse-geocoded address. */
.command-item-sub {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.3;
  color: hsl(var(--muted-foreground));
  font-variant-numeric: tabular-nums;
}

.command-item-sub[hidden] {
  display: none;
}

.result-pin,
.reverse-pin {
  color: hsl(var(--primary));
}

.reverse-item {
  cursor: default;
}

.reverse-item .command-item-label {
  font-weight: 400;
}

.reverse-item:hover,
.reverse-item:focus-visible {
  background: transparent;
  color: hsl(var(--foreground));
}

.store-panel {
  width: min(440px, calc(100vw - 32px));
}

.store-panel .command-list {
  max-height: min(680px, calc(100vh - 90px));
}

.store-panel .command-empty {
  justify-content: flex-start;
  padding: 10px 16px;
  border-top: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  font-size: 13px;
  font-weight: 500;
  text-align: left;
}

.store-items .store-item {
  align-items: flex-start;
  min-height: 124px;
  padding: 14px 12px;
}

.store-items .store-item[aria-selected="true"] {
  background: hsl(var(--accent));
}

.store-items .store-item .command-item-label {
  white-space: normal;
}

.store-pin {
  color: #d93025;
}

.store-open {
  color: #137333;
  font-weight: 500;
}

.command-item-action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
}

.command-item-action:hover,
.command-item-action:focus-visible {
  outline: 0;
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

/* MapLibre popup styling, matched to the command palette look. */
.maplibregl-popup {
  z-index: 600;
}

.maplibregl-popup-content {
  padding: 0;
  border-radius: 8px;
  box-shadow: 0 3px 14px rgb(0 0 0 / 0.22);
  background: hsl(var(--popover));
  color: hsl(var(--foreground));
}

.maplibregl-popup-close-button {
  display: none;
}

.popup-body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 14px;
}

.popup-title {
  flex: 1 1 auto;
  max-width: 240px;
  min-width: 0;
  margin: 0;
  font-weight: 400;
  line-height: 1.25;
}

.popup-title-main,
.popup-title-sub {
  display: block;
}

.popup-title-main {
  font-weight: 600;
}

.popup-title-sub {
  margin-top: 3px;
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  line-height: 1.35;
}

.popup-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: -4px -8px -4px 0;
  padding: 0;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
}

.popup-close:hover,
.popup-close:focus-visible {
  outline: 0;
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

/* Result point markers, styled by point precision. */
.result-pin-marker {
  box-sizing: border-box;
  border-radius: 50%;
  cursor: pointer;
}

.result-pin-marker.is-point {
  width: 9px;
  height: 9px;
  background: #0f8b8d;
  border: 1px solid #075f61;
}

.result-pin-marker.is-centroid {
  width: 11px;
  height: 11px;
  background: #d95d39;
  border: 1px solid #8f2f21;
}

.result-pin-marker.is-representative {
  width: 13px;
  height: 13px;
  background: #375e97;
  border: 1.5px solid #253f68;
}

.reverse-target-marker {
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #111827;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.4);
}

.reverse-marker {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #a52714;
  cursor: pointer;
}

.reverse-marker svg {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.2));
}

.store-pin-marker {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #d93025;
  cursor: pointer;
}

.store-pin-marker.is-selected {
  color: #a52714;
}

.store-pin-marker-svg {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.24));
}

.locator-origin-marker {
  box-sizing: border-box;
  width: 13px;
  height: 13px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #0f8b8d;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.34);
}

.map-controls {
  position: absolute;
  z-index: 1000;
  right: 16px;
  bottom: 28px;
  display: grid;
  pointer-events: auto;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 2px);
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  box-shadow:
    0 16px 38px rgb(0 0 0 / 0.14),
    0 1px 2px rgb(0 0 0 / 0.08);
}

.map-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: hsl(var(--foreground));
  cursor: pointer;
}

.map-control + .map-control {
  border-top: 1px solid hsl(var(--border));
}

.map-control:hover,
.map-control:focus-visible {
  outline: 0;
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.map-control:disabled {
  color: hsl(var(--muted-foreground));
  cursor: not-allowed;
  opacity: 0.5;
}

/* Google-Maps-style wordmark, bottom-center, sitting just above the attribution
   bar. No box and no blur — a crisp 1px white outline hugs the glyph edges
   (8-direction zero-blur text-shadow) so it reads over any basemap with solid
   edges. Label only (pointer-events: none) so it never blocks map dragging;
   below the search panel (z 500) so a long results list covers it. */
.brandmark {
  position: absolute;
  z-index: 400;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  color: #4b5563;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  text-shadow:
    -1px -1px 0 #fff, 1px -1px 0 #fff,
    -1px 1px 0 #fff, 1px 1px 0 #fff,
    0 -1px 0 #fff, 0 1px 0 #fff,
    -1px 0 0 #fff, 1px 0 0 #fff;
}

/* Data attribution: keep it tiny and never let the expanded text overflow the
   viewport on a phone. Compact mode already collapses it to an (i) toggle. */
.maplibregl-ctrl-attrib-inner {
  font-size: 11px;
}

.maplibregl-ctrl-attrib {
  max-width: calc(100vw - 24px);
}

@media (max-width: 560px) {
  .panel {
    top: 10px;
    left: 10px;
    width: calc(100vw - 20px);
  }

  .command-item-label {
    white-space: normal;
  }

  /* 16px stops iOS Safari from auto-zooming (which clamps/shifts the layout)
     when the search field is focused. */
  #search-input,
  #locator-input {
    font-size: 16px;
  }

  .map-controls {
    right: 10px;
    bottom: 24px;
  }

  .brandmark {
    bottom: 42px;
    font-size: 14px;
  }

  .maplibregl-ctrl-attrib-inner {
    font-size: 10px;
  }
}