/* The maps on the public "Find your home" screens.
 *
 * Two of them, and this covers both: the map the address screen is drawn on —
 * panned, zoomed and pressed, see find_home_map_controller.js — and the still
 * one behind the second screen's form, see map_background_controller.js.
 *
 * Short, because almost everything on these screens is Tailwind: the pins, the
 * bubbles a zoomed-out screen is drawn with, and the card a pressed pin opens
 * are the only things here Leaflet needs talking out of its own styling.
 *
 * Loaded only by those screens, because they are the only public pages that
 * pull Leaflet in, and everything here exists to override Leaflet's own
 * stylesheet rather than to style anything of ours. Everything else on the
 * screens is Tailwind. Same arrangement as property_map.css, which does this
 * job for the admin map.
 *
 * Loaded after leaflet.css and matching it for specificity, so source order is
 * what carries these. Keep the pair in that order in the link tag.
 */

/* --- The still map behind the second screen --- */

.map-background {
  /* Leaflet paints its container grey for the moment before the tiles land.
     That is right for a map somebody is reading and wrong for one behind a
     form: what belongs under this type is the emerald the rest of the public
     site sits on, whether the tiles are a moment away or — no token, an origin
     off the allowlist — never coming. The section's own background shows
     through instead. */
  background: transparent;

  /* Inert. Every handler is off in map_background_controller.js, but a
     background should not be swallowing a tap or a drag meant for the page
     either, and there is nothing in there to click: the credit is printed under
     the form rather than drawn into the corner of the map. */
  pointer-events: none;
}

/* --- The map the address screen is drawn on --- */

/* Bubbles standing in for the buildings a zoomed-out screen holds too many of
   to draw. The section's own emerald rather than Leaflet's blue, and darker
   than the admin map's so the count on it reads white.

   leaflet.css loads first and sets `display: block` on .leaflet-marker-icon, so
   this is qualified with that class to outrank it — a bare .map-cluster loses
   on source order and the count lands in the corner instead of the middle. */
