/* Houd scrollbar-reservering gelijk aan /main. */
html {
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #555 #1f1f1f;
}

:root[data-theme="light"] {
  scrollbar-color: #aeb4bc #f5f5f5;
}

:root[data-theme="light"]::-webkit-scrollbar-track {
  background: #f5f5f5;
}

:root[data-theme="light"]::-webkit-scrollbar-thumb {
  background: #aeb4bc;
  border: 3px solid #f5f5f5;
  border-radius: 999px;
}

/* /main wordt op desktop door de historische body-zoom op 90% gerenderd.
   Gebruik hier exact dezelfde effectieve railmaten, zonder de ademtool zelf te schalen. */
@media (min-width: 761px) {
  body > .utility-rail {
    top: 52.2px !important;
    right: auto !important;
    bottom: 45px !important;
    left: 10.8px !important;
    width: 37.8px !important;
    min-width: 37.8px !important;
    max-width: 37.8px !important;
    height: auto !important;
    padding: 5.4px 2.7px !important;
    gap: 3.6px !important;
    border-radius: 10.8px !important;
    zoom: 1 !important;
  }

  body > .utility-rail > .rail-button {
    width: 30.6px !important;
    min-width: 30.6px !important;
    max-width: 30.6px !important;
    height: 30.6px !important;
    min-height: 30.6px !important;
    max-height: 30.6px !important;
    flex: 0 0 30.6px !important;
    border-radius: 7.2px !important;
  }

  body > .utility-rail .rail-icon {
    width: 16.2px !important;
    min-width: 16.2px !important;
    max-width: 16.2px !important;
    height: 16.2px !important;
    min-height: 16.2px !important;
    max-height: 16.2px !important;
    flex: 0 0 16.2px !important;
  }

  body > .utility-rail > .rail-separator {
    width: 21.6px !important;
    height: .9px !important;
    min-height: .9px !important;
    margin: 1.8px 0 !important;
    flex: 0 0 .9px !important;
  }
}