/**
 * Bootstrap tooltip vocabulary (TS-5439).
 *
 * The theme dresses Bootstrap's buttons and cards and never touched its
 * tooltip, so every data-bs-toggle="tooltip" in the estate rendered the
 * framework default: a near-black bubble with white text. There are call sites
 * in the sidebar menus, the social post composer, the channel report and both
 * editors, and none of them looked like the product around them.
 *
 * Same reasoning as core-buttons.css: rather than each page patching its own,
 * teach the theme the framework's vocabulary once.
 *
 * Border AND shadow, not one or the other. A white bubble on a white card has
 * no edge of its own, and without a shadow it stops reading as a layer above
 * the page rather than part of it.
 *
 * Applies on the editors too, which float tooltips over image canvases and
 * dark tool chrome. That was a deliberate call for consistency; if a canvas
 * turns out to swallow it, the fix is a scoped override on that surface, not a
 * second tooltip design.
 *
 * Specificity is a single class, matching Bootstrap's own, and this file loads
 * after bootstrap.min.css in global-styling, so it wins on order and any more
 * specific existing rule still beats it.
 */

/* Bootstrap fades the tooltip to .9. That is invisible on near-black and turns
   a white bubble milky, so it goes back to fully opaque. */
.tooltip.show {
  opacity: 1;
}

.tooltip-inner {
  background-color: var(--ts-surface-card, #ffffff);
  color: var(--ts-color-ink, #3e2155);
  border: 1px solid var(--ts-border-quiet, rgba(62, 33, 85, 0.10));
  border-radius: var(--ts-radius-input, 8px);
  box-shadow: 0 8px 20px -10px rgba(62, 33, 85, 0.40);
  padding: var(--ts-space-2, 8px) var(--ts-space-3, 12px);
  font-size: var(--ts-text-small, 0.875rem);
  /* Bootstrap centres tooltip text, which is fine for two words and poor for
     a sentence of help copy. */
  text-align: left;
}

/* The arrow is a CSS triangle: exactly one border side carries the colour, so
   each placement has to be named. Colouring all four would square it off.
   Both the .bs-tooltip-* class and the popper attribute are listed, because
   which is present depends on whether the placement was fixed or auto. */
.bs-tooltip-top .tooltip-arrow::before,
.tooltip[data-popper-placement^="top"] .tooltip-arrow::before {
  border-top-color: var(--ts-surface-card, #ffffff);
}

.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip[data-popper-placement^="bottom"] .tooltip-arrow::before {
  border-bottom-color: var(--ts-surface-card, #ffffff);
}

.bs-tooltip-start .tooltip-arrow::before,
.tooltip[data-popper-placement^="left"] .tooltip-arrow::before {
  border-left-color: var(--ts-surface-card, #ffffff);
}

.bs-tooltip-end .tooltip-arrow::before,
.tooltip[data-popper-placement^="right"] .tooltip-arrow::before {
  border-right-color: var(--ts-surface-card, #ffffff);
}