/* Contextual explanations for every interactive control. */
#control-tooltip {
  position: fixed;
  inset: auto;
  z-index: 2147483647;
  width: max-content;
  max-width: min(24rem, calc(100vw - 1.5rem));
  max-height: min(14rem, calc(var(--bpe-visible-height, 100vh) - 1rem));
  margin: 0;
  padding: .75rem .9rem;
  overflow: auto;
  border: 1px solid #5c8177;
  border-radius: .65rem;
  background: #173f38;
  color: #fff;
  box-shadow: 0 .5rem 1.75rem #0a282349;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: .01em;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
  opacity: 0;
  transform: translateY(.25rem);
  transition: opacity .12s ease, transform .12s ease;
}

#control-tooltip:popover-open,
#control-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

#control-tooltip::after {
  position: absolute;
  left: var(--tooltip-arrow-x, 1.5rem);
  width: .7rem;
  height: .7rem;
  background: #173f38;
  border: solid #5c8177;
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

#control-tooltip[data-placement="below"]::after {
  top: -.4rem;
  border-width: 1px 0 0 1px;
}

#control-tooltip[data-placement="above"]::after {
  bottom: -.4rem;
  border-width: 0 1px 1px 0;
}

@media (max-width: 520px) {
  #control-tooltip {
    max-width: calc(100vw - 1rem);
    padding: .7rem .8rem;
    font-size: .8125rem;
    line-height: 1.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  #control-tooltip {
    transition: none;
  }
}