/* tooltip.css — styling voor public/modules/tooltip.js.
 *
 * Defaults in @layer mm — unlayered site-CSS wint altijd, ongeacht laadvolgorde.
 *
 * Singleton-element met data-attached-side="top|bottom" (gezet door attach.js)
 * en --arrow-offset (px t.o.v. de panel-left) voor de pijl-positionering.
 *
 * data-theme op de tooltip zelf (gezet door tooltip.js op basis van anchor-
 * ancestor) zorgt voor contrast ongeacht het page-theme — sites overschrijven
 * dit via [data-theme="..."] .mm-tooltip in hun eigen CSS.
 */

@layer mm {
    .mm-tooltip {
        /* Tooltip inverteert altijd voor contrast: donker op lichte pagina's,
           licht op donkere pagina's. */
        --mm-tooltip-bg: light-dark(#1e293b, #f8fafc);
        --mm-tooltip-fg: light-dark(#f8fafc, #1e293b);
    }
}

.mm-tooltip {
    position: fixed;
    z-index: 13000;
    max-width: 22rem;
    padding: .4rem .65rem;
    background: var(--mm-tooltip-bg);
    color: var(--mm-tooltip-fg);
    border-radius: .35rem;
    font: 500 .8rem/1.4 system-ui, -apple-system, sans-serif;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity .15s ease, transform .15s ease;
    visibility: hidden;
    word-wrap: break-word;
}

.mm-tooltip[data-visible="1"] {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* Pijl: 8x8 vierkant 45° gekanteld, gepositioneerd via --arrow-offset.
   Border-radius op de buitenste tip houdt de scherpe punt enigszins zacht. */
.mm-tooltip-arrow {
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
    transform: rotate(45deg);
    left: calc(var(--arrow-offset, 50%) - 4px);
    border-radius: 1px;
}

.mm-tooltip[data-attached-side="top"] .mm-tooltip-arrow {
    bottom: -4px;
}

.mm-tooltip[data-attached-side="bottom"] .mm-tooltip-arrow {
    top: -4px;
}

/* Reduced-motion: meteen tonen/verbergen, geen transitie */
@media (prefers-reduced-motion: reduce) {
    .mm-tooltip {
        transition: none;
        transform: none;
    }
}