/* Tufte-style sidenotes and margin notes, ported from Sicarii's tufte.css.

   Syntax (see layouts/partials/sidenotes.html and shortcodes/marginnote.html):
     !!!numbered sidenote!!!
     {{< marginnote >}}unnumbered note / citation{{< /marginnote >}}

   Wide screens: notes float into the right-hand page margin beside the post
   column. Narrow screens: notes sit inline where they are referenced, set off
   by rules. */

:root {
  --note-gutter: 300px;  /* channel + note width */
  --note-width: 260px;
  /* --note-color and --note-accent are left unset here so dark.css can set
     them on :root; the fallbacks below are the light-mode values. */
}

section.body {
  counter-reset: sidenote-counter;
}

.sidenote,
.marginnote {
  float: right;
  clear: right;
  width: var(--note-width);
  margin-right: calc(-1 * var(--note-gutter));
  margin-top: 0.3rem;
  margin-bottom: 0.8rem;
  font-family: 'Wittgenstein', serif;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--note-color, #6b6b7b);
  text-align: left;
  /* archie hangs list bullets with text-indent: -2ch, which would otherwise
     be inherited and pull notes (and their markers) left inside a list. */
  text-indent: 0;
  position: relative;
}

.sidenote-number {
  counter-increment: sidenote-counter;
}

.sidenote-number::after,
.sidenote::before {
  position: relative;
  vertical-align: baseline;
  font-weight: 700;
  color: var(--note-accent, var(--maincolor));
}

.sidenote-number::after {
  content: counter(sidenote-counter);
  font-size: 0.7rem;
  top: -0.5rem;
  left: 0.1rem;
}

.sidenote::before {
  content: counter(sidenote-counter) " ";
  font-size: 0.7rem;
  top: -0.4rem;
}

label.sidenote-number {
  display: inline-block;
  text-indent: 0;
  max-height: 1.5rem;  /* keep the marker from stretching the line */
}

/* Notes are always visible, so the toggle checkbox is never shown. */
input.margin-toggle {
  display: none;
}

/* The page column stays at archie's 800px on every page, so the header does
   not change shape between the home page and posts; notes hang off its right
   edge into the page margin. That needs 300px of margin on each side of the
   centred column (800 + 2 * 300), so below that width they go inline. */
@media screen and (max-width: 1399px) {
  .sidenote,
  .marginnote {
    display: block;
    float: none;
    clear: both;
    width: 100%;
    margin: 1rem 0;
    padding: 0.6rem 0;
    border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    font-size: 1rem;
  }
}