/* === Global navigation menu — burger + slide-over drawer (shared, R153) ===
   A burger button (with a red notification dot) is injected into each page's
   nav via a [data-menu-slot] marker; clicking it opens a right-side slide-over
   drawer with the Product and Teams link groups. The SAME component runs on
   both index.html (welcome page) and app.html. Classes are .mnu- prefixed and
   brand tokens are hardcoded so it renders identically regardless of the host
   page's stylesheet. Markup is injected by menu.js. */

/* ---- burger button (sits in each page's nav) ------------------------ */
.mnu-burger {
  position: relative; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0;
  border: 0; border-radius: 12px; background: transparent;
  color: #0F1F2C; cursor: pointer; font-family: inherit;
  transition: background 0.15s ease;
}
.mnu-burger:hover { background: rgba(15, 31, 44, 0.06); }
.mnu-burger:active { background: rgba(15, 31, 44, 0.10); }
.mnu-burger:focus-visible { outline: 2px solid #2E5A38; outline-offset: 2px; }
.mnu-burger svg { display: block; }

/* red notification dot (static for now; .is-quiet hides it — future logic) */
.mnu-dot {
  position: absolute; top: 8px; right: 8px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #E5484D; box-shadow: 0 0 0 2px #faf7f1;
  pointer-events: none;
}
.mnu-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: #E5484D; animation: mnu-ping 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}
@keyframes mnu-ping {
  0% { transform: scale(1); opacity: 0.55; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}
.mnu-burger.is-quiet .mnu-dot { display: none; }

/* ---- backdrop + drawer panel ---------------------------------------- */
.mnu-backdrop {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(15, 31, 44, 0.30);
  opacity: 0; pointer-events: none;
  transition: opacity 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mnu-backdrop.is-open { opacity: 1; pointer-events: auto; }

.mnu-panel {
  position: fixed; top: 0; right: 0; z-index: 9101;
  width: min(360px, 88vw); height: 100vh; height: 100dvh;
  background: #faf7f1;
  box-shadow: -30px 0 70px -34px rgba(15, 31, 44, 0.5);
  transform: translateX(100%);
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
  display: flex; flex-direction: column;
  font-family: "Satoshi", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: #0F1F2C;
}
.mnu-panel.is-open { transform: translateX(0); }
.mnu-panel[hidden], .mnu-backdrop[hidden] { display: none; }

/* head */
.mnu-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(20px + env(safe-area-inset-top, 0px)) 20px 14px 22px;
  flex: 0 0 auto;
}
.mnu-head-title {
  font-weight: 700; font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(26, 33, 40, 0.5);
}
.mnu-close {
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgba(15, 31, 44, 0.05); color: #0F1F2C;
  display: grid; place-items: center; cursor: pointer;
  transition: background 0.15s ease;
}
.mnu-close:hover { background: rgba(15, 31, 44, 0.10); }
.mnu-close:focus-visible { outline: 2px solid #2E5A38; outline-offset: 2px; }

/* body / groups / items */
.mnu-body {
  padding: 6px 12px calc(24px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto; flex: 1 1 auto;
}
.mnu-group + .mnu-group { margin-top: 24px; }
.mnu-group-title {
  font-weight: 700; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: #2E5A38;
  padding: 8px 12px; margin-bottom: 6px;
  background: #ece3cf; border-radius: 8px;
}
.mnu-item {
  display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
  padding: 12px 12px; border: 0; border-radius: 11px;
  background: transparent; color: #0F1F2C;
  font-family: inherit; font-size: 15.5px; font-weight: 500; line-height: 1.2;
  text-align: left; text-decoration: none; cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.mnu-item:hover { background: rgba(46, 90, 56, 0.08); color: #2E5A38; }
.mnu-item:active { background: rgba(46, 90, 56, 0.13); }
.mnu-item:focus-visible { outline: 2px solid #2E5A38; outline-offset: -2px; }

/* left icon on each item (muted navy, forest on hover) */
.mnu-ico { width: 18px; height: 18px; flex-shrink: 0; color: rgba(15, 31, 44, 0.5); transition: color 0.14s ease; }
.mnu-item:hover .mnu-ico { color: #2E5A38; }

/* trailing red notification dot (e.g. on the How it works row) */
.mnu-item-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #E5484D;
  margin-left: -5px; flex-shrink: 0; position: relative;
}
.mnu-item-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: #E5484D; animation: mnu-ping 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .mnu-backdrop { transition: opacity 0.001s linear; }
  .mnu-panel { transition: transform 0.001s linear; }
  .mnu-dot::after, .mnu-item-dot::after { animation: none; }
}