/* The site's tooltip (wwwroot/js/tooltip.js): every element's title, in the dashboard's "last visit"
   style. Fixed, so it never adds to the page's size; tooltip.js sets left and top, which side it
   opens on (data-placement: top, or bottom when there is no room above) and where its arrow points
   (--site-tooltip-arrow-x). Above the modals (1055), toasts (1090) and the header's panels. */
.site-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    width: max-content;
    max-width: 320px;
    padding: 4px 9px;
    border-radius: 6px;
    background: #172b45;
    box-shadow: 0 6px 16px rgba(12, 7, 74, 0.25);
    color: #fff;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    /* A title's line breaks kept, as the browser's own tooltip keeps them; a long word broken
       rather than left sticking out. */
    white-space: pre-line;
    overflow-wrap: anywhere;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(3px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s;
}

    .site-tooltip[data-placement="bottom"] {
        transform: translateY(-3px);
    }

    .site-tooltip.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s;
    }

    /* The arrow, pointing down at the element from above, or up at it from below. */
    .site-tooltip::after {
        content: "";
        position: absolute;
        left: var(--site-tooltip-arrow-x, 50%);
        border: 5px solid transparent;
        transform: translateX(-50%);
    }

    .site-tooltip[data-placement="top"]::after {
        top: 100%;
        border-top-color: #172b45;
    }

    .site-tooltip[data-placement="bottom"]::after {
        bottom: 100%;
        border-bottom-color: #172b45;
    }

@media (prefers-reduced-motion: reduce) {
    .site-tooltip,
    .site-tooltip.is-visible {
        transform: none;
        transition: none;
    }
}

@media print {
    .site-tooltip {
        display: none;
    }
}