/* Pryzenta sliders (page-scrollbars.js), shared by the app and the landing page. Native browser scrollbars are never
   shown; each page's stylesheet gives its scroll areas an invisible strip for the sliders to sit in. */
/* Pryzenta owns scrollbar presentation on every screen; native controls stay hidden. */
html,
body,
* {
  scrollbar-width: none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
}


/* One slider colour on every screen (app and landing), a little more solid than the frame lines so it shows on the grey
   dashboard too. */
:root {
  --page-scroll-thumb-color: #c8cdd3;
}

html[data-display-mode="dark"] {
  --page-scroll-thumb-color: #60676c;
}

/* Slider space (initializeScrollStrips in page-scrollbars.js): a 10px transparent edge on a side that scrolls, so the
   slider sits beside the content; the area's frame line is redrawn as an outline so it keeps all four sides. */
@media (min-width: 721px) and (pointer: fine) {
  [data-scroll-strips] {
    outline: var(--scroll-strip-frame, none);
    outline-offset: calc(-1 * var(--scroll-strip-frame-width, 0px));
  }

  [data-scroll-strips~="x"] {
    border-bottom: 10px solid transparent !important;
  }

  /* Beside a fixed header row the strip carries the row's colour and line (set by initializeScrollStrips). */
  [data-scroll-strips~="y"] {
    background-image: var(--scroll-strip-head, none);
    background-origin: border-box;
    background-position: var(--scroll-strip-head-side, right top);
    background-repeat: no-repeat;
    background-size: var(--scroll-strip-head-size, 0 0);
    border-inline-end: 10px solid transparent !important;
  }
}

.page-vertical-scrollbar {
  height: var(--page-scroll-track-height, 0);
  left: var(--page-scroll-track-left, 0);
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  top: var(--page-scroll-track-top, 0);
  transition: opacity 120ms ease;
  width: 10px;
  z-index: 39990;
}

.page-vertical-scrollbar.has-overflow {
  opacity: 1;
  pointer-events: auto;
}

/* An open dropdown owns the slider (pryzenta:dropdown-opened); the slider then sits above that menu, including the top
   bar menus (notifications at 39995), instead of being hidden underneath it. */
.page-vertical-scrollbar.dropdown-scroll-owner {
  z-index: 39996;
}

/* An open Export menu sits inside its window, under the slider: the slider steps aside while it is open. */
.page-vertical-scrollbar.dropdown-scroll-releasing,
html:has(.result-export-select[aria-expanded="true"]) .page-vertical-scrollbar {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: none;
}

.page-vertical-scrollbar > span,
.page-vertical-scrollbar > span:hover,
.page-vertical-scrollbar > span:active {
  appearance: none;
  background: transparent;
  border: 0 !important;
  border-radius: 999px;
  box-shadow: none !important;
  cursor: default;
  display: block;
  height: var(--page-scroll-thumb-height, 0);
  max-width: 10px !important;
  min-width: 10px !important;
  outline: 0 !important;
  /* Reachable only while its slider shows: a hidden handle must never catch the mouse (it would show the arrow
     cursor over whatever lies underneath). */
  pointer-events: inherit;
  position: absolute;
  right: 0;
  top: 0;
  touch-action: none;
  transform: translateY(var(--page-scroll-thumb-top, 0));
  user-select: none;
  width: 10px !important;
}

.page-vertical-scrollbar > span::before {
  background: var(--page-scroll-thumb-color);
  border-radius: 999px;
  content: "";
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 6px;
}

@media (max-width: 720px), (pointer: coarse) {
  .page-vertical-scrollbar {
    display: none !important;
  }
}

.page-horizontal-scrollbar {
  height: 10px;
  left: var(--page-horizontal-track-left, 0);
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  top: var(--page-horizontal-track-top, 0);
  transition: opacity 120ms ease;
  width: var(--page-horizontal-track-width, 0);
  z-index: 39991;
}

.page-horizontal-scrollbar.has-overflow {
  opacity: 1;
  pointer-events: auto;
}

.page-horizontal-scrollbar > span,
.page-horizontal-scrollbar > span:hover,
.page-horizontal-scrollbar > span:active,
.page-horizontal-scrollbar > span:focus,
.page-horizontal-scrollbar > span:focus-visible {
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  background: transparent;
  border: 0 !important;
  border-radius: 999px;
  bottom: 0;
  box-shadow: none !important;
  cursor: default;
  display: block;
  height: 10px !important;
  max-height: 10px !important;
  min-height: 10px !important;
  outline: 0 !important;
  /* Reachable only while its slider shows: a hidden handle must never catch the mouse (it would show the arrow
     cursor over whatever lies underneath). */
  pointer-events: inherit;
  position: absolute;
  touch-action: none;
  transform: translateX(var(--page-horizontal-thumb-left, 0));
  user-select: none;
  width: var(--page-horizontal-thumb-width, 0);
}

.page-horizontal-scrollbar > span::before,
.page-horizontal-scrollbar > span:hover::before,
.page-horizontal-scrollbar > span:active::before,
.page-horizontal-scrollbar > span:focus::before,
.page-horizontal-scrollbar > span:focus-visible::before {
  background: var(--page-scroll-thumb-color);
  border-radius: 999px;
  bottom: 0;
  box-shadow: none !important;
  content: "";
  filter: none !important;
  height: 6px !important;
  left: 0;
  max-height: 6px !important;
  min-height: 6px !important;
  position: absolute;
  transform: none !important;
  width: 100%;
}

@media (max-width: 720px), (pointer: coarse) {
  .page-horizontal-scrollbar {
    display: none !important;
  }
}