/*
 * The libtmux.org top bar.
 *
 * Mirrors the header of https://libtmux.org so the project sites and the
 * main site read as one product. The rules are scoped to `.site-header`, so
 * nothing here restyles the rest of the page. Colours are the Python brand's,
 * written once for light and twice for dark: Sphinx marks dark with
 * `body[data-theme="dark"]` or, under Auto, with the OS preference.
 *
 * Lengths are in px, not rem: Furo scales the root font size with the
 * viewport above 1280px, and the bar has to stay the size libtmux.org draws.
 */

/* Tokens ------------------------------------------------------------------ */
.site-header {
  --topnav-background: #fafbfc;
  --topnav-text-color: #202830;
  --topnav-link-color: #53606d;
  --topnav-link-hover-color: #202830;
  --color-edge: #d6dce3;
  --color-muted: #53606d;
  --color-surface: #f3f5f7;
  --color-surface-hover: #e9edf1;
  --background-color: #fafbfc;
  --text-color: #202830;
  --color-link: #1e415e;
  --focus-ring-color: #1e415e;
  --theme-accent: #1e415e;
  --color-background-border: #d6dce3;
  --color-background-secondary: #f3f5f7;
  --site-gutter: 16px;
  --radius-md: 6px;
  --registry-brand: var(--icon-brand);
}

body[data-theme="dark"] .site-header {
  --topnav-background: #15191d;
  --topnav-text-color: #e7edf3;
  --topnav-link-color: #b7c1cd;
  --topnav-link-hover-color: #e7edf3;
  --color-edge: #3e4a57;
  --color-muted: #b7c1cd;
  --color-surface: #1c2229;
  --color-surface-hover: #29323d;
  --background-color: #15191d;
  --text-color: #e7edf3;
  --color-link: #b6ccdf;
  --focus-ring-color: #b6ccdf;
  --theme-accent: #b6ccdf;
  --color-background-border: #3e4a57;
  --color-background-secondary: #1c2229;
}

@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) .site-header {
    --topnav-background: #15191d;
    --topnav-text-color: #e7edf3;
    --topnav-link-color: #b7c1cd;
    --topnav-link-hover-color: #e7edf3;
    --color-edge: #3e4a57;
    --color-muted: #b7c1cd;
    --color-surface: #1c2229;
    --color-surface-hover: #29323d;
    --background-color: #15191d;
    --text-color: #e7edf3;
    --color-link: #b6ccdf;
    --focus-ring-color: #b6ccdf;
    --theme-accent: #b6ccdf;
    --color-background-border: #3e4a57;
    --color-background-secondary: #1c2229;
  }
}

/* Reset: the page beneath brings its own base styles --------------------- */
:where(.site-header, .site-header *) {
  box-sizing: border-box;
  border: 0 solid currentColor;
  margin: 0;
  padding: 0;
}

:where(.site-header) img,
:where(.site-header) svg {
  display: block;
  vertical-align: middle;
}

:where(.site-header) img {
  max-width: 100%;
  height: auto;
  content-visibility: visible;
}

:where(.site-header) button,
:where(.site-header) input {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background-color: transparent;
  border-radius: 0;
  opacity: 1;
}

:where(.site-header) summary {
  display: list-item;
}

:where(.site-header) ol,
:where(.site-header) ul {
  list-style: none;
}

:where(.site-header) p,
:where(.site-header) h3 {
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  line-height: inherit;
  border-radius: 0;
}

:where(.site-header) a {
  color: inherit;
  text-decoration: inherit;
}

:where(.site-header) [hidden] {
  display: none !important;
}

:where(.site-header) .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
  border-width: 0;
}

/* The page's `small` is dimmed; the bar's is not. */
:where(.site-header) small {
  opacity: 1;
}

