/* The "?" info icon and its portaled tooltip (ISH-700). * * Shared because both pages carry these icons and, since ISH-683, both carry the long * multi-paragraph ADAT note that needs the wide box and the paragraph breaks. broker.html * had its own copy with neither — a fixed 220px and `white-space: normal` — so the note * would have collapsed into a wall of text there even once its icon was wired. That is the * second half of ISH-700; the first half is js/info-tooltip.js. * * Both hosts define --text, --text-secondary and --radius, the only vars used here. * * Behaviour lives in js/info-tooltip.js. The classes it toggles are `visible`, `is-wide` * and `is-pinned`; all three are defined below and none should be styled per page. */ /* Small "?" info icon — same look as broker.html's .help-tip (circled "?", border only, no fill). Dropped inline next to KPI labels and table headers wherever a term benefits from a short definition (content sourced from the Report Definitions tab). Its tooltip is deliberately NOT a CSS ::after popup positioned relative to the icon the way .help-tip's is — several of these icons sit inside .kpi-card, which has `overflow: hidden` (for its red top-border ::before) and gets a `transform` on :hover (for its lift effect); a :hover on a child triggers the card's own :hover too, so an ::after tooltip is always clipped by that overflow, and even a `position: fixed` descendant would still be trapped since an active `transform` on an ancestor makes it that element's containing block. Fixed by js/analytics.js instead: a single #shared-info-tooltip lives at the very end of (see bottom of this file), completely outside every card's DOM subtree, and is positioned/shown via getBoundingClientRect() on hover/focus of any .info-icon — styled to match .help-tip::after's popup exactly, just reachable from anywhere. */ .info-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--text-secondary); color: var(--text-secondary); font-size: 0.625rem; font-weight: 700; line-height: 1; text-transform: none; letter-spacing: normal; /* ISH-693. Clickable as of the ADAT note: hover previews, a click pins the popup open so a note too long to read on a 14px hover target can actually be read. */ cursor: pointer; position: relative; margin-left: 0.35rem; vertical-align: middle; } .info-icon:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } /* Shared tooltip element (portaled to end of ) that every .info-icon shows/hides/repositions itself into via JS — see the comment on .info-icon above for why this can't live next to the icon. Sizing/type matches .help-tip::after in broker.html. */ .shared-info-tooltip { position: fixed; top: 0; left: 0; background: var(--text); color: #fff; padding: 0.5rem 0.65rem; border-radius: var(--radius); font-size: 0.75rem; font-weight: 500; text-transform: none; /* pre-line, not normal: the long notes carry a blank line between paragraphs and a wall of text is the thing being fixed here. ⚠️ This makes newlines significant in every `data-tooltip` on the page. All of the static ones keep their value on ONE source line — if you wrap a long one across lines for readability, the HTML parser keeps that newline in the attribute value and it renders as a hard break mid-sentence. Wrap the ATTRIBUTE onto its own line, never the value. */ white-space: pre-line; width: 220px; text-align: left; line-height: 1.35; opacity: 0; visibility: hidden; transition: opacity 0.15s ease; z-index: 3000; pointer-events: none; } .shared-info-tooltip.visible { opacity: 1; visibility: visible; } /* ISH-693. A multi-paragraph note in a 220px column runs ~20 lines tall; 320px keeps it to a readable block without becoming a banner. */ .shared-info-tooltip.is-wide { width: 320px; } /* ISH-693. Pinned by a click rather than held open by the pointer, so it reads as a deliberate popup: a little more room and a shadow to lift it off the card. */ .shared-info-tooltip.is-pinned { padding: 0.65rem 0.8rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); }