/* Palette. The header is GrowGraph ink. The mark is text cast into a graph:
   teal for the text side, orange for the graph side. Teal carries links,
   buttons and asides; orange marks the graph, wherever a page draws one.
   Text colours meet WCAG AA against their background. */

:root,
[data-md-color-scheme="default"] {
  --lc-ink: #293241;
  --lc-ink-light: #3d4a5e;
  --lc-ink-dark: #1d2430;
  --lc-teal: #0b8a7f;
  --lc-link: #08756b;
  /* Teal for marks on the ink, where #0b8a7f is too faint. */
  --lc-teal-on-ink: #6fd0c4;
  --lc-orange: #be5103;
  --lc-mark: var(--lc-teal);
  --lc-graph: var(--lc-orange);
  --lc-amber: #f39c12;
  --lc-amber-text: #b9700a;
  --lc-rule: rgba(41, 50, 65, 0.16);
  --lc-tint: rgba(41, 50, 65, 0.06);
  --lc-teal-tint: rgba(11, 138, 127, 0.08);
  --lc-quote: rgba(11, 138, 127, 0.3);
  --lc-amber-tint: rgba(243, 156, 18, 0.1);

  --md-primary-fg-color: var(--lc-ink);
  --md-primary-fg-color--light: var(--lc-ink-light);
  --md-primary-fg-color--dark: var(--lc-ink-dark);
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.72);
  --md-accent-fg-color: var(--lc-link);
  --md-accent-fg-color--transparent: rgba(8, 117, 107, 0.1);
  --md-typeset-a-color: var(--lc-link);
  --md-code-bg-color: #f3f4f7;
  --md-footer-bg-color: var(--lc-ink-dark);
  --md-footer-bg-color--dark: #161b24;
}

/* Dark: Material's slate, hue-shifted toward the ink so the page and the
   header belong to one family. */
[data-md-color-scheme="slate"] {
  --md-hue: 218;
  --lc-mark: var(--lc-teal-on-ink);
  --lc-graph: #f2a268;
  --lc-amber-text: #f5b041;
  --lc-rule: rgba(255, 255, 255, 0.16);
  --lc-tint: rgba(255, 255, 255, 0.05);
  --lc-teal-tint: rgba(111, 208, 196, 0.08);
  --lc-quote: rgba(111, 208, 196, 0.3);
  --lc-amber-tint: rgba(243, 156, 18, 0.1);

  --md-primary-fg-color: #1d2430;
  --md-primary-fg-color--light: #293241;
  --md-primary-fg-color--dark: #141922;
  --md-accent-fg-color: #7fd6cb;
  --md-accent-fg-color--transparent: rgba(127, 214, 203, 0.1);
  --md-typeset-a-color: #7fd6cb;
  --md-footer-bg-color: #141922;
  --md-footer-bg-color--dark: #0f131a;
}

/* Type. Headings take the wordmark's face; body and code come from
   `theme.font`. Material sets h1 light and grey, which reads as a caption
   next to a 600 heading face, so headings take the full text colour. */

/* On `body`, not `:root`: that is where Material defines the family it falls
   back to, and a variable referencing an undefined one resolves to nothing. */
