/* Gate-name tooltips (see gate-tooltips.js). The tooltip is a real
   element wired up with aria-describedby, shown on hover and keyboard
   focus, dismissable with Escape. Colors ride the mdbook theme
   variables so both light and dark themes work. */

.gate-tip {
  position: relative;
  color: inherit;
  text-decoration: underline dotted;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 2px;
  cursor: help;
}

a.gate-tip:hover {
  text-decoration-color: currentColor;
}

.gate-tip .tip-body {
  position: absolute;
  left: 0;
  bottom: calc(100% + 4px);
  z-index: 200;
  max-width: 26em;
  width: max-content;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--fg);
  color: var(--bg);
  font-size: 0.8em;
  font-weight: normal;
  font-style: normal;
  line-height: 1.35;
  white-space: normal;
  text-align: left;
  text-decoration: none;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.1s ease-in 0.15s;
}

.gate-tip:hover .tip-body,
.gate-tip:focus-visible .tip-body {
  visibility: visible;
  opacity: 0.95;
}

body.gate-tips-off .gate-tip .tip-body {
  visibility: hidden;
  opacity: 0;
}

/* Highlight the row a gate link lands on in the concordance. */
tr:target {
  background: color-mix(in srgb, var(--links) 18%, transparent);
}