/* docs/stylesheets/theme.css: the site takes its colours from the banner.
 *
 * banner.svg sets the wordmark in #10233f on a #e9eef4 plate and draws a
 * floppy disk with a #1f4e8c body and a #e25b45 line on its label. The header
 * uses the wordmark colour, the text on it the plate colour, and the accent is
 * the label's red. mkdocs.yml sets primary and accent to custom, so nothing is
 * painted until these variables exist.
 */
:root {
  --md-primary-fg-color: #10233f; /* banner wordmark, used as the header */
  --md-primary-fg-color--light: #152d51;
  --md-primary-fg-color--dark: #0c1b31;
  --md-primary-bg-color: #e9eef4; /* banner plate: text on the header, 13.5:1 */
  --md-primary-bg-color--light: #c6ccd3; /* the disk's shutter */

  --md-accent-fg-color: #e25b45; /* the red line on the disk's label */
  --md-accent-fg-color--transparent: #e25b451a;
}

/* Dark scheme: the page body uses the header colour too, so the header and
   the page read as one surface. The disk's #1f4e8c is 1.9:1 on #10233f;
   #82ace3 is the same hue at 6.7:1. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #10233f;
  --md-code-bg-color: #152d51;
  --md-typeset-a-color: #82ace3;
}

/* Light scheme: the disk's own #1f4e8c is 8.3:1 on white. */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #1f4e8c;
}

/* 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 "unsent": heavy and tight.
   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: #e9eef4;
  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);
  /* The page colour on the link colour: #10233f on #82ace3 is 6.7:1 in the
     dark scheme, white on #1f4e8c 8.3:1 in the light one. */
  color: var(--md-default-bg-color);
}

.md-typeset .md-button--primary,
.md-typeset .md-button--primary:focus,
.md-typeset .md-button--primary:hover {
  /* White on #1f4e8c is 8.3:1, on #173b6a more. */
  background: linear-gradient(90deg, #1f4e8c 0%, #173b6a 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 #e25b4559;
}

/* 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: #e25b45;
}

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

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