html, body {
  height: 100%;
  margin: 0;
  font: 14px "Ubuntu", Arial, sans-serif;
}

#mapid {
  position: fixed;
  inset: 0;
}

/* Search box, over the map (top, next to the zoom control) */
#search {
  position: fixed;
  top: 10px;
  left: 56px;
  right: 56px;
  max-width: 420px;
  z-index: 1000;
}
#search .row {
  display: flex;
  gap: 6px;
  padding: 6px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .65);
}
#search input { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid #ccc; border-radius: 3px; }
#search button { padding: 6px 12px; border: 0; border-radius: 3px; background: #8024FF; color: #fff; cursor: pointer; }
#msg { display: block; color: #c00; margin-top: 4px; padding: 0 6px; background: rgba(255, 255, 255, .85); border-radius: 3px; }
#msg:empty { display: none; }
#results { margin: 2px 0 0; padding: 0; list-style: none; background: #fff; border-radius: 4px; box-shadow: 0 1px 5px rgba(0, 0, 0, .65); overflow: hidden; }
#results:empty { display: none; }
#results li { padding: 8px; cursor: pointer; border-bottom: 1px solid #eee; }
#results li:last-child { border-bottom: 0; }
#results li:hover { background: #eef6ff; }

/* Legend, over the map (bottom left) */
ul.caption {
  position: fixed;
  left: 10px;
  bottom: 24px;
  z-index: 1000;
  margin: 0;
  padding: 8px 12px;
  list-style: none;
  background: rgba(255, 255, 255, .92);
  border-radius: 4px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .65);
}
ul.caption li { line-height: 22px; }
ul.caption li::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-right: 8px;
  box-sizing: border-box;
}
ul.caption li.first::before { background-color: #8BE4F1; }
ul.caption li.second::before { background-color: #D8C7EB; border: 1px solid #7E0BFF; }

.osm-light { filter: grayscale(100%) brightness(1.08) contrast(0.85); }