/* --- Tooltip component --- */
.tooltip { position: relative; }
.tooltip__bubble {
  position: absolute; inset: auto auto 100% 50%; transform: translate(-50%, -8px);
  background: var(--color-on-surface, #111827); color: var(--color-surface, #fff);
  padding:.35rem .5rem; border-radius: .5rem; font-size:.85rem; white-space: nowrap;
  box-shadow: 0 10px 20px rgba(0,0,0,.15); opacity: 0; pointer-events: none;
  transition: opacity .12s ease, transform .12s ease; z-index: 20;
}
.tooltip[data-side="bottom"] .tooltip__bubble { inset: 100% auto auto 50%; transform: translate(-50%, 8px); }
.tooltip[data-side="right"] .tooltip__bubble { inset: 50% auto auto 100%; transform: translate(8px, -50%); }
.tooltip[data-side="left"] .tooltip__bubble { inset: 50% 100% auto auto; transform: translate(-8px, -50%); }
.tooltip[aria-expanded="true"] .tooltip__bubble { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.tooltip[data-side="bottom"][aria-expanded="true"] .tooltip__bubble { transform: translate(-50%, 0); }
.tooltip[data-side="right"][aria-expanded="true"] .tooltip__bubble { transform: translate(0, -50%); }
.tooltip[data-side="left"][aria-expanded="true"] .tooltip__bubble { transform: translate(0, -50%); }
.tooltip__trigger { border-bottom: 1px dotted currentColor; cursor: help; }