/* Innehållsförteckning (prickar till höger) */

.devnote{ padding: 40px 24px 60px; text-align: center; font-size: 13px; color: var(--ink-soft); position: relative; z-index: 10; background: var(--bg); }



.toc{
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.toc.visible{ opacity: 1; pointer-events: auto; }
.toc-items{ display: flex; flex-direction: column; gap: 26px; position: relative; width: 170px; }
.toc-line{ position: absolute; right: 4px; top: 4px; bottom: 4px; width: 1px; background: var(--border); }
.toc-fill{ position: absolute; right: 4px; top: 4px; width: 1px; height: 0%; background: var(--orange); transition: height .1s linear; }
.toc-item{ display: flex; align-items: center; justify-content: flex-end; gap: 10px; position: relative; }
.toc-dot{
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--ink-soft);
  background: var(--bg);
  transition: all .25s ease;
  flex-shrink: 0;
}
.toc-label{
  font-size: 12px;
  color: var(--ink-soft);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .2s ease, transform .2s ease, color .2s ease;
  white-space: nowrap;
}
.toc-item.active .toc-dot{ background: var(--orange); border-color: var(--orange); transform: scale(1.35); }
.toc-item.active .toc-label{ opacity: 1; transform: translateX(0); color: var(--ink); font-weight: 500; }
.toc-item.passed .toc-dot{ background: var(--taupe); border-color: var(--taupe); }

body.on-dark-section .toc-line{ background: rgba(255,255,255,.3); }
body.on-dark-section .toc-dot{ border-color: rgba(255,255,255,.65); background: transparent; }
body.on-dark-section .toc-item.passed .toc-dot{ background: rgba(255,255,255,.55); border-color: rgba(255,255,255,.55); }
body.on-dark-section .toc-label{ color: rgba(255,255,255,.75); }
body.on-dark-section .toc-item.active .toc-label{ color: #fff; }
body.on-dark-arrow .arrow-animate text{ fill: #fff; }

@media (prefers-reduced-motion: reduce){
  .fleck-far, .fleck-micro, .arrow-animate, .bouncing-arrow svg, .easter-egg{ animation: none !important; }
  .quote-bubble{ transition: none !important; opacity: var(--tier-opacity, 1) !important; transform: scale(1) !important; }
}

/* Kapitelnavigeringen är klickbar */
button.toc-item{
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: right;
}
.toc-item:hover .toc-label,
.toc-item:focus-visible .toc-label{ opacity: 1; transform: translateX(0); color: var(--ink); }
.toc-item:hover .toc-dot{ transform: scale(1.35); border-color: var(--orange); }
.toc-item:focus-visible{ outline: none; }
.toc-item:focus-visible .toc-dot{ box-shadow: 0 0 0 3px rgba(255,108,44,.35); }
body.on-dark-section .toc-item:hover .toc-label{ color: #fff; }