/* Typography ---------------------------------------------------------------
   UM's house style is Thesis Sans (LucasFonts, licensed, not distributable). The
   university's own web guidance substitutes Open Sans, "because it resembles Thesis
   Sans and meets web standards", and that is what UM's library site runs on.

   Served from this repository rather than from Google Fonts: the four faces below are
   subset to Latin and weigh about 67 kB in total, which is a fair price for a page
   that makes no third-party request and can be archived whole. Open Sans is
   Apache-2.0; the licence travels with the files in assets/fonts/.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/open-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/open-sans-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/open-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/open-sans-700.woff2") format("woff2");
}

/* UM house style -----------------------------------------------------------
   Three colours, taken from the department's own logo, which is drawn in the UM
   palette: #001C3D is the house-style dark blue, and the accent blue and orange are
   the two the mark itself uses.

     --tgx-navy    #001C3D   headers, the primary colour
     --tgx-blue    #00A2DB   the logo's blue
     --tgx-orange  #E84E10   the logo's orange

   UM's own library documents that the house-style colours as published do not meet
   WCAG contrast, and works from darkened variants for text. The same is done here:
   #00A2DB reaches only 2.9:1 on white, so links in light mode use #0076A8 (5.1:1) and
   in dark mode #4FC3F0 (8.5:1) against the slate ground. The logo keeps its own
   colours; only text and interface elements are adjusted.
   -------------------------------------------------------------------------- */
:root {
  --tgx-navy: #001c3d;
  --tgx-blue: #00a2db;
  --tgx-orange: #e84e10;

  --md-primary-fg-color: var(--tgx-navy);
  --md-primary-fg-color--light: #123a63;
  --md-primary-fg-color--dark: #00132a;
  --md-primary-bg-color: #fff;
  --md-primary-bg-color--light: #ffffffb3;

  /* Links and hover, straight from the house style. */
  --tgx-link: #1e5a96;
  --tgx-link-hover: #d2460f;
  --tgx-accent: var(--tgx-link);
  --md-accent-fg-color: var(--tgx-link-hover);
  --md-accent-fg-color--transparent: #d2460f14;
  --md-typeset-a-color: var(--tgx-link);

  --md-text-font: "Open Sans";
  --tgx-header-height: 4.4rem;

  /* Secondary text: labels, captions, the identifier under a link. Material's own
     --md-default-fg-color--light is rgba(0,0,0,.54), which lands at about 4.0:1 on
     these grounds and under 3.5:1 once anything adds opacity on top. Measured values
     that clear 4.5:1 against both the page and the slightly darker tile. */
  --tgx-muted: #565c66;

  /* What an accent is mixed toward before it is used as text. The six chart colours
     are chosen to work as fills; as 13px bold type on a tile they reach only 2.5:1
     to 3.7:1, well under the 4.5:1 body-text threshold. Mixing 70% of the accent
     with the opposite of the ground clears 4.5:1 for all six in both themes and
     still leaves each one recognisably its own colour. */
  --tgx-ink-mix: #000;
}

