/* Interactive tooltip. Paired with assets/lotus-tooltip.js */

.lt-tooltip {
    position: fixed;
    z-index: 1000; /* above .lt-topbar (500); only used on the fallback path */
    box-sizing: border-box;
    max-width: 320px;
    padding: 0.75rem 1rem;
    margin: 0;
    overflow: visible; /* the ::after arrow lives outside the padding box */
    font-family: "Inter", sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.45;
    color: #ffffff;
    text-align: left;
    background: #172926;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(23, 41, 38, 0.25);
}

/* The UA stylesheet gives [popover] inset:0 and margin:auto to centre it.
   Both must be reset or our computed coordinates are ignored. */
.lt-tooltip[popover] {
    inset: auto;
    margin: 0;
}

/* The scroll container must not be .lt-tooltip itself: a non-visible overflow
   on either axis clips ::after, and the arrow lives outside the padding box. */
.lt-tooltip__content {
    overflow-y: auto;
    overflow-x: hidden;          /* a long token must never scroll sideways */
    overscroll-behavior: contain;
    overflow-wrap: break-word;   /* URLs in dynamic content are one unbreakable token */
}

.lt-tooltip:not(.is-open) {
    display: none;
}

.lt-tooltip a {
    color: #8fd66a;
    text-decoration: underline;
}

.lt-tooltip a:hover,
.lt-tooltip a:focus {
    color: #a8e08a;
}

.lt-tooltip p {
    margin: 0 0 0.5rem;
}

.lt-tooltip p:last-child,
.lt-tooltip ul:last-child,
.lt-tooltip ol:last-child {
    margin-bottom: 0;
}

.lt-tooltip ul,
.lt-tooltip ol {
    margin: 0 0 0.5rem;
    padding-left: 1.25rem;
}

/* Arrow. --lt-arrow is set by the controller from position().arrowOffset. */
.lt-tooltip::after {
    position: absolute;
    left: var(--lt-arrow, 50%);
    width: 0;
    height: 0;
    margin-left: -6px;
    content: "";
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
}

.lt-tooltip--bottom::after {
    bottom: 100%;
    border-bottom: 6px solid #172926;
}

.lt-tooltip--top::after {
    top: 100%;
    border-top: 6px solid #172926;
}

.lt-tooltip-trigger {
    padding: 0;
    background: none;
    border: 0;
    cursor: help;
}