/* Site mechanics: the rules framework markup and the core script
   (extensions/scripts/site.js) 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; the skip link until it has
   focus. */
.visually-hidden,
.skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The skip link shows above the sticky header. */
.skip-link {
  position: absolute;
  z-index: 100;
}

/* The core script closes search on a click that lands on the overlay
   itself, so the overlay covers the viewport above the page. */
.site-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
}
/* A theme's display value on the overlay would outrank the user-agent
   [hidden] rule. */
.site-search-overlay[hidden] {
  display: none;
}
/* Opening search moves focus to the input; it stays visible under any theme. */
.site-search-input:focus-visible {
  outline: 2px solid;
}

/* 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; entries for
   headings below level n stay in the markup for the scroll-spy. A level can
   nest directly under a shallower one, so each hidden level is named. */
.toc-nav[data-max-depth="1"] li:not([data-level="1"]),
.toc-nav[data-max-depth="2"] li:not([data-level="1"], [data-level="2"]),
.toc-nav[data-max-depth="3"] li:not([data-level="1"], [data-level="2"], [data-level="3"]),
.toc-nav[data-max-depth="4"] li:is([data-level="5"], [data-level="6"]),
.toc-nav[data-max-depth="5"] li[data-level="6"] {
  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;
}

/* `:::tabset`: the tab row shows, and a pane's heading hides, only once the
   core script has flagged `html.js`; the script sets `hidden` on the panels
   of the tabs not selected. Without the script, and in print, the panes stack
   as plain sections under their headings. The hidden heading stays in flow
   (out of view, not display: none), so a hash link to it still scrolls. */
.tabset-tabs {
  display: none;
}
@media screen {
  html.js .tabset-tabs {
    display: flex;
    flex-wrap: wrap;
  }
  html.js .tabset-panel-heading {
    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 a panel would outrank the user-agent [hidden] rule. */
html.js .tabset-panel[hidden] {
  display: none;
}
@media print {
  .tabset-panel[hidden] {
    display: block;
  }
}

/* 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;
}