/* Trigger: dotted underline only */
.tt .tt-trigger {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline dotted;
  cursor: pointer;
}

/* Wrapper positions the tooltip */
.tt {
  position: relative;
  display: inline;
}

/* Tooltip bubble (defaults ABOVE) */
.tt .tt-box {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  display: block;                      /* abs-pos + block is fine */

  /* Sizing: grow to content, but keep sane caps */
  width: max-content;                  /* expand to longest line */
  max-width: min(80vw, 300px);         /* overall cap (tweak as needed) */
  min-width: 26ch;                     /* avoid skinny “column” look */

  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(20, 20, 20, 0.95);
  color: #fff;
  font-size: 0.875em;
  line-height: 1.4;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  z-index: 9999;

  /* hidden by default */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease, visibility 120ms ease, transform 120ms ease;

  /* Wrapping: keep natural lines, break long tokens only when needed */
  overflow-wrap: break-word;
  hyphens: auto;
  text-align: left;
}

/* Tiny arrow (when shown ABOVE) */
.tt .tt-box::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0; height: 0;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(20, 20, 20, 0.95);
}

/* Open state */
.tt.is-open .tt-box {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(-2px);
}

/* Flipped BELOW (JS adds .is-flipped when needed) */
.tt .tt-box.is-flipped {
  bottom: auto;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(2px);
}
.tt .tt-box.is-flipped::after {
  top: auto;
  bottom: 100%;
  border-top: 0;
  border-bottom: 6px solid rgba(20, 20, 20, 0.95);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tt .tt-box { transition: none; }
}

/* Optional: link color inside tooltip */
.tt .tt-box a {
  color: #a4ffbd;
  text-decoration: underline;
}