: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 dashed var(--line);background:transparent;
  padding:6px 0;outline:none;margin-bottom:0;
}
#search:focus{border-bottom:2px solid 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)}

#tierFilters{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}
.status-count{margin-left:auto;color:var(--grey-brown);font-weight:600;font-size:11px}

/* Full-screen password gate — blocks the map entirely until the shared
   password is entered; verified server-side on every load (see app.js),
   not just a client-side check. */
#passwordGate{
  position:fixed;inset:0;z-index:1100;background:var(--cream);
  display:flex;align-items:center;justify-content:center;
}
#passwordGate.hidden{display:none}
.password-gate-box{width:260px;text-align:center}
.password-gate-box .logo{margin-bottom:22px;display:flex;justify-content:center}
.password-gate-box .eyebrow{margin-bottom:14px}
#gatePassword{
  width:100%;font-family:inherit;font-weight:600;font-size:13px;color:var(--ink);text-align:center;
  border:none;border-bottom:2px dashed var(--line);background:transparent;
  padding:6px 0;outline:none;margin-bottom:14px;
}
#gatePassword:focus{border-bottom:2px solid var(--ink)}
#gateSubmit{width:100%;text-align:center}
#gateError{display:none;font-size:11px;font-weight:600;color:#8A2F2A;margin-top:10px}
#gateError.show{display:block}

/* Videographer avatar markers: a circular headshot with a tier-colored ring.
   Falls back to a plain tier-colored circle if the Headshot image 404s.
   pointer-events:auto is explicit because Leaflet's non-interactive divIcons
   can't otherwise be relied on to receive hover at all. The scale transform
   goes on the inner .avatar-ring, not this outer element — Leaflet positions
   markers via an inline `transform: translate3d(...)` on this exact element,
   and a CSS transform here would replace (not combine with) that and knock
   the marker off its real coordinate. */
.avatar-marker{background:transparent;border:0;pointer-events:auto;cursor:pointer}
.avatar-marker:hover,.avatar-marker.tap-active{z-index:10000 !important}
.avatar-inner{position:relative;width:100%;height:100%}
.avatar-marker .avatar-ring{
  display:block;width:100%;height:100%;border-radius:50%;
  box-sizing:border-box;overflow:hidden;background:var(--beige);
  transition:transform .15s ease;transform-origin:center;
}
/* .tap-active is the touch-device equivalent of :hover — see the click
   handler in app.js — since touchscreens have no hover state at all. */
.avatar-marker:hover .avatar-ring,.avatar-marker.tap-active .avatar-ring{transform:scale(4)}
/* !important beats Leaflet's own `.leaflet-marker-pane img{width:auto}` reset
   (leaflet.css), which is more specific than a plain `.avatar-marker img`
   rule and otherwise leaves the image unstretched and pinned to the left
   edge of the circle instead of centered and cropped to fill it. */
.avatar-marker img{width:100% !important;height:100% !important;object-fit:cover !important;display:block}

/* Name label under each marker. Sits right below the ring normally; on
   hover, the ring scales 4x from its center (see above), so its bottom edge
   moves down by 1.5x the marker's own diameter (--d, set inline per marker)
   — push the label down by exactly that much so it tracks the enlarged
   circle instead of staying under where the small one used to be. */
.avatar-label{
  position:absolute;left:50%;top:calc(100% + 4px);transform:translateX(-50%);
  transition:top .15s ease;
  font-family:inherit;font-size:10px;font-weight:600;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;
}
.avatar-marker:hover .avatar-label,.avatar-marker.tap-active .avatar-label{top:calc(100% + 4px + var(--d) * 1.5)}

/* "Forecasted X/10" subtext (Tier 2 only, see app.js) — hidden until hover/
   tap, appearing one line below the name label at its own hover position. */
.avatar-subtext{
  position:absolute;left:50%;top:calc(100% + 4px);transform:translateX(-50%);
  opacity:0;transition:top .15s ease,opacity .15s ease;
  font-family:inherit;font-size:9px;font-weight:600;color:var(--grey-brown);
  text-shadow:0 0 4px var(--cream),0 0 4px var(--cream),0 0 4px var(--cream);
  white-space:nowrap;pointer-events:none;
}
.avatar-marker:hover .avatar-subtext,.avatar-marker.tap-active .avatar-subtext{
  opacity:1;top:calc(100% + 4px + var(--d) * 1.5 + 13px);
}

/* Optional client-map overlay ("Overlay clients" checkbox) — same square-dot
   format as map.onsteroids.com, dimmed to a flat 0.5 opacity so videographer
   avatars stay the clear focal point when both layers are on. */
.leaflet-div-icon{background:transparent;border:0}
.overlay-client-dot{display:block;opacity:0.4}
.overlay-client-dot span{display:block;width:100%;height:100%;border-radius:2px}
.leaflet-tooltip.client-overlay-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-overlay-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,#gatePassword{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}
}