/* The bar ----------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  /* Above Furo's TOC drawer (z-index 50), which is a flex item on wide pages
     and would otherwise paint over the Menu panel. */
  z-index: 55;
  border-bottom: 1px solid var(--color-edge);
  background: var(--topnav-background);
  backdrop-filter: blur(8px);
  color: var(--text-color);
  font-family: var(--font-stack, ui-sans-serif, system-ui, sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  text-align: left;
  text-rendering: auto;
  font-kerning: auto;
  font-variant-ligatures: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.site-header__bar {
  margin-inline: auto;
  max-width: 1728px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px var(--site-gutter);
  min-height: 52px;
}

.site-header__mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5.6px;
  font-family: var(--font-stack--monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.025em;
}

.site-header__spacer {
  flex: 1;
}

.site-header__always {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.site-header__destinations {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

/* Chips ------------------------------------------------------------------- */
:where(.site-header) .topnav-chip {
  border-radius: var(--radius-md, 6px);
  color: var(--topnav-link-color);
  background: color-mix(in oklab, var(--topnav-background), var(--topnav-text-color) 7%);
  transition: background-color 120ms ease, color 120ms ease;
}

:where(.site-header) .topnav-chip:hover {
  color: var(--topnav-link-hover-color);
  background: color-mix(in oklab, var(--topnav-background), var(--topnav-text-color) 16%);
}

:where(.site-header) .topnav-chip:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .site-header .topnav-chip {
    transition: none;
  }
}

.site-header__search,
.site-header .scheme-switch,
.site-header__menu-button {
  box-sizing: border-box;
  height: 28px;
}

.site-header__search {
  display: inline-flex;
  align-items: center;
  gap: 5.6px;
  padding: 4px 8px;
  border: 1px solid var(--color-background-border);
  font-size: 14px;
  line-height: 1;
}

.site-header .header-link,
.site-header .header-picker > summary {
  box-sizing: border-box;
  height: 28px;
  min-height: 0;
  gap: 5.6px;
  padding: 0 8px;
  border: 1px solid var(--color-background-border);
  border-radius: var(--radius-md, 6px);
  background: color-mix(in oklab, var(--topnav-background), var(--topnav-text-color) 7%);
  color: var(--topnav-link-color);
  font-size: 14px;
  line-height: 1;
}

.site-header .header-link {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
  white-space: nowrap;
}

.site-header .header-link:is(:hover, :focus-visible),
.site-header .header-picker > summary:is(:hover, :focus-visible),
.site-header .header-picker[open] > summary {
  background: color-mix(in oklab, var(--topnav-background), var(--topnav-text-color) 16%);
  color: var(--topnav-link-hover-color);
}

.site-header .header-picker .doc-picker-caret {
  margin-left: 0;
}

.site-header .header-link:is(:hover, :focus-visible) .registry-icon,
.site-header .header-picker > summary:is(:hover, :focus-visible) .registry-icon {
  color: var(--icon-brand);
}

body[data-theme="dark"] .site-header .header-link:is(:hover, :focus-visible) .registry-icon,
body[data-theme="dark"] .site-header .header-picker > summary:is(:hover, :focus-visible) .registry-icon,
body[data-theme="dark"] .site-header .header-picker__option:is(:hover, :focus-visible) .registry-icon {
  color: var(--icon-brand-dark);
}

@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) .site-header .header-link:is(:hover, :focus-visible) .registry-icon,
  body:not([data-theme="light"]) .site-header .header-picker > summary:is(:hover, :focus-visible) .registry-icon,
  body:not([data-theme="light"]) .site-header .header-picker__option:is(:hover, :focus-visible) .registry-icon {
    color: var(--icon-brand-dark);
  }
}

:where(.site-header) .registry-icon {
  width: 16px;
  height: 16px;
  flex: none;
}

:where(.site-header) .registry-icon.registry-icon--pypi {
  width: 24px;
  height: auto;
}

:where(.site-header) .registry-icon[data-icon="github"] { --icon-brand: #181717; --icon-brand-dark: #f0f6fc; }
:where(.site-header) .registry-icon[data-icon="pypi"] { --icon-brand: #3775a9; --icon-brand-dark: #4b8bbe; }
:where(.site-header) .registry-icon[data-icon="packages"] { --icon-brand: #5b5ea6; --icon-brand-dark: #9ea1ee; }

/* The external-link hint, as on libtmux.org. */
.site-header a[data-external-link]::after {
  content: "";
  display: inline-block;
  inline-size: 0.8em;
  block-size: 0.8em;
  margin-inline-start: 0.22em;
  vertical-align: -0.05em;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%202h5v5M14%202%207%209M7%203H3a1%201%200%200%200-1%201v9a1%201%200%200%200%201%201h9a1%201%200%200%200%201-1V9%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

.site-header a.header-link[data-external-link]::after {
  content: none;
}

.site-header a.header-picker__option[data-external-link]::after {
  flex: none;
  margin-inline-start: auto;
  color: var(--color-muted);
}

/* Menu -------------------------------------------------------------------- */
.site-header__menu {
  position: relative;
  flex: none;
}

.site-header__menu-button {
  display: inline-flex;
  align-items: center;
  gap: 5.6px;
  border: 1px solid var(--color-background-border);
  border-radius: var(--radius-md, 6px);
  padding: 4.8px 8px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  list-style: none;
}

.site-header__menu-button::-webkit-details-marker {
  display: none;
}

.site-header__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 50;
  width: 272px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--color-background-border);
  border-radius: 8px;
  background: var(--color-background-secondary);
  box-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.35);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-header__panel-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--color-background-border);
  padding-top: 12px;
}

