/* ============================================================
   tooltips.css · Halcyon candidate-branch demo · tooltip engine styling.
   Paired with tooltips.js. One shared tip node (#ti-tip-shared), Datum
   token styled so it flips light / dark with the rest of the skin.
   Instrument cyan hairline border, calm surface, mono micro-copy.
   Box-drawing-free. Honors prefers-reduced-motion.
   ============================================================ */

.ti-tip {
  position: fixed;
  z-index: 2147483400;          /* above content, below the tour scrim */
  top: 0; left: 0;
  max-width: min(280px, calc(100vw - 16px));
  box-sizing: border-box;
  padding: 8px 11px;
  background: var(--surface-2, #1C2027);
  color: var(--text, #E7EAEE);
  border: 1px solid var(--border-accent, rgba(84, 199, 224, 0.30));
  border-radius: var(--radius-sm, 7px);
  box-shadow: var(--shadow, 0 6px 22px rgba(0, 0, 0, 0.40));
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 12.5px;
  line-height: 1.45;
  pointer-events: none;          /* never steals the hover from the target */
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .14s ease, transform .14s ease;
}
.ti-tip.is-open {
  opacity: 1;
  transform: translateY(0);
}
.ti-tip[aria-hidden="true"] { visibility: hidden; }
.ti-tip.is-open { visibility: visible; }

.ti-tip-body { display: block; }

/* a small pointer arrow that follows the resolved side */
.ti-tip-arrow {
  position: absolute;
  width: 8px; height: 8px;
  background: var(--surface-2, #1C2027);
  border: 1px solid var(--border-accent, rgba(84, 199, 224, 0.30));
  transform: rotate(45deg);
}
.ti-tip[data-side="top"] .ti-tip-arrow {
  bottom: -5px; left: 50%; margin-left: -4px;
  border-top: none; border-left: none;
}
.ti-tip[data-side="bottom"] .ti-tip-arrow {
  top: -5px; left: 50%; margin-left: -4px;
  border-bottom: none; border-right: none;
}
.ti-tip[data-side="left"] .ti-tip-arrow {
  right: -5px; top: 50%; margin-top: -4px;
  border-bottom: none; border-left: none;
}
.ti-tip[data-side="right"] .ti-tip-arrow {
  left: -5px; top: 50%; margin-top: -4px;
  border-top: none; border-right: none;
}

/* a quiet affordance: anything carrying a tip shows a help cursor */
[data-tip] { cursor: help; }
[data-tip]:focus-visible { outline: 2px solid var(--gold, #E0A24A); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .ti-tip { transition: none; transform: none; }
  .ti-tip.is-open { transform: none; }
}