fix: position glossary icons in card corners, fix popover rendering

Move info icons from inline-after-text to absolute top-right corner
of metric cards. Use position:fixed for popovers to escape
overflow:hidden containers. Reset text-transform inheritance.

Author: itsDNNS

app/static/css/glossary.css

@@ -4,17 +4,34 @@
   display: inline-flex;
   align-items: center;
   cursor: pointer;
-  position: relative;
   margin-left: 4px;
   vertical-align: middle;
 }
 
+/* Inside metric cards: position in top-right corner */
+.metric-card .glossary-hint {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  margin: 0;
+  z-index: 2;
+}
+
+/* Inside modulation KPI cards: top-right corner */
+.modulation-kpi-card .glossary-hint {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  margin: 0;
+  z-index: 2;
+}
+
 .glossary-hint > i,
 .glossary-hint > svg {
   width: 13px;
   height: 13px;
   color: var(--text-muted);
-  opacity: 0.6;
+  opacity: 0.45;
   transition: opacity 0.2s, color 0.2s;
 }
 
@@ -26,10 +43,7 @@
 
 .glossary-popover {
   display: none;
-  position: absolute;
-  left: 50%;
-  top: calc(100% + 8px);
-  transform: translateX(-50%);
+  position: fixed;
   width: max-content;
   max-width: 320px;
   padding: 12px 16px;
@@ -44,12 +58,9 @@
   z-index: 500;
   pointer-events: auto;
   white-space: normal;
-}
-
-/* Flip above when near bottom */
-.glossary-popover.above {
-  top: auto;
-  bottom: calc(100% + 8px);
+  text-transform: none;
+  letter-spacing: normal;
+  text-align: left;
 }
 
 /* Arrow */
@@ -80,15 +91,13 @@
   display: block;
 }
 
-/* Mobile: full width */
+/* Mobile: full width bottom sheet */
 @media (max-width: 768px) {
   .glossary-popover {
-    position: fixed;
-    left: 16px;
+    left: 16px !important;
     right: 16px;
-    top: auto;
+    top: auto !important;
     bottom: calc(var(--bottom-nav-h) + 16px);
-    transform: none;
     width: auto;
     max-width: none;
   }

app/static/js/glossary.js

@@ -13,9 +13,19 @@
     var pop = hint.querySelector('.glossary-popover');
     if (!pop) return;
     pop.classList.remove('above');
-    var rect = pop.getBoundingClientRect();
-    if (rect.bottom > window.innerHeight - 80) {
+    var r = hint.getBoundingClientRect();
+    // Position below the icon, centered
+    var top = r.bottom + 8;
+    var left = r.left + r.width / 2;
+    pop.style.left = left + 'px';
+    pop.style.top = top + 'px';
+    pop.style.transform = 'translateX(-50%)';
+    // Flip above if near bottom
+    var popRect = pop.getBoundingClientRect();
+    if (popRect.bottom > window.innerHeight - 20) {
       pop.classList.add('above');
+      pop.style.top = (r.top - 8) + 'px';
+      pop.style.transform = 'translateX(-50%) translateY(-100%)';
     }
   }
 

app/templates/index.html

@@ -389,8 +389,9 @@ <h1 class="hero-title">
     <div class="metrics-grid">
         {# Card 1: DS Power #}
         <div class="metric-card glass">
+            <span class="glossary-hint"><i data-lucide="info"></i><div class="glossary-popover">{{ t.glossary_power }}</div></span>
             <div class="metric-header">
-                <span class="metric-label">{{ t.signal_ds_power }} <span class="glossary-hint"><i data-lucide="info"></i><div class="glossary-popover">{{ t.glossary_power }}</div></span></span>
+                <span class="metric-label">{{ t.signal_ds_power }}</span>
                 <div class="metric-icon purple"><i data-lucide="arrow-down"></i></div>
             </div>
             <div class="metric-value-row">
@@ -405,8 +406,9 @@ <h1 class="hero-title">
 
         {# Card 2: US Power #}
         <div class="metric-card glass">
+            <span class="glossary-hint"><i data-lucide="info"></i><div class="glossary-popover">{{ t.glossary_power }}</div></span>
             <div class="metric-header">
-                <span class="metric-label">{{ t.signal_us_power }} <span class="glossary-hint"><i data-lucide="info"></i><div class="glossary-popover">{{ t.glossary_power }}</div></span></span>
+                <span class="metric-label">{{ t.signal_us_power }}</span>
                 <div class="metric-icon blue"><i data-lucide="arrow-up"></i></div>
             </div>
             <div class="metric-value-row">
@@ -421,8 +423,9 @@ <h1 class="hero-title">
 
         {# Card 3: SNR #}
         <div class="metric-card glass">
+            <span class="glossary-hint"><i data-lucide="info"></i><div class="glossary-popover">{{ t.glossary_snr }}</div></span>
             <div class="metric-header">
-                <span class="metric-label">SNR <span class="glossary-hint"><i data-lucide="info"></i><div class="glossary-popover">{{ t.glossary_snr }}</div></span></span>
+                <span class="metric-label">SNR</span>
                 <div class="metric-icon green"><i data-lucide="signal"></i></div>
             </div>
             <div class="metric-value-row">
@@ -437,8 +440,9 @@ <h1 class="hero-title">
 
         {# Card 4: Errors #}
         <div class="metric-card glass">
+            <span class="glossary-hint"><i data-lucide="info"></i><div class="glossary-popover">{{ t.glossary_correctable }} {{ t.glossary_uncorrectable }}</div></span>
             <div class="metric-header">
-                <span class="metric-label">{{ t.card_errors }} <span class="glossary-hint"><i data-lucide="info"></i><div class="glossary-popover">{{ t.glossary_correctable }} {{ t.glossary_uncorrectable }}</div></span></span>
+                <span class="metric-label">{{ t.card_errors }}</span>
                 <div class="metric-icon amber"><i data-lucide="alert-triangle"></i></div>
             </div>
             <div class="metric-value-row">