/* Colours only, per §31: this site is Material for MkDocs wearing SESKit's
   brand, not a theme rewritten from scratch. Restyling a documentation theme is
   a way to spend a week and end up with something less accessible than what
   shipped.

   #0166f8 is sampled from the logo mark and is the same value the dashboard
   uses for --accent, so a reader moving between the docs and a running
   instance does not feel handed off to a different product.

   Material has no built-in palette at this hue, which is why mkdocs.yml sets
   `primary: custom` and the values live here. */

:root {
  --md-primary-fg-color: #0166f8;
  --md-primary-fg-color--light: #3d8bff;
  --md-primary-fg-color--dark: #0154cf;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #ffffffb3;

  /* Links and interactive accents. Slightly darkened from the brand blue,
     because Material puts this on body-text-sized runs against white where
     #0166f8 sits at 4.93:1 — passing, but with nothing spare. */
  --md-accent-fg-color: #0154cf;
  --md-accent-fg-color--transparent: #0166f81a;
}

[data-md-color-scheme="slate"] {
  /* The header, not the accent.

     Material paints the header bar with --md-primary-fg-color. Carrying the
     lifted blue up here made a bright bar across the top of a dark page, and
     the measurements were bad in both directions: the white site title sat at
     3.00:1 against it, under the 4.5 it needs, and the pale logo at 2.64:1,
     under the 3.0 a graphic needs. A dark bar takes those to 17.28:1 and
     15.19:1 and stops the page shouting before it says anything. */
  --md-primary-fg-color: #171b21;
  --md-primary-bg-color: #e8ecf2;

  /* Links keep the lifted blue - 6.48:1 on the dark page background. */
  --md-accent-fg-color: #6aa5ff;
  --md-typeset-a-color: #4d94ff;

  /* Material's default slate is a touch blue-grey; this sits closer to the
     dashboard's own dark surface. */
  --md-default-bg-color: #0f1115;
}

/* The header logo is a transparent PNG of the mark. Material sizes these to
   1.2rem by default, which leaves it looking incidental next to the site name. */
.md-header__button.md-logo img {
  height: 1.6rem;
  width: 1.6rem;
}

/* The ASCII diagrams on the home page and in the guides carry meaning in their
   alignment, so they must not wrap or shrink into illegibility on a phone.
   They scroll inside their own block instead — the page body never does. */
.md-typeset pre > code {
  overflow-x: auto;
}