:root {
  --relay-radius: 0.55rem;
}

[data-md-color-scheme="relay-light"] {
  color-scheme: light;
  --md-admonition-fg-color: var(--relay-text);
  --md-admonition-bg-color: var(--relay-surface);
  --relay-danger: #b42335;
  --relay-success: #24723c;
  --relay-bg: #f6f9fc;
  --relay-surface: #ffffff;
  --relay-raised: #eaf3fb;
  --relay-text: #10243a;
  --relay-muted: #52677b;
  --relay-line: #758c9f;
  --relay-blue: #0673b2;
  --relay-blue-dark: #075b8b;
  --relay-orange: #bd4300;
  --md-primary-fg-color: #f6f9fc;
  --md-primary-fg-color--light: #ffffff;
  --md-primary-fg-color--dark: #eaf3fb;
  --md-primary-bg-color: #10243a;
  --md-accent-fg-color: #bd4300;
  --md-accent-fg-color--transparent: #bd430026;
  --md-default-bg-color: #f6f9fc;
  --md-default-fg-color: #10243a;
  --md-default-fg-color--light: #52677b;
  --md-default-fg-color--lighter: #758c9f;
  --md-default-fg-color--lightest: #758c9f;
  --md-typeset-color: #10243a;
  --md-typeset-a-color: #075b8b;
  --md-code-bg-color: #eaf3fb;
  --md-code-fg-color: #10243a;
  --md-typeset-table-color: #758c9f;
  --md-typeset-table-color--light: #eaf3fb;
}

[data-md-color-scheme="relay-dark"] {
  color-scheme: dark;
  --md-admonition-fg-color: var(--relay-text);
  --md-admonition-bg-color: var(--relay-surface);
  --relay-danger: #ff8192;
  --relay-success: #72d695;
  --relay-bg: #08121f;
  --relay-surface: #101e2d;
  --relay-raised: #15283a;
  --relay-text: #eff7ff;
  --relay-muted: #a5b8c9;
  --relay-line: #58748b;
  --relay-blue: #57b8f5;
  --relay-blue-dark: #8bcef7;
  --relay-orange: #ff9147;
  --md-primary-fg-color: #08121f;
  --md-primary-fg-color--light: #101e2d;
  --md-primary-fg-color--dark: #15283a;
  --md-primary-bg-color: #eff7ff;
  --md-accent-fg-color: #ff9147;
  --md-accent-fg-color--transparent: #ff914726;
  --md-default-bg-color: #08121f;
  --md-default-fg-color: #eff7ff;
  --md-default-fg-color--light: #a5b8c9;
  --md-default-fg-color--lighter: #58748b;
  --md-default-fg-color--lightest: #58748b;
  --md-typeset-color: #eff7ff;
  --md-typeset-a-color: #8bcef7;
  --md-code-bg-color: #15283a;
  --md-code-fg-color: #eff7ff;
  /* Custom schemes must define syntax colors instead of inheriting light defaults. */
  --md-code-hl-comment-color: #a5b8c9;
  --md-code-hl-keyword-color: #8bcef7;
  --md-code-hl-string-color: #9cdda9;
  --md-code-hl-number-color: #ffb38a;
  --md-code-hl-constant-color: #cbb7ff;
  --md-code-hl-function-color: #cbb7ff;
  --md-code-hl-name-color: #eff7ff;
  --md-code-hl-variable-color: #eff7ff;
  --md-code-hl-operator-color: #cedce8;
  --md-code-hl-punctuation-color: #cedce8;
  --md-code-hl-generic-color: #8bcef7;
  --md-code-hl-special-color: #ffb5c0;
  --md-typeset-table-color: #58748b;
  --md-typeset-table-color--light: #15283a;
}

[data-md-color-scheme="relay-light"],
[data-md-color-scheme="relay-dark"] {
  --md-footer-bg-color: var(--relay-bg);
  --md-footer-bg-color--dark: var(--relay-bg);
  --md-footer-fg-color: var(--relay-text);
  --md-footer-fg-color--light: var(--relay-muted);
  --md-footer-fg-color--lighter: var(--relay-muted);
}

