/* Hover tooltip — add data-tip="…" to any element and it shows a small dark chip below it
   on hover/focus. Extracted from the repeated bank-transactions pattern (kebab / status /
   flag / row-cell tips) so it's one shared source. Same look: dark chip, light text. */

[data-tip] { position: relative; }

[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  white-space: nowrap;
  background: var(--color-text);
  color: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-dropdown);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 20;
}
[data-tip]:hover::after,
[data-tip]:focus-visible::after { opacity: 1; }

/* Right-anchored variant so a tip on a right-edge element doesn't run off-screen. */
[data-tip][data-tip-end]::after { left: auto; right: 0; }

/* Centered over the trigger (13 Aug 2026 — the Tax dashboard's Revenue-inbox icon). */
[data-tip][data-tip-center]::after { left: 50%; transform: translateX(-50%); }

/* Wrapping variant for long tips inside a narrow panel (Peter, 31 Jul: the pay
   form's right-anchored tips ran off the panel's LEFT edge and were clipped by
   its scroll container). Caps the width and lets the line wrap instead. */
[data-tip][data-tip-wrap]::after { white-space: normal; width: max-content; max-width: 250px; line-height: 1.5; }

/* BELOW instead of above — for anything whose own title sits directly over it
   (Peter, 30 Jul: "the explain more covers the title"). */
[data-tip][data-tip-below]::after { bottom: auto; top: calc(100% + 6px); }

/* Touch devices have no hover — hide the chip. */
@media (hover: none) { [data-tip]::after { display: none; } }