/* Match the docs to the banner and the logo.
 *
 * banner.svg draws the name in white on a #20163A panel with a darker #171029
 * road strip and a #3B2C63 kerb line, the tagline in lavender #D7B8E3, and
 * hangs a hazard-yellow #FFC928 bar from the gantry that is also the logo.
 * These values keep the header, the logo and the page in one palette.
 */
:root {
  --md-primary-fg-color: #20163a; /* banner panel */
  --md-primary-fg-color--light: #3b2c63; /* banner kerb line */
  --md-primary-fg-color--dark: #171029; /* banner road strip */
  --md-primary-bg-color: #ffffff; /* banner title text */
  --md-primary-bg-color--light: #d7b8e3; /* banner tagline text */

  --md-accent-fg-color: #ffc928; /* banner hazard bar */
  --md-accent-fg-color--transparent: #ffc9281a;
}

/* Dark scheme: the page body uses the banner background too, so the header
   and the page read as one surface. #ffc928 on #20163a is 11.0:1. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #20163a;
  --md-code-bg-color: #171029;
  --md-typeset-a-color: #ffc928;
}

/* Light scheme: #ffc928 on white is 1.5:1, unreadable as a link. The lorry's
   purple trim #7e3f95 from the banner is 6.9:1 on white. */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #7e3f95;
}

/* Fixed logo size so it does not crowd the site name. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.6rem;
  width: 1.6rem;
}

/* The site name, set the way banner.svg sets it: white and heavy.
 *
 * Only the first topic is styled. Material puts the site name in one
 * .md-header__topic and the page title in a second one, and swaps them on
 * scroll. Styling both would change every page title too. */
.md-header__topic:first-child .md-ellipsis {
  color: #ffffff;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Keep the mark and the name close, so they read as one unit. */
.md-header__button.md-logo {
  padding-right: 0.2rem;
}

.md-header__title {
  margin-left: 0.2rem;
}

/* Buttons.
 *
 * Material paints .md-button in --md-primary-fg-color, the header colour. On
 * the dark page that is also the page background, so a button would show as
 * plain text. Outline buttons take the link colour instead. */
.md-typeset .md-button {
  color: var(--md-typeset-a-color);
  border-color: var(--md-typeset-a-color);
  border-radius: 0.5rem;
}

.md-typeset .md-button:focus,
.md-typeset .md-button:hover {
  background-color: var(--md-typeset-a-color);
  border-color: var(--md-typeset-a-color);
  color: #20163a;
}

.md-typeset .md-button--primary,
.md-typeset .md-button--primary:focus,
.md-typeset .md-button--primary:hover {
  /* White on #7e3f95 is 6.9:1 and on #6b3a85 8.2:1. */
  background: linear-gradient(90deg, #7e3f95 0%, #6b3a85 100%);
  border-color: transparent;
  color: #ffffff;
}

.md-typeset .md-button--primary:focus,
.md-typeset .md-button--primary:hover {
  box-shadow: 0 0.2rem 0.8rem #ffc92859;
}

/* Grid cards: the border picks up the accent on hover, so the cards match
   the buttons and links. */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border-radius: 0.5rem;
}

.md-typeset .grid.cards > ul > li:focus-within,
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:focus-within,
.md-typeset .grid > .card:hover {
  border-color: #ffc928;
}

/* Four cards in two rows of two. With the table of contents hidden on the
   home page the content is wide enough for three, which leaves one card alone
   on the second row. The grid is the .grid element itself; Material sets the
   list inside it to display: contents. */
@media screen and (min-width: 45em) {
  .md-typeset .grid.cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Question admonitions (??? question). Material draws them lime green, a
   colour that appears nowhere else here; use the accent instead. */
.md-typeset .admonition.question,
.md-typeset details.question {
  border-color: #ffc928;
}

.md-typeset .admonition.question:focus-within,
.md-typeset details.question:focus-within {
  box-shadow: 0 0 0 0.2rem #ffc9281a;
}

.md-typeset .question > .admonition-title::after,
.md-typeset .question > summary::after {
  color: #ffc928;
}

.md-typeset .question > .admonition-title,
.md-typeset .question > summary {
  background-color: #ffc9281a;
}

.md-typeset .question > .admonition-title::before,
.md-typeset .question > summary::before {
  background-color: #ffc928;
}

/* The home page keeps an H1 for search, screen readers and the browser tab.
   The banner under it already shows the name, so the H1 is hidden visually.
   Use it as: # Quality Gate { .qg-visually-hidden } */
.md-typeset h1.qg-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Setting names in tables, such as KeepWithinCapVersionsDirect, must not wrap
   mid-word. Material sets word-break: break-word on code; normal keeps a name
   whole but still lets a long log line wrap at its spaces. */
.md-typeset table:not([class]) code {
  word-break: normal;
}

/* The desktop screenshots on the home page: two in a row on a wide screen,
   one on a narrow one, each with a short caption. */
.md-typeset .qg-shot-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
  margin: 1em 0;
}

.md-typeset .qg-shot-gallery figure {
  margin: 0;
}

.md-typeset .qg-shot-gallery img {
  border-radius: 0.4rem;
}

.md-typeset .qg-shot-gallery figcaption {
  margin-top: 0.3rem;
  font-size: 0.7rem;
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .qg-shot-gallery {
    grid-template-columns: 1fr;
  }
}