/* =========================================================================
 * scout-finder — design system (Bricolage Grotesque + Hanken Grotesk)
 * Global styles shared by the public site (index.html) and admin (admin.html).
 * Component visuals live as inline styles in the markup (high-fidelity port of
 * the design comp); this file holds resets, Leaflet skin, scrollbars and motion.
 * ========================================================================= */
:root{
  --ink:#1E1730; --muted:#6b6577; --faint:#8a8496; --hint:#9a93a6;
  --accent:#6336B5; --accent-ink:#3D1D6E; --accent-soft:#f3eefb;
  --line:#ece6db; --line-2:#f0ebe2; --bg:#e9ece5; --bg-warm:#f3f0ea;
  --surface:#fff; --surface-2:#fbfaf7;
  --shadow-1:0 8px 26px rgba(30,18,55,.13); --shadow-2:0 18px 50px rgba(30,18,55,.16);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:'Hanken Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:var(--ink);background:var(--bg)}
input,select,textarea,button{font-family:'Hanken Grotesk',sans-serif}

/* Leaflet skin */
.leaflet-container{font-family:'Hanken Grotesk',sans-serif;background:var(--bg)}
.leaflet-popup-content-wrapper{border-radius:16px;box-shadow:var(--shadow-2);padding:3px;border:1px solid #efeadf}
.leaflet-popup-content{margin:15px 17px;line-height:1.4}
.leaflet-popup-tip{box-shadow:var(--shadow-2)}
.leaflet-control-zoom a{border-radius:10px!important;color:var(--ink)}
.leaflet-control-zoom{margin-bottom:78px!important}
.sf-label{background:rgba(255,255,255,.95)!important;border:1px solid #e7e1d8!important;border-radius:7px!important;padding:2px 7px!important;font:600 11px 'Hanken Grotesk',sans-serif!important;color:var(--ink)!important;box-shadow:0 3px 9px rgba(30,18,55,.13)!important;white-space:nowrap}
.sf-label:before{display:none!important}

/* Scrollbars */
.sf-scroll::-webkit-scrollbar{width:9px}
.sf-scroll::-webkit-scrollbar-thumb{background:#dcd5c9;border-radius:9px;border:3px solid transparent;background-clip:content-box}

/* Form field (admin) */
.sf-fld{width:100%;border:1px solid #e7e1d8;border-radius:11px;padding:11px 13px;font:500 13.5px 'Hanken Grotesk';color:var(--ink);outline:none;background:#fff;transition:border-color .15s}
.sf-fld:focus{border-color:var(--accent);box-shadow:0 0 0 3px #6336b51a}

/* Animations */
@keyframes sfpop{from{transform:translateY(4px) scale(.7);opacity:0}to{transform:none;opacity:1}}
@keyframes sfslide{from{transform:translateX(102%)}to{transform:none}}
@keyframes sfpulse{0%{transform:scale(1);opacity:.5}70%{transform:scale(2.8);opacity:0}100%{opacity:0}}

/* "Events held here" — collapsible disclosure (works in the panel card + map popup) */
.sf-events>summary{list-style:none}
.sf-events>summary::-webkit-details-marker{display:none}
.sf-events .ev-chev{transition:transform .15s}
.sf-events[open]>summary .ev-chev{transform:rotate(90deg)}

/* Mobile: stack the floating panel over the map */
@media (max-width:760px){
  /* Public site — panel fills the height (down to just above the bottom search bar) so the
     result list isn't cramped; the collapse "‹" button reveals the full-screen map. */
  .sf-panel{left:8px!important;right:8px!important;width:auto!important;top:8px!important;bottom:150px!important;max-height:none!important}
  .sf-search{left:8px!important;right:8px!important;bottom:8px!important}
  .sf-legend{display:none!important}
  .sf-drawer{width:100vw!important;max-width:100vw!important}
  .leaflet-control-zoom{margin-bottom:150px!important}

  /* Admin: stack toolbar → rail (list) → form → map vertically */
  .sf-admin-bar{height:auto!important;flex-wrap:wrap;padding:9px 12px!important;gap:7px 8px!important}
  .sf-admin-spacer{display:none!important}
  .sf-admin-bar button,.sf-admin-bar a{padding:8px 11px!important;font-size:12px!important}
  .sf-admin-body{flex-direction:column!important;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .sf-admin-rail{width:auto!important;flex:none!important;max-height:34vh;border-right:none!important;border-bottom:1px solid #ece6db!important}
  .sf-admin-form{min-width:0!important;flex:none!important;min-height:240px}
  #col-splitter{display:none!important}
  .sf-admin-map{display:block!important;width:100%!important;min-width:0!important;height:300px!important;flex:none!important;border-top:1px solid #ece6db}
}