/* ============================================================
   Jennie Worden — Beaches–East York priorities map
   Brand: #e88bae pink · #6050A1 purple · #2d2d2d ink · #ffffff
   ============================================================ */

:root{
  --pink:#e88bae;
  --pink-deep:#d95d8b;
  --pink-soft:#fbe7ef;
  --purple:#6050A1;
  --purple-soft:#ece9f7;
  --ink:#2d2d2d;
  --ink-70:#5c5c5c;
  --ink-45:#8a8a8a;
  --white:#ffffff;
  --cream:#fdf8f4;
  --line:#2d2d2d;

  --c-hq:#2d2d2d;
  --c-community:#6050A1;
  --c-moving:#d95d8b;
  --c-green:#3f8a68;
  --c-water:#3577a3;
  --c-main:#c9831f;

  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --pop:3px 3px 0 var(--ink);
  --pop-sm:2px 2px 0 var(--ink);
  --pop-lg:5px 5px 0 var(--ink);

  --bar-h:76px;
  --filters-h:60px;
  --panel-w:372px;

  --font-display:"Bricolage Grotesque","DM Sans",system-ui,sans-serif;
  --font-body:"DM Sans",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;max-width:100%;overflow:hidden}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:var(--font-display);margin:0;letter-spacing:-.02em;line-height:1.1}
button{font-family:inherit}
svg{stroke:currentColor;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}

:focus-visible{outline:3px solid var(--purple);outline-offset:2px}

/* ---------- shell ---------- */
.app{
  height:100%;
  max-width:100%;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  background:var(--cream);
}

/* ---------- top bar ---------- */
.bar{
  display:flex;
  align-items:center;
  min-width:0;
  gap:18px;
  padding:12px 20px;
  background:var(--pink);
  border-bottom:3px solid var(--ink);
  min-height:var(--bar-h);
}
.brand{
  display:flex;align-items:center;flex:0 0 auto;
  text-decoration:none;
  padding:7px 14px;
  background:var(--white);
  border:2.5px solid var(--ink);
  border-radius:14px;
  box-shadow:var(--pop-sm);
}
.brand-logo{
  display:block;height:40px;width:auto;
}
.bar-text{flex:1 1 auto;min-width:0}
.bar-text h1{
  font-size:clamp(17px,2.1vw,25px);
  font-weight:800;
  color:var(--ink);
  text-wrap:balance;
}
.bar-text p{
  margin:3px 0 0;
  font-size:13px;
  line-height:1.35;
  color:#4a3038;
  max-width:56ch;
}

.ghost-btn{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;
  font-size:13px;font-weight:700;
  color:var(--ink);
  background:var(--white);
  border:2.5px solid var(--ink);
  border-radius:999px;
  box-shadow:var(--pop-sm);
  cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.ghost-btn svg{width:16px;height:16px;flex:0 0 auto}
.ghost-btn:hover{transform:translate(-1px,-1px);box-shadow:var(--pop);background:var(--pink-soft)}
.ghost-btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}

/* ---------- filter chips ---------- */
.filters{
  display:flex;align-items:center;gap:14px;
  min-width:0;
  padding:11px 20px;
  background:var(--white);
  border-bottom:3px solid var(--ink);
  min-height:var(--filters-h);
}
.filters-label{
  flex:0 0 auto;
  font-family:var(--font-display);
  font-weight:800;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-45);
}
.chips{
  display:flex;gap:8px;
  flex:1 1 auto;
  min-width:0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:3px 2px;
  scrollbar-width:thin;
}
.chips::-webkit-scrollbar{height:5px}
.chips::-webkit-scrollbar-thumb{background:var(--pink);border-radius:99px}

