/* glossary_tooltip.css - IT48 nested keyword hover-tooltips.
 *
 * Styles the dwellable keyword spans (.glossary-term) and the floating popup
 * stack (.glossary-popup). Theme-aware via the same CSS vars the rest of the
 * client uses (--bg / --accent / --border). Purely additive: no rule changes
 * any existing element, so a screen with no glossary markup is unaffected.
 */

/* A linked keyword: a subtle dotted underline so a viewer knows it is hoverable,
 * matching the "this means something" affordance without shouting. */
.glossary-term {
  border-bottom: 1px dotted var(--accent, #e08a3c);
  cursor: help;
  outline: none;
}
.glossary-term:hover,
.glossary-term:focus-visible {
  color: var(--accent, #e08a3c);
  border-bottom-style: solid;
}

/* The floating definition card. Positioned absolutely by the JS in document
 * coordinates; z-index sits above panels and modals but below the topmost
 * blocking overlays. */
.glossary-popup {
  position: absolute;
  z-index: 9000;
  max-width: 260px;
  padding: 0.5rem 0.65rem;
  background: var(--bg, #1a1a2e);
  border: 1px solid var(--accent, #e08a3c);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  font-size: 0.82rem;
  line-height: 1.35;
  color: #e8e8ec;
  pointer-events: auto;
  animation: glossary-pop-in 120ms ease-out;
}

/* Each deeper popup nudges its tint so the viewer feels the drill-down depth. */
.glossary-popup[data-depth="1"] { border-color: #7ab0d8; }
.glossary-popup[data-depth="2"] { border-color: #b08ad8; }

.glossary-popup-title {
  font-weight: bold;
  color: var(--accent, #e08a3c);
  margin-bottom: 0.25rem;
  letter-spacing: 0.02em;
}
.glossary-popup[data-depth="1"] .glossary-popup-title { color: #7ab0d8; }
.glossary-popup[data-depth="2"] .glossary-popup-title { color: #b08ad8; }

.glossary-popup-body {
  color: #cfd2da;
}

/* Nested keyword spans inside a popup body reuse .glossary-term but read a
 * touch brighter against the card so they invite the next dwell. */
.glossary-popup-body .glossary-term {
  color: #f0d8a8;
  border-bottom-color: currentColor;
}

@keyframes glossary-pop-in {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}