.site-header__panel-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.site-header__panel-link {
  padding: 4px 8px;
  font-size: 14px;
  line-height: 1.4286;
}

.site-header__panel .doc-picker:not([data-enhanced]) > .doc-picker-panel {
  position: static;
  width: auto;
  max-width: none;
  margin-top: 5.6px;
  border: 0;
  border-left: 2px solid var(--color-background-border);
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding-left: 8px;
}

.site-header__panel-row:has(details[open]) {
  flex-direction: column;
  align-items: stretch;
}

.site-header__panel-destinations:has(details[open][data-enhanced]) {
  flex-direction: row;
  align-items: center;
}

.site-header__panel details {
  min-width: 0;
}

/* Colour scheme ----------------------------------------------------------- */
:where(.site-header) .scheme-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  border: 1px solid var(--color-background-border);
  border-radius: var(--radius-md, 6px);
  padding: 2px;
}

:where(.site-header) .scheme-switch__option {
  display: inline-flex;
  align-items: center;
  gap: 4.8px;
  border-radius: calc(var(--radius-md, 6px) - 2px);
  padding: 3.2px 7.2px;
  color: var(--topnav-link-color);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

:where(.site-header) .scheme-switch__option:hover {
  background: color-mix(in oklab, var(--topnav-background), var(--topnav-text-color) 10%);
}

:where(.site-header) .scheme-switch__icon {
  display: inline-flex;
}

:where(.site-header) .scheme-switch__option:has(input:checked),
body[data-theme="auto"] .site-header .scheme-switch__option[data-scheme="system"],
body[data-theme="light"] .site-header .scheme-switch__option[data-scheme="light"],
body[data-theme="dark"] .site-header .scheme-switch__option[data-scheme="dark"] {
  background: color-mix(in oklab, var(--topnav-background), var(--topnav-text-color) 16%);
  font-weight: 600;
}

body[data-theme] .site-header .scheme-switch__option:not([data-scheme]) {
  background: none;
}

body[data-theme="light"] .site-header .scheme-switch__option[data-scheme="system"],
body[data-theme="dark"] .site-header .scheme-switch__option[data-scheme="system"],
body[data-theme="auto"] .site-header .scheme-switch__option[data-scheme="light"],
body[data-theme="dark"] .site-header .scheme-switch__option[data-scheme="light"],
body[data-theme="auto"] .site-header .scheme-switch__option[data-scheme="dark"],
body[data-theme="light"] .site-header .scheme-switch__option[data-scheme="dark"] {
  background: none;
  font-weight: 400;
}

:where(.site-header) .scheme-switch__option:focus-within {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 1px;
}

:where(.site-header) .scheme-cycle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  padding: 4px;
  border: 1px solid var(--color-background-border);
  border-radius: var(--radius-md, 6px);
  color: var(--topnav-link-color);
  background: transparent;
  cursor: pointer;
}

:where(.site-header) .scheme-cycle [data-scheme-cycle-icon] {
  display: flex;
}

:where(.site-header) .scheme-cycle:hover {
  background: var(--color-surface-hover);
}

:where(.site-header) .scheme-cycle:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* Pickers ----------------------------------------------------------------- */
.site-header-language {
  display: flex;
  align-items: center;
  min-width: 0;
}

.site-header-language [data-page-port-switcher] > summary {
  padding-inline: 8.8px;
}

.site-header-language .doc-picker-caret {
  margin-inline: 6.5px;
}

:where(.site-header) .doc-picker {
  position: relative;
  font-size: 13px;
}

:where(.site-header) .doc-picker > summary {
  display: flex;
  align-items: center;
  gap: 7.2px;
  min-height: 36px;
  padding: 4px 9.6px;
  border: 1px solid var(--color-edge);
  border-radius: 6.4px;
  background: var(--background-color);
  color: var(--text-color);
  cursor: pointer;
  list-style: none;
}

:where(.site-header) .doc-picker summary::-webkit-details-marker {
  display: none;
}

:where(.site-header) .doc-picker summary svg,
:where(.site-header) .doc-picker-option svg {
  flex: none;
}

:where(.site-header) .doc-picker-caret {
  margin-left: auto;
  color: var(--color-muted);
}

:where(.site-header) .doc-picker[open] > summary .doc-picker-caret {
  transform: rotate(180deg);
}