.chip{
  --c:var(--ink);
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px 7px 9px;
  font-size:13px;font-weight:700;
  color:var(--ink);
  background:var(--white);
  border:2.5px solid var(--ink);
  border-radius:999px;
  box-shadow:var(--pop-sm);
  cursor:pointer;white-space:nowrap;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease,opacity .12s ease;
}
.chip .dot{
  width:20px;height:20px;flex:0 0 auto;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--c);
  border:1.5px solid var(--ink);
}
.chip .dot svg{width:12px;height:12px;stroke:#fff;stroke-width:2.4}
.chip:hover{transform:translate(-1px,-1px);box-shadow:var(--pop)}
.chip[aria-pressed="false"]{
  opacity:.5;
  background:#f4f4f4;
  box-shadow:none;
  transform:none;
}
.chip[aria-pressed="false"] .dot{background:var(--ink-45)}
.chip[aria-pressed="true"]{background:color-mix(in srgb,var(--c) 12%,var(--white))}

/* toggle */
.toggle{
  position:relative;z-index:2;
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:9px;
  padding-left:14px;
  background:var(--white);
  box-shadow:-24px 0 18px -2px var(--white);
  cursor:pointer;user-select:none;
}
.toggle input{position:absolute;opacity:0;width:1px;height:1px}
.toggle-track{
  width:42px;height:24px;
  background:#e2e2e2;
  border:2.5px solid var(--ink);
  border-radius:999px;
  display:block;position:relative;
  transition:background .16s ease;
}
.toggle-knob{
  position:absolute;top:2px;left:2px;
  width:15px;height:15px;
  background:var(--white);
  border:2px solid var(--ink);
  border-radius:50%;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1);
}
.toggle input:checked + .toggle-track{background:var(--purple)}
.toggle input:checked + .toggle-track .toggle-knob{transform:translateX(18px)}
.toggle input:focus-visible + .toggle-track{outline:3px solid var(--purple);outline-offset:2px}
.toggle-text{font-size:13px;font-weight:700;color:var(--ink-70);white-space:nowrap}
.toggle-text .t-short{display:none}

/* ---------- stage ---------- */
.stage{position:relative;display:flex;min-height:0}
#map{
  flex:1 1 auto;
  min-height:0;
  background:#eae6e1;
  z-index:1;
}
/* warm, on-brand tint over the basemap */
.leaflet-tile-pane{
  filter:saturate(.72) sepia(.05) brightness(1.06) contrast(.92);
}

/* ---------- side panel ---------- */
.panel{
  flex:0 0 var(--panel-w);
  width:var(--panel-w);
  display:flex;flex-direction:column;
  background:var(--white);
  border-left:3px solid var(--ink);
  z-index:2;
  min-height:0;
}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 18px 13px;
  border-bottom:2.5px solid var(--ink);
  background:var(--pink-soft);
}
.panel-head h2{
  font-size:18px;font-weight:800;
  display:flex;align-items:center;gap:9px;
}
.count{
  display:inline-grid;place-items:center;
  min-width:26px;height:24px;padding:0 7px;
  font-family:var(--font-body);font-size:12.5px;font-weight:700;
  color:var(--white);background:var(--purple);
  border:2px solid var(--ink);border-radius:999px;
}
.panel-close{
  display:none;
  width:34px;height:34px;flex:0 0 auto;
  place-items:center;
  color:var(--ink);background:var(--white);
  border:2.5px solid var(--ink);border-radius:50%;
  cursor:pointer;
}
.panel-close svg{width:16px;height:16px}

.cards{
  list-style:none;margin:0;padding:12px;
  overflow-y:auto;flex:1 1 auto;
  display:flex;flex-direction:column;gap:10px;
}
.card{
  --c:var(--ink);
  width:100%;text-align:left;
  display:grid;grid-template-columns:34px 1fr;gap:11px;
  padding:12px 13px;
  background:var(--white);
  border:2.5px solid var(--ink);
  border-radius:var(--r-md);
  box-shadow:var(--pop-sm);
  cursor:pointer;
  transition:transform .13s ease,box-shadow .13s ease,background .13s ease;
}
.card:hover{transform:translate(-2px,-2px);box-shadow:var(--pop);background:var(--cream)}
.card:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.card.is-active{
  background:color-mix(in srgb,var(--c) 11%,var(--white));
  box-shadow:var(--pop);
  transform:translate(-2px,-2px);
}
.card-icon{
  width:34px;height:34px;
  display:grid;place-items:center;
  background:var(--c);
  border:2.5px solid var(--ink);
  border-radius:50%;
}
.card-icon svg{width:18px;height:18px;stroke:#fff;stroke-width:2.3}
.card-icon[data-cat="hq"] svg{transform:scale(1.3)}
.card-body{min-width:0;display:block}
.card-cat{
  display:block;
  font-family:var(--font-display);
  font-size:10px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--c);
  margin-bottom:3px;
}
.card-title{
  display:block;
  font-family:var(--font-display);
  font-size:15px;font-weight:700;line-height:1.22;
  color:var(--ink);
  text-wrap:pretty;
}
.card-addr{
  display:block;
  margin:5px 0 0;
  font-size:12px;line-height:1.35;
  color:var(--ink-45);
}

