/*
 * ToC / navigation sidebar fixes.
 *
 * Defect 1 (desktop/laptop): Material already computes a JS inline height
 * on `.md-sidebar__scrollwrap` (both the primary left nav and the secondary
 * right-hand ToC) so the box *can* scroll internally. The actual bug is a
 * scroll-chaining leak: wheel input over a long nav bleeds into the page's
 * own scroll once the sticky sidebar's position is recalculated mid-gesture,
 * so the last entries are practically unreachable by mouse wheel even though
 * the scrollbar itself works. Measured via Playwright: without
 * `overscroll-behavior: contain`, 20 wheel ticks over the ToC moved
 * `window.scrollY` by 600px and the ToC's own `scrollTop` by only 105px; with
 * it, the same gesture moved the ToC to its max scrollTop and left
 * `window.scrollY` untouched. `max-height` is a pure-CSS fallback for when the
 * JS inline height hasn't run yet (no-js, or a render race) so the box is
 * never solely dependent on script for its bound.
 *
 * Defect 2 (mobile/tablet, <60em): Material only hides the secondary ToC
 * below the same breakpoint at which the right-hand column has room
 * (`.md-sidebar--secondary` is `display:none` by default and only flips to
 * `display:block` at `min-width:60em`) — `toc.integrate` is intentionally
 * off, so nothing folds the ToC into the drawer. `toc-mobile.js` builds a
 * collapsible "On this page" disclosure by cloning Material's own
 * `.md-nav--secondary` markup (so link targets, hierarchy, and existing
 * Material styling all come for free); the rules below only lay out the
 * disclosure shell and are scoped to hide it once the real ToC takes over.
 *
 * Both fixes are scoped away from landing pages, which already hide both
 * sidebars entirely via `body:has(.sm-landing)` in landing.css — nothing
 * here touches `display`, so it cannot resurrect a hidden sidebar there.
 */

.md-sidebar__scrollwrap {
  overscroll-behavior: contain;
  max-height: calc(100vh - 6rem);
}

/* --- Mobile/tablet "On this page" disclosure --- */

/*
 * The disclosure lives inside `.md-typeset`, whose own
 * `.md-typeset details { display: flow-root }` rule (from `pymdownx.details`
 * styling) is as specific as a bare `.sm-toc-disclosure` class selector and
 * wins on source order in the collapsed state. `!important` on both branches
 * keeps this toggle authoritative regardless of what else `.md-typeset`
 * ships for generic `<details>` elements.
 */
.sm-toc-disclosure {
  display: none !important;
}

@media screen and (max-width: 59.9375em) {
  body:not(:has(.sm-landing)) .sm-toc-disclosure {
    display: block !important;
    margin: 0 0 1.2rem;
    border: 0.05rem solid var(--md-default-fg-color--lightest);
    border-radius: 0.2rem;
    background-color: var(--md-code-bg-color);
  }
}

/*
 * The disclosure also matches `pymdownx.details`' generic admonition
 * styling (`.md-typeset details` / `.md-typeset summary`), which paints a
 * blue "note" icon and background plus its own rotating chevron via
 * `summary::before`/`::after` — a second, conflicting affordance on top of
 * the one built below. `.md-typeset .sm-toc-disclosure...` is two classes
 * (specificity 0,2,*) against their one-class-one-type selectors (0,1,1),
 * so these win on specificity alone and reset that chrome back to neutral.
 */
.md-typeset .sm-toc-disclosure {
  background-color: transparent;
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  box-shadow: none;
  padding: 0;
}

.md-typeset .sm-toc-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-height: 0;
  margin: 0;
  padding: 0.6rem 0.8rem;
  background-color: transparent;
  border: none;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--md-default-fg-color);
  -webkit-tap-highlight-color: transparent;
}

.md-typeset .sm-toc-disclosure > summary::before,
.md-typeset .sm-toc-disclosure > summary::after {
  display: none;
  content: none;
}

.sm-toc-disclosure > summary::-webkit-details-marker {
  display: none;
}

.sm-toc-disclosure > summary::marker {
  content: "";
}

.sm-toc-disclosure__chevron {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 0.125rem solid currentcolor;
  border-bottom: 0.125rem solid currentcolor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.sm-toc-disclosure[open] > summary .sm-toc-disclosure__chevron {
  transform: rotate(-135deg);
}

.sm-toc-disclosure__nav {
  max-height: 40vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.2rem 0.8rem 0.6rem;
  border-top: 0.05rem solid var(--md-default-fg-color--lightest);
}

/* The cloned nav keeps Material's own `.md-nav--secondary` classes, so
   indentation, active-link color, and hover states are inherited for free.
   Only trim the margins Material assumes when the nav lives inside the
   dedicated sidebar column. */
.sm-toc-disclosure__nav .md-nav--secondary {
  margin: 0.2rem 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .sm-toc-disclosure__chevron {
    transition: none;
  }
}