/* ── Sidenotes ────────────────────────────────────────── */
/* Tufte-style margin notes, no JavaScript required.      */
/* Checkbox trick provides mobile toggle fallback.        */

/* ── Layout: widen the content area into a two-column    */
/*    grid (text + sidenote margin) ───────────────────── */
.content.has-sidenotes {
  counter-reset: sidenote-counter;
  max-width: 68rem;
  display: grid;
  grid-template-columns: 1fr 14rem;
  column-gap: 1.5rem;
}

/* All block elements stay in the text column */
.content.has-sidenotes > * {
  grid-column: 1;
}

/* ── The superscript number in the text ──────────────── */
.sidenote-toggle {
  counter-increment: sidenote-counter;
  cursor: pointer;
}

.sidenote-toggle::after {
  content: counter(sidenote-counter);
  font-size: 0.65rem;
  vertical-align: super;
  line-height: 0;
  color: var(--accent);
  margin-left: 0.08rem;
  margin-right: 0.12rem;
}

/* Hide the checkbox (it's only for mobile toggling) */
.sidenote-toggle-check {
  display: none;
}

/* ── The sidenote itself ─────────────────────────────── */
.sidenote {
  float: right;
  clear: right;
  margin-right: -16.5rem;
  width: 14rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-dim);
  position: relative;
  padding-left: 0.75rem;
  border-left: 1px solid var(--border);
}

/* Sidenote number prefix */
.sidenote::before {
  content: counter(sidenote-counter) ". ";
  font-weight: 600;
  color: var(--accent);
  font-size: 0.72rem;
}

/* Links inside sidenotes */
.sidenote a {
  color: var(--accent-dim);
}

/* Italic book titles inside sidenotes */
.sidenote em {
  font-style: italic;
}

/* ── Responsive: collapse to inline on narrow screens ── */
/* When the viewport can't fit the margin column, switch  */
/* to a single-column layout with toggleable inline notes */
@media (max-width: 1280px) {

  .content.has-sidenotes {
    max-width: 52rem;
    display: block;
  }

  .sidenote {
    display: none;
    float: none;
    margin: 0.4rem 0 0.8rem 1.2rem;
    width: auto;
    max-width: 100%;
    padding: 0.5rem 0.75rem;
    border-left: 2px solid var(--border);
    background: var(--bg-raised);
    border-radius: 0 4px 4px 0;
    font-size: 0.82rem;
    line-height: 1.5;
  }

  /* Show the toggle marker as tappable on mobile */
  .sidenote-toggle {
    cursor: pointer;
  }

  .sidenote-toggle::after {
    color: var(--accent);
    background: rgba(122, 157, 219, 0.12);
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    font-weight: 600;
  }

  /* Checkbox controls visibility on narrow screens */
  .sidenote-toggle-check:checked + .sidenote {
    display: block;
  }
}