/* Термины словаря в тексте (lib/blocks/glossary.js). */

/* Термин выглядит как слово текста с пунктиром снизу: видно, что его можно нажать. */
.prose .term-btn {
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  background: none;
  text-decoration: underline dotted var(--ink-2);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  cursor: help;
}

.prose .term-btn:hover,
.prose .term-btn.is-open {
  color: var(--amber);
  text-decoration-color: var(--amber);
}

/* Подсказка одна на страницу, висит в body: её не обрезают плашки и таблицы. */
.term-pop {
  position: absolute;
  z-index: 30;
  width: min(340px, calc(100vw - 24px));
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-body);
  background: var(--surface-2);
  box-shadow: var(--shadow);
}

.term-pop b {
  color: var(--ink);
}

.term-pop a {
  color: var(--amber);
  white-space: nowrap;
  text-underline-offset: 3px;
}