/* Term tips (js/tips.js). Plain words in the text; the exact technical
   figure or term in a small panel on hover, focus or tap. */

.term { --term-line: var(--medium, #53666B); }

/* Dark bands: the underline follows the lighter text colour. */
.page-hero .term,
.hero-video .term,
.ask-band .term,
.fit-band .term,
.contracts-band .term,
.chapter-photo .term { --term-line: rgba(191, 217, 227, 0.8); }
.chapter-photo .chapter-detail-body .term { --term-line: var(--medium, #53666B); }

/* Only signal a tip once the script can show it. */
.has-tips .term {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--term-line);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  cursor: help;
  border-radius: 2px;
}
.has-tips .term:hover,
.has-tips .term.is-open { text-decoration-style: solid; }
.has-tips .term:focus-visible { outline: 3px solid var(--buoy, #F2B705); outline-offset: 2px; }

.term-tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  box-sizing: border-box;
  width: max-content;
  max-width: min(34ch, calc(100vw - 16px));
  padding: 10px 12px;
  background: var(--inlet, #0F2A30);
  color: var(--fog, #E8EDEA);
  border: 1px solid rgba(191, 217, 227, 0.45);
  border-radius: 3px;
  box-shadow: none;
  font-family: 'Archivo', system-ui, sans-serif;
  font-variation-settings: 'wdth' 100;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  white-space: normal;
  overflow-wrap: break-word;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}
.term-tip[data-side="below"] { transform: translateY(-2px); }
.term-tip[hidden] { display: none; }
.term-tip.is-open { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .term-tip, .term-tip[data-side="below"] { transition: none; transform: none; }
}

@media (forced-colors: active) {
  .term-tip { border-color: CanvasText; }
}