/* Scroll slider (scroll-slider.js). Site tokens only, so light and dark follow the theme. */
.ss { display: flex; justify-content: center; padding: 6px 0 0; }
.ss[hidden] { display: none; }
.ss-track {
  display: flex; align-items: center; width: min(180px, 100%); height: 20px; border-radius: 999px;
  cursor: pointer; touch-action: none; user-select: none;
  background: linear-gradient(var(--line), var(--line)) center / 100% 5px no-repeat;
}
.ss-track:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.ss-thumb {
  flex: none; height: 5px; border-radius: 999px; cursor: grab;
  background: linear-gradient(90deg, var(--shape-lime), var(--shape-lilac));
  transition: height .12s;
}
.ss-track:hover .ss-thumb, .ss-track[data-dragging] .ss-thumb { height: 10px; }
.ss-track[data-dragging], .ss-track[data-dragging] .ss-thumb { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { .ss-thumb { transition: none !important; } }

/* Vertical: the bar stands on its side. On the page it is fixed at the right edge. */
.ss-y { padding: 0; }
.ss-y .ss-track {
  flex-direction: column; justify-content: flex-start; width: 20px; height: min(180px, 100%);
  background: linear-gradient(var(--line), var(--line)) center / 5px 100% no-repeat;
}
.ss-y .ss-thumb { width: 5px; background: linear-gradient(180deg, var(--shape-lime), var(--shape-lilac)); transition: width .12s; }
.ss-y .ss-track:hover .ss-thumb, .ss-y .ss-track[data-dragging] .ss-thumb { width: 10px; height: 28px; }
.ss-page { position: fixed; right: 6px; top: 50%; z-index: 90; transform: translateY(-50%); }
.ss-page .ss-track { height: min(180px, 50vh); }
/* The page's own scrollbar gives way to the slider; phones keep theirs. */
html.ss-on { scrollbar-width: none; }
html.ss-on::-webkit-scrollbar { display: none; }
@media (hover: none), (pointer: coarse) {
  .ss-page { display: none; }
  html.ss-on { scrollbar-width: auto; }
  html.ss-on::-webkit-scrollbar { display: initial; }
}

/* On the home page the journal rail sits in the right-hand grid column; keep the slider under it. */
.journal-section > .ss { grid-column: 2; }
@media (max-width: 760px) { .journal-section > .ss { grid-column: auto; } }