/* Restrained typography: a readable measure, quiet headings, and figures that take their
   colors from the page so they read the same in light and dark schemes. */

/* Declared on the element that carries the color scheme, so each var() resolves against
   that scheme's Material colors rather than the light defaults on :root. */
[data-md-color-scheme] {
  --fig-ink: var(--md-default-fg-color);
  --fig-muted: var(--md-default-fg-color--light);
  --fig-faint: var(--md-default-fg-color--lightest);
  --fig-accent: #3f51b5;
  --fig-fill: #f3f4f8;
  --fig-accent-fill: #eceffb;
}

[data-md-color-scheme="slate"] {
  --fig-faint: rgba(226, 228, 233, 0.22);
  --fig-accent: #8c9eff;
  --fig-fill: #2c2f3b;
  --fig-accent-fill: #2b3150;
}

.md-typeset {
  font-size: 0.82rem;
  line-height: 1.65;
}

/* About 80 characters a line for prose. Tables, code and figures may use the full width. */
.md-typeset > p,
.md-typeset > ul,
.md-typeset > ol,
.md-typeset > dl,
.md-typeset > .admonition {
  max-width: 38em;
}

.md-typeset h1 {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--md-default-fg-color);
}

.md-typeset h2 {
  font-weight: 600;
  margin-top: 2.2em;
}

.md-typeset h3,
.md-typeset h4 {
  font-weight: 600;
}

/* The lede: the first paragraph of a page, set slightly larger so the gist reads first. */
.md-typeset .lede {
  font-size: 1.05em;
  color: var(--md-default-fg-color);
  max-width: 36em;
}

.md-typeset .admonition,
.md-typeset details {
  font-size: 0.74rem;
}

.md-typeset dt {
  font-weight: 600;
  margin-top: 1.1em;
}

.md-typeset dd {
  margin-top: 0.25em;
}

/* Tables */

.md-typeset table:not([class]) {
  font-size: 0.74rem;
  display: table;
  width: 100%;
}

/* Keep an identifier or a path whole; let prose and messages wrap at spaces. */
.md-typeset table:not([class]) td code {
  word-break: normal;
  overflow-wrap: normal;
}

/* Code and program output */

/* Program output is read, not copied character by character: wrap long lines rather than
   hide the end of a message behind a horizontal scroll. */
.md-typeset .language-text pre > code {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Leave room for the copy button at the end of the first line. */
.md-typeset pre > code {
  padding-right: 2.4em;
}

/* Figures */

.md-typeset figure.diagram {
  /* Material sizes a figure to fit its content, which would let the caption set the
     drawing's width. A diagram takes the column instead. */
  display: block;
  width: 100%;
  margin: 2em 0;
  max-width: 100%;
}

.md-typeset figure.diagram svg {
  width: 100%;
  height: auto;
  max-width: 46rem;
  display: block;
  margin: 0 auto;
}

.md-typeset figure.diagram figcaption {
  max-width: 46rem;
  margin: 0.8em auto 0;
  font-size: 0.72rem;
  font-style: normal;
  color: var(--fig-muted);
  text-align: left;
}

.diagram svg text {
  font-family: var(--md-text-font-family);
  fill: var(--fig-ink);
  font-size: 13.5px;
}

.diagram svg .small { font-size: 11.5px; fill: var(--fig-muted); }
.diagram svg .title { font-weight: 600; }
.diagram svg .mono  { font-family: var(--md-code-font-family); font-size: 11.5px; }

.diagram svg .box        { fill: var(--fig-fill); stroke: var(--fig-faint); stroke-width: 1; }
.diagram svg .box-accent { fill: var(--fig-accent-fill); stroke: var(--fig-accent); stroke-width: 1.25; }
.diagram svg .box-plain  { fill: none; stroke: var(--fig-faint); stroke-width: 1; }
.diagram svg .box-plain.dashed { stroke: var(--fig-muted); }

.diagram svg .edge        { fill: none; stroke: var(--fig-muted); stroke-width: 1.25; }
.diagram svg .edge-accent { fill: none; stroke: var(--fig-accent); stroke-width: 1.5; }
.diagram svg .dashed      { stroke-dasharray: 5 4; }
.diagram svg .dotted      { stroke-dasharray: 1.5 3.5; stroke-linecap: round; }

.diagram svg .arrowhead        { fill: var(--fig-muted); }
.diagram svg .arrowhead-accent { fill: var(--fig-accent); }
.diagram svg .accent-text      { fill: var(--fig-accent); }

/* Phones: keep figures and key tables at a readable size and let them scroll sideways,
   rather than shrinking them until nothing can be read. */
@media screen and (max-width: 44.9375em) {
  .md-typeset figure.diagram {
    overflow-x: auto;
  }

  .md-typeset figure.diagram svg {
    min-width: 720px;
  }

  .md-typeset table:not([class]) th,
  .md-typeset table:not([class]) td {
    padding: 0.5em 0.6em;
  }

  .md-typeset table:not([class]) td:last-child {
    min-width: 11rem;
  }

  .md-typeset .headerlink {
    display: none;
  }
}