/* Подсказка .tip: всплывает над элементом-хозяином .has-tip при наведении и при фокусе внутри (клавиатура).
   Разметка: <span class="has-tip"><button aria-describedby="t1">…</button><span class="tip" role="tooltip" id="t1">Текст</span></span>.
   Подсказка не единственный носитель смысла: у кнопки есть своё доступное имя. Позиция — снизу: .tip.below */
.has-tip { position: relative; display: inline-flex; }
.tip {
  --tooltip-bg: var(--surface-raised); --tooltip-fg: var(--fg); --tooltip-border: var(--border-raised);
  --tooltip-radius: var(--r); --tooltip-shadow: var(--shadow-md);
  position: absolute; left: 50%; bottom: calc(100% + var(--s1h)); z-index: var(--z-tooltip);
  width: max-content; max-width: min(280px, 80vw); padding: var(--s1h) var(--s2);
  background: var(--tooltip-bg); color: var(--tooltip-fg); border: var(--border-w) solid var(--tooltip-border);
  border-radius: var(--tooltip-radius); box-shadow: var(--tooltip-shadow);
  font: var(--fw-medium) var(--fs-sm)/1.4 var(--font); text-align: left; white-space: normal;
  transform: translateX(-50%); visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast);
}
.tip.below { bottom: auto; top: calc(100% + var(--s1h)); }
.has-tip:hover > .tip, .has-tip:focus-within > .tip { visibility: visible; opacity: 1;
  transition: opacity var(--dur-fast) var(--ease) var(--dur), visibility 0s; }