/*
    THE PIN'S OWN STATUS, OVER THE MAP IT DESCRIBES.

    Everything Components/Shared/SiteLocationPicker.razor adds on top of the map it hosts, and
    nothing else.

    "Not placed" / "Placed by hand" / "From the geocoder" is a statement ABOUT the map, so it is
    read on the map. As a third labelled field beside latitude and longitude it reads as a third
    thing to fill in, and there is nothing to type into it.

    pointer-events: none, because it is a readout: it must not swallow the click that would have
    placed a pin under it.

    WHAT IT DOES NOT OWN. The map box and the Leaflet overrides are site-map.css's, beside the
    component that draws them.
*/

/* THE MAP SITS IN A FRAME, like every other block of content in the product. Imagery running to a
   raw edge inside a card reads as a picture that has escaped its box, and the tiles at the boundary
   are the ones a reader is least able to tell from the page behind them. The corner is the control
   step rather than the card step: nothing inside a card takes a corner looser than the card's. */
.sv-sitepin {
  position: relative;

  /* THE BADGE'S NUMBER IS CONFINED TO THIS BOX, for the reason `.sv-map` confines Leaflet's. The
     badge is a SIBLING of the map rather than inside it, so the map's own isolation does not reach
     it: positioned at the top of a frame that scrolls under a sticky page head, it painted straight
     over the header and the buttons on it. `position: relative` alone does not stop that - without
     a z-index it establishes no stacking context, so a number written here is still measured
     against the page. NOT A BIGGER NUMBER ON THE CHROME, which wins here and loses to the next box
     that picks a bigger one; the defect is a number escaping its box, and this is the box. */
  isolation: isolate;

  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius-control);
  overflow: hidden;
}

.sv-sitepin__badge {
  position: absolute;
  top: var(--sv-space-3);
  right: var(--sv-space-3);

  /* ONE, NOT 900. It has only the map beside it to clear, and Leaflet's 400s and 800s never reach
     out of `.sv-map` to be cleared at all. 900 was a number picked to beat a stack this element
     cannot see, and a number that large is only ever read as "beat everything" by whoever copies
     it next. */
  z-index: 1;
  pointer-events: none;

  /* PHOTOGRAPHY IS NOT A DESIGN SURFACE, and this is the same fact .sv-figure__scrim exists for.
     A badge on a page reads its state off a 14% accent wash, which over imagery is nothing at all:
     the amber lettering then sits straight on whatever the roof happens to be, and over a bright
     one it disappears. The ground is opaque here in both states and the accent stays where it
     carries the meaning - the type and the border. */
  background: var(--sv-bg-raised);
}