:root,
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #B185A7;
  --md-primary-fg-color--light: #C4A0BC;
  --md-primary-fg-color--dark: #956B8D;
  --md-accent-fg-color: #B185A7;
  --md-accent-fg-color--transparent: rgba(177, 133, 167, 0.1);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #B185A7;
  --md-primary-fg-color--light: #C4A0BC;
  --md-primary-fg-color--dark: #956B8D;
  --md-accent-fg-color: #B185A7;
  --md-accent-fg-color--transparent: rgba(177, 133, 167, 0.1);
}

.footer-meta {
  font-size: 0.7rem;
  line-height: 1.3;
}

.md-header__source {
  width: 12.8rem;
  max-width: 12.8rem;
}

.md-source__repo-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-source__fact {
  overflow: hidden;
  text-overflow: ellipsis;
}

@media screen and (min-width: 76.25em) {
  .md-header__source {
    width: 13.6rem;
    max-width: 13.6rem;
  }
}

/* Version switcher injected into the header by assets/version-select.js. Matches the desktop
   search bar (.md-search__button at min-width: 45em: 1.6rem tall, 0.2rem radius, #00000042
   tint, #ffffff1f hover) so both header inputs read as one family, in both the light and slate
   schemes (the header keeps the primary color, with white text, in both). */
.md-version-select {
  display: flex;
  align-items: center;
  margin: 0 0.4rem;
  height: 1.6rem;
}

.md-version-select__inner {
  appearance: none;
  -webkit-appearance: none;
  height: 1.6rem;
  border: none;
  border-radius: 0.2rem;
  background-color: #00000042;
  color: var(--md-primary-bg-color);
  font: 700 0.7rem/1.6rem var(--md-text-font-family, inherit);
  padding: 0 1.4rem 0 0.6rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.4rem center;
  background-size: 0.7rem;
  transition: background-color 0.4s, color 0.4s;
}

.md-version-select__inner:hover {
  background-color: #ffffff1f;
}

.md-version-select__inner:focus-visible {
  outline: 0.1rem solid var(--md-primary-bg-color);
  outline-offset: 0.1rem;
}

/* Honored on Firefox and Chromium (Linux/Windows); macOS/iOS fall back to the native popup. */
.md-version-select__inner option {
  color: var(--md-default-fg-color);
  background-color: var(--md-default-bg-color);
}

/* Compact switcher on narrow screens where the header is tight; the page title next to it
   ellipsizes, so the switcher stays usable on phones instead of disappearing. */
@media screen and (max-width: 59.9844em) {
  .md-version-select {
    margin: 0 0.2rem;
  }

  .md-version-select__inner {
    font-size: 0.65rem;
    padding: 0 1.1rem 0 0.4rem;
    background-position: right 0.3rem center;
    background-size: 0.6rem;
  }
}

/* Banner shown on dev / older-release pages by assets/version-select.js. A defined tint plus a
   solid brand bottom border make it read as a banner; the text and link use the default foreground
   for AA contrast in both schemes (the link is bold + underlined to stay distinguishable). */
.md-version-banner {
  padding: 0.5rem 0.8rem;
  font-size: 0.72rem;
  line-height: 1.4;
  text-align: center;
  color: var(--md-default-fg-color);
  background-color: var(--md-accent-fg-color--transparent);
  border-bottom: 0.05rem solid var(--md-primary-fg-color);
}

.md-version-banner a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

/* The blog link injected into the docs left nav by assets/version-select.js. Weighted and spaced so
   it reads as a top-level destination rather than a sub-page of the section rendered above it. */
.md-nav__blog-link {
  margin-top: 0.5rem;
  font-weight: 700;
}