/* EagleTagz demo: Mode and Quantity menus on /micro (October 2026).
 *
 * The two menus in the AI Micro-Tagging panel used to open only while a mouse hovered
 * over them, so on phones and iPads they were unreliable. micro-menus.js now opens them
 * on tap or click (Apple's pop-up button pattern) and marks them .etz-menu; these rules
 * stop the hover-opening and show the chosen item with a gold checkmark and a soft
 * highlight instead of a full red, lime or yellow fill. */

.etz-menu > .etz-menu-list {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}
.etz-menu.etz-open > .etz-menu-list {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
}

/* the button: chevron turns only when the menu is open */
.etz-menu > button .fa-chevron-down {
  transform: none !important;
  transition: transform 0.2s ease;
}
.etz-menu.etz-open > button .fa-chevron-down { transform: rotate(180deg) !important; }
.etz-menu.etz-open > button { border-color: rgba(255, 255, 255, 0.35) !important; }

/* the items: neutral highlight, gold checkmark */
.etz-menu .etz-menu-list button {
  min-height: 44px;
  background-color: transparent !important;
  border-color: transparent !important;
}
.etz-menu .etz-menu-list button:hover,
.etz-menu .etz-menu-list button:focus-visible { background-color: rgba(255, 255, 255, 0.08) !important; }
.etz-menu .etz-menu-list button.etz-chosen { background-color: rgba(255, 255, 255, 0.12) !important; }
.etz-menu .etz-menu-list .fa-check { color: #f1c50e !important; margin-left: auto; padding-left: 12px; }

/* keep the track colours the tag markers use: video red, audio green, synchronized yellow */
#analyzeVideoTrack .fa-video { color: #f87171; }
#analyzeAudioTrack .fa-volume-up { color: #a3e635; }
#analyzeBothTracks .fa-layer-group { color: #facc15; }
.etz-menu .etz-menu-list button:focus-visible { outline: 2px solid #93c5fd; outline-offset: -2px; }