/*
 * Universal Tooltip 1.2.2 — изолированные стили, без глобального сброса.
 *
 * НАСТРОЙКИ ОФОРМЛЕНИЯ
 * Меняйте значения в :root ниже.
 *
 * Обычная тема использует --ut-bg / --ut-color / --ut-shadow.
 * Светлая (data-tooltip-theme="light") — соответствующие --ut-light-*.
 * Типографика, поля, скругление и анимация общие для обеих тем.
 */

:root {
  /* БАЗОВАЯ / ТЁМНАЯ ТЕМА */
  --ut-bg: #202124;                         /* Фон подсказки и стрелки. */
  --ut-color: #ffffff;                      /* Цвет текста. */
  --ut-shadow: 0 4px 16px rgb(0 0 0 / 16%); /* Тень; none — без тени. */

  /* СВЕТЛАЯ ТЕМА */
  --ut-light-bg: #ffffff;
  --ut-light-color: #202124;
  --ut-light-shadow: 0 0 0 1px rgb(0 0 0 / 10%), 0 5px 20px rgb(0 0 0 / 13%);

  /* ШРИФТ И ТЕКСТ */
  --ut-font-family: "Manrope", sans-serif;
  --ut-font-size: 13px;
  --ut-font-weight: 400;                    /* Например, 400 / 500 / 600. */
  --ut-line-height: 1.32;                   /* Межстрочный интервал, без единиц. */
  --ut-letter-spacing: normal;             /* Например, normal / 0.02em. */
  --ut-text-align: start;                  /* start / center / end. */

  /* ФОРМАТИРОВАНИЕ: HTML-теги в режиме markdown/html (включён по умолчанию). */
  --ut-md-block-gap: 0.65em;               /* Расстояние между абзацами/блоками. */
  --ut-md-list-gap: 0.25em;                /* Расстояние между пунктами списка. */
  --ut-md-code-font-family: ui-monospace, SFMono-Regular, Consolas, monospace;

  /* ФОРМА И ВНУТРЕННИЕ ПОЛЯ */
  --ut-radius: 9px;                        /* Скругление углов. */
  --ut-padding: 8px 12px;                  /* Сверху/снизу и слева/справа; не отступ от окна. */

  /* АНИМАЦИЯ (не delay / hideDelay — это отдельные задержки в JS) */
  --ut-transition-duration: 170ms;         /* Появление; прежнее имя сохранено. */
  --ut-transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  --ut-hide-duration: 120ms;               /* Скрытие; чуть быстрее появления. */
  --ut-hide-timing-function: cubic-bezier(0.4, 0, 1, 1);
  --ut-motion-distance: 4px;               /* Сдвиг от источника; 0px — без сдвига. */
  /* Масштабирования нет. --ut-motion-scale больше не используется. */
  /* Только fade: distance: 0px. Без анимаций: обе длительности 0ms. */

  /* СЛОЙ И ПРОКРУТКА ДЛИННОГО ТЕКСТА */
  --ut-z-index: 2147483647;                /* z-index для обычного DOM, не порядок top layer. */
  --ut-scrollbar-width: thin;             /* thin / auto; none скрывает полосу прокрутки. */
}

