/* The look of this site, on top of Material for MkDocs.
 *
 * Material's defaults are a good starting point and a poor finishing one: a
 * saturated bar across the top, Roboto, and every element at the same visual
 * weight. What follows gives the site a structure a reader can navigate by
 * shape rather than by reading everything: one accent colour that only ever
 * means "this is a link or a control", hairlines instead of boxes, and headings
 * that separate sections on their own so the prose does not have to.
 *
 * The one rule this site has to keep that most do not: the accent must never be
 * mistaken for the subject. Half these pages are about colour, and a page full
 * of swatches next to an accent from the same family reads as one more swatch.
 * The accent is therefore taken from `pathogenomics`, the lab theme palette, and
 * not from `mycolors`, the lineage palette: #305595 and #9ec4e8 are literal
 * members of the exported `pathogenomics` vector, so the interface is coloured
 * in the palette that is never used to encode a lineage.
 *
 * Every colour here is checked against its own background, in both schemes, at
 * the 4.5:1 that AA asks of body text.
 */

/* ---------------------------------------------------------------- tokens -- */

:root {
  /* pathogenomics[2], the lab blue. Used for links, controls and focus, and for
   * nothing else, so that seeing it always means the same thing. */
  --mc-accent: #305595;          /* 7.35:1 on white */
  --mc-accent-strong: #24406f;   /* 10.30:1 on white */
  --mc-hairline: rgba(0, 0, 0, 0.09);
  --mc-hairline-strong: rgba(0, 0, 0, 0.16);
  --mc-surface: #f6f7f9;
  --mc-surface-sunken: #f0f2f5;
}

/* The dark scheme is chosen, not derived: #305595 on the slate ground is 2.19:1
 * and unreadable. Rather than lighten it by eye, the dark accent is
 * pathogenomics[5], #9ec4e8, which is the pale blue of the same lab palette and
 * measures 8.83:1 on Material's slate ground (#1e2129,
 * hsla(225deg,15%,14%,1)). */
[data-md-color-scheme="slate"] {
  --mc-accent: #9ec4e8;          /* 8.83:1 on the slate ground */
  --mc-accent-strong: #cfe3f7;   /* 12.25:1 */
  --mc-hairline: rgba(255, 255, 255, 0.12);
  --mc-hairline-strong: rgba(255, 255, 255, 0.22);
  --mc-surface: rgba(255, 255, 255, 0.035);
  --mc-surface-sunken: rgba(0, 0, 0, 0.22);
}

/* Handing the accent to Material takes more than declaring it later.
 *
 * Its palette sheet sets the link colour twice: once on `[data-md-color-primary]`
 * and again, for the dark scheme, on
 * `[data-md-color-scheme="slate"][data-md-color-primary="black"]`. That second
 * one is two attributes, so it outranks any single-attribute rule no matter
 * which file comes last. The attribute is repeated here only to match that
 * weight; it selects exactly the same element it would without the
 * repetition. */
[data-md-color-scheme="default"][data-md-color-scheme],
[data-md-color-scheme="slate"][data-md-color-scheme] {
  --md-typeset-a-color: var(--mc-accent);
  --md-accent-fg-color: var(--mc-accent-strong);
}

/* ---------------------------------------------------------------- header -- */

/* A neutral header needs an edge, or it floats: the page below it starts with
 * no boundary and the whole thing reads as one undifferentiated sheet. A
 * hairline while at the top, a shadow once the page scrolls under it. */
.md-header {
  border-bottom: 1px solid var(--mc-hairline);
  box-shadow: none;
}

.md-header--shadow {
  border-bottom-color: transparent;
  box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.07), 0 0.2rem 0.4rem rgba(0, 0, 0, 0.07);
}

/* Material sizes the logo 1.2rem square. The emblem is 1.22:1, so a square box
 * would squash it, and a fan of 14 branches at 1.2rem is small enough that the
 * outer ones stop being separable. `width: auto` keeps the shape and 1.6rem
 * gives it back the size; the header is 2.4rem tall, so it still sits inside
 * with air around it. */
.md-header__button.md-logo :is(img, svg) {
  height: 1.6rem;
  width: auto;
}

