/* Readability: heavier, higher-contrast titles; tables you can read; code that fits a phone. */

/* Page titles: Material's default h1 is thin and grey, which is faint on the dark scheme. */
.md-typeset h1 {
  font-weight: 600;
  color: var(--md-default-fg-color);
}

/* Tables of tools and arguments: small, but not tiny. */
.md-typeset table:not([class]) { font-size: 0.76rem; }

/* Home page hero. */
.md-typeset .hero { margin: 0.5rem 0 1.5rem; }
.md-typeset .hero p { font-size: 1.05rem; max-width: 46rem; }
.md-typeset .grid.cards > ul > li { border-radius: 0.4rem; }

/* Secondary button: indigo text on the dark background has too little contrast. */
[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary) {
  color: var(--md-default-fg-color);
  border-color: var(--md-default-fg-color--light);
}
[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary):hover {
  color: var(--md-accent-bg-color);
  background-color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
}

/* Hero buttons: same width side by side or stacked. */
.md-typeset .hero .md-button { min-width: 11rem; text-align: center; }

/* Code: wrap long lines instead of hiding them behind a scrollbar, and keep the copy
   button clear of the text. Rule files and tables of fixed layout keep their scrolling. */
.md-typeset pre > code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding-right: 2.4rem;
}
.md-typeset .highlighttable pre > code,
.md-typeset .tabbed-content pre > code { white-space: pre-wrap; }


/* Names in the first column of a table (rule ids, tools) break only at their hyphens,
   never in the middle of a word. */
.md-typeset table:not([class]) td:first-child code { word-break: normal; overflow-wrap: normal; }

/* Phones. */
@media screen and (max-width: 44.9375em) {
  .md-typeset .hero .md-button { display: block; width: 100%; margin: 0 0 0.5rem; }
  .md-typeset table:not([class]) { font-size: 0.78rem; }
  /* Keep a name whole and let the table scroll sideways; keep the other columns readable. */
  .md-typeset table:not([class]) td:first-child code { white-space: nowrap; }
  .md-typeset table:not([class]) td:not(:first-child) { min-width: 9rem; }
  .md-typeset table:not([class]) td:nth-child(2) { min-width: 14rem; }
}