/* Body copy at the house-style size and colour: 18px, #333, 1.6 line height. */
.md-typeset { font-size: .9rem; }
[data-md-color-scheme="default"] .md-typeset { color: #333; }

/* Headings: weight 600 in UM blue. In slate they keep the scheme's own foreground --
   navy on a near-black ground is unreadable, and the house style has no dark mode. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 { font-weight: 600; letter-spacing: 0; }
[data-md-color-scheme="default"] .md-typeset h1,
[data-md-color-scheme="default"] .md-typeset h2,
[data-md-color-scheme="default"] .md-typeset h3,
[data-md-color-scheme="default"] .md-typeset h4,
[data-md-color-scheme="default"] .md-typeset h5,
[data-md-color-scheme="default"] .md-typeset h6 { color: var(--tgx-navy); }

/* Underlined links with a 2px offset, turning orange on hover. */
.md-typeset a { text-decoration: underline; text-underline-offset: 2px; }
.md-typeset a:hover,
.md-typeset a:focus { color: var(--tgx-link-hover); }
/* Cards are links, but they are blocks with their own affordance. */
.md-typeset a.tgx-card { text-decoration: none; }

/* Blockquotes take the accent, as on UM's own pages. */
.md-typeset blockquote { border-left-color: var(--tgx-link-hover); }

/* Slate. The house style documents no dark mode, so this is an extension of it rather
   than a quotation: the header keeps UM blue, and link colours lighten until they
   clear the dark ground -- #1E5A96 manages 2.4:1 there and would be unreadable. */
[data-md-color-scheme="slate"] {
  --tgx-muted: #a7b0bd;
  --tgx-ink-mix: #fff;
  --tgx-link: #4fc3f0;
  --tgx-link-hover: #ff8a5c;
  --tgx-accent: var(--tgx-link);
  --md-primary-fg-color: var(--tgx-navy);
  --md-accent-fg-color: var(--tgx-link-hover);
  --md-accent-fg-color--transparent: #ff8a5c1f;
  --md-typeset-a-color: var(--tgx-link);
}

/* A deeper banner, because the department's mark is a landscape lockup and Material's
   2.4rem bar leaves it the height of a favicon. Everything that is positioned against
   the header reads the same variable, so the three stay in step. */
.md-header__inner { min-height: var(--tgx-header-height); }
.md-header__button.md-logo { padding: .35rem .7rem; }
.md-header__button.md-logo img { height: 3.1rem; width: auto; }
.md-header__title { font-size: .95rem; }
html { scroll-padding-top: var(--tgx-header-height); }
@media screen and (min-width: 76.25em) {
  .md-sidebar { top: var(--tgx-header-height); }
}

/* Sections, in the header ------------------------------------------------
   Rendered by overrides/partials/header.html into the header row itself. Material's
   own tab bar was a second full-width strip for three links, and everything anchored
   on the page had to clear both.

   The colours are the header's, not the page's: this sits on UM blue in both themes,
   so the palette here is fixed rather than following the scheme. */
.tgx-nav {
  display: none;
  align-items: center;
  gap: .3rem;
  margin-left: .9rem;
  flex: 0 0 auto;
}
@media screen and (min-width: 60em) {
  .tgx-nav { display: flex; }
}
.tgx-nav__link {
  padding: .3rem .7rem;
  border: 1px solid #ffffff2e;
  border-radius: .35rem;
  color: var(--md-primary-bg-color);
  font-size: .7rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  opacity: .82;
  transition: background-color .12s ease, border-color .12s ease, opacity .12s ease;
}
.tgx-nav__link:hover,
.tgx-nav__link:focus-visible {
  opacity: 1;
  background-color: #ffffff1a;
  border-color: #ffffff5c;
}
/* The page you are on, stated rather than implied by a slightly brighter grey. */
.tgx-nav__link--active {
  opacity: 1;
  background-color: var(--tgx-blue);
  border-color: var(--tgx-blue);
  color: var(--tgx-navy);
  font-weight: 600;
}
/* With the sections in the header, the page name beside the site name says the same
   thing twice. The site name stays; Material's scroll swap has nothing to swap to. */
@media screen and (min-width: 60em) {
  .md-header__title .md-header__topic + .md-header__topic { display: none; }
  .md-header__title .md-header__topic:first-child {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto;
    z-index: 0;
  }
}

/* The footer ---------------------------------------------------------------
   UM blue, with the department's mark and the university's on it. Both are white
   versions on the navy ground, which is what the house style asks for; the UM mark is
   a single-colour vector recoloured to white rather than filtered, so it keeps its
   shapes exactly. */
.tgx-footer {
  background-color: var(--tgx-navy);
  color: #ffffffd9;
  font-size: .72rem;
}
.tgx-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2rem;
  padding: 1.5rem .8rem;
}
.tgx-footer__marks {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  flex-wrap: wrap;
}
/* Sized to look equal rather than to measure equal: the TGX lockup is wider and
   lighter than the UM one, so matching their heights makes UM look oversized. */
.tgx-footer__tgx { height: 2.4rem; width: auto; display: block; }
.tgx-footer__um { height: 1.9rem; width: auto; display: block; }

.tgx-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.1rem;
}
.tgx-footer__links a {
  color: #ffffffd9;
  text-decoration: none;
  white-space: nowrap;
}
.tgx-footer__links a:hover,
.tgx-footer__links a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The disclaimer, on its own darker band. It is the last thing on the page on
   purpose: it is the sentence that matters if anyone tries to use these numbers to
   rank a person. */
.tgx-footer__note {
  background-color: #00132a;
  font-size: .66rem;
  line-height: 1.6;
  color: #ffffffa6;
}
.tgx-footer__note .md-grid { padding: .85rem .8rem; }

/* A dashboard reads better wider than Material's default prose measure. */
.md-grid { max-width: 78rem; }