:where(.site-header) .doc-picker-panel {
  --picker-width: 380px;
  position: absolute;
  left: 0;
  z-index: 60;
  width: min(var(--picker-width), calc(100vw - 16px));
  margin: 6.4px 0 0;
  padding: 12px;
  border: 1px solid var(--color-edge);
  border-radius: 10.4px;
  background: var(--background-color);
  color: var(--text-color);
  box-shadow: 0 9.6px 32px #0002;
  font-size: 13px;
}

:where(.site-header) .doc-picker[data-enhanced] > .doc-picker-panel {
  position: fixed;
  z-index: 90;
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

:where(.site-header) .doc-picker-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 4px 10.4px;
  font-size: 12px;
  font-weight: 600;
}

:where(.site-header) .doc-picker-title-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

:where(.site-header) .doc-picker-count {
  padding: 1.6px 4.8px;
  border-radius: 3.2px;
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 400;
}

:where(.site-header) .doc-picker-search {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 10.4px;
}

:where(.site-header) .doc-picker-search > svg {
  position: absolute;
  left: 12px;
  color: var(--color-muted);
  pointer-events: none;
}

:where(.site-header) .doc-picker-search input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9.6px 12px 9.6px 33.6px;
  border: 1px solid var(--color-edge);
  border-radius: 7.2px;
  background: var(--color-surface);
  color: inherit;
  font-size: 13px;
}

:where(.site-header) .doc-picker-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3.2px;
}

:where(.site-header) .doc-picker-option {
  display: flex;
  align-items: center;
  gap: 9.6px;
  min-height: 40px;
  padding: 8px 9.6px;
  border-radius: 6.4px;
  color: inherit;
  text-decoration: none;
  line-height: 1.4;
}

:where(.site-header) .doc-picker-option > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

:where(.site-header) .doc-picker-option small {
  display: block;
  margin-top: 2.4px;
  font-size: 11px;
  color: var(--color-muted);
}

:where(.site-header) .doc-picker-option > svg {
  color: var(--color-muted);
}

:where(.site-header) .doc-picker-option[aria-current] {
  background: color-mix(in srgb, var(--color-link) 12%, var(--background-color));
  color: var(--color-link);
  font-weight: 500;
}

:where(.site-header) .doc-picker-option[aria-current] > svg {
  color: inherit;
}

:where(.site-header) .doc-picker-check {
  margin-left: auto;
  color: var(--color-link);
}

:where(.site-header) .doc-picker-option[href]:hover,
:where(.site-header) .doc-picker summary:hover {
  background: var(--color-surface-hover);
}

:where(.site-header) .doc-picker-empty {
  padding: 12px 8px;
}

:where(.site-header) .doc-picker [hidden] {
  display: none !important;
}

:where(.site-header) .doc-picker :is(summary, a, input):focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

.site-header .header-picker {
  --picker-width: 352px;
}

:where(.site-header) .header-picker__panel {
  max-height: min(512px, calc(100dvh - 80px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

:where(.site-header) .header-picker__group + .header-picker__group {
  margin-top: 8px;
}

:where(.site-header) .header-picker__heading {
  margin: 8px 9.6px 2.4px;
  color: var(--color-muted);
  cursor: default;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: uppercase;
}

:where(.site-header) .header-picker__group > .header-picker__option {
  margin-inline-start: 8px;
}

:where(.site-header) .header-picker__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  color: var(--color-muted);
}

:where(.site-header) .header-picker__text {
  display: grid;
  min-width: 0;
}

:where(.site-header) .header-picker__text > small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:where(.site-header) .header-picker__name {
  font-weight: 500;
}

:where(.site-header) .header-picker__option:is(:hover, :focus-visible) .registry-icon {
  color: var(--icon-brand);
}

:where(.site-header) .header-picker__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 9.6px;
  border-radius: 6.4px;
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 11px;
}

:where(.site-header) .page-port-icon {
  display: grid;
  place-items: center;
  flex: none;
}

:where(.site-header) .page-port-icon > img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

:where(.site-header) .page-port-icon > img[data-language-icon="py"] {
  transform: translateY(8.333%);
}

:where(.site-header) .page-port-short-name {
  display: none;
}

:where(.site-header) summary[data-reserve-label-width] {
  display: grid;
  grid-template-columns: max-content minmax(0, max-content) max-content;
}

:where(.site-header) summary[data-reserve-label-width] :is(.page-port-name, .page-port-short-name, .page-port-label-sizer) {
  grid-area: 1 / 2;
}

:where(.site-header) summary[data-reserve-label-width] .doc-picker-caret {
  grid-area: 1 / 3;
}

:where(.site-header) .page-port-label-sizer {
  display: grid;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
}

:where(.site-header) .page-port-label-sizer > span {
  grid-area: 1 / 1;
}

:where(.site-header) .port-family + .port-family {
  margin-top: 10.4px;
}

:where(.site-header) .port-family h3 {
  margin: 12px 6.4px 4px;
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--color-muted);
}

