/* ============================================================================
   AVFX CRM — HELP TOOLTIP
   The bubble for tooltip.js. Tokens only; direction-neutral.
   Specification: docs/packets/PACKET-30-product-platforms.md §11.3
   ========================================================================== */

.tooltip {
  position: fixed;
  z-index: var(--z-tooltip);
  max-inline-size: min(280px, calc(100vw - 32px));
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-text-primary);
  color: var(--color-text-inverse);
  font-size: var(--fs-xs);
  line-height: 1.5;
  pointer-events: none;
  animation: tooltip-in 120ms ease-out;
}
.tooltip[hidden] { display: none; }

/* PHONE: the bubble spans the content width, with the page's own 16 px gutter
   on both sides (tooltip.js passes edge 16). A fixed 280 px bubble pinned to
   one screen edge stuck out past the form on one side and left a gap on the
   other, which read as misaligned. The arrow still points at the icon. */
@media (max-width: 719px) {
  .tooltip { inline-size: calc(100vw - 32px); max-inline-size: none; }
}

.tooltip__arrow {
  position: absolute;
  inset-inline-start: var(--tip-arrow, 50%);
  inline-size: 0; block-size: 0;
  margin-inline-start: -5px;
  border: 5px solid transparent;
}
.tooltip[data-side="top"] .tooltip__arrow    { inset-block-start: 100%; border-block-start-color: var(--color-text-primary); }
.tooltip[data-side="bottom"] .tooltip__arrow { inset-block-end: 100%;   border-block-end-color: var(--color-text-primary); }

@keyframes tooltip-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tooltip { animation: none; } }