/* Edgible brand palette. Source: www.edgible.com docs/COLORS.md
 *
 * Material sets these variables from [data-md-color-scheme][data-md-color-primary]
 * compound selectors, so the rules below have to match on both attributes to
 * win the cascade. */

/* Jost, a Futura revival, standing in for the Edgible brand face Nexa. Nexa is
 * licensed and cannot ship in a public repo; Jost is under the SIL Open Font
 * License, so it can. Licence text: fonts/Jost-OFL.txt.
 *
 * These are variable fonts covering weights 100 to 900 in one file each. */
@font-face {
  font-family: "Jost";
  src: url("../fonts/Jost-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Jost";
  src: url("../fonts/Jost-Italic-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Iosevka for code. Its advance width is 0.5em against the 0.6em of most
 * monospace faces, so the N.0 diagrams fit the content column without shrinking
 * the text. Self-hosted so widths are identical on every platform, which matters
 * when a diagram is sized to fit. SIL Open Font License: fonts/Iosevka-OFL.txt.
 *
 * Subset from @fontsource/iosevka to the characters these guides use plus
 * Latin-1, arrows and box drawing: 2 MB down to 40 KB. */
@font-face {
  font-family: "Iosevka";
  src: url("../fonts/Iosevka-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Iosevka";
  src: url("../fonts/Iosevka-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --edgible-blue: #000033;
  /* Table headers only. The navy is reserved for the header and footer bands,
     and a table inside the content column needs to read as content. */
  --edgible-blue-mid: #2e4a9e;
  --edgible-orange-light: #ffa07a;
  --edgible-orange-dark: #8b4513;

  --md-text-font: "Jost";
}

/* Commands and output must stay monospace: column alignment in the ASCII
   diagrams depends on it. */
:root {
  --md-code-font: "Iosevka", "SFMono-Regular", "SF Mono", "Menlo", monospace;
}

/* Material's default code background is #f5f5f5, which reads as white next to
   white body text. A cooler, slightly deeper grey separates commands, output
   and the N.0 diagrams from the prose. */
[data-md-color-scheme="default"] {
  --md-code-bg-color: #e2e6f1;
  --edgible-code-border: #c8cee1;
}

[data-md-color-scheme="default"] .md-typeset pre > code,
[data-md-color-scheme="default"] .md-typeset .highlight > pre {
  border: 1px solid var(--edgible-code-border);
  border-radius: 0.15rem;
}

/* Inline fragments sit inside sentences, so they need padding to avoid
   crowding the surrounding words. */
[data-md-color-scheme="default"] .md-typeset code:not(pre code) {
  border: 1px solid var(--edgible-code-border);
  border-radius: 0.15rem;
  padding: 0.05em 0.35em;
}

/* Code inside a link or a heading keeps the surrounding colour rather than
   turning into a grey chip. */
.md-typeset a code:not(pre code),
.md-typeset h1 code,
.md-typeset h2 code,
.md-typeset h3 code,
.md-typeset h4 code {
  background-color: transparent;
  border-color: transparent;
  padding: 0;
}

/* The last-updated line. Quiet enough not to compete with the Next section it
   follows, but present on every page. */
.md-page-updated {
  margin: 0 0.8rem 1.2rem;
  font-size: 0.6rem;
  color: var(--md-default-fg-color--light);
}

/* The copy-as-markdown action. Material styles the anchors in the action row,
   but not a button, so this borrows the same look and swaps the icon for a tick
   while the clipboard write is fresh. */
.md-content__button.md-copy-md {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: currentcolor;
}

.md-copy-md .md-copy-md__done,
.md-copy-md .md-copy-md__failed,
.md-copy-md[data-md-copied] .md-copy-md__idle,
.md-copy-md[data-md-copy-failed] .md-copy-md__idle {
  display: none;
}

/* A browser can refuse the clipboard write. Saying so is better than a tick
   that lies; the link beside the button still opens the markdown. */
.md-copy-md[data-md-copied] .md-copy-md__done,
.md-copy-md[data-md-copy-failed] .md-copy-md__failed {
  display: block;
  color: var(--md-accent-fg-color);
}

/* Tables. Material ships them borderless with a plain header, which leaves the
   feature tables hard to scan across a row. Give the header a medium blue, band
   the rows faintly, and make hover clearly stronger than that banding so the row
   under the cursor is unambiguous. */
.md-typeset table:not([class]) {
  border-radius: 0.2rem;
  /* Clips the header's corners to the rounded table edge. */
  overflow: hidden;
  box-shadow: none;
}

.md-typeset table:not([class]) th {
  background-color: var(--edgible-blue-mid);
  color: #ffffff;
  font-weight: 600;
  min-width: auto;
}

/* Material draws cell separators as a top border on every row, which doubles up
   under the header. */
.md-typeset table:not([class]) thead + tbody tr:first-child td {
  border-top: none;
}

[data-md-color-scheme="default"] .md-typeset table:not([class]) {
  border: 1px solid #d5daea;
}

[data-md-color-scheme="default"] .md-typeset table:not([class]) tbody tr:nth-child(2n) {
  background-color: #f5f6fa;
}

[data-md-color-scheme="default"] .md-typeset table:not([class]) tbody tr:hover {
  background-color: #e2e6f1;
  box-shadow: none;
}

/* Lighter again on the dark scheme, where #2e4a9e sits too close to the page
   background to separate the header from the first row. */
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: #3f5fbf;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) tbody tr:nth-child(2n) {
  background-color: rgba(255, 255, 255, 0.03);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.09);
  box-shadow: none;
}

/* Jost is a geometric sans with a small x-height, so it reads light at
   Material's default body size. */
.md-typeset {
  font-size: 0.82rem;
  line-height: 1.7;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

[data-md-color-scheme="default"][data-md-color-primary],
[data-md-color-scheme="slate"][data-md-color-primary] {
  --md-primary-fg-color: var(--edgible-blue);
  --md-primary-fg-color--light: #1a1a4d;
  --md-primary-fg-color--dark: #000022;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
}

/* Footer. Material uses two shades: the nav strip with previous/next links, and
   a darker band under it for the copyright line. */
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-footer-bg-color: var(--edgible-blue);
  --md-footer-bg-color--dark: #000022;
  /* Material's footer text is 70% and 45% white. Against this navy, at the small
     size the footer uses, both are too faint to read. */
  --md-footer-fg-color--light: rgba(255, 255, 255, 0.88);
  --md-footer-fg-color--lighter: rgba(255, 255, 255, 0.75);
}

[data-md-color-scheme="default"][data-md-color-primary] {
  --md-accent-fg-color: var(--edgible-orange-dark);
  --md-typeset-a-color: var(--edgible-orange-dark);
}

/* The brown fails contrast on the dark scheme, so use the light orange. */
[data-md-color-scheme="slate"][data-md-color-primary] {
  --md-accent-fg-color: var(--edgible-orange-light);
  --md-typeset-a-color: var(--edgible-orange-light);
}

[data-md-color-scheme="default"] .md-typeset h1,
[data-md-color-scheme="default"] .md-typeset h2 {
  color: var(--edgible-blue);
}

/* Material hides the logo below 76.234375em and shows the drawer button
   instead. Keep the logo at every width, and reorder it to sit immediately
   right of that button: in the DOM the logo comes first, so flex order has to
   move it. Everything else keeps its document order via the shared order: 3. */
.md-header__inner > * {
  order: 3;
}

.md-header__inner > label.md-header__button {
  order: 1;
}

.md-header__inner > .md-header__button.md-logo {
  order: 2;
  display: block;
}

.md-header__inner > .md-header__title {
  order: 3;
}

/* The drawer header repeats the logo at 2.4rem, which is oversized for a
   wordmark. Shrink it and close up the banner it sits in. */
.md-nav__title .md-nav__button.md-logo img,
.md-nav__title .md-nav__button.md-logo svg {
  height: 1.3rem;
}

/* The logo is absolutely positioned at top .8rem, so at 1.3rem tall it ends at
   2.1rem. The title text must start below that or the two overlap. */
@media screen and (max-width: 76.234375em) {
  .md-nav--primary .md-nav__title {
    height: 4.2rem;
    padding-top: 2.5rem;
    line-height: 1.4rem;
  }
}

/* The footer meta band is 2.9rem tall because the credit and the copyright each
   run to two lines. Match the header to it, so the navy at the top and the navy
   at the bottom read as one frame rather than two mismatched bars. */
.md-header__inner {
  min-height: 2.9rem;
}

/* The logo is a wordmark rather than a square mark, so it needs more width than
   Material's default logo box allows. */
.md-header__button.md-logo {
  padding-right: 0.4rem;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1rem;
  width: auto;
}

/* Material stacks three separate gaps under the header: a 1.5rem top margin on
   the main grid, 1.2rem of content padding, and an empty 0.8rem ::before spacer.
   That reads as a band of white space above every page title, so the grid margin
   comes down and the spacer goes. The sidebars sit inside the same grid, so nav
   and table of contents move up with the content. */
.md-main__inner {
  margin-top: 0.8rem;
}

.md-content__inner::before {
  display: none;
}

/* Footer row, left to right: GitHub icon, MkDocs credit, then the copyright and
   the hexagon pushed to the right. Wrapping is allowed so a phone gets two rows
   instead of four squeezed columns. */
.md-footer-meta__inner {
  align-items: center;
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

.md-footer-meta__inner > .md-social {
  order: 1;
  margin-left: 0;
  /* Material's .4rem right margin plus the credit's own gap reads as a gulf
     between the icon and the text that belongs with it. */
  margin-right: 0;
  padding-left: 0;
}

/* The credit stacks over two lines and takes the copyright's size and colour, so
   the two blocks at either end of the row read as a pair. */
.md-footer-meta__inner > .md-credit {
  order: 2;
  display: flex;
  flex-direction: column;
  line-height: 1.4;
  margin-left: 0.3rem;
  font-size: 0.6rem;
  color: var(--md-footer-fg-color--light);
}

.md-footer-meta__inner > .md-credit a {
  color: inherit;
}

/* The hexagon hangs off the copyright rather than the row, so the mark and the
   text it belongs to wrap as one unit. The mark keeps a margin off the right
   edge rather than sitting hard against it. */
.md-footer-meta__inner > .md-copyright {
  order: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  font-size: 0.6rem;
  color: var(--md-footer-fg-color--light);
}

.md-copyright .md-copyright__highlight {
  display: flex;
  flex-direction: column;
  text-align: right;
  line-height: 1.4;
  color: inherit;
}

/* A link rather than a background image, so it can carry the reader to the main
   Edgible site the way the header logo does. */
.md-copyright .md-symbol {
  display: block;
  flex: 0 0 auto;
  margin-left: 0.7rem;
  margin-right: 0.6rem;
  line-height: 0;
  opacity: 0.85;
}

.md-copyright .md-symbol:hover {
  opacity: 1;
}

.md-copyright .md-symbol img {
  display: block;
  width: 1.4rem;
  height: 1.4rem;
}

/* Stacked over two lines, the credit is narrow enough to keep on a phone. The
   copyright has to give up Material's full-width basis to share the row. */
@media screen and (max-width: 44.9375em) {
  .md-footer-meta__inner > .md-copyright {
    flex: 0 1 auto;
    width: auto;
  }

  /* Match the margin the hexagon keeps off the right edge. */
  .md-footer-meta__inner > .md-social {
    margin-left: 0.6rem;
  }
}

/* Table of contents panel. Lighter than the code background so the two greys
   read as different surfaces rather than competing. Applied to the inner
   element, not the sidebar, so the sticky positioning is untouched. */
@media screen and (min-width: 60em) {
  [data-md-color-scheme="default"] .md-sidebar--secondary .md-sidebar__inner {
    background-color: #f5f6fa;
    border: 1px solid #e6e9f2;
    border-radius: 0.2rem;
    padding: 0.4rem 0.2rem 0.6rem;
  }
}

/* The search field sits on the header, so it takes tints of the header colour
   rather than Material's default. */
.md-search__form {
  background-color: rgba(255, 255, 255, 0.12);
}

.md-search__form:hover {
  background-color: rgba(255, 255, 255, 0.2);
}