.glossary-term {
  border-radius: 2px;
  padding: 1px 4px;
  cursor: pointer;
}

/* Background highlight — toggled via admin setting. */
.glossary-highlight .glossary-term {
  background-color: color-mix(in srgb, var(--glossary-highlight-color, #ffd54f) 30%, transparent);
}

.glossary-highlight .glossary-term:hover,
.glossary-highlight .glossary-term:focus {
  background-color: color-mix(in srgb, var(--glossary-highlight-color, #ffd54f) 50%, transparent);
}

/* Optional dotted underline — toggled via admin setting. */
.glossary-underline .glossary-term {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

/* Only transition after initial render to prevent fade-in jank. */
.glossary-ready .glossary-term {
  transition: background-color 0.2s ease, text-decoration-color 0.2s ease;
}

.glossary-term:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}