/* Tooltip Styles */
.tooltip-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;

  /* Shared with the tooltip Stimulus controller, which reads the margin off the
     panel to clamp it with the same gutter this stylesheet sizes it against. */
  --tooltip-gap: 8px;
  --tooltip-viewport-margin: 8px;
}

.tooltip-trigger {
  display: inline-flex;
  align-items: center;
  cursor: help;
  color: var(--text-muted);
  transition: color 0.2s;
  margin-left: 0.375rem;
}

.tooltip-trigger:hover {
  color: var(--text-secondary);
}

.tooltip-trigger svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

/* Wrapping an existing control rather than the partial's own info icon: no
   nudge margin, and the cursor belongs to whatever is inside. */
.tooltip-trigger--bare {
  margin-left: 0;
  cursor: inherit;
}

/* Only the resting placement: the tooltip controller centres the panel on its
   trigger and pulls it back inside the viewport every time it is shown, and
   flips it below the trigger when there is no room above.

   It rests against the trigger's right edge rather than centred on it because a
   hidden panel still counts towards the page's scrollable width. Overhanging to
   the left is discarded, so this cannot give the page a horizontal scrollbar,
   which a centred resting position does for any trigger near the right edge. */
.tooltip-content {
  position: absolute;
  bottom: calc(100% + var(--tooltip-gap));
  right: 0;
  transform: translateX(var(--tooltip-shift, 0px));
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-secondary);
  white-space: normal;
  width: max-content;
  max-width: min(300px, calc(100vw - 2 * var(--tooltip-viewport-margin)));
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  box-shadow: 0 4px 12px var(--shadow-medium);
}

/* Flipped under the trigger, for triggers with no room above them. */
.tooltip-content--below {
  bottom: auto;
  top: calc(100% + var(--tooltip-gap));
}

.tooltip-content::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--tooltip-arrow-x, 50%);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--bg-tertiary);
}

.tooltip-content--below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--bg-tertiary);
}

.tooltip-content.tooltip-visible {
  opacity: 1;
  visibility: visible;
}

/* Responsive */
@media (max-width: 768px) {
  .tooltip-content {
    max-width: min(250px, calc(100vw - 2 * var(--tooltip-viewport-margin)));
    font-size: 0.8rem;
  }
}