/* The desktop app's colours: navy header, cyan accent. */
:root {
  --md-primary-fg-color: #022757;
  --md-primary-fg-color--light: #0b3d7a;
  --md-primary-fg-color--dark: #011b3d;
  --md-accent-fg-color: #0aa2b5;
  --md-accent-fg-color--transparent: rgba(10, 162, 181, 0.1);
}

[data-md-color-scheme="default"] {
  --md-typeset-a-color: #077d8c;
}

[data-md-color-scheme="slate"] {
  --md-accent-fg-color: #3cc6d6;
  --md-typeset-a-color: #3cc6d6;
}

/* Outlined buttons take the primary colour, which is too dark to see on the dark background. */
[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary) {
  color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
}

/* One step smaller than Material's default on wide screens, where it scales text up. */
@media screen and (min-width: 100em) {
  html {
    font-size: 125%;
  }
}

@media screen and (min-width: 125em) {
  html {
    font-size: 137.5%;
  }
}

/* The home page's title is in its banner image; keep the heading for screen readers and search. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Screenshots and figures get the same soft rounding as the app's cards. */
.md-typeset img {
  border-radius: 0.4rem;
}

/* A section never starts beside the previous section's floated screenshot. */
.md-typeset h2 {
  clear: both;
}