/* With every page in the tab bar, the left sidebar holds one link to the page already
   open and still charges the content 266px for it. Hidden only above the width where
   the tabs are actually drawn -- below that Material collapses the same nav into the
   hamburger drawer, which is the only way to reach the other pages on a phone. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary { display: none; }
}

/* Keyboard focus ----------------------------------------------------------
   Material sets `outline: none` widely and re-adds a ring only for the controls it
   ships. Everything this stylesheet makes interactive -- the header sections, a tile's
   collapsed lists and the links inside them, the summary cards, the footer -- needs
   its own, or the page is unusable without a mouse. A ring rather than a colour
   change, because a colour change is invisible to anyone who cannot see the colour.
   -------------------------------------------------------------------------- */
.tgx-nav__link:focus-visible,
.tgx-card:focus-visible,
.md-typeset .tgx-drop > summary:focus-visible,
.md-typeset .tgx-drop-list a:focus-visible,
.tgx-footer__links a:focus-visible {
  outline: 2px solid var(--tgx-accent);
  outline-offset: 2px;
  border-radius: .25rem;
}
/* On the header and the footer the ring sits on UM blue, where the link colour has
   too little contrast to read as a ring. */
.tgx-nav__link:focus-visible,
.tgx-footer__links a:focus-visible {
  outline-color: #fff;
}

/* Motion is decoration here -- a caret that turns, a border that warms on hover.
   None of it carries meaning, so all of it goes when the reader has asked for less. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Summary cards ----------------------------------------------------------- */
/* Seven cards, stated outright rather than left to auto-fit -- an automatic track
   count leaves an orphan on a short second row, which reads as though the last card
   were an afterthought. One row where there is width for it, four and three where
   there is not. Revisit the counts here if the number of cards changes again. */
.tgx-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
  margin: 1.2rem 0 2rem;
}
@media screen and (min-width: 50em) {
  .tgx-cards { grid-template-columns: repeat(4, 1fr); }
}
@media screen and (min-width: 72em) {
  .tgx-cards { grid-template-columns: repeat(7, 1fr); }
}
.tgx-card {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: .5rem;
  padding: .8rem .9rem;
  background: var(--md-code-bg-color);
  text-decoration: none;
  color: inherit;
  transition: border-color .12s ease;
}
.tgx-card:hover { border-color: var(--tgx-accent); }
.tgx-card-label {
  display: flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
  font-size: .68rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tgx-muted);
}
/* Monochrome on purpose. Ten registry logos in ten brand colours turn the strip into
   a colour chart and pull the eye away from the numbers, which are the point. */
.tgx-card-label .tgx-icon {
  flex: 0 0 auto;
  width: .95rem;
  height: .95rem;
  opacity: .75;
  transition: color .12s ease, opacity .12s ease;
}
.tgx-card:hover .tgx-icon { color: var(--tgx-accent); opacity: 1; }
.tgx-card-value { font-size: 1.45rem; font-weight: 600; line-height: 1.15; }
.tgx-card-sub { font-size: .7rem; color: var(--tgx-muted); }

/* Project tiles -----------------------------------------------------------
   Ten projects as a table read as ten rows of one thing, and invited exactly the
   comparison the page argues against: a column of downloads holds Bioconductor's
   lifetime total next to npm's rolling month. A tile keeps each project's numbers
   with the project.

   The colour is deliberately rationed the way the house style asks: the ground and
   the type stay neutral, and the accent appears only in the monogram and the rule
   above it. Ten filled tiles would be a paint chart.
   -------------------------------------------------------------------------- */
/* Column counts stated outright rather than left to auto-fit. Ten tiles divide badly:
   auto-fit settled on two wide columns at desktop widths and left each tile far wider
   than its own content needed, and the count changed under the table-of-contents on
   some pages and not others. Three across is the widest that keeps the two-column
   block of statistics inside each tile readable. */
