/* The native page scrollbar is hidden only after the top control has initialized. */
html.has-page-scroll { scrollbar-width: none; scrollbar-gutter: auto; }
html.has-page-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.page-scroll {
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  height: 4px;
  background: rgba(106, 167, 183, .18);
}
.page-scroll-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #348bc6, #68d5d7);
  transform: scaleX(0);
  transform-origin: left center;
  transition: none;
  pointer-events: none;
}
.page-scroll input {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
.page-scroll:focus-within { height: 6px; outline: 2px solid #68d5d7; outline-offset: 2px; }
@media (hover: hover) {
  .page-scroll:hover { height: 6px; }
}
@media (max-width: 700px) {
  .page-scroll input { height: 10px; }
}
/* Retain the familiar system control in high-contrast mode. Dialog scrollbars are untouched. */
@media (forced-colors: active) {
  html.has-page-scroll { scrollbar-width: auto; scrollbar-gutter: stable; }
  html.has-page-scroll::-webkit-scrollbar { display: block; width: 14px; height: 14px; }
  .page-scroll { display: none; }
}