/* build 20261008a */
/* Shared site menu — hamburger button + dropdown panel.
   Loaded by every main page so the navigation is one source of truth. */

.menu-btn {
  background: transparent;
  border: 1px solid #334155;
  color: #cbd5e1;
  font-size: 20px;
  width: 40px; height: 40px;
  border-radius: 10px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; flex-shrink: 0;
}
.menu-btn:hover, .menu-btn.open { border-color: #38bdf8; color: #38bdf8; }

.site-menu {
  position: fixed;
  top: 68px; left: 16px;
  max-width: 340px;
  max-height: calc(100vh - 88px);
  overflow-y: auto;
  background: #1e293b;
  border: 1px solid #475569;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  /* Must beat atlantic.html's map/chart overlays (z-index up to 10000)
     and any other high-stacking elements site-wide. A drawer-style
     overlay should always be on top when open. Raised from 150 on
     2026-06-02 because atlantic.html's menu was opening behind the
     map. */
  z-index: 10001;
  padding: 8px;
  font-size: 14px;
  scrollbar-width: thin;
  scrollbar-color: #475569 #1e293b;
}
.site-menu::-webkit-scrollbar { width: 6px; }
.site-menu::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }
@media (max-width: 480px) {
  .site-menu { left: 12px; right: 12px; max-width: none; }
}
.site-menu a {
  display: block;
  padding: 10px 14px;
  color: #e2e8f0;
  text-decoration: none;
  border-radius: 8px;
  transition: background .15s, color .15s;
}
.site-menu a:hover    { background: rgba(56, 189, 248, .12); color: #38bdf8; }
.site-menu a.current  { color: #38bdf8; background: rgba(56, 189, 248, .08); }
.site-menu .menu-desc {
  font-size: 12px; color: #94a3b8; margin-top: 2px; font-weight: 400;
}
.site-menu .menu-label { font-weight: 600; }
.site-menu .menu-header {
  font-size: 10px; color: #64748b;
  text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700;
  padding: 14px 14px 6px;
  border-top: 1px solid #334155;
  margin-top: 4px;
}
.site-menu .menu-header:first-child {
  border-top: none; margin-top: 0; padding-top: 8px;
}
.site-menu a.menu-new::after {
  content: "NEW";
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: rgba(74, 222, 128, .15);
  color: #4ade80;
  font-size: 9px;
  font-weight: 700;
  border-radius: 4px;
  letter-spacing: .5px;
  vertical-align: middle;
}
/* LIVE badge — pages whose data refreshes on a cron (forecast, compare,
   atlantic map, validation). Same shape as NEW but in red, with a subtle
   pulse to communicate "actively updating." If a page is both new AND
   live, set isLive only — LIVE is the more useful signal. */
.site-menu a.menu-live::after {
  content: "LIVE";
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: rgba(239, 68, 68, .15);
  color: #ef4444;
  font-size: 9px;
  font-weight: 700;
  border-radius: 4px;
  letter-spacing: .5px;
  vertical-align: middle;
  animation: site-menu-live-pulse 2.4s ease-in-out infinite;
}
@keyframes site-menu-live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .site-menu a.menu-live::after { animation: none; }
}