body {
  --lc-heading-font: "Montserrat", var(--md-text-font-family), sans-serif;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-header__title,
.md-tabs__link,
.md-nav__title {
  font-family: var(--lc-heading-font);
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  color: var(--md-default-fg-color);
  font-weight: 600;
  letter-spacing: -0.012em;
}

.md-typeset h1 {
  font-size: 1.9em;
  line-height: 1.2;
}

.md-typeset h2 {
  font-size: 1.4em;
  line-height: 1.3;
  margin-top: 2em;
}

.md-typeset h3 {
  font-size: 1.12em;
  line-height: 1.35;
}

.md-typeset h4 {
  font-size: 1em;
}

/* A heading that is an identifier stays in the code face at heading weight. */
.md-typeset h1 code,
.md-typeset h2 code,
.md-typeset h3 code,
.md-typeset h4 code {
  font-weight: 600;
  letter-spacing: 0;
}

.md-header__title {
  font-weight: 600;
}

/* Header and tabs. */

.md-header__button.md-logo img {
  height: 1.7rem;
  width: 1.7rem;
}

.md-tabs__link {
  font-size: 0.68rem;
  font-weight: 600;
}

.md-tabs__item--active .md-tabs__link {
  box-shadow: inset 0 -0.12rem 0 var(--lc-teal-on-ink);
}

/* Buttons. */

.md-typeset .md-button {
  border-color: var(--md-accent-fg-color);
  border-radius: 0.2rem;
  color: var(--md-accent-fg-color);
  font-family: var(--lc-heading-font);
  font-weight: 600;
}

.md-typeset .md-button--primary,
.md-typeset .md-button:focus,
.md-typeset .md-button:hover {
  background-color: var(--lc-link);
  border-color: var(--lc-link);
  color: #ffffff;
}

/* On the dark page the brand blue sinks into the background, so a filled
   button takes the light accent with ink text. */
[data-md-color-scheme="slate"] .md-typeset .md-button--primary,
[data-md-color-scheme="slate"] .md-typeset .md-button:focus,
[data-md-color-scheme="slate"] .md-typeset .md-button:hover {
  background-color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
  color: var(--lc-ink-dark);
}

/* Tables carry most of the reference content: a tinted header row, figures
   that line up, and cells that do not break an identifier mid-word. */

.md-typeset table:not([class]) {
  border-color: var(--lc-rule);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

.md-typeset table:not([class]) th {
  background-color: var(--lc-tint);
  font-family: var(--lc-heading-font);
  font-weight: 600;
  padding: 0.7em 1em;
}

.md-typeset table:not([class]) td {
  border-top-color: var(--lc-rule);
  padding: 0.6em 1em;
}

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

/* Code. */

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

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

/* Admonitions in the palette: a rule on the left and a light tint, so a note
   reads as an aside rather than a coloured box. Warnings keep a warm hue. */

.md-typeset .admonition,
.md-typeset details {
  border-width: 0 0 0 0.2rem;
  border-radius: 0.15rem;
  box-shadow: none;
  font-size: 0.72rem;
}

.md-typeset .admonition.note,
.md-typeset details.note,
.md-typeset .admonition.info,
.md-typeset details.info,
.md-typeset .admonition.abstract,
.md-typeset details.abstract,
.md-typeset .admonition.example,
.md-typeset details.example {
  border-color: var(--lc-mark);
  background-color: var(--lc-teal-tint);
}

.md-typeset .note > .admonition-title,
.md-typeset .note > summary,
.md-typeset .info > .admonition-title,
.md-typeset .info > summary,
.md-typeset .abstract > .admonition-title,
.md-typeset .abstract > summary,
.md-typeset .example > .admonition-title,
.md-typeset .example > summary {
  background-color: transparent;
}

.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before,
.md-typeset .info > .admonition-title::before,
.md-typeset .info > summary::before,
.md-typeset .abstract > .admonition-title::before,
.md-typeset .abstract > summary::before,
.md-typeset .example > .admonition-title::before,
.md-typeset .example > summary::before {
  background-color: var(--lc-mark);
}

.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: var(--lc-ink-light);
  background-color: var(--lc-tint);
}

.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary {
  background-color: transparent;
}

.md-typeset .tip > .admonition-title::before,
.md-typeset .tip > summary::before {
  background-color: var(--md-default-fg-color--light);
}

.md-typeset .admonition.warning,
.md-typeset details.warning,
.md-typeset .admonition.danger,
.md-typeset details.danger {
  border-color: var(--lc-amber);
  background-color: var(--lc-amber-tint);
}

.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary,
.md-typeset .danger > .admonition-title,
.md-typeset .danger > summary {
  background-color: transparent;
}

.md-typeset .warning > .admonition-title::before,
.md-typeset .warning > summary::before,
.md-typeset .danger > .admonition-title::before,
.md-typeset .danger > summary::before {
  background-color: var(--lc-amber-text);
}

.md-typeset .admonition-title,
.md-typeset summary {
  font-family: var(--lc-heading-font);
  font-weight: 600;
}

/* API reference: indent each object's body under a rule, so nesting is
   visible on pages that hold a module, its classes and their members. */

.md-typeset .doc-contents:not(.first) {
  border-left: 0.1rem solid var(--lc-rule);
  padding-left: 0.9rem;
}

.md-typeset .doc-heading {
  margin-top: 1.6em;
}

/* An object heading is a whole signature, often several lines of it; at
   heading weight it reads as a block of bold. */
.md-typeset .doc-heading code {
  font-size: 0.9em;
  font-weight: 400;
}

.md-typeset h5.doc-heading,
.md-typeset .doc-contents h5 {
  color: var(--md-default-fg-color--light);
  font-family: var(--lc-heading-font);
  font-weight: 600;
  text-transform: none;
}

.md-typeset details.quote {
  border-color: var(--lc-rule);
}

/* Landing page. */

.lc-hero {
  align-items: center;
  display: grid;
  gap: 1.5rem 3rem;
  grid-template-columns: minmax(0, 1fr);
  margin: 0.5rem 0 3rem;
}

@media screen and (min-width: 60em) {
  .lc-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    margin-top: 1.5rem;
  }
}

