/* API reference page (api/index.md), which mounts Stoplight Elements.
   Page rules are scoped to the page with :has(.api-ref), and to
   .api-ref-page, which docs/js/api-reference.js sets, for browsers without
   :has(). The Elements theme rules only match inside Elements' markup. */

/* Let Elements fill the viewport below the header and the tabs. */
body:has(.api-ref),
body.api-ref-page {
  --api-ref-top: 4.8rem;
}

@media screen and (max-width: 76.1875em) {
  body:has(.api-ref),
  body.api-ref-page {
    --api-ref-top: 2.4rem;
  }
}

body:has(.api-ref) .md-main__inner,
body.api-ref-page .md-main__inner {
  max-width: none;
  margin: 0;
  padding: 0;
}

body:has(.api-ref) .md-content__inner,
body.api-ref-page .md-content__inner {
  max-width: none;
  margin: 0;
  padding: 0;
}

body:has(.api-ref) .md-content__inner::before,
body.api-ref-page .md-content__inner::before {
  display: none;
}

body:has(.api-ref) .md-footer,
body.api-ref-page .md-footer {
  display: none;
}

/* The page title and intro stay in the document for search and screen
   readers; Elements shows its own. */
.md-content__inner:has(> .api-ref) > :not(.api-ref) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.api-ref {
  height: calc(100vh - var(--api-ref-top));
  height: calc(100dvh - var(--api-ref-top));
}

.api-ref elements-api {
  display: block;
  height: 100%;
}

/* Elements' body rule (min-height: 100vh) lands on its root once scoped;
   here the root fills .api-ref instead. */
.api-ref [data-overlay-container],
.api-ref .sl-elements {
  min-height: 0;
}

/* No "powered by Stoplight" link in the sidebar. */
.sl-elements a[href*="utm_campaign=powered_by"] {
  display: none;
}

/* Fonts: the docs site's, not Elements' Inter. */
.sl-elements,
[data-overlay-container] {
  --font-ui: var(--md-text-font-family), -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --font-prose: var(--md-text-font-family), -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --font-mono: var(--md-code-font-family), SFMono-Regular, Consolas, Menlo, monospace;
  --font-code: var(--font-mono);
}

/* Elements theme tokens, from the xControl frontend (spruce) palette in
   modules/frontend/src/styles/theme.css. Each block mirrors one of
   Elements' own theme groups, prefixed with html so it wins; docs/js/theme.js
   keeps html[data-theme] in step with the Material scheme. ".sl-inverted"
   is Elements' contrasting panel, such as the request panel. */

/* Light. */
html[data-theme=light],
html[data-theme=light] .sl-inverted .sl-inverted,
html[data-theme=light] .sl-inverted .sl-inverted .sl-inverted .sl-inverted {
  --text-h: 218;  --text-s: 23%;  --text-l: 16%;   /* --slate-12 #1f2632 */
  --canvas-h: 204; --canvas-s: 100%; --canvas-l: 99%; /* --gray-1 #fafdff */
  --primary-h: 203; --primary-s: 81%; --primary-l: 42%; /* --blue-9 #147ec1 */
  --color-canvas-pure: #ffffff;
  --color-canvas-tint: rgba(236, 240, 245, 0.5);
  --color-canvas-50: #f6f9fd;   /* --gray-2 */
  --color-canvas-100: #ecf0f5;  /* --gray-3 */
  --color-canvas-200: #e4e8ee;  /* --gray-4 */
  --color-canvas-300: #dde1e7;  /* --gray-5 */
  --color-canvas-dialog: #fafdff;
}

/* Light, contrasting panel: spruce's dark surfaces. */
html[data-theme=light] .sl-inverted,
html[data-theme=light] .sl-inverted .sl-inverted .sl-inverted {
  --text-h: 213;  --text-s: 39%;  --text-l: 89%;   /* dark --slate-12 #d8e2ee */
  --canvas-h: 233; --canvas-s: 18%; --canvas-l: 19%; /* dark --gray-3 #282a39 */
  --primary-h: 203; --primary-s: 81%; --primary-l: 42%;
  --color-canvas-pure: #1a1b22; /* dark --gray-1 */
  --color-canvas-tint: rgba(54, 57, 80, 0.2);
  --color-canvas-50: #363950;   /* dark --gray-5 */
  --color-canvas-100: #2e3145;  /* dark --gray-4 */
  --color-canvas-200: #282a39;  /* dark --gray-3 */
  --color-canvas-300: #202129;  /* dark --gray-2 */
  --color-canvas-dialog: #2e3145;
}

/* Dark. */
html[data-theme=dark],
html[data-theme=dark] .sl-inverted .sl-inverted,
html[data-theme=dark] .sl-inverted .sl-inverted .sl-inverted .sl-inverted {
  --text-h: 213;  --text-s: 39%;  --text-l: 89%;   /* --slate-12 #d8e2ee */
  --canvas-h: 232; --canvas-s: 13%; --canvas-l: 12%; /* --gray-1 #1a1b22 */
  --primary-h: 203; --primary-s: 81%; --primary-l: 42%; /* --blue-9 #147ec1 */
  --color-canvas-pure: #16171d;
  --color-canvas-tint: rgba(46, 49, 69, 0.2);
  --color-canvas-50: #2e3145;   /* --gray-4 */
  --color-canvas-100: #282a39;  /* --gray-3 */
  --color-canvas-200: #202129;  /* --gray-2 */
  --color-canvas-300: #1a1b22;  /* --gray-1 */
  --color-canvas-dialog: #282a39;
}

