/*
 * MyMXData — tooltip styles
 * Extracted and consolidated from the supplied page source.
 *
 * The page script positions the bubble by setting:
 *   --mxe-tooltip-x
 *   --mxe-tooltip-y
 *   --mxe-tooltip-arrow-x
 * and toggles:
 *   .--open
 *   .--below
 *
 * The optional desktop spotlight system uses:
 *   .mxe-spotlight-target.--spotlit
 *   .mxe-tooltip-spotlight-host
 *   .mxe-tooltip-spotlight-scrim
 */

#mxe-root {
  --mxe-blue: #3d7bff;
  --mxe-aqua: #14e0c0;
  --mxe-tooltip-context-screen: rgba(10, 4, 18, .14);
  --mxe-tooltip-context-blur: .72px;
}

/* Contextual tooltip trigger and term. */
#mxe-root .mxe-tooltip {
  display: inline;
  vertical-align: baseline;
  color: inherit;
  cursor: help;
  outline: none;
}

#mxe-root .mxe-tooltip-term {
  display: inline;
  border-bottom: 1px dotted currentColor;
  line-height: 1.25;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

#mxe-root .mxe-tooltip-anchor {
  position: relative;
  display: inline-block;
  margin-left: calc(.3em - 1px);
  vertical-align: baseline;
}

#mxe-root .mxe-tooltip-anchor > i {
  display: inline-block;
  color: var(--mxe-blue);
  font-size: .65em;
  opacity: .94;
  transform: translateY(calc(-.1em - 1px));
}

#mxe-root .mxe-tooltip:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--mxe-blue);
  outline-offset: 3px;
}

/* Viewport-positioned tooltip bubble. */
#mxe-root .mxe-tooltip-bubble {
  position: fixed;
  z-index: 10050;
  top: var(--mxe-tooltip-y, 20px);
  right: auto;
  bottom: auto;
  left: var(--mxe-tooltip-x, 50vw);
  width: min(320px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: none !important;
  padding: 13px 15px;
  overflow: visible !important;
  visibility: hidden;
  color: #f8f4fb;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 13px;
  background:
    radial-gradient(circle at 88% 12%, rgba(61, 123, 255, .38) 0, rgba(61, 123, 255, .16) 19%, transparent 44%),
    radial-gradient(circle at 8% 110%, rgba(222, 9, 127, .2) 0, transparent 46%),
    linear-gradient(145deg, #27173b 0%, #160b24 50%, #0b0611 100%);
  box-shadow:
    0 18px 48px rgba(9, 4, 15, .4),
    inset 0 1px 0 rgba(255, 255, 255, .055);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
  scrollbar-width: none;
}

#mxe-root .mxe-tooltip-bubble::-webkit-scrollbar {
  display: none;
}

#mxe-root .mxe-tooltip-bubble::before {
  position: absolute;
  z-index: -1;
  top: -26px;
  right: -22px;
  width: 98px;
  height: 98px;
  content: "";
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(61, 123, 255, .3),
    rgba(61, 123, 255, .08) 48%,
    transparent 72%
  );
  filter: blur(3px);
  pointer-events: none;
}

#mxe-root .mxe-tooltip-bubble::after {
  position: absolute;
  top: 100%;
  bottom: auto;
  left: var(--mxe-tooltip-arrow-x, 50%);
  width: 9px;
  height: 9px;
  content: "";
  border-right: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  background: #10081a;
  transform: translate(-50%, -5px) rotate(45deg);
}

#mxe-root .mxe-tooltip.--below .mxe-tooltip-bubble::after {
  top: auto;
  bottom: 100%;
  border-right: 0;
  border-bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
  border-left: 1px solid rgba(255, 255, 255, .14);
  transform: translate(-50%, 5px) rotate(45deg);
}

/* JavaScript controls visibility through .--open. */
#mxe-root .mxe-tooltip:hover .mxe-tooltip-bubble,
#mxe-root .mxe-tooltip:focus .mxe-tooltip-bubble,
#mxe-root .mxe-tooltip:focus-within .mxe-tooltip-bubble {
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, 6px);
}

#mxe-root .mxe-tooltip.--open .mxe-tooltip-bubble {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 620px) {
  #mxe-root .mxe-tooltip {
    margin-right: 1px;
  }

  #mxe-root .mxe-tooltip-bubble {
    width: min(300px, calc(100vw - 20px));
    max-width: calc(100vw - 20px);
    padding: 12px 14px;
    font-size: 11.9px;
    line-height: 1.48;
  }
}

/* Optional spotlight treatment used by the supplied page. */
@media (min-width: 1041px) and (hover: hover) and (pointer: fine) {
  #mxe-root .mxe-tooltip.mxe-spotlight-target {
    position: relative;
    isolation: auto;
    transition: none;
  }

  #mxe-root .mxe-tooltip.mxe-spotlight-target.--spotlit {
    z-index: 9002;
    opacity: 1 !important;
    transform: none !important;
    box-shadow: none !important;
  }

  #mxe-root .mxe-tooltip.mxe-spotlight-target.--spotlit::before {
    display: none !important;
  }

  #mxe-root .mxe-tooltip.mxe-spotlight-target.--spotlit .mxe-tooltip-term,
  #mxe-root .mxe-tooltip.mxe-spotlight-target.--spotlit .mxe-tooltip-anchor {
    position: relative;
    z-index: 9002;
  }

  #mxe-root .mxe-tooltip.mxe-spotlight-target.--spotlit .mxe-tooltip-term {
    color: #fff;
    border-bottom-color: var(--mxe-aqua);
    border-radius: 4px;
    background: rgba(18, 8, 29, .98);
    box-shadow:
      0 0 0 4px rgba(18, 8, 29, .98),
      0 0 0 5px rgba(255, 79, 174, .48),
      0 0 28px rgba(255, 79, 174, .34);
    text-shadow: 0 0 12px rgba(255, 255, 255, .18);
  }

  #mxe-root .mxe-tooltip.mxe-spotlight-target.--spotlit .mxe-tooltip-anchor > i {
    color: var(--mxe-aqua);
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(20, 224, 192, .66));
  }

  #mxe-root .mxe-tooltip-spotlight-host {
    position: relative !important;
    z-index: 9001 !important;
    isolation: isolate;
    border-radius: 10px;
    transform: none !important;
  }

  #mxe-root .mxe-tooltip-spotlight-scrim {
    position: absolute;
    z-index: 9001;
    inset: -8px -10px;
    visibility: hidden;
    border: 1px solid rgba(255, 255, 255, .035);
    border-radius: 10px;
    background: var(--mxe-tooltip-context-screen);
    box-shadow: 0 10px 30px rgba(10, 4, 18, .045);
    opacity: 0;
    pointer-events: none;
    -webkit-backdrop-filter: blur(var(--mxe-tooltip-context-blur));
    backdrop-filter: blur(var(--mxe-tooltip-context-blur));
    transition:
      opacity .28s ease,
      visibility .28s ease,
      background .28s ease,
      -webkit-backdrop-filter .28s ease,
      backdrop-filter .28s ease;
  }

  #mxe-root .mxe-tooltip-spotlight-host > .mxe-tooltip-spotlight-scrim {
    visibility: visible;
    opacity: 1;
  }

  #mxe-root .mxe-tooltip-spotlight-host .mxe-tooltip.--spotlit {
    z-index: 9002;
  }
}