/* aiforscientists.eu additions on top of the sibling site's home.css. */

/* Preview banner (Material announce bar). */
.md-banner {
  background: #fdf1e3;
  color: #6b3d05;
}

.afs-preview-banner {
  margin: 0;
  font-size: 0.72rem;
  text-align: center;
}

/* Recipe status badges. */
.afs-badge--tried {
  background: var(--afs-tint-2);
  color: var(--afs-accent-dark);
}

.afs-badge--reproduced {
  background: #d3efe9;
  color: #0b5c50;
}

/* Skill status: a brief is published, no local version listed yet. */
.afs-badge--brief {
  background: #f2e8c9;
  color: #7a5d00;
}

/* The copyable brief on each skill page: keep long lines readable. */
.md-typeset .afs-brief pre > code {
  white-space: pre-wrap;
}

/* Output-check levels, used in tables on the guide and skills pages. */
.afs-check {
  display: inline-block;
  padding: 0.05em 0.55em;
  border-radius: 1em;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.afs-check--machine {
  background: #d3efe9;
  color: #0b5c50;
}

.afs-check--expert {
  background: #f5e7c0;
  color: #7a5d00;
}

.afs-check--hard {
  background: #f7dcdc;
  color: #a12222;
}

/* Placeholder links (demo only). */
.md-typeset a.afs-placeholder {
  color: var(--afs-muted);
  text-decoration: underline dotted;
  cursor: not-allowed;
}

/* Two-by-two grid on the verifiability guide. */
.afs-quadrants {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin: 1.2rem 0 0.4rem;
}

.afs-quadrant {
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--afs-line);
  border-radius: 8px;
}

