/* Tooltips -see docs/strategy/design-system/25-tooltip.md
 * JS helper: static/ui/js/tooltip.js (hover/focus show+hide, Escape to close,
 * instant re-open for a second trigger while one is already open). */

.tooltip-trigger {
  position: relative;
}

.tooltip {
  position: absolute;
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  font-size: var(--font-size-small);
  font-weight: 600;
  white-space: nowrap;
  z-index: 260;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

/* Skip the transition when a second tooltip opens while one is already
   showing -see tooltip.js's SHOW_DELAY_MS/instant handoff. */
.tooltip[data-instant] {
  transition-duration: 0ms;
}

.tooltip::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
}

/* Color variants */
.tooltip.brand   { background: var(--primary-dark);  color: var(--surface); }
.tooltip.brand::after   { background: var(--primary-dark); }

.tooltip.pro     { background: var(--admin-accent);  color: var(--surface); }
.tooltip.pro::after     { background: var(--admin-accent); }

.tooltip.light   { background: var(--primary-light); color: var(--primary); border: 1px solid var(--primary); }
.tooltip.light::after   { background: var(--primary-light); border-right: 1px solid var(--primary); border-bottom: 1px solid var(--primary); }

.tooltip.neutral { background: var(--text);          color: var(--surface); }
.tooltip.neutral::after { background: var(--text); }

/* Position variants -anchor element must be .tooltip-trigger (position:relative).
   Each transform pairs the position-centering translate with a scale the
   entrance animation drives; transform-origin points back at the trigger. */
.tooltip.top    { bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) scale(1); transform-origin: bottom center; }
.tooltip.top::after    { bottom: -3px; left: 50%; margin-left: -3px; }

.tooltip.bottom { top: calc(100% + 8px);    left: 50%; transform: translateX(-50%) scale(1); transform-origin: top center; }
.tooltip.bottom::after { top: -3px; left: 50%; margin-left: -3px; }

.tooltip.right  { left: calc(100% + 8px);   top: 50%;  transform: translateY(-50%) scale(1); transform-origin: left center; }
.tooltip.right::after  { left: -3px; top: 50%; margin-top: -3px; }

.tooltip.left   { right: calc(100% + 8px);  top: 50%;  transform: translateY(-50%) scale(1); transform-origin: right center; }
.tooltip.left::after   { right: -3px; top: 50%; margin-top: -3px; }

/* Entrance -fade + scale from 0.97, never from 0 (nothing appears from
   nothing). Browsers without @starting-style just show the tooltip
   instantly - safe fallback, matches .toast/.sheet-modal. */
@starting-style {
  .tooltip.top    { opacity: 0; transform: translateX(-50%) scale(0.97); }
  .tooltip.bottom { opacity: 0; transform: translateX(-50%) scale(0.97); }
  .tooltip.right  { opacity: 0; transform: translateY(-50%) scale(0.97); }
  .tooltip.left   { opacity: 0; transform: translateY(-50%) scale(0.97); }
}