/* Glossary term tooltip (BIO-750).
 * Tokens-first: all colors, radius, shadow and spacing come from Tabler/Bootstrap 5
 * CSS variables (ADR-034 R6 — theme coherence via tokens, not bespoke layout).
 * No JS: the tip reveals on :hover / :focus / :focus-within, so it works for
 * desktop hover, keyboard focus and mobile tap (tabindex makes the term focusable). */

.glossary-term {
  position: relative;
  border-bottom: 1px dotted var(--tblr-primary, currentColor);
  cursor: help;
}

.glossary-term__tip {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(100% + var(--tblr-spacer-1, 0.25rem));
  z-index: 1080; /* Tabler/BS5 tooltip layer */
  display: none;
  inline-size: max-content;
  /* 1446: never wider than the window, or a term near either edge pushes the tip off-screen. */
  max-inline-size: min(20rem, calc(100vw - 2rem));
  padding: var(--tblr-spacer-2, 0.5rem) var(--tblr-spacer-3, 0.75rem);
  border: 1px solid var(--tblr-border-color, #dee2e6);
  border-radius: var(--tblr-border-radius, 0.25rem);
  background-color: var(--tblr-bg-surface, #fff);
  color: var(--tblr-body-color, inherit);
  box-shadow: var(--tblr-box-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: start;
  white-space: normal;
  /* 1446: a definition is read as prose. A term anchored inside an uppercase, tracked label
   * (the viewer's «Escenario» kicker, a panel section label) must not hand that styling to it. */
  text-transform: none;
  letter-spacing: normal;
}

.glossary-term:hover > .glossary-term__tip,
.glossary-term:focus > .glossary-term__tip,
.glossary-term:focus-within > .glossary-term__tip {
  display: block;
}

/* BIO-953 — the degraded-state separators. `glossary_term.html` emits plain-text separators
 * between label, definition and synonyms so the tip stays LEGIBLE on a page that never received
 * this sheet (the BIO-952 failure mode). Where the sheet IS present the block layout below
 * already separates the three fields, so the separators would be redundant punctuation inside
 * the tooltip: hidden here, and only here. */
.glossary-term__sep {
  display: none;
}

.glossary-term__def {
  display: block;
}

.glossary-term__syn {
  display: block;
  margin-block-start: var(--tblr-spacer-1, 0.25rem);
  font-size: 0.75rem;
}

/* BIO-859 (H12) — print rule, NOT a BIO-750/789 regression.
 *
 * The gate read "Favorabilidad acumuladaDónde las condiciones…" glued together in a
 * print-to-PDF. The tooltip cannot be the source: `.glossary-term__tip` is `display: none`
 * above, which removes it from the render tree entirely, on screen and on paper alike. What
 * the PDF picked up is the OTHER copy — the `.visually-hidden` span the template emits beside
 * the label for assistive tech, which is clipped rather than removed and therefore prints.
 *
 * Hiding it in print keeps the accessible copy exactly where it belongs (in the a11y tree, in
 * reading order) while stopping it from being pasted into the visible text of a printed page.
 * The glossary template is deliberately untouched: the double emission is what serves the
 * definition to screen readers. */
@media print {
  .glossary-term > .visually-hidden {
    display: none;
  }
}