/* Infobulle — modèle canonique ; son emploi : canon_tooltip.md. */

@layer components {
    .tooltip {
        position: fixed;
        inset: auto;
        z-index: var(--canon-plane-menu);
        max-width: min(300px, 100vw - 2 * var(--canon-space-edge));
        padding: var(--tooltip-padding, var(--canon-space-2) var(--canon-space-3));
    }

    .tooltip {
        border: var(--canon-line-width) solid var(--tooltip-line, var(--canon-theme-line));
        border-radius: var(--tooltip-radius, var(--canon-radius-control));
        background-color: var(--tooltip-surface, var(--canon-theme-raised));
        box-shadow: var(--canon-shadow-overlay, none);
    }

    .tooltip {
        font-size: var(--canon-size-note);
        color: var(--tooltip-ink, var(--canon-theme-ink));
    }
    .tooltip-title {
        font-weight: var(--canon-weight-title);
    }
    .tooltip-text {
        color: var(--tooltip-muted, var(--canon-theme-muted));
        font-variant-numeric: tabular-nums;
    }

    .tooltip {
        pointer-events: none;
    }
}

/* Part locale — les réglages que l'app pose sur cet objet, contexte par contexte. */

@layer components {
    .tooltip {
        --tooltip-padding: 10px 14px;
        --tooltip-radius: 6px;
        --tooltip-line: rgb(0 0 0 / 0.1);
    }
    [data-essay-dark] .tooltip,
    .tooltip[data-essay-dark] {
        --tooltip-surface: hsl(220 5% 15%);
        --tooltip-line: hsl(220 5% 20%);
        --tooltip-ink: rgb(255 255 255 / 0.9);
        --tooltip-muted: rgb(255 255 255 / 0.6);
    }
}