.afs-quadrant strong {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.afs-quadrant p {
  margin: 0;
  font-size: 0.74rem;
}

.afs-quadrant--danger { background: #fbeeee; border-color: #f0cccc; }
.afs-quadrant--danger strong { color: #a12222; }
.afs-quadrant--automate { background: #eaf6f3; border-color: #c9e8e0; }
.afs-quadrant--automate strong { color: #0b5c50; }
.afs-quadrant--human { background: var(--afs-soft); }
.afs-quadrant--human strong { color: var(--afs-muted); }
.afs-quadrant--underused { background: #ffffff; }
.afs-quadrant--underused strong { color: var(--afs-accent-dark); }

.afs-quadrants__axes {
  margin: 0 0 1.2rem;
  color: var(--afs-muted);
  font-size: 0.68rem;
  text-align: center;
}

@media screen and (max-width: 30em) {
  .afs-quadrants {
    grid-template-columns: 1fr;
  }
}

/* aiforscience.eu strip under the hero: a light band. The dark intro section
   below bulges up into it (the same curve as above the Contribute section). */
.afs-publication-strip {
  background: var(--afs-soft-2);
  color: var(--afs-ink);
}

.afs-publication-strip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 130vw;
  height: clamp(0.85rem, 2.1vw, 1.45rem);
  border-radius: 50%;
  background: var(--afs-dark-gradient);
  transform: translate(-50%, 50%);
}

.afs-publication-strip__grid {
  position: relative;
  z-index: 1;
  /* Bottom padding adds part of what the bulge covers at the centre (half the
     bulge height). Adding about three quarters of that looks centred, because
     the eye averages across the curved edge. */
  padding-top: 0.7rem;
  padding-bottom: calc(0.7rem + clamp(0.3125rem, 0.775vw, 0.5375rem));
}

.afs-publication-strip__note {
  color: var(--afs-muted);
}

.afs-publication-strip__link {
  color: var(--afs-accent-dark);
}

/* Three contribution cards on the home page. */
@media screen and (min-width: 60em) {
  .afs-involved-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* "The ten lessons" overview opens the Recipes nav section. It takes no number,
   so recipe N shows as N; styled like the failures log at the end. */
.md-nav--primary > .md-nav__list > .md-nav__item:first-child > .md-nav > .md-nav__list > .md-nav__item:first-child {
  counter-increment: none;
}

.md-nav--primary > .md-nav__list > .md-nav__item:first-child > .md-nav > .md-nav__list > .md-nav__item:first-child > .md-nav__link::before {
  content: none;
}

.md-nav--primary > .md-nav__list > .md-nav__item:first-child > .md-nav > .md-nav__list > .md-nav__item:first-child > .md-nav__link:not(.md-nav__link--active) {
  color: var(--afs-muted);
}

/* The preview banner's link sits on a light background. */
.afs-preview-banner a {
  color: #6b3d05;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Recipe icons, "Try this first", and the overview card grid.
   ------------------------------------------------------------------------- */
.afs-recipe-kicker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.afs-recipe-kicker__icon svg,
.afs-recipe-card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: var(--afs-accent);
}

.afs-recipe-kicker__icon {
  display: inline-flex;
  padding: 0.35rem;
  border-radius: 50%;
  background: var(--afs-tint-2);
}

.md-typeset .afs-try {
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--afs-accent);
  border-radius: 0 0.4rem 0.4rem 0;
  background: var(--afs-soft);
}

.md-typeset .afs-stage-head {
  margin-top: 1.6em;
}

.afs-recipe-grid {
  display: grid;
  gap: 0.8rem;
  margin: 0.8rem 0 1.2rem;
}

@media screen and (min-width: 45em) {
  .afs-recipe-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.md-typeset a.afs-recipe-card {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.8rem;
  row-gap: 0.25rem;
  padding: 1rem;
  border: 1px solid var(--afs-line);
  border-radius: 0.7rem;
  background: #ffffff;
  color: var(--afs-ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.md-typeset a.afs-recipe-card:hover,
.md-typeset a.afs-recipe-card:focus-visible {
  border-color: var(--afs-accent);
  box-shadow: var(--afs-shadow);
}

.afs-recipe-card__icon {
  grid-row: span 3;
  display: inline-flex;
  align-self: start;
  padding: 0.55rem;
  border-radius: 50%;
  background: var(--afs-tint-2);
}

.afs-recipe-card__num {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--afs-muted);
}

.afs-recipe-card__title {
  font-weight: 700;
  line-height: 1.3;
}

.afs-recipe-card__try {
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--afs-ink-2);
}

/* ---------------------------------------------------------------------------
   Figures drawn by hooks/figures.py. Doing research is blue, running research
   is terracotta (palette checked for colour-vision deficiency and contrast).
   ------------------------------------------------------------------------- */
.md-typeset .afs-figure {
  margin: 1.4rem 0;
}

.afs-fig {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--md-text-font-family, sans-serif);
}

.md-typeset .afs-figure figcaption {
  max-width: none;
  font-size: 0.68rem;
  color: var(--afs-muted);
  text-align: left;
}

.afs-fig text { fill: var(--afs-ink); font-size: 13px; }
.afs-fig .afs-fig__label { fill: var(--afs-ink-2); }
.afs-fig .afs-fig__value { fill: var(--afs-muted); font-size: 12px; }
.afs-fig .afs-fig__strong { fill: var(--afs-ink); font-weight: 700; }
.afs-fig .afs-fig__tick { fill: var(--afs-muted); font-size: 11px; }
.afs-fig .afs-fig__group { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; }
.afs-fig .afs-fig__group--doing { fill: #2a62a8; }
.afs-fig .afs-fig__group--running { fill: #8f3a1b; }
.afs-fig__grid { stroke: var(--afs-line); stroke-width: 1; }
.afs-fig__bar--doing, .afs-fig__dot--doing { fill: #2a62a8; }
.afs-fig__bar--doing-light { fill: #c6d6ee; }
.afs-fig__bar--running, .afs-fig__dot--running { fill: #b0532a; }
.afs-fig__bar--running-light { fill: #f1d4c3; }
.afs-fig__gap { fill: #ffffff; }
.afs-fig__hit { fill: transparent; }
.afs-fig__row:hover .afs-fig__hit { fill: var(--afs-soft); }
.afs-fig__row:hover .afs-fig__label { fill: var(--afs-ink); }

.afs-fig__cell--danger { fill: #fbe4df; }
.afs-fig__cell--automate { fill: #ddf0e8; }
.afs-fig__cell--human { fill: #eeeef2; }
.afs-fig__cell--underused { fill: #ffffff; stroke: #a7a3a0; stroke-width: 1.5; }
.afs-fig .afs-fig__qtitle { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; }
.afs-fig .afs-fig__qtitle--danger { fill: #b3261e; }
.afs-fig .afs-fig__qtitle--automate { fill: #0b5c50; }
.afs-fig .afs-fig__qtitle--human { fill: #4a3a32; }
.afs-fig .afs-fig__qtitle--underused { fill: #0b5c50; }
.afs-fig .afs-fig__item { font-size: 14px; }
.afs-fig__ring { fill: #ffffff; stroke: #b3261e; stroke-width: 2.2; }
.afs-fig__move { stroke: var(--afs-ink); stroke-width: 2.2; }
.afs-fig__arrowhead { fill: var(--afs-ink); }
.afs-fig__pill { fill: #ffffff; stroke: var(--afs-line); stroke-width: 1.2; }
.afs-fig .afs-fig__pilltext { font-size: 13px; font-weight: 700; }
.afs-fig__axis { stroke: var(--afs-muted); stroke-width: 1.5; }
.afs-fig__axishead { fill: var(--afs-muted); }
.afs-fig .afs-fig__axislabel { fill: var(--afs-muted); font-size: 12px; }

/* On narrow screens the charts keep a readable size and scroll sideways. */
.md-typeset .afs-figure {
  overflow-x: auto;
}

@media screen and (max-width: 35em) {
  .afs-fig {
    min-width: 34rem;
  }
}

/* Stage headers inside the home page's recipe box. */
.afs-hero-index__stage {
  display: block;
  margin: 0.9rem 0 0.15rem;
  color: #f2a27f;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.afs-hero-index__stage:first-child {
  margin-top: 0;
}