/* warpSpeed knowledge base theme.
 *
 * Layered on Material's `default` and `slate` schemes rather than a custom scheme, so
 * anything not overridden here keeps a sane Material default.
 *
 * The look is warm paper rather than white, hairline borders rather than shadows, and
 * colour used sparingly. Brand teal carries links and active state; brand purple is the
 * interaction accent.
 */

:root {
  --ws-radius: 0.625rem;
  --ws-radius-sm: 0.375rem;
  --md-text-font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --md-code-font: "Geist Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;
}

/* ---------------------------------------------------------------- palette */

[data-md-color-scheme="default"] {
  /* Declaring the scheme stops Chrome's auto-dark-mode repainting over these colours,
     and gets native scrollbars and form controls to match. */
  color-scheme: light;

  --ws-paper: #f7f7f4;
  --ws-surface: #f0efea;
  --ws-subtle: #ebeae5;
  --ws-border: #e2e2df;
  --ws-ink: #26251e;
  --ws-muted: #7a7974;
  --ws-brand: #006c67;
  --ws-accent: #531cb3;

  --md-default-bg-color: var(--ws-paper);
  --md-default-fg-color: var(--ws-ink);
  --md-default-fg-color--light: var(--ws-muted);
  --md-default-fg-color--lighter: #a3a29c;
  --md-default-fg-color--lightest: var(--ws-border);

  --md-typeset-color: var(--ws-ink);
  --md-typeset-a-color: var(--ws-brand);
  --md-accent-fg-color: var(--ws-accent);

  /* neutral chrome: the header is paper, not a coloured bar */
  --md-primary-fg-color: var(--ws-paper);
  --md-primary-bg-color: var(--ws-ink);
  --md-primary-bg-color--light: var(--ws-muted);

  --md-code-bg-color: var(--ws-surface);
  --md-code-fg-color: var(--ws-ink);
  --md-footer-bg-color: var(--ws-surface);
  --md-footer-bg-color--dark: var(--ws-subtle);
  --md-footer-fg-color: var(--ws-ink);
  --md-footer-fg-color--light: var(--ws-muted);
  --md-footer-fg-color--lighter: var(--ws-muted);
}

[data-md-color-scheme="slate"] {
  color-scheme: dark;

  --ws-paper: #14120b;
  --ws-surface: #1b1913;
  --ws-subtle: #201e18;
  --ws-border: #2a2822;
  --ws-ink: #edecec;
  --ws-muted: #969592;
  /* lifted off the brand values, which are too dark to read on a near-black ground */
  --ws-brand: #4fb3ac;
  --ws-accent: #a78bfa;

  --md-default-bg-color: var(--ws-paper);
  --md-default-fg-color: var(--ws-ink);
  --md-default-fg-color--light: var(--ws-muted);
  --md-default-fg-color--lighter: #6f6e6a;
  --md-default-fg-color--lightest: var(--ws-border);

  --md-typeset-color: var(--ws-ink);
  --md-typeset-a-color: var(--ws-brand);
  --md-accent-fg-color: var(--ws-accent);

  --md-primary-fg-color: var(--ws-paper);
  --md-primary-bg-color: var(--ws-ink);
  --md-primary-bg-color--light: var(--ws-muted);

  --md-code-bg-color: var(--ws-surface);
  --md-code-fg-color: var(--ws-ink);
  --md-footer-bg-color: var(--ws-surface);
  --md-footer-bg-color--dark: var(--ws-subtle);
  --md-footer-fg-color: var(--ws-ink);
  --md-footer-fg-color--light: var(--ws-muted);
  --md-footer-fg-color--lighter: var(--ws-muted);
}

/* ------------------------------------------------------------- typography */

.md-typeset {
  font-size: 0.8rem;
  line-height: 1.72;
  letter-spacing: -0.003em;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  color: var(--ws-ink);
  font-weight: 600;
  letter-spacing: -0.021em;
}

.md-typeset h1 {
  font-size: 1.72rem;
  line-height: 1.22;
  margin-bottom: 1.1rem;
}

.md-typeset h2 {
  font-size: 1.24rem;
  line-height: 1.3;
  margin-top: 2.4rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--ws-border);
}

.md-typeset h3 {
  font-size: 1rem;
  margin-top: 1.7rem;
}

.md-typeset p,
.md-typeset li {
  color: var(--ws-ink);
}

.md-typeset a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ws-brand) 32%, transparent);
  text-underline-offset: 2px;
  transition: color 120ms, text-decoration-color 120ms;
}

.md-typeset a:hover {
  color: var(--ws-accent);
  text-decoration-color: color-mix(in srgb, var(--ws-accent) 55%, transparent);
}

/* ----------------------------------------------------------------- chrome */

.md-header {
  background-color: var(--ws-paper);
  color: var(--ws-ink);
  box-shadow: none;
  border-bottom: 1px solid var(--ws-border);
}

.md-header--shadow {
  box-shadow: none;
}

.md-tabs {
  background-color: var(--ws-paper);
  color: var(--ws-ink);
  border-bottom: 1px solid var(--ws-border);
}

.md-search__form {
  background-color: var(--ws-surface);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-sm);
  box-shadow: none;
}

.md-search__form:hover {
  background-color: var(--ws-subtle);
}

