/* 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. MapLibre's own stylesheet is
   imported into the `vendor` cascade layer (buildings-map.js), so every
   rule here and in base.html outranks it whatever the specificity. */
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;
}
/* MapLibre paints the zoom glyphs in a fixed dark grey, lost on the dark
   theme's panel; the same glyphs as a mask take the button's text colour. */
.bmap-wrap .maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon,
.bmap-wrap .maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
  background-image: none;
  background-color: currentColor;
  -webkit-mask: var(--bmap-glyph) center / contain no-repeat;
  mask: var(--bmap-glyph) center / contain no-repeat;
}
.bmap-wrap .maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
  --bmap-glyph: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5'/%3E%3C/svg%3E");
}
.bmap-wrap .maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
  --bmap-glyph: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13z'/%3E%3C/svg%3E");
}
.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;
}
/* MapLibre's blue focus glow, on its buttons and its attribution toggle:
   reset so the site's one ring (base.html) is the only focus mark. Its
   stylesheet sits in the vendor cascade layer (buildings-map.js), so its
   `outline: none` no longer hides that ring. */
.bmap-wrap .maplibregl-ctrl-group button:focus,
.bmap-wrap .maplibregl-ctrl-group button:focus:focus-visible,
.bmap-wrap .maplibregl-ctrl-attrib-button:focus {
  box-shadow: none;
}
.bmap-wrap .maplibregl-ctrl-attrib {
  background: var(--paper-raised);
  color: var(--fg-muted);
  font-family: 'Work Sans', sans-serif;
  font-size: var(--text-sm);
  border-radius: 0;
}
.bmap-wrap .maplibregl-ctrl-attrib a {
  color: var(--fg-muted);
}
/* MapLibre draws the info glyph as a 24px background that repeats: on a
   phone the button is --tap-min (below), so it would tile. One, centred. */
.bmap-wrap .maplibregl-ctrl-attrib-button {
  border-radius: 0;
  background-repeat: no-repeat;
  background-position: center;
}
.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;
}
/* The tip is part of the card: a square of the card's surface turned to a
   point, its two outer sides in the card's border, clipped to its outer
   half and laid over the card's border line, so the border runs from card
   to point without a seam and nothing is drawn over the card (its edge is
   often the photo). How far it stands from the marker is TIP in
   buildings-map.js, which also slides it along the edge (`translate`)
   when the card slides sideways. */
.bmap-wrap .maplibregl-popup-tip {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border: 0 solid var(--line-control);
  background: var(--paper-raised);
  transform: rotate(45deg);
}
.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 {
  margin-top: -7px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.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 {
  margin-bottom: -7px;
  border-top-width: 1px;
  border-left-width: 1px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.bmap-wrap .maplibregl-popup-anchor-left .maplibregl-popup-tip {
  margin-right: -7px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}
.bmap-wrap .maplibregl-popup-anchor-right .maplibregl-popup-tip {
  margin-left: -7px;
  border-top-width: 1px;
  border-right-width: 1px;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.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:
   name and neighbourhood, then the card photo full-bleed on the card's own
   aspect (configs/media.yaml, buildings.card: 1040 x 762), then, in the
   dialog only, notes and View. */
.bmap-card {
  background: var(--paper-raised);
  width: 230px;
  font-family: 'Work Sans', sans-serif;
}
.bmap-card-head,
.bmap-card-body {
  padding: 10px 14px;
}
.bmap-card-photo {
  aspect-ratio: 1040 / 762;
}
.bmap-card-name {
  font-weight: 700;
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: 0.3px;
  color: var(--fg);
  margin-bottom: 2px;
  margin-right: 18px;
}
.bmap-card-hood {
  margin-bottom: 0;
}
.bmap-card-notes {
  color: var(--fg-muted);
  margin-bottom: 6px;
}
.bmap-card-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}
/* The mouse's hover card (pin preview, small cluster's names) is a
   tooltip: the pointer passes through it to the map and the markers
   beneath, and nothing in it is a control. */
.bmap-wrap .maplibregl-popup.bmap-preview,
.bmap-wrap .maplibregl-popup.bmap-preview .maplibregl-popup-content {
  pointer-events: none;
}
.bmap-preview .bmap-card-name {
  margin-right: 0;
}
/* A cluster's hover card: names at the body size, every one the same, in
   a box of a fixed three lines at the card's width, so the rotation
   (buildings-map.js) never resizes or moves the card. A name too long for
   its line ends in an ellipsis. */
.bmap-names {
  padding: 10px 14px;
}
.bmap-names-list.is-fixed {
  height: calc(3 * var(--text-base) * var(--leading-text));
  overflow: hidden;
}
.bmap-names-item {
  font-size: var(--text-base);
  line-height: var(--leading-text);
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* How many of the cluster's buildings the card does not name. */
.bmap-names-more {
  margin-top: 4px;
  font-size: var(--text-base);
  line-height: var(--leading-text);
  color: var(--fg-muted);
}
/* 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;
  }
}