UI fixes and menu

app/static/styles.css

@@ -436,19 +436,72 @@ button:hover,
 }
 
 .info-dot {
+    position: relative;
     display: inline-flex;
     width: 18px;
     height: 18px;
     margin-left: 4px;
     align-items: center;
     justify-content: center;
-    border: 1px solid var(--muted);
-    border-radius: 999px;
     color: var(--muted);
-    font-size: 12px;
-    font-weight: 800;
+    font-size: 13px;
     line-height: 1;
     text-transform: none;
+    cursor: help;
+}
+
+.info-dot:hover,
+.info-dot:focus-visible {
+    color: var(--secondary-dark);
+    outline: none;
+}
+
+/* Custom tooltip bubble — the native title attribute is slow and easy to miss, so info hints
+   render as an immediate, styled popover on hover/focus. */
+.info-dot[data-tooltip]::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    top: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 20;
+    width: max-content;
+    max-width: 260px;
+    padding: 8px 10px;
+    border-radius: 8px;
+    background: #1f2937;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 1.4;
+    text-align: left;
+    white-space: normal;
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.12s ease;
+}
+
+.info-dot[data-tooltip]::before {
+    content: "";
+    position: absolute;
+    top: calc(100% + 2px);
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 20;
+    border: 6px solid transparent;
+    border-bottom-color: #1f2937;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.12s ease;
+}
+
+.info-dot[data-tooltip]:hover::after,
+.info-dot[data-tooltip]:focus-visible::after,
+.info-dot[data-tooltip]:hover::before,
+.info-dot[data-tooltip]:focus-visible::before {
+    opacity: 1;
+    visibility: visible;
 }
 
 input,