/* ── Info bubble ─────────────────────────────────────────────────────────────
 * The small "(i)" beside a label, with a tooltip on hover and on keyboard focus.
 * Markup: templates/tenant/partials/_info.html.
 *
 * Globally loaded rather than page CSS: it started in pages/policies.css and by
 * the time four pages used it, a page that forgot the stylesheet rendered a bare
 * SVG with its tooltip text spilled inline — the same trap .form-switch is in
 * components/ to avoid (see forms.css).
 *
 * A host that clips its overflow will clip the tooltip: it is positioned above
 * its own row. See .cs-group__rows in list-group.css for how that is handled.
 */

/* Info bubble (i) with a hover/focus tooltip next to a mode label. */
.cs-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--cs-neutral-400);
  cursor: help;
  outline: none;
}

.cs-info:hover,
.cs-info:focus-visible { color: var(--cs-blue-600); }

.cs-info__icon { width: 15px; height: 15px; display: block; }

.cs-info__tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  transform: translateY(4px);
  z-index: 20;
  width: max-content;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-1);
  padding: var(--cs-space-3);
  font-size: var(--cs-text-xs);
  font-weight: var(--cs-weight-normal);
  line-height: 1.45;
  color: var(--cs-neutral-100);
  text-align: left;
  /* Never inherit the host's nowrap. A .cs-row__title ellipsises, so a bubble
     sat in one handed its tooltip `white-space: nowrap`: the text ran out past
     `max-width` on a single line and the last words - the ones past 260px -
     were drawn with no background behind them. */
  white-space: normal;
  overflow-wrap: break-word;
  background: var(--cs-neutral-800, #1f2430);
  border-radius: var(--cs-radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--cs-transition-fast), transform var(--cs-transition-fast);
}

.cs-info__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 8px;
  border: 6px solid transparent;
  border-top-color: var(--cs-neutral-800, #1f2430);
}

.cs-info__row strong { color: #fff; font-weight: var(--cs-weight-semibold); }

.cs-info:hover .cs-info__tip,
.cs-info:focus-visible .cs-info__tip,
.cs-info:focus-within .cs-info__tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}