Two real bugs fixed: (1) 'brought me out of the recipe' -- the flavor-picker's wrapper div lacked event.stopPropagation(), so clicking the dropdown bubbled up to the recipe-card's own onclick="toggleCard(this)" handler and collapsed the whole card shut. Every other interactive element inside the card (card-actions, edit-form) already had this stopPropagation guard -- the picker was simply missed when it was first built. Fixed by adding onclick="event.stopPropagation()" to the picker's wrapper, matching the existing pattern. (2) Discoverability -- the picker was rendering after Ingredients/Steps/Notes, near the bottom of the card, so USR369 didn't know it existed unless he scrolled all the way down. Moved it to the very top of recipe-body, right after the action buttons (Print/Read Aloud/Edit), so it's the first thing visible when a card opens. Also gave it a genuinely bright, high-contrast treatment: 2px solid orange border + tinted orange background box, bold uppercase '🔥 CHOOSE A FLAVOR' label, and a bold 2px-bordered select element -- replacing what turned out to be a SEPARATE latent bug: the original picker CSS referenced var(--line) and var(--board), neither of which are actually defined anywhere in this file's :root (confirmed via grep, 0 matches) -- meaning the picker's border/background were silently rendering as browser defaults this whole time, contributing to why it was easy to miss even before the positioning issue. New CSS uses confirmed, real variables (--orange, --card, --bright).