/* Native scrollbars follow this site's palette; scrolling remains browser-owned. */
:root {
  --site-scroll-thumb: var(--red);
  --site-scroll-track: var(--mint);
  --site-scroll-hover: #bd1009;
  --site-scroll-active: var(--ink);
}

/* Standard implementation for engines without the WebKit pseudo-elements. */
@supports not selector(::-webkit-scrollbar) {
  html:root, body, dialog, .work-order, .inquiry-dialog {
    scrollbar-color: var(--site-scroll-thumb) var(--site-scroll-track);
  }
}

/* Chrome / Edge / Safari: keep thumb hover and pressed states. */
@supports selector(::-webkit-scrollbar) {
  html:root, html:root body, html:root dialog,
  html:root .work-order, html:root .inquiry-dialog {
    scrollbar-color: auto;
    scrollbar-width: auto;
  }
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: var(--site-scroll-track); }
  ::-webkit-scrollbar-thumb {
    background: var(--site-scroll-thumb);
    border: 2px solid var(--site-scroll-track);
    border-radius: 6px;
    min-height: 44px;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--site-scroll-hover); }
  ::-webkit-scrollbar-thumb:active { background: var(--site-scroll-active); }
}

/* Firefox may recognize legacy selectors without applying them to every site. */
@supports (-moz-appearance: none) {
  html:root, html:root body, html:root dialog,
  html:root .work-order, html:root .inquiry-dialog {
    scrollbar-color: var(--site-scroll-thumb) var(--site-scroll-track);
    scrollbar-width: auto;
  }
}

/* Let the user's high-contrast palette own the control. */
@media (forced-colors: active) {
  html:root, html:root body, html:root dialog,
  html:root .work-order, html:root .inquiry-dialog { scrollbar-color: auto; }
  ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner,
  ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:hover,
  ::-webkit-scrollbar-thumb:active { all: revert; }
}