/* term-popup.css — the dashed term and its popup. See term-popup.js. */

/* The dashed underline is the whole affordance: it has to read as "there is more here"
   without reading as a link, which is why it is not the accent colour and not solid.
   `help` rather than `pointer` for the same reason — the cursor says explanation, not
   navigation. */
.gloss {
  border-bottom: 1px dashed var(--text-faint, #777);
  cursor: help;
  /* Underline sits a little clear of the descenders. text-decoration would ride too
     close at this size and look like a mistake. */
  padding-bottom: 1px;
}
.gloss:hover,
.gloss:focus-visible {
  border-bottom-color: var(--accent, #aa38d8);
  color: var(--text, #eee);
}
/* Reachable by keyboard: these carry information a mouse user gets for free. */
.gloss:focus-visible { outline: 2px solid var(--accent, #aa38d8); outline-offset: 2px; border-radius: 2px; }

.gloss-pop {
  position: absolute;
  z-index: 1500;            /* over the article, under the shell's dialogs (1200+) */
  max-width: min(360px, calc(100vw - 24px));
  background: var(--panel-2, #1e1e1e);
  border: 1px solid var(--border-strong, #3a3a3a);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-dim, #b4b4b4);
  opacity: 0;
  pointer-events: none;
  transform: translateY(3px);
  transition: opacity .12s ease, transform .12s ease;
}
.gloss-pop.on { opacity: 1; pointer-events: auto; transform: translateY(0); }
.gloss-pop strong { display: block; color: var(--text, #eee); font-size: 13px; margin-bottom: 5px; }
.gloss-pop p { margin: 0 0 8px; }
.gloss-pop p:last-of-type { margin-bottom: 8px; }
.gloss-pop a { color: var(--accent, #aa38d8); text-decoration: none; font-size: 12px; }
.gloss-pop a:hover { text-decoration: underline; }

/* The pointer. --arrow is the term's centre, so it tracks the word even when the box
   has been clamped against the edge of the window. */
.gloss-pop::after {
  content: '';
  position: absolute;
  left: var(--arrow, 50%);
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: var(--border-strong, #3a3a3a);
  bottom: -12px;
}
.gloss-pop.below::after {
  bottom: auto; top: -12px;
  border-top-color: transparent;
  border-bottom-color: var(--border-strong, #3a3a3a);
}

@media (prefers-reduced-motion: reduce) {
  .gloss-pop { transition: none; }
}