/* ==========================================================================
   Hide native browser scrollbar (custom scroll-progress sidebar replaces it)
   ========================================================================== */
html {
  scrollbar-width: none;    /* Firefox */
  -ms-overflow-style: none; /* IE/Edge legacy */
}

html::-webkit-scrollbar {
  display: none;            /* Chrome/Safari/Edge (Chromium) */
}

/* ==========================================================================
   Scroll Progress Sidebar
   Structure: .scroll-progress > (.scroll-progress__arrow, .scroll-progress__lines)
   - 21 lines total: 5 "long" landmark lines (28px) with 4 "short" lines (10px)
     in each gap. Widths are fixed and never change on scroll.
   - Lines already scrolled past are brightened (color-2); upcoming lines
     stay dim (color-3). This is the only thing that changes on scroll.
   - The arrow stays pinned to the vertical middle of the sidebar at all times.
   ========================================================================== */

.scroll-progress {
  position: fixed;
  top: 50%;
  right: 12px;
  height: 300px;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

.scroll-progress__arrow {
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid var(--theme-palette-color-2);
}

.scroll-progress__lines {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.scroll-progress__line {
  flex-shrink: 0;
  background-color: var(--theme-palette-color-1);
  transition: background-color 0.2s ease;
}

.scroll-progress__line.is-filled {
  background-color: var(--theme-palette-color-2);
}

.scroll-progress__line.is-long {
  width: 28px;
  height: 3px;
}

.scroll-progress__line.is-short {
  width: 10px;
  height: 2px;
}