/* Shared tooltip component.
   Trigger API: <button type="button" class="tip" data-tip="Plain text" data-tip-href="/path">Term</button>
   data-tip is required plain text. data-tip-href is optional and renders one "Read more" link. */
.tip {
  appearance: none;
  border: 0;
  border-bottom: 1.5px dotted var(--tooltip-accent, var(--blue, #005ea2));
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: help;
  display: inline;
  font: inherit;
  letter-spacing: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  text-transform: inherit;
}

.tip:hover,
.tip:focus-visible,
.tip[aria-expanded="true"] {
  color: var(--tooltip-accent, var(--blue, #005ea2));
}

.csa-tooltip {
  --tooltip-bg: var(--panel, var(--panel2, #ffffff));
  --tooltip-ink: var(--ink, #1b1b1b);
  --tooltip-muted: var(--muted, var(--ink-3, #565c65));
  --tooltip-line: var(--line, #dfe1e2);
  --tooltip-link: var(--accent, var(--blue, #005ea2));
  background: var(--tooltip-bg);
  border: 1px solid var(--tooltip-line);
  border-radius: 8px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16);
  color: var(--tooltip-ink);
  font: 400 0.84rem/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  left: 0;
  max-width: min(320px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  overflow-wrap: anywhere;
  overflow-y: auto;
  padding: 10px 12px;
  position: fixed;
  top: 0;
  width: max-content;
  z-index: 1000;
}

.csa-tooltip[hidden] {
  display: none;
}

.csa-tooltip a {
  color: var(--tooltip-link);
  font-weight: 650;
  text-decoration: underline;
}

.csa-tooltip__body {
  display: block;
}

.csa-tooltip__more {
  display: inline-block;
  margin-left: 0.25rem;
  white-space: nowrap;
}

.csa-tooltip__arrow {
  background: var(--tooltip-bg);
  border: 1px solid var(--tooltip-line);
  height: 10px;
  left: var(--tooltip-arrow-left, 50%);
  position: absolute;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
}

.csa-tooltip[data-side="top"] .csa-tooltip__arrow {
  border-left: 0;
  border-top: 0;
  bottom: -6px;
}

.csa-tooltip[data-side="bottom"] .csa-tooltip__arrow {
  border-bottom: 0;
  border-right: 0;
  top: -6px;
}