/* HACK: ideally we would like to just include a word-joiner character
 * (U+2060, ⁠) in the markup before [citation-needed] tags, but that
 * character is actually visible in Chrome due to a bug. The following
 * workaround seems to work fine on FF, Chrome and Safari.
 * Chrome issue: https://code.google.com/p/chromium/issues/detail?id=225862
 */
#snippet sup:before, .ch-cn-marker:before {
    content: "⁠";
    opacity: 0;
    font-size: 1px;
}

#snippet .ch-cn-marker {
    /* Fix <sup> messing up the line-height of the snippet.
     * The natural fix would be to apply this to the <sup> tags themselves
     * (not all <sup> are under .ch-cn-marker), but that messes up the heights
     * of lines below .ch-cn-marker for some reason.
     * I won't pretend I understand why this works, but applying the style to
     * .ch-cn-marker only seems to do the trick.
     * Source: https://stackoverflow.com/q/1530685/
     */
    line-height: 0;
}

/* FIXME We apply this style to _any_ <sup>, because that's usually the
 * right thing to do for <sup> that come from any other template, but it does
 * cause false positives: for example, we also style inline <sup> tags that
 * didn't belong to a template at all.
 * This doesn't seem to be very frequent, but we could have the snippet parser
 * mark those inline <sup> with a special class to rule them out here if needed.
 */
#snippet sup {
    white-space: nowrap;
    font-size: small;
    color: #0645AD;
}

body[theme=dark] #snippet sup {
    color: #6D9FF0;
}

#snippet h3 {
    font-size: 16px;
}

/* Fighting Bootstrap, which sets this to white. */
#snippet kbd {
    color: unset !important;
}