/*
 * Tooltip.
 *
 * Mandatory on every icon button, on any button whose text is not self-evident and on any
 * complex element of a page: without a caption a glyph is guessed, not read. The text is
 * short; when it will not fit and cannot be shortened, it sends the reader to the page legend
 * instead of growing.
 *
 * One element is reused for the whole page and positioned by the script, so a tooltip is never
 * clipped by the overflow of the box its trigger sits in.
 */

/*
 * The bubble is a popover, so that a tooltip inside a modal window is drawn over the window and
 * not behind it: a modal lives in the browser's top layer, which no z-index reaches.
 *
 * The three lines after `position` undo what the browser does to a popover by default — it is
 * centred in the viewport with a border and padding of its own. This one is placed by the
 * script, in viewport coordinates.
 */
.app-tooltip {
    position: fixed;
    inset: auto;
    margin: 0;
    border: 0;
    z-index: 100;
    max-width: var(--w-tooltip);
    padding: var(--inset-tip-y) var(--inset-tip-x);
    border-radius: var(--radius-badge);
    background: var(--text);
    color: var(--surface);
    font-size: var(--fs-caption);
    line-height: var(--lh-tight);
    box-shadow: var(--shadow-pop);
    pointer-events: none;
}