/*
 * BJC book — the docked unit sidebar and the margin "On this page" TOC.
 *
 * The sidebar's markup comes from toc.js (built by config.ts's sidebarItem):
 * <nav id="bjc-sidebar" class="sidebar sidebar-navigation docked …">
 * holding one <ul class="list-unstyled"> per unit of <li class="sidebar-item">
 * rows — a lab with pages is a .sidebar-item-section whose
 * .sidebar-item-container has the link plus a chevron toggle, over a nested
 * <ul class="collapse sidebar-section">. toc.js marks the current page's
 * link and container .active and collapses the other labs' sections.
 *
 * On desktop the sidebar is a sticky column; below 992px it is a drawer
 * that book/js/nav.js slides in from the left (collapse-horizontal) over a
 * dimming glass, opened from the secondary nav's toggle.
 */

/* -- the sidebar column ---------------------------------------------------- */

.sidebar {
  position: sticky;
  overflow-y: auto;
  max-height: 100vh;
  padding-top: 1.2em;
}

#bjc-sidebar {
  background-color: var(--bjc-body-bg);
  transition: width 0.15s ease-in;
}

/* The divider between the sidebar and the content, running the full
   height of the page (the sidebar spans both grid rows). */
.sidebar.sidebar-navigation {
  padding-left: 20px;
  border-right: 1px solid var(--bjc-sidebar-border);
}

.sidebar.sidebar-navigation > * {
  padding-top: 1em;
}

#bjc-sidebar > * {
  padding-right: 1em;
}

@media (min-width: 992px) {
  #bjc-sidebar {
    display: flex;
    flex-direction: column;
  }

  .sidebar.sidebar-navigation {
    display: block;
    position: sticky;
    /* Pinned under the sticky header (Quarto's JS used to set this). */
    top: var(--bjc-navbar-height);
    max-height: calc(100vh - var(--bjc-navbar-height));
  }

  .sidebar-navigation .sidebar-item {
    font-size: 0.925rem;
  }

  .sidebar-navigation .sidebar-section .sidebar-item {
    font-size: 0.875rem;
  }
}

/* -- items ----------------------------------------------------------------- */

.sidebar-navigation a {
  color: inherit;
}

.sidebar-navigation li a {
  text-decoration: none;
}

.sidebar-item {
  margin-top: 0.4rem;
  margin-bottom: 0.2em;
  line-height: 1rem;
}

.sidebar-section {
  padding-left: 0.5em;
  padding-bottom: 0.2em;
}

.sidebar-item .sidebar-item-container {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.sidebar-item-text {
  width: 100%;
}

div.sidebar-item-container {
  color: var(--bjc-sidebar-color);
}

div.sidebar-item-container:hover,
div.sidebar-item-container:focus {
  color: var(--bjc-sidebar-hover);
}

div.sidebar-item-container .active {
  color: var(--bjc-sidebar-active);
}

/* the section chevron: points right when collapsed, down when open */

.sidebar-item-toggle:hover {
  cursor: pointer;
}

.sidebar-item .sidebar-item-toggle .bi {
  font-size: 0.7rem;
  text-align: center;
}

.sidebar-section .bi-chevron-right {
  vertical-align: middle;
}

.sidebar-item .sidebar-item-toggle .bi-chevron-right::before {
  transition: transform 200ms ease;
}

.sidebar-item .sidebar-item-toggle[aria-expanded="false"] .bi-chevron-right::before {
  transform: none;
}

.sidebar-item .sidebar-item-toggle[aria-expanded="true"] .bi-chevron-right::before {
  transform: rotate(90deg);
}

/* -- the mobile drawer (below 992px) --------------------------------------- */

@media (max-width: 991.98px) {
  .sidebar.sidebar-navigation {
    position: static;
    min-height: 100%;
    border-bottom: 1px solid var(--bjc-border);
  }

  /* Open (or animating): a fixed panel down the left edge, over the page
     and the header. Shrink-to-fit width — the menu's nowrap text sets it. */
  .sidebar.sidebar-navigation.show,
  .sidebar.sidebar-navigation.collapsing {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
  }

  /* Above the header (1030) and the glass (1000); id-qualified to outrank
     layout.css's z-index: 1 on the docked column. */
  #bjc-page.page-columns #bjc-sidebar.show,
  #bjc-page.page-columns #bjc-sidebar.collapsing {
    z-index: 1055;
  }

  #bjc-sidebar.show {
    transition: width 0.15s ease-out;
  }

  #bjc-sidebar .sidebar-menu-container {
    min-width: 225px;
    white-space: nowrap;
  }

  .sidebar-navigation,
  .sidebar-navigation .sidebar-item a {
    font-size: 1rem;
  }

  /* The dimmer behind the drawer; clicking it closes the drawer
     (the glass carries the same data-collapse as the toggle). */
  #bjc-sidebar-glass {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-color: transparent;
    transition: background-color 0.15s ease-in;
  }

  #bjc-sidebar-glass.collapsing {
    z-index: 1000;
  }

  #bjc-sidebar-glass.show {
    z-index: 1000;
    background-color: var(--bjc-glass);
    transition: background-color 0.15s ease-out;
  }
}

@media (min-width: 992px) {
  #bjc-sidebar-glass {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .sidebar-menu-container {
    padding-bottom: 5em;
  }
}

/* -- the margin "On this page" TOC ----------------------------------------- */

/* Built client-side by the chrome's inline script from the page's h2s
   (and h3.bjc-toc) into <nav id="TOC" role="doc-toc">. */
.sidebar.margin-sidebar {
  top: 0;
  padding-top: 1em;
}

nav[role="doc-toc"] {
  z-index: 1020;
}

.sidebar nav[role="doc-toc"] a {
  text-decoration: none;
}

.sidebar nav[role="doc-toc"] > h2 {
  margin-top: 0.3rem;
  margin-bottom: 0.2rem;
  padding-top: 0;
  padding-bottom: 0;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  border-bottom: 0;
}

.sidebar nav[role="doc-toc"] ul {
  padding-left: 0;
  list-style: none;
}

.sidebar nav[role="doc-toc"] > ul {
  margin-left: 0.45em;
  font-size: 0.875rem;
}

.sidebar nav[role="doc-toc"] > ul a {
  padding-left: 0.6rem;
  border-left: 1px solid var(--bjc-toc-rule);
}

.sidebar nav[role="doc-toc"] > ul li a {
  display: block;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  line-height: 1.1rem;
  color: inherit;
}

.sidebar nav[role="doc-toc"] ul > li > ul > li > a {
  padding-left: 1.2em;
}

.sidebar nav[role="doc-toc"] ul > li > a.active,
.sidebar nav[role="doc-toc"] ul > li > ul > li > a.active {
  color: var(--bjc-toc-active);
  border-left: 1px solid var(--bjc-toc-active);
}

.sidebar nav[role="doc-toc"] ul > li > a:hover,
.sidebar nav[role="doc-toc"] ul > li > ul > li > a:hover {
  color: var(--bjc-toc-active);
}