/* Every page: the few theme touches that make the docs match the home page
   (docs/assets/home/home.css). The teals are the same values as there.
   Layout, sidebars, admonitions and code blocks stay the theme's own.

   The palette sets link colours per primary colour, on the same two
   attributes used here; this file loads after it, so these win. */

[data-md-color-scheme="default"][data-md-color-primary] {
  --md-typeset-a-color: #0f766e;
  --md-accent-fg-color: #0f766e;
  --md-accent-fg-color--transparent: rgba(15, 118, 110, .10);
}

/* Links and the contents list take a quieter teal than the accent: the bright
   one is for highlights (the sidebar's current page), not running text. */
[data-md-color-scheme="slate"][data-md-color-primary] {
  --md-typeset-a-color: #45b3a6;
  --md-accent-fg-color: #5eead4;
  --md-accent-fg-color--transparent: rgba(94, 234, 212, .12);
}

/* The sidebar's current page keeps the accent; the theme would otherwise
   give it the link colour. */
.md-nav--primary .md-nav__link--active {
  color: var(--md-accent-fg-color);
}

/* Contents-list hover matches its current entry, not the accent. */
.md-nav--secondary .md-nav__link[href]:hover,
.md-nav--secondary .md-nav__link[href]:focus {
  color: var(--md-typeset-a-color);
}

/* Headings: the home page's weight and tracking. */
.md-typeset h1 {
  font-weight: 600;
  letter-spacing: -.03em;
}
.md-typeset h2 {
  font-weight: 600;
  letter-spacing: -.025em;
}

/* Cards (grid cards on index pages): a hairline border and a teal edge on
   hover, as on the home page, in place of a lifted shadow. */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 14px;
}
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > ul > li:focus-within,
.md-typeset .grid > .card:hover,
.md-typeset .grid > .card:focus-within {
  border-color: var(--md-accent-fg-color);
  box-shadow: none;
}

/* Two diagrams drawn from plain Markdown lists, in the home page's style.
   Wrap the list in <div class="ax-steps" markdown> or <div class="ax-flow"
   markdown>; GitHub's Markdown view ignores the class and shows the list. */

.md-typeset .ax-steps > ol,
.md-typeset .ax-flow > ul {
  list-style: none;
  margin: 1.2em 0;
  padding: 0;
}
.md-typeset .ax-steps > ol > li,
.md-typeset .ax-flow > ul > li {
  position: relative;
  margin: 0;
  padding: .7rem .9rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 14px;
  background: color-mix(in srgb, var(--md-default-fg-color) 3%, var(--md-default-bg-color));
  color: var(--md-default-fg-color--light);
}
.md-typeset .ax-steps li > p,
.md-typeset .ax-flow li > p { margin: .3em 0 0; }
.md-typeset .ax-steps li > :first-child,
.md-typeset .ax-flow li > :first-child { margin-top: 0; }
.md-typeset .ax-steps li strong,
.md-typeset .ax-flow li strong { color: var(--md-default-fg-color); font-weight: 600; }

/* Who acts in a step: a pipeline, you, a reviewer. */
.md-typeset .ax-who {
  display: inline-block;
  margin-right: .5em;
  padding: 0 .55em;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 999px;
  font-family: var(--md-code-font-family);
  font-size: .85em;
  color: var(--md-accent-fg-color);
}

/* Steps: numbered, joined by the route line. */
.md-typeset .ax-steps > ol { counter-reset: ax-step; }
.md-typeset .ax-steps > ol > li {
  counter-increment: ax-step;
  margin: 0 0 .6rem 2.4rem;
}
.md-typeset .ax-steps > ol > li::before {
  content: counter(ax-step, decimal-leading-zero);
  position: absolute;
  left: -2.4rem;
  top: .65rem;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border: 2px solid var(--md-accent-fg-color);
  border-radius: 50%;
  background: var(--md-default-bg-color);
  font-family: var(--md-code-font-family);
  font-size: .55rem;
  color: var(--md-accent-fg-color);
}
.md-typeset .ax-steps > ol > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(-2.4rem + .75rem - 1px);
  top: 2.15rem;
  bottom: calc(-.6rem - .65rem);
  width: 2px;
  background: var(--md-accent-fg-color);
  opacity: .3;
}

/* Flow: cards left to right, an arrow between each; top to bottom on a phone. */
.md-typeset .ax-flow > ul {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 1.6rem;
}
.md-typeset .ax-flow > ul > li + li::before {
  content: "→";
  position: absolute;
  left: -1.3rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--md-accent-fg-color);
  font-size: 1rem;
}
@media (max-width: 44.9375em) {
  .md-typeset .ax-flow > ul { grid-auto-flow: row; gap: 1.4rem; }
  .md-typeset .ax-flow > ul > li + li::before {
    content: "↓";
    left: 50%;
    top: -1.25rem;
    transform: translateX(-50%);
  }
}