.dark-mode {
  --scalar-color-accent: #50e1d4;
  --scalar-link-color: #50e1d4;
  --scalar-link-color-hover: #85e8df;
  --scalar-link-color-visited: #50e1d4;
}

.light-mode {
  --scalar-color-accent: #287a73;
  --scalar-link-color: #287a73;
  --scalar-link-color-hover: #0a3733;
  --scalar-link-color-visited: #287a73;
}

.scalar-app .t-editor__anchor {
  --font-visited: var(--scalar-link-color-visited);
}

/* Sidebar: Truss teal for the selected page, like Mercury's highlighted item. */
.dark-mode {
  --scalar-sidebar-item-active-background: color-mix(in srgb, #50e1d4 14%, transparent);
  --scalar-sidebar-color-active: #50e1d4;
}

.light-mode {
  --scalar-sidebar-item-active-background: color-mix(in srgb, #287a73 12%, transparent);
  --scalar-sidebar-color-active: #287a73;
}

/* Sidebar method badges as tinted pills. Scalar sets --method-color inline, so the pill reads --truss-method instead. */
.scalar-app aside span.sidebar-heading-type {
  --truss-method: var(--method-color);
  height: auto;
  padding: 1px 6px;
  border-radius: 4px;
  line-height: 14px;
  color: var(--truss-method);
  background: color-mix(in srgb, var(--truss-method) 16%, transparent);
}

.scalar-app aside span.sidebar-heading-type--get {
  --truss-method: var(--scalar-color-green);
}

.scalar-app aside span.sidebar-heading-type--post {
  --truss-method: var(--scalar-color-blue);
}

.scalar-app aside span.sidebar-heading-type--put,
.scalar-app aside span.sidebar-heading-type--patch {
  --truss-method: var(--scalar-color-orange);
}

.scalar-app aside span.sidebar-heading-type--delete {
  --truss-method: var(--scalar-color-red);
}

/* Sidebar section headings (Foundation API, Corex API): brighter than the page links, softer than white. */
.dark-mode aside .group\/sidebar-section > div {
  color: #d4d4d4;
}

.light-mode aside .group\/sidebar-section > div {
  color: var(--scalar-color-1);
}

/* Sidebar: no vertical guide lines beside nested items; the indent alone shows nesting. */
.scalar-app aside .scalar-sidebar-indent-border,
.scalar-app aside .bg-sidebar-indent-border-active {
  display: none;
}

/* Method labels outside the sidebar (Operations list, request example header) use the same colours
   as the sidebar pills. Scalar sets them inline (GET blue, POST green, PATCH yellow), so remap by value. */
.scalar-app [class*="method"][style*="--scalar-color-blue"] {
  color: var(--scalar-color-green) !important;
}

.scalar-app [class*="method"][style*="--scalar-color-green"] {
  color: var(--scalar-color-blue) !important;
}

.scalar-app [class*="method"][style*="--scalar-color-yellow"] {
  color: var(--scalar-color-orange) !important;
}

/* Header: teal underline under the selected tab; the tab text keeps its colour. */
.scalar-app .t-header .t-header__item--selected {
  border-bottom-color: var(--scalar-color-accent);
}

/* Header: every tab semibold, selected or not, so selecting a tab does not shift the layout. */
/* Scalar draws each tab twice (normal and selected copies) and swaps them, so set both. */
.scalar-app .t-header .t-header__item,
.scalar-app .t-header .t-header__item * {
  font-weight: 600;
}

/* Links: teal colour only, same weight as the surrounding text, no underline. */
.scalar-app .t-editor__anchor,
.scalar-app .markdown a {
  font-weight: inherit;
  text-decoration: none;
}

/* Link hover: fade toward the background (dimmer in dark mode, lighter in light mode). */
.scalar-app .t-editor__anchor,
.scalar-app .markdown a {
  transition: opacity 0.15s ease;
}

.scalar-app .t-editor__anchor:hover,
.scalar-app .markdown a:hover {
  opacity: 0.7;
}

/* Endpoint pages: Path/Query Parameters, Body and Responses each sit in a bordered box with a
   header bar and a divider between rows, like Stripe and Mercury. */
.scalar-app .operation-details > div {
  margin-top: 24px;
  border: 1px solid var(--scalar-border-color);
  border-radius: 10px;
  overflow: hidden;
}

.scalar-app .operation-details > div > h2.section-header-label,
.scalar-app .operation-details .request-body-header {
  margin: 0 !important;
  padding: 10px 16px;
  background: var(--scalar-background-2);
  border-bottom: 1px solid var(--scalar-border-color);
}

.scalar-app .operation-details .request-body-header h2.section-header-label {
  margin: 0 !important;
  padding: 0;
  border: 0;
}

.scalar-app .operation-details > div > ul {
  margin: 0 !important;
  padding: 0 16px !important;
}

/* Response rows have their expand icon 24px left of the text, so leave room for it. */
.scalar-app .operation-details > div > ul.responses-list--tree {
  padding-left: 40px !important;
}

.scalar-app .operation-details .request-body-schema {
  padding: 0 16px;
}

.scalar-app .operation-details > div > ul > li + li,
.scalar-app .operation-details .schema-card--level-0 > .schema-properties > ul > li + li {
  border-top: 1px solid var(--scalar-border-color) !important;
}

/* Reference intro: space between the version/OpenAPI badges and the title. */
.scalar-app .introduction-section .section-content > div:has(> .badge) {
  margin-bottom: 12px;
}

/* Reference sidebar: at the reference root no item is current, so show the first item
   (Introduction) as selected until another item takes over. */
.scalar-app aside:not(:has([aria-current="page"])) .custom-scroll.items > ul > li:first-child > button {
  background-color: var(--scalar-sidebar-item-active-background);
  color: var(--scalar-sidebar-color-active);
}

/* Code sample language picker: show it as a bordered button, not bare text. */
.scalar-app [data-testid="client-picker"] {
  border: 1px solid var(--scalar-border-color);
  border-radius: 6px;
  padding: 3px 10px !important;
  font-size: var(--scalar-small);
  color: var(--scalar-color-1);
}
.scalar-app [data-testid="client-picker"]:hover {
  border-color: var(--scalar-color-accent);
}

/* Widen the picker's popover so client names and group labels are not truncated. */
.scalar-app div:has(> ul[id^="scalar-combobox-items"]) {
  width: 220px;
}