/* Article page — auto-loaded for the article-view snippet (site/snippets/article/article-view.php) */

.article {
  display: grid;
  /* Shared page grid — same three-track proportion as the landing (see --cols-page). */
  grid-template-columns: var(--cols-page);
  min-height: calc(100vh - var(--menubar-h));
  /* Clip the author panel while it slides off the right edge — `clip` (unlike
     `hidden`) is not a scroll container, so the panel's sticky still works. */
  overflow-x: clip;
}

/* centre column */
.article__main {
  /* The anchor of the footnote popover (article-footnote-popover). */
  position: relative;
  padding: var(--space-l) var(--space-s) var(--space-xl);
  /* Gradient accent bar across the top of the reading column, tinted with the
       parent issue's colour (--article-accent, set inline); falls back to neutral
       grey when the article has no issue (e.g. Research Hub theses), matching the
       article card's --dot default. */
  background: linear-gradient(var(--article-accent, #ccc), transparent) top /
    100% var(--article-accent-height) no-repeat var(--color-white);
}
.article__header {
  /* The anchor for the mobile bookmark in its top right corner. */
  position: relative;
  text-align: center;
  margin-bottom: var(--space-xl);
}
/* The bookmark beside the title shows in the mobile layout only (below); on
   desktop the article info's TITLE row carries it. */
.article__bookmark {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  line-height: 0;
  color: var(--color-fg);
}
.article__title {
  font-size: var(--fs-title);
  line-height: var(--leading-tight);
}
.article__byline {
  margin-top: var(--space-2xs);
  font-size: var(--fs-article-body);
}
/* Author names read and behave as links, matching the meta sidebar AUTHOR row:
   underlined by default, and the author whose panel is open reads as selected. */
.article__byline a {
  text-decoration: underline;
}
.article__byline a:hover {
  text-decoration: none;
}
.article__byline a.is-active {
  --fa-weight: 100;
  text-decoration: none;
}

.article__header,
.article__abstract,
.article__body > *:not(:is(.block-gallery, .block-image)) {
  max-width: var(--measure);
  margin-inline: auto;
}

/* The abstract opens the reading column as a large text block (blocks/text,
   size large; Figma 575:1946): a block's distance below the header, a
   section's above the body. */
.article__abstract {
  margin-top: var(--block-gap);
  margin-bottom: var(--heading-gap);
}
/* Set at the subheading size, not the large block's heading size. */
.article__abstract .block-text {
  font-size: var(--fs-subheading);
}

.article__body {
  font-size: var(--fs-article-body);
  line-height: var(--leading-body);
  hyphens: auto;
}
/* One rhythm for the body: every block is --block-gap below the one before;
   a heading, the bibliography and the figure list open a section and get
   --heading-gap. Blocks set no margins of their own. */
.article__body > * + * {
  margin-top: var(--block-gap);
}
.article__body > :is(.block-heading, .block-references, .block-figure-list) {
  margin-top: var(--heading-gap);
}

/* Figures: an image, a video (embed) and audio sit on the same gray plate.
   (Here, not in one block's stylesheet: each block's styles load only with
   that block.) Their caption is the blocks/figure-caption snippet. */
.article__body > :is(.block-image, .block-embed, .block-audio) {
  background-color: var(--color-bg);
}

/* Content links (text, lists, statements, quotes, captions, bibliography,
   figure list captions) slant backwards, underlined; not the footnote markers
   or the figure list's labels, which lead to a figure. The
   link's slant wins over an em/i around or inside it. */
.article__body a:not(.footnote a, .block-figure-list__num) {
  --fa-italic: var(--link-slant);
}
.article__body a:not(.footnote a) :is(em, i) {
  --fa-italic: inherit;
}
.article__body a:not(.footnote a, .block-figure-list__num) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* =========================================================
   FOOTNOTES
   Inline references + scroll-synced sidebar notes
========================================================= */

/* ---------------------------------------------------------
   Right sidebar
--------------------------------------------------------- */

.article__aside {
  position: relative;
  min-width: 0;

  border-left: var(--border);

  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.article__aside > * {
  grid-area: 1 / 1;
}

/* ---------------------------------------------------------
   Footnote sidebar panel
--------------------------------------------------------- */

.article__notes {
  position: sticky;
  top: var(--menubar-h);

  width: 100%;
  height: calc(100vh - var(--menubar-h));
  min-width: 0;

  padding: var(--space-s);

  font-size: var(--fs-small);
  line-height: var(--leading-body);

  /* Own scroll container: the reader scrolls the notes freely without moving the
     article (overscroll-behavior: contain), and the scrollbar is hidden. */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none; /* Firefox */
}

.article__notes::-webkit-scrollbar {
  display: none; /* WebKit / Chromium */
}

/* ---------------------------------------------------------
   Inline footnote reference inside article text

   Output from reference.php:

   <sup class="footnote fnref" data-fn="1">
     <a>
       <span class="fnref__shape"></span>
       <span class="fnref__number">1</span>
     </a>
   </sup>
--------------------------------------------------------- */

.article__body .footnote.fnref {
    text-indent: 0;
  display: inline-flex;
  align-items: center;

  margin-inline: 0.08em;

  font-size: 0.7em;
  line-height: 0;

  vertical-align: super;
}

.article__body .footnote.fnref a {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;

  color: var(--color-fg);
  text-decoration: none;
}

.article__body .fnref__shape {
  display: inline-block;

  width: 1em;
  height: 1em;

  flex: 0 0 1em;

  clip-path: var(--shape, var(--shape-circle));
  background: var(--dot, #ccc);
}

.article__body .fnref__number {
  color: var(--color-fg);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  /* Optical centring beside the dot, as in a chip (ui/chip): the figures
     move down by half of --optical-shift, without moving anything else. */
  translate: 0 calc(var(--optical-shift) / 2);
}

/* The arrow after the number: shown on the open marker only (mobile, below). */
.article__body .fnref__arrow {
  display: none;
}

/* Hover and keyboard focus */

.article__body .footnote.fnref a:hover,
.article__body .footnote.fnref a:focus-visible {
  text-decoration: underline;
}

.article__body .footnote.fnref a:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.15em;
}

/* ---------------------------------------------------------
   Footnote container
--------------------------------------------------------- */

.article__notes .footnotes-container {
  position: relative;

  width: 100%;
  min-width: 0;
}

/* ---------------------------------------------------------
   Footnote list

   Native list numbering is disabled because entry.php
   already outputs the real PHP-generated number inside
   .fn__number.
--------------------------------------------------------- */

.article__notes .footnotes-list {
  position: relative;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;

  list-style: none;
}

/* ---------------------------------------------------------
   Individual footnote

   Notes stack in normal flow; the sidebar scrolls them. Each note is dimmed
   unless its reference is currently on screen (.fn--in-view, toggled by
   assets/js/article/article-view.snippet.js) — hovering the sidebar reveals them all.
--------------------------------------------------------- */

.article__notes .footnotes-list > .fn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3xs);

  width: 100%;
  min-width: 0;

  margin: 0 0 var(--space-s);
  padding: 0;

  color: var(--color-fg);

  opacity: 0.15;
  transition: opacity 200ms ease;
}

.article__notes .footnotes-list > .fn:last-child {
  margin-bottom: 0;
}

.article__notes .footnotes-list > .fn.fn--in-view,
.article__notes:hover .footnotes-list > .fn {
  opacity: 1;
}

/* ---------------------------------------------------------
   Marker (shape + number) in sidebar — the note's click target

   Output from entry.php:

   <a class="fn__marker" href="#/open:footnote/1">
     <span class="fn__shape"></span>
     <span class="fn__number">1</span>
   </a>
--------------------------------------------------------- */

.article__notes .fn__marker {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;

  color: var(--color-fg);
  text-decoration: none;
  white-space: nowrap;
}

.article__notes .fn__marker:hover .fn__number,
.article__notes .fn__marker:focus-visible .fn__number {
  text-decoration: underline;
}

.article__notes .fn__marker:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.15em;
}