.foot{
  margin:0;padding:11px 16px 13px;
  font-size:11.5px;line-height:1.4;
  color:var(--ink-45);
  border-top:2px dashed #ddd;
  background:var(--cream);
}

/* mobile list button */
.list-fab{
  display:none;
  position:absolute;left:14px;bottom:20px;z-index:600;
  align-items:center;gap:8px;
  padding:11px 17px;
  font-size:14px;font-weight:700;color:var(--white);
  background:var(--purple);
  border:2.5px solid var(--ink);
  border-radius:999px;
  box-shadow:var(--pop);
  cursor:pointer;
}
.list-fab svg{width:17px;height:17px}

/* ---------- markers ---------- */
.jw-pin{background:none!important;border:none!important}
.jw-pin-inner{
  position:relative;
  width:38px;height:38px;
  display:grid;place-items:center;
  background:var(--c,var(--pink));
  border:3px solid var(--ink);
  border-radius:50% 50% 50% 8px;
  transform:rotate(-45deg);
  box-shadow:2px 2px 0 rgba(45,45,45,.32);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease;
  animation:pin-drop .5s cubic-bezier(.34,1.56,.64,1) backwards;
}
.jw-pin-inner svg{
  width:19px;height:19px;
  stroke:#fff;stroke-width:2.4;
  transform:rotate(45deg);
}
@keyframes pin-drop{
  from{opacity:0;transform:rotate(-45deg) translate(14px,-14px) scale(.4)}
  to{opacity:1;transform:rotate(-45deg)}
}
.leaflet-marker-icon:hover .jw-pin-inner{
  transform:rotate(-45deg) scale(1.16);
  box-shadow:3px 3px 0 rgba(45,45,45,.4);
  z-index:5;
}
.jw-pin.is-active .jw-pin-inner{
  transform:rotate(-45deg) scale(1.22);
  box-shadow:0 0 0 6px rgba(96,80,161,.28),3px 3px 0 rgba(45,45,45,.4);
}
.jw-pin.is-hq .jw-pin-inner{border-radius:50%;transform:rotate(0)}
.jw-pin.is-hq .jw-pin-inner svg{transform:scale(1.3)}
.jw-pin.is-hq:hover .jw-pin-inner,
.jw-pin.is-hq.is-active .jw-pin-inner{transform:rotate(0) scale(1.18)}

/* ---------- popup ---------- */
.leaflet-popup-content-wrapper{
  padding:0;overflow:hidden;
  background:var(--white);
  border:3px solid var(--ink);
  border-radius:var(--r-lg);
  box-shadow:var(--pop-lg);
}
.leaflet-popup-content{
  margin:0;width:298px!important;line-height:1.5;
  max-height:min(520px,calc(100vh - 240px));
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--pink) transparent;
}
.leaflet-popup-content::-webkit-scrollbar{width:6px}
.leaflet-popup-content::-webkit-scrollbar-thumb{background:var(--pink);border-radius:99px}
.leaflet-popup-tip-container{width:22px;height:13px}
.leaflet-popup-tip{
  background:var(--white);
  border:3px solid var(--ink);
  box-shadow:none;
  width:13px;height:13px;
  margin:-7px auto 0;
}
.leaflet-container a.leaflet-popup-close-button{
  top:9px;right:9px;
  width:26px;height:26px;
  display:grid;place-items:center;
  font:700 17px/1 var(--font-body);
  color:var(--ink);
  background:var(--white);
  border:2.5px solid var(--ink);
  border-radius:50%;
  padding:0;
}
.leaflet-container a.leaflet-popup-close-button:hover{background:var(--pink);color:var(--ink)}

