/* Sidebar width slider. Same rules as TabNook Reader
   (assets/css/reader.css .reader-sidebar-width), using USL theme tokens.
   A skin's muted text wins when that skin defines --skin-text-muted.
   The range accent follows the skin accent, then the site accent. */

.reader-sidebar-width {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -2px 2px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--skin-text-muted, var(--usl-muted, #94a3b8));
}

.reader-sidebar-width label {
  flex: 0 0 auto;
  margin: 0;
}

.reader-sidebar-width input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  margin: 0;
  accent-color: var(--skin-accent, var(--usl-accent, #d12d4a));
  cursor: pointer;
}

/* Skin cursors paint every input as an I-beam. This range stays a pointer. */
body[data-skin][data-skin-cursors="on"] .reader-sidebar-width input[type="range"] {
  cursor: pointer !important;
}

/* Hide when the list stacks. These follow the page breakpoints and beat the
   flex row above, including when this file loads after the page stylesheet. */
@media (max-width: 768px) {
  .reader-page .reader-sidebar-width { display: none; }
}
@media (max-width: 760px) {
  .news-side .reader-sidebar-width { display: none; }
}