/* Section navigation: a rail left of the 800px column on wide screens, a drawer otherwise. */
.sb { font-size: .875rem; line-height: 1.4; }
.sb-title { margin: 0 0 .6rem; font-size: .8rem; font-weight: 600; color: var(--global-text-color-light); }
.sb-list { list-style: none; margin: 0; padding: 0; }
.sb-list .sb-list { margin: .15rem 0 .35rem .85rem; padding-left: .6rem; border-left: 1px solid var(--global-divider-color); }
.sb-list li { margin: 0; }
.sb a {
  display: block; padding: .3rem .55rem; border-radius: 6px;
  color: var(--global-text-color-light); text-decoration: none;
}
.sb-depth-1 a { font-size: .82rem; padding: .22rem .5rem; }
.sb a:hover { color: var(--global-text-color); background: var(--global-code-bg-color); text-decoration: none; }
.sb a[aria-current="true"] { color: var(--global-theme-color); background: var(--global-code-bg-color); font-weight: 600; }
.sb .katex { font-size: 1em; }

/* Wide screens: fixed in the margin left of the column. */
.sb.sb-rail {
  position: fixed; top: 85px; left: max(16px, calc(50% - 400px - 250px)); width: 220px;
  max-height: calc(100vh - 110px); overflow-y: auto; overscroll-behavior: contain;
  padding: .25rem .25rem 1rem 0; z-index: 50; scrollbar-width: thin;
}

/* Narrow screens (or layouts without room): a drawer that slides in from the left. */
.sb.sb-drawer {
  position: fixed; top: 57px; bottom: 0; left: 0; z-index: 120; width: min(320px, 86vw);
  padding: 1.1rem 1rem 2rem; overflow-y: auto; overscroll-behavior: contain;
  background: var(--global-bg-color); border-right: 1px solid var(--global-divider-color);
  box-shadow: 8px 0 30px rgba(0, 0, 0, .12);
  transform: translateX(-104%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s;
}
.sb.sb-drawer.open { transform: none; visibility: visible; transition: transform .25s ease; }
.sb-backdrop { position: fixed; inset: 57px 0 0 0; z-index: 110; background: rgba(15, 13, 26, .35); opacity: 0; pointer-events: none; transition: opacity .25s; }
.sb-backdrop.open { opacity: 1; pointer-events: auto; }

.sb-toggle {
  position: fixed; right: 16px; bottom: 16px; z-index: 105;
  display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .9rem;
  font: 600 .875rem var(--site-font); color: var(--global-text-color);
  background: var(--global-card-bg-color); border: 1px solid var(--global-divider-color); border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12); cursor: pointer;
}
.sb-toggle svg { width: 1rem; height: 1rem; }
.sb-toggle:hover { color: var(--global-theme-color); }
.sb-toggle[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sb.sb-drawer, .sb-backdrop { transition: none; }
}