/* =================
   HELP TIP MODAL ("About AQmap")
   ================= */

#help_tip_div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 16px;
  background: var(--scrim);
  z-index: 20000;
  animation: help-backdrop-fade-in 0.3s ease;
  transition: opacity 0.3s ease;
  /* Full-screen centering backdrop (mirrors the release notes modal) */
}

/* Fade-out state, applied by handle_info_menu_close() before hiding; mirrors .release-modal-backdrop.hidden */
#help_tip_div.hidden {
  opacity: 0;
  pointer-events: none;
}

#help_tip {
  width: 720px;
  box-sizing: border-box;
  max-width: calc(100vw - 40px);
  max-height: 85vh;
  overflow-y: auto;
  font-size: 14px;
  display: none;
  padding: 28px 32px;
  pointer-events: auto;
  background-color: var(--surface-panel);
  color: var(--text-primary);
  font-family: "Inter", Arial, Helvetica, sans-serif;
  border-radius: 12px;
  box-shadow: var(--shadow-modal);
  position: relative;
  z-index: 20001;
  animation: help-tip-scale-in 0.3s ease;
}

/* Help tip title, styled to match the release notes modal's h2 */
#help_tip>div:first-child>h2 {
  display: block;
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
  padding-right: 40px;
  /* keep clear of the close button */
}

/* Build/version line under the title, filled in by event_handlers.js from window.AQMAP_CONFIG.release */
#help_tip p.help-version {
  margin: -6px 0 12px;
  font-size: 13px;
  color: var(--text-muted);
}

/* Section heads use real headings so screen readers get a document outline (h3.help-group, h3.help-column). */
#help_tip h3.help-group {
  display: block;
  margin: 10px 0 2px;
  font-size: 14px;
  font-weight: 700;
}

#help_tip h3.help-column {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
}

/* Body paragraphs are wrapped so <hr>s are only needed between major parts */
#help_tip p {
  margin: 0 0 10px;
}

/* Help link colours — --link/--link-hover (dark override at the bottom of this file) */
#help_tip a {
  color: var(--link);
}

#help_tip a:hover {
  color: var(--link-hover);
}

/* Link-styled button used for in-menu actions (e.g. "release notes") */
#help_tip button.help-link-button {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--link);
  text-decoration: underline;
  cursor: pointer;
}

#help_tip button.help-link-button:hover {
  color: var(--link-hover);
}

#help_tip_close {
  position: absolute;
  top: 12px;
  right: 16px;
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-faint);
  padding: 4px 8px;
}

#help_tip_close:hover {
  color: var(--text-primary);
}

/* The dialog takes focus on open; don't draw a ring around the whole card */
#help_tip:focus {
  outline: none;
}

/* Collapsible "Technical details" disclosure (LCM correction formula) */
#help_tip summary {
  cursor: pointer;
  margin: 4px 0;
}

/* Feature-callout icons in the help menu (subsetted AqmapFA/AqmapIon fonts, icons.css) */
#help_tip i.fa,
#help_tip i.ion-arrow-shrink {
  margin-left: 4px;
  font-size: 14px;
  color: var(--text-muted);
}

/* EN/FR badge mirroring the language toggle button (a text-only button) */
#help_tip span.help-lang-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 0 3px;
  font-size: 14px;
  line-height: 18px;
  border: 1px solid var(--text-faint);
  border-radius: 3px;
  color: var(--text-muted);
  vertical-align: baseline;
}

/* +/− marker for the zoom entry, echoing the zoom control's glyphs */
#help_tip span.help-zoom-icon {
  margin-left: 4px;
  color: var(--text-muted);
  font-weight: 700;
}

#help_tip ul.help-list {
  list-style: none;
  margin: 0 0 8px;
  padding-left: 0;
}

#help_tip ul.help-list li {
  margin: 2px 0;
}

/* Monitor legend circle icon (deployed to ./icons/ at runtime) used in the monitor-marker callout */
#help_tip img.help-marker-icon {
  margin-left: 4px;
  vertical-align: text-bottom;
  max-width: 16px;
  max-height: 16px;
}

/* Leaflet-style stacked-layer "sandwich" icon (inline SVG, currentColor) */
#help_tip svg.help-layer-icon {
  margin-left: 4px;
  vertical-align: text-bottom;
  color: var(--text-muted);
}

/* Entrance animation mirroring the release notes modal (backdrop fade + card scale-up); replays on every open. */
@keyframes help-backdrop-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes help-tip-scale-in {
  from {
    transform: scale(0.95);
  }

  to {
    transform: scale(1);
  }
}

/* Respect reduced-motion: no scale/fade for the help modal (mirrors loader.css). */
@media (prefers-reduced-motion: reduce) {

  #help_tip_div,
  #help_tip {
    animation: none;
    transition: none;
  }
}

/* Small screens: the help tip fills most of the viewport */
@media (max-width: 504px) {
  #help_tip {
    max-width: calc(100vw - 24px);
  }
}

/* Dark mode */
body.dark-mode #help_tip {
  background-color: var(--surface-panel);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

body.dark-mode #help_tip_close {
  color: var(--text-faint);
}

body.dark-mode #help_tip_close:hover {
  color: var(--text-on-accent);
}

body.dark-mode #help_tip i.fa,
body.dark-mode #help_tip i.ion-arrow-shrink,
body.dark-mode #help_tip span.help-lang-badge,
body.dark-mode #help_tip span.help-zoom-icon,
body.dark-mode #help_tip svg.help-layer-icon {
  color: var(--text-muted);
}

body.dark-mode #help_tip span.help-lang-badge {
  border-color: var(--text-faint);
}

/* Scoped help-link colour: --link is the single source for dark link colour, so the two can never drift apart. */
body.dark-mode #help_tip a {
  color: var(--link) !important;
}

body.dark-mode #help_tip button.help-link-button {
  color: var(--link);
}