/* Shared by the resident listing pages and the admin, so both get the same
   map without one importing the other's stylesheet. */

.point-map {
  width: 100%;
  height: 15rem;
  border: 1px solid #e7e5e4;
  border-radius: 0.5rem;
  background: #f5f5f4;
}

@media (min-width: 40rem) {
  .point-map {
    height: 20rem;
  }
}

/* Django's admin renders a readonly field inside a display:flex row, and the
   wrapper shrinks to its content. A Leaflet container positions everything
   inside it absolutely, so it contributes no intrinsic width and the flex item
   collapses to a two-pixel sliver — the map initialises correctly and is simply
   too narrow to see. Making the wrapper grow is the fix; setting a width on the
   map itself cannot help, because 100% of two pixels is two pixels. */
.form-row.field-location_map .readonly {
  flex: 1 1 auto;
  width: 100%;
  max-width: 40rem;
}

.point-map__missing {
  color: #57534e;
  font-style: italic;
}