/* paper.css -- The manuscript view and its sidenotes, in both the narrow (card) and wide (margin) arrangements.
 *
 * Part 7 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. */

/* --- Paper ----------------------------------------------------------------- */

/* This is a scientific write-up, and scientific write-ups get printed and
 * marked up in the margin. Everything below treats paper as a real target
 * rather than as a degraded screen.
 *
 * Two things make that more than a matter of hiding the chrome. Every chart on
 * these pages is drawn only once the reader scrolls to it, and paper has no
 * scrolling -- charts.js answers that with a `beforeprint` handler that fires
 * every waiting entrance at once, so nothing prints blank. And every number is
 * filled from data.json by script, so a page printed before the payload lands
 * prints em dashes; there is nothing CSS can do about that, and nothing needs
 * to be, because the same page on screen would be showing the same em dashes.
 */
@media print {
  /* Paper is white whatever the reader was looking at. Forcing the light
   * palette back on is one declaration because the tokens are the only place
   * color is named -- a dark-mode print would otherwise lay 240-value text on
   * a surface the printer renders as nothing and hand back an empty sheet. */
  :root, :root[data-theme="dark"] {
    color-scheme: light;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --border: #cccccc;
    --grid: #dddddd;
    --text-primary: #000000;
    --text-secondary: #333333;
    --text-muted: #555555;
    --surface-rgb: 255 255 255;
    --tint-strength: 1;
    --shadow-soft: none;
    --shadow-lift: none;
  }

  /* Chart fills are the data. Browsers strip backgrounds by default to save
   * ink, which on this page would print five identical gray bars. */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  body {
    padding: 0;
    font-size: 10.5pt;
  }

  /* Navigation, controls and the screen-edge fade have no meaning on a sheet of
   * paper: a reader cannot press them, and the fade would print as a gray band
   * across the bottom of every page. */
  .topbar,
  .toc,
  .scroll-progress,
  .table-toggle,
  .guess { display: none !important; }
  body::after { content: none; }

  /* The column exists to hold a line to a readable length. A printed page is
   * already that width, so the measure would otherwise leave an inch of margin
   * inside the margin the printer already gave us. */
  main, header, footer { max-width: none; }

  /* A chart split down the middle by a page break is not a chart. The caption
   * travels with it, and a heading never prints as the last line of a page. */
  figure, .chart, .table-figure, .callout, .data-table { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }

  /* Sections start on the page they start on -- forcing each to its own sheet
   * would waste half of them, and this is one continuous argument rather than a
   * set of chapters. */
  section { break-before: auto; }

  /* On screen a citation marker is a link to the sources page. On paper there
   * is no sources page unless the reader printed it too, so each marker prints
   * the citation itself in the margin -- Tufte's arrangement, and the reason
   * the marker is a <span> with the key rather than bare text. */
  .ref a { color: #000000; border-bottom: none; }

  /* The URL behind a link, once, after the link text. A printed page full of
   * blue words that go nowhere is the oldest fault in web-to-paper. */
  a[href^="http"]::after {
    content: " <" attr(href) ">";
    font-size: 0.8em;
    color: #555555;
    word-break: break-all;
  }
  /* Except in the bar and the citation markers, where the link text is already
   * the reference and the URL would double the length of every entry. */
  .topbar a[href^="http"]::after,
  .ref a[href^="http"]::after { content: none; }
}

/* --- Sidenotes ------------------------------------------------------------- */

/* The full citation, beside the claim it supports. Built by cite.js, which puts
 * one `.ref-note` inside every marker; this file decides where it goes, and the
 * answer depends entirely on whether there is a margin to put it in.
 *
 * Below the threshold there is not, and the note is a card on hover or keyboard
 * focus. Above it, the note floats into the right-hand margin level with its
 * sentence and simply stays there -- no hover, no click, no jump to the foot of
 * the page. That is the whole argument for sidenotes: a reference you have to
 * travel to is a reference most readers never check, and one sitting in the
 * margin is checked by anyone whose eye happens to drift.
 */

.ref { position: relative; }

.ref-note {
  /* Serif like the prose, not sans like the apparatus. The citation is a thing
   * to be read, and at this size a sans face is harder work, not easier. */
  font: 400 var(--size-1)/var(--lh-snug) var(--font-body);
  color: var(--text-secondary);
  text-align: left;
  /* Restored to normal from the marker, which sets nowrap so it cannot be split
   * from its word -- inherited here that would produce one very long line. */
  white-space: normal;
  vertical-align: baseline;
}
/* Several works cited at one marker stack as separate lines rather than running
 * together; two citations in a paragraph of prose are unreadable as a run-on. */
.ref-note__line { display: block; }
.ref-note__line + .ref-note__line { margin-top: var(--space-2); }

/* --- The narrow case: a card on hover or focus ----------------------------- */

.ref-note {
  position: absolute;
  z-index: 6;
  top: calc(100% + 0.45rem);
  /* Centerd on the marker, then pushed back inside the window by cite.js, which
   * measures the card once it is on screen and writes --ref-nudge. Zero is the
   * common case and costs nothing. */
  left: 50%;
  transform: translateX(calc(-50% + var(--ref-nudge, 0px)));
  width: max-content;
  max-width: min(22rem, 78vw);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  pointer-events: none;

  /* `display: none`, not merely invisible.
   *
   * A card is centerd on its marker and is far wider than one, so a marker near
   * the right of the column puts its card past the edge of the window. An
   * absolutely-positioned box still counts toward the document's scroll width
   * even at `visibility: hidden` -- so thirty invisible cards, none of which the
   * reader had asked for, were adding a horizontal scrollbar to the page on a
   * phone. Taking them out of layout entirely is the fix; the clamp in cite.js
   * then only has to handle the one card actually on screen.
   *
   * Measuring still works: `:hover` is applied before the `mouseenter` handler
   * runs, and reading the box forces the layout that displays it. */
  display: none;
  opacity: 0;
  transition: opacity 0.12s, display 0.12s allow-discrete;
}
.ref:hover .ref-note,
.ref:focus-within .ref-note { display: block; opacity: 1; }
@starting-style {
  .ref:hover .ref-note,
  .ref:focus-within .ref-note { opacity: 0; }
}

/* Touch has no hover, and tapping the marker follows its link to the sources
 * page -- which is the fuller answer anyway: it says what the work was used for
 * here, which the citation alone does not. The card is for mouse and keyboard;
 * nothing is unreachable without it. */

/* --- The wide case: the margin -------------------------------------------- */

/* The threshold is arithmetic, not taste. The prose column is 46rem and the
 * root font size grows with the viewport, so the free margin on each side is
 * (100vw - 46rem) / 2 -- and a 13rem note plus its gutter needs that to reach
 * about 15rem, which happens a little under 1360px. Below this the note would
 * be hanging off the edge of the window, so below this it stays a card. */
@media (min-width: 1360px) {
  .ref-note {
    display: block;
    position: static;
    float: right;
    /* Out past the column's own edge. The width and the gutter together are the
     * negative margin, which is what carries the note into the page margin
     * rather than eating into the measure. */
    width: 13rem;
    margin-right: -14.5rem;
    margin-bottom: var(--space-3);
    /* Successive notes stack downward instead of colliding. This is the reason
     * the note is a float and not an absolutely-positioned box: floats already
     * know how to not overlap each other, and the alternative is measuring every
     * note's height in script and shuffling them apart on every resize. */
    clear: right;

    max-width: none;
    padding: 0;
    border: 0;
    /* A left rule instead of a box. Four boxes down a margin read as a sidebar
     * competing with the text; four hairlines read as annotation. */
    border-left: 2px solid var(--grid);
    padding-left: var(--space-2);
    border-radius: var(--radius);
    background: none;
    box-shadow: none;
    transform: none;

    opacity: 1;
    pointer-events: auto;
  }
  /* The notes used to be set a step lighter still, at --text-muted, and on the
   * research page that was fourteen hundred characters of the palest gray on
   * the page -- the largest single block of faded text on the site, and the
   * citations are the one thing here a skeptical reader most wants to read. They
   * take the same secondary ink as the rest of the apparatus now; being half the
   * size of the prose and out in the margin is already enough to say they are
   * not part of the sentence.
   *
   * The marker and its note still light together, from a hover over either.
   * Twenty hairlines down a margin need something that says which one answers
   * the sentence under the cursor -- so what the hover changes now is the rule
   * beside the note and the ink of the marker, not the ink of the note. */
  .ref:hover .ref-note,
  .ref-note:hover { color: var(--text-primary); border-left-color: var(--accent); }

  /* Inside a table there is no margin to float into -- the table has its own
   * width and its own scroll box, and a float in a caption lands on top of the
   * first row. Those markers keep the hover card. */
  caption .ref-note,
  td .ref-note,
  th .ref-note {
    position: absolute;
    float: none;
    width: max-content;
    max-width: 22rem;
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    transform: translateX(calc(-50% + var(--ref-nudge, 0px)));
    display: none;
    opacity: 0;
  }
  caption .ref:hover .ref-note,
  td .ref:hover .ref-note,
  th .ref:hover .ref-note,
  caption .ref:focus-within .ref-note,
  td .ref:focus-within .ref-note,
  th .ref:focus-within .ref-note { display: block; opacity: 1; }
}

/* On paper every note goes to the margin regardless of the window it was
 * printed from, which is the arrangement this whole feature is imitating. */
@media print {
  .ref-note {
    position: static;
    float: right;
    clear: right;
    width: 30%;
    margin-right: -34%;
    margin-bottom: var(--space-2);
    padding: 0 0 0 var(--space-2);
    border: 0;
    border-left: 1pt solid #999999;
    border-radius: var(--radius);
    background: none;
    box-shadow: none;
    transform: none;
    display: block;
    opacity: 1;
    color: #333333;
    font-size: 8pt;
  }
}