/* A popover in the top layer, anchored to its trigger by app/javascript/tooltip.js. It flips to the other side
   when the preferred one lacks room, and slides along the edge when neither side fits (ADR 0027). */
.tooltip {
  inset: auto;
  width: max-content;
  max-width: min(36ch, 100vw - 2 * var(--space-16));
  margin: var(--space-8);
  padding: var(--space-4) var(--space-8);
  overflow: visible;
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  background: var(--surface-inverse-deep);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: var(--fs-body-xs);
  font-weight: var(--fw-body);
  line-height: var(--lh-body-xs);
  text-align: start;
  text-wrap: pretty;
  hyphens: auto;
  overflow-wrap: break-word;
  opacity: 0;
  scale: 0.96;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    scale var(--dur-fast) var(--ease-out),
    overlay var(--dur-fast) allow-discrete,
    display var(--dur-fast) allow-discrete;
}

.tooltip:popover-open {
  opacity: 1;
  scale: 1;
}

@starting-style {
  .tooltip:popover-open {
    opacity: 0;
    scale: 0.96;
  }
}

/* Moving on from one tooltip to the next, or keeping one open through someone else's refresh. */
.tooltip--instant {
  transition: none;
}

.tooltip--top {
  position-area: top;
  position-try-fallbacks: flip-block, top span-right, top span-left, bottom span-right, bottom span-left;
}

.tooltip--bottom {
  position-area: bottom;
  position-try-fallbacks: flip-block, bottom span-right, bottom span-left, top span-right, top span-left;
}

.tooltip--left {
  position-area: left;
  position-try-fallbacks: flip-inline, top, bottom;
}

.tooltip--right {
  position-area: right;
  position-try-fallbacks: flip-inline, top, bottom;
}

@media (prefers-reduced-motion: reduce) {
  .tooltip,
  .tooltip:popover-open {
    scale: none;
  }

  @starting-style {
    .tooltip:popover-open {
      scale: none;
    }
  }
}