.leaflet-marker-icon.map-cluster {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: rgb(4 120 87 / 85%); /* emerald-700 */
  box-shadow: 0 0 0 4px rgb(4 120 87 / 20%);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

/* A building, drawn as the thing it is: the glyph out of
   find_home_map_controller.js in a circle, in the section's own eggplant
   against the emerald the bubbles wear, so the two never read as the same kind
   of mark. Dark enough for the glyph to be white on it, and ringed in the same
   colour so a pin standing on a dark building footprint still has an edge.

   Qualified with .leaflet-marker-icon for the reason the bubbles are: leaflet
   .css loads first and sets `display: block` on it, which would leave the glyph
   in the corner rather than the middle.

   The size is written onto each pin by Leaflet, from iconSize — the glyph is a
   share of whatever that turns out to be. */
.leaflet-marker-icon.map-pin {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: #553A47; /* eggplant-700 */
  box-shadow: 0 0 0 2px rgb(36 25 31 / 35%), 0 1px 3px rgb(36 25 31 / 40%); /* eggplant-900 */
  cursor: pointer;
}

.map-pin svg {
  width: 58%;
  height: 58%;
  fill: #ffffff;
}

/* A building somebody is already at: homes that have joined, or neighbours who
   have opened this pin before. Emerald rather than the eggplant every other pin
   wears, which makes the one thing on this map that can be read without pressing
   anything — a street of pins with two warm ones in it, before a single card is
   opened.

   The card's own "already here" line is emerald too, and that is the point: the
   colour out here is the promise and the line in there is what it promised. See
   hereLine() in find_home_map_controller.js, and MultiUnitProperty#pin_here,
   which decides both from one string so they cannot disagree.

   emerald-700 rather than the emerald-600 of the dot on that line, because this
   one has the white building glyph on it and the lighter one does not hold it.
   Which is the colour the zoomed-out bubbles wear, and they are alone in the
   frame: #draw picks clusters or pins and never draws both, so the only place
   the two meet is either side of a zoom. The bubble is a flat disc of text with
   a wide soft ring and this is a glyph in a hard-edged circle, which is the
   difference the eggplant was carrying anyway. */
.leaflet-marker-icon.map-pin--here {
  background-color: #047857; /* emerald-700 */
  box-shadow: 0 0 0 2px rgb(2 44 34 / 30%), 0 1px 3px rgb(2 44 34 / 40%); /* emerald-950 */
}

/* Hovered on something with a pointer: the one about to be pressed lifts out of
   the crowd around it. Transform rather than a size change, so nothing reflows
   and the pin stays anchored where the building is. */
.leaflet-marker-icon.map-pin:hover,
.leaflet-marker-icon.map-pin:focus-visible {
  background-color: #3d2933; /* eggplant-800 */
  z-index: 1000 !important; /* Leaflet writes a per-marker z-index inline. */
}

/* A warm pin darkens into its own colour rather than into the eggplant above,
   which would read as the pin changing what it is under the pointer. Written
   after that rule and at the same specificity, so source order carries it. */
.leaflet-marker-icon.map-pin--here:hover,
.leaflet-marker-icon.map-pin--here:focus-visible {
  background-color: #065f46; /* emerald-800 */
}

/* Several buildings on identical coordinates, drawn as one pin with the count
   on it.

   Which exists because two pins on one point are one pin as far as a press is
   concerned: whichever was drawn last takes every click and the rest cannot be
   reached at any zoom, because zooming in never separates points that are the
   same point. Nor is it rare — around a twentieth of the extract stands on a
   shared point, five in six of those a pair of buildings on the same street.
   Pressing this spreads them onto a ring around the point they share; see
   #spreadOut in find_home_map_controller.js, which is where that ring is
   worked out, and #stackMarker for the rest of the reasoning.

   The element carries .map-pin as well as this one, so the circle, the glyph,
   the warm colour and the hover all come from the rules above: it is still a
   building pin and pressing it still ends up at a building. The count rides
   over the corner of it rather than sitting in the middle of it, because the
   number in the middle is what the zoomed-out bubbles are, and a bubble means
   "stand closer" — which is the one thing pressing this will never do.

   Ecru on eggplant rather than the other way about, so the badge reads as
   something stuck onto the pin rather than as a hole punched out of it, and
   ringed in the pin's own colour so it keeps its edge where it overhangs the
   map. */
.map-stack-count {
  position: absolute;
  top: -0.125rem;
  right: -0.125rem;
  display: grid;
  place-items: center;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.1875rem;
  border-radius: 0.5rem;
  background-color: #f7edde; /* ecru-100 */
  box-shadow: 0 0 0 1.5px #553A47; /* eggplant-700 */
  color: #3d2933; /* eggplant-800 */
  font-size: 0.5625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* The badge takes the pin's colour with it, for the reason the pin has two
   colours at all: a stack holding a building somebody is already at is warm,
   and a warm pin wearing an eggplant badge would read as two things at once. */
.map-pin--here .map-stack-count {
  box-shadow: 0 0 0 1.5px #047857; /* emerald-700 */
  color: #065f46; /* emerald-800 */
}

/* The same pin once its buildings have moved out onto their ring: the point
   itself, with nothing left on it but the count and the legs running back in.

   Smaller, because what stands here now is a place rather than a building —
   the glyph is left out of the markup rather than hidden here, and the size
   comes from FAN_HUB — and haloed rather than shadowed, so it reads as the
   middle of something rather than as one more pin among the ones it just let
   go. Pressing it puts them back. */
.leaflet-marker-icon.map-stack--open {
  box-shadow: 0 0 0 2px rgb(36 25 31 / 35%), 0 0 0 6px rgb(85 58 71 / 20%); /* eggplant-900, -700 */
}

.leaflet-marker-icon.map-pin--here.map-stack--open {
  box-shadow: 0 0 0 2px rgb(2 44 34 / 30%), 0 0 0 6px rgb(4 120 87 / 25%); /* emerald-950, -700 */
}

/* And the count, which is the whole of what it carries now: in the middle of
   the disc rather than over its corner, and drawn in the ecru the badge was
   drawn on. Written after the warm rule above and at the same specificity, so
   source order carries it — an open hub is one colour of count whether or not
   somebody is already inside it. */
.map-stack--open .map-stack-count {
  position: static;
  min-width: 0;
  height: auto;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  color: #f7edde; /* ecru-100 */
  font-size: 0.625rem;
}

/* Pressing a pin shows the card a building's own page opens with: the drawing
   of the building where one has been made, the panels saying what the building
   is, and the button that opens the page — see buildings/_hero, and pinCard()
   in find_home_map_controller.js, which writes everything inside it in the
   page's own Tailwind classes.

   Ours rather than a Leaflet tooltip, and that is the whole reason it is here:
   Leaflet draws a tooltip inside the map's own pane, which is transformed on
   every pan — and a transformed element is a stacking context, so nothing in
   there can be painted over the panel floating above the map however its
   z-index is written. This card is a sibling of the panel instead, one step
   above it. */
.map-tip {
  /* The point given to it is the pin: the card hangs above that point, centred
     on it, and #showCard shifts it sideways near an edge of the map. */
  transform: translate(-50%, -100%);
  border-radius: 0.75rem;
  background-color: #f7edde; /* ecru-100 */
  color: #022c22; /* emerald-950 */
  /* Lifted off the map the way the page's own card is lifted off its
     photograph, in the same emerald rather than in grey. */
  box-shadow: 0 10px 20px -6px rgb(2 44 34 / 45%);
  /* Wide enough to stand three panels beside each other and still leave the
     longest Act — Queensland's "Body Corporate and Community Management Act
     1997" — wrapping to four lines rather than to six. Twenty-three rem is
     about as much as the card can take: it floats over the map it is pointing
     at, and one wide enough never to wrap would cover the street somebody is
     checking it against. The extra rem over the old width is the padding's
     rather than the panels' — a roomier card should not be a card with
     narrower tiles in it.

     The `min()` is the phone's veto, and it is load-bearing rather than
     defensive. `#showCard` holds the card back from either edge of the map, but
     a card wider than the map cannot be held anywhere — it would be clipped by
     the section with its own button off the side — and 23rem is wider than a
     360px handset. Read against the viewport rather than the map because this
     map is the viewport, full-bleed under the nav. */
  width: max-content;
  max-width: min(23rem, calc(100vw - 1.5rem));
}

/* The card's own margins, on a box inside it rather than on the card itself.
   Which is the one thing the drawing above it asked for: a picture inside a
   padded card is a picture with a frame of ecru around it, and this one reaches
   the card's edges. The same move buildings/_hero makes for the same picture,
   and for the same reason — that card clips instead, because it has no tail
   hanging off it to clip along with the corners.

   Everything on the card but the drawing is in here. See pinCard(), which wraps
   the type in it and leaves the picture outside. */
.map-tip-body {
  display: block;
  padding: 1.125rem 1.25rem;
}

/* The drawing of the building, across the top of the card that names it — the
   same picture the building's own page carries at the head of the same card.
   Almost every building has none, and almost every card is therefore exactly
   the card it always was.

   Rounded to the card's own corners rather than clipped to them, and that is
   the reason the radius is written twice: the tail is drawn outside the card by
   ::after below, so the card cannot be told to hide what overflows it.

   Full width, and `height: auto` is what makes the frame on the element mean
   something — pinCard() writes the width and height the drawing will arrive in
   onto it, and those two hold the right space open before a byte of it has
   landed, which is what keeps #drawCard's measurement honest. The ecru is what
   fills that space in the meantime, the same shade the page's own card holds it
   with.

   Which also settles the width of any card carrying one: a drawing is wider
   than the card is allowed to be, so a card with a picture is always as wide as
   a card can get. Deliberate — the same drawing shown three inches wide on one
   pin and two on the next is one card at two sizes for no reason a reader could
   name. */
.map-tip-picture {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.75rem 0.75rem 0 0;
  background-color: #F4e4cd; /* ecru-200 */
}

/* Under the pin instead, for a pin with no room above it: the section clips
   what runs past its own top edge, and a card cut off up there is a button
   nobody can reach rather than a caption half read. #showCard measures and
   decides. */
.map-tip--below {
  transform: translate(-50%, 0);
}

/* The tail, and the point of hanging the card off the pin rather than beside
   it: it lands on the building the card is about. `--tail` is where along the
   card that is, which is the middle until the card has been held back from an
   edge of the map — see #showCard. */
.map-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--tail, 50%);
  margin-left: -0.375rem;
  border: 0.375rem solid transparent;
  border-bottom: 0;
  border-top-color: #f7edde; /* ecru-100 */
}

/* And the same tail on the other edge, for a card hanging below its pin. */
.map-tip--below::after {
  top: auto;
  bottom: 100%;
  border-top: 0;
  border-bottom: 0.375rem solid #f7edde; /* ecru-100 */
}