/*
 * NovelTranslator's Translator's Notes on Fictioneer chapter pages.
 * Scoped to tn-* markup, including notes imported by earlier FCI versions.
 * Use inherited colours / neutral translucent rules so Fictioneer controls
 * light and dark appearance; never use the device colour-scheme preference.
 */
.tn-notes,
.tn-notes.wp-block-footnotes {
    --fci-note-border: rgba(127, 127, 127, .36);
    --fci-note-divider: rgba(127, 127, 127, .22);
    --fci-note-tint: rgba(127, 127, 127, .12);
    display: block;
    clear: both;
    box-sizing: border-box;
    margin-block: 3rem 0;
    padding-block: 1.4rem 0;
    padding-inline: 0;
    border-block-start: 1px solid var(--fci-note-border);
    border-inline: 0;
    font-size: .94em;
    line-height: 1.7;
    color: inherit;
    list-style: none;
    text-align: start;
}

.tn-notes .tn-header {
    margin: 0 0 .8rem;
    padding: 0;
}

.tn-notes .tn-header h4 {
    margin: 0;
    padding: 0;
    font-size: 1.1em;
    font-weight: 700;
    line-height: 1.4;
    text-align: start;
    color: inherit;
}

.tn-notes .tn-note-item {
    box-sizing: border-box;
    margin: 0;
    padding: .7rem .35rem;
    border-block-end: 1px solid var(--fci-note-divider);
    border-radius: .25rem;
    scroll-margin-block-start: clamp(4rem, 12vh, 7rem);
    overflow-wrap: anywhere;
}

.tn-notes .tn-note-item:last-child {
    border-block-end: 0;
}

.tn-notes .tn-note-item p {
    margin: 0;
    text-indent: 0;
    text-align: start;
    line-height: inherit;
}

.tn-notes .tn-footnote-num {
    display: inline-block;
    min-inline-size: 1.4em;
    margin-inline-end: .2em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tn-notes .tn-term {
    font-style: italic;
    font-weight: 600;
}

/* Native fragment navigation highlights only the destination note. */
.tn-notes .tn-note-item:target,
.tn-notes .tn-note-item:focus-visible {
    background: var(--fci-note-tint);
    box-shadow: inset 3px 0 currentColor;
    outline: none;
}

/* Keep inline [1] markers readable without increasing paragraph line height. */
sup.tn-footnote-ref {
    vertical-align: super;
    font-size: .82em;
    line-height: 0;
    white-space: nowrap;
    scroll-margin-block-start: clamp(4rem, 12vh, 7rem);
}

.tn-footnote-ref a {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.8rem;
    min-block-size: 1.8rem;
    padding: .1em .3em;
    border-radius: .3rem;
    line-height: 1.2;
    text-decoration: none;
    text-indent: 0;
}

.tn-footnote-ref a:hover,
.tn-footnote-ref a:focus-visible,
.tn-footnote-ref:target a,
.tn-footnote-ref:focus-visible a {
    background: rgba(127, 127, 127, .16);
    text-decoration: underline;
    text-underline-offset: .15em;
}

.tn-footnote-ref a:focus-visible,
.tn-notes a.tn-footnote-backref:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Existing imports contain ↩; add a readable label without editing posts. */
.tn-notes a.tn-footnote-backref {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    min-block-size: 2.1rem;
    margin-inline-start: .4rem;
    padding: .25rem .65rem;
    border: 1px solid var(--fci-note-border);
    border-radius: 999px;
    font-size: .88em;
    line-height: 1.25;
    text-indent: 0;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
}

/* No-JS fallback. The tiny frontend script replaces it with actual, localizable text. */
.tn-notes a.tn-footnote-backref:not(.fci-backref-enhanced)::after {
    content: 'Back to reading';
}

.tn-notes a.tn-footnote-backref:hover,
.tn-notes a.tn-footnote-backref:focus-visible {
    background: var(--fci-note-tint);
    text-decoration: none;
}

@media (max-width: 600px) {
    .tn-notes,
    .tn-notes.wp-block-footnotes {
        margin-block-start: 2.5rem;
        font-size: .96em;
    }
    .tn-notes .tn-note-item {
        padding-block: .8rem;
    }
}