/* Native scrollbars remain functional but invisible. A separate visual
   indicator outside the navigator reports the active collection's position,
   so browser gutters can never change authored list geometry. */
[data-ui-surface="navigator"],
[data-ui-surface="navigator"] * {
  scrollbar-width: none;
}

[data-ui-surface="navigator"]::-webkit-scrollbar,
[data-ui-surface="navigator"] *::-webkit-scrollbar {
  width: 0;
  height: 0;
}

[data-ui-surface="navigator"] .navigator-scroll-indicator {
  position: absolute;
  left: calc(100% + var(--arhix-scroll-indicator-gap));
  bottom: var(--arhix-space-edge);
  width: var(--arhix-scroll-indicator-width);
  height: var(--arhix-scroll-indicator-height);
  border-radius: var(--arhix-radius-pill);
  background: var(--arhix-surface-sunken);
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity var(--arhix-motion-quick) ease;
}

[data-ui-surface="navigator"]:hover .navigator-scroll-indicator:not([hidden]) {
  opacity: 1;
}

[data-ui-surface="navigator"] .navigator-scroll-indicator__thumb {
  position: absolute;
  top: var(
    --arhix-navigator-scroll-thumb-top,
    var(--arhix-scroll-indicator-inset)
  );
  left: var(--arhix-scroll-indicator-inset);
  width: var(--arhix-scroll-indicator-thumb-width);
  min-height: var(--arhix-scroll-indicator-thumb-min-height);
  height: var(
    --arhix-navigator-scroll-thumb-height,
    var(--arhix-scroll-indicator-thumb-min-height)
  );
  border-radius: var(--arhix-radius-pill);
  background: var(--arhix-ink-faint);
  transition: top var(--arhix-motion-instant) linear;
}