/* ============================================================
   Joshua Generation Church — Durbanville AM community map
   Monochrome brand system: ink + light map + one warm accent
   ============================================================ */

:root{
  --ink:        #0a1a26;          /* deep navy-blue */
  --ink-2:      #0e2433;
  --ink-3:      #143042;
  --line:       rgba(255,255,255,.12);
  --line-soft:  rgba(255,255,255,.07);
  --text:       #eef5fa;
  --text-dim:   #a3b8c6;
  --text-faint: #6b8395;
  --accent:     #0E80C4;          /* Joshua Generation logo blue */
  --accent-2:   #36a6e6;
  --accent-deep:#0a5c8e;
  --accent-ink: #ffffff;          /* text on the blue */
  --accent-soft:rgba(14,128,196,.18);
  --wa:         #25D366;          /* WhatsApp green */
  --sidebar-w:  366px;
  --radius:     14px;
  --shadow:     0 18px 50px -20px rgba(0,8,16,.62);
  font-synthesis: none;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

.app{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  height:100dvh;
}

/* ---------------- Sidebar ---------------- */
.sidebar{
  position:relative;
  background:linear-gradient(180deg, #0E80C4 0%, #0a5c8e 100%);   /* Joshua Generation logo blue */
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  min-height:0;
  z-index:1000;
}

.brand{
  display:flex; align-items:center; gap:14px;
  padding:20px 22px 18px;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.brand__mark{ width:48px; height:48px; display:block; flex:0 0 auto; box-sizing:border-box;
  padding:5px; background:#fff; border-radius:50%;        /* white plate so the mark reads on blue */
  filter:drop-shadow(0 6px 16px rgba(4,30,48,.32)); }
.brand__caption{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.brand__name{ font-family:"Poppins",sans-serif; font-weight:700; font-size:16px;
  letter-spacing:-.01em; color:#fff; line-height:1.15; }
.brand__place{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.78); }

/* search */
.search{
  position:relative; margin:16px 18px 10px;
}
.search__icon{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; fill:none; stroke:#5b7488; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; pointer-events:none;
}
.search input{
  width:100%; height:42px; padding:0 14px 0 38px;
  background:rgba(255,255,255,.96); border:1px solid rgba(255,255,255,.55);
  border-radius:11px; color:var(--ink); font-size:13.5px; font-family:inherit;
  outline:none; transition:border-color .18s, background .18s;
}
.search input::placeholder{ color:#5b7488; }
.search input:focus{ border-color:#fff; background:#fff; }

.list-head{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:8px 22px 6px;
}
.list-head span:first-child{
  font-family:"Poppins",sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:#f1f8fd;
}
.list-head__hint{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.82); }

/* zone list */
.zone-list{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  padding:6px 12px 14px;
  scrollbar-width:thin; scrollbar-color:var(--ink-3) transparent;
}
.zone-list::-webkit-scrollbar{ width:8px; }
.zone-list::-webkit-scrollbar-thumb{ background:var(--ink-3); border-radius:8px; }

/* an area row plus the leader panel that expands beneath it (desktop) */
.zone-group{ margin:4px 0; }
.zone-group.is-open .zone-item{ border-radius:14px 14px 6px 6px; }

.zone-item{
  width:100%; text-align:left; cursor:pointer;
  display:flex; align-items:center; gap:13px;
  padding:11px 12px;
  background:rgba(255,255,255,.97); border:1px solid rgba(255,255,255,.6); border-radius:14px;
  color:inherit; font-family:inherit;
  transition:background .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.zone-item:hover{ background:#fff; border-color:#fff; box-shadow:0 6px 16px rgba(4,30,48,.22); }
.zone-item.is-active{ background:#fff; border-color:#fff; box-shadow:0 6px 16px rgba(4,30,48,.28); }
.zone-item:active{ transform:scale(.99); }

/* area badge — a solid white circle with the area's initial in logo blue */
.zone-item__pin{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:grid; place-content:center; position:relative;
  background:#fff; border:1.5px solid rgba(14,128,196,.35); box-shadow:0 1px 4px rgba(4,30,48,.14);
  font-family:"Poppins",sans-serif; font-weight:700; font-size:15px; color:var(--accent);
  transition:border-color .15s, box-shadow .15s;
}
.zone-item__pin span{ position:relative; z-index:1; }
/* light the badge up on hover (desktop) */
.zone-item:hover .zone-item__pin{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(14,128,196,.22), 0 5px 14px rgba(14,128,196,.4);
}
.zone-item.is-active .zone-item__pin{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(14,128,196,.5), 0 5px 14px rgba(14,128,196,.45);
}
.zone-item__main{ flex:1 1 auto; min-width:0; }
.zone-item__area{ display:block; font-weight:600; font-size:14px; letter-spacing:-.01em; color:var(--ink); }
.zone-item__meta{ display:block; font-size:12px; color:#5b7488; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.zone-item__count{
  flex:0 0 auto; font-size:11px; font-weight:700; color:var(--accent-deep);
  background:rgba(14,128,196,.12); border:1px solid rgba(14,128,196,.28); border-radius:999px; padding:3px 9px;
}

/* ---------------- Expanding leader panel (desktop sidebar) ----------------
   0fr → 1fr on a grid row animates to the content's natural height, so the
   rest of the list slides down without hard-coding a max-height. */
.zone-panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .3s cubic-bezier(.22,.61,.36,1);
}
.zone-group.is-open .zone-panel{ grid-template-rows:1fr; }
.zone-panel__in{ overflow:hidden; min-height:0; }
.zone-panel__in::after{ content:""; display:block; height:6px; }   /* clipped while collapsed */

.lcard{
  position:relative; margin:8px 0 0; padding:12px 12px 13px;
  background:rgba(255,255,255,.97); border:1px solid rgba(255,255,255,.6); border-radius:14px;
  box-shadow:0 4px 14px rgba(4,30,48,.18);
  transition:border-color .16s, box-shadow .16s;
}
.lcard.is-located{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(14,128,196,.34), 0 7px 18px rgba(4,30,48,.26);
}
.lcard__name{
  font-family:"Poppins",sans-serif; font-weight:600; font-size:14.5px;
  letter-spacing:-.01em; color:var(--ink);
}
.lcard__surname{ font-size:12px; color:#5b7488; margin-top:1px; }

.lcard__media{
  margin-top:9px; aspect-ratio:4/3; overflow:hidden; border-radius:12px;
  background:#e7eef3; display:grid;
}
/* preview + sharp photo occupy the same grid cell, so they stack without
   absolute positioning and share the frame's rounding/clipping */
.lcard__lqip, .lcard__photo{
  grid-area:1/1; width:100%; height:100%; display:block; object-fit:cover;
}
/* the ~7KB thumb, upscaled — blurred just enough that the softness reads as
   intentional rather than as a low-quality image */
.lcard__lqip{ filter:blur(6px) saturate(1.05); transform:scale(1.06); }
/* cross-fades over the preview the moment it decodes */
.lcard__photo{ opacity:0; transition:opacity .22s ease; }
.lcard__photo.is-loaded{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .lcard__photo{ transition:none; }
}
.lcard__mono{
  width:100%; height:100%; position:relative; overflow:hidden;
  display:grid; place-content:center;
  background:linear-gradient(150deg,#23232a,#15151a);
  font-family:"Poppins",sans-serif; font-weight:700; font-size:30px;
  color:var(--text-dim); letter-spacing:.02em;
}
.lcard__mono::after{   /* the same faint equalizer motif as .cmty__mono */
  content:""; position:absolute; inset:auto 0 0 0; height:38px; opacity:.18;
  background:repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 13px);
  -webkit-mask:linear-gradient(transparent,#000); mask:linear-gradient(transparent,#000);
}

/* the two actions at the base of the photo */
.lcard__btns{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.lcard__btn{
  cursor:pointer; padding:10px 8px; border-radius:10px; text-align:center;
  font:600 12px/1 "Poppins",sans-serif; letter-spacing:.01em;
  transition:background .14s, border-color .14s, color .14s, box-shadow .14s, transform .05s;
}
.lcard__btn:active{ transform:scale(.985); }
.lcard__btn--details{ background:#fff; border:1px solid rgba(14,128,196,.42); color:var(--accent-deep); }
.lcard__btn--details:hover{ background:rgba(14,128,196,.1); border-color:var(--accent); }
.lcard__btn--map{ background:var(--accent); border:1px solid var(--accent); color:#fff; }
.lcard__btn--map:hover{ background:var(--accent-deep); border-color:var(--accent-deep); box-shadow:0 5px 14px rgba(14,128,196,.4); }

/* admin */
.lcard__tools{ position:absolute; top:10px; right:10px; }
.lcard-add{
  display:block; width:100%; margin:8px 0 0; padding:11px; cursor:pointer;
  font:600 12px/1 "Poppins",sans-serif; color:#f1f8fd;
  background:rgba(255,255,255,.14); border:1px dashed rgba(255,255,255,.5); border-radius:12px;
}
.lcard-add:hover{ background:rgba(255,255,255,.24); }

.sidebar__foot{
  padding:14px 22px 18px; border-top:1px solid rgba(255,255,255,.25);
  font-size:11px; line-height:1.5; color:rgba(255,255,255,.92);
}

/* ---------------- Map ---------------- */
.map-wrap{ position:relative; min-width:0; }
#map{ position:absolute; inset:0; background:#e9e8e6; }

/* full-colour base map */
.leaflet-tile-pane{ filter:saturate(1.04); }
.leaflet-container{ background:#dfe8ec; font-family:inherit; }
.leaflet-control-zoom a{
  background:var(--ink); color:var(--text); border:1px solid var(--line);
  width:34px; height:34px; line-height:32px; font-size:18px;
}
.leaflet-control-zoom a:hover{ background:var(--ink-3); color:#fff; }
.leaflet-control-attribution{
  background:rgba(255,255,255,.78); font-size:10px; color:#555;
}

/* soft, feathered area edges instead of a sharp ring */
.zone-circle{ filter:blur(3px); }

/* zone tooltips (permanent area labels) */
.area-label{
  background:var(--ink); color:#fff; border:none; box-shadow:0 4px 14px -4px rgba(0,0,0,.5);
  font-family:"Poppins",sans-serif; font-weight:600; font-size:11.5px;
  letter-spacing:.01em; padding:3px 9px; border-radius:999px; white-space:nowrap;
}
.area-label::before{ display:none; }
.area-label .lbl-count{ color:var(--accent); margin-left:5px; font-weight:700; }
.area-label.is-active{ background:var(--accent); color:var(--accent-ink); }
.area-label.is-active .lbl-count{ color:var(--accent-ink); }

/* app bar (mobile) */
.appbar{
  display:none;
  position:absolute; top:0; left:0; right:0; height:58px; z-index:1100;
  align-items:center; gap:14px; padding:0 14px;
  background:linear-gradient(var(--ink), rgba(15,15,18,.86) 70%, transparent);
}
.appbar__logo{ height:28px; width:28px; }
.appbar__name{ font-family:"Poppins",sans-serif; font-weight:700; font-size:14px; color:var(--text); letter-spacing:-.01em; }
.appbar__menu{
  width:42px; height:42px; border-radius:11px; flex:0 0 auto;
  background:var(--ink-2); border:1px solid var(--line); cursor:pointer;
  display:grid; place-content:center; gap:4px;
}
.appbar__menu span{ display:block; width:18px; height:2px; background:var(--text); border-radius:2px; }

/* admin edit/remove chips — rendered inside a leader card's top-right corner */
.cmty__tools{ margin-left:auto; display:flex; gap:6px; flex:0 0 auto; }
.cmty__edit,.cmty__rm{ width:27px; height:27px; cursor:pointer; border-radius:7px;
  border:1px solid var(--line); background:var(--ink-2); color:var(--text-faint);
  font-size:14px; line-height:1; display:grid; place-content:center; }
.cmty__edit:hover{ color:#fff; background:var(--ink-3); border-color:var(--accent); }
.cmty__rm:hover{ color:#fff; background:#5a2330; border-color:#8a3b4b; }

/* empty search state */
.empty{ padding:24px 22px; color:rgba(255,255,255,.9); font-size:13px; text-align:center; }

/* ---------------- Responsive ---------------- */
@media (max-width:880px){
  .app{ grid-template-columns:1fr; }
  .appbar{ display:flex; }
  .sidebar{
    position:absolute; inset:0 auto 0 0; width:min(88vw,366px);
    transform:translateX(-102%); transition:transform .26s ease;
    box-shadow:var(--shadow); z-index:1200;   /* above the app bar when open */
  }
  .sidebar.is-open{ transform:translateX(0); }
  #map{ top:0; }
}

/* backdrop for mobile drawer */
.scrim{
  position:absolute; inset:0; z-index:1150; background:rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:opacity .22s;
}
.scrim.is-on{ opacity:1; pointer-events:auto; }

/* ============================================================
   ADMIN
   ============================================================ */
/* discreet admin entry — a small black circle (bottom-right, above the zoom)
   that slides open to its label. Icon stays pinned to the right edge. */
.admin-fab{
  position:absolute; right:7px; bottom:92px; z-index:760;   /* centre lines up with the zoom +/- block */
  display:inline-flex; flex-direction:row-reverse; align-items:center;
  max-width:38px; overflow:hidden; cursor:pointer; padding:0;
  background:#0b0b0d; color:#fff; border:1px solid rgba(255,255,255,.18);
  border-radius:999px; box-shadow:0 6px 18px rgba(0,0,0,.45);
  transition:max-width .42s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .15s;
}
.admin-fab__ic{ width:38px; height:38px; flex:0 0 auto; display:grid; place-content:center; }
.admin-fab__ic svg{ width:18px; height:18px; }
.admin-fab__txt{ opacity:0; white-space:nowrap; overflow:hidden; margin-left:0;
  font:600 12px/1 "Poppins",sans-serif; letter-spacing:.08em; text-transform:uppercase;
  transition:opacity .22s .06s, margin .42s; }
.admin-fab:hover, .admin-fab:focus-visible, .admin-fab.is-open{
  max-width:210px; border-color:rgba(255,255,255,.35);
  box-shadow:0 0 0 3px rgba(255,255,255,.12), 0 10px 26px rgba(0,0,0,.6);
}
.admin-fab:hover .admin-fab__txt, .admin-fab:focus-visible .admin-fab__txt, .admin-fab.is-open .admin-fab__txt{
  opacity:1; margin-left:14px;
}
body.admin-on .admin-fab{ display:none; }   /* the admin toolbar takes over while editing */

/* draggable community pins (admin) */
.cmty-pin{ pointer-events:auto; }
.cmty-pin span{
  display:grid; place-content:center; width:26px; height:26px; border-radius:50%;
  background:var(--accent); border:2.5px solid #fff; color:#fff; cursor:grab;
  font:800 11px/1 "Poppins",sans-serif; box-shadow:0 2px 8px rgba(0,8,16,.5);
}
.cmty-pin span:active{ cursor:grabbing; }
.cmty-pin-tip.leaflet-tooltip{
  background:var(--ink); color:var(--text); border:1px solid var(--line);
  border-radius:7px; font:600 11.5px/1 "Poppins",sans-serif; padding:5px 8px; box-shadow:var(--shadow);
}
.cmty-pin-tip.leaflet-tooltip::before{ display:none; }

/* admin toolbar */
.admbar{
  display:none; position:absolute; left:50%; transform:translateX(-50%);
  bottom:16px; z-index:1200; align-items:center; gap:10px;
  max-width:calc(100% - 24px); padding:8px 10px 8px 14px;
  background:var(--ink); border:1px solid var(--line); border-radius:13px;
  box-shadow:var(--shadow);
}
body.admin-on .admbar{ display:flex; }
.admbar__tag{
  font:700 10px/1 "Poppins",sans-serif; letter-spacing:.16em;
  color:var(--accent-ink); background:var(--accent); padding:5px 8px; border-radius:6px;
}
.admbar__hint{ font-size:11.5px; color:var(--text-faint); white-space:nowrap; }
.admbar__hint b{ color:var(--accent); }
.admbar__cloud{ font:600 11.5px/1 "Poppins",sans-serif; color:var(--text-faint); white-space:nowrap; }
.admbar__cloud.is-ok{ color:#5fcf8f; }
.admbar__cloud.is-off{ color:#e7a06e; }
.admbar__sp{ width:4px; }
.admbar__btn{
  cursor:pointer; font:600 12.5px/1 inherit; color:var(--text);
  background:var(--ink-3); border:1px solid var(--line); border-radius:9px; padding:9px 12px;
  transition:background .15s, border-color .15s;
}
.admbar__btn:hover{ background:#26262c; border-color:var(--accent); }
.admbar__btn--ghost{ background:transparent; color:var(--text-faint); }
.admbar__btn--alert{ border-color:var(--accent); color:var(--accent); }
@media (max-width:880px){
  .admbar{ left:10px; right:10px; transform:none; max-width:none; bottom:10px; gap:7px; padding:7px 8px 7px 10px; flex-wrap:wrap; justify-content:center; }
  .admbar__hint{ display:none; }
  .admbar__btn{ padding:9px 10px; font-size:12px; }
}

/* modal */
.mdl-ov{
  position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:18px;
  background:rgba(6,6,8,.62); backdrop-filter:blur(3px);
}
.mdl{
  width:min(420px,100%); max-height:90vh; overflow:auto;
  background:var(--ink); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); padding:22px;
}
.mdl__title{ font-family:"Poppins",sans-serif; font-weight:700; font-size:21px; margin:0 0 4px; letter-spacing:-.01em; }
.mdl__note{ margin:0 0 14px; font-size:13px; color:var(--text-faint); }
.mdl__lbl{ display:block; margin:13px 0 5px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); }
.mdl__lbl span{ color:var(--accent); }
.mdl__lbl .mdl__opt{ color:var(--text-faint); text-transform:none; letter-spacing:0; }
.mdl__input{
  width:100%; height:42px; padding:0 13px; font-size:14px; font-family:inherit; color:var(--text);
  background:var(--ink-2); border:1px solid var(--line); border-radius:10px; outline:none;
}
.mdl__input:focus{ border-color:var(--accent); background:var(--ink-3); }
.mdl__file{ width:100%; font-size:12.5px; color:var(--text-dim); }
.mdl__file::file-selector-button{
  margin-right:10px; padding:8px 12px; cursor:pointer; color:var(--text);
  background:var(--ink-3); border:1px solid var(--line); border-radius:8px; font:inherit;
}
.mdl__pin{ margin:10px 0 2px; }
.mdl__pinbtn{
  width:100%; cursor:pointer; padding:11px; font:600 13px/1 inherit; color:var(--accent);
  background:var(--accent-soft); border:1px solid rgba(199,154,91,.4); border-radius:10px;
}
.mdl__pinok{ font-size:12.5px; color:var(--text-dim); }
.mdl__pinok a{ color:var(--accent); }
.mdl__err{ min-height:16px; margin-top:10px; font-size:12.5px; color:#e7866e; }
.mdl__row{ display:flex; gap:10px; justify-content:flex-end; margin-top:16px; }
.mdl__btn{
  cursor:pointer; font:600 13.5px/1 inherit; color:var(--accent-ink);
  background:var(--accent); border:1px solid transparent; border-radius:10px; padding:12px 16px;
}
.mdl__btn:hover{ filter:brightness(1.06); }
.mdl__btn--ghost{ background:transparent; color:var(--text-dim); border-color:var(--line); }
.mdl__btn--ghost:hover{ color:var(--text); filter:none; }
.mdl__btn--danger{ background:#c0394b; color:#fff; border-color:transparent; }
.mdl__btn--danger:hover{ filter:brightness(1.08); }
.mdl__btn--del{ margin-right:auto; }   /* push "Delete community" to the left of the row */

/* confirmation dialog sits above any open modal/hero */
.mdl-ov--confirm{ z-index:2200; }
.mdl--confirm{ width:min(360px,100%); }

/* "Remove photo" button under the photo picker */
.mdl__rmphoto{
  display:inline-block; margin:2px 0 4px; cursor:pointer;
  background:transparent; border:1px solid var(--line); color:var(--text-dim);
  border-radius:9px; padding:9px 13px; font:600 12.5px/1 inherit;
  transition:color .15s, background .15s, border-color .15s;
}
.mdl__rmphoto:hover{ color:#fff; background:#5a2330; border-color:#8a3b4b; }
.mdl__rmphoto[hidden]{ display:none; }

/* toast */
.toast{
  position:absolute; left:50%; bottom:78px; transform:translate(-50%,8px); z-index:1300;
  background:var(--ink); color:var(--text); border:1px solid var(--line); box-shadow:var(--shadow);
  font-size:13px; padding:10px 16px; border-radius:999px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* modal textarea */
.mdl__area{ height:auto; min-height:74px; padding:10px 13px; resize:vertical; line-height:1.5; font-family:inherit; }

/* photo crop preview (matches the hero frame exactly) */
.mdl__hint{ margin:7px 0 8px; font-size:11.5px; color:var(--text-faint); line-height:1.4; }
.mdl__preview{ position:relative; aspect-ratio:4/3; width:100%; border-radius:12px; overflow:hidden;
  background:var(--ink-3); border:1px solid var(--line); margin-bottom:10px;
  cursor:grab; touch-action:none; user-select:none; }
.mdl__preview.is-dragging{ cursor:grabbing; }
.mdl__preview-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 22%; pointer-events:none; }
.mdl__preview-tag{ position:absolute; left:8px; bottom:8px; z-index:2; pointer-events:none;
  font:600 10px/1 "Poppins",sans-serif; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; background:rgba(8,18,26,.62); padding:5px 8px; border-radius:6px; backdrop-filter:blur(3px); }
.mdl__preview-empty{ position:absolute; inset:0; display:grid; place-content:center; font-size:12px; color:var(--text-faint); }
.mdl__zoomrow{ display:flex; align-items:center; gap:11px; margin:0 0 11px; }
.mdl__zoomlbl{ font:600 11px/1 "Poppins",sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); flex:0 0 auto; }
.mdl__zoom{ flex:1 1 auto; height:4px; -webkit-appearance:none; appearance:none; border-radius:3px;
  background:var(--ink-3); outline:none; }
.mdl__zoom::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%;
  background:var(--accent); border:2px solid #fff; cursor:pointer; box-shadow:0 2px 6px rgba(0,8,16,.5); }
.mdl__zoom::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--accent); border:2px solid #fff; cursor:pointer; }

/* ============================================================
   COMMUNITY HERO (enlarged tile)
   ============================================================ */
.hero-ov{
  position:fixed; inset:0; z-index:2100; display:grid; place-items:center; padding:18px;
  background:rgba(5,12,20,.66); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .2s;
}
.hero-ov.is-on{ opacity:1; }
.hero{
  width:min(440px,100%); max-height:92vh; overflow:auto; position:relative;
  background:var(--ink); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow);
  transform:scale(.92) translateY(10px); transition:transform .24s cubic-bezier(.2,.8,.2,1);
  scrollbar-width:thin; scrollbar-color:var(--ink-3) transparent;
}
.hero-ov.is-on .hero{ transform:none; }
.hero__actions{ position:absolute; top:12px; right:12px; z-index:3; display:flex; gap:8px; }
.hero__close, .hero__edit{
  width:34px; height:34px; border-radius:9px; line-height:1; cursor:pointer;
  background:rgba(10,26,38,.55); border:1px solid var(--line); color:#fff;
  display:grid; place-content:center; backdrop-filter:blur(4px); transition:background .15s, border-color .15s;
}
.hero__close{ font-size:22px; }
.hero__edit svg{ width:16px; height:16px; }
.hero__close:hover{ background:var(--ink-3); }
.hero__edit:hover{ background:var(--accent); border-color:transparent; }
/* desktop: photo height tracks the window so the whole pop-up fits without scrolling
   (mobile overrides this to height:38vh below) */
.hero__media{ height:clamp(180px, 30vh, 300px); background:var(--ink-3); border-radius:20px 20px 0 0; overflow:hidden; }
.hero__photo{ width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block; }
.hero__mono{
  width:100%; height:100%; display:grid; place-content:center;
  font-family:"Poppins",sans-serif; font-weight:700; font-size:56px; color:#fff;
  background:linear-gradient(150deg,var(--accent),var(--accent-deep));
}
.hero__body{ padding:17px 22px 19px; }
.hero__eyebrow{ font-family:"Poppins",sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent-2); }
.hero__leaders{ font-family:"Poppins",sans-serif; font-weight:700; font-size:25px;
  letter-spacing:-.02em; margin:5px 0 9px; }
.hero__meet{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600;
  color:var(--text); background:var(--accent-soft); border:1px solid rgba(14,128,196,.42);
  padding:8px 13px; border-radius:999px; }
.hero__meet svg{ width:16px; height:16px; color:var(--accent-2); flex:0 0 auto; }
/* description = the main / largest block */
.hero__desc{ margin:12px 0 0; font-size:15.5px; line-height:1.58; color:var(--text); }
/* compact contact line at the bottom */
.hero__admin{ margin-top:14px; padding-top:11px; border-top:1px solid var(--line-soft); }
.hero__admin-lead{ display:block; font-size:11.5px; color:var(--text-faint); }
.hero__admin-info{ display:block; margin-top:3px; font-size:13.5px; color:var(--text-dim); }
.hero__admin-info .hero__wa b{ color:var(--text); font-weight:700; }
.hero__admin-info .hero__hours{ color:var(--text-dim); }
.hero__admin-info .hero__hours::before{ content:"·"; margin:0 7px; color:var(--text-faint); }

/* ============================================================
   ADMINISTRATOR CORNER WIDGET
   ============================================================ */
.contact-fab{
  position:absolute; left:14px; bottom:14px; z-index:760;
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  padding:0; background:transparent; border:none; box-shadow:none;
}
.contact-fab__ic{ width:38px; height:38px; border-radius:50%; display:grid; place-content:center;
  color:#fff; background:var(--accent); text-decoration:none; flex:0 0 auto; }
.contact-fab__ic svg{ width:19px; height:19px; }
.contact-fab__ic--wa{ background:var(--wa); }
.contact-fab__ic:hover{ filter:brightness(1.08); }

/* WhatsApp button — green circle that slides open to "Contact Joshgen Durbanville AM Admin on <number>" */
.wa-btn{
  display:inline-flex; align-items:center; cursor:pointer; padding:0; overflow:hidden; text-decoration:none;
  background:var(--wa); color:#fff; border-radius:999px; max-width:38px; box-shadow:0 4px 14px rgba(37,211,102,.4);
  transition:max-width .42s cubic-bezier(.2,.8,.2,1), box-shadow .25s, filter .15s;
}
.wa-ic{ width:38px; height:38px; flex:0 0 auto; display:grid; place-content:center; }
.wa-ic svg{ width:20px; height:20px; }
.wa-txt{ opacity:0; white-space:nowrap; overflow:hidden; margin-right:0;
  font:700 12.5px/1 "Poppins",sans-serif; letter-spacing:.01em; transition:opacity .22s .06s, margin .42s; }
.wa-txt b{ font-weight:800; }
.wa-btn:hover, .wa-btn:focus-visible, .wa-btn.is-open{
  max-width:430px; filter:brightness(1.06); box-shadow:0 0 0 3px rgba(37,211,102,.35), 0 8px 24px rgba(37,211,102,.6);
}
.wa-btn:hover .wa-txt, .wa-btn:focus-visible .wa-txt, .wa-btn.is-open .wa-txt{ opacity:1; margin-right:16px; }

/* "What is community?" button — a "?" that slides open on hover/focus */
.whatis-btn{
  display:inline-flex; align-items:center; cursor:pointer; padding:0; overflow:hidden;
  background:var(--accent); color:#fff; border:1px solid transparent; border-radius:999px;
  max-width:38px; box-shadow:0 4px 14px rgba(14,128,196,.4);
  transition:max-width .42s cubic-bezier(.2,.8,.2,1), box-shadow .25s, filter .15s;
}
.whatis-q{ width:38px; height:38px; flex:0 0 auto; display:grid; place-content:center;
  font:800 18px/1 "Poppins",sans-serif; }
.whatis-txt{ opacity:0; white-space:nowrap; overflow:hidden; margin-right:0;
  font:700 12.5px/1 "Poppins",sans-serif; letter-spacing:.01em;
  transition:opacity .22s .06s, margin .42s; }
.whatis-btn:hover, .whatis-btn:focus-visible, .whatis-btn.is-open{
  max-width:260px; filter:brightness(1.1);
  box-shadow:0 0 0 3px rgba(54,166,230,.4), 0 8px 24px rgba(14,128,196,.7);
}
.whatis-btn:hover .whatis-txt, .whatis-btn:focus-visible .whatis-txt, .whatis-btn.is-open .whatis-txt{
  opacity:1; margin-right:16px;
}
.whatis-btn:hover .whatis-q, .whatis-btn:focus-visible .whatis-q, .whatis-btn.is-open .whatis-q{ animation:wiggle .55s ease; }
@keyframes wiggle{ 0%,100%{transform:rotate(0)} 20%{transform:rotate(-15deg)} 45%{transform:rotate(12deg)}
  70%{transform:rotate(-7deg)} 88%{transform:rotate(3deg)} }

@media (max-width:880px){
  .contact-fab{ left:10px; bottom:10px; }
  body.admin-on .contact-fab{ bottom:64px; }   /* clear the admin bar */
}

/* ============================================================
   WHERE IS MY HOME — amber-capped circle that slides open to a
   dark input. Lives in the bottom-left stack, above the contacts.
   ============================================================ */
.home-fab{
  display:inline-flex; align-items:center; overflow:hidden; cursor:text; max-width:38px;
  border-radius:999px; background:rgba(10,26,38,.42); box-shadow:0 4px 14px rgba(245,165,36,.35);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);   /* transparent, glassy field */
  transition:max-width .42s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.home-fab__ic{
  flex:0 0 auto; width:38px; height:38px; display:grid; place-content:center; cursor:pointer;
  background:#f5a524; color:#0a1a26;   /* parent overflow+radius clip it into a circle when collapsed */
}
.home-fab__ic svg{ width:19px; height:19px; }
.home-fab__input{
  flex:1 1 auto; min-width:0; width:320px; height:38px; padding:0 4px 0 11px;
  background:transparent; border:none; outline:none;
  color:#fff; font:600 13px/1 inherit; letter-spacing:.01em;
  text-shadow:0 1px 3px rgba(0,8,16,.6);   /* keep text legible over the transparent field */
}
.home-fab__input::placeholder{ color:rgba(255,255,255,.9); font-weight:600; }
.home-fab__clear{
  flex:0 0 auto; width:28px; height:28px; margin-right:5px; border-radius:50%; cursor:pointer; line-height:1;
  display:grid; place-content:center; border:1px solid var(--line); background:transparent;
  color:rgba(255,255,255,.7); font-size:18px;
}
.home-fab__clear:hover{ color:#fff; border-color:#f5a524; }
.home-fab__clear[hidden]{ display:none; }   /* class display would otherwise override [hidden] */
.home-fab:hover, .home-fab:focus-within, .home-fab.is-open{
  max-width:min(420px, calc(100vw - 24px));   /* longer, but never past the screen edge */
  box-shadow:0 0 0 3px rgba(245,165,36,.3), 0 8px 24px rgba(245,165,36,.5);
}

/* home marker — an amber badge so it clearly reads as "you", not a blue community */
.home-pin span{
  display:grid; place-content:center; width:36px; height:36px; border-radius:50%;
  background:#f5a524; border:3px solid #fff; box-sizing:border-box;
  color:#fff; box-shadow:0 4px 10px rgba(0,8,16,.55);
}
.home-pin svg{ width:19px; height:19px; }
.home-tip.leaflet-tooltip{
  background:#0b0b0d; color:#fff; border:1px solid rgba(255,255,255,.2);
  border-radius:7px; font:600 11.5px/1 "Poppins",sans-serif; padding:5px 8px; box-shadow:var(--shadow);
}
.home-tip.leaflet-tooltip::before{ display:none; }

/* ============================================================
   CHURCH LANDMARK — Joshgen logo that opens both ways
   ============================================================ */
.church-mark{ overflow:visible; }
.church-mark__logo{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:30px; height:30px; border-radius:50%; cursor:pointer; display:block;
  box-shadow:0 0 0 2px #fff, 0 3px 10px rgba(0,8,16,.5);
  transition:transform .2s, box-shadow .2s;
}
.church-mark:hover .church-mark__logo, .church-mark.is-open .church-mark__logo{
  transform:translate(-50%,-50%) scale(1.08);
  box-shadow:0 0 0 2px #fff, 0 0 0 5px rgba(14,128,196,.3), 0 5px 14px rgba(0,8,16,.55);
}
.church-mark__side{
  position:absolute; top:50%; transform:translateY(-50%);
  white-space:nowrap; max-width:0; opacity:0; overflow:hidden; padding:0; pointer-events:auto;
  font-family:"Poppins",sans-serif; font-weight:700; font-size:11.5px; line-height:1; letter-spacing:.01em;
  color:#fff; background:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:999px;
  transition:opacity .25s, max-width .45s cubic-bezier(.2,.8,.2,1), padding .45s;
}
.church-mark__l{ right:50%; margin-right:20px; text-align:right; }   /* slides out to the left */
.church-mark__r{ left:50%;  margin-left:20px;  color:var(--accent-2); }   /* slides out to the right */
.church-mark:hover .church-mark__side, .church-mark.is-open .church-mark__side{
  opacity:1; max-width:240px; padding:7px 12px;
}


/* ============================================================
   BRAND SPLASH / LOADING SCREEN
   Bars grow up from the baseline, settle into the logo, hold ~1s,
   then the whole screen fades to reveal the map. No JS needed.
   ============================================================ */
.splash{
  position:fixed; inset:0; z-index:4000;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px;
  background:
    radial-gradient(120% 80% at 50% 36%, rgba(14,128,196,.20), transparent 60%),
    var(--ink);
  animation:splashFade .6s ease 2.3s forwards;   /* settle (~1.3s) → hold (~1s) → fade */
}
.splash__logo{
  width:132px; height:132px;
  filter:drop-shadow(0 20px 46px rgba(14,128,196,.5));
  animation:splashPop .55s cubic-bezier(.2,.8,.2,1) both;
}
.splash__logo svg{ width:100%; height:100%; display:block; }
/* each bar scales up from its own base — all bases share the logo baseline */
.splash svg .sb{
  transform-box:fill-box; transform-origin:50% 100%;
  transform:scaleY(0); will-change:transform;
  animation:barRise .8s cubic-bezier(.2,.9,.25,1) both;
}
/* symmetric stagger: outer bars rise first, centre last — a gather-into-place wave */
.splash svg .sb:nth-of-type(1){ animation-delay:.30s; }
.splash svg .sb:nth-of-type(2){ animation-delay:.37s; }
.splash svg .sb:nth-of-type(3){ animation-delay:.44s; }
.splash svg .sb:nth-of-type(4){ animation-delay:.51s; }
.splash svg .sb:nth-of-type(5){ animation-delay:.44s; }
.splash svg .sb:nth-of-type(6){ animation-delay:.37s; }
.splash svg .sb:nth-of-type(7){ animation-delay:.30s; }
.splash__word{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  font-family:"Poppins",sans-serif; font-weight:700; font-size:21px; letter-spacing:-.01em;
  color:var(--text); opacity:0; animation:splashWord .5s ease 1.15s both;
}
.splash__word span{
  font:600 10.5px/1 "Poppins",sans-serif; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-faint);
}
@keyframes barRise{ 0%{ transform:scaleY(0); } 72%{ transform:scaleY(1.06); } 100%{ transform:scaleY(1); } }
@keyframes splashPop{ 0%{ opacity:0; transform:scale(.86); } 100%{ opacity:1; transform:scale(1); } }
@keyframes splashWord{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:translateY(0); } }
@keyframes splashFade{ to{ opacity:0; visibility:hidden; } }

@media (prefers-reduced-motion: reduce){
  .splash svg .sb{ animation:none; transform:none; }
  .splash__logo, .splash__word{ animation:none; opacity:1; }
  .splash{ animation:splashFade .4s ease 1.1s forwards; }
}

/* "What is community?" window */
.whatis__head{ display:flex; align-items:center; gap:12px; margin-bottom:15px; }
.whatis__logo{ width:42px; height:42px; flex:0 0 auto; filter:drop-shadow(0 4px 12px rgba(14,128,196,.45)); }
.whatis__head .mdl__title{ margin:0; }
.whatis__content{ font-size:14.5px; line-height:1.66; color:var(--text-dim);
  max-height:56vh; overflow:auto; }
.whatis__empty{ font-size:13.5px; color:var(--text-faint); padding:16px 0; }

/* ════════════════════════════════════════════════════════════════
   PHONE-FRIENDLY PASS · touch ergonomics, safe-area (notch), tap targets
   Appended last so these rules win the cascade over earlier ones.
   Split by intent:
     • global         — properties that only affect touch / full-screen anyway
     • (hover:none)/(coarse)/(≤880) — touch ergonomics: no-zoom inputs, ≥44px
                        targets (verifiable in the desktop responsive preview)
     • (hover:none)   — kill stuck :hover on the slide-open corner buttons
     • (≤880)         — safe-area insets for the floating map chrome
   ════════════════════════════════════════════════════════════════ */

/* —— Global (safe on every device) ———————————————————————————— */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
/* Full-screen app: lock the document so the map can't rubber-band / scroll
   behind the chrome (html was overflow:visible → ~95px of phantom scroll). */
html,body{ overflow:hidden; overscroll-behavior:none; height:100%; height:100dvh; }
/* Replace the heavy default tap-flash with a whisper of the brand blue */
*{ -webkit-tap-highlight-color:rgba(14,128,196,.14); }
/* Kill the 300 ms tap delay + double-tap-zoom on controls (map pinch still works) */
button, a, label, input, select,
.zone-item, .lcard__btn, .m-back, .cmty__edit, .cmty__rm,
.admin-fab, .wa-btn, .whatis-btn, .home-fab__ic, .home-fab__clear, .church-mark__logo,
.admbar__btn, .mdl__btn, .leaflet-control-zoom a{ touch-action:manipulation; }
/* Keep inner scrolling from chaining out to the document / map */
.zone-list, .hero, .mdl, .whatis__content{
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}
/* The off-canvas drawer clips its own content (belt-and-braces vs. phantom scroll) */
.sidebar{ overflow:hidden; }

/* ════ TOUCH ERGONOMICS — any touch device OR any narrow screen ════ */
/* Comma = OR: phones/tablets (hover:none / pointer:coarse) AND narrow viewports.
   The width arm also makes the targets verifiable in a desktop responsive
   preview, which always reports hover:hover. */
@media (hover:none), (pointer:coarse), (max-width:880px){
  /* —— Anti-zoom: iOS Safari zooms a focused field < 16px —— */
  .search input, .mdl__input, .mdl__area, .home-fab__input{ font-size:16px; }

  /* —— Minimum ~44px tap targets (Apple/Material guidance) —— */
  /* .leaflet-touch .leaflet-bar a (0,2,1) ships in leaflet.css and forces 30px —
     match its specificity so the zoom +/- grow on touch. */
  .leaflet-touch .leaflet-control-zoom a, .leaflet-control-zoom a{
    width:42px; height:42px; line-height:40px; font-size:21px;
  }
  .hero__close, .hero__edit{ width:42px; height:42px; }
  .hero__close{ font-size:24px; }
  .hero__edit svg{ width:18px; height:18px; }
  /* Collapsed corner buttons become 44px circles; their open width is set by
     the base rules (and re-asserted under hover:none below). */
  .admin-fab, .admin-fab__ic{ width:44px; max-width:44px; height:44px; }
  .wa-btn{ max-width:44px; } .wa-ic{ width:44px; height:44px; }
  .whatis-btn{ max-width:44px; } .whatis-q{ width:44px; height:44px; }
  .home-fab{ max-width:44px; } .home-fab__ic{ width:44px; height:44px; }
  .home-fab__input{ height:44px; }
  .home-fab__clear{ width:34px; height:34px; }
  .contact-fab__ic{ width:44px; height:44px; }
  .church-mark__logo{ width:36px; height:36px; }
  /* List + card rows: taller, easier to hit */
  .zone-item{ padding:13px 12px; }
  .zone-item__pin{ width:36px; height:36px; }
  .lcard__btn{ min-height:46px; }
  .cmty__edit, .cmty__rm{ width:34px; height:34px; font-size:16px; }
  /* Buttons get a comfortable min height */
  .mdl__btn{ min-height:46px; }
  .admbar__btn{ min-height:44px; }
  .mdl__pinbtn{ min-height:46px; }
}

/* ════ TOUCH-ONLY — requires the absence of hover, not just a width ════ */
@media (hover:none){
  /* A tap leaves :hover stuck until the next interaction — which would freeze
     the slide-open corner buttons wide open. On touch the tap already does the
     real action (WhatsApp link, open modal, focus the field, admin), so only an
     explicit .is-open (the one-time on-load peek) / :focus-within should expand. */
  .wa-btn:hover{ max-width:44px; }
  .wa-btn.is-open{ max-width:280px; }
  .whatis-btn:hover{ max-width:44px; }
  .whatis-btn.is-open{ max-width:260px; }
  .admin-fab:hover{ max-width:44px; }
  .admin-fab.is-open{ max-width:210px; }
  .home-fab:hover{ max-width:44px; }
  .home-fab:focus-within, .home-fab.is-open{ max-width:min(420px, calc(100vw - 24px)); }
  .church-mark:hover .church-mark__logo{ transform:translate(-50%,-50%); box-shadow:0 0 0 2px #fff, 0 3px 10px rgba(0,8,16,.5); }
  .church-mark:hover .church-mark__side{ opacity:0; max-width:0; padding:0; }
  .church-mark.is-open .church-mark__logo{ transform:translate(-50%,-50%) scale(1.08); }
  .church-mark.is-open .church-mark__side{ opacity:1; max-width:240px; padding:7px 12px; }
  /* Don't leave list/card rows stuck in their hover wash after a tap.
     The list cards are white now, so keep them white (not transparent). */
  .zone-item:hover{ background:rgba(255,255,255,.97); border-color:rgba(255,255,255,.6); box-shadow:none; }
  .zone-item:hover .zone-item__pin{ border-color:rgba(14,128,196,.35); box-shadow:0 1px 4px rgba(4,30,48,.14); }
  .zone-item.is-active:hover{ background:#fff; border-color:#fff; }
  .lcard__btn--details:hover{ background:#fff; border-color:rgba(14,128,196,.42); }
  .lcard__btn--map:hover{ background:var(--accent); border-color:var(--accent); box-shadow:none; }
  /* Provide clear press feedback in place of hover */
  .zone-item:active{ background:#eef5fa; }
  .lcard__btn--details:active{ background:rgba(14,128,196,.14); }
  .lcard__btn--map:active{ background:var(--accent-deep); }
}

/* ════ SAFE-AREA INSETS — phones with a notch / home indicator ════ */
@media (max-width:880px){
  /* Top bar drops below the status bar / notch */
  .appbar{
    height:calc(58px + env(safe-area-inset-top));
    padding-top:env(safe-area-inset-top);
    padding-left:max(14px, env(safe-area-inset-left));
    padding-right:max(14px, env(safe-area-inset-right));
  }
  /* Drawer: brand clears the notch, footer clears the home indicator */
  .sidebar{ padding-top:env(safe-area-inset-top); padding-left:env(safe-area-inset-left); }
  .sidebar__foot{ padding-bottom:calc(18px + env(safe-area-inset-bottom)); }

  /* Floating buttons + Leaflet controls hug the safe area, not the screen edge */
  .contact-fab{ left:max(10px, env(safe-area-inset-left)); bottom:max(10px, env(safe-area-inset-bottom)); }
  body.admin-on .contact-fab{ bottom:calc(64px + env(safe-area-inset-bottom)); }
  .admin-fab{ right:max(7px, env(safe-area-inset-right)); bottom:calc(104px + env(safe-area-inset-bottom)); }
  .admbar{ bottom:calc(10px + env(safe-area-inset-bottom)); }
  .toast{ bottom:calc(84px + env(safe-area-inset-bottom)); }
  .leaflet-bottom{ bottom:env(safe-area-inset-bottom); }
  .leaflet-right{ right:env(safe-area-inset-right); }
  .leaflet-left{ left:env(safe-area-inset-left); }

  /* Modal + hero overlays: never tuck content under the notch / indicator,
     and size to the *visible* viewport (dvh) so the URL bar can't clip them */
  .mdl-ov, .hero-ov{
    padding-top:max(18px, env(safe-area-inset-top));
    padding-bottom:max(18px, env(safe-area-inset-bottom));
  }
  .mdl{ max-height:88dvh; }
  .hero{ max-height:90dvh; }
}

/* Short / landscape phones: let the hero use more of the height */
@media (max-width:880px) and (max-height:520px){
  .hero{ max-height:96dvh; }
  .hero__media{ aspect-ratio:auto; height:38vh; }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE REDESIGN  ·  phones only (≤880px) — desktop is untouched
   ----------------------------------------------------------------
   A structured app shell instead of the floating-chrome map:
     • TOP    — brand + a static admin icon (right corner, no slide)
     • TOP 2  — Map / List view toggle  +  always-open "What is community?"
     • MIDDLE — the map  OR  a brand-blue community list (toggled)
     • BOTTOM — a permanent WhatsApp contact bar
   Appended last so it wins the cascade over the earlier mobile rules.
   ════════════════════════════════════════════════════════════════ */

/* heights kept in one place so every inset below stays in sync */
:root{
  --m-appbar-h:56px;   /* brand row              */
  --m-ctrl-h:  52px;   /* toggle / what-is row   */
  --m-wabar-h: 60px;   /* WhatsApp bar           */
  --m-home-h:  52px;   /* "where is my home" field */
  --m-admbar-h: 0px;   /* admin toolbar — measured by JS while in admin mode */
}
/* these live only on phones — keep them out of the desktop layout */
.m-controls, .m-wabar, .m-back{ display:none; }

@media (max-width:880px){

  /* ——— TOP ROW 1 · brand bar ——————————————————————————————— */
  .appbar{
    height:calc(var(--m-appbar-h) + env(safe-area-inset-top));
    background:var(--ink); border-bottom:1px solid var(--line-soft);
  }
  .appbar__menu{ display:none; }            /* the toggle replaces the drawer */

  /* ——— TOP ROW 2 · view toggle + What is community? ——————————— */
  .m-controls{
    display:flex; align-items:center; gap:8px;
    position:fixed; left:0; right:0; z-index:1090;
    top:calc(var(--m-appbar-h) + env(safe-area-inset-top)); height:var(--m-ctrl-h);
    padding:0 max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
    background:var(--ink-2); border-bottom:1px solid var(--line-soft);
  }
  .m-toggle{
    position:relative; flex:0 0 auto; width:152px; display:flex; padding:4px;
    background:#fff; border:1px solid rgba(14,128,196,.35); border-radius:12px;
  }
  /* sliding blue indicator — sits under the chosen side; slides to the other on toggle */
  .m-toggle::before{
    content:""; position:absolute; z-index:0; top:4px; bottom:4px; left:4px;
    width:calc(50% - 4px); border-radius:9px; background:var(--accent);
    box-shadow:0 2px 9px rgba(14,128,196,.55);
    transform:translateX(0);                                     /* default = List (left, the opening view) */
    transition:transform .3s cubic-bezier(.4,0,.2,1);
  }
  body.m-list .m-toggle::before{ transform:translateX(0); }      /* List chosen → slide left */
  body.m-map  .m-toggle::before{ transform:translateX(100%); }   /* Map chosen  → slide right */
  .m-toggle__btn{
    position:relative; z-index:1; flex:1 1 0;
    display:inline-flex; align-items:center; justify-content:center; gap:5px; cursor:pointer;
    padding:9px 6px; border:none; border-radius:8px; background:transparent;
    color:var(--accent); font:600 13px/1 "Poppins",sans-serif;   /* unchosen = blue text on white */
    transition:color .22s;
  }
  .m-toggle__btn svg{ width:15px; height:15px; }
  .m-toggle__btn.is-active{ color:#fff; }                        /* chosen = white text over the blue */
  .m-whatis{
    flex:1 1 auto; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:7px;
    cursor:pointer; padding:10px 9px; border-radius:10px;
    background:var(--accent-soft); border:1px solid rgba(14,128,196,.45); color:var(--accent-2);
    font:600 12.5px/1 "Poppins",sans-serif;
  }
  .m-whatis__q{
    flex:0 0 auto; width:18px; height:18px; border-radius:50%; display:grid; place-content:center;
    background:var(--accent); color:#fff; font:800 11.5px/1 "Poppins",sans-serif;
  }
  .m-whatis__t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* ——— static admin icon · top-right corner, never slides ————— */
  .admin-fab{
    top:calc(env(safe-area-inset-top) + (var(--m-appbar-h) - 40px) / 2);
    right:max(10px, env(safe-area-inset-right)); bottom:auto; left:auto;
    z-index:1300; background:var(--ink-2); border:1px solid var(--line);
  }
  .admin-fab, .admin-fab__ic{ width:40px; max-width:40px; height:40px; }
  .admin-fab__txt{ display:none; }                                   /* just the picture */
  .admin-fab:hover, .admin-fab:focus-visible, .admin-fab.is-open{ max-width:40px; }   /* no expand */

  /* ——— MIDDLE · the map sits between the bars ————————————————— */
  #map{
    top:calc(var(--m-appbar-h) + var(--m-ctrl-h) + env(safe-area-inset-top));
    bottom:calc(var(--m-wabar-h) + env(safe-area-inset-bottom));
  }

  /* ——— MIDDLE · list view reuses the sidebar, full-width & toggled.
         Its colours (logo blue + white cards + white-circle badges) come
         from the shared base rules so desktop and mobile match. ————— */
  .sidebar{
    position:absolute; width:auto; transform:none; box-shadow:none; z-index:900; padding:0;
    inset:calc(var(--m-appbar-h) + var(--m-ctrl-h) + env(safe-area-inset-top)) 0
          calc(var(--m-wabar-h) + env(safe-area-inset-bottom)) 0;
    border-right:none; display:none;
  }
  body.m-list .sidebar{ display:flex; }
  body.m-list #map,
  body.m-list .contact-fab{ display:none; }   /* hide map chrome while listing */

  .sidebar .brand{ display:none; }          /* brand already shown in the appbar */
  .sidebar .search{ margin:14px 14px 8px; }
  .sidebar__foot{ padding:14px 22px; }      /* sits above the bars — no safe-area pad needed */

  /* ——— BOTTOM · permanent WhatsApp contact bar ————————————————— */
  .m-wabar{
    display:flex; align-items:center; justify-content:center; gap:10px;
    position:fixed; left:0; right:0; bottom:0; z-index:1150;
    height:calc(var(--m-wabar-h) + env(safe-area-inset-bottom));
    padding:0 16px env(safe-area-inset-bottom);
    background:var(--wa); color:#fff; text-decoration:none;
    font:600 13px/1.25 "Poppins",sans-serif; letter-spacing:.01em;
    box-shadow:0 -6px 22px rgba(0,0,0,.28);
  }
  .m-wabar:active{ filter:brightness(1.05); }
  .m-wabar__ic{ flex:0 0 auto; display:grid; place-content:center; }
  .m-wabar__ic svg{ width:22px; height:22px; }
  .m-wabar__txt{ flex:0 1 auto; text-align:center; }
  .m-wabar__txt b{ font-weight:800; white-space:nowrap; }

  /* ——— "Where is my home?" — a permanently-open address field pinned to
         the bottom of the map (mobile only; desktop keeps the sliding pill). */
  .contact-fab{
    flex-direction:row; align-items:stretch; gap:0; left:0; right:0; width:auto;
    bottom:calc(var(--m-wabar-h) + env(safe-area-inset-bottom));
    padding:0 max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left));
  }
  .contact-fab .wa-btn, .contact-fab .whatis-btn{ display:none; }   /* moved to the top/bottom bars */
  body.admin-on .contact-fab{ display:none; }                       /* admin toolbar owns the bottom */
  /* the home pill becomes a full-width field that's always open */
  .home-fab, .home-fab:hover, .home-fab:focus-within, .home-fab.is-open{ max-width:100%; width:100%; }
  .home-fab{
    background:rgba(8,20,30,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    box-shadow:0 6px 20px rgba(0,8,16,.4);
  }
  .home-fab__input{ flex:1 1 auto; width:auto; min-width:0; }
  /* lift the Leaflet zoom + attribution above the home field */
  .leaflet-bottom{ bottom:calc(var(--m-home-h) + 6px); }

  /* admin toolbar & toast clear the WhatsApp bar */
  .admbar{ bottom:calc(var(--m-wabar-h) + 12px + env(safe-area-inset-bottom)); }
  .toast{ bottom:calc(var(--m-wabar-h) + 18px + env(safe-area-inset-bottom)); }
  /* admin mode: lift the toast clear of the (variable-height) admin bar */
  body.admin-on .toast{ bottom:calc(var(--m-wabar-h) + 12px + var(--m-admbar-h) + 16px + env(safe-area-inset-bottom)); }

  /* ——— the way back after "Show on map" — floats over the map, top-left.
         z-index 1080 clears every Leaflet pane (max 1000) but stays under
         the fixed control row (1090). */
  body.m-map .m-back{
    display:inline-flex; align-items:center; gap:7px; cursor:pointer;
    position:fixed; z-index:1080;
    top:calc(var(--m-appbar-h) + var(--m-ctrl-h) + env(safe-area-inset-top) + 10px);
    left:max(10px, env(safe-area-inset-left));
    min-height:44px; padding:0 17px 0 13px; border-radius:999px;
    background:var(--ink); color:var(--text); border:1px solid var(--line);
    box-shadow:0 6px 20px rgba(0,8,16,.45);
    font:600 13px/1 "Poppins",sans-serif; letter-spacing:.01em;
  }
  body.m-map .m-back:active{ background:var(--ink-3); }
  .m-back svg{ width:17px; height:17px; flex:0 0 auto; color:var(--accent); }
}

/* ════════════════════════════════════════════════════════════════
   LEADER CARDS ON PHONES — the sidebar is full-width here, so the cards
   get a touch more room; the buttons stay comfortably tappable.
   ════════════════════════════════════════════════════════════════ */
@media (max-width:880px){
  .zone-list{ padding:6px 10px 18px; }
  .lcard{ padding:13px 13px 14px; }
  .lcard__name{ font-size:15.5px; }
  .lcard__btn{ padding:13px 8px; font-size:12.5px; }
}