/* <ad-tooltip>: visible description before enhancement, floating bubble after. */
ad-tooltip {
  display: inline;
  position: relative;
}

ad-tooltip:not([data-enhanced]) > [role="tooltip"] {
  display: inline;
  margin-inline-start: 0.35em;
  color: var(--text-muted);
}

ad-tooltip:not([data-enhanced]) > [role="tooltip"]::before {
  content: "(";
}

ad-tooltip:not([data-enhanced]) > [role="tooltip"]::after {
  content: ")";
}

ad-tooltip > [aria-describedby] {
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.09em;
  cursor: help;
}

ad-tooltip > button[aria-describedby] {
  border: 0;
  padding: 0;
  min-block-size: var(--target-min);
  background: none;
  color: var(--link);
  font: inherit;
  font-weight: 600;
  border-radius: var(--radius-s);
}

ad-tooltip[data-enhanced] > [role="tooltip"] {
  position: absolute;
  inset-block-end: calc(100% + 0.5rem);
  inset-inline-start: 0;
  z-index: 60;
  inline-size: max-content;
  max-inline-size: min(22rem, calc(100vw - 2 * var(--gutter)));
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-s);
  background: var(--bg-inverse);
  color: var(--text-inverse);
  font-size: var(--text--1);
  line-height: 1.4;
  text-wrap: pretty;
  box-shadow: var(--shadow-md);
}

/* Anchor positioning (Chromium 125+, Safari 26): place the bubble above the
 * trigger, or below when there is no room, without any JavaScript maths. */
@supports (position-area: top) {
  ad-tooltip[data-enhanced] > [role="tooltip"] {
    position: fixed;
    inset: auto;
    position-area: top;
    position-try-fallbacks: flip-block;
    margin-block-end: 0.5rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  ad-tooltip[data-enhanced] > [role="tooltip"]:not([hidden]) {
    animation: tooltip-in var(--duration-fast) var(--ease-out);
  }

  @keyframes tooltip-in {
    from {
      opacity: 0;
      translate: 0 0.25rem;
    }
  }
}