/* ── Hover tooltips / coachmarks — [data-tip] popovers (Averionics-styled) ──
   Pure CSS, no JS: any element with data-tip="…" shows a styled popover on
   hover OR keyboard focus-visible (replaces the browser's native title=). The
   bubble is centred with the `translate` property so `transform` is free to do
   the entrance movement; default position is above, with data-tip-pos="bottom|
   left|right" overrides. Honors prefers-reduced-motion (fade only, no slide).
   Loaded by app/index.html after view-transitions.css. */

[data-tip] { position: relative; }

[data-tip]::after,
[data-tip]::before {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  z-index: 60;
  transition: opacity var(--av-duration-control, 150ms) var(--av-easing-out, ease),
              transform var(--av-duration-control, 150ms) var(--av-easing-out, ease);
}

/* Bubble */
[data-tip]::after {
  content: attr(data-tip);
  left: 50%;
  bottom: calc(100% + 9px);
  translate: -50% 0;          /* centering — kept separate from `transform` */
  transform: translateY(4px); /* entrance movement */
  width: max-content;
  max-width: 220px;
  padding: 6px 9px;
  border-radius: var(--av-radius-sm, 8px);
  background: var(--av-bg-elevated, #232D3A);
  color: var(--av-fg-primary, #EEF4FA);
  border: 1px solid var(--av-line-strong, #344658);
  box-shadow: var(--av-shadow-mid, 0 8px 24px rgba(0, 0, 0, 0.32));
  font-family: var(--av-font-ui, "Segoe UI", sans-serif);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: normal;
}

/* Arrow */
[data-tip]::before {
  content: "";
  left: 50%;
  bottom: calc(100% + 4px);
  translate: -50% 0;
  transform: translateY(4px);
  border: 5px solid transparent;
  border-top-color: var(--av-line-strong, #344658);
}

[data-tip]:hover::after,
[data-tip]:hover::before,
[data-tip]:focus-visible::after,
[data-tip]:focus-visible::before {
  opacity: 1;
  transform: translateY(0);
}

/* ── position: bottom ── */
[data-tip-pos="bottom"]::after  { bottom: auto; top: calc(100% + 9px); transform: translateY(-4px); }
[data-tip-pos="bottom"]::before {
  bottom: auto; top: calc(100% + 4px); transform: translateY(-4px);
  border-top-color: transparent; border-bottom-color: var(--av-line-strong, #344658);
}

/* ── position: left ── */
[data-tip-pos="left"]::after  { left: auto; right: calc(100% + 9px); bottom: 50%; translate: 0 50%; transform: translateX(4px); }
[data-tip-pos="left"]::before {
  left: auto; right: calc(100% + 4px); bottom: 50%; translate: 0 50%; transform: translateX(4px);
  border-top-color: transparent; border-left-color: var(--av-line-strong, #344658);
}

/* ── position: right ── */
[data-tip-pos="right"]::after  { left: calc(100% + 9px); bottom: 50%; translate: 0 50%; transform: translateX(-4px); }
[data-tip-pos="right"]::before {
  left: calc(100% + 4px); bottom: 50%; translate: 0 50%; transform: translateX(-4px);
  border-top-color: transparent; border-right-color: var(--av-line-strong, #344658);
}

/* Horizontal variants settle on the X axis */
[data-tip-pos="left"]:hover::after,  [data-tip-pos="left"]:focus-visible::after,
[data-tip-pos="left"]:hover::before, [data-tip-pos="left"]:focus-visible::before,
[data-tip-pos="right"]:hover::after,  [data-tip-pos="right"]:focus-visible::after,
[data-tip-pos="right"]:hover::before, [data-tip-pos="right"]:focus-visible::before {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-tip]::after,
  [data-tip]::before {
    transition: opacity var(--av-duration-control, 150ms) linear;
    transform: none !important;
  }
}