/*
 * Шириной и положением управляет JS, чтобы подсказка помещалась в окно:
 *   maxWidth / data-tooltip-max-width — максимальная ширина;
 *   gap — расстояние до источника;
 *   padding — отступ от границ окна;
 *   delay / hideDelay — задержки открытия / закрытия.
 * Не заменяйте их вымышленными --ut-max-width / --ut-gap: модуль их не читает.
 * --ut-padding выше управляет только ВНУТРЕННИМИ полями текста.
 *
 * Размер стрелки 8px и смещение 4px связаны с геометрией JS. Они намеренно
 * не вынесены в переменную: изменение только CSS нарушило бы позиционирование.
 * Стрелка отключается через arrow: false или data-tooltip-arrow="false".
 * prefers-reduced-motion: reduce отключает переход независимо от переменных.
 * В forced-colors используются системные цвета вместо заданных цветов темы.
 *
 * ПРИМЕР СВОЕЙ ТЕМЫ (скопируйте в свой CSS, сейчас это комментарий):
 *   .ut-tooltip[data-theme="brand"] {
 *     --ut-bg: #253a78;
 *     --ut-color: #ffffff;
 *     --ut-shadow: 0 6px 24px rgb(0 0 0 / 20%);
 *     --ut-radius: 12px;
 *   }
 * Затем: data-tooltip-theme="brand" на источнике или theme: 'brand' в JS.
 * Для отдельного изменения светлой темы используйте --ut-light-*.
 *
 * Tooltip находится отдельно от источника в DOM. Переменные на самой кнопке
 * не переносятся автоматически: задавайте их на :root или на .ut-tooltip.
 * Версия 1.2.2: заменяйте CSS вместе с JS. Фон, тень и анимация находятся
 * на самом .ut-tooltip. Обёртка .ut-tooltip__surface удалена.
 * Внешние правила для .ut-tooltip__surface перенесите на .ut-tooltip
 * или используйте переменные. У контента нет собственной анимации.
 * Не добавляйте scale/rotate/skew на .ut-tooltip: геометрия рассчитана
 * на перенос без изменения размеров. --ut-motion-scale больше не используется.
 */