.tgx-projects {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.4rem 0 1.6rem;
}
@media screen and (min-width: 45em) {
  .tgx-projects { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (min-width: 68em) {
  .tgx-projects { grid-template-columns: repeat(3, 1fr); }
}
.tgx-project {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-top: 3px solid var(--tgx-project-accent);
  border-radius: .5rem;
  padding: .95rem 1rem 1rem;
  background: var(--md-code-bg-color);
}
/* One brand row of a fixed height per tile, whatever fills it. The marks these tools
   actually have range from a square icon to a 7:1 wordmark, so anything sized on width
   makes one of them a smudge; a common height and a free width lines the row of tiles
   up without squashing any of them. */
.tgx-project-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.1rem;
}
.tgx-project-mark {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: .4rem;
}
/* The monogram, for the projects with no mark of their own -- which is most of
   them. Drawn from the accent rather than filled with it, so a grid of ten does not
   turn into a row of coloured squares. */
.tgx-project-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: color-mix(in srgb, var(--tgx-project-accent) 70%, var(--tgx-ink-mix));
  /* The tint and the ring are decoration behind the letters, not the letters, so
     they keep the accent at full strength. */
  background: color-mix(in srgb, var(--tgx-project-accent) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tgx-project-accent) 35%, transparent);
}
/* Every one of these marks is drawn for a white page -- PathVisio's navy wordmark and
   WikiPathways' black one vanish on the slate ground. Rather than filtering the brand
   colours into something their owners did not choose, the logo sits on a white plate
   in both themes, which is how each of them is meant to be seen. */
/* A square-ish mark says nothing a stranger can read at 2.1rem, so it is treated as
   a monogram would be: same box, same place, with the project's name beside it. */
.md-typeset .tgx-project-icon {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: .4rem;
  object-fit: contain;
  background: #fff;
  padding: .12rem;
}

/* Prefixed with .md-typeset only to outrank the theme's own `.md-typeset img
   { height: auto }`, which otherwise wins on specificity and collapses every one of
   these to a few pixels. */
.md-typeset .tgx-project-logo {
  display: block;
  height: 2.1rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: .3rem;
  background: #fff;
  padding: .2rem .35rem;
}
.md-typeset .tgx-project-name {
  margin: .1rem 0 .15rem;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.25;
}
/* After the rule above, not before it: the two have equal specificity, so a branded
   heading only loses its leading if it is stated last. */
.md-typeset .tgx-project-branded {
  margin: 0;
  min-width: 0;
  line-height: 0;
}
.md-typeset .tgx-project-what {
  margin: 0;
  flex: 0 0 auto;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--tgx-muted);
}
/* Two columns of numbers, not one line each: a tile with six statistics in a stack is
   taller than the description it belongs to. Two exactly, rather than auto-fit -- left
   to itself it took three at some tile widths and two at others, and a label like
   "Bioconductor downloads · all time" broke across three lines in the narrow tracks
   while the tile next to it read cleanly. */
.tgx-project-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem .8rem;
  padding-top: .2rem;
}
@media screen and (min-width: 30em) {
  .tgx-project-stats { grid-template-columns: repeat(2, 1fr); }
}
.tgx-stat { display: flex; flex-direction: column; min-width: 0; }
.tgx-stat-value {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
/* The label carries the window and the registry, and both matter: "1,870" alone is
   the number this page exists to stop anyone quoting. */
.tgx-stat-label {
  font-size: .66rem;
  line-height: 1.35;
  color: var(--tgx-muted);
}
.tgx-project-quiet .tgx-stat-label { font-style: italic; }
.tgx-project-foot {
  margin-top: auto;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  padding-top: .3rem;
  font-size: .7rem;
  color: var(--tgx-muted);
}

/* Collapsed lists ---------------------------------------------------------
   Eleven tiles each showing ten registry links and seven papers is a wall of blue
   text that buries the numbers the tile is for. Behind a <details> the same material
   costs one line and one click, needs no JavaScript, and the browser gives us the
   keyboard behaviour for free. */
.md-typeset .tgx-drop {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  font-size: inherit;
}
.md-typeset .tgx-drop > summary {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin: 0;
  padding: .22rem 0;
  border: 0;
  border-radius: .25rem;
  background: none;
  font-weight: 600;
  font-size: .68rem;
  color: var(--tgx-muted);
  cursor: pointer;
  list-style: none;
}
/* Material draws its own marker on a summary, and it is positioned for an admonition
   several times this size. Both the WebKit and the standard selector are needed. */
.md-typeset .tgx-drop > summary::-webkit-details-marker { display: none; }
.md-typeset .tgx-drop > summary::marker { content: ""; }
.md-typeset .tgx-drop > summary::after,
.md-typeset .tgx-drop > summary::before { display: none; }
/* The caret, drawn here so it turns with the disclosure rather than sitting still. */
.md-typeset .tgx-drop > summary .tgx-caret {
  flex: 0 0 auto;
  width: .5rem;
  height: .5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg) translate(-1px, -1px);
  transition: transform .12s ease;
}
.md-typeset .tgx-drop[open] > summary .tgx-caret {
  transform: rotate(45deg) translate(-2px, -2px);
}
.md-typeset .tgx-drop > summary:hover { color: var(--tgx-accent); }

