/* ============================================================
   CSS utilities — reusable, name-spaced, no JS.
   ============================================================ */

/* Hover/focus tooltip driven by data-tooltip attribute.
   Apply .tooltip-hover to the element + add data-tooltip="…".
   Modifier --right anchors to the right edge with wrap, useful
   inside narrow containers where the default centered tooltip
   would overflow horizontally. */

.tooltip-hover {
  position: relative;
}

.tooltip-hover:hover::after,
.tooltip-hover:focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--color-surface);
  background: var(--color-text);
  white-space: nowrap;
  z-index: var(--z-raised);
  pointer-events: none;
}

.tooltip-hover--right:hover::after,
.tooltip-hover--right:focus-visible::after {
  left: auto;
  right: 0;
  transform: none;
  max-width: 200px;
  width: max-content;
  white-space: normal;
}