/* ─── Tooltip ──────────────────────────────────────────────────────────
   Short text hint, shown on hover/focus (toggled by tooltip.js). Dark surface
   (--text-heading) + white text. Default above the trigger; --bottom flips
   below when the edge-flip positioner detects top clipping. Never interactive
   (pointer-events:none) — that's a popover. Reuses existing tokens.
   The clamp-tooltip variant sheet is @imported here so the component loader —
   which enqueues only tooltip.css — pulls it on the same request. */
@import './clamp-tooltip.css?ver=1787769613';
.hzo-tooltip-wrap { position: relative; display: inline-flex; }
.hzo-tooltip {
    position: absolute;
    bottom: calc(100% + var(--space-sm));
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-popover);
    width: max-content;
    max-width: 240px;
    padding: 6px 10px;
    background: var(--text-heading);
    color: var(--bg-page, #fff);   /* inverse ink: page bg on a --text-heading chip — flips with the theme */
    border-radius: var(--radius-control);
    font-size: var(--fs-75);
    line-height: 1.4;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base) ease, visibility var(--transition-base);
}
.hzo-tooltip.is-open { opacity: 1; visibility: visible; }
.hzo-tooltip--bottom { bottom: auto; top: calc(100% + var(--space-sm)); }
@media (prefers-reduced-motion: reduce) { .hzo-tooltip { transition: none; } }