/* sl-infotip: the small info icon that carries a hint, and the bubble it opens.
   Pairs with static/js/sl-infotip.js. Uses the same bubble for form, dashboard and public-page hints. */

.ow-info-i[data-tip] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin-left: 5px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-disabled);
  vertical-align: -3px;
  cursor: help;
  -webkit-appearance: none;
  appearance: none;
  transition: color .14s ease, background-color .14s ease;
}
.ow-info-i[data-tip] svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; pointer-events: none; }
/* The visible circle is 18px, which is a small thing to catch with a mouse.
   This widens the area that opens it to 32px across without moving anything,
   and stays clear of the input below. */
.ow-info-i[data-tip] { position: relative; }
.ow-info-i[data-tip]::before { content: ""; position: absolute; top: 50%; left: 50%; width: 32px; height: 26px; transform: translate(-50%, -50%); }
.ow-info-i[data-tip]:hover,
.ow-info-i[data-tip][aria-expanded="true"] { color: var(--brand-deep-purple); background: transparent; }
.ow-info-i[data-tip]:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

/* A label keeps its hit area comfortable without pushing the text around. */
label > .ow-info-i[data-tip],
legend > .ow-info-i[data-tip],
h2 > .ow-info-i[data-tip],
h3 > .ow-info-i[data-tip] { vertical-align: middle; }

/* The shared ID gives registered card panels the same priority as the text bubble. */
:is(#sl-infotip, .sl-infotip) {
  position: fixed;
  z-index: var(--z-popover, 1300);
  inset: auto;
  box-sizing: border-box;
  width: max-content;
  max-width: min(320px, calc(100vw - 16px));
  margin: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--brand-purple-fill-1);
  color: var(--text-on-dark);
  box-shadow: var(--elev-2);
  font: 400 14px/21px 'Open Sans', 'Inter', Arial, sans-serif;
  letter-spacing: normal;
  text-align: left;
  overflow: visible;
  overflow-wrap: anywhere;
}
:is(#sl-infotip, .sl-infotip)[hidden] { display: none !important; }
:is(#sl-infotip, .sl-infotip)[data-open] { animation: sl-infotip-in .15s ease-out; }
:is(#sl-infotip, .sl-infotip)::backdrop { background: transparent; pointer-events: none; }
/* No arrow: the hint floats as a plain rounded card beside its icon. */
:is(#sl-infotip, .sl-infotip)::before { content: none; }
/* A transparent bridge keeps the hint open while the pointer crosses the gap. */
:is(#sl-infotip, .sl-infotip)::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 8px;
}
:is(#sl-infotip, .sl-infotip)[data-side="bottom"]::after { top: auto; bottom: 100%; }
:is(#sl-infotip, .sl-infotip) :is(p, span, small, a, summary, th, td) { color: inherit; font-size: inherit; line-height: inherit; }
:is(#sl-infotip, .sl-infotip) p { margin: 0; }
:is(#sl-infotip, .sl-infotip) p + :is(p, span, details) { margin-top: 6px; }
:is(#sl-infotip, .sl-infotip) a { text-decoration: underline; text-underline-offset: 3px; }
:is(#sl-infotip, .sl-infotip) :focus-visible { outline: 2px solid var(--text-on-dark); outline-offset: 2px; }
@keyframes sl-infotip-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  :is(#sl-infotip, .sl-infotip)[data-open] { animation: none; }
}