.home-shell {
  width: 100%;
  min-height: 100dvh;
  overflow: hidden;
  background: #06131d;
}
.home-main {
  width: 100%;
  height: 100dvh;
  min-height: 0;
  padding: calc(env(safe-area-inset-top) + var(--header-height)) 0 calc(env(safe-area-inset-bottom) + var(--footer-height));
  overflow: hidden;
}
.home-map-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #06131d;
  box-shadow: none;
  isolation: isolate;
}
.home-map {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none;
  background: #06131d;
  isolation: isolate;
}
.home-map .leaflet-tile { background: #06131d; }
/* Render each live tile once with native colours. Android WebView must not blend,
   filter or retain a second visual map layer. */
.home-map .leaflet-tile-pane,
.home-map .leaflet-tile-container { opacity: 1; }
.home-map.leaflet-container img.leaflet-tile {
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
}
.home-map .leaflet-control-attribution {
  right: 7px;
  bottom: 7px;
  max-width: min(72%,520px);
  padding: 3px 7px;
  border-radius: 7px;
  color: rgba(255,255,255,.88);
  background: rgba(4,9,13,.72);
  font-size: 8px;
  line-height: 1.25;
  backdrop-filter: blur(8px);
}
.home-map .leaflet-control-attribution a { color: white; text-decoration: underline; }
/* Keep every Leaflet pane inside the map layer so tiles can never cover homepage controls. */
.home-map-stage > .map-search,
.home-map-stage > .map-tools,
.home-map-stage > .map-status { isolation: isolate; }
.map-search {
  position: absolute;
  z-index: 1002;
  top: 18px;
  left: 50%;
  display: flex;
  align-items: center;
  width: min(calc(100% - 34px),730px);
  height: 54px;
  padding: 0 11px 0 20px;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 18px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  transform: translateX(-50%);
  backdrop-filter: blur(20px);
}
.map-search .search-icon { display: grid; place-items: center; color: #05080c; }
.map-search input { flex: 1; min-width: 0; height: 100%; margin-left: 14px; border: 0; outline: 0; color: #252931; background: transparent; font-size: .98rem; font-weight: 430; }
.map-search input::placeholder { color: #707680; }
.search-filter { display: grid; place-items: center; width: 45px; height: 45px; border: 0; border-left: 1px solid #d5d8dd; color: #0b0d10; background: transparent; }
.map-tools { position: absolute; z-index: 1003; display: grid; gap: 9px; }
.map-tools-right { right: 13px; bottom: 18px; top: auto; transform: none; }
.map-tools button { display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border: 1px solid rgba(17,23,30,.12); border-radius: 14px; color: #11161d; background: rgba(255,255,255,.97); box-shadow: 0 8px 20px rgba(0,0,0,.22); transition: transform .16s ease,box-shadow .16s ease; }
.map-tools button:active { transform: scale(.94); }
.map-tools button.working svg { animation: spin 1s linear infinite; }
.map-tools button.active { color: white; background: #141a21; }
.map-tools .tool-incident { color: var(--red); }
.map-tools .tool-family { color: var(--blue); }
.map-tools .tool-nearby { color: var(--orange); }
.map-tools .tool-checkin { color: var(--teal); }
.map-status { position: absolute; z-index: 1004; left: 50%; top: 86px; padding: 8px 13px; border-radius: 999px; color: white; background: rgba(8,12,16,.82); box-shadow: 0 7px 18px rgba(0,0,0,.18); font-size: .7rem; transform: translateX(-50%); transition: opacity .2s ease; }
.map-status.error { background: rgba(151,11,21,.9); }
.map-status.hidden { opacity: 0; pointer-events: none; }
.tracksos-div-icon,.tracksos-user-icon { background: transparent; border: 0; }
/* Compact premium map pins shared by Home and Nearby Help. */
.place-map-marker {
  --place-pin-color: #175fd1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 26px;
  color: #fff;
  pointer-events: auto;
}
.place-map-pin {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 32px;
  filter: drop-shadow(0 5px 5px rgba(0,0,0,.3));
}
.place-map-pin::after {
  position: absolute;
  z-index: 0;
  bottom: 3px;
  width: 11px;
  height: 11px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  border-radius: 2px;
  content: "";
  background: var(--place-pin-color);
  transform: rotate(45deg);
}
.place-map-pin-face {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  align-self: start;
  width: 26px;
  height: 26px;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg,color-mix(in srgb,var(--place-pin-color) 78%,white),var(--place-pin-color));
  box-shadow: inset 0 1px rgba(255,255,255,.38);
}
.place-pin-icon { display: block; }
.place-map-label {
  max-width: 104px;
  margin-top: 0;
  padding: 3px 6px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 7px;
  color: #fff;
  background: rgba(3,7,10,.88);
  box-shadow: 0 4px 10px rgba(0,0,0,.22);
  font-size: 9px;
  font-weight: 680;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.place-map-marker--police { --place-pin-color: #165cc9; }
.place-map-marker--hospitals,
.place-map-marker--ambulance,
.place-map-marker--fire { --place-pin-color: #d91420; }
.place-map-marker--clinics,
.place-map-marker--doctors,
.place-map-marker--pharmacies { --place-pin-color: #149a58; }
.place-map-marker--petrol { --place-pin-color: #e77800; }
.place-map-marker--schools { --place-pin-color: #6042b8; }
.place-map-marker--shopping { --place-pin-color: #8138ba; }
.place-map-marker--repairs,
.place-map-marker--towing { --place-pin-color: #59697c; }
.place-map-marker--other { --place-pin-color: #c20d18; }
.tracksos-search-result-icon .place-map-pin { animation: searchPinPulse .8s ease-out 2; }
@keyframes searchPinPulse { 50% { transform: scale(1.12); } }
.live-location-pin { position: relative; display: grid; place-items: center; width: 84px; height: 70px; }
.location-pulse { position: absolute; left: 50%; bottom: 12px; width: 42px; height: 18px; border-radius: 50%; background: rgba(255,37,45,.28); box-shadow: 0 0 0 10px rgba(255,30,40,.12),0 0 22px rgba(255,30,40,.58); transform: translateX(-50%); animation: pulse 2.1s ease-out infinite; }
.location-drop { position: absolute; left: 50%; bottom: 19px; display: grid; place-items: center; width: 28px; height: 36px; clip-path: polygon(50% 100%,12% 59%,7% 35%,18% 13%,37% 2%,63% 2%,82% 13%,93% 35%,88% 59%); background: linear-gradient(#f41d27,#b4060d); filter: drop-shadow(0 6px 6px rgba(0,0,0,.35)); transform: translateX(-50%); }
.location-drop i { width: 10px; height: 10px; margin-top: -12px; border-radius: 50%; background: white; }
.live-location-pin b { position: absolute; top: 0; padding: 4px 8px; border-radius: 6px; color: white; background: rgba(3,7,10,.86); font-size: .52rem; font-weight: 600; white-space: nowrap; }
@keyframes pulse { 0% { opacity:.85; transform:translateX(-50%) scale(.55); } 80%,100% { opacity:0; transform:translateX(-50%) scale(1.45); } }
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:680px) {
  .home-main { padding: calc(env(safe-area-inset-top) + var(--header-height)) 0 calc(env(safe-area-inset-bottom) + var(--footer-height)); }
  .home-map-stage { border-radius: 0; }
  .map-search { top: 14px; width: calc(100% - 24px); height: 50px; padding-left: 15px; border-radius: 16px; }
  .map-search input { font-size: .9rem; }
  .search-filter { width: 42px; height: 42px; }
  .map-tools-right { right: 9px; bottom: 14px; top: auto; }
  .map-tools button { width: 44px; height: 44px; border-radius: 12px; }
  .map-tools button svg { width: 22px; height: 22px; }
  .map-status { top: 72px; max-width: calc(100% - 36px); text-align: center; }
}
@media (max-height:720px) {
  .home-main { padding-top: calc(env(safe-area-inset-top) + var(--header-height)); padding-bottom: calc(env(safe-area-inset-bottom) + var(--footer-height)); }
  .map-tools-right { bottom: 10px; }
}

.home-map[data-map-connected="true"] { background: #dbe5ec; }
.home-map[data-network="offline"] { filter: grayscale(.18); }

/* Native Kotlin map launcher is intentionally styled like the existing map controls. */
.map-tools [data-open-native-home-map] { color: #fff; background: #101826; border-color: #101826; }


/* TrackSOS v1.1.239 — keep the homepage search prompt readable on narrow phones. */
.map-search input {
  padding-right: 6px;
  text-overflow: ellipsis;
}
@media (max-width: 420px) {
  .map-search input { margin-left: 10px; font-size: .82rem; }
}