/* Laag: framework. De rangorde staat in skeleton/templates/page.php:
 *   @layer framework, site, theme, type, item;
 * Alles wat het framework meestuurt zit in de onderste laag, zodat site-CSS en CMS-opmaak
 * ervan winnen zonder specificiteits-trucs. Binnen deze laag telt specificiteit gewoon, dus
 * de onderlinge verhouding tussen framework-bestanden verandert er niet door.
 *
 * Een bestand dat deze wikkel MIST staat buiten elke laag en wint daarmee van ALLES —
 * ook van het CMS. `tests/Framework/CodeStyle/ModuleCssIsLayeredTest.php` bewaakt dat. */
@layer framework {
/* 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="..."] .tooltip in hun eigen CSS.
 */

@layer mm {
    .tooltip {
        /* Donker vlak met lichte tekst — de sites zijn licht (zie variables.css). */
        --tooltip-bg: #1e293b;
        --tooltip-fg: #f8fafc;
    }
}

.tooltip {
    position: fixed;
    z-index: 13000;
    max-width: 22rem;
    padding: .4rem .65rem;
    background: var(--tooltip-bg);
    color: var(--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;
}

.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. */
.tooltip-arrow {
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
    transform: rotate(45deg);
    left: calc(var(--arrow-offset, 50%) - 4px);
    border-radius: 1px;
}

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

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

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