/* viewer.menu.help.css
   ✅ Theme-proof: uses ONLY variables defined in themes.css (with safe fallbacks)
   ✅ Button inherits hamburger styles by reusing the same class in JS
*/

#menuHelpBtn .menu-help-q{
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  color: var(--fg, currentColor);
}

/* Modal overlay */
.menu-help-overlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--overlay-bg, rgba(0,0,0,0.55));
  z-index: 9999;
}

.menu-help-overlay.is-open{ display: flex; }

.menu-help-card{
  width: min(980px, 96vw);
  max-height: min(90vh, 900px);
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  background: var(--popover-bg, var(--card, var(--bg2, var(--bg, #111))));
  color: var(--fg, #fff);
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
}

.menu-help-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft, rgba(255,255,255,0.06));
  background: var(--topbar-bg, transparent);
}

.menu-help-title{
  font-weight: 800;
  color: var(--title, var(--fg, #fff));
}

.menu-help-close{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  background: var(--btn, rgba(255,255,255,0.06));
  color: var(--fg, #fff);
  cursor: pointer;
}
.menu-help-close:hover{ background: var(--hover-bg, rgba(255,255,255,0.08)); }
.menu-help-close:active{ transform: translateY(1px); }

.menu-help-body{
  padding: 14px;
  overflow: auto;
}

.menu-help-img{
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--border-soft, rgba(255,255,255,0.06));
  background: var(--thumb-bg, rgba(255,255,255,0.06));
}

.menu-help-list{
  margin: 10px 0 18px 18px;
  padding: 0;
  color: var(--fg, #fff);
}

.menu-help-footer{
  padding: 12px 14px;
  border-top: 1px solid var(--border-soft, rgba(255,255,255,0.06));
  display:flex;
  justify-content:flex-end;
  background: var(--topbar-bg, transparent);
}

.menu-help-btn{
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  background: var(--btn, rgba(255,255,255,0.06));
  color: var(--fg, #fff);
  cursor: pointer;
}
.menu-help-btn:hover{ background: var(--hover-bg, rgba(255,255,255,0.08)); }
.menu-help-btn:active{ transform: translateY(1px); }


/* Make the help icon button circular (still theme-proof) */
#menuHelpBtn{
  border-radius: 9999px !important;
  aspect-ratio: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Ensure the SVG icon aligns nicely */
#menuHelpBtn svg{
  display: block;
}