/* kg-tooltips.css — keyword/sigil tooltip styling (Crew 1, batch #6, Oct 12 2026).
 * Readability floor: every text element >= 0.9rem (Brody's standing rule). */

.kg-kw {
  border-bottom: 1px dotted rgba(196, 144, 42, 0.75);
  cursor: help;
  border-radius: 4px;
  /* 44px-class touch target without moving the line box: the padding grows
   * the hit area, the negative margin pulls the layout box back. */
  padding: 12px 4px;
  margin: -12px -4px;
}
.kg-kw:hover {
  background: rgba(196, 144, 42, 0.16);
}
.kg-kw:focus {
  outline: none;
}
.kg-kw:focus-visible {
  background: rgba(196, 144, 42, 0.16);
  box-shadow: 0 0 0 2px rgba(196, 144, 42, 0.65);
}

/* Shared tooltip bubble — one element, repositioned per keyword. */
#kgTip {
  position: fixed;
  z-index: 9999;
  max-width: min(300px, calc(100vw - 32px));
  font-size: 0.95rem;
  line-height: 1.45;
  color: #f3e6c8;
  background: #17100a;
  border: 1px solid rgba(196, 144, 42, 0.55);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
#kgTip.on {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  #kgTip {
    transition: none;
    transform: none;
  }
}