/* ── Map search (issue #1190) ──
   The search box and results dropdown over the Map tab. Positioned to the
   left of .map-switches (styles/feed.css), which sits at top:10px/right:64px
   — close enough on a narrow viewport that the two can touch or overlap.
   Both are position:absolute siblings of the same containing block, so a
   shared z-index would leave whichever comes later in the DOM
   (.map-switches) painting over the other; z-index 3 here keeps the
   dropdown itself always on top of the switches rather than depending on
   DOM order to make that true. */

.map-search {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  width: 280px;
  max-width: calc(100% - 20px);
}

.map-search-label {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The input and, once the places index has zones to offer, the button that
   opens the zone list: one row, the input taking whatever the button
   leaves. */
.map-search-bar {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.map-search-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
  box-shadow: var(--shadow-sm);
}

.map-search-input:focus {
  outline: none;
  border-color: var(--accent);
}

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

/* No index yet (loading) or none to be had: the box answers nothing, and
   its placeholder says which. */
.map-search-input:disabled {
  cursor: default;
  background: var(--surface-alt);
}

.map-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  list-style: none;
  padding: 0;
  z-index: 2;
}

.map-search-result {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.map-search-result:hover,
.map-search-result.selected {
  background: var(--surface-alt);
}

/* Name over "Region, Country": with the whole planet in scope, which Paris
   a row is has to be readable before it is picked. */
.map-search-result-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

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

.map-search-result-name {
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-search-result-kind {
  color: var(--text-muted);
  font-size: 0.8rem;
  flex: none;
}

/* ── Offline places: the zone packs ──
   Nothing is searchable until a zone is on the device (#1231), so the first
   thing the box shows a reader who turns to it is the offer below: the zone
   under the view, one tap away. The full list stays out of the way: a small
   button beside the input, and a panel that drops down where the results
   would, closing as soon as the reader types. */

.map-search-offer {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 8px 12px 12px;
  z-index: 2;
}

.map-search-offer-text {
  margin: 0 0 8px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.map-search-offer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.map-search-offer-download,
.map-search-offer-choose {
  padding: 6px 12px;
  border-radius: 4px;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.map-search-offer-download {
  border: none;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.map-search-offer-choose {
  border: 1px solid var(--border-strong);
  background: var(--surface-alt);
  color: var(--text);
}

.map-search-offer-download:disabled {
  cursor: default;
  opacity: 0.6;
}

.map-search-zones-toggle {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text-muted);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.map-search-zones-toggle:hover,
.map-search-zones-toggle[aria-expanded="true"] {
  color: var(--text);
  border-color: var(--accent);
}

.map-search-zones {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 8px 12px 12px;
  z-index: 2;
}

.map-search-zones-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.map-search-zones-title {
  font-weight: 500;
  color: var(--text);
}

.map-search-zones-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
}

.map-search-zones-hint {
  margin: 4px 0 8px;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.map-search-zone-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.map-search-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

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

.map-search-zone-name {
  color: var(--text);
}

.map-search-zone-status {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.map-search-zone[data-state="failed"] .map-search-zone-status,
.map-search-zone[data-state="missing"] .map-search-zone-status {
  color: var(--text);
}

.map-search-zone-action {
  flex: none;
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface-alt);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.map-search-zone-action:disabled {
  cursor: default;
  opacity: 0.6;
}