/* Inline term annotations used by the member-facing pages. */
.term-annotation {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted currentColor;
    cursor: help;
    text-decoration: none;
}

.term-annotation::after {
    position: absolute;
    bottom: calc(100% + 0.55rem);
    left: 50%;
    z-index: 1055;
    max-width: min(18rem, 80vw);
    padding: 0.38rem 0.68rem;
    border: 1px solid rgba(2, 55, 147, 0.18);
    border-radius: 0.55rem;
    background: #023793;
    box-shadow: 0 0.35rem 1rem rgba(2, 55, 147, 0.22);
    color: #fff;
    content: attr(data-translations);
    display: block;
    font-size: 0.82em;
    font-weight: 700;
    line-height: 1.35;
    min-width: max-content;
    opacity: 0;
    overflow-wrap: normal !important;
    pointer-events: none;
    text-align: center;
    transform: translate(-50%, 0.3rem);
    transition: opacity 0.16s ease, transform 0.16s ease;
    visibility: hidden;
    white-space: nowrap;
    word-break: keep-all !important;
    width: max-content;
}

.term-annotation--long::after {
    min-width: 0;
    overflow-wrap: anywhere !important;
    white-space: normal;
    word-break: normal !important;
    width: min(18rem, 80vw);
}

.term-annotation--link {
    cursor: pointer;
}

.term-annotation::before {
    position: absolute;
    bottom: calc(100% + 0.2rem);
    left: 50%;
    z-index: 1055;
    width: 0;
    height: 0;
    border-top: 0.4rem solid #023793;
    border-right: 0.4rem solid transparent;
    border-left: 0.4rem solid transparent;
    content: "";
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 0.3rem);
    transition: opacity 0.16s ease, transform 0.16s ease;
    visibility: hidden;
}

.term-annotation:hover::before,
.term-annotation:hover::after,
.term-annotation:focus-visible::before,
.term-annotation:focus-visible::after,
.term-annotation.is-visible::before,
.term-annotation.is-visible::after,
.term-annotation.is-intro::before,
.term-annotation.is-intro::after {
    opacity: 1;
    transform: translate(-50%, 0);
    visibility: visible;
}

/* Edge alignment must come after the shared hover rules above. */
.term-annotation--edge-left::after {
    left: 0;
    transform: translate(0, 0.3rem);
}

.term-annotation--edge-left::before {
    left: 1rem;
    transform: translate(0, 0.3rem);
}

.term-annotation--edge-right::after {
    right: 0;
    left: auto;
    transform: translate(0, 0.3rem);
}

.term-annotation--edge-right::before {
    right: 1rem;
    left: auto;
    transform: translate(0, 0.3rem);
}

.term-annotation--edge-left:hover::after,
.term-annotation--edge-left:focus-visible::after,
.term-annotation--edge-left.is-visible::after,
.term-annotation--edge-left.is-intro::after,
.term-annotation--edge-right:hover::after,
.term-annotation--edge-right:focus-visible::after,
.term-annotation--edge-right.is-visible::after,
.term-annotation--edge-right.is-intro::after,
.term-annotation--edge-left:hover::before,
.term-annotation--edge-left:focus-visible::before,
.term-annotation--edge-left.is-visible::before,
.term-annotation--edge-left.is-intro::before,
.term-annotation--edge-right:hover::before,
.term-annotation--edge-right:focus-visible::before,
.term-annotation--edge-right.is-visible::before,
.term-annotation--edge-right.is-intro::before {
    transform: translate(0, 0);
}

.term-annotation:focus-visible {
    outline: 2px solid #0f66a8;
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .term-annotation::after {
        max-width: min(15rem, 72vw);
    }

    .term-annotation--long::after {
        width: min(15rem, 72vw);
    }
}