/* Floating reading rail, inspired by Stencil's post-toc. */
.post-toc {
  --toc-panel-width: min(260px, calc(100vw - 40px));
  position: fixed;
  top: 140px;
  right: max(24px, calc((100vw - 1680px) / 2));
  width: 32px;
  min-height: 32px;
  max-height: calc(100svh - 220px);
  z-index: 20;
}
.post-toc-ticks {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-height: calc(100svh - 220px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  transition: opacity .18s;
}
.post-toc-ticks::-webkit-scrollbar, .post-toc-list::-webkit-scrollbar { display: none; }
.post-toc-tick {
  display: flex;
  align-items: center;
  width: 32px;
  min-height: 8px;
  flex-shrink: 0;
  text-decoration: none;
}
.post-toc-tick span {
  display: block;
  width: 16px;
  height: 2px;
  background: rgba(255,255,255,.22);
  transition: background .12s, width .12s;
}
.post-toc-tick--sub span { width: 8px; }
.post-toc-tick--read span { background: var(--dim); }
.post-toc-tick--active span { width: 24px; background: var(--accent); }
.post-toc-tick:hover span, .post-toc-tick:focus-visible span { background: var(--accent); }
.post-toc-tick[aria-current] { text-decoration: none; }
.post-toc-list {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--toc-panel-width);
  max-height: calc(100svh - 220px);
  padding: 20px 12px 20px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  color: var(--dim);
  background: var(--bg);
  box-shadow: -12px 0 24px var(--bg);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(8px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.post-toc[data-toc-expand="true"]:hover,
.post-toc[data-toc-expand="true"]:focus-within { width: var(--toc-panel-width); }
.post-toc[data-toc-expand="true"]:hover .post-toc-ticks,
.post-toc[data-toc-expand="true"]:focus-within .post-toc-ticks { opacity: 0; pointer-events: none; }
.post-toc[data-toc-expand="true"]:hover .post-toc-list,
.post-toc[data-toc-expand="true"]:focus-within .post-toc-list {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.post-toc:focus-visible { outline: 1px solid var(--accent); outline-offset: 6px; }
.post-toc-list .eyebrow { margin: 0 0 14px 12px; font-size: 10px; }
.post-toc-list ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.post-toc-list a {
  display: block;
  border-left: 2px solid transparent;
  margin-left: -1px;
  padding: 6px 8px 6px 12px;
  font: 11px/1.45 var(--mono);
  color: var(--dim);
  overflow-wrap: anywhere;
  text-decoration: none;
}
.post-toc-list a:hover, .post-toc-list a:focus-visible { color: var(--ink); }
.post-toc-sub a { padding-left: 30px; }
.post-toc-idx { color: var(--accent); margin-right: 8px; }
.post-toc-list a[aria-current="location"] {
  border-left-color: var(--accent);
  color: var(--accent);
  background: repeating-linear-gradient(45deg, rgba(0,247,255,.06) 0 1px, transparent 1px 3px);
  text-decoration: none;
}
/* Leave a quiet gutter for the rail; the expanded list may overlay at narrow widths. */
.article-page .inner-content > .prose { max-width: 760px; margin-inline: auto; }
@media (min-width: 1400px) {
  .post-toc { --toc-panel-width: min(260px, calc((100vw - 1056px) / 2 - 32px)); }
  .post-toc-list { box-shadow: none; }
}
@media (max-width: 1200px) {
  .inner-page { padding-right: 72px; }
}
@media (max-width: 760px) {
  .inner-page { padding-right: 56px; }
  .post-toc { top: 116px; right: 12px; max-height: calc(100svh - 160px); }
  .post-toc-ticks, .post-toc-list { max-height: calc(100svh - 160px); }
  .post-toc-tick { min-height: 24px; }
  .post-toc-list a { min-height: 32px; padding-top: 9px; padding-bottom: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .post-toc-ticks, .post-toc-tick span, .post-toc-list { transition: none; }
}