/* Numbered notes for the overview. Native anchors work without JavaScript. */
.kp-footnote-anchor {
    white-space: nowrap;
}
.kp-footnote-callout {
    position: relative;
    top: -0.4em;
    margin-left: 1px;
    vertical-align: baseline;
    line-height: 0;
    white-space: nowrap;
}
.kp-site-page .kp-reading-content a.kp-footnote-ref {
    position: relative;
    display: inline-block;
    height: 24px;
    margin: -6px 0;
    padding: 0;
    border-radius: 3px;
    color: #2a6c92;
    text-align: center;
    text-decoration: none;
    scroll-margin-top: 140px;
}
/* Keep the click target generous without adding space around the numeral. */
.kp-footnote-ref::before {
    content: "";
    position: absolute;
    width: max(100%, 24px);
    height: 24px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.kp-site-page .kp-reading-content a.kp-footnote-ref:hover {
    color: #194963;
    background: #e8eff3;
    text-decoration: underline;
}
.kp-footnotes__intro { color: #4c526a; }
.kp-footnotes ol {
    margin: 0;
    padding-left: 2rem;
}
.kp-footnotes li {
    margin: 0;
    padding: 0 0.5rem 0 0.35rem;
    border-radius: 3px;
    color: #4c526a;
    scroll-margin-top: 110px;
    overflow-wrap: anywhere;
}
.kp-footnotes li::marker {
    color: inherit;
    font-variant-numeric: tabular-nums;
}
.kp-site-page .kp-reading-content .kp-footnotes a {
    color: #2a6c92;
    text-decoration: underline;
    text-decoration-color: rgba(42, 108, 146, 0.35);
    text-underline-offset: 0.18em;
}
.kp-site-page .kp-reading-content .kp-footnotes a:hover {
    color: #194963;
    text-decoration-color: currentColor;
}
.kp-footnotes__scope { display: block; margin-top: 0.35rem; }
.kp-site-page .kp-reading-content a.kp-footnote-back {
    display: table;
    min-height: 32px;
    margin-top: 0.4rem;
    padding: 4px 0;
}
.kp-footnotes li:target,
.kp-site-page .kp-reading-content a.kp-footnote-ref:target {
    background: #e8eff3;
    box-shadow: -3px 0 #789eaf;
}
.kp-footnote-ref:focus-visible,
.kp-footnotes a:focus-visible,
.kp-footnotes li:focus-visible {
    outline: 2px solid #2a6c92;
    outline-offset: 3px;
}
/* Extend the shared typography layer without overriding other reading text. */
@layer kp-typography {
    :where(.kp-footnotes li, .kp-footnotes__intro) {
        font-size: var(--kp-type-metadata-size) !important;
        line-height: 1.7 !important;
    }
    :where(.kp-reading-content a.kp-footnote-ref) {
        font-family: var(--kp-type-sans) !important;
        font-size: 0.75rem !important;
        font-weight: 500 !important;
        line-height: 24px !important;
    }
}
@media print {
    .kp-footnote-back { display: none !important; }
    .kp-footnotes li { break-inside: avoid; }
    .kp-footnotes li:target { background: none; box-shadow: none; }
}
