/* Shared by the public site and admin. Keep native mouse, keyboard and touch scrolling. */
:root {
  --zl-scrollbar-thumb: #6676a6;
  --zl-scrollbar-track: #151e2c;
  --zl-scrollbar-border: #344159;
  --zl-scrollbar-focus: #94a3ff;
  --zl-scrollbar-width: auto;
  --zl-scrollbar-radius: 8px;
  --zl-scrollbar-size: 15px;
  --zl-scrollbar-end-gap: 8px;
  --zl-scroll-bottom: 8px;
  --zl-scrollbar-side-gap: 12px;
}
:root, :root body, :root body * {
  scrollbar-color: var(--zl-scrollbar-thumb) var(--zl-scrollbar-track);
  scrollbar-width: var(--zl-scrollbar-width);
}
/* Inner surfaces share rounded tracks in both directions. The document keeps
   its native edge scrollbar. Standard scrollbar-color above is the fallback. */
@supports selector(::-webkit-scrollbar) {
  :root body * { scrollbar-color: auto; }
  :root body *::-webkit-scrollbar {
    width: var(--zl-scrollbar-size);
    height: var(--zl-scrollbar-size);
    background: transparent;
  }
  :root body *::-webkit-scrollbar-track {
    background: transparent;
    border-radius: var(--zl-scrollbar-radius);
    margin: var(--zl-scrollbar-end-gap);
  }
  :root body *::-webkit-scrollbar-thumb {
    background: var(--zl-scrollbar-thumb);
    border: 4px solid transparent;
    background-clip: padding-box;
    border-radius: var(--zl-scrollbar-radius);
  }
  :root body *::-webkit-scrollbar-corner { background: transparent; }
}
zl-scroll-area { display: block; min-width: 0; }
zl-scroll-area:not([dock]) { overflow: auto; }
zl-scroll-area[dock="bottom"] { position: relative; }
zl-scroll-area[dock="bottom"] > [data-scroll-header] {
  position: sticky;
  top: var(--zl-scroll-header-top, 0px);
  z-index: 3;
  overflow: hidden;
  background: var(--zl-scroll-header-background, #090f17);
  box-shadow: 0 1px 0 var(--zl-scrollbar-border);
}
zl-scroll-area[dock="bottom"] > [data-scroll-viewport] {
  overflow-x: auto;
  scrollbar-width: none;
}
zl-scroll-area[dock="bottom"] > [data-scroll-viewport]::-webkit-scrollbar { display: none; }
zl-scroll-area > .zl-scrollbar {
  margin-inline: var(--zl-scrollbar-side-gap);
  position: sticky;
  bottom: var(--zl-scroll-bottom, 0px);
  z-index: 4;
  box-sizing: border-box;
  height: calc(var(--zl-scrollbar-size) + 2px);
  overflow-x: scroll;
  overflow-y: hidden;
  background: var(--zl-scrollbar-track);
  border-block: 1px solid var(--zl-scrollbar-border);
  border-radius: var(--zl-scrollbar-radius);
  clip-path: inset(0 round var(--zl-scrollbar-radius));
}
zl-scroll-area > .zl-scrollbar[hidden] { display: none; }
zl-scroll-area > .zl-scrollbar > div { height: 1px; }
zl-scroll-area > [data-scroll-viewport]:focus-visible,
zl-scroll-area > .zl-scrollbar:focus-visible {
  outline: 2px solid var(--zl-scrollbar-focus);
  outline-offset: -2px;
}