/* sources.css -- The sources page and the inline citation markers that point into it.
 *
 * Part 6 of 9. These files were one style.css and are still one
 * stylesheet: equal-specificity rules resolve by document order, so the
 * <link> tags in every page must stay in this order and nothing may move
 * between files without checking what it lands after.
 *   tokens.css -> layout.css -> type.css -> prose.css -> charts.css -> sources.css -> paper.css -> interactive.css -> home.css
 *
 * See site/README.md for the rules that govern all of them. */

/* --- The sources page ----------------------------------------------------- */

/* Three lines per entry, and the third is the one that matters: what the work
 * is used for *here*. A bare citation list lets nobody check anything, so the
 * name and the reference are set quietly and the use is given the same weight
 * as body prose.
 *
 * No table. A citation is a ragged, wrapping thing of wildly varying length,
 * and columns would either clip the long ones or leave the short ones stranded
 * across a wide row. Stacked lines wrap the way sentences want to.
 */
.source {
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  border-left: 3px solid var(--grid);
  margin-bottom: var(--space-3);
}
.source:hover { border-left-color: var(--accent); }

.source-name {
  font: 600 var(--size-3)/var(--lh-snug) var(--font-display);
  color: var(--text-primary);
  margin: 0 0 var(--space-1);
}
.source-name a { color: inherit; text-decoration-color: var(--grid); }
.source-name a:hover { color: var(--accent); text-decoration-color: currentColor; }

/* The reference itself is reference material: present, checkable, and not
 * competing with the sentence below it for the reader's attention. */
.source-cite {
  font: 400 var(--size-2)/var(--lh-body) var(--font-display);
  color: var(--text-muted);
  margin: 0 0 var(--space-1);
}
.source-used {
  font-size: var(--size-2);
  color: var(--text-secondary);
  margin: 0;
}

/* Group headings sit above their entries with room to read as dividers. The
 * first one needs no top margin -- it opens the list. */
/* Each category is a block rather than a heading with entries loose beneath
 * it, so the fixed section map has something with height to observe -- a bare
 * <h2> is one line tall and would spend almost all of a scroll outside the
 * observer's band. The accent is set per group by sources.js, by position
 * rather than by name, and shows up here as the heading's marker. */
.source-group { scroll-margin-top: calc(var(--topbar-h) + 1.5rem); }
.source-group + .source-group { margin-top: var(--space-5); }

.source-group h2 {
  margin: 0 0 var(--space-1);
  padding-left: var(--space-3);
  border-left: 3px solid var(--accent, var(--border));
}

/* --- Inline citation markers ---------------------------------------------- */

/* A reference beside a claim, small and out of the sentence's way. Superscript
 * by position rather than by <sup>, because <sup> shrinks the text a second
 * time on top of this size and the result is unreadable at 13px.
 *
 * Set in the muted ink like every other piece of apparatus on these pages. A
 * marker in the accent color would read as a call to action, and the sentence
 * it sits beside is the thing worth reading. */
.ref {
  font: 500 var(--size-1)/var(--lh-tight) var(--font-display);
  color: var(--text-muted);
  vertical-align: 0.45em;
  margin-left: 0.15em;
  /* Never wraps to a line of its own, and never carries the line break away
   * from the word it belongs to. */
  white-space: nowrap;
}
.ref a {
  color: inherit;
  text-decoration: none;
  /* The underline appears on hover only. Twenty markers down a page, each
   * permanently underlined, turns the prose into a field of blue -- and these
   * are apparatus, present for the reader who wants them and invisible to the
   * reader who does not. */
  border-bottom: 1px solid transparent;
}
.ref a:hover,
.ref a:focus-visible { color: var(--accent); border-bottom-color: currentColor; }

/* The entry a marker just jumped to. Without this the reader lands on a page of
 * near-identical stacked entries with no idea which one answered them -- the
 * anchor scrolled, and nothing said "this one".
 *
 * `.is-target` rather than `:target`, and set by sources.js. These entries do
 * not exist when the browser resolves the fragment, so `:target` never matches
 * them -- it is decided at navigation time and not re-evaluated when the element
 * appears. `:target` is kept alongside for the case where it does work, since
 * two selectors agreeing costs nothing and one of them silently not applying is
 * exactly the bug this replaces. */
.source:target,
.source.is-target {
  border-left-color: var(--accent);
  background: color-mix(in oklab, var(--accent) calc(6% * var(--tint-strength)), var(--tint-base));
}

/* And says so once, on arrival.
 *
 * The tint above is a state: it is still there ten minutes later, which is
 * right for "this is the one you asked for" and useless for "it is here". A
 * reader who followed a citation from another page lands part-way down a list
 * of thirty entries that all look alike, and the standing tint is a thing to
 * find rather than a thing that catches the eye. One ring, once.
 *
 * A ring rather than a flash of color: it draws outside the entry's own box,
 * so nothing under it changes contrast while it plays and the citation stays
 * readable throughout. */
@media (prefers-reduced-motion: no-preference) {
  .source:target,
  .source.is-target { animation: source-arrived 1.5s ease-out 1; }
}
@keyframes source-arrived {
  from { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent); }
  to   { box-shadow: 0 0 0 12px transparent; }
}

/* Anchored entries must clear the fixed top bar, which would otherwise cover
 * the name of the very entry the reader followed a citation to reach. */
.source { scroll-margin-top: calc(var(--topbar-h) + 1.5rem); }