/* Tufte sidenotes for kramdown pages (js/sidenotes.js), after the course
 * syllabi's template.
 *
 * The site's text column is 860px (--wrap), so on a wide screen a note hangs
 * in the open space to its right without narrowing the text. The note's width
 * is whatever that space allows, capped at 15rem; below 1300px there is not
 * enough of it, and a note opens inline under its number when tapped. Colors
 * come from site.css, so the notes follow the light and dark themes. */
:root {
  --sn-gap: 1.75rem;
  --sn-w: min(15rem, calc((100vw - var(--wrap, 860px)) / 2 - 2.5rem));
}

.margin-toggle { color: var(--red); cursor: pointer; }
input.margin-toggle { display: none; }
label.sidenote-ref {
  font-weight: 700; font-size: .7em; vertical-align: super; line-height: 0;
  font-variant-numeric: tabular-nums; padding: 0 .1em;
}
label.sidenote-ref:hover { text-decoration: underline; }

.sidenote {
  display: none;
  margin: .9em 0; padding: 12px 16px;
  background: var(--bg-alt); border-left: 3px solid var(--red);
  font-size: 15px; line-height: 1.45; color: var(--muted);
  text-align: left; font-weight: 400; font-style: normal;
}
input.margin-toggle:checked + .sidenote { display: block; }
.sidenote p { margin: 0 0 .5em; font-size: inherit; line-height: inherit; }
.sidenote p:last-child { margin-bottom: 0; }
.sidenote a { overflow-wrap: anywhere; }
.sidenote-number {
  font-weight: 700; color: var(--red); font-variant-numeric: tabular-nums;
  margin-right: .35em;
}

@media (min-width: 1300px) {
  .sidenote {
    display: block; float: right; clear: right;
    width: var(--sn-w);
    margin: .35rem calc(-1 * (var(--sn-w) + var(--sn-gap))) .8rem 0;
    padding: 0; background: none; border: 0;
    font-size: 13.5px; line-height: 1.42; hyphens: auto;
  }
  label.sidenote-ref { cursor: default; }
  label.sidenote-ref:hover { text-decoration: none; }
}

.footnotes.sidenoted { display: none; }

@media print {
  .sidenote {
    display: block; float: none; width: auto;
    margin: .7em 0 .9em; padding: 0 0 0 12px;
    background: none; border-left: 2px solid var(--red);
  }
}