.article__notes .fn__shape {
  display: inline-block;

  width: 0.75em;
  height: 0.75em;

  flex: 0 0 0.75em;

  clip-path: var(--shape, var(--shape-circle));
  background: var(--dot, #ccc);
}

.article__notes .fn__number {
  color: var(--color-fg);
  line-height: var(--leading-body);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------
   Footnote text
--------------------------------------------------------- */

.article__notes .fn__body {
  min-width: 0;
  overflow-wrap: anywhere;
}

.article__notes .fn__body > :first-child {
  margin-top: 0;
}

.article__notes .fn__body > :last-child {
  margin-bottom: 0;
}

/* Links in a note slant backwards like the body's content links. */
.article__notes .fn__body a {
  --fa-italic: var(--link-slant);
  color: inherit;
  text-decoration: underline;
}
.article__notes .fn__body a :is(em, i) {
  --fa-italic: inherit;
}

.article__notes .fn__body a:hover {
  text-decoration: none;
}

/* ---------------------------------------------------------
   Click / deep-link highlight flash

   .is-flash (toggled by assets/js/article/article-view.snippet.js) flashes a sidebar note
   — on a body-reference click and on a #/open:footnote/N deep link, and as the fallback
   target for a reference click where the Custom Highlight API is unavailable.
--------------------------------------------------------- */

@keyframes fn-flash {
  from {
    background: color-mix(in srgb, var(--dot, var(--color-note)) 35%, transparent);
  }
  to {
    background: transparent;
  }
}

.article__notes .fn.is-flash,
.article__body .is-flash {
  animation: fn-flash 900ms ease-out;
  backdrop-filter: blur(2px);
}

@media (prefers-reduced-motion: reduce) {
  .article__notes .fn.is-flash,
  .article__body .is-flash {
    animation: none;
  }
}

/* A sidebar-note click highlights only the sentence nearest the reference in the
   article body (CSS Custom Highlight API — see flashSentence()). */
::highlight(fn-sentence) {
  background-color: color-mix(in srgb, var(--dot, var(--color-note)) 30%, transparent);
}

/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */

@media (max-width: 60rem) {
  /* One column: the article info, the article and the notes stack. The
     reading column is capped and centred, so lines on a tablet in portrait
     stay a comfortable length; the Next article block below it still spans
     the full width, as the band that closes the page. */
  .article {
    grid-template-columns: minmax(0, 1fr);
  }
  .article__main > :not(.article-next, .article-next-saved) {
    max-width: var(--measure-narrow);
    margin-inline: auto;
  }

  .article__title {
    font-size: var(--fs-title-narrow);
  }
  /* The title keeps clear of the bookmark on both sides, so it stays centred. */
  .article__header {
    padding-inline: var(--space-m);
  }
  .article__bookmark {
    display: block;
  }

  /* No footnotes list: an open note shows as the popover under its marker
     (article-footnote-popover). The author panel is fixed here, so the aside
     keeps nothing in the flow and draws no rule. */
  .article__aside {
    border-left: 0;
  }
  .article__notes {
    display: none;
  }

  /* A larger touch target than the small raised marker: an invisible area
     reaching past it on every side, so it does not move the line. */
  .article__body .footnote.fnref a {
    position: relative;
  }
  .article__body .footnote.fnref a::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--marker-hit-block)) calc(-1 * var(--marker-hit-inline));
  }

  /* The open marker: the marker raised, rounded, with an arrow down (Figma
     322:16124). Its padding, and the room for the arrow, are taken back by
     margins as large, so the dot and the number stay where they were and the
     line around them does not move: the raised marker lies over its
     neighbours instead (positioned, so it paints above them). */
  .article__body .footnote.fnref.is-open a {
    --marker-open-end: calc(
      var(--marker-open-pad-inline) + var(--marker-arrow-gap) + var(--marker-arrow)
    );
    position: relative;
    padding: var(--marker-open-pad-block) var(--marker-open-end)
      var(--marker-open-pad-block) var(--marker-open-pad-inline);
    margin: calc(-1 * var(--marker-open-pad-block)) calc(-1 * var(--marker-open-end))
      calc(-1 * var(--marker-open-pad-block)) calc(-1 * var(--marker-open-pad-inline));
    background: var(--color-bg);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-raised);
  }
  .article__body .footnote.fnref.is-open .fnref__arrow {
    display: block;
    position: absolute;
    top: 50%;
    right: var(--marker-open-pad-inline);
    width: var(--marker-arrow);
    height: var(--marker-arrow);
    translate: 0 -50%;
  }
  .article__body .fnref__arrow .icon {
    display: block;
    width: 100%;
    height: 100%;
  }
  /* The open marker is a control in its open state, not a link to follow:
     no underline, under the pointer or a lingering touch hover. */
  .article__body .footnote.fnref.is-open a:hover,
  .article__body .footnote.fnref.is-open a:focus-visible {
    text-decoration: none;
  }
}

/* The passage a search result's excerpt links to (a `#:~:text=` fragment). */
::target-text {
  color: inherit;
  background: var(--color-accent);
}