/* Scrollbars — treated as a hairline, not a control.
   The system's depth language is tint, so a scrollbar is a tinted rail with a
   tinted thumb: no border, no shadow, no indigo (indigo means "act on this",
   and a scrollbar is not an action). The thumb sits one step quieter than body
   text at rest and rises on hover, the same rest/hover pairing the sidebars use.
   Corner radius is fully round so a 8px thumb reads as a capsule. */
:root{
  --scrollbar-size:10px;
  --scrollbar-size-thin:6px;
  --scrollbar-track:transparent;
  --scrollbar-track-inset:var(--surface-band);
  --scrollbar-thumb:#c2d0e2;
  --scrollbar-thumb-hover:var(--color-smoke);
  --scrollbar-thumb-active:var(--color-steel);
  --scrollbar-thumb-radius:var(--radius-round);
  /* Breathing room around the thumb so it never touches the content edge.
     Applied as a transparent border, which is the only way webkit allows it. */
  --scrollbar-thumb-inset:2px;
}
:root[data-theme="dark"]{
  --scrollbar-track-inset:#0b2440;
  --scrollbar-thumb:#274664;
  --scrollbar-thumb-hover:#3d6288;
  --scrollbar-thumb-active:#5b81a8;
}

/* Firefox / standards path ONLY.
   scrollbar-width / scrollbar-color are INHERITED, and in Chromium a non-auto
   value on an element switches that element and all its descendants to the
   standard scrollbar renderer, which makes every ::-webkit-scrollbar rule below
   inert (native arrows, square thumb, 15px gutter). So the standard properties
   are gated to engines that have no webkit pseudo-elements at all. */
@supports not selector(::-webkit-scrollbar-thumb){
  html{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}
  .scroll-thin,.scroll-inset{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}
  .scroll-inset{scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track-inset)}
}

/* WebKit — both axes share one rule set; the corner stays invisible. */
::-webkit-scrollbar{width:var(--scrollbar-size);height:var(--scrollbar-size)}
::-webkit-scrollbar-track{background:var(--scrollbar-track)}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:var(--scrollbar-thumb-radius);border:var(--scrollbar-thumb-inset) solid transparent;background-clip:padding-box;transition:background-color var(--dur-state) var(--ease-plain)}
::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover);background-clip:padding-box}
::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}

/* .scroll-thin — inner panels, code blocks, table bodies, drawer content.
   6px, so the rail costs almost nothing inside an already-framed region. */
.scroll-thin::-webkit-scrollbar{width:var(--scrollbar-size-thin);height:var(--scrollbar-size-thin)}
.scroll-thin::-webkit-scrollbar-thumb{border-width:1px}

/* .scroll-inset — for regions where the rail needs to be locatable when idle
   (long ledgers, sidebars): the track carries the band tint. */
.scroll-inset::-webkit-scrollbar-track{background:var(--scrollbar-track-inset)}

/* .scroll-hidden — the standard property is safe here: nothing is being drawn,
   so there is no webkit styling for it to cancel. */
/* .scroll-hidden — rail removed, scrolling kept. Only for surfaces with their
   own affordance (carousels with arrows, chip rows that visibly overflow). */
.scroll-hidden{scrollbar-width:none;-ms-overflow-style:none}
.scroll-hidden::-webkit-scrollbar{width:0;height:0}