/* Shared native scrollbars: keep scrolling, keyboard access and touch physics native. */
@media (forced-colors: none) {
  * {
    --cu-scrollbar-alpha: .28;
    --cu-scrollbar-thumb: rgb(98 98 104 / var(--cu-scrollbar-alpha));
    scrollbar-color: var(--cu-scrollbar-thumb) transparent !important;
    scrollbar-width: thin;
  }
  .cu-scrollbar-active { --cu-scrollbar-alpha: .7; }
  .cu-scrollbar-hover { --cu-scrollbar-alpha: .75; }

  /* Standard scrollbar properties override WebKit's arrow/track styling.
     Use the WebKit path where supported so the arrows can actually disappear. */
  @supports selector(::-webkit-scrollbar) {
    * { scrollbar-width: auto !important; scrollbar-color: auto !important; }
    *::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
    *::-webkit-scrollbar-button { display: none !important; width: 0 !important; height: 0 !important; }
    *::-webkit-scrollbar-track { background: transparent; margin: 6px; }
    *::-webkit-scrollbar-thumb {
      min-height: 28px;
      min-width: 28px;
      border: 2px solid transparent;
      border-radius: 999px;
      background-color: var(--cu-scrollbar-thumb);
      background-clip: padding-box;
    }
    *::-webkit-scrollbar-corner { background: transparent; }

    /* Keep the ends inside rounded popup surfaces, without clipping their tails. */
    :is(dialog, [role="dialog"], .audit-editor-popover, .journal-calendar-popover)::-webkit-scrollbar-track:vertical,
    :is(dialog, [role="dialog"], .audit-editor-popover, .journal-calendar-popover) *::-webkit-scrollbar-track:vertical {
      margin-block: 18px;
    }
    :is(dialog, [role="dialog"], .audit-editor-popover, .journal-calendar-popover)::-webkit-scrollbar-track:horizontal,
    :is(dialog, [role="dialog"], .audit-editor-popover, .journal-calendar-popover) *::-webkit-scrollbar-track:horizontal {
      margin-inline: 18px;
    }
  }
}