/* Shared by native-title hints, Bootstrap tooltips/popovers and chart hints. */
:root {
    --bi-tooltip-surface: #f5faff;
    --bi-tooltip-ink: var(--bi-navy);
    --bi-tooltip-border: #c5dcef;
    --bi-tooltip-radius: 10px;
    --bi-tooltip-shadow: 0 5px 12px rgba(8, 45, 98, .06), 0 14px 32px rgba(8, 45, 98, .12);
    --bi-tooltip-font-size: 13px;
    --bi-tooltip-padding-x: 12px;
    --bi-tooltip-padding-y: 9px;
}

.tooltip {
    --bs-tooltip-max-width: min(320px, calc(100vw - 24px));
    --bs-tooltip-color: var(--bi-tooltip-ink);
    --bs-tooltip-bg: var(--bi-tooltip-surface);
    --bs-tooltip-border-radius: var(--bi-tooltip-radius);
    --bs-tooltip-opacity: 1;
    --bs-tooltip-font-size: var(--bi-tooltip-font-size);
    --bs-tooltip-padding-x: var(--bi-tooltip-padding-x);
    --bs-tooltip-padding-y: var(--bi-tooltip-padding-y);
    --bs-tooltip-arrow-width: 10px;
    --bs-tooltip-arrow-height: 6px;
    font-family: var(--bi-font-family);
    line-height: 1.45;
    pointer-events: auto;
}
.tooltip.fade {
    transition: opacity 140ms ease;
}
.tooltip .tooltip-inner {
    border: 1px solid var(--bi-tooltip-border);
    box-shadow: var(--bi-tooltip-shadow);
    overflow-wrap: anywhere;
    white-space: normal;
    text-align: left;
    animation: bi-tooltip-enter 140ms ease both;
}
@keyframes bi-tooltip-enter {
    from { opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Rich explanatory panels keep their existing contents and opening behavior. */
.popover {
    --bs-popover-bg: var(--bi-tooltip-surface);
    --bs-popover-border-color: var(--bi-tooltip-border);
    --bs-popover-border-radius: var(--bi-tooltip-radius);
    --bs-popover-inner-border-radius: calc(var(--bi-tooltip-radius) - 1px);
    --bs-popover-header-bg: transparent;
    --bs-popover-header-color: var(--bi-tooltip-ink);
    --bs-popover-body-color: var(--bi-tooltip-ink);
    --bs-popover-font-size: var(--bi-tooltip-font-size);
    --bs-popover-header-padding-x: var(--bi-tooltip-padding-x);
    --bs-popover-body-padding-x: var(--bi-tooltip-padding-x);
    --bs-popover-body-padding-y: var(--bi-tooltip-padding-y);
    font-family: var(--bi-font-family);
    line-height: 1.45;
    box-shadow: var(--bi-tooltip-shadow);
}
.popover .popover-header {
    font-size: inherit;
    font-weight: 600;
}
.popover.fade {
    transition: opacity 140ms ease;
}

/* Use a real button for information that must also work with keys and touch. */
.bi-tooltip-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: 0 0 0 4px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13px;
    line-height: 1;
    vertical-align: middle;
    cursor: help;
    transition: color 140ms ease, background-color 140ms ease;
}
.bi-tooltip-info:is(:hover, :focus-visible) {
    color: var(--bi-blue);
    background: rgba(8, 102, 198, .08);
}
.bi-tooltip-info:focus-visible {
    outline: 2px solid var(--bi-blue);
    outline-offset: 3px;
}
@media (pointer: coarse) {
    .bi-tooltip-info::after {
        position: absolute;
        inset: -13px;
        content: "";
    }
}
@media (prefers-reduced-motion: reduce) {
    .tooltip.fade, .popover.fade, .bi-tooltip-info { transition: none; }
    .tooltip .tooltip-inner { animation: none; }
}