.md-typeset .lc-hero h1 {
  font-size: 3.2em;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 0 0.45em;
}

.md-typeset .lc-hero p {
  max-width: 34em;
}

.md-typeset .lc-hero .lc-lead {
  font-size: 1.3em;
  line-height: 1.4;
}

.md-typeset .lc-hero .highlight {
  max-width: 22em;
}

.md-typeset .lc-hero .md-button {
  margin: 0.4rem 0.5rem 0 0;
}

/* A short text on the left, the graph cast from it on the right: each quote
   (teal) is tied to the vertex it grounds (orange) by a dashed line. */

.md-typeset .lc-cast {
  margin: 0 auto;
  max-width: 32rem;
  width: 100%;
}

.lc-cast svg {
  display: block;
  height: auto;
  width: 100%;
}

.lc-cast .lc-cast__card {
  fill: var(--md-default-bg-color);
  stroke: var(--md-default-fg-color--light);
  stroke-width: 1.25;
}

.lc-cast .lc-cast__text-line {
  stroke: var(--md-default-fg-color--lighter);
  stroke-linecap: round;
  stroke-width: 2.5;
}

.lc-cast .lc-cast__quote {
  stroke: var(--lc-quote);
  stroke-linecap: round;
  stroke-width: 9;
}

.lc-cast .lc-cast__band {
  fill: var(--lc-tint);
}

.lc-cast .lc-cast__ground {
  fill: none;
  stroke: var(--lc-mark);
  stroke-dasharray: 3 3;
  stroke-width: 1.25;
}

.lc-cast .lc-cast__edge {
  fill: none;
  stroke: var(--lc-graph);
  stroke-width: 2.5;
}

.lc-cast .lc-cast__vertex {
  fill: var(--md-default-bg-color);
  stroke: var(--lc-graph);
  stroke-width: 3;
}

.lc-cast .lc-cast__arrowhead {
  fill: var(--lc-graph);
}

.lc-cast text {
  fill: var(--md-default-fg-color);
  font-family: var(--md-text-font-family);
}

.lc-cast .lc-cast__label {
  font-family: var(--lc-heading-font);
  font-size: 12px;
  font-weight: 600;
}

.lc-cast .lc-cast__caption {
  font-size: 12.5px;
}

.lc-cast .lc-cast__small {
  fill: var(--md-default-fg-color--light);
  font-size: 11px;
}

/* Three things the library does, as ruled columns. */

.lc-columns {
  display: grid;
  gap: 1.5rem 2.5rem;
  grid-template-columns: minmax(0, 1fr);
}

@media screen and (min-width: 60em) {
  .lc-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.lc-columns > div {
  border-top: 0.12rem solid var(--lc-graph);
  padding-top: 0.2rem;
}

.md-typeset .lc-columns h3 {
  margin-top: 0.8em;
}

/* The landing page has no sidebar to edit from, and the edit button would
   sit on top of the hero. */
.md-content__inner:has(.lc-hero) > .md-content__button {
  display: none;
}

/* Entry-point cards. */

@media screen and (min-width: 60em) {
  .md-typeset .grid.cards.lc-next {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.md-typeset .grid.cards > ul > li {
  border-color: var(--lc-rule);
  border-radius: 0.2rem;
}

.md-typeset .grid.cards > ul > li:focus-within,
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--lc-mark);
  box-shadow: none;
}

/* A heading that is a setting or option name. */
.md-typeset h3:has(> code:only-child) {
  margin-top: 1.8em;
}