/* ==========================================================================
   WSH Menu v2 — accordion system drawer (issue #95)
   ==========================================================================
   Progressive enhancement. Every rule here is scoped under `.menu-v2`, which
   is added to #system-menu-drawer only when featureFlags['menuV2.enabled'].
   Flag off  -> not a single selector matches -> pixel-identical to v1.
   ========================================================================== */

/* --- group shell ------------------------------------------------------- */
.menu-v2 .mv2-group {
  border: 1px solid var(--border-light, rgba(115, 255, 40, 0.16));
  background: var(--secondary-bg, rgba(10, 12, 10, 0.55));
  margin-bottom: 12px;
}

.menu-v2 .mv2-group[data-open="true"] {
  border-color: var(--accent-lime, rgba(115, 255, 40, 0.3));
}

/* --- group header (the tap target) ------------------------------------- */
.menu-v2 .mv2-head {
  display: grid;
  grid-template-columns: 14px 1fr auto auto;
  align-items: center;
  gap: 8px;
  /* >=44px tap target per the mobile acceptance criterion on #95 */
  min-height: 44px;
  padding: 0 12px;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-gray, #a3a3a3);
  text-align: left;
  transition: color 150ms ease, background-color 150ms ease;
}

.menu-v2 .mv2-head:hover,
.menu-v2 .mv2-head:focus-visible {
  color: var(--accent-lime, #39ff14);
  background: rgba(115, 255, 40, 0.05);
  outline: none;
}

.menu-v2 .mv2-group[data-open="true"] .mv2-head {
  color: var(--accent-lime, #39ff14);
}

.menu-v2 .mv2-head-icon {
  font-size: 11px;
  opacity: 0.85;
}

/* count badge — shows weight without expanding */
.menu-v2 .mv2-head-count {
  font-size: 8px;
  font-weight: 700;
  color: var(--text-gray, #737373);
  border: 1px solid var(--border-light, rgba(115, 255, 40, 0.22));
  padding: 1px 5px;
  letter-spacing: 0.08em;
}

/* chevron */
.menu-v2 .mv2-head-chev {
  font-size: 9px;
  color: var(--text-gray, #737373);
  transition: transform 220ms cubic-bezier(0.25, 1, 0.5, 1);
}

.menu-v2 .mv2-group[data-open="true"] .mv2-head-chev {
  transform: rotate(90deg);
  color: var(--accent-lime, #39ff14);
}

/* --- collapsible body -------------------------------------------------- */
/* Animate max-height only. The drawer itself is height-locked by
   .drawer-panel-integrated.open, so expanding a group scrolls inside the
   drawer instead of resizing it — this must NOT reintroduce the
   --hud-header-height feedback loop that caused the open-flicker. */
.menu-v2 .mv2-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 260ms cubic-bezier(0.25, 1, 0.5, 1),
              opacity 180ms ease;
}

.menu-v2 .mv2-group[data-open="true"] > .mv2-body {
  max-height: 4000px;
  opacity: 1;
  padding: 8px 12px 16px;
}

/* Sections inside a group: give clear breathing room between topics */
.menu-v2 .mv2-body .menu-section {
  transform: none !important;
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}

.menu-v2 .mv2-body .menu-section:first-child {
  margin-top: 4px !important;
}

/* --- prominent in-group call-to-action (e.g. full help page) ----------- */
.menu-v2 .mv2-cta {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  background: rgba(115, 255, 40, 0.07);
  border: 1px solid rgba(115, 255, 40, 0.35);
  color: var(--accent-lime, #39ff14);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.menu-v2 .mv2-cta:hover,
.menu-v2 .mv2-cta:focus-visible {
  background: rgba(115, 255, 40, 0.14);
  border-color: var(--accent-lime, #39ff14);
  outline: none;
}

/* The old buried text link is redundant once the CTA button exists. */
.menu-v2 .faq-fullpage-link {
  display: none;
}

/* --- identity block (never collapses) --------------------------------- */
.menu-v2 .mv2-identity {
  margin-bottom: 8px;
}

/* --- channel row cleanup ---------------------------------------------- */
/* v1 rendered the description TWICE: appended to .comm-channel-name AND in
   an always-visible .comm-channel-hint. v2 strips the suffix from the name
   (JS) and collapses the hint to expand-on-tap. */
.menu-v2 .comm-channel {
  min-height: 44px;
  cursor: pointer;
}

.menu-v2 .comm-channel-hint {
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  opacity: 0;
  transition: max-height 200ms cubic-bezier(0.25, 1, 0.5, 1),
              opacity 160ms ease,
              padding-top 200ms ease;
}

.menu-v2 .comm-channel[data-hint="open"] .comm-channel-hint {
  max-height: 220px;
  opacity: 1;
  padding-top: 4px;
}

/* --- narrow screens --------------------------------------------------- */
@media (max-width: 390px) {
  .menu-v2 .mv2-head {
    font-size: 9px;
    letter-spacing: 0.1em;
    gap: 6px;
  }

  /* long group labels truncate rather than wrap (no layout shift) */
  .menu-v2 .mv2-head-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- legal footer placement --- */
.menu-v2 #menu-legal-footer {
  margin: 10px 0 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}