/* Site mechanics: the rules framework markup and the layout script need in
   order to work under any theme. No palette, spacing, or typography; the
   theme loads after this sheet and supplies the look. Selectors that must
   hold against a theme's own display or position rules carry the extra
   specificity to do so, since the theme comes later in the cascade. */

/* Out of view, still read by assistive technology. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* A theme's display value on the overlay would outrank the user-agent
   [hidden] rule. */
.site-search-overlay[hidden] {
  display: none;
}

/* The toggle shows the mode it switches to. */
.site-theme-toggle .icon-sun { display: none; }
:root.dark .site-theme-toggle .icon-moon { display: none; }
:root.dark .site-theme-toggle .icon-sun { display: inline-block; }

/* `toc: {depth: n}` reaches the page as data-max-depth; deeper levels stay
   in the markup for the scroll-spy. */
.toc-nav[data-max-depth="2"] ul ul          { display: none; }
.toc-nav[data-max-depth="3"] ul ul ul       { display: none; }
.toc-nav[data-max-depth="4"] ul ul ul ul    { display: none; }
.toc-nav[data-max-depth="5"] ul ul ul ul ul { display: none; }

/* Grid tracks follow the regions the layout declares (`data-sidebar`,
   `data-toc`); the theme sizes them through `--sidebar-w` and `--toc-w`.
   The table of contents drops below the width where three tracks fit. */
.site-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.site-layout[data-sidebar] {
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
}
@media (min-width: 1101px) {
  .site-layout[data-toc] {
    grid-template-columns: minmax(0, 1fr) var(--toc-w);
  }
  .site-layout[data-sidebar][data-toc] {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
  }
}
@media (max-width: 1100px) {
  .site-layout > .toc-nav { display: none; }
}

/* Narrow screens: the sidebar is an off-canvas panel the menu trigger opens
   through `body.is-sidebar-open`. Closed, it is invisible rather than only
   moved, so its links leave the tab order and the accessibility tree. */
@media (min-width: 769px) {
  .site-controls > .site-menu-trigger { display: none; }
}
@media (max-width: 768px) {
  .site-layout[data-sidebar] {
    grid-template-columns: minmax(0, 1fr);
  }
  /* A fixed box still takes align-self: stretch spans it top to bottom. */
  .site-layout > .site-sidebar {
    position: fixed;
    top: var(--header-h, 0);
    left: 0;
    bottom: 0;
    align-self: stretch;
    max-height: none;
    overflow-y: auto;
    z-index: 30;
    transform: translateX(-100%);
    visibility: hidden;
  }
  .is-sidebar-open .site-layout > .site-sidebar {
    transform: none;
    visibility: visible;
  }
}

/* `::: {.columns}` / `::: {.column width=…}`: side-by-side boxes. A column
   with a width keeps it as its basis; the rest share what is left. Widths
   that fill the row shrink in proportion to absorb the gap, never wrap. */
.columns {
  display: flex;
  align-items: flex-start;
}
.column {
  flex: 1 1 0;
  min-width: 0;
}
.column[style*="width"] {
  flex: 0 1 auto;
}

/* Output wider than the column scrolls inside its block. */
.cell-output pre,
pre.cell-error {
  overflow-x: auto;
}

.code-fold > summary {
  cursor: pointer;
}

/* `fig-align`. The figure selectors outrank the theme's figure rule. */
figure.figure.align-left   { text-align: left; }
figure.figure.align-center { text-align: center; }
figure.figure.align-right  { text-align: right; }
img.align-left  { float: left; }
img.align-right { float: right; }
img.align-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}