/* Styles for the <buildings-map> element (static/map/buildings-map.js).
   Loaded once from base.html so the host's height clamp is in force from
   first paint. Everything is on the site's tokens from base.html: colour,
   the type steps and --tap-min. The bmap- prefix scopes the rules; the
   element has no shadow root.

   The host rule is on the tag so the height clamp holds before the element
   upgrades. The rules over MapLibre's chrome are on .bmap-wrap, which the
   element adds to itself on connection: as a class-plus-class selector they
   outrank MapLibre's own (.maplibregl-ctrl-group:not(:empty) and the like),
   which a tag-plus-class selector would not. */
buildings-map {
  display: block;
  position: relative;
  /* Viewport height less the floating header's reserved space and 200px
     of breathing room, held between 600px and 1600px. --header-offset is
     measured and kept in sync by base.html. */
  height: var(--bmap-height, clamp(600px, calc(100svh - var(--header-offset, 88px) - 200px), 1600px));
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px var(--shadow);
  isolation: isolate;
  background: var(--paper);
}
.bmap-map {
  width: 100%;
  height: 100%;
}
.bmap-message {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-raised);
  color: var(--fg-muted);
  text-align: center;
  padding: 0 24px;
  z-index: 500;
}
.bmap-message[hidden] {
  display: none;
}

/* MapLibre chrome on the site's tokens: square, glass, ink. The control
   group and the popup are glass panels and the zoom buttons and the popup
   close are menu items (the element adds the classes once MapLibre has
   built them), so their surface, hover, pressed and focus come from the
   recipes in base.html; MapLibre's own hover background and focus glow
   are reset here so they do not paint over the rung. */
.bmap-wrap .maplibregl-ctrl-group {
  border-radius: 0;
}
.bmap-wrap .maplibregl-ctrl-group button {
  width: 29px;
  height: 29px;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  justify-content: center;
}
.bmap-wrap .maplibregl-ctrl-group button + button {
  border-top: 1px solid var(--line);
}
.bmap-wrap .maplibregl-ctrl button:not(:disabled):hover,
.bmap-wrap .maplibregl-popup-close-button:hover {
  background-color: transparent;
}
.bmap-wrap .maplibregl-ctrl-group button:focus,
.bmap-wrap .maplibregl-ctrl-group button:focus:focus-visible {
  box-shadow: none;
}
.bmap-wrap .maplibregl-ctrl-attrib {
  background: var(--paper-raised);
  color: var(--fg-muted);
  font-size: var(--text-sm);
  border-radius: 0;
}
.bmap-wrap .maplibregl-ctrl-attrib a {
  color: var(--fg-muted);
}
.bmap-wrap .maplibregl-ctrl-attrib-button {
  border-radius: 0;
}
.bmap-wrap .maplibregl-ctrl-attrib.maplibregl-compact {
  border-radius: 0;
}

/* Pins and clusters: squares in the site's monochrome. The button is the
   hit area; the visible square is drawn inside it so tap size and mark
   size can differ. */
.bmap-pin,
.bmap-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  font-family: 'Work Sans', sans-serif;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  color: var(--paper);
}
.bmap-pin::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 2px solid var(--ink);
  background: var(--paper-raised);
  box-shadow: 0 2px 6px var(--shadow-deep);
}
.bmap-pin:hover::before {
  background: var(--ink);
}
.bmap-cluster {
  width: 30px;
  height: 30px;
}
.bmap-cluster span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  box-sizing: border-box;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--paper-raised);
  box-shadow: 0 2px 6px var(--shadow-deep);
}

/* Popup chrome stripped so the card rules below own the look. */
.bmap-wrap .maplibregl-popup {
  max-width: none !important;
}
.bmap-wrap .maplibregl-popup-content {
  padding: 0;
  overflow: hidden;
}
.bmap-wrap .maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.bmap-wrap .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.bmap-wrap .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
  border-top-color: var(--glass);
}
.bmap-wrap .maplibregl-popup-anchor-top .maplibregl-popup-tip,
.bmap-wrap .maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.bmap-wrap .maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
  border-bottom-color: var(--glass);
}
.bmap-wrap .maplibregl-popup-anchor-left .maplibregl-popup-tip {
  border-right-color: var(--paper-raised);
}
.bmap-wrap .maplibregl-popup-anchor-right .maplibregl-popup-tip {
  border-left-color: var(--paper-raised);
}
.bmap-wrap .maplibregl-popup-close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  min-height: 0;
  padding: 0;
  justify-content: center;
}

/* Building card inside popup, mirrors .building-card from buildings.html */
.bmap-card {
  padding: 10px 14px;
  background: var(--paper-raised);
  width: 230px;
}
.bmap-card-name {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: 0.3px;
  color: var(--fg);
  margin-bottom: 8px;
  margin-right: 18px;
}
.bmap-card-hood {
  margin-bottom: 6px;
}
.bmap-card-notes {
  color: var(--fg-muted);
  margin-bottom: 6px;
}
.bmap-card-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}
/* Everything tappable on the map is at least --tap-min on a phone. */
@media (max-width: 640px) {
  .bmap-wrap .maplibregl-ctrl-group button {
    width: var(--tap-min);
    height: var(--tap-min);
  }
  .bmap-pin,
  .bmap-cluster {
    width: var(--tap-min);
    height: var(--tap-min);
  }
  .bmap-wrap .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show),
  .bmap-wrap .maplibregl-ctrl-attrib-button {
    min-width: var(--tap-min);
    min-height: var(--tap-min);
  }
  .bmap-wrap .maplibregl-popup-close-button {
    width: var(--tap-min);
    height: var(--tap-min);
    top: 0;
    right: 0;
  }
  .bmap-card-name {
    margin-right: 36px;
  }
}