/* The docs use the panel's own palette: brand ramp #0d4cd3, page #eaf1fb,
   ink #0a1b2e, muted #5b6b7e, card #ffffff. Material's named palettes cannot
   express those, so primary/accent are "custom" and the variables live here. */

:root {
  --md-primary-fg-color: #0d4cd3;
  --md-primary-fg-color--light: #2566f5;
  --md-primary-fg-color--dark: #0a3fb0;
  --md-accent-fg-color: #2566f5;
  --md-typeset-a-color: #0d4cd3;
  --md-default-bg-color: #eaf1fb;
  --md-code-bg-color: #e7f0ff;
  --md-code-fg-color: #0a1b2e;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #2566f5;
  --md-primary-fg-color--light: #3f79ff;
  --md-primary-fg-color--dark: #0d4cd3;
  --md-accent-fg-color: #6a98ff;
  --md-typeset-a-color: #6a98ff;
  --md-default-bg-color: #0b1220;
  --md-code-bg-color: #101b2e;
  --md-code-fg-color: #e6eefc;
}

.md-header,
.md-tabs {
  background-color: var(--md-primary-fg-color);
}

/* The panel logo is dark ink; on the blue header it reads better as a white mark. */
.md-header__button.md-logo img,
.md-nav__button.md-logo img {
  filter: brightness(0) invert(1);
}

/* Same for the large logo inside a dark page: dark ink on a dark card vanishes. */
[data-md-color-scheme="slate"] .md-typeset img[src$="logo.svg"] {
  filter: brightness(0) invert(1);
}

.md-typeset h1,
.md-typeset h2 {
  color: #0a1b2e;
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2 {
  color: #e6eefc;
}

/* A card-like content surface on the panel's blue page background. */
.md-content__inner {
  background: #ffffff;
  border-radius: 12px;
  padding: 1.2rem 1.6rem 1.6rem;
  box-shadow: 0 1px 2px rgba(10, 27, 46, 0.06);
}

body[data-md-color-scheme="slate"] .md-content__inner {
  background: #101b2e;
  box-shadow: none;
}

/* Material paints body with its own default; the panel's page is the pale blue. */
body {
  background-color: #eaf1fb;
}

/* The scheme attribute sits on <body> itself, so the selector must too. */
body[data-md-color-scheme="slate"] {
  background-color: #0b1220;
}

/* The sidebar headings sit on the page blue, not on a white strip. */
body[data-md-color-scheme] .md-nav__title {
  background-color: transparent;
}

/* Material uses a white glow to hide content scrolling under the sticky title;
   on the panel's blue page it showed up as a white strip. */
body[data-md-color-scheme="default"] .md-nav__title {
  box-shadow: 0 0 8px 8px #eaf1fb;
}

body[data-md-color-scheme="slate"] .md-nav__title {
  box-shadow: 0 0 8px 8px #0b1220;
}

/* Swagger's server picker: the reader types their own panel URL. */
.swagger-server {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0;
}

.swagger-server label {
  font-weight: 600;
}

.swagger-server input {
  flex: 1 1 18rem;
  min-width: 14rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid #c3d2e8;
  border-radius: 8px;
  font: inherit;
}

.swagger-server button {
  padding: 0.45rem 0.9rem;
  border: 0;
  border-radius: 8px;
  background: #0d4cd3;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.swagger-server__hint {
  flex-basis: 100%;
  color: #5b6b7e;
  font-size: 0.85rem;
}