/* Member map (map.js + map-core.js, 2026-11-11). Every class starts with mp; colors are the portal's --u2 variables,
   with fallbacks so map-webview.html (no portal stylesheet) looks the same in the phone app. */
.mpIc{flex:none;vertical-align:-3px}
.mpSr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mpRoot{color:var(--text,#602D36)}
.mpTop{margin-bottom:8px}
.mpPriv{display:flex;align-items:center;gap:8px;margin:0 0 16px;font-size:14px;color:var(--muted,#7A5A5F)}

/* my spot */
.mpMe{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 16px;padding:14px 18px;border-radius:16px;
  background:var(--u2-surf,#F6F3E9);border:1px solid var(--border,rgba(96,45,54,.14))}
.mpMe > .mpIc{color:var(--u2-link,#CE3D1C)}
.mpMeTx{flex:1;min-width:220px;display:flex;flex-direction:column;gap:2px}
.mpMeTx b{font:700 16px/1.35 Poppins,sans-serif}
.mpMeTx span{font-size:14px;color:var(--muted,#7A5A5F)}
.mpMeBtns,.mpZipF{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mpZip{height:42px;width:130px;padding:0 14px;border-radius:12px;border:1.5px solid var(--border,rgba(96,45,54,.14));background:var(--bg,#fff);
  color:var(--text,#602D36);font:500 16px Poppins,sans-serif;letter-spacing:.04em}
.mpZip:focus{outline:2px solid var(--u2-link,#CE3D1C);outline-offset:1px}
.mpTextBtn{border:0;background:none;color:var(--u2-link,#CE3D1C);font:600 14px Poppins,sans-serif;cursor:pointer;padding:8px 6px;text-decoration:underline;text-underline-offset:3px}
.mpLink{color:var(--u2-link,#CE3D1C);font-weight:600;font-size:14px;align-self:center}
.mpConfirm{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:14px}
.mpErr{flex-basis:100%;margin:4px 0 0;color:var(--psych,#CE3D1C);font-size:14px;font-weight:600}
.mpOops{padding:16px;border-radius:14px;border:1px dashed var(--u2-ring,rgba(96,45,54,.35));font-size:15px;line-height:1.6}

/* map + list */
.mpBody{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:20px;align-items:start}
.mpMapWrap{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--border,rgba(96,45,54,.14));background:var(--u2-surf,#F6F3E9)}
.mpMap{height:max(440px,calc(100vh - 330px));width:100%;background:#E9E6DF}
.mpMap.mpDark{background:#262626}
.mpMap.mpFull{height:100%;border-radius:0}
.mpTools{position:absolute;top:10px;right:10px;z-index:500;display:flex;flex-direction:column;gap:6px}
.mpTool{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--border,rgba(96,45,54,.14));
  background:var(--bg,#fff);color:var(--text,#602D36);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.mpTool:hover{background:var(--u2-surf,#F6F3E9)}
.mpTool:focus-visible,.mpRow:focus-visible,.mpX:focus-visible{outline:2px solid var(--u2-link,#CE3D1C);outline-offset:2px}
.mpEmptyOv{position:absolute;left:0;right:0;bottom:18px;z-index:500;display:flex;justify-content:center;pointer-events:none;padding:0 12px}
.mpEmptyOv > div{pointer-events:auto;max-width:420px;background:var(--bg,#fff);color:var(--text,#602D36);border-radius:14px;padding:12px 16px;
  box-shadow:0 6px 24px rgba(0,0,0,.16);display:flex;flex-direction:column;gap:2px;text-align:center}
.mpEmptyOv b{font:700 15px/1.3 Poppins,sans-serif}
.mpEmptyOv span{font-size:13.5px;color:var(--muted,#7A5A5F)}

.mpNear{background:var(--surface,#fff);border:1px solid var(--border,rgba(96,45,54,.14));border-radius:18px;padding:16px}
.mpNearHead{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.mpNearHead h2{margin:0;font:700 18px/1.3 Poppins,sans-serif;color:var(--text,#602D36)}
.mpNearHead span,.mpNearEmpty{font-size:13.5px;color:var(--muted,#7A5A5F)}
.mpNearList{list-style:none;margin:0;padding:0;max-height:calc(100vh - 380px);min-height:120px;overflow:auto}
.mpRow{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 6px;border:0;border-radius:12px;background:none;color:inherit;
  text-align:left;cursor:pointer;font:inherit}
.mpRow:hover{background:var(--u2-active,rgba(96,45,54,.08))}
.mpRowTx{flex:1;min-width:0;display:flex;flex-direction:column}
.mpRowTx b{font:600 15px/1.3 Poppins,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mpRowTx span{font-size:13px;color:var(--muted,#7A5A5F);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mpDist{flex:none;font-size:13px;font-weight:700;color:var(--text,#602D36)}
.mpMore{margin-top:8px;width:100%}

/* avatars: photo or initials on a color, like the Community */
.mpAv{flex:none;display:inline-grid;place-items:center;border-radius:999px;overflow:hidden;color:#fff;font-family:Poppins,sans-serif;font-weight:700;line-height:1;background:#602D36}
.mpAv img{width:100%;height:100%;object-fit:cover;display:block}

/* markers + clusters (Leaflet divIcons) */
.leaflet-div-icon.mpPinWrap,.leaflet-div-icon.mpCl{background:none;border:0}
.mpPin{display:grid;place-items:center;width:44px;height:44px;border-radius:999px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.28);transition:transform .12s}
.mpPin .mpAv{width:38px!important;height:38px!important}
.mpPin.me{background:#CE3D1C}
.mpPin.sel{transform:scale(1.18);background:#E1E782;box-shadow:0 0 0 3px #602D36,0 4px 12px rgba(0,0,0,.35)}
.mpPinWrap:hover .mpPin{transform:scale(1.08)}
.mpPinWrap:focus{outline:none}
.mpPinWrap:focus-visible .mpPin{box-shadow:0 0 0 3px #CE3D1C,0 2px 8px rgba(0,0,0,.28)}
.mpCl{display:grid!important;place-items:center;border-radius:999px;background:rgba(96,45,54,.22)}
.mpCl span{display:grid;place-items:center;width:calc(100% - 8px);height:calc(100% - 8px);border-radius:999px;background:#602D36;color:#FAF8EE;
  font:700 14px Poppins,sans-serif;box-shadow:0 2px 8px rgba(0,0,0,.25);border:2px solid #FAF8EE}
.mpDark .mpCl{background:rgba(225,231,130,.25)}
.mpDark .mpCl span{background:#E1E782;color:#231215;border-color:#231215}
.mpMap .leaflet-control-attribution{font-size:10px}
/* the OpenStreetMap tiles are bright: calm them to the portal's look, and invert them for dark mode */
.mpMap.mpSoft .leaflet-tile-pane{filter:saturate(.45) brightness(1.03) contrast(.92)}
.mpMap.mpInvert .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) saturate(.35) brightness(.9) contrast(.85)}
.mpMap.mpDark .leaflet-control-attribution{background:rgba(35,18,21,.8);color:#D9CCCE}
.mpMap.mpDark .leaflet-control-attribution a{color:#E1E782}
.mpMap.mpDark .leaflet-bar a{background:#33191E;color:#FAF8EE;border-color:#42232A}

/* the card: a popover beside the pin on a computer */
.mpPop{position:absolute;z-index:600;width:300px}
.mpCard{position:relative;background:var(--surface,#fff);color:var(--text,#602D36);border-radius:16px;padding:16px;box-shadow:0 14px 40px rgba(0,0,0,.25);
  border:1px solid var(--border,rgba(96,45,54,.14))}
.mpX{position:absolute;top:8px;right:8px;width:40px;height:40px;border-radius:10px;border:0;background:none;color:var(--text,#602D36);cursor:pointer;display:grid;place-items:center}
.mpX:hover{background:var(--u2-active,rgba(96,45,54,.08))}
.mpCardTop{display:flex;align-items:center;gap:12px;margin-right:40px}
.mpCardTop > div{display:flex;flex-direction:column;min-width:0}
.mpCardName,.mpCardTop h2{font:700 18px/1.25 Poppins,sans-serif;margin:0;color:var(--text,#602D36)}
.mpCardCred{font-size:13.5px;color:var(--muted,#7A5A5F)}
.mpFacts{list-style:none;margin:12px 0 14px;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14.5px}
.mpFacts li{display:flex;align-items:center;gap:8px}
.mpCardNote{margin:0;font-size:14px;color:var(--muted,#7A5A5F)}
.mpSend{display:inline-flex;align-items:center;gap:8px;width:100%;justify-content:center}

/* overlay: the card as a sheet on phones, and the compose box */
.mpOv{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px}
.mpOvBg{position:absolute;inset:0;background:rgba(26,10,14,.45)}
.mpPanel{position:relative;width:min(520px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--surface,#fff);color:var(--text,#602D36);
  border-radius:20px;padding:20px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.mpOv.sheet .mpPanel{padding:0;background:none;box-shadow:none}
.mpOv.sheet .mpCard{border-radius:20px 20px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom));box-shadow:none}
.mpCompose{display:flex;flex-direction:column;gap:10px}
textarea.mpText{width:100%;box-sizing:border-box;min-height:140px;resize:vertical;padding:12px 14px;border-radius:14px;border:1.5px solid var(--border,rgba(96,45,54,.14));
  background:var(--bg,#fff);color:var(--text,#602D36);font:400 16px/1.5 Poppins,sans-serif;margin-top:6px}
textarea.mpText:focus{outline:2px solid var(--u2-link,#CE3D1C);outline-offset:1px}
.mpCount{align-self:flex-end;font-size:12.5px;color:var(--muted,#7A5A5F);margin-top:-6px}
.mpHint{margin:0;font-size:13.5px;color:var(--muted,#7A5A5F);line-height:1.5}
.mpHint.small{font-size:12.5px}
.mpAgree{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;cursor:pointer;padding:10px 12px;border-radius:12px;background:var(--u2-surf,#F6F3E9)}
.mpAgree input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:#CE3D1C}
.mpComposeBtns{display:flex;gap:8px;flex-wrap:wrap}
.mpRoot .u2Btn:disabled,.mpPanel .u2Btn:disabled,.mpHome .u2Btn:disabled{opacity:.45;cursor:not-allowed}
.mpSent{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:8px 0}
.mpSent .mpIc{color:#2F6F5E}
.mpSent h2{margin:0;font:700 22px/1.2 Poppins,sans-serif}
.mpSent p{margin:0 0 6px;font-size:15px;line-height:1.55}

/* the one-time Home card (same shape as the feedback card) */
.mpHome{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 18px;padding:16px 20px;border-radius:16px;
  background:var(--u2-surf,#F6F3E9);border:1px solid var(--border,rgba(96,45,54,.14));color:var(--text,#602D36)}
.mpHomeIc{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--u2-hero,#602D36);color:var(--u2-lime,#E1E782)}
.mpHome.done > .mpIc{color:#2F6F5E}
.mpHomeTx{flex:1;min-width:220px;display:flex;flex-direction:column;gap:2px}
.mpHomeTx b{font:700 17px/1.3 Poppins,sans-serif}
.mpHomeTx span{font-size:14px;color:var(--muted,#7A5A5F)}
.mpHomeBtns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mpHomeBtns a{text-decoration:none}

html[data-theme="dark"] .mpPin{background:#33191E}
html[data-theme="dark"] .mpPin.me{background:#E8451F}

/* the phone tab bar has 7 tabs once Map is in it: a little smaller so every label stays on one line */
@media (max-width:430px){ html.u2 #u2Tabs:has(> .u2Tab2:nth-child(7)) .u2Tab2{font-size:9.5px} }
@media (max-width:374px){ html.u2 #u2Tabs:has(> .u2Tab2:nth-child(7)) .u2Tab2{font-size:8.5px} }

@media (max-width:900px){
  .mpBody{grid-template-columns:1fr}
  .mpMap{height:58vh;min-height:340px}
  .mpNearList{max-height:none}
}
@media (max-width:700px){
  .mpOv{padding:0}
  .mpOv .mpPanel{align-self:flex-end;border-radius:20px 20px 0 0;max-height:92vh;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .mpOv.sheet .mpPanel{width:100%;padding-bottom:0}
  .mpHome .mpHomeBtns{width:100%}
  .mpZip{flex:1;min-width:110px}
}
@media (prefers-reduced-motion:reduce){.mpPin{transition:none}}

/* Settings > Member map (2026-11-12): Change ZIP and Remove me live here, not on the map page */
.mpSetBtns{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.u2SetSec .mpZipF{margin-top:10px}
.mpSetDone{margin:10px 0 0;color:#2F6F5E;font-weight:600;font-size:14px}
[data-theme="dark"] .mpSetDone,[data-theme="dark"] .mpMe.done > .mpIc{color:#7FC4AE}
.mpMe.done > .mpIc{color:#2F6F5E}
.mpMe.done a{color:inherit;text-decoration:underline}

/* Messages on the map (2026-11-12, messages.js): the "New message" box beside the map, "Add to message" on a card,
   and the cluster card ("4 members in Phoenix, AZ" + "Message these 4 members") */
.mpCmpBox{padding:18px}
.mpCmpHost{display:block}
.mpCardNote.mpOn{display:flex;align-items:center;gap:6px;margin:0 0 8px;color:#2F6F5E;font-weight:600}
[data-theme="dark"] .mpCardNote.mpOn{color:#7FC4AE}
.mpClTitle{display:block;margin:2px 44px 12px 0}
.mpClList{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:7px;font-size:14.5px}
.mpClList li{display:flex;align-items:center;gap:9px;min-width:0}
.mpClList li > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mpClMore{color:var(--muted,#7A5A5F);padding-left:39px}
.mpClZoom{width:100%;margin-top:8px;justify-content:center}