:root{
  --ink:#151414;--dark-brown:#2B180A;--brown:#9E9893;--grey-brown:#94877C;
  --off-white:#FAF6F2;--beige:#EFE7DD;--cream:#F6F0E9;--line:#DCD1C5;--line-strong:#151414;
  --green:#1F9E6B;--green-deep:#0c5c3e;--green-soft:#E2F3EC;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Geist',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;color:var(--ink);background:var(--cream)}

button{font-family:inherit;cursor:pointer;border:none;background:none}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-brown)}
.btn{font-family:inherit;border:1px solid var(--line);background:var(--off-white);padding:8px 14px;font-weight:700;font-size:12px;transition:.12s}
.btn.solid{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn.solid:hover{background:var(--brown)}

#map{position:fixed;inset:0}
.leaflet-container{background:var(--cream);font-family:inherit}
.leaflet-control-zoom{border:1px solid var(--line) !important;box-shadow:none !important}
.leaflet-control-zoom a{background:var(--off-white) !important;color:var(--ink) !important;border-radius:0 !important}
.leaflet-control-zoom a:hover{background:var(--beige) !important}
.leaflet-control-attribution{background:rgba(250,246,242,.85) !important;color:var(--grey-brown) !important;font-size:10px !important}

/* Floating filter overlay, replaces a full sidebar */
#panel{
  position:fixed;top:20px;left:20px;width:250px;
  background:var(--off-white);border:1px solid var(--line);
  padding:18px;z-index:500;max-height:calc(100vh - 40px);overflow-y:auto;
}
.logo{margin-bottom:14px}
.logo svg{height:13px;width:auto;display:block;fill:var(--ink)}
.panel-divider{height:1px;background:var(--line);margin:14px 0}

/* Mobile menu toggle — hidden on desktop, shown only via the media query below */
.menu-btn{
  display:none;position:fixed;top:16px;left:16px;z-index:502;
  width:36px;height:36px;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--off-white);color:var(--ink);
}
.menu-btn:hover{border-color:var(--ink)}
.menu-btn.open{background:var(--ink);border-color:var(--ink);color:var(--cream)}

/* Loading screen: shown while the initial ClickUp pull is in flight */
#loadingScreen{
  position:fixed;inset:0;z-index:1000;background:var(--cream);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .4s ease;
}
#loadingScreen.hidden{opacity:0;pointer-events:none}
#loadingScreen .logo{margin-bottom:0}
#loadingScreen .logo svg{height:26px;animation:logoPulse 1.2s ease-in-out infinite}
@keyframes logoPulse{
  0%,100%{opacity:.5}
  50%{opacity:1}
}

#search{
  width:100%;font-family:inherit;font-weight:600;font-size:13px;color:var(--ink);
  border:none;border-bottom:2px solid transparent;background:transparent;
  padding:6px 0 2px;outline:none;margin-bottom:0;
}
#search:focus{border-bottom-color:var(--ink)}
#search::placeholder{color:var(--brown);font-weight:500}
#search::-webkit-search-cancel-button,
#search::-webkit-search-decoration{-webkit-appearance:none;appearance:none}

#count{font-size:11px;font-weight:600;color:var(--grey-brown)}

#statusFilters,#regionFilters,#scopeFilters{display:flex;flex-direction:column;gap:10px}
.check-row{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600;cursor:pointer}
.check-row input{width:14px;height:14px;cursor:pointer;flex:0 0 auto}
#scopeFilters input{accent-color:var(--ink)}
.status-swatch{width:9px;height:9px;border-radius:50%;flex:0 0 auto}

.region-toggle{
  display:flex;align-items:center;gap:9px;width:100%;
  font-family:inherit;font-size:12px;font-weight:600;color:var(--ink);
  background:none;border:none;padding:0;cursor:pointer;
  opacity:.2;transition:opacity .15s ease;
}
.region-toggle.active{opacity:1}
.region-toggle .region-flag{font-size:14px;line-height:1}
.status-count{margin-left:auto;color:var(--grey-brown);font-weight:600;font-size:11px}

/* Spots-remaining banner, bottom-left, same width and styling as the filter panel */
.spots-warning{
  position:fixed;bottom:20px;left:20px;width:250px;z-index:650;
  background:var(--off-white);border:1px solid var(--line);
  padding:18px;
}
.spots-remaining{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.spots-sub{font-size:11px;font-weight:600;color:var(--grey-brown)}
.spots-cta{
  display:block;margin-top:22px;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  animation:spotsCtaPulse 1.6s ease-in-out infinite;
}
@keyframes spotsCtaPulse{0%,100%{opacity:.4}50%{opacity:1}}

/* Lock icon + unlock popover, bottom-right */
.lock-btn{
  position:fixed;bottom:16px;right:16px;z-index:501;
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--off-white);color:var(--grey-brown);padding:0;
}
.lock-btn:hover{border-color:var(--ink);color:var(--ink)}
.lock-btn.on{background:var(--ink);border-color:var(--ink);color:var(--cream)}

#unlockPop{
  display:none;position:fixed;bottom:46px;right:16px;z-index:501;
  width:190px;background:var(--off-white);border:1px solid var(--line);padding:14px;
}
#unlockPop.open{display:block}
#unlockPop .eyebrow{margin-bottom:10px}
#passcode{
  width:100%;font-family:inherit;font-weight:600;font-size:13px;color:var(--ink);
  border:none;border-bottom:2px dashed var(--line);background:transparent;
  padding:6px 0;outline:none;margin-bottom:10px;
}
#passcode:focus{border-bottom:2px solid var(--ink)}
#unlockSubmit{width:100%;text-align:center}
#unlockError{display:none;font-size:11px;font-weight:600;color:#8A2F2A;margin-top:8px}
#unlockError.show{display:block}

/* Client dot markers — plain divs, no white outline, constant pixel size at every zoom */
.leaflet-div-icon{background:transparent;border:0}
.client-dot{display:block}
.client-dot span{display:block;width:100%;height:100%;border-radius:2px}

/* Permanent name label under each dot — collision detection in app.js
   decides which ones render so packed areas thin out instead of overlapping */
.leaflet-tooltip.client-label{
  background:transparent;border:none;box-shadow:none;padding:0;margin-top:2px;
  font-family:inherit;font-size:10px;font-weight:500;color:var(--ink);
  text-shadow:0 0 4px var(--cream),0 0 4px var(--cream),0 0 4px var(--cream);
  white-space:nowrap;pointer-events:none;
}
.leaflet-tooltip.client-label::before{display:none}

@media (max-width: 640px){
  /* iOS Safari (and others) zoom the viewport on focus if an input's font
     is under 16px — bump these to 16px on mobile only to prevent that. */
  #search,#passcode{font-size:16px}
  .leaflet-control-zoom{display:none}
  .menu-btn{display:flex;z-index:601}
  #panel{display:none}
  #panel.open{
    display:block;position:fixed;inset:0;width:100%;height:100%;
    max-height:none;border:none;padding:20px;padding-top:90px;z-index:600;
  }
  #panel.open .logo svg{height:18.2px}
  .spots-warning{width:calc(100% - 40px)}
}