/* Reusable round "?" help icon + info popup. Driven by help_tooltip.js, which reads content from /api/metric-help via the data-help="group.key" attribute. The popup is appended to and positioned with position:fixed so it is never clipped by overflow:hidden containers (e.g. the filter grid). */ .help-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--border-color); background: var(--panel-bg); color: var(--text-muted); font-size: 9px; font-weight: 700; line-height: 1; cursor: help; user-select: none; transition: background 0.12s, color 0.12s, border-color 0.12s; } .help-icon:hover, .help-icon:focus-visible { background: var(--accent); border-color: var(--accent); color: #ffffff; outline: none; } .help-popup { position: fixed; z-index: 1000; max-width: 300px; width: max-content; background: var(--panel-bg); border: 1px solid var(--border-color); border-radius: 6px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); padding: 10px 12px; font-size: 12px; line-height: 1.45; color: var(--text-color); pointer-events: none; /* purely informational; never steals hover/focus */ } .help-popup__title { font-weight: 700; font-size: 12.5px; margin: 0 0 4px; color: var(--text-color); } .help-popup__short { margin: 0 0 6px; } .help-popup__row { margin: 4px 0 0; font-size: 11.5px; } .help-popup__row .help-popup__k { font-weight: 600; color: var(--text-muted); } .help-popup__formula { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--hover-bg); border-radius: 4px; padding: 3px 6px; margin: 6px 0 0; font-size: 11px; white-space: normal; }