/* -----------------------------------------------------------------------------
   Skytek Glossary Tooltips
   Injected sitewide. Styles the underlined jargon words in body copy and the
   small popover that appears on hover / tap.
   ----------------------------------------------------------------------------- */

/* The inline jargon word --------------------------------------------------- */
/* Invisible by default — the term looks exactly like surrounding body copy.
   A subtle highlight appears only when the user hovers or focuses the term,
   so the site looks "normal" to casual readers but curious readers still
   discover definitions by mousing over. */
.sg-jargon {
  cursor: help;
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: background-color 0.15s ease, border-bottom-color 0.15s ease;
  white-space: nowrap;
  padding: 0 1px;
  border-radius: 2px;
}
.sg-jargon:hover,
.sg-jargon:focus,
.sg-jargon-active {
  background-color: #eef0fb;
  border-bottom-color: #4f5ecc;
  outline: none;
}

/* The tooltip popover ------------------------------------------------------ */
.sg-tooltip {
  position: absolute;
  display: none;
  z-index: 99999;
  max-width: 340px;
  background: #ffffff;
  color: #1a1a2e;
  border: 1px solid #d0d4de;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 10px 28px rgba(15, 17, 23, 0.14), 0 2px 6px rgba(15, 17, 23, 0.08);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  animation: sg-fade 0.15s ease-out;
}

@keyframes sg-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sg-tt-term {
  font-weight: 700;
  font-size: 15px;
  color: #1a1a2e;
  margin-bottom: 6px;
  line-height: 1.35;
}
.sg-tt-def {
  color: #2a2d3a;
  margin-bottom: 10px;
}
.sg-tt-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #4f5ecc;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-bottom-color 0.15s ease, color 0.15s ease;
}
.sg-tt-link:hover,
.sg-tt-link:focus {
  color: #3a47a8;
  border-bottom-color: #3a47a8;
}

/* Mobile tweaks ------------------------------------------------------------ */
@media (max-width: 600px) {
  .sg-tooltip {
    max-width: calc(100vw - 24px);
    font-size: 13px;
    padding: 12px 14px;
  }
  .sg-tt-term { font-size: 14px; }
  .sg-tt-link { font-size: 12px; }
}