/* ===================================
   MAP SEARCH - address / street / sector
   Top-left of the map, above the layer
   panels: the same place every map app
   puts it, so nobody has to look.
   =================================== */

.map-search {
  position: absolute;
  top: var(--space-4);
  left: 56px; /* clear of the Leaflet zoom column */
  width: 320px;
  max-width: calc(100% - 56px - 116px); /* keep off the view-mode + fullscreen buttons */
  /* Above the layer panels (650) and Leaflet's control container (800) so the
     suggestion list is never painted behind the legend, but below the create
     panel (1100) and the area-selection toolbar (1200). */
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: auto;
}

/* Selection mode owns the map, exactly like the other floating controls -
   its toolbar sits directly under this box and would fight the dropdown. */
body.selection-mode-active .map-search {
  display: none;
}

.map-search-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-2) 0 var(--space-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.map-search-field:focus-within {
  border-color: var(--c-accent);
  box-shadow: var(--shadow-lg);
}

.map-search-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--c-text-muted);
  stroke: currentColor;
  fill: none;
}

/* The magnifier becomes a spinner while a lookup is in flight - the field is
   the only place a delay is visible, and a separate overlay would shift it. */
.map-search.is-busy .map-search-icon {
  animation: map-search-spin 0.9s linear infinite;
  color: var(--c-accent);
}

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

@media (prefers-reduced-motion: reduce) {
  .map-search.is-busy .map-search-icon {
    animation: none;
    opacity: 0.5;
  }
}

.map-search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

.map-search-input::placeholder {
  color: var(--c-text-muted);
}

.map-search-input:focus {
  outline: none; /* the field wrapper carries the focus ring */
}

/* Safari draws its own clear affordance on type=search; ours is translated. */
.map-search-input::-webkit-search-cancel-button {
  display: none;
}

.map-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--c-text-muted);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.map-search-btn:hover {
  background: var(--c-surface-glow);
  color: var(--c-text);
}

.map-search-btn:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}

.map-search-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
}

.map-search-divider {
  width: 1px;
  height: 18px;
  flex-shrink: 0;
  background: var(--c-border);
}

/* ===================================
   SUGGESTIONS
   =================================== */
.map-search-results {
  background: var(--c-depth);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.map-search-list {
  list-style: none;
  margin: 0;
  padding: var(--space-1) 0;
  max-height: min(46vh, 340px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.map-search-result {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

.map-search-result:hover,
.map-search-result.is-active {
  background: var(--c-surface-glow);
}

.map-search-result.is-active {
  box-shadow: inset 2px 0 0 var(--c-accent);
}

.map-search-result-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--c-accent-soft);
  color: var(--c-accent);
}

.map-search-result-icon svg {
  width: 15px;
  height: 15px;
}

.map-search-result-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.map-search-result-label {
  font-size: var(--text-sm);
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-search-result-context {
  font-size: var(--text-xs);
  color: var(--c-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The kind label is redundant with the icon on purpose: colour and shape
   alone must not be the only carrier of meaning (WCAG 1.4.1). */
.map-search-result-kind {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
}

.map-search-empty {
  margin: 0;
  padding: var(--space-4) var(--space-3);
  font-size: var(--text-sm);
  color: var(--c-text-muted);
  text-align: center;
}

/* OSM licence: attribution has to travel with the results, not only with the
   basemap tiles. */
.map-search-attribution {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--c-border);
  font-size: 10px;
  color: var(--c-text-muted);
}

/* ===================================
   RESULT PIN
   A hollow outline, distinct from the
   filled idea circles / event diamonds /
   situation tags: it is a search hit,
   not civic content.
   =================================== */
.map-search-pin {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 32px;
  height: 40px;
  color: var(--c-accent);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
  animation: map-search-drop var(--duration-base) var(--ease-out);
}

.map-search-pin svg {
  width: 32px;
  height: 32px;
  fill: var(--c-depth);
}

@keyframes map-search-drop {
  from { transform: translateY(-10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .map-search-pin {
    animation: none;
  }
}

.map-search-popup h4 {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  color: var(--c-text);
}

.map-search-popup-context {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  color: var(--c-text-muted);
}

.map-search-popup {
  padding: var(--space-3);
}

/* ===================================
   RESPONSIVE
   =================================== */
@media (max-width: 768px) {
  /* Sits in the top row, between the Layers toggle (44px, left) and the
     fullscreen button (40px, right) - the only band that is free on a phone. */
  .map-search {
    top: var(--space-3);
    left: calc(var(--space-3) + 44px + var(--space-2));
    right: calc(var(--space-3) + 40px + var(--space-2));
    width: auto;
    max-width: none;
  }

  .map-search-field {
    height: 44px; /* WCAG 2.5.8 touch target */
  }

  .map-search-btn {
    width: 36px;
    height: 36px;
  }
}