.md-typeset .tgx-drop-list {
  margin: .1rem 0 .45rem;
  padding: 0 0 0 .8rem;
  list-style: none;
}
.md-typeset .tgx-drop-list li {
  margin: 0 0 .3rem;
  padding: 0;
  line-height: 1.45;
}
.md-typeset .tgx-drop-list a { text-decoration: none; }
.md-typeset .tgx-drop-list a:hover { text-decoration: underline; }
/* The identifier, the year, the citation count: context for the link beside it, and
   never the thing to click. */
.tgx-drop-meta {
  display: block;
  font-size: .64rem;
  color: var(--tgx-muted);
}
/* Same correction as the monogram: the chart palette is picked to work as fills, and
   as 9px uppercase type it lands between 2.5:1 and 3.9:1 depending on the tile. Mixed
   70% toward the opposite of the ground it clears 4.5:1 everywhere. The ring is
   currentColor, so it follows. */
.tgx-tag {
  display: inline-block;
  margin-left: .3rem;
  padding: 0 .28rem;
  border-radius: .2rem;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: color-mix(in srgb,
                   var(--tgx-project-accent, var(--tgx-muted)) 70%, var(--tgx-ink-mix));
  box-shadow: inset 0 0 0 1px currentColor;
}

/* Freshness strip --------------------------------------------------------- */
.tgx-strip {
  border-left: 4px solid;
  padding: .6rem .9rem;
  border-radius: .25rem;
  font-size: .8rem;
  margin: 0 0 1rem;
}
/* Fresh is the house blue rather than a green: nothing here is a pass/fail badge, it
   is a statement of how old the numbers are. Amber and red stay warning colours, and
   red is the logo's orange darkened until it carries text contrast. */
.tgx-fresh { border-color: #0076a8; background: #0076a814; }
.tgx-amber { border-color: #b07d1e; background: #b07d1e1c; }
.tgx-red   { border-color: #c2410c; background: #c2410c1c; }
[data-md-color-scheme="slate"] .tgx-fresh { border-color: #4fc3f0; background: #4fc3f014; }

/* Figures ----------------------------------------------------------------- */
.tgx-chart { width: 100%; min-height: 240px; margin: 1.2rem 0 .4rem; }
.tgx-chart-target { width: 100%; }
.tgx-chart-target svg { max-width: 100%; height: auto; }
.tgx-chart-error {
  font-size: .8rem;
  color: var(--md-default-fg-color--light);
  border: 1px dashed var(--md-default-fg-color--lighter);
  padding: 1rem;
  border-radius: .25rem;
}
.tgx-caption {
  font-size: .78rem;
  line-height: 1.6;
  color: var(--tgx-muted);
  border-left: 2px solid var(--md-default-fg-color--lightest);
  padding-left: .9rem;
  margin: 0 0 2.2rem;
}
.tgx-caption strong { color: var(--md-default-fg-color); }
/* Material dims every <small> to 0.75 opacity, which takes the source line under
   4.5:1. The line carries the collector, the collection date and the link to the data
   behind the figure -- the part a sceptical reader is here for -- so it is not the
   place to save contrast. */
.md-typeset .tgx-caption small {
  opacity: 1;
  color: var(--tgx-muted);
}

/* Call-flow diagrams ------------------------------------------------------
   Inline SVG with no colours of its own, so one set of rules covers both themes and
   the build never has to know which one a reader is in. */
.tgx-flow { max-width: 100%; height: auto; margin: .8rem 0 .4rem; overflow: visible; }
.tgx-flow-call,
.tgx-flow-metric,
.tgx-flow-node {
  fill: var(--md-code-bg-color);
  stroke: var(--md-default-fg-color--lightest);
  stroke-width: 1;
}
.tgx-flow-node { stroke: var(--tgx-accent); }
.tgx-flow-label {
  font-family: var(--md-code-font-family, monospace);
  font-size: 10.5px;
  fill: var(--md-default-fg-color);
}
.tgx-flow-sub { font-size: 9px; fill: var(--md-default-fg-color--light); }
.tgx-flow-line { fill: none; stroke: var(--md-default-fg-color--lighter); stroke-width: 1; }
.tgx-flow-head { fill: var(--md-default-fg-color--lighter); }

/* Tables scroll rather than pushing the page sideways ---------------------- */
.md-typeset table:not([class]) { display: table; width: 100%; }
.md-typeset__table { overflow-x: auto; }