/* Balloon tips (TTS_BALLOON, INVENTORY S10; SPEC.md §4.9) — knowledge. The close button reuses the caption button
   (css/components/window.css). */
.w2k-balloon {
  position: absolute;
  z-index: 2500000;
  color: var(--sys-info-text);
  font: var(--font-tooltip);
}
.w2k-balloon__shape { position: absolute; left: 0; top: 0; }
.w2k-balloon__fill { fill: var(--sys-info-window); }
.w2k-balloon__outline { fill: var(--sys-window-frame); }
.w2k-balloon__shape[data-shape="vector"] .w2k-balloon__outline { fill: none; stroke: var(--sys-window-frame); stroke-width: 1px; }
.w2k-balloon__content { position: absolute; max-width: var(--metric-balloon-max-width); width: max-content; }
.w2k-balloon__title {
  display: flex;
  align-items: flex-start;
  gap: var(--metric-balloon-icon-gap);
  height: 16px;
  margin-bottom: var(--metric-balloon-title-gap);
  font: var(--font-ui-bold);
  white-space: pre;
}
.w2k-balloon__title > img { flex: none; width: 16px; height: 16px; }
.w2k-balloon__title > span { padding-top: var(--metric-balloon-title-top); }  /* whole pixels: no flex centering */
.w2k-balloon__text { white-space: pre-wrap; }
.w2k-balloon__close { position: absolute; }
html[data-tooltip-animation="fade"] .w2k-balloon[data-opening] { animation: w2k-balloon-fade var(--duration-tooltip) linear; }
@keyframes w2k-balloon-fade { from { opacity: 0; } }