body,
input {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

code,
kbd,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.md-header,
.md-tabs {
  background: var(--relay-bg);
  border-bottom: 1px solid var(--relay-line);
  color: var(--relay-text);
  box-shadow: none;
}

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

.md-tabs__link {
  color: var(--relay-muted);
  opacity: 1;
}

.md-tabs__link:hover,
.md-tabs__item--active .md-tabs__link,
.md-nav__link:hover,
.md-nav__link--active {
  color: var(--relay-blue);
}

.md-search__form {
  background: var(--relay-raised);
  border: 1px solid var(--relay-line);
}

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

.md-typeset a:not(.role-card):focus-visible,
.md-nav__link:focus-visible,
.md-search__input:focus-visible,
.md-header__button:focus-visible,
.md-tabs__link:focus-visible {
  outline: 3px solid var(--md-accent-fg-color);
  outline-offset: 3px;
}

.md-typeset a:hover {
  color: var(--relay-orange);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.15em;
}

.md-typeset .md-button {
  border: 2px solid var(--relay-blue);
  border-radius: 0.45rem;
  color: var(--relay-blue-dark);
}

.md-typeset .md-button:hover {
  border-color: var(--relay-blue-dark);
}

.md-typeset .md-button--primary {
  background: var(--relay-blue);
  color: #ffffff;
}

.md-typeset .md-button--primary:hover {
  background: var(--relay-blue-dark);
  color: #ffffff;
}

[data-md-color-scheme="relay-dark"] .md-typeset .md-button--primary,
[data-md-color-scheme="relay-dark"] .md-typeset .md-button--primary:hover {
  color: #071523;
}

.role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 1.5rem 0 2rem;
}

.role-card {
  background: var(--relay-surface);
  border: 1px solid var(--relay-line);
  border-left: 0.22rem solid var(--relay-blue);
  border-radius: var(--relay-radius);
  color: var(--md-default-fg-color) !important;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem;
  text-decoration: none;
}

.role-card:nth-child(even) {
  border-left-color: var(--relay-orange);
}

.role-card:hover,
.role-card:focus-visible {
  border-color: var(--md-typeset-a-color);
  box-shadow: 0 0 0 0.15rem var(--md-accent-fg-color--transparent);
}

.role-card:focus-visible {
  outline: 3px solid var(--md-accent-fg-color);
  outline-offset: 3px;
}

.role-card strong {
  color: var(--md-default-fg-color);
  font-size: 1.05rem;
}

.role-card span {
  color: var(--md-default-fg-color--light);
}

.md-typeset table:not([class]) {
  background: var(--relay-surface);
  border: 1px solid var(--relay-line);
  border-radius: var(--relay-radius);
}

.md-typeset table:not([class]) th {
  background: color-mix(in srgb, var(--md-code-bg-color), var(--relay-blue) 12%);
}

.md-typeset .admonition,
.md-typeset details {
  background: var(--relay-surface);
  border-color: var(--relay-line);
  border-radius: var(--relay-radius);
}

.md-typeset img {
  border: 1px solid var(--relay-line);
  border-radius: var(--relay-radius);
  height: auto;
  max-width: 100%;
}

.md-search__form,
.highlight pre,
.md-typeset code {
  border-radius: 0.35rem;
}

.md-footer,
.md-footer-meta {
  background: var(--relay-bg);
  color: var(--relay-muted);
}

.md-footer {
  border-top: 1px solid var(--relay-line);
}

.md-footer__link,
.md-footer-meta a {
  color: var(--relay-text);
}

@media (max-width: 44rem) {
  .role-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Explicit foregrounds cover ordinary and expandable Material callouts. */
.md-typeset .admonition,
.md-typeset details {
  color: var(--md-admonition-fg-color);
  background-color: var(--md-admonition-bg-color);
}

[data-md-color-scheme] .md-typeset .admonition > .admonition-title,
[data-md-color-scheme] .md-typeset details > summary {
  color: var(--relay-text);
  background-color: var(--relay-raised);
}

.md-typeset :is(.admonition, details):is(.warning, .caution) {
  --relay-callout-accent: var(--relay-orange);
}

.md-typeset :is(.admonition, details):is(.danger, .error, .failure, .fail, .missing, .bug) {
  --relay-callout-accent: var(--relay-danger);
}

.md-typeset :is(.admonition, details):is(.success, .check, .done) {
  --relay-callout-accent: var(--relay-success);
}

.md-typeset :is(.admonition, details):is(.warning, .caution, .danger, .error, .failure, .fail, .missing, .bug, .success, .check, .done) {
  border-color: var(--relay-callout-accent);
}

[data-md-color-scheme] .md-typeset :is(.warning, .caution, .danger, .error, .failure, .fail, .missing, .bug, .success, .check, .done) > :is(.admonition-title, summary) {
  color: var(--relay-callout-accent);
  background-color: var(--relay-raised);
}

[data-md-color-scheme] .md-typeset :is(.warning, .caution, .danger, .error, .failure, .fail, .missing, .bug, .success, .check, .done) > :is(.admonition-title, summary)::before {
  background-color: var(--relay-callout-accent);
}

[data-md-color-scheme] .md-typeset :is(.warning, .caution, .danger, .error, .failure, .fail, .missing, .bug, .success, .check, .done) > summary::after {
  background-color: var(--relay-callout-accent);
}
