/* The guide's own rules over Material's: the page stamp, the language box, narrow screens
   and print. Colours come from Material's variables, so both themes are covered by one rule. */

.guide-stamp {
  margin-top: 3rem;
  padding-top: 0.8rem;
  border-top: 0.05rem solid var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color--light);
  font-size: 0.68rem;
  overflow-wrap: anywhere;
}

.guide-stamp code {
  font-size: 0.64rem;
}

/* Links and code at WCAG AA contrast in both themes. Material's default primary is indigo, which
   reads on white and falls to about 3:1 on the dark background; code in a link takes the link's
   colour over the code background, which is the lowest of all. The light theme keeps a darker
   shade of the same blue, the dark theme a lighter one. */
[data-md-color-scheme="default"],
[data-md-color-scheme="default"][data-md-color-primary] {
  --md-typeset-a-color: #303f9f !important;
}

[data-md-color-scheme="slate"],
[data-md-color-scheme="slate"][data-md-color-primary] {
  --md-typeset-a-color: #a5b4fc !important;
  --md-code-fg-color: #e6e8ee !important;
}

.md-typeset a code {
  color: inherit;
}

/* A wide table scrolls inside its own box, never the page: readable at 320 px. */
.md-typeset__table {
  max-width: 100%;
}

.md-typeset__scrollwrap {
  overflow-x: auto;
}

.md-typeset code {
  overflow-wrap: anywhere;
}

/* Inline diagrams draw in the text colour, so they read in both themes. */
.md-typeset svg.guide-diagram {
  max-width: 100%;
  height: auto;
  color: var(--md-default-fg-color);
}

@media print {
  .md-header,
  .md-tabs,
  .md-sidebar,
  .md-footer,
  .md-top,
  .md-search,
  .md-content__button,
  .headerlink {
    display: none !important;
  }

  .md-main__inner,
  .md-content,
  .md-content__inner {
    margin: 0 !important;
    max-width: none !important;
  }

  /* Code never clips on paper: long lines wrap. */
  .md-typeset pre > code {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere;
  }

  .md-typeset__scrollwrap {
    overflow: visible !important;
  }

  .md-typeset a {
    color: inherit;
    text-decoration: underline;
  }
}