/* ──────────────────────────────────────────────────────────────────────────
   app/static/css/mesh-map.css
   Shared by the tenant map (/mesh-map) and the public map, for the same reason
   mesh-map.js is shared: a pin that looks different on two pages is a pin that
   means something different on two pages.
   ────────────────────────────────────────────────────────────────────────── */

/* Leaflet's divIcon ships a white background and a 1px border by default,
   which draws a white square behind every SVG pin. This reset is the whole
   reason the class exists -- without it the pins look like stickers. */
.pt-mesh-pin {
  background: none;
  border: none;
}
.pt-mesh-pin svg {
  display: block;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.45));
}

/* Popups are rendered into Leaflet's own container, which is light in both
   themes, so these colours are deliberately absolute rather than themed. */
.pt-mesh-pop b { font-size: 0.92rem; }
.pt-mesh-pop .meta {
  color: #555;
  font-size: 0.75rem;
  margin-top: 0.3rem;
  font-family: var(--v2-font-mono, ui-monospace, monospace);
}
.pt-mesh-pop .approx {
  color: #a15c00;
  font-size: 0.72rem;
  margin-top: 0.3rem;
  line-height: 1.4;
}

/* The legend, and the swatches in it. `.pin` is a wedge rather than a dot so
   the legend shows the same shape the map does. */
.pt-mesh-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
  font-size: 0.78rem;
  color: var(--v2-text-dim);
  align-items: center;
}
.pt-mesh-legend .pin {
  display: inline-block;
  width: 0.62rem;
  height: 0.62rem;
  margin-right: 0.35rem;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  vertical-align: -1px;
}
.pt-mesh-legend .pin.hollow { background: none !important; border: 2px dashed currentColor; }

/* The zoom ceiling, stated on the page rather than only enforced in JS. A map
   that simply stops zooming looks broken; one that says why does not. */
.pt-mesh-note {
  color: var(--v2-text-faint, #8a8f98);
  font-size: 0.74rem;
  margin: 0.55rem 0 0;
}

/* ── Map controls: full screen, reset view, search, selection panel ────────
   All of these live INSIDE the map container, because in fullscreen the map
   element is the only thing on screen -- a control rendered as a sibling would
   simply vanish when fullscreen is entered, which is the classic way this
   feature ships half-working. */

.pt-mesh-ctl {
  background: var(--v2-surface, #fff);
  border: 1px solid var(--v2-border, #d8dce3);
  border-radius: 0.45rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.pt-mesh-buttons button {
  display: block;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-bottom: 1px solid var(--v2-border, #d8dce3);
  background: none;
  color: var(--v2-text, #222);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.pt-mesh-buttons button:last-child { border-bottom: 0; }
.pt-mesh-buttons button:hover { background: var(--v2-surface-2, #eef1f6); }

.pt-mesh-search { width: min(15rem, 45vw); }
.pt-mesh-search input {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  padding: 0.42rem 0.6rem;
  font: inherit;
  font-size: 0.82rem;
  background: none;
  color: var(--v2-text, #222);
}
.pt-mesh-search input:focus { outline: 2px solid var(--v2-accent, #2d6cdf); outline-offset: -2px; }
.pt-mesh-search .results { max-height: 13rem; overflow-y: auto; border-top: 1px solid var(--v2-border, #d8dce3); }
.pt-mesh-search .results button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--v2-border, #d8dce3);
  background: none;
  color: var(--v2-text, #222);
  padding: 0.35rem 0.6rem;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}
.pt-mesh-search .results button:hover { background: var(--v2-surface-2, #eef1f6); }
.pt-mesh-search .results button span {
  display: block;
  color: var(--v2-text-dim, #6b7280);
  font-family: var(--v2-font-mono, ui-monospace, monospace);
  font-size: 0.7rem;
}
.pt-mesh-search .results .none {
  padding: 0.4rem 0.6rem;
  font-size: 0.78rem;
  color: var(--v2-text-dim, #6b7280);
}

.pt-mesh-panel {
  position: relative;
  padding: 0.6rem 0.75rem;
  max-width: min(22rem, 70vw);
  font-size: 0.78rem;
  color: var(--v2-text, #222);
}
.pt-mesh-panel .x {
  position: absolute;
  top: 0.25rem;
  right: 0.35rem;
  border: 0;
  background: none;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--v2-text-dim, #6b7280);
}
.pt-mesh-panel .rows { margin-top: 0.35rem; }
.pt-mesh-panel .rows div { margin: 0.12rem 0; }
.pt-mesh-panel .rows .warn { color: #a15c00; }
.pt-mesh-panel .note {
  margin-top: 0.4rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--v2-border, #d8dce3);
  color: var(--v2-text-dim, #6b7280);
  font-size: 0.72rem;
  line-height: 1.45;
}

/* The CSS fallback for browsers that refuse fullscreen on a plain div
   (Safari on iOS). Not a lesser experience -- the same one without the browser
   chrome change. */
.pt-mesh-fs {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999;
  height: 100% !important;
  width: 100% !important;
  max-height: none !important;
  border-radius: 0 !important;
  border: 0 !important;
}
/* The native fullscreen element needs the same, or it sits letterboxed in a
   black field at its original height. */
#map:fullscreen, .pt-mesh-map:fullscreen {
  height: 100% !important;
  width: 100% !important;
  border-radius: 0 !important;
  border: 0 !important;
}

/* A selected pin rises above its neighbours so the arcs read from it. */
.pt-mesh-pin.is-selected { z-index: 1200 !important; }