Event banner also a popup/flyout

assets/js/app.js

@@ -382,10 +382,11 @@ export function UTCIForecast() {
           <span></span><span></span><span></span>
         </button>
       </nav>
-      <main class="utci-shell">
 
-        
-        <div class=${`event-banner-wrap${bannerVisible ? ' visible' : ''}`}>
+      <!-- Event flyout — a direct child of .utci-app (sibling of the nav) so its
+           position:fixed / z-index can sit above the nav. Keeping it inside
+           .utci-shell would trap it in the shell's stacking context. -->
+      <div class=${`event-banner-wrap${bannerVisible ? ' visible' : ''}`}>
           ${activeEvents.length > 0 && (() => {
             const renderSlide = (idx, isOutgoing) => {
               const ev = activeEvents[idx] || activeEvents[0];
@@ -406,6 +407,9 @@ export function UTCIForecast() {
               return html`
                 <div class=${isOutgoing ? 'event-banner event-banner--outgoing' : 'event-banner'}
                   style=${{ background: ev.color, color: ev.textColor }}
+                  onClick=${isOutgoing ? undefined : () => dismissBanner(ev.id)}
+                  role=${isOutgoing ? undefined : 'button'}
+                  title=${isOutgoing ? undefined : 'Click to dismiss'}
                 >
                   <span class="event-banner-emoji">${ev.emoji}</span>
                   <div class="event-banner-body">
@@ -422,7 +426,7 @@ export function UTCIForecast() {
                           <span
                             key=${i}
                             class=${`event-banner-dot${i === bannerIndex ? ' active' : ''}`}
-                            onClick=${() => bannerSlideTo(i)}
+                            onClick=${(e) => { e.stopPropagation(); bannerSlideTo(i); }}
                             style=${{ background: ev.textColor }}
                           />
                         `)}
@@ -432,7 +436,7 @@ export function UTCIForecast() {
                   ${!isOutgoing && html`<button
                     class="event-banner-dismiss"
                     style=${{ color: ev.textColor }}
-                    onClick=${() => dismissBanner(ev.id)}
+                    onClick=${(e) => { e.stopPropagation(); dismissBanner(ev.id); }}
                     aria-label="Dismiss"
                     title="Dismiss this event"
                   >✕</button>`}
@@ -448,6 +452,7 @@ export function UTCIForecast() {
           })()}
         </div>
 
+      <main class="utci-shell">
         <div class="utci-header">
           <div class="header-left">
             <h1 class="utci-title">