/* Reset + base */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:#000;color:#F8FAFC;overflow-x:hidden}
body{font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}

/* Import the site topnav block from main styles — keep consistency. Inline minimal copy. */
.topnav{position:fixed;top:20px;right:24px;font:11px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;text-transform:lowercase;letter-spacing:.04em;z-index:1100;color:#F8FAFC}
.topnav a{color:#F8FAFC;text-decoration:none;padding:0 4px;border-bottom:1px solid transparent}
.topnav a:hover{color:#fff;border-bottom:1px solid #fff}
.topnav .sep{color:#475569;padding:0 2px;user-select:none}
@media (max-width:760px){.topnav{position:static;display:block;top:auto;right:auto;margin:16px;padding:0}}

/* Explorer shell layout: grid — header row auto-sizes so mobile wrap works */
.explorer-shell{
  display:grid;
  grid-template-columns:260px 1fr 280px;
  grid-template-rows:auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar map feed"
    "safety safety safety";
  min-height:100vh;
  width:100vw;
  gap:1px;
  background:#0F172A;
  margin-top:0;
  padding-top:0;
}

.explorer-header{
  grid-area:header;
  background:#000;
  display:flex;
  align-items:center;
  gap:20px;
  padding:0 20px;
  height:56px;
  overflow:hidden;
  border-bottom:1px solid #0F172A;
}

.explorer-brand{
  color:#F8FAFC;
  text-decoration:none;
  font:700 13px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}
.explorer-brand-logo{
  margin:0;
  font:9.5px/1.1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  letter-spacing:0;
  color:#F8FAFC;
  text-shadow:0 0 16px rgba(255,255,255,0.12);
  white-space:pre;
  opacity:.92;
  transform:translateY(-2px);
}
.explorer-brand-text{
  font-size:12px;
  letter-spacing:.18em;
  color:#64748B;
  font-weight:500;
}
@media (max-width:900px){
  .explorer-brand-logo{display:none}
}

.explorer-ticker{
  display:flex;
  align-items:baseline;
  gap:8px;
  color:#64748B;
  font:500 10.5px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  letter-spacing:.06em;
  text-transform:lowercase;
  flex:0 0 auto;
  padding-right:8px;
}
.tick-stat{display:inline-flex;gap:5px;align-items:baseline}
.tick-n{
  color:#F8FAFC;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  min-width:1ch;
  transition:color .4s ease;
}
.tick-n.pulse{color:#22D3EE}
.tick-label{color:#475569}
.tick-sep{color:#1E293B;user-select:none}
@media (max-width:900px){
  .explorer-ticker{font-size:9.5px;gap:4px;padding-right:4px}
  .tick-label{display:none}
}
@media (max-width:760px){
  .explorer-ticker{display:none}
}

.explorer-filter{flex-shrink:0;margin-left:auto}
.explorer-health{display:flex;gap:6px;align-items:center;flex-shrink:0}

/* Explorer nav — mirrors the main site's oldschool topnav */
.explorer-nav{
  font:11px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  text-transform:lowercase;
  letter-spacing:.04em;
  color:#F8FAFC;
  flex-shrink:0;
}
.explorer-nav a{
  color:#F8FAFC;
  text-decoration:none;
  padding:0 4px;
  border-bottom:1px solid transparent;
  transition:border-color .12s ease;
}
.explorer-nav a:hover{color:#fff;border-bottom-color:#fff}
.explorer-nav .sep{color:#475569;padding:0 2px;user-select:none}

.explorer-sidebar{grid-area:sidebar;background:#000;overflow-y:auto;border-right:1px solid #0F172A}
.explorer-sidebar-inner{padding:14px 16px}

.explorer-map{grid-area:map;background:#000;min-height:60vh;position:relative}

/* Splash intro overlay (fades out once first event arrives) */
.explorer-splash{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:#000;
  z-index:500;
  transition:opacity .8s ease;
  pointer-events:none;
}
.explorer-splash.fade{opacity:0}
.splash-inner{text-align:center}
.splash-logo{
  font:700 56px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color:#F8FAFC;
  margin:0 0 20px;
  letter-spacing:.02em;
  text-shadow:0 0 40px rgba(255,255,255,0.12);
  animation:splashFloat 3s ease-in-out infinite;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
.splash-text{
  color:#64748B;
  font:500 12px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  letter-spacing:.12em;
  text-transform:lowercase;
  margin:0;
}
.splash-dots{margin-left:4px}
.splash-dots span{
  display:inline-block;
  animation:splashDot 1.4s infinite;
  color:#CBD5E1;
}
.splash-dots span:nth-child(2){animation-delay:.2s}
.splash-dots span:nth-child(3){animation-delay:.4s}

@keyframes splashFloat{
  0%,100%{transform:translateY(0);opacity:.92}
  50%{transform:translateY(-3px);opacity:1}
}
@keyframes splashDot{
  0%,80%,100%{opacity:.2}
  40%{opacity:1}
}

.explorer-feed{grid-area:feed;background:#000;overflow-y:auto;border-left:1px solid #0F172A}
.explorer-feed-inner{padding:14px 16px}

.explorer-safety{
  grid-area:safety;
  background:#000;
  margin:0;
  padding:14px 20px;
  color:#CBD5E1;
  font-size:12.5px;
  text-align:center;
  letter-spacing:.04em;
  border-top:1px solid #0F172A;
  font-weight:500;
}
.explorer-safety .pal-flag{
  font-size:15px;
  vertical-align:-2px;
  margin:0 2px;
}
.explorer-safety .pal-heart{
  color:#DC2626;
  margin-left:2px;
  font-size:14px;
  vertical-align:-1px;
}

/* Hide Leaflet attribution; tile credits live elsewhere */
.leaflet-control-attribution{display:none !important}

/* =======================================================================
   Mobile / tablet layout: single full-viewport content area that swaps
   between Map / Channels / Chat via the bottom tab bar (.explorer-tabs).
   The body.tab-* class decides which section is visible.
   ======================================================================= */

/* Desktop: tab bar is hidden */
.explorer-tabs{display:none}

@media (max-width:900px){
  .explorer-shell{
    grid-template-columns:1fr;
    /* header auto, one 1fr content area, tabs auto, safety auto */
    grid-template-rows:auto 1fr auto auto;
    grid-template-areas:"header" "content" "tabs" "safety";
    min-height:100dvh;
    min-height:100vh;
    gap:0;
  }

  /* All three sections share the same content grid cell; visibility is
     controlled via body.tab-* classes below. */
  .explorer-sidebar,
  .explorer-feed,
  .explorer-map{
    grid-area:content;
    height:auto;
    min-height:0;
    border-right:0;
    border-left:0;
  }
  .explorer-sidebar,
  .explorer-feed{
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    display:none;
  }
  .explorer-map{display:block}

  body.tab-map .explorer-map{display:block}
  body.tab-map .explorer-sidebar,
  body.tab-map .explorer-feed{display:none}

  body.tab-channels .explorer-sidebar{display:block}
  body.tab-channels .explorer-map,
  body.tab-channels .explorer-feed{display:none}

  body.tab-feed .explorer-feed{display:block}
  body.tab-feed .explorer-map,
  body.tab-feed .explorer-sidebar{display:none}

  .explorer-sidebar-inner,
  .explorer-feed-inner{
    padding:0 14px 16px;
  }

  /* Sticky section label on top of each scroll container */
  .channel-list h3,
  .explorer-feed-inner::before{
    position:sticky;
    top:0;
    background:#000;
    margin:0;
    padding:14px 0 10px;
    border-bottom:1px solid #0F172A;
    z-index:5;
    font:700 10px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    letter-spacing:.16em;
    color:#94A3B8;
    text-transform:uppercase;
  }
  .explorer-feed-inner::before{
    content:"Live Feed · newest on top";
    display:block;
  }

  /* Bottom tab bar */
  .explorer-tabs{
    grid-area:tabs;
    display:flex;
    justify-content:space-around;
    align-items:stretch;
    background:#000;
    border-top:1px solid #1E293B;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    gap:4px;
    z-index:500;
  }
  .etab{
    flex:1 1 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    background:transparent;
    color:#64748B;
    border:0;
    border-radius:6px;
    padding:8px 6px;
    min-height:52px;
    cursor:pointer;
    font:500 10.5px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    letter-spacing:.08em;
    text-transform:lowercase;
    transition:background-color .15s ease, color .15s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .etab-icon{
    font-size:18px;
    line-height:1;
    color:#64748B;
  }
  .etab:hover{color:#CBD5E1}
  .etab.active{
    background:rgba(255,255,255,0.06);
    color:#F8FAFC;
    font-weight:700;
  }
  .etab.active .etab-icon{color:#22D3EE}

  /* Header: tighter on mobile */
  .explorer-header{
    flex-wrap:wrap;
    padding:10px 14px 6px;
    gap:6px 10px;
    height:auto;
    row-gap:2px;
  }
  .explorer-brand{gap:8px;flex:0 0 auto;order:1}
  .explorer-brand-logo{display:none}
  .explorer-brand-text{font-size:11.5px;letter-spacing:.14em}
  .explorer-filter{order:2;margin-left:auto;flex-shrink:0}
  /* Hide the 20-dot health row on phones — wraps into ugly two lines */
  .explorer-health{display:none}
  .explorer-ticker{
    order:4;
    flex:0 0 100%;
    justify-content:center;
    padding:4px 0 2px;
    padding-right:0;
    font-size:10px;
    gap:6px;
    border-top:1px solid #0F172A;
    margin-top:2px;
  }
  .explorer-nav{
    order:5;
    flex:0 0 100%;
    text-align:center;
    padding:6px 0 2px;
    border-top:1px solid #0F172A;
    font-size:11px;
  }
  .explorer-nav a{padding:4px 5px}
  .explorer-nav .sep{padding:0 2px}

  .channel-list li{padding:7px 8px;font-size:12.5px;margin:1px 0}
  .channel-list .ch-name{font-size:12.5px}
  .channel-list .ch-variant{font-size:9.5px;margin-left:4px}
  .channel-list .ch-count{font-size:11px}
  .feed-item{font-size:12px;padding:10px 0;border-bottom:1px solid #0F172A}
  .feed-item .fm-meta{font-size:9.5px}
  .hoppr-marker{padding:2px 7px;font-size:10px}
  .hoppr-marker.md{padding:3px 8px;font-size:11px}
  .hoppr-marker.lg{padding:4px 10px;font-size:12px}
  .explorer-safety{padding:12px 14px;font-size:11px;letter-spacing:0}
  .splash-logo{font-size:42px;margin:0 0 14px}
  .splash-text{font-size:11px}
}

/* Tighter phone layout (<480 px) */
@media (max-width:480px){
  .explorer-shell{grid-template-rows:auto 40vh 30vh 30vh auto}
  .explorer-header{padding:8px 12px 4px;gap:4px 8px}
  .explorer-ticker{font-size:9px;gap:4px;padding:3px 0 1px}
  .tick-label{display:none}
  .explorer-filter button,.filter-btn{padding:4px 9px;font-size:10px}
  .explorer-nav{font-size:10.5px;padding:5px 0 1px}
  .explorer-nav a{padding:3px 4px}
  .channel-list li{padding:8px 6px}
  .splash-logo{font-size:34px}
}

/* Leaflet overrides — Carto Dark Matter is already dark, so no tile filter */
.leaflet-container{background:#000 !important;outline:0}
.leaflet-tile{filter:none}
.leaflet-control-attribution{
  background:rgba(0,0,0,.6) !important;
  color:#94A3B8 !important;
  font-size:10px !important;
  padding:2px 6px !important;
}
.leaflet-control-attribution a{color:#CBD5E1 !important}
.leaflet-control-zoom a{
  background:#000 !important;
  color:#F8FAFC !important;
  border:1px solid #1E293B !important;
}
.leaflet-control-zoom a:hover{background:#0F172A !important}

/* Sidebar channel list */
.channel-list{list-style:none;margin:0;padding:0}
.channel-list h3{font:700 10px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.14em;color:#475569;text-transform:uppercase;margin:8px 0 10px}
.channel-list li{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:8px 10px;
  margin:2px 0;
  border:1px solid transparent;border-radius:4px;
  cursor:pointer;
  font-size:13px;
  transition:background-color .12s ease;
}
.channel-list li:hover{background:rgba(255,255,255,.04)}
.channel-list li.selected{background:rgba(255,255,255,.08);border-color:#1E293B}
.channel-list .ch-name{font-family:ui-monospace,Menlo,Consolas,monospace;color:#F8FAFC;letter-spacing:.02em}
.channel-list .ch-variant{color:#64748B;font-size:10px;text-transform:uppercase;letter-spacing:.12em;margin-left:6px}
.channel-list .ch-count{color:#94A3B8;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;font-variant-numeric:tabular-nums}
.channel-list .empty{color:#475569;font-size:12px;padding:12px 10px;text-align:center}

/* Feed */
.feed-item{
  border-bottom:1px solid #0F172A;
  padding:10px 0;
  font-size:12.5px;
  line-height:1.5;
}
.feed-item:last-child{border-bottom:0}
.feed-item .fm-meta{color:#64748B;font-size:10.5px;font-family:ui-monospace,Menlo,Consolas,monospace;margin-bottom:3px;display:flex;gap:8px;align-items:baseline}
.feed-item .fm-ch{color:#CBD5E1}
.feed-item .fm-variant{color:#64748B;font-size:9.5px;text-transform:uppercase;letter-spacing:.1em}
.feed-item .fm-body{color:#F8FAFC;word-break:break-word}
.feed-item .fm-hidden{color:#64748B;font-style:italic}
.feed-empty{color:#475569;font-size:12px;text-align:center;padding:20px 10px}

/* Filter chip cluster */
.filter-group{display:inline-flex;gap:0;border:1px solid #1E293B;border-radius:4px;overflow:hidden}
.filter-group button,.filter-btn{
  background:transparent;color:#94A3B8;border:0;
  padding:5px 12px;
  font:500 11px/1 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.06em;text-transform:lowercase;
  cursor:pointer;
  border-right:1px solid #1E293B;
}
.filter-group button:last-child,.filter-btn:last-child{border-right:0}
.filter-group button.active,.filter-btn.active{background:#F8FAFC;color:#000;font-weight:700}
.filter-group button:hover:not(.active),.filter-btn:hover:not(.active){background:rgba(255,255,255,.06);color:#fff}

/* Health dots — support both .open/.connecting and .status-open/.status-connecting naming */
.health-dots{display:inline-flex;gap:4px}
.health-dot{
  width:7px;height:7px;border-radius:50%;
  background:#334155;
  transition:background-color .2s ease;
}
.health-dot.open,.health-dot.status-open{background:#22C55E;box-shadow:0 0 6px rgba(34,197,94,0.5)}
.health-dot.connecting,.health-dot.status-connecting{background:#F59E0B;animation:dotPulse 1.4s ease-in-out infinite}
.health-dot.closed,.health-dot.status-closed{background:#475569}
.health-dot.error,.health-dot.status-error{background:#DC2626}
@keyframes dotPulse{
  0%,100%{opacity:.45}
  50%{opacity:1}
}

/* Marker badge (Leaflet divIcon) */
.hoppr-marker{
  background:#F8FAFC;color:#000;
  padding:3px 8px;border-radius:20px;
  font:700 11px/1 ui-monospace,Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;
  border:1px solid #000;
  box-shadow:0 0 0 2px #000,0 0 12px rgba(255,255,255,0.22);
  white-space:nowrap;
  transition:transform .18s ease,box-shadow .25s ease;
  cursor:pointer;
}
.hoppr-marker:hover{transform:scale(1.12);box-shadow:0 0 0 2px #000,0 0 18px rgba(255,255,255,0.5)}
.hoppr-marker.interop,.hoppr-marker.bitchat{background:#64748B;color:#fff;box-shadow:0 0 0 2px #000,0 0 10px rgba(100,116,139,0.4)}
.hoppr-marker.selected{background:#22D3EE;color:#000;box-shadow:0 0 0 2px #000,0 0 14px rgba(34,211,238,0.6)}
.hoppr-marker.md{padding:4px 10px;font-size:12px}
.hoppr-marker.lg{padding:5px 12px;font-size:13px}
.hoppr-marker.pulse{animation:markerPulse .9s ease-out}
@keyframes markerPulse{
  0%{transform:scale(1);box-shadow:0 0 0 2px #000,0 0 0 0 rgba(34,211,238,0.7)}
  60%{transform:scale(1.18);box-shadow:0 0 0 2px #000,0 0 0 14px rgba(34,211,238,0)}
  100%{transform:scale(1);box-shadow:0 0 0 2px #000,0 0 0 0 rgba(34,211,238,0)}
}