/* docs/stylesheets/theme.css: the site takes its colours from the banner.
 *
 * banner.svg draws the name in white on #0b0b12, the tagline in lavender
 * #c4b5fd, and a mirror ball whose accent facet is violet #a78bfa. The header
 * and the dark page use the banner background, links the violet. mkdocs.yml
 * sets primary and accent to custom, so nothing is painted until these
 * variables exist.
 */
:root {
  --md-primary-fg-color: #0b0b12; /* banner background */
  --md-primary-fg-color--light: #1a1a24; /* the mirror ball's base */
  --md-primary-fg-color--dark: #050508;
  --md-primary-bg-color: #ffffff; /* banner wordmark */
  --md-primary-bg-color--light: #c4b5fd; /* banner tagline */

  --md-accent-fg-color: #a78bfa; /* banner accent facet */
  --md-accent-fg-color--transparent: #a78bfa1a;
}

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

/* Light scheme: #a78bfa on white is 2.7:1, too faint for body links.
   #7c3aed is the same hue at 5.7:1. */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #7c3aed;
}

/* 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 the wordmark: white and heavy.
   Only the first topic is styled; Material puts the page title in a second
   .md-header__topic and swaps them on scroll. */
.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 the header colour, which on the
   dark page is also the page background. 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: #ffffff;
}

.md-typeset .md-button--primary,
.md-typeset .md-button--primary:focus,
.md-typeset .md-button--primary:hover {
  /* White on #7c3aed is 5.7:1, on #6d28d9 7.1:1. */
  background: linear-gradient(90deg, #7c3aed 0%, #6d28d9 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 #a78bfa59;
}

/* Grid cards: the border picks up the accent on hover, matching the 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: #a78bfa;
}

/* 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: # web-mirror { .wm-visually-hidden } */
.md-typeset h1.wm-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;
}

/* File paths and constant names in tables, such as
   data/articles/topic/index.html, must not wrap mid-word. */
.md-typeset table:not([class]) code {
  word-break: normal;
}

/* The terminal screenshot keeps its own dark frame on the light scheme. */
.md-typeset img[src$="run.png"] {
  border-radius: 0.4rem;
}