/* Match the selected tab label to Material's accent-colored selector. */
.md-typeset .tabbed-labels {
  --md-default-fg-color: var(--md-accent-fg-color);
}

/* Use the available page width instead of Material's default 61rem grid cap. */
.md-main__inner,
.md-header__inner,
.md-grid {
  max-width: 100%;
}

/* Match Supervision's document and site-title emphasis. */
.md-header__title {
  font-weight: 800;
}

.md-typeset h1 {
  font-weight: 400;
  margin-bottom: 1rem;
}

/* Center the desktop search field without changing Material's mobile header. */
@media screen and (min-width: 60em) {
  .md-header__inner {
    position: relative;
  }

  .md-header__inner > .md-search {
    left: 50%;
    margin: 0;
    position: absolute;
    transform: translateX(-50%);
    width: min(36rem, 45vw);
  }

  .md-header__inner > .md-search .md-search__inner {
    max-width: none;
    width: 100%;
  }
}

/* Keep filter results visible beside their unfiltered source image. */
.filter-comparison {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 1rem 0;
}

.filter-comparison figure {
  margin: 0;
}

.filter-comparison figcaption {
  color: var(--md-default-fg-color--light);
  font-size: 0.8rem;
  text-align: center;
}

.filter-comparison img {
  display: block;
  width: 100%;
}

.recipe-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}

.recipe-card {
  --recipe-accent: #0f766e;
  --recipe-wash: #e7f5f1;
  background:
    linear-gradient(135deg, transparent 0 72%, color-mix(in srgb, var(--recipe-accent) 13%, transparent) 72% 100%),
    var(--recipe-wash);
  border: 1px solid color-mix(in srgb, var(--recipe-accent) 35%, var(--md-default-fg-color--lightest));
  border-radius: 0.6rem;
  box-shadow: 0.25rem 0.25rem 0 color-mix(in srgb, var(--recipe-accent) 26%, transparent);
  display: flex;
  flex-direction: column;
  min-height: 20rem;
  padding: 1.5rem;
  text-decoration: none;
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.recipe-card:hover {
  box-shadow: 0.45rem 0.45rem 0 color-mix(in srgb, var(--recipe-accent) 34%, transparent);
  color: var(--md-default-fg-color);
  transform: translate(-0.12rem, -0.12rem);
}

.recipe-card--obb {
  --recipe-accent: #b45309;
  --recipe-wash: #fff4db;
}

.recipe-card--world {
  --recipe-accent: #1d4ed8;
  --recipe-wash: #e8f0ff;
}

.recipe-card--faces {
  --recipe-accent: #7c3aed;
  --recipe-wash: #f3e8ff;
}

.recipe-card__eyebrow,
.recipe-card__tags {
  color: var(--recipe-accent);
  font-family: var(--md-code-font-family);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.recipe-card__title {
  color: var(--md-default-fg-color);
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 1.2rem;
}

.recipe-card__summary {
  font-size: 0.78rem;
  line-height: 1.55;
  margin-top: 0.9rem;
}

.recipe-card__tags {
  margin-top: auto;
  padding-top: 1.5rem;
}

.recipe-card__action {
  color: var(--recipe-accent);
  font-size: 0.78rem;
  font-weight: 700;
  margin-top: 0.65rem;
}

[data-md-color-scheme="slate"] .recipe-card {
  --recipe-wash: color-mix(in srgb, var(--recipe-accent) 16%, var(--md-default-bg-color));
}

@media screen and (max-width: 44.984375em) {
  .filter-comparison {
    grid-template-columns: 1fr;
  }
}