/* Gonna Is Fine: term tooltips.
   A term in the lessons is <span class="gif-term" data-gt="id" tabindex="0">word</span>; /js/gif-tooltip.js shows one
   shared card (.gif-tip) with the term in bold and its definition. Dark, rounded, soft shadow, small arrow, gentle fade.
   2026-11-05, course-tooltips (Claude Sonnet 5.5). */

.gif-term {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: rgba(0, 190, 255, 0.75);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.24em;
  text-decoration-skip-ink: none;
  cursor: help;
  border-radius: 3px;
  transition: background-color 0.18s ease, text-decoration-color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.gif-term:hover,
.gif-term.is-open {
  text-decoration-color: #00beff;
  background-color: rgba(0, 190, 255, 0.12);
}
.gif-term:focus { outline: none; }
.gif-term:focus-visible {
  outline: 2px solid #00beff;
  outline-offset: 2px;
  background-color: rgba(0, 190, 255, 0.12);
}

.gif-tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
  box-sizing: border-box;
  width: max-content;
  max-width: min(22rem, calc(100vw - 24px));
  padding: 14px 18px 16px;
  border-radius: 16px;
  background: #10152f;
  border: 1px solid rgba(0, 190, 255, 0.38);
  color: #dfe6f5;
  font-family: var(--font-body, 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif);
  font-size: 0.95rem;
  line-height: 1.55;
  font-weight: 400;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  box-shadow:
    0 22px 44px -10px rgba(0, 0, 0, 0.7),
    0 8px 18px rgba(0, 0, 0, 0.45),
    0 0 34px rgba(0, 190, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px) scale(0.97);
  transition: opacity 0.16s ease, transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.18s;
}
.gif-tip[data-place="bottom"] { transform: translateY(-6px) scale(0.97); }
.gif-tip.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}
.gif-tip__label {
  display: block;
  margin-bottom: 2px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(255, 184, 76);
}
.gif-tip__term {
  display: block;
  margin-bottom: 6px;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}
.gif-tip__def { display: block; color: #cfd8ec; }
.gif-tip__arrow {
  position: absolute;
  left: var(--gif-arrow-x, 50%);
  width: 14px;
  height: 14px;
  margin-left: -7px;
  background: #10152f;
  border: 1px solid rgba(0, 190, 255, 0.38);
  transform: rotate(45deg);
  pointer-events: none;
}
.gif-tip[data-place="top"] .gif-tip__arrow {
  bottom: -8px;
  border-top-color: transparent;
  border-left-color: transparent;
}
.gif-tip[data-place="bottom"] .gif-tip__arrow {
  top: -8px;
  border-bottom-color: transparent;
  border-right-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .gif-tip,
  .gif-tip[data-place="bottom"] { transform: none; transition: opacity 0.01ms linear, visibility 0s linear 0s; }
  .gif-term { transition: none; }
}
@media (forced-colors: active) {
  .gif-tip { border: 2px solid CanvasText; background: Canvas; color: CanvasText; box-shadow: none; }
  .gif-tip__arrow { background: Canvas; border-color: CanvasText; }
  .gif-term { text-decoration-color: LinkText; }
}
@media print {
  .gif-term { text-decoration: none; }
  .gif-tip { display: none; }
}