/* Overlay only: never reserve a gutter or move the cafe row/chevron inward. */
.directory-index-root { --directory-index-badge-width: 52px; }
.directory-index-root.directory-index-distance { --directory-index-badge-width: 62px; }
.directory-scroll-indicator-host {
  position: sticky;
  top: 0;
  z-index: 8;
  height: 0;
  pointer-events: none;
}
.directory-scroll-rail {
  position:absolute;
  inset-inline-end:0;
  width:18px;
  pointer-events:auto;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  cursor:ns-resize;
  outline:none;
}
.directory-scroll-rail::before {
  content:'';
  position:absolute;
  inset:0 2px;
  margin-inline-start:auto;
  width:3px;
  border-radius:3px;
  background:#dcdce299;
}
.directory-scroll-indicator {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 6px;
  min-width:32px;
  width:max-content;
  max-width:var(--directory-index-badge-width);
  min-height:44px;
  cursor:ns-resize;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  pointer-events:auto;
}
.directory-scroll-label {
  flex-shrink:0;
  max-width: var(--directory-index-badge-width);
  box-sizing: border-box;
  padding: 5px 6px;
  border: 1px solid #dcdce2;
  border-radius: 9px;
  background: #fafafcf5;
  box-shadow: 0 2px 9px #1c1c1e12;
  color: #50525a;
  font: 700 9px/1.25 -apple-system, BlinkMacSystemFont, 'PingFang HK', sans-serif;
  overflow-wrap: anywhere;
  text-align: center;
  pointer-events:none;
}
.directory-index-district { --directory-index-badge-width:140px; }
.directory-scroll-rail:focus-visible .directory-scroll-label { outline:2px solid #207757;outline-offset:2px; }
.directory-scroll-rail:focus-visible { outline:none; }
.directory-scroll-rail.is-dragging .directory-scroll-label { background:#e5f2ec;color:#207757;border-color:#207757; }
@media (forced-colors: active) {
  .directory-scroll-label { background: Canvas; color: CanvasText; border-color: CanvasText; }
}