/* =================================================================
 * 14b. Footnotes — 16th-century scholarly apparatus
 *      Reference marks follow the classical printer's sequence
 *      († ‡ § ¶ ‖) instead of arabic numerals. Both the inline
 *      superscript and the list marker share one @counter-style so
 *      the reader pairs them visually — same glyph in body and in
 *      the list, no arabic noise.
 *
 *      Why: aligns with the rest of Proof's letterpress vocabulary
 *      (❦ fleurons, § labeled breaks, italic small-caps bylines).
 *      Numerals would compete with the heading numerals.
 *
 *      Sequence cycles after 5: the 6th note is †† again. For very
 *      long scholarly tracts swap `system: cyclic` → `additive` with
 *      explicit ranges, but cyclic is fine for typical posts.
 *
 *      Accessibility: the original digit stays in the DOM (just made
 *      visually invisible), so screen readers still announce
 *      "footnote 1, 2, 3". The dagger is decoration overlaid via
 *      ::before; assistive tech sees the canonical number.
 * ================================================================= */

/* The classical printer's mark sequence. */
@counter-style proof-fn {
    system: cyclic;
    symbols: "\2020" "\2021" "\00A7" "\00B6" "\2016";  /* † ‡ § ¶ ‖ */
    suffix: "";
}

/* Inline reference marker — the superscript link inside the body. */
.entry-content {
    counter-reset: fn-inline;
}
.entry-content sup.fn,
.entry-content sup[data-fn] {
    /* Reset the browser's default tiny sup so we can shape it. */
    font-size: 0.78em;
    line-height: 0;
    vertical-align: 0.5em;
    margin-inline: 0.08em 0.18em;
    counter-increment: fn-inline;
}
.entry-content sup.fn a,
.entry-content sup[data-fn] a {
    /* WP's general entry-content link rule (specificity 0,3,2) sets
       both color: accent AND border-bottom: 35% accent. Both would
       leak into footnote sups — the digit becomes visible and a
       faint underline ghosts under the dagger glyph. !important on
       both is the honest fix; the alternative is to retrofit the
       general rule with a :not(sup.fn) carve-out, which spreads
       footnote knowledge into unrelated CSS. */
    color: transparent !important;
    border-bottom: 0 !important;
    position: relative;
    text-decoration: none;
    padding-inline: 0.08em;
    transition: color 200ms ease;
}
.entry-content sup.fn a::before,
.entry-content sup[data-fn] a::before {
    content: counter(fn-inline, proof-fn);
    position: absolute;
    inset: 0;
    text-align: center;
    color: var(--wp--preset--color--accent);
    font-family: var(--wp--preset--font-family--heading);
    font-style: normal;          /* daggers stay upright */
    font-feature-settings: "kern";
    transition: color 200ms ease;
}
.entry-content sup.fn a:hover::before,
.entry-content sup[data-fn] a:hover::before {
    color: var(--wp--preset--color--accent-strong);
}
/* Active pairing — set on both sup and aside when the reader hovers
   either side. JS toggles .is-active in lockstep so the linkage is
   bidirectional.
   In light mode --accent vs --accent-strong are too close in
   luminance to register as a state change at superscript scale, so
   the active sup also gets a faint accent wash and a 1px ring —
   same color family as the aside highlight, scaled down to match
   the smaller surface. */
.entry-content sup.fn a::before,
.entry-content sup[data-fn] a::before {
    transition: color 160ms ease, font-weight 160ms ease, text-shadow 160ms ease;
}
/* Active state: don't try to box the <sup> — its line-height: 0 +
   absolutely-positioned ::before make box-shadow / background land
   in the wrong place (the box hangs left of the glyph). Instead make
   the dagger ITSELF unmistakable: jump to accent-strong, bold weight,
   and a soft accent halo behind it. The glyph stays in flow; nothing
   shifts. Light mode reads it because of the halo, not the color
   delta. */
