/* VestWiz glossary tooltips — hover/tap any bolded key term for a plain-English definition. */ .gloss { position: relative; border-bottom: 1px dotted #2e9bff; cursor: help; text-decoration: none; } /* Note: .gloss-tip styles are NOT scoped under .gloss — the dashboard's floating tooltip manager relocates tips to , and they must keep their full visual styling wherever they live in the DOM. */ .gloss-tip { position: absolute; bottom: 135%; left: 50%; transform: translateX(-50%) translateY(4px); width: max-content; max-width: 260px; background: #0c243e; color: #fff; font-weight: 400; font-size: 13px; line-height: 1.45; padding: 10px 12px; border-radius: 8px; border: 1px solid #2e9bff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); opacity: 0; visibility: hidden; transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; z-index: 1000; pointer-events: none; text-align: left; white-space: normal; } .gloss-tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #0c243e; } .gloss:hover .gloss-tip, .gloss:focus .gloss-tip, .gloss.show .gloss-tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .gloss:focus { outline: 2px solid #2e9bff; outline-offset: 2px; } /* Formula popups on calculation totals: keep the dotted affordance tight. */ .gap-value.gloss { display: inline-block; } .gloss-tip .tip-title { font-weight: 700; color: #fff; margin-bottom: 4px; } @media (max-width: 480px) { .gloss-tip { max-width: 200px; font-size: 12px; } } /* Floating tooltips: JS relocates the tip to (position:fixed) so no overflow:hidden ancestor (e.g. table.data) can clip it, and clamps it to the viewport. Only tips the JS marks .floating are affected; everything else keeps the CSS hover behavior above. */ .gloss-tip.floating { position: fixed; left: 0; top: 0; bottom: auto; transform: none; z-index: 10000; opacity: 0; visibility: hidden; pointer-events: none; } .gloss-tip.floating.on { opacity: 1; visibility: visible; } .gloss-tip.floating.below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #0c243e; }