/* Info panels — the shared disclosure used across the suite. * * Built on native
/, NOT on a div and a click handler. The * suite has no build step and every page is otherwise self-contained, so a * shared file is a new single point of failure: if info.js fails to load, a * JS-driven panel takes every explanation in the suite with it, silently. With *
the browser still opens and closes it, and the text is in the HTML * either way. info.js only upgrades the interaction. * * The class is `infotip`, not `info`: compensation.html already uses * for its pager, and a shared stylesheet claiming a name * that generic would restyle it into a round button the moment that page loaded * this file. Found by the checker, not by reading. * * Usage: *
* *
…the background…
*
* * Colours come from the host page's custom properties, with fallbacks so this * degrades sensibly on a page that does not define them. */ .infotip { display: inline-block; position: relative; vertical-align: middle; margin-left: 6px; font-family: var(--body, system-ui, sans-serif); } /* the button itself: a circled i, sized to sit on a heading baseline */ .infotip > summary { list-style: none; cursor: pointer; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line-strong, rgba(120, 160, 255, .28)); color: var(--ink-faint, #8a96b8); background: transparent; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono, ui-monospace, monospace); font-size: 10px; font-style: italic; font-weight: 600; line-height: 1; user-select: none; transition: color .15s, border-color .15s, background .15s; } .infotip > summary::-webkit-details-marker { display: none; } /* Safari */ .infotip > summary::marker { content: ""; } .infotip > summary::after { content: "i"; } .infotip > summary:hover, .infotip > summary:focus-visible { color: var(--cyan, #5fe3ff); border-color: var(--cyan, #5fe3ff); background: rgba(95, 227, 255, .10); } .infotip > summary:focus-visible { outline: 2px solid var(--cyan, #5fe3ff); outline-offset: 2px; } .infotip[open] > summary { color: var(--cyan, #5fe3ff); border-color: var(--cyan, #5fe3ff); background: rgba(95, 227, 255, .14); } /* WITHOUT JS the panel sits in normal flow, below the text: readable, and it cannot be clipped by anything. A floating panel needs measuring to stay on screen, and there is nothing to measure with when the script is absent. info.js adds .infotip-js to , which switches on the popover. */ .infotip__panel { display: block; margin: 8px 0 2px; clear: both; z-index: 60; width: min(420px, calc(100vw - 32px)); padding: 13px 15px; border: 1px solid var(--line-strong, rgba(120, 160, 255, .28)); border-radius: 10px; background: var(--panel, #121d3a); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .75); color: var(--ink-dim, #9aa6c8); font-size: 12.5px; font-weight: 400; line-height: 1.62; letter-spacing: normal; text-transform: none; text-align: left; white-space: normal; cursor: auto; } .infotip__panel strong { color: var(--ink, #e6ecff); font-weight: 600; } .infotip__panel code { font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px; color: var(--cyan, #5fe3ff); } .infotip__panel p { margin: 0 0 8px; } .infotip__panel p:last-child { margin-bottom: 0; } .infotip__panel ul { margin: 6px 0 0; padding-left: 17px; } .infotip__panel li { margin-bottom: 4px; } /* With JS: a fixed-position popover, placed by info.js from the summary's rect. FIXED rather than absolute because the chart cards clip their overflow - an absolutely positioned panel inside one is cut off mid-sentence, which is how this was found. Fixed positioning escapes every clipping ancestor. */ .infotip-js .infotip__panel { position: fixed; margin: 0; visibility: hidden; /* until info.js has placed it */ } .infotip-js .infotip[open] > .infotip__panel { visibility: visible; } /* A panel opened inside a table header must escape the cell's alignment and uppercase styling, which is why every text property above is reset. */ thead .infotip__panel, th .infotip__panel { font-weight: 400; } @media (max-width: 640px) { .infotip-js .infotip__panel { left: 16px !important; width: calc(100vw - 32px); } } @media print { /* On paper there is nowhere to click, so every panel prints open and inline. */ .infotip > summary { display: none; } .infotip, .infotip__panel, .infotip-js .infotip__panel { position: static; width: auto; visibility: visible; box-shadow: none; border-style: dashed; display: block; } }