/* Star icon (Campaign HQ) reads 30% larger than the other category icons */
[data-cat="hq"] > svg,
[data-cat="hq"] svg{transform:scale(1.3)}
.pop-body{padding:15px 16px 15px;position:relative;border-radius:var(--r-lg)}
.pop-cat{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px 4px 6px;
  margin-bottom:9px;
  font-family:var(--font-display);
  font-size:10px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);
  background:color-mix(in srgb,var(--c) 20%,var(--white));
  border:2px solid var(--ink);
  border-radius:999px;
}
.pop-cat .dot{
  width:15px;height:15px;display:grid;place-items:center;
  background:var(--c);border:1.5px solid var(--ink);border-radius:50%;
}
.pop-cat .dot svg{width:9px;height:9px;stroke:#fff;stroke-width:2.6}
.pop-title{
  font-family:var(--font-display);
  font-size:18px;font-weight:800;line-height:1.15;
  color:var(--ink);
  margin:0 0 7px;
  text-wrap:pretty;
}
.pop-text{
  margin:0;
  font-size:13.5px;line-height:1.52;
  color:var(--ink-70);
}
.pop-meta{
  position:sticky;bottom:-15px;
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  margin-top:13px;padding:11px 0 15px;
  border-top:2px dashed #e0e0e0;
  background:var(--white);
}
.pop-meta::before{
  content:'';position:absolute;pointer-events:none;
  left:0;right:0;top:-20px;height:20px;
  background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);
}
.pop-addr{
  margin:0;flex:1 1 130px;
  font-size:11.5px;line-height:1.35;
  color:var(--ink-45);
}
.pop-dir{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 11px;
  font-size:12px;font-weight:700;
  color:var(--ink);text-decoration:none;
  background:var(--pink);
  border:2.5px solid var(--ink);
  border-radius:999px;
  box-shadow:var(--pop-sm);
  transition:transform .12s ease,box-shadow .12s ease;
}
.pop-dir svg{width:13px;height:13px;stroke-width:2.3}
.pop-dir:hover{transform:translate(-1px,-1px);box-shadow:var(--pop)}

/* ---------- leaflet chrome ---------- */
.leaflet-bar{
  border:none!important;
  box-shadow:none!important;
}
.leaflet-bar a{
  width:34px!important;height:34px!important;
  line-height:30px!important;
  color:var(--ink)!important;
  background:var(--white)!important;
  border:2.5px solid var(--ink)!important;
  border-radius:10px!important;
  box-shadow:var(--pop-sm);
  font-size:19px!important;font-weight:700;
  margin-bottom:7px;
}
.leaflet-bar a:hover{background:var(--pink-soft)!important}
.leaflet-bar a.leaflet-disabled{opacity:.45}
.leaflet-bottom.leaflet-right .leaflet-control-zoom{margin-bottom:30px}
.leaflet-control-attribution{
  font-size:10px!important;
  white-space:nowrap;
  max-width:none;
  background:rgba(255,255,255,.86)!important;
  border-top:2px solid var(--ink);
  border-left:2px solid var(--ink);
  border-top-left-radius:8px;
  padding:3px 7px!important;
  color:var(--ink-70)!important;
}
.leaflet-control-attribution a{color:var(--purple)!important}
.ward-label{
  background:none;border:none;
  font-family:var(--font-display);
  font-size:12px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--purple);
  text-shadow:0 0 4px #fff,0 0 4px #fff,0 0 8px #fff,1px 1px 0 #fff;
  white-space:nowrap;pointer-events:none;
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  :root{--panel-w:318px}
  .bar-text p{display:none}
}

@media (max-width:860px){
  .bar{padding:10px 14px;gap:12px;min-height:64px}
  .brand-logo{height:34px}
  .bar-text h1{font-size:16px}
  .reset-btn span{display:none}
  .reset-btn{padding:9px;border-radius:50%}
  .filters{padding:9px 14px;gap:8px}
  .filters-label{display:none}
  .toggle{padding-left:10px;gap:7px}
  .toggle-text{font-size:12px}
  .toggle-text .t-long{display:none}
  .toggle-text .t-short{display:inline}

  .stage{display:block;position:relative}
  #map{position:absolute;inset:0;width:100%;height:100%}
  .list-fab{display:inline-flex}

  .panel{
    position:absolute;left:0;right:0;bottom:0;
    width:auto;height:74%;
    border-left:none;
    border-top:3px solid var(--ink);
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    box-shadow:0 -8px 26px rgba(45,45,45,.22);
    transform:translateY(101%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    z-index:700;
  }
  .panel.is-open{transform:translateY(0)}
  .list-fab{bottom:16px}
  .panel-head{border-radius:var(--r-lg) var(--r-lg) 0 0}
  .panel-close{display:grid}
  .leaflet-popup-content{width:250px!important;max-height:min(430px,calc(100vh - 300px))}
  .pop-text{font-size:13px;line-height:1.48}
  .pop-title{font-size:17px}
}

@media (max-width:420px){
  .bar-text h1{font-size:14.5px}
  .leaflet-popup-content{width:224px!important}
  .pop-title{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
}