/* Post extras, shared by every post in blog/:
   1. a "Contents" rail at the screen edge: one dash per heading, opening into a card that lists them
      (built from the h2/h3 headings by post-extras.js)
   2. a popover that shows the full reference when a citation is hovered, focused, or tapped
   Relies on the --ink / --teal / --muted / --rule tokens each post already defines. */

/* Anchored jumps should clear the sticky top nav. */
main section[id], main h2[id], main h3[id], .ref-list li[id]{ scroll-margin-top:5rem; }

/* ---------- contents rail ---------- */
/* Needs a little free margin beside the 56rem column; narrower screens keep just the in-flow table of contents. */
.side-toc{ display:none; }
@media (min-width:1024px){ .side-toc{ display:block; } }

.side-toc{ position:fixed; top:calc(50% + 1.5rem); transform:translateY(-50%); z-index:40; }
.side-toc[data-side="left"]{ left:8px; } .side-toc[data-side="right"]{ right:8px; }

.side-toc-rail{ display:block; margin:0; padding:12px 8px; border:0; border-radius:8px; background:transparent; cursor:pointer;
  opacity:.8; transition:background-color .2s ease, opacity .2s ease; }
.side-toc-rail:hover, .side-toc.open .side-toc-rail{ background:rgba(14,31,28,.06); opacity:1; }
.side-toc-rail:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.side-toc-rail i{ display:block; width:12px; height:1.5px; margin-top:var(--toc-gap,12px); background:rgba(14,31,28,.42);
  transition:background-color .2s ease; }
.side-toc-rail i:first-child{ margin-top:0; }
.side-toc-rail i.lv3{ width:10px; margin-left:2px; background:rgba(14,31,28,.30); }
.side-toc[data-side="right"] .side-toc-rail i.lv3{ margin-left:0; }
.side-toc-rail i.active{ background:var(--teal); }
.side-toc.h2-only .side-toc-rail i.lv3{ display:none; }   /* set by post-extras.js when the dashes cannot fit the window */

/* The panel's padding bridges the gap to the rail, so the pointer never leaves the widget on the way over. */
.side-toc-panel{ position:absolute; top:50%; left:100%; padding-left:8px; transform:translate(-4px,-50%);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s; }
.side-toc[data-side="right"] .side-toc-panel{ left:auto; right:100%; padding-left:0; padding-right:8px; transform:translate(4px,-50%); }
.side-toc.open .side-toc-panel{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(0,-50%); transition-delay:0s; }

.side-toc-card{ width:280px; max-height:calc(100vh - 9rem); overflow-y:auto; padding:8px; text-align:left;
  background:#FFFDF9; border:1px solid var(--rule); border-radius:10px;
  box-shadow:0 10px 30px rgba(14,31,28,.12), 0 2px 6px rgba(14,31,28,.06);
  scrollbar-width:thin; scrollbar-color:var(--rule) transparent; }
.side-toc-card::-webkit-scrollbar{ width:4px; }
.side-toc-card::-webkit-scrollbar-thumb{ background:var(--rule); border-radius:4px; }
.side-toc-title{ padding:6px 8px 6px; font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:var(--ink); opacity:.7; }
.side-toc-card ol{ list-style:none; margin:0; padding:0; }
.side-toc-card li{ margin:0; }
.side-toc-card a{ display:block; padding:4px 8px; border-radius:6px; font-size:13.5px; line-height:1.4; font-weight:400;
  color:#566662; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .15s ease, background-color .15s ease; }
.side-toc-card li.lv3 > a{ padding-left:20px; color:var(--muted); }
/* "li >" keeps these at least as specific as the .lv3 colour above, so they win for subsections too */
.side-toc-card li > a:hover{ color:var(--ink); background:rgba(14,31,28,.05); }
.side-toc-card li > a.active{ color:var(--teal); }
.side-toc-card a code{ background:none; border:0; padding:0; font-size:.9em; color:inherit; }

/* ---------- citation popover ---------- */
.cite-pop{ position:absolute; z-index:60; top:0; left:0; width:max-content; max-width:min(380px, calc(100vw - 24px));
  background:#FFFDF9; border:1px solid var(--rule); border-radius:10px; padding:12px 14px;
  box-shadow:0 10px 30px rgba(14,31,28,.14), 0 2px 6px rgba(14,31,28,.06);
  font-size:.84rem; line-height:1.5; color:var(--ink); text-align:left;
  opacity:0; transform:translateY(4px); transition:opacity .14s ease, transform .14s ease; pointer-events:none; }
.cite-pop.on{ opacity:1; transform:none; pointer-events:auto; }
.cite-pop[data-side="below"]{ transform:translateY(-4px); } .cite-pop[data-side="below"].on{ transform:none; }
.cite-pop-n{ color:var(--muted); font-variant-numeric:tabular-nums; margin-right:.35em; }
.cite-pop a{ color:var(--teal); text-decoration:none; } .cite-pop a:hover{ text-decoration:underline; }
.cite-pop-foot{ margin-top:8px; padding-top:7px; border-top:1px solid var(--rule); font-size:.74rem; }
.cite-pop-foot a{ color:var(--muted); } .cite-pop-foot a:hover{ color:var(--teal); text-decoration:none; }
.ref-list li{ transition:background-color .6s ease; border-radius:6px; }
.ref-list li.ref-flash{ background-color:rgba(10,124,106,.10); transition-duration:0s; }

@media (prefers-reduced-motion: reduce){ .cite-pop, .side-toc-rail, .side-toc-rail i, .side-toc-panel, .side-toc-card a, .ref-list li{ transition:none; } }
@media print{ .side-toc, .cite-pop{ display:none !important; } }