/* Wrap long lines in code blocks instead of horizontal scroll. */
.md-typeset pre > code {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Mermaid diagrams render inside a closed shadow root (Material's mermaid
   integration), so external CSS can never reach the generated <svg> itself —
   sizing has to be set via a `%%{init: {"flowchart"/"sequence": {"useMaxWidth":
   false}}}%%` directive on the first line of each diagram instead. This rule
   only does the part that's actually reachable: letting the light-DOM host
   element scroll horizontally once the diagram renders wider than the column. */
.md-typeset .mermaid {
  display: block;
  overflow-x: auto;
  /* `zoom` (not `transform`) because it also shrinks the layout box, not
     just the paint — and it's a rendering-level effect on the host element,
     so it reaches the shadow-DOM content inside unlike a CSS selector would. */
  zoom: 0.75;
}

/*
 * cosmoTRON retro-futuristic palette.
 * burgundy #811638 · teal #0B7978 · yellow #FCB632 · orange #F27238
 * red #C32327 · beige #DBCAB1 · peach #EAAD81 · cream #F3ECE1
 * Applied via Material's "custom" primary/accent hook — see
 * https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/#custom-colors
 */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #811638;
  --md-primary-fg-color--light: #a13a5c;
  --md-primary-fg-color--dark: #5c0f28;
  --md-primary-bg-color: #f3ece1;
  --md-primary-bg-color--light: #f3ece1;
  --md-accent-fg-color: #0b7978;
  --md-accent-fg-color--transparent: #0b797822;
  --md-accent-bg-color: #f3ece1;
  --md-accent-bg-color--light: #f3ece1;

  --md-default-bg-color: #f3ece1;
  --md-default-fg-color: #2c1810;
  --md-default-fg-color--light: #2c1810b3;
  --md-default-fg-color--lighter: #2c181066;
  --md-default-fg-color--lightest: #2c181022;
  --md-code-bg-color: #dbcab1;
  --md-code-fg-color: #2c1810;
  --md-typeset-mark-color: #fcb63266;
  --md-footer-bg-color: #811638;
  --md-footer-bg-color--dark: #5c0f28;
  --md-footer-fg-color: #f3ece1;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #2a0f1a;
  --md-primary-fg-color--light: #4a1c2c;
  --md-primary-fg-color--dark: #1a0810;
  --md-primary-bg-color: #eaad81;
  --md-primary-bg-color--light: #eaad81;
  --md-accent-fg-color: #fcb632;
  --md-accent-fg-color--transparent: #fcb63222;
  --md-accent-bg-color: #1a1210;
  --md-accent-bg-color--light: #1a1210;

  --md-default-bg-color: #1a1210;
  --md-default-fg-color: #f3ece1;
  --md-default-fg-color--light: #f3ece1b3;
  --md-default-fg-color--lighter: #f3ece166;
  --md-default-fg-color--lightest: #f3ece122;
  --md-code-bg-color: #241713;
  --md-code-fg-color: #eaad81;
  --md-typeset-mark-color: #fcb63255;
  --md-footer-bg-color: #2a0f1a;
  --md-footer-fg-color: #f3ece1;

  /* link color defaults to --md-primary-fg-color, near-black here — override
     so links stay legible against the dark body background. */
  --md-typeset-a-color: #eaad81;
}