.translation-word {
  /* Keep ruby fragments stable when highlighting or focusing a word. */
  position: relative;
  border-radius: 0.16em;
  cursor: help;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.translation-word.is-tooltip-active:not(.is-playing) {
  background: rgba(97, 126, 112, 0.16);
  box-shadow: 0 0 0 0.06em rgba(97, 126, 112, 0.16);
}

.translation-word:focus-visible {
  outline: 2px solid var(--staff, #617e70);
  outline-offset: 0.12em;
}

.word-tooltip {
  position: fixed;
  z-index: 20;
  width: max-content;
  max-width: min(17rem, calc(100vw - 1rem));
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(32, 51, 46, 0.14);
  border-radius: 0.55rem;
  color: var(--ink, #20332e);
  background: var(--card, #fffdf8);
  box-shadow: 0 5px 18px rgba(32, 51, 46, 0.14);
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.4;
  overflow-wrap: anywhere;
  text-align: center;
}

/* Bridge the gap so the translation stays open when the pointer enters it. */
.word-tooltip::before {
  position: absolute;
  inset: -0.5rem 0;
  z-index: -1;
  content: "";
}

@media print {
  .word-tooltip {
    display: none !important;
  }

  .translation-word.is-tooltip-active {
    background: transparent;
    box-shadow: none;
  }
}