/* Artek brand on docs.artek.io: charcoal header, Artekis red for links and accents (dark mode uses the lighter red
   from the dark logo so links keep contrast on the slate background). */
:root, [data-md-color-scheme="default"] {
  --md-primary-fg-color: #3e3a3b;
  --md-primary-fg-color--light: #5a5556;
  --md-primary-fg-color--dark: #2a2728;
  --md-accent-fg-color: #ac0000;
  --md-typeset-a-color: #ac0000;
}
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #2a2728;
  --md-accent-fg-color: #e5483f;
  --md-typeset-a-color: #e5483f;
}
.md-header__button.md-logo img { height: 1.1rem; width: auto; }
.md-typeset img { border: 1px solid var(--md-default-fg-color--lightest); border-radius: 4px; }
.md-typeset h1 { font-weight: 500; color: var(--md-default-fg-color); }
.md-typeset img.hero-logo { width: 300px !important; max-width: 60%; margin: 0 0 1rem; border: 0 !important; }
[data-md-color-scheme="slate"] .hero-logo.light-only, [data-md-color-scheme="default"] .hero-logo.dark-only { display: none; }
/* Code never breaks inside a word in a table: a signature wraps only between its arguments, and a table too wide for
   the page scrolls sideways. In prose a token breaks only when it alone is wider than the line, as on a phone. */
.md-typeset code { word-break: normal; overflow-wrap: break-word; }   /* prose: break only a token wider than the line */
.md-typeset table:not([class]) code { overflow-wrap: normal; }   /* tables: wrap at spaces only, e.g. between arguments */
/* "Where it fits" diagrams (pages/assets/diagrams/, drawn by diagrams/make.py) take their colors from these. */
:root, [data-md-color-scheme="default"] {
  --arch-bg: #f6f5f4; --arch-zone: #ffffff; --arch-mod: #fbecec; --arch-card: #ffffff;
  --arch-line: #9a9596; --arch-accent: #ac0000; --arch-ink: #2a2728; --arch-muted: #5a5556;
}
[data-md-color-scheme="slate"] {
  --arch-bg: #1b1a1f; --arch-zone: #24232a; --arch-mod: #3a2224; --arch-card: #2c2b33;
  --arch-line: #7d7880; --arch-accent: #e5483f; --arch-ink: #edebea; --arch-muted: #bdb8b9;
}
.md-typeset figure.arch-fig { margin: 1.5em 0; width: 100%; max-width: 100%; overflow-x: auto; }
.md-typeset figure.arch-fig svg { width: 100%; min-width: 680px; height: auto; display: block; }   /* a phone scrolls the figure rather than shrinking its text */
.md-typeset figure.arch-fig figcaption { max-width: none; font-size: .75rem; color: var(--md-default-fg-color--light); }

/* The logo is the brand; "Documentation" follows it, smaller, on the same baseline (header and home page). */
.md-header__button.md-logo { padding-right: .2rem; }
.md-typeset h1.hero-title { display: flex; align-items: baseline; gap: .45em; margin: 0 0 1.2rem; }
.md-typeset h1.hero-title img { height: 3.6rem; width: auto; border: 0; border-radius: 0; }
.md-typeset h1.hero-title span { font-size: 1.6rem; font-weight: 400; color: var(--md-default-fg-color--light); }
[data-md-color-scheme="slate"] .hero-title .light-only, [data-md-color-scheme="default"] .hero-title .dark-only { display: none; }
@media screen and (min-width: 76.25em) {   /* where the header shows the logo: put "Documentation" on its baseline */
  .md-header__title { transform: translateY(5px); }
  [dir=ltr] .md-header__title { margin-left: .5rem; }
}
@media screen and (max-width: 44.984375em) {   /* phone: the home heading shrinks to fit, still on one baseline */
  .md-typeset h1.hero-title img { height: 2.4rem; }
  .md-typeset h1.hero-title span { font-size: 1.15rem; }
}