/* Dark, contrasting panel. */
html[data-theme=dark] .sl-inverted,
html[data-theme=dark] .sl-inverted .sl-inverted .sl-inverted {
  --text-h: 213;  --text-s: 39%;  --text-l: 89%;
  --canvas-h: 233; --canvas-s: 18%; --canvas-l: 19%; /* --gray-3 #282a39 */
  --primary-h: 203; --primary-s: 81%; --primary-l: 42%;
  --color-canvas-pure: #202129; /* --gray-2 */
  --color-canvas-tint: rgba(63, 66, 90, 0.2);
  --color-canvas-50: #3f425a;   /* --gray-6 */
  --color-canvas-100: #363950;  /* --gray-5 */
  --color-canvas-200: #2e3145;  /* --gray-4 */
  --color-canvas-300: #282a39;  /* --gray-3 */
  --color-canvas-dialog: #363950;
}

/* Elements colours code tokens inline with its light syntax theme outside
   contrasting panels, whatever the mode; dark mode needs the dark palette's
   label colours instead. */
html[data-theme=dark] .sl-code-viewer .token { color: #d8e2ee !important; }                 /* --slate-12 */
html[data-theme=dark] .sl-code-viewer .token:is(.string, .attr-value, .char, .inserted) { color: #6dd182 !important; } /* --green-11 */
html[data-theme=dark] .sl-code-viewer .token:is(.function, .property, .attr-name, .tag, .selector) { color: #71c1ff !important; } /* --blue-11 */
html[data-theme=dark] .sl-code-viewer .token:is(.keyword, .builtin, .important, .deleted) { color: #fda756 !important; } /* --orange-11 */
html[data-theme=dark] .sl-code-viewer .token:is(.number, .boolean, .constant, .null) { color: #f7c847 !important; } /* --yellow-11 */
html[data-theme=dark] .sl-code-viewer .token:is(.punctuation, .operator) { color: #a9b7c9 !important; } /* --slate-11 */
html[data-theme=dark] .sl-code-viewer .token:is(.comment, .prolog) { color: #888ca8 !important; } /* --gray-9 */

/* Account Role badges beside an operation's title (docs/js/api-reference.js). */
.sl-elements h1 + .sl-stack {
  flex-wrap: wrap;
}

.api-roles {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.api-role {
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.api-role--allowed {
  background: #027a48; /* --green-9 */
  color: #ffffff;
}

.api-role--denied {
  border-color: var(--color-text-light);
  color: var(--color-text-light);
  text-decoration: line-through;
}

html[data-theme=dark] .api-role--allowed {
  background: rgba(103, 203, 125, 0.18); /* dark --green-9 */
  border-color: #67cb7d;
  color: #6dd182; /* dark --green-11 */
}

/* The overview's single download (docs/js/api-reference.js), styled as an
   Elements button in place of its hidden Export menu. */
.sl-elements a.api-download {
  display: inline-flex;
  align-items: center;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}

/* Typography of the docs pages (extra.css and Material) applied to Elements'
   headings, links, inline code and sidebar, in rem like Material's so it
   follows the same responsive root size. The heading font is set with the
   docs' own in extra.css and testing.css. */
.api-ref .sl-elements :is(h1, h2, h3, h4) {
  color: var(--expeto-heading-color);
  letter-spacing: -0.01em;
}

.api-ref .sl-elements h1 {
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.3;
}

.api-ref .sl-elements h2 {
  font-size: 1.12rem;
  font-weight: 400;
  line-height: 1.4;
}

.api-ref .sl-elements h3 {
  font-size: 0.96rem;
  font-weight: 400;
  line-height: 1.5;
}

.api-ref .sl-elements h4 {
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.6;
}

.api-ref .sl-elements .sl-markdown-viewer a {
  color: var(--md-typeset-a-color);
}

.api-ref .sl-elements .sl-markdown-viewer :not(pre) > code {
  padding: 0 0.2941176471em;
  border: 0;
  border-radius: 0.1rem;
  background-color: var(--md-code-bg-color);
  color: var(--md-code-fg-color);
  font-weight: 400;
}

.api-ref .sl-elements .sl-markdown-viewer a > code {
  color: currentcolor;
}

/* Sidebar: the docs navigation's text size and colours. */
.api-ref .sl-elements .sl-sticky.sl-border-r,
.api-ref .sl-elements .sl-sticky.sl-border-r .sl-bg-canvas-100 {
  background-color: var(--expeto-nav-bg);
}

.api-ref .sl-elements .sl-sticky.sl-border-r .sl-h-md > .sl-text-base {
  font-size: 0.7rem;
}

.api-ref .sl-elements .ElementsTableOfContentsItem .sl-bg-primary-tint {
  background-color: var(--expeto-nav-active-bg);
  color: var(--md-typeset-a-color);
}

[data-md-color-scheme="slate"] .api-ref .sl-elements .ElementsTableOfContentsItem .sl-bg-primary-tint {
  color: var(--md-primary-bg-color);
}

.api-ref .sl-elements .sl-sticky.sl-border-r h4 {
  color: var(--md-default-fg-color--light);
  font-family: var(--md-text-font-family);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: normal;
}

[data-md-color-scheme="slate"] .api-ref .sl-elements .ElementsTableOfContentsItem .sl-bg-primary-tint .sl-uppercase {
  color: var(--md-primary-bg-color);
}