.md-header__title {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* The search field reads as a control rather than a hole in the header. */
.md-search__form {
  border: 1px solid var(--mc-hairline-strong);
  border-radius: 0.3rem;
  background-color: var(--mc-surface);
}

.md-search__form:hover {
  background-color: var(--mc-surface-sunken);
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  border-color: var(--mc-accent);
}

/* ------------------------------------------------------------ navigation -- */

/* Where you are, shown by a mark in the margin rather than by colour alone. */
.md-nav__link--active {
  font-weight: 600;
}

.md-sidebar--primary .md-nav__list .md-nav__link--active {
  border-left: 2px solid var(--mc-accent);
  margin-left: -0.6rem;
  padding-left: calc(0.6rem - 2px);
}

.md-nav--secondary .md-nav__title {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
  box-shadow: none;
}

/* -------------------------------------------------------------- headings -- */

/* A page is scanned before it is read, so the headings carry the structure: the
 * title sits large and tight, and every section after it opens on a rule that
 * runs the width of the column. */
.md-typeset h1 {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--md-default-fg-color);
  margin-bottom: 1.2rem;
}

.md-typeset h2 {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-top: 2.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--mc-hairline);
}

/* The first heading of a page has the title above it, which is separation
 * enough. */
.md-typeset h1 + h2 {
  border-top: none;
  padding-top: 0;
  margin-top: 1.6rem;
}

/* On the reference page the heading is a function name set in code, and at
 * Material's default that name comes out smaller than the prose underneath it.
 * A heading that is entirely code should read as a heading first. */
.md-typeset h2 code,
.md-typeset h3 code {
  font-size: 0.92em;
  background-color: transparent;
  padding-left: 0;
  padding-right: 0;
}

.md-typeset h3 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-top: 1.8rem;
}

/* The anchor mark belongs to whoever wants to copy a link, not to everyone
 * reading the page: on a reference page with one heading per exported function
 * it added a pilcrow to every one of them. It stays reachable by keyboard. */
.md-typeset :is(h1, h2, h3, h4, h5, h6) .headerlink {
  opacity: 0;
  transition: opacity 125ms;
}

.md-typeset :is(h1, h2, h3, h4, h5, h6):hover .headerlink,
.md-typeset :is(h1, h2, h3, h4, h5, h6) .headerlink:focus {
  opacity: 1;
}

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

.md-typeset {
  line-height: 1.7;
}

/* ------------------------------------------------------------------ code -- */

/* Code is most of this site. A hairline gives a block an edge without the
 * weight of a filled box, and matches the tables and figures beside it. */
.md-typeset pre > code {
  border: 1px solid var(--mc-hairline);
  border-radius: 0.3rem;
}

.md-typeset code {
  border-radius: 0.2rem;
}

.md-typeset :not(pre) > code {
  background-color: var(--mc-surface-sunken);
}

/* -------------------------------------------------------------- callouts -- */

/* Material draws an admonition as a tinted box with a bar down its left side.
 * Toned down to a hairline with a coloured edge, it reads as an aside instead
 * of an alarm, which matters on pages that carry several in a row. */
.md-typeset :is(.admonition, details) {
  border: 1px solid var(--mc-hairline);
  border-left-width: 3px;
  border-radius: 0.3rem;
  box-shadow: none;
  font-size: 0.75rem;
}

.md-typeset :is(.admonition-title, summary) {
  font-weight: 600;
}

/* --------------------------------------------------------------- buttons -- */

.md-typeset .md-button {
  border-radius: 0.3rem;
  border-width: 1px;
  font-weight: 600;
  padding: 0.5em 1.2em;
  transition: background-color 125ms, color 125ms, border-color 125ms;
}

/* The label colour is stated rather than inherited. With a white primary,
 * Material's `--md-primary-bg-color` is dark, so a button that filled itself
 * with the accent and took that variable for its text would come out dark on
 * dark. Each scheme names the label that clears it against its own fill: white
 * on #305595 is 7.35:1, near-black on #9ec4e8 is 10.19:1. */
.md-typeset .md-button--primary {
  background-color: var(--mc-accent);
  border-color: var(--mc-accent);
  color: #fff;
}

[data-md-color-scheme="slate"] .md-typeset .md-button--primary {
  color: #10131a;
}

