/*!
 * hint.css — customized for this blog's hexo-reference fork
 *
 * Based on hint.css 2.4.1 (https://github.com/chinchang/hint.css), trimmed to
 * the classes hexo-reference actually emits for footnotes
 * (hint--top / hint--bottom / hint--error / hint--medium / hint--rounded /
 * hint--bounce).
 *
 * Customizations on top of the original:
 *  1. The tooltip transform reads --hint-shift-x (set by /js/hint-clamp.js),
 *     so the bubble can be shifted horizontally to stay inside the viewport
 *     when the footnote sits near an edge.
 *  2. The transform is not transitioned (only opacity/visibility fade), so
 *     the clamped position applies instantly and the bubble never spills out
 *     of the viewport mid-animation.
 *  3. The little arrow (::before) is removed: once the bubble is clamped it
 *     no longer lines up with the footnote.
 *  4. hint--medium is capped at the viewport width minus 20px as a safety
 *     net on very narrow screens.
 */

[class*="hint--"] {
  position: relative;
  display: inline-block;
}

/* Tooltip bubble */
[class*="hint--"]::after {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  z-index: 1000000;
  pointer-events: none;
  content: attr(aria-label);
  background: #383838;
  color: #fff;
  padding: 8px 10px;
  font-size: 12px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 12px;
  white-space: nowrap;
  text-shadow: 0 -1px 0 #000;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  transition-delay: 0s;
}

/* Arrow removed */
[class*="hint--"]::before {
  display: none;
}

/* Show on hover */
[class*="hint--"]:hover::after {
  visibility: visible;
  opacity: 1;
  transition-delay: 0.1s;
}

/* Direction: above the footnote */
.hint--top::after {
  bottom: 100%;
  left: 50%;
  transform: translateX(calc(-50% + var(--hint-shift-x, 0px)));
}
.hint--top:hover::after {
  transform: translateX(calc(-50% + var(--hint-shift-x, 0px))) translateY(-8px);
}

/* Direction: below the footnote */
.hint--bottom::after {
  top: 100%;
  left: 50%;
  transform: translateX(calc(-50% + var(--hint-shift-x, 0px)));
}
.hint--bottom:hover::after {
  transform: translateX(calc(-50% + var(--hint-shift-x, 0px))) translateY(8px);
}

/* Size: medium */
.hint--medium::after {
  width: 150px;
  max-width: calc(100vw - 20px);
  white-space: normal;
  line-height: 1.4em;
  overflow-wrap: break-word;
}

/* Color: error */
.hint--error::after {
  background-color: #b34e4d;
  text-shadow: 0 -1px 0 #592726;
}

/* Shape: rounded */
.hint--rounded::after {
  border-radius: 4px;
}