/* Calm blue-grey palette */
:root,
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #3e4c59;
  --md-primary-fg-color--light: #52606d;
  --md-primary-fg-color--dark: #323f4b;
  --md-primary-bg-color: #f5f7fa;
  --md-accent-fg-color: #4f7fa3;
  --md-accent-fg-color--transparent: rgba(79, 127, 163, 0.1);
  --md-typeset-a-color: #3d6f94;
  --callout-color: #4f7fa3;
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: hsla(225, 8%, 11%, 1);
  --md-default-bg-color--light: hsla(225, 8%, 11%, 0.54);
  --md-default-bg-color--lighter: hsla(225, 8%, 11%, 0.26);
  --md-default-bg-color--lightest: hsla(225, 8%, 11%, 0.07);
  --md-code-bg-color: hsla(225, 8%, 15%, 1);
  --md-primary-fg-color: #2a323b;
  --md-primary-fg-color--light: #36404a;
  --md-primary-fg-color--dark: #20272e;
  --md-primary-bg-color: #e4e7eb;
  --md-accent-fg-color: #7fa7c6;
  --md-accent-fg-color--transparent: rgba(127, 167, 198, 0.1);
  --md-typeset-a-color: #8fb3d0;
  --callout-color: #5b8db3;
}

/* Comfortable reading width and line height */
.md-typeset {
  font-size: 0.8rem;
  line-height: 1.7;
}

/* Plain key names without the theme's modifier symbols */
.md-typeset .keys kbd[class]::before,
.md-typeset .keys kbd[class]::after {
  content: none;
  padding: 0;
}

/* Numbered legend under annotated screenshots */
.callouts ol {
  counter-reset: callout;
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.md-typeset .callouts ol > li {
  counter-increment: callout;
  position: relative;
  padding-left: 2.4em;
  margin-left: 0;
  margin-bottom: 0.7em;
}

.callouts ol > li::before {
  content: counter(callout);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.6em;
  height: 1.6em;
  line-height: 1.6em;
  border-radius: 50%;
  background: var(--callout-color);
  color: #fff;
  font-weight: 700;
  font-size: 0.8em;
  text-align: center;
}

/* Lettered legend for outlined parts of the panel */
.md-typeset .regions ol {
  counter-reset: region;
}

.md-typeset .regions ol > li {
  counter-increment: region;
}

.md-typeset .regions ol > li::before {
  content: counter(region, upper-alpha);
  border-radius: 4px;
}

.region-badge {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  margin-right: 0.35em;
  border-radius: 4px;
  background: var(--callout-color);
  color: #fff;
  font-size: 0.75em;
  font-weight: 700;
  text-align: center;
  vertical-align: 0.15em;
}

/* Text on the left, tall screenshot on the right */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.6rem;
  align-items: start;
  margin: 1em 0 1.5em;
}

.split-image {
  position: sticky;
  top: 4rem;
}

/* Wide screenshots go above their list instead of beside it */
.split.wide {
  grid-template-columns: minmax(0, 1fr);
}

.split.wide .split-image {
  position: static;
  order: -1;
}

/* Screenshots are shown at their own size so Blender text stays readable */
.split-image img {
  display: block;
  width: auto;
  max-width: 100%;
}

.split-image .screenshot-placeholder {
  width: 18rem;
}

/* Stack the image above the text on narrow screens */
@media screen and (max-width: 60em) {
  .split {
    grid-template-columns: minmax(0, 1fr);
  }

  .split-image {
    position: static;
    order: -1;
    max-width: 22rem;
    margin: 0 auto;
  }
}

.screenshot-placeholder {
  border: 2px dashed var(--md-default-fg-color--lighter);
  border-radius: 6px;
  padding: 2.5em 1em;
  text-align: center;
  color: var(--md-default-fg-color--light);
  margin: 1em 0;
}

.split-image .screenshot-placeholder {
  margin: 0;
  min-height: 26rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Home page logo replaces the visible page title */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.home-logo {
  display: block;
  width: 320px;
  max-width: 100%;
  margin: 0.5rem 0 1.5rem;
}

/* One-line wordmark in the header replaces the site and page titles */
.md-header__button.md-logo img,
.md-nav__button.md-logo img {
  height: 0.9rem;
  width: auto;
}

@media screen and (min-width: 76.25em) {
  .md-header__title {
    visibility: hidden;
  }

  /* The site name above Home repeats the header logo */
  .md-nav--primary > .md-nav__title {
    display: none;
  }

  /* Groups in the left menu are split by space instead of grey headings */
  .md-nav--primary .md-nav__item--section > .md-nav__link {
    display: none;
  }

  .md-nav--primary .md-nav__item--section {
    margin-top: 1.4em;
  }
}

/* Show a link icon instead of the pilcrow next to headings */
.md-typeset .headerlink::before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  vertical-align: -0.05em;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>') center / contain no-repeat;
}