.md-typeset .md-button:is(:focus, :hover) {
  background-color: var(--mc-accent-strong);
  border-color: var(--mc-accent-strong);
  color: #fff;
}

[data-md-color-scheme="slate"] .md-typeset .md-button:is(:focus, :hover) {
  color: #10131a;
}

/* ---------------------------------------------------------------- footer -- */

.md-footer-meta {
  border-top: 1px solid var(--mc-hairline);
}

/* -------------------------------------------------------- content pieces -- */

/* A wide table scrolls inside its own box rather than pushing the page
 * sideways: the page body must never scroll horizontally. */
.md-typeset__table {
  width: 100%;
}

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

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

/* The first column of a table on this site holds the thing being defined, and
 * left unattended the browser squeezes it to a few characters a line. The floor
 * is 8rem rather than something wider because the two kinds of table here want
 * opposite things from it: a palette table's first cell is a two character
 * lineage code, so a wide floor would leave the row mostly empty, while a
 * reference table's is a name. 8rem is what a 13 character name takes at the
 * code size set below, IBM Plex Mono advancing 0.6em per character plus
 * Material's cell padding, so `pathogenomics` and every lineage code stay on one
 * line. The four `scale_*` names are longer than that and are left to break, on
 * the underscore, which the rule below makes legible. */
.md-typeset table:not([class]) td:first-child,
.md-typeset table:not([class]) th:first-child {
  min-width: 8rem;
}

.md-typeset table:not([class]) td:first-child code {
  overflow-wrap: break-word;
}

/* Names and hex codes are set in code style inside those cells. At the default
 * size they sit noticeably smaller than the prose around them, which makes a
 * table of hex codes harder to scan than the same codes in a list. */
.md-typeset table:not([class]) code {
  font-size: 0.78rem;
  word-break: normal;
}

/* Tables are the substance of the palette pages, so they get the same hairline
 * treatment as everything else: a tinted head, rules between rows, and no box
 * around the outside. Material's default is a card with a shadow, which on a
 * page holding several tables reads as several competing objects. */
.md-typeset table:not([class]) {
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-size: 0.74rem;
}

.md-typeset table:not([class]) th {
  background-color: var(--mc-surface);
  border-bottom: 1px solid var(--mc-hairline-strong);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
  white-space: nowrap;
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--mc-hairline);
  vertical-align: top;
}

.md-typeset table:not([class]) tr:hover td {
  background-color: var(--mc-surface);
}

/* Figures on this site are plots, and a plot rendered by ggplot2 arrives on
 * white or on nothing at all. Either way it has no edge of its own, so on a
 * light page it bleeds into the paper and on a dark one it is a white rectangle
 * with no boundary. The hairline gives it one. */
.md-typeset figure img,
.md-typeset p > img {
  border: 1px solid var(--mc-hairline);
  border-radius: 0.4rem;
}

/* Except the emblem, which is a drawing on transparent ground and carries no
 * rectangle to align a frame with. */
.md-typeset img[src$="emblem.png"] {
  border: none;
  border-radius: 0;
}

.md-typeset figure figcaption {
  font-size: 0.7rem;
  color: var(--md-default-fg-color--light);
  margin-top: 0.6rem;
}

/* Reference and palette pages are mostly tables and code. On a wide screen
 * Material's default measure leaves a lot of empty margin beside them while the
 * tables themselves are cramped. */
@media screen and (min-width: 76.25em) {
  .md-grid {
    max-width: 68rem;
  }
}

/* The landing page's cards: give the whole card a hover state, so it reads as
 * one target rather than a paragraph with a link in it. */
.md-typeset .grid.cards > ul > li {
  border: 1px solid var(--mc-hairline);
  border-radius: 0.4rem;
  padding: 1rem 1.2rem;
  transition: border-color 125ms, box-shadow 125ms, transform 125ms;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--mc-accent);
  box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

.md-typeset .grid.cards > ul > li > hr {
  display: none;
}

.md-typeset .grid.cards > ul > li > p:first-child {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--md-default-fg-color);
  margin-bottom: 0.4rem;
}

.md-typeset .grid.cards > ul > li > p:last-child {
  margin-bottom: 0;
}