.entry-content sup.fn.is-active a::before,
.entry-content sup[data-fn].is-active a::before {
    color: var(--wp--preset--color--accent-strong);
    font-weight: 900;
    text-shadow:
        0 0 4px color-mix(in srgb, var(--wp--preset--color--accent) 80%, transparent),
        0 0 8px color-mix(in srgb, var(--wp--preset--color--accent) 50%, transparent);
}
/* Highlight when jumped to via the return arrow. WP emits the inline
   anchor as <a id="...-link"> inside the sup, so target the <a>. */
.entry-content .wp-block-footnotes li:target,
.entry-content sup.fn a:target,
.entry-content sup[data-fn] a:target {
    background: color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent);
}

/* The footnotes list itself. WordPress emits this as
   <ol class="wp-block-footnotes"> at the end of post_content. */
.entry-content .wp-block-footnotes {
    position: relative;
    margin-top: var(--wp--preset--spacing--64);
    padding-top: var(--wp--preset--spacing--40);
    border-top: 1px solid var(--wp--preset--color--line);
    /* Smaller body, tighter rhythm — scholarly footnote convention. */
    font-size: var(--wp--preset--font-size--xs);
    line-height: 1.65;
    color: var(--wp--preset--color--text-secondary);
    /* Align with the article body: zero outer indent. The hanging
       indent lives on each <li> instead, so the dagger sits flush
       with the body left edge and wrapped lines align with the
       first character of footnote text. */
    list-style: none;
    padding-inline-start: 0;
    margin-inline-start: 0;
    counter-reset: fn;
}
/* Centered "§ 注释" label sitting astride the top rule, same trick
   as the comments closing fleuron. */
.entry-content .wp-block-footnotes::before {
    content: "§ 注释";
    position: absolute;
    top: -0.65em;
    left: 50%;
    transform: translateX(-50%);
    background: var(--wp--preset--color--bg);
    padding: 0 0.9em;
    font-family: var(--font-mono);
    font-size: var(--wp--preset--font-size--xxs);
    letter-spacing: 0.14em;
    color: var(--wp--preset--color--text-secondary);
    line-height: 1;
}

/* Hanging-indent layout via ::before instead of ::marker, so we can
   control the glyph's exact width. Dagger occupies a fixed 1.4em
   slot at the line head; text-indent: -1.6em pulls the first line
   back so the dagger lands flush with the article body's left edge.
   Wrapped lines naturally align with the first character of
   footnote text. */
.entry-content .wp-block-footnotes li {
    position: relative;
    counter-increment: fn;
    margin-block: 0.5em;
    padding-inline-start: 1.6em;
    text-indent: -1.6em;
}
/* Suppress the browser's default marker — we draw our own via
   ::before so we have width control. */
.entry-content .wp-block-footnotes li::marker { content: ""; }
.entry-content .wp-block-footnotes li::before {
    content: counter(fn, proof-fn);
    display: inline-block;
    width: 1.4em;
    text-indent: 0;          /* cancel the parent's negative indent for the glyph itself */
    color: var(--wp--preset--color--accent);
    font-family: var(--wp--preset--font-family--heading);
}

/* Return arrow back to the in-text reference. WordPress emits it as
   the last <a> inside the <li>; we shape it as a delicate accent mark
   rather than the default underlined link. */
.entry-content .wp-block-footnotes li a[href^="#"]:last-child {
    color: var(--wp--preset--color--accent);
    text-decoration: none;
    margin-inline-start: 0.4em;
    font-size: 0.92em;
    opacity: 0.7;
    border-bottom: 1px solid transparent;
    transition: opacity 200ms ease, border-color 200ms ease;
}
.entry-content .wp-block-footnotes li a[href^="#"]:last-child:hover {
    opacity: 1;
    border-bottom-color: var(--wp--preset--color--accent);
}

