:root {
    --tt-bg: #111827;
    --tt-fg: #ffffff;
    --tt-shadow: 0 10px 25px rgba(0,0,0,.25);
    --tt-radius: 10px;
    /* converted from rem to px */
    --tt-pad-y: 8px; /* was .5rem */
    --tt-pad-x: 10px; /* was .65rem */
    --tt-gap: 8px; /* was .5rem */
    --tt-arrow: 8px;
    --tt-max: 260px;

    /* for cursor tooltips */
    --ct-bg: #111827;
    --ct-fg: #ffffff;
    --ct-shadow: 0 10px 25px rgba(0,0,0,.25);
    --ct-radius: 10px;
    --ct-pad-y: 8px;
    --ct-pad-x: 10px;
    --ct-max: 260px;
    --ct-offset-x: 12px; /* distance from cursor */
    --ct-offset-y: 16px;
}

.tool__tip {
    position: relative;
}

span.tool__tip {
    display: inline-flex;
    align-items: center;
    gap: 6px;          /* was .35rem */
}

.tool__tip::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + var(--tt-gap) + var(--tt-arrow));
    transform: translateX(-50%) translateY(6px);
    max-width: var(--tt-max);
    background: var(--tt-bg);
    color: var(--tt-fg);
    padding: var(--tt-pad-y) var(--tt-pad-x);
    border-radius: var(--tt-radius);
    box-shadow: var(--tt-shadow);
    font: 500 14px/1.25 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    text-align: center;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
    z-index: 9999;
}

.tool__tip::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + var(--tt-gap));
    transform: translateX(-50%) translateY(6px);

    border: var(--tt-arrow) solid transparent;
    border-top-color: var(--tt-bg);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
    z-index: 9999;
}

.tool__tip:hover::after,
.tool__tip:focus-visible::after,
.tool__tip:hover::before,
.tool__tip:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition: opacity .15s ease, transform .15s ease;
}

.hint {
    border-bottom: 1px dotted currentColor;
    outline: none;
}


.tool__tip--top::after {
    left: 50%;
    bottom: calc(100% + var(--tt-gap) + var(--tt-arrow));
    top: auto;
    transform: translateX(-50%) translateY(6px);
}

.tool__tip--top::before {
    left: 50%;
    bottom: calc(100% + var(--tt-gap));
    top: auto;
    border: var(--tt-arrow) solid transparent;
    border-top-color: var(--tt-bg);
    border-bottom-color: transparent;
    transform: translateX(-50%) translateY(6px);
}

/* BOTTOM */
.tool__tip--bottom::after {
    left: 50%;
    top: calc(100% + var(--tt-gap) + var(--tt-arrow));
    bottom: auto;
    transform: translateX(-50%) translateY(-6px);
}

.tool__tip--bottom::before {
    left: 50%;
    top: calc(100% + var(--tt-gap));
    bottom: auto;
    border: var(--tt-arrow) solid transparent;
    border-bottom-color: var(--tt-bg);
    border-top-color: transparent;
    transform: translateX(-50%) translateY(-6px);
}

/* LEFT */
.tool__tip--left::after {
    right: calc(100% + var(--tt-gap) + var(--tt-arrow));
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateX(6px) translateY(-50%);
    text-align: right;
}

.tool__tip--left::before {
    right: calc(100% + var(--tt-gap));
    left: auto;
    top: 50%;
    bottom: auto;
    border: var(--tt-arrow) solid transparent;
    border-left-color: var(--tt-bg);
    border-right-color: transparent;
    transform: translateX(6px) translateY(-50%);
}

/* RIGHT */
.tool__tip--right::after {
    left: calc(100% + var(--tt-gap) + var(--tt-arrow));
    top: 50%;
    bottom: auto;
    transform: translateX(-6px) translateY(-50%);
    text-align: left;
}

.tool__tip--right::before {
    left: calc(100% + var(--tt-gap));
    top: 50%;
    bottom: auto;
    border: var(--tt-arrow) solid transparent;
    border-right-color: var(--tt-bg);
    border-left-color: transparent;
    transform: translateX(-6px) translateY(-50%);
}

/* keep the show animation working for all positions */
.tool__tip:hover::after,
.tool__tip:focus-visible::after,
.tool__tip:hover::before,
.tool__tip:focus-visible::before {
    opacity: 1;
    visibility: visible;
}

/* Adjust the "shown" transform per position */
.tool__tip--top:hover::after,
.tool__tip--top:focus-visible::after,
.tool__tip--top:hover::before,
.tool__tip--top:focus-visible::before {
    transform: translateX(-50%) translateY(0);
}

.tool__tip--bottom:hover::after,
.tool__tip--bottom:focus-visible::after,
.tool__tip--bottom:hover::before,
.tool__tip--bottom:focus-visible::before {
    transform: translateX(-50%) translateY(0);
}

.tool__tip--left:hover::after,
.tool__tip--left:focus-visible::after,
.tool__tip--left:hover::before,
.tool__tip--left:focus-visible::before {
    transform: translateX(0) translateY(-50%);
}

.tool__tip--right:hover::after,
.tool__tip--right:focus-visible::after,
.tool__tip--right:hover::before,
.tool__tip--right:focus-visible::before {
    transform: translateX(0) translateY(-50%);
}



.cursor-tooltip {
    position: fixed; /* relative to viewport */
    left: 0;
    top: 0;
    transform: translate(-9999px, -9999px); /* offscreen by default */
    max-width: var(--ct-max);
    background: var(--ct-bg);
    color: var(--ct-fg);
    padding: var(--ct-pad-y) var(--ct-pad-x);
    border-radius: var(--ct-radius);
    box-shadow: var(--ct-shadow);
    font: 500 14px/1.25 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    pointer-events: none; /* never blocks hover */
    z-index: 9999;
    opacity: 0;
    transition: opacity .08s ease;
}

    .cursor-tooltip.is-visible {
        opacity: 1;
    }

.hint {
    border-bottom: 1px dotted currentColor;
    outline: none;
    cursor: help;
}