/* Sidebar auto-collapse for research entries with data-nav="auto-collapse"
   or start-collapsed with data-nav="collapsed".
   No-op on every other page. Content track width follows --nav-w. */

html[data-nav="auto-collapse"],
html[data-nav="collapsed"] {
  --nav-rail: var(--nav-w-collapsed, 52px);
  --nav-auto-dur: 700ms;
  --nav-auto-ease: ease-in-out;
}

/* Fixed sidebar sits in the --nav-w band. Main is grid track 2. */
html[data-nav="auto-collapse"] .sidebar,
html[data-nav="collapsed"] .sidebar {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  height: auto;
  max-height: none;
  overflow: visible;
  overflow-x: visible;
  overflow-y: visible;
}

html[data-nav="auto-collapse"] .main,
html[data-nav="auto-collapse"] main,
html[data-nav="collapsed"] .main,
html[data-nav="collapsed"] main {
  margin-left: 0;
}

html[data-nav="auto-collapse"] .sidebar .wordmark,
html[data-nav="auto-collapse"] .sidebar .site-nav,
html[data-nav="auto-collapse"] .sidebar .sidebar-footer,
html[data-nav="auto-collapse"] .sidebar .nav-toggle,
html[data-nav="auto-collapse"] .sidebar .nav-subitems,
html[data-nav="collapsed"] .sidebar .wordmark,
html[data-nav="collapsed"] .sidebar .site-nav,
html[data-nav="collapsed"] .sidebar .sidebar-footer,
html[data-nav="collapsed"] .sidebar .nav-toggle,
html[data-nav="collapsed"] .sidebar .nav-subitems {
  transition:
    opacity 250ms var(--nav-auto-ease),
    transform var(--nav-auto-dur) var(--nav-auto-ease),
    visibility 0s linear 250ms;
}

html[data-nav="auto-collapse"].sidebar-collapsed .sidebar .wordmark,
html[data-nav="auto-collapse"].sidebar-collapsed .sidebar .site-nav,
html[data-nav="auto-collapse"].sidebar-collapsed .sidebar .sidebar-footer,
html[data-nav="auto-collapse"].sidebar-collapsed .sidebar .nav-toggle,
html[data-nav="auto-collapse"].sidebar-collapsed .sidebar .nav-subitems,
html[data-nav="auto-collapse"] .layout.collapsed .sidebar .wordmark,
html[data-nav="auto-collapse"] .layout.collapsed .sidebar .site-nav,
html[data-nav="auto-collapse"] .layout.collapsed .sidebar .sidebar-footer,
html[data-nav="auto-collapse"] .layout.collapsed .sidebar .nav-toggle,
html[data-nav="auto-collapse"] .layout.collapsed .sidebar .nav-subitems,
html[data-nav="collapsed"].sidebar-collapsed .sidebar .wordmark,
html[data-nav="collapsed"].sidebar-collapsed .sidebar .site-nav,
html[data-nav="collapsed"].sidebar-collapsed .sidebar .sidebar-footer,
html[data-nav="collapsed"].sidebar-collapsed .sidebar .nav-toggle,
html[data-nav="collapsed"].sidebar-collapsed .sidebar .nav-subitems,
html[data-nav="collapsed"] .layout.collapsed .sidebar .wordmark,
html[data-nav="collapsed"] .layout.collapsed .sidebar .site-nav,
html[data-nav="collapsed"] .layout.collapsed .sidebar .sidebar-footer,
html[data-nav="collapsed"] .layout.collapsed .sidebar .nav-toggle,
html[data-nav="collapsed"] .layout.collapsed .sidebar .nav-subitems {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-6px);
  transition:
    opacity 250ms var(--nav-auto-ease),
    transform var(--nav-auto-dur) var(--nav-auto-ease),
    visibility 0s linear 250ms;
}

html[data-nav="auto-collapse"] .sidebar,
html[data-nav="collapsed"] .sidebar {
  transition:
    width var(--nav-auto-dur) var(--nav-auto-ease),
    padding-left var(--nav-auto-dur) var(--nav-auto-ease),
    padding-right var(--nav-auto-dur) var(--nav-auto-ease);
}

html[data-nav="auto-collapse"].nav-auto-no-motion .sidebar,
html[data-nav="auto-collapse"].nav-auto-no-motion .sidebar .wordmark,
html[data-nav="auto-collapse"].nav-auto-no-motion .sidebar .site-nav,
html[data-nav="auto-collapse"].nav-auto-no-motion .sidebar .sidebar-footer,
html[data-nav="auto-collapse"].nav-auto-no-motion .sidebar .nav-toggle,
html[data-nav="auto-collapse"].nav-auto-no-motion .sidebar .nav-subitems,
html[data-nav="auto-collapse"].nav-auto-no-motion .sidebar-toggle svg,
html[data-nav="collapsed"].nav-auto-no-motion .sidebar,
html[data-nav="collapsed"].nav-auto-no-motion .sidebar .wordmark,
html[data-nav="collapsed"].nav-auto-no-motion .sidebar .site-nav,
html[data-nav="collapsed"].nav-auto-no-motion .sidebar .sidebar-footer,
html[data-nav="collapsed"].nav-auto-no-motion .sidebar .nav-toggle,
html[data-nav="collapsed"].nav-auto-no-motion .sidebar .nav-subitems,
html[data-nav="collapsed"].nav-auto-no-motion .sidebar-toggle svg {
  transition: none !important;
}

@media (max-width: 860px) {
  html[data-nav="auto-collapse"] .sidebar,
  html[data-nav="collapsed"] .sidebar {
    position: sticky;
    height: auto;
    overflow: visible;
  }
  html[data-nav="auto-collapse"] .main,
  html[data-nav="auto-collapse"] main,
  html[data-nav="collapsed"] .main,
  html[data-nav="collapsed"] main {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-nav="auto-collapse"],
  html[data-nav="collapsed"] {
    --nav-auto-dur: 0ms;
  }
}