/* =================================================================
 * 14c. Marginalia — Tufte-style right-margin footnotes
 *      JS (buildMarginalia in proof.js) clones each <li> from
 *      .wp-block-footnotes into an <aside class="proof-margin-note">
 *      placed absolutely in the article's right gutter, vertically
 *      aligned with the <sup> that anchors it. When marginalia is
 *      active the article gains .proof-has-marginalia and the bottom
 *      <ol> is hidden (one canonical view at a time). On viewports
 *      below the JS threshold (~1100px) the class is not added, so
 *      the standard bottom list renders — same content, one fallback.
 *
 *      Why a sibling <aside> rather than transforming the <ol>:
 *      WordPress owns the footnote markup contract (block JSON +
 *      saved post_content), and rewriting it in-place would diverge
 *      from what the editor expects. The aside is a presentational
 *      mirror; mutate the source and the mirror updates next render.
 * ================================================================= */
.proof-margin-note {
    /* JS sets top/left/width inline. We set everything else. */
    position: absolute;
    /* WP's constrained-layout rule adds margin-block-start: 24px to
       every direct child of an .is-layout-constrained ancestor. The
       article qualifies, so without this reset the aside lands 24px
       below its computed top — invisible misalignment with the sup. */
    margin: 0;
    font-size: var(--wp--preset--font-size--xs);
    line-height: 1.55;
    color: var(--wp--preset--color--text-secondary);
    border-top: 1px solid var(--wp--preset--color--line);
    padding-top: 0.4em;
    /* Tufte convention: notes in a slightly muted voice. */
    font-feature-settings: "kern", "onum";
}
.proof-margin-note__glyph {
    display: inline-block;
    color: var(--wp--preset--color--accent);
    font-family: var(--wp--preset--font-family--heading);
    font-size: 1.1em;
    line-height: 1;
    margin-right: 0.4em;
    /* Daggers stay upright; italicizing § looks wrong (matches the
       inline marker convention from section 14b). */
    font-style: normal;
}
.proof-margin-note__body p:first-child { margin-top: 0; }
.proof-margin-note__body p:last-child  { margin-bottom: 0; }
/* Inline links inside notes — the entry-content link rule doesn't
   reach here (asides are siblings of .entry-content), so style them
   explicitly to match the body voice. */
.proof-margin-note a {
    color: var(--wp--preset--color--accent);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent);
    transition: border-color 200ms ease;
}
.proof-margin-note a:hover {
    border-bottom-color: var(--wp--preset--color--accent);
}

/* When marginalia is active, hide the bottom list. The asides ARE
   the footnotes view at this width; showing both would duplicate. */
.proof-content.proof-has-marginalia .entry-content .wp-block-footnotes {
    display: none;
}
/* And the inverse — when marginalia is NOT active (narrow viewport
   or insufficient gutter), hide the asides. JS keeps them in the
   DOM either way; only the visibility flips. The bottom <ol> takes
   over as the canonical view at narrow widths. */
.proof-content:not(.proof-has-marginalia) .proof-margin-note {
    display: none;
}

/* Hover pairing — when the reader hovers either the body sup OR the
   margin-note aside, the matching aside gets a faint accent wash and
   a slightly stronger top hairline. JS toggles .is-active on both
   sides in lockstep (see buildMarginalia in proof.js). */
.proof-margin-note {
    transition: background-color 160ms ease, border-top-color 160ms ease;
}
.proof-margin-note.is-active {
    background: color-mix(in srgb, var(--wp--preset--color--accent) 8%, transparent);
    border-top-color: var(--wp--preset--color--accent);
}

/* Print — collapse the marginalia view back to the canonical bottom
   <ol>. Asides are absolutely positioned in the right gutter, which
   doesn't reflow nicely onto paper; the bottom list paginates clean. */
@media print {
    .proof-margin-note { display: none !important; }
    .proof-content.proof-has-marginalia .entry-content .wp-block-footnotes {
        display: block !important;
    }
    /* Also restore the inline sup digit so the printed page can show
       a proper "see footnote 1" reference rather than the screen-only
       dagger overlay. */
    .entry-content sup.fn a,
    .entry-content sup[data-fn] a {
        color: var(--wp--preset--color--text-primary) !important;
    }
    .entry-content sup.fn a::before,
    .entry-content sup[data-fn] a::before {
        content: none;
    }
}