:where(.site-header) .port-artwork {
  flex: none;
  width: 26px;
  height: 26px;
  object-fit: contain;
}

:where(.site-header) .tmux-logo {
  flex: none;
  object-fit: contain;
}

:where(.site-header) .tmux-area {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--color-edge);
}

:where(.site-header) .tmux-destination {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Where the pieces move --------------------------------------------------- */
@media (min-width: 96rem) {
  .site-header__menu-label {
    display: none;
  }
}

@media (max-width: 95.999rem) {
  .site-header .scheme-switch__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .site-header .scheme-switch__option {
    padding: 4px 5.6px;
  }

  .site-header__menu-label {
    display: none;
  }

  .site-header__bar {
    gap: 8px;
  }
}

@media (max-width: 79.999rem) {
  .site-header__destinations :is(.header-link__label, .header-picker__label) {
    display: none;
  }
}

@media (max-width: 69.999rem) {
  .site-header__search-label {
    display: none;
  }
}

@media (max-width: 47.999rem) {
  .site-header__destinations {
    display: none;
  }
}

@media (min-width: 48rem) {
  .site-header__panel-destinations {
    display: none;
  }
}

@media (max-width: 46rem) {
  .site-header-language .doc-picker:not([data-enhanced]) > .doc-picker-panel {
    position: fixed;
    top: auto;
    left: 8px;
    width: min(var(--picker-width), calc(100% - 16px));
  }
}

@media (max-width: 40rem) {
  .site-header[data-js] .scheme-switch {
    display: none;
  }

  .site-header .scheme-cycle:not([hidden]) {
    display: inline-flex;
  }

  .site-header .scheme-switch:has(+ .scheme-cycle:not([hidden])) {
    display: none;
  }
}

@media (max-width: 35rem) {
  .site-header__bar:has(.site-header-language) {
    flex-wrap: wrap;
  }

  .site-header-language {
    order: 5;
    flex-basis: 100%;
    padding-block: 4px;
  }
}

@media (max-width: 26rem) {
  .site-header {
    --site-gutter: 12px;
  }

  .site-header__search-label {
    display: none;
  }

  .site-header__bar {
    gap: 8px;
  }
}

@media (max-width: 25rem) {
  .site-header__menu-label {
    display: none;
  }
}

@media (max-width: 24rem) {
  .site-header-language [data-page-port-switcher] > summary {
    gap: 4.8px;
    padding-inline: 5.6px;
  }
}

@media (max-width: 20rem) {
  .site-header {
    --site-gutter: 8px;
  }

  .site-header__bar {
    column-gap: 4px;
  }
}

@media (max-height: 30rem) {
  .site-header__bar {
    min-height: 40px;
    padding-block: 4px;
  }
}

/* The Furo page beneath ---------------------------------------------------
 *
 * The bar is sticky, so everything else that sticks or measures from the top
 * of the viewport starts below it. `site-header.js` writes the bar's measured
 * height to --site-header-height; the fallback is its height on one row.
 */
:root {
  --site-header-height: 53px;
}

html {
  scroll-padding-top: var(--site-header-height);
}

/* A sticky bar only sticks within its parent, and Furo fixes the body at the
   height of the viewport. Let the body grow with the page and size the page
   to what is left of the viewport. */
body {
  height: auto;
  min-height: 100%;
}

.page {
  min-height: calc(100vh - var(--site-header-height));
}

.announcement + .page {
  min-height: calc(100vh - var(--site-header-height) - var(--header-height));
}

:target {
  scroll-margin-top: calc(2.5rem + var(--site-header-height));
}

.sidebar-sticky,
.toc-sticky {
  top: var(--site-header-height);
  height: calc(100vh - var(--site-header-height));
}

.toc-scroll {
  max-height: calc(100vh - var(--site-header-height));
}

/* One colour-scheme control: this bar's, not Furo's. */
.theme-toggle-container {
  display: none;
}

@media (max-width: 82em) {
  .toc-drawer {
    top: var(--site-header-height);
    height: calc(100vh - var(--site-header-height));
  }
}

@media (max-width: 63em) {
  .sidebar-drawer {
    top: var(--site-header-height);
    height: calc(100vh - var(--site-header-height));
  }

  .mobile-header {
    top: var(--site-header-height);
  }

  :target {
    scroll-margin-top: calc(2.5rem + var(--header-height) + var(--site-header-height));
  }
}