/* The session map (lib/observer/map/): after vendor/leaflet/leaflet.css and theme.css.
   Pins reproduce the app's MemberPin and MeetPin (widgets/member_pin.dart, meet_point.dart). */

.fanal-map-root {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Leaflet's container. Before any tile, the colour of the toned tiles, not a light grey flashing at night. */
.fanal-map.leaflet-container {
  position: absolute;
  inset: 0;
  /* Leaflet's panes and their z-indexes stay inside: the overlays, after it, go on top. */
  isolation: isolate;
  background: var(--md-surface-container);
  font: inherit;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.fanal-map.leaflet-container:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: -2px;
}

/* Tiles toned like the app's (FanalTheme.mapFilter): the SVG filters MapView adds, on each tile (see
   MapView._filters). */
.fanal-map-filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.fanal-map .leaflet-tile {
  filter: url(#fanal-tiles-light);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .fanal-map .leaflet-tile {
    filter: url(#fanal-tiles-dark);
  }
}

:root[data-theme=dark] .fanal-map .leaflet-tile {
  filter: url(#fanal-tiles-dark);
}

/* Markers: only their painted parts take the pointer (.fanal-hit), the rest of the box lets drags and
   right-clicks through to the map. Explicit stacking instead of Leaflet's order by latitude. */
.fanal-map .leaflet-marker-icon.fanal-pin,
.fanal-map .leaflet-marker-icon.fanal-meet {
  pointer-events: none;
}

.fanal-map .fanal-z1 {
  z-index: 1 !important;
}

.fanal-map .fanal-z2 {
  z-index: 2 !important;
}

.fanal-map .fanal-z3 {
  z-index: 3 !important;
}

.fanal-map .fanal-hit {
  pointer-events: auto;
}

.fanal-map .fanal-draft .fanal-hit {
  pointer-events: none;
}

/* Text inside markers inherits Material's bodyMedium metrics, as in the app's map. */
.fanal-pin-in,
.fanal-meet-in {
  position: relative;
  color: #fff;
  line-height: 1.43;
  letter-spacing: 0.25px;
}

.fanal-pin-in {
  width: 132px;
  height: 104px;
}

.fanal-pin-pointer {
  position: absolute;
  left: 40px;
  top: 26px;
  width: 52px;
  height: 52px;
}

.fanal-pin-pointer svg {
  display: block;
}

.fanal-pin-dot {
  position: absolute;
  left: 49px;
  top: 35px;
  width: 34px;
  height: 34px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2.5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.38);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.fanal-pin-dot.is-sos {
  border: 4px solid var(--fanal-status-sos);
}

.fanal-pin-dot.is-faded {
  opacity: 0.8;
}

.fanal-pin-status,
.fanal-pin-name,
.fanal-meet-label {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}

.fanal-pin-status {
  top: 2px;
}

.fanal-pin-name {
  top: 75px;
}

/* The compact StatusPill. */
.fanal-pin-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 1px 6px;
  border: 1.5px solid #fff;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
}

.fanal-pin-pill .icon {
  flex: none;
}

.fanal-pin-name > span,
.fanal-meet-label > span {
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: 8px;
  font-size: 11px;
}

.fanal-pin-name > span {
  padding: 2px 7px;
  background: rgba(0, 0, 0, 0.62);
  font-weight: 600;
}

.fanal-meet-in {
  width: 140px;
  height: 96px;
}

.fanal-meet.is-faded .fanal-meet-in {
  opacity: 0.4;
}

.fanal-meet-flag {
  position: absolute;
  left: 50px;
  top: 28px;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #fff;
  border-radius: 12px;
  background: var(--fanal-beam);
  color: var(--fanal-night);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.fanal-meet-label {
  top: 72px;
}

.fanal-meet-label > span {
  padding: 2px 8px;
  background: var(--fanal-beam);
  color: var(--fanal-night);
  font-weight: 700;
}

.fanal-map .is-hidden {
  display: none;
}

/* Overlays: the scale, the attribution and the buttons, kept inside the uncovered part of the map. They fade
   out (180 ms) when the sheet rises, then stop taking the pointer and focus. */
.fanal-map-overlays {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fanal-map-fade {
  transition: opacity 180ms, visibility 0s;
}

.fanal-map-overlays.is-hidden .fanal-map-fade {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms, visibility 0s 180ms;
}

/* flutter_map's Scalebar: the label centred over a bracket, onSurface, 12 px medium, stroke 1.5. */
.fanal-map-scale {
  position: absolute;
  left: calc(var(--map-inset-left, 0px) + 16px);
  bottom: calc(var(--map-inset-bottom, 0px) + 14px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--md-on-surface);
}

.fanal-map-scale.is-hidden {
  display: none;
}

.fanal-map-scale-label {
  align-self: stretch;
  position: relative;
  left: 0.75px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0;
  white-space: nowrap;
}

.fanal-map-scale svg {
  display: block;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
}

/* "© OpenStreetMap": labelSmall on the surface at 75 %, radius 6. */
.fanal-map-attribution {
  position: absolute;
  left: calc(var(--map-inset-left, 0px) + 16px);
  bottom: calc(var(--map-inset-bottom, 0px) + 44px);
  isolation: isolate;
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--md-on-surface);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.5px;
  text-decoration: none;
  pointer-events: auto;
}

.fanal-map-attribution::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--md-surface);
  opacity: 0.75;
}

.fanal-map-attribution:hover {
  text-decoration: underline;
}

.fanal-map-attribution:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

/* The map buttons (FABs), bottom right, 10 px apart. */
.fanal-map-buttons {
  position: absolute;
  right: calc(var(--map-inset-right, 0px) + 12px);
  bottom: calc(var(--map-inset-bottom, 0px) + 20px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fanal-map-buttons > * {
  pointer-events: auto;
}