/* Footnote popover — auto-loaded for site/snippets/article/article-footnote-popover.php.
   Below 60rem an open footnote shows as a grey card just below its marker's
   line (Figma "Article Page - Footnote Clicked" 322:16124). It lies over the
   text that follows rather than pushing it down, and grows with a long note,
   which then scrolls with the page. The article view sets --fn-popover-top
   (the line's bottom within the reading column) and the `hidden` attribute. */

.fn-popover {
  display: none;
}

@media (max-width: 60rem) {
  .fn-popover:not([hidden]) {
    display: block;
  }
  .fn-popover {
    position: absolute;
    z-index: var(--z-popover); /* over the body text, under the menubar and drawers */
    top: calc(var(--fn-popover-top, 0px) + var(--space-3xs));
    /* The reading column's width: within the main column's padding, capped
       and centred as the body is (--measure-narrow), so on a tablet it
       spans the text, not the full main column. */
    inset-inline: var(--space-s);
    max-width: var(--measure-narrow);
    margin-inline: auto;
    padding: var(--space-s);
    padding-right: calc(var(--space-s) + var(--close-size) + var(--space-2xs));

    font-size: var(--fs-small);
    line-height: var(--leading-body);
    overflow-wrap: anywhere;
    hyphens: auto;

    background: var(--color-bg);
    box-shadow: var(--shadow-raised);
  }

  .fn-popover__close {
    position: absolute;
    top: var(--space-s);
    right: var(--space-s);
    line-height: 0;
    color: var(--color-fg);
  }
  .fn-popover__close .icon {
    width: var(--close-size);
    height: var(--close-size);
  }
  .fn-popover__close:hover {
    color: var(--color-muted);
  }
  .fn-popover__close:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 0.15em;
  }

  .fn-popover__body > :first-child {
    margin-top: 0;
  }
  .fn-popover__body > :last-child {
    margin-bottom: 0;
  }

  /* Links in a note slant backwards, as in the side column. */
  .fn-popover__body a {
    --fa-italic: var(--link-slant);
    color: inherit;
    text-decoration: underline;
  }
  .fn-popover__body a :is(em, i) {
    --fa-italic: inherit;
  }
  .fn-popover__body a:hover {
    text-decoration: none;
  }
}