/* РАБОЧИЕ СТИЛИ — для обычной кастомизации достаточно блока :root выше. */
.ut-tooltip {
  all: initial;
  --ut-surface-bg: var(--ut-bg, #202124);
  --ut-surface-shadow: var(--ut-shadow, 0 4px 16px rgb(0 0 0 / 16%));
  --ut-shift-x: 0px;
  --ut-shift-y: 0px;
  position: fixed;
  inset: auto;
  top: 0;
  left: 0;
  z-index: var(--ut-z-index, 2147483647);
  display: block;
  box-sizing: border-box;
  width: max-content;
  min-width: 0;
  max-width: 320px;
  max-height: calc(100vh - 16px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--ut-radius, 9px);
  background: var(--ut-surface-bg);
  box-shadow: var(--ut-surface-shadow);
  color: var(--ut-color, #ffffff);
  font: var(--ut-font-weight, 400) var(--ut-font-size, 13px)/var(--ut-line-height, 1.45) var(--ut-font-family, system-ui, -apple-system, "Segoe UI", sans-serif);
  text-align: var(--ut-text-align, start);
  text-transform: none;
  text-shadow: none;
  letter-spacing: var(--ut-letter-spacing, normal);
  visibility: hidden;
  pointer-events: none;
  isolation: isolate;
  opacity: 0;
  transform: translate(var(--ut-shift-x), var(--ut-shift-y));
  transition-property: opacity, transform;
  transition-duration: var(--ut-transition-duration, 170ms);
  transition-timing-function: var(--ut-transition-timing-function, cubic-bezier(0.16, 1, 0.3, 1));
}
.ut-tooltip[hidden], .ut-tooltip .ut-tooltip__arrow[hidden] { display: none !important; }
.ut-tooltip[data-state="open"], .ut-tooltip[data-state="closing"] { visibility: visible; }

/* Анимируется весь блок; размеры и внутренняя вёрстка текста не меняются. */
.ut-tooltip[data-state="open"] {
  pointer-events: auto;
  opacity: 1;
  transform: none;
}
.ut-tooltip[data-state="closing"] {
  transition-duration: var(--ut-hide-duration, 120ms);
  transition-timing-function: var(--ut-hide-timing-function, cubic-bezier(0.4, 0, 1, 1));
}
.ut-tooltip:is([data-state="closed"], [data-state="clipped"], [data-state="measuring"]) {
  transition: none;
}
.ut-tooltip[data-placement^="top"] { --ut-shift-y: var(--ut-motion-distance, 4px); }
.ut-tooltip[data-placement^="bottom"] { --ut-shift-y: calc(-1 * var(--ut-motion-distance, 4px)); }
.ut-tooltip[data-placement^="left"] { --ut-shift-x: var(--ut-motion-distance, 4px); }
.ut-tooltip[data-placement^="right"] { --ut-shift-x: calc(-1 * var(--ut-motion-distance, 4px)); }
.ut-tooltip::before, .ut-tooltip::after { content: none; }
.ut-tooltip::backdrop { background: transparent; pointer-events: none; }
.ut-tooltip[data-theme="light"] {
  --ut-surface-bg: var(--ut-light-bg, #ffffff);
  --ut-surface-shadow: var(--ut-light-shadow, 0 0 0 1px rgb(0 0 0 / 10%), 0 5px 20px rgb(0 0 0 / 13%));
  color: var(--ut-light-color, #202124);
}
.ut-tooltip .ut-tooltip__content {
  all: unset;
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  max-height: inherit;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--ut-padding, 8px 12px);
  border-radius: inherit;
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: normal;
  font: inherit;
  color: inherit;
  cursor: default;
  scrollbar-width: var(--ut-scrollbar-width, thin);
}
.ut-tooltip .ut-tooltip__arrow {
  all: unset;
  display: block;
  position: absolute;
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  background: inherit;
  transform: rotate(45deg);
  pointer-events: none;
  z-index: -1;
}
.ut-tooltip[data-placement^="top"] .ut-tooltip__arrow { 
    bottom: -4px; 
    /* border-bottom: 1px solid color-mix(in srgb,var(--highlight-color) 50%,transparent);
    border-right: 1px solid color-mix(in srgb,var(--highlight-color) 50%,transparent); */
}
.ut-tooltip[data-placement^="bottom"] .ut-tooltip__arrow { 
    bottom: auto; 
    top: -4px; 
    /* border-top: 1px solid color-mix(in srgb,var(--highlight-color) 50%,transparent);
    border-left: 1px solid color-mix(in srgb,var(--highlight-color) 50%,transparent); */
}
.ut-tooltip[data-placement^="left"] .ut-tooltip__arrow { 
    right: -4px;
    /* border-top: 1px solid color-mix(in srgb,var(--highlight-color) 50%,transparent);
    border-right: 1px solid color-mix(in srgb,var(--highlight-color) 50%,transparent); */
}
.ut-tooltip[data-placement^="right"] .ut-tooltip__arrow { 
    right: auto; 
    left: -4px; 
    /* border-left: 1px solid color-mix(in srgb,var(--highlight-color) 50%,transparent);
    border-bottom: 1px solid color-mix(in srgb,var(--highlight-color) 50%,transparent); */
}
@media (prefers-reduced-motion: reduce) {
  .ut-tooltip { transition: none !important; transform: none !important; }
}
@media (forced-colors: active) {
  .ut-tooltip { color: CanvasText; }
  .ut-tooltip { outline: 1px solid CanvasText; background: Canvas; box-shadow: none; }
  .ut-tooltip .ut-tooltip__arrow { display: none; }
}

/* HTML formatting 1.2.0. Legacy --ut-md-* names are retained for compatibility. */
.ut-tooltip .ut-tooltip__content[data-format="markdown"] {
  white-space: normal;
}
.ut-tooltip .ut-tooltip__content[data-format="markdown"][data-plain="true"] {
  white-space: pre-line;
}
.ut-tooltip .ut-tooltip__content[data-format="markdown"] :where(p, div, span, br, ul, ol, li, blockquote, pre, code, kbd, samp, b, strong, i, em, u, s, del, small, sub, sup, mark, hr) {
  all: unset;
  box-sizing: border-box;
  font: inherit;
  color: inherit;
  overflow-wrap: inherit;
}
.ut-tooltip .ut-tooltip__content[data-format="markdown"] :where(p, div, ul, ol, blockquote, pre, hr) {
  display: block;
  margin: 0 0 var(--ut-md-block-gap, 0.65em);
}
.ut-tooltip .ut-tooltip__content[data-format="markdown"] :where(p.ut-tooltip__heading) {
  font-weight: 700;
  line-height: 1.35;
}
.ut-tooltip .ut-tooltip__content[data-format="markdown"] :where(b, strong) { font-weight: 700; }
.ut-tooltip .ut-tooltip__content[data-format="markdown"] :where(i, em) { font-style: italic; }
.ut-tooltip .ut-tooltip__content[data-format="markdown"] :where(u) { text-decoration: underline; }
.ut-tooltip .ut-tooltip__content[data-format="markdown"] :where(s, del) { text-decoration: line-through; }
.ut-tooltip .ut-tooltip__content[data-format="markdown"] :where(small) { font-size: 0.875em; }
.ut-tooltip .ut-tooltip__content[data-format="markdown"] :where(sub, sup) {
  font-size: 0.8em;
  line-height: 0;
}
.ut-tooltip .ut-tooltip__content[data-format="markdown"] :where(sub) { vertical-align: sub; }
.ut-tooltip .ut-tooltip__content[data-format="markdown"] :where(sup) { vertical-align: super; }
.ut-tooltip .ut-tooltip__content[data-format="markdown"] :where(mark) {
  background: Mark;
  color: MarkText;
  padding-inline: 0.12em;
}
.ut-tooltip .ut-tooltip__content[data-format="markdown"] :where(ul, ol) {
  padding-inline-start: 1.5em;
  list-style-position: outside;
}
.ut-tooltip .ut-tooltip__content[data-format="markdown"] :where(ul) { list-style-type: disc; }
.ut-tooltip .ut-tooltip__content[data-format="markdown"] :where(ol) { list-style-type: decimal; }
.ut-tooltip .ut-tooltip__content[data-format="markdown"] :where(ul ul) { list-style-type: circle; }
.ut-tooltip .ut-tooltip__content[data-format="markdown"] :where(ul ul ul) { list-style-type: square; }
.ut-tooltip .ut-tooltip__content[data-format="markdown"] :where(li) {
  display: list-item;
  margin-block-end: var(--ut-md-list-gap, 0.25em);
}
.ut-tooltip .ut-tooltip__content[data-format="markdown"] :where(li > p) {
  margin-block-end: var(--ut-md-list-gap, 0.25em);
}
.ut-tooltip .ut-tooltip__content[data-format="markdown"] :where(li > ul, li > ol) {
  margin-block-start: var(--ut-md-list-gap, 0.25em);
}
.ut-tooltip .ut-tooltip__content[data-format="markdown"] :where(blockquote) {
  padding-inline-start: 0.75em;
  border-inline-start: 3px solid currentColor;
}
.ut-tooltip .ut-tooltip__content[data-format="markdown"] :where(code, kbd, samp) {
  display: inline;
  padding: 0.06em 0.3em;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-family: var(--ut-md-code-font-family, ui-monospace, SFMono-Regular, Consolas, monospace);
  font-size: 0.92em;
  white-space: pre-wrap;
}
.ut-tooltip .ut-tooltip__content[data-format="markdown"] :where(pre) {
  padding: 0.55em 0.7em;
  border: 1px solid currentColor;
  border-radius: 5px;
  font-family: var(--ut-md-code-font-family, ui-monospace, SFMono-Regular, Consolas, monospace);
  font-size: 0.92em;
  white-space: pre-wrap;
  tab-size: 4;
}
.ut-tooltip .ut-tooltip__content[data-format="markdown"] :where(pre > code, pre > samp) {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: inherit;
}
.ut-tooltip .ut-tooltip__content[data-format="markdown"] :where(hr) {
  height: 0;
  border: 0;
  border-block-start: 1px solid currentColor;
}
.ut-tooltip .ut-tooltip__content[data-format="markdown"] :where(p, div, ul, ol, li, blockquote, pre, hr):last-child {
  margin-block-end: 0;
}
/* Site-wide typography pseudo-elements must not add decorative content here. */
.ut-tooltip .ut-tooltip__content[data-format="markdown"] :where(p, div, span, br, ul, ol, li, blockquote, pre, code, kbd, samp, b, strong, i, em, u, s, del, small, sub, sup, mark, hr)::before,
.ut-tooltip .ut-tooltip__content[data-format="markdown"] :where(p, div, span, br, ul, ol, li, blockquote, pre, code, kbd, samp, b, strong, i, em, u, s, del, small, sub, sup, mark, hr)::after {
  content: none;
}