/* Маленький «?» над сокращением (автор, 2026-09-18: «над ВППС — маленький вопросительный знак, при наведении
   расшифровка»). Расшифровка — из data-hint, всплывает над знаком при наведении и при фокусе с клавиатуры. */

.hint {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hint-size);
  height: var(--hint-size);
  margin-left: var(--hint-gap);
  vertical-align: super;
  font-family: var(--font-accent);
  font-size: 0.625rem;
  line-height: 1;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  cursor: help;
}

.hint::after {
  content: attr(data-hint);
  position: absolute;
  bottom: calc(100% + var(--space-2));
  /* Растёт от знака вправо: знак стоит у подписи слева, по центру подсказка ушла бы за край блока. */
  left: 0;
  width: max-content;
  max-width: var(--hint-width);
  /* Шапка таблицы держит строку целиком (`white-space: nowrap`), и подсказка тянулась колбасой на пол-экрана
     (автор, 2026-09-20). Здесь перенос разрешён — текст ложится в две-три строки по ширине плашки. */
  white-space: normal;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-text);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-text);
  /* Янтарная плашка (автор, 2026-09-18: «прозрачно-оранжевым, с окантовкой, края скруглённые — иначе чёрная, как
     блок, и непонятно»): налёт поверх тёмной основы, чтобы белый текст читался и над строками блока. */
  background: linear-gradient(var(--tooltip-tint), var(--tooltip-tint)), var(--tooltip-base);
  border: 1px solid var(--tooltip-edge);
  border-radius: var(--radius);
  box-shadow: var(--tooltip-glow);
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--speed-fast) var(--ease), transform var(--speed-fast) var(--ease);
  pointer-events: none;
  z-index: 2;
}

.hint:hover::after,
.hint:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

/* Знак у правого края блока: расшифровка растёт влево, иначе она вылезает за край окна и тянет страницу вбок. */
.hint--left::after {
  left: auto;
  right: 0;
}