/* ==========================================================================
   COMPONENTS · SIDENOTE — THE MARGIN APPARATUS. Inline superscript-mono
   citations resolve into numbered notes in the right margin (desktop), and
   collapse to clean footnote popovers on mobile so the signature never breaks
   on a phone. CSS-only: a visually-hidden checkbox toggles the note inline.

   Canonical markup (inside an .o-apparatus reading column):
     …a sourced claim<label class="op-cite" for="sn-3"
        ><sup class="op-cite__mark">3</sup></label>.
     <input type="checkbox" id="sn-3" class="op-sidenote__toggle u-visually-hidden">
     <small class="op-sidenote" role="doc-footnote">
       <span class="op-sidenote__index">3</span> Note text, with a
       <a href="#ref-3">source</a>.
     </small>
   ========================================================================== */

/* — The inline marker — */
.op-cite { cursor: pointer; }
.op-cite__mark {
  font-family: var(--font-data);
  font-size: 0.66em;
  font-weight: var(--weight-medium);
  font-variant-numeric: lining-nums;
  vertical-align: 0.55em;
  line-height: 0;
  color: var(--accent);
  padding-inline: 0.06em;
}
.op-cite:hover .op-cite__mark { color: var(--accent-ink); text-decoration: underline; }
.op-cite:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-xs); }

/* — The note itself — */
.op-sidenote {
  display: block;
  font-family: var(--font-furniture);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}
.op-sidenote__index {
  font-family: var(--font-data);
  font-size: 0.85em;
  font-weight: var(--weight-medium);
  color: var(--accent);
  margin-right: 0.35em;
}
.op-sidenote a { font-size: inherit; }

/* ----- DESKTOP (apparatus engaged): float each note into the reserved margin.
   The note's containing block is the reading column (capped at the measure), so
   a right float alone lands at the measure's edge and squeezes the prose. A
   negative right margin of (gap + aside) pushes the aside-width note fully out
   into the reserved margin; nothing clips (no ancestor sets overflow). Anchor
   each note immediately after its marker in the source so it aligns to the
   citation's line. ----- */
@media (min-width: 72rem) {
  .op-sidenote {
    float: right;
    clear: right;
    inline-size: var(--apparatus-aside);
    margin-right: calc(-1 * (var(--apparatus-gap) + var(--apparatus-aside)));
    margin-bottom: var(--space-sm);
    padding-left: var(--space-xs);
    border-left: 1px solid var(--rule);
    text-align: left;
  }
  /* the toggle is irrelevant on desktop — notes are always shown */
  .op-sidenote__toggle { display: none; }
}

/* ----- MOBILE / TABLET: fold to a footnote popover toggled by the marker ----- */
@media (max-width: 71.99rem) {
  .op-sidenote {
    display: none;
    margin-block: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: var(--surface-raised);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--accent-keyline);
    border-radius: var(--radius-xs);
    box-shadow: var(--shadow-pop);
  }
  .op-sidenote__toggle:checked + .op-sidenote { display: block; }
  /* show the active state on the marker's label when open */
  .op-sidenote__toggle:checked + .op-sidenote .op-sidenote__index { color: var(--accent-ink); }
}