/* The kit's scrollbar on a desktop (a fine pointer that hovers), after Fluid Functionalism's scrollbars
   (https://www.fluidfunctionalism.com/docs/scrollbars and its craft notes; owner, 15 November 2026: "Study this
   for scrolling"). A 10 px track with no fill, kept as the hit target; the thumb rests 4 px wide at 8% of the ink,
   2 px off the edge, widens to 6 px at 12% under the pointer, 16% while dragged. Touch screens keep the system's own.

   Every kit scroller says `scrollbar-width="thin"`, which the Mac host reads (AppKit's small overlay scroller).
   Chrome draws `::-webkit-scrollbar` only where `scrollbar-width` and `scrollbar-color` are `auto`, so where the
   browser has those pseudo-elements (Chrome, Edge, Safari) this file puts them back to `auto` over the inline
   `thin`; Firefox, which has none, takes the standard thin bar in the same colour.
   Exact has `scrollbar-width` and no scrollbar colour or pseudo-elements, so the web host links this file from
   app.json's host.web.head. */
@media (hover: hover) and (pointer: fine) {
  @supports selector(::-webkit-scrollbar) {
    * {
      scrollbar-width: auto !important;
      scrollbar-color: auto !important;
    }
  }
  @supports not selector(::-webkit-scrollbar) {
    * {
      scrollbar-width: thin;
      scrollbar-color: light-dark(rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.08)) transparent;
    }
  }
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background: transparent;
  }
  ::-webkit-scrollbar-corner,
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-button {
    display: none;
  }
  ::-webkit-scrollbar-thumb {
    background-color: light-dark(rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.08));
    background-clip: content-box;
    border: 0 solid transparent;
    border-radius: 9999px;
  }
  /* 4 px wide, 2 px off the far edge: 4 + 4 + 2 = 10 */
  ::-webkit-scrollbar-thumb:vertical {
    border-left-width: 4px;
    border-right-width: 2px;
    min-height: 32px;
  }
  ::-webkit-scrollbar-thumb:horizontal {
    border-top-width: 4px;
    border-bottom-width: 2px;
    min-width: 32px;
  }
  /* under the pointer: 6 px and 12% */
  ::-webkit-scrollbar-thumb:hover {
    background-color: light-dark(rgb(0 0 0 / 0.12), rgb(255 255 255 / 0.12));
  }
  ::-webkit-scrollbar-thumb:vertical:hover {
    border-left-width: 2px;
  }
  ::-webkit-scrollbar-thumb:horizontal:hover {
    border-top-width: 2px;
  }
  /* dragged: 16% */
  ::-webkit-scrollbar-thumb:active {
    background-color: light-dark(rgb(0 0 0 / 0.16), rgb(255 255 255 / 0.16));
  }
}