.md-search__input::placeholder {
  color: var(--ws-muted);
}

.md-nav {
  font-size: 0.68rem;
}

.md-nav__title {
  color: var(--ws-muted);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: none;
}

.md-nav__link {
  color: var(--ws-muted);
  border-radius: var(--ws-radius-sm);
  padding: 0.18rem 0.4rem;
  margin-inline-start: -0.4rem;
  transition: background-color 100ms, color 100ms;
}

.md-nav__link:hover {
  color: var(--ws-ink);
  background-color: var(--ws-subtle);
}

.md-nav__link--active,
.md-nav__link--active:hover {
  color: var(--ws-brand);
  font-weight: 550;
  background-color: transparent;
}

.md-sidebar--secondary .md-nav__link--active {
  color: var(--ws-brand);
}

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

.md-typeset code {
  background-color: var(--ws-surface);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-sm);
  padding: 0.1em 0.35em;
  font-size: 0.86em;
}

.md-typeset pre > code {
  border: none;
  padding: 0.9rem 1rem;
  font-size: 0.78rem;
  line-height: 1.62;
}

.md-typeset pre {
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius);
  background-color: var(--ws-surface);
  overflow: hidden;
}

.md-typeset .highlight {
  border-radius: var(--ws-radius);
}

/* ---------------------------------------------------- tables & quotations */

.md-typeset table:not([class]) {
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius);
  box-shadow: none;
  font-size: 0.74rem;
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  background-color: var(--ws-surface);
  color: var(--ws-ink);
  font-weight: 600;
  border-bottom: 1px solid var(--ws-border);
}

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

.md-typeset table:not([class]) tr:hover {
  background-color: color-mix(in srgb, var(--ws-subtle) 55%, transparent);
}

.md-typeset blockquote {
  color: var(--ws-muted);
  border-left: 2px solid var(--ws-border);
}

.md-typeset hr {
  border-bottom: 1px solid var(--ws-border);
}

/* ------------------------------------------------------------ admonitions */

.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius);
  box-shadow: none;
  background-color: var(--ws-surface);
  font-size: 0.76rem;
}

.md-typeset .admonition-title,
.md-typeset summary {
  background-color: color-mix(in srgb, var(--ws-subtle) 70%, transparent);
}

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

.md-footer-meta {
  background-color: var(--ws-surface);
  border-top: 1px solid var(--ws-border);
}

.md-copyright {
  color: var(--ws-muted);
}

/* --------------------------------------------------------------- measures */

.md-grid {
  max-width: 68rem;
}

.md-content {
  padding-bottom: 2rem;
}

@media screen and (min-width: 76.25em) {
  .md-content__inner {
    margin-inline: 1.6rem;
  }
}

/* Wide content scrolls inside its own box rather than the page. */
.md-typeset .md-typeset__table,
.md-typeset .highlight {
  overflow-x: auto;
}

/* ------------------------------------------------------------------- logo */

/* The mascot carries fine detail (eyes, beak, helmet trim) that disappears at
   Material's default 1.2rem, so give it a little more room. */
.md-header__button.md-logo {
  padding: 0.2rem;
}

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

/* The meta bar only ever held the generator attribution and the social links, both
   removed, so it would otherwise render as an empty strip. Prev/next navigation lives in
   .md-footer__inner and is unaffected. */
.md-footer-meta {
  display: none;
}

/* The primary sidebar's top title just repeats the site name already in the header, so it
   is hidden at every width. Scoped to the direct child of .md-nav--primary on purpose:
   the nested titles ("Articles", "Email") are the drawer headers that carry the back
   button on mobile, and must stay. The extra qualifier is needed to out-specify
   Material's own rule. */
.md-sidebar--primary .md-nav--primary > .md-nav__title {
  display: none;
}

.md-sidebar--primary .md-nav--primary > .md-nav__list {
  padding-top: 0.4rem;
}

/* A section with an index page renders as a .md-nav__container: a .md-nav__link wrapping two more,
   the title anchor and the expand toggle. The pill padding and its compensating offset then apply
   at both levels, which cancels out everywhere except the drawer: there Material replaces the
   padding with its own and zeroes it on the inner links, leaving our offset applied twice and the
   title sitting flush against the drawer edge. Drop the inner offset wherever Material has dropped
   the padding it compensates for, and nowhere else.

   The toggle beside it is sized to the chevron glyph, so the only way to expand the section is a
   target well under a thumb. Stretch it to the full row and out to the drawer edge, with a hairline
   so the row reads as the two actions it is. */
@media screen and (max-width: 76.234375em) {
  .md-nav--primary .md-nav__link > .md-nav__link {
    margin-inline-start: 0;
  }

  .md-nav--primary .md-nav__container > label.md-nav__link {
    align-self: stretch;
    margin-block: -0.6rem;
    margin-inline-end: -0.8rem;
    padding: 0.6rem 0.8rem;
    border-inline-start: 1px solid var(--ws-border);
  }
}

/* An h2 straight after the page title read as a rule under the heading. Section rules are
   for separating sections, and there is nothing above the first one to separate. */
.md-typeset h1 + h2 {
  border-top: none;
  margin-top: 1.6rem;
  padding-top: 0;
}