/* The one header of the guide and the API reference (HD), with the app's bar: 56 px high, the app's top
   surface and rule, the refiroo mark, and the ink underline on the current item. The app's bar is the React
   component (`app/TopBar.tsx`) on the same values; the guide's `customCss` and the API page link this file.
   Dark follows `data-theme="dark"` on the document element, or the operating system when none is set. */
:root {
  --rdm-top: #ffffff;
  --rdm-ink: #1d1c1a;
  --rdm-muted: #55524c;
  --rdm-line: #e4e2dc;
  --rdm-hover: #efede8;
  --rdm-field: #f6f5f2;
  --rdm-focus: #6b5bd6;
}
:root[data-theme="dark"] {
  --rdm-top: #18181b;
  --rdm-ink: #ececee;
  --rdm-muted: #b4b3ba;
  --rdm-line: #2c2c31;
  --rdm-hover: #26262b;
  --rdm-field: #1d1d21;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --rdm-top: #18181b;
    --rdm-ink: #ececee;
    --rdm-muted: #b4b3ba;
    --rdm-line: #2c2c31;
    --rdm-hover: #26262b;
    --rdm-field: #1d1d21;
  }
}

/* Website purple (package TH): the theme chosen in the application (`rdm:scheme:v1`, `data-scheme="purple"` on the
   document element, set by the guide's and the API page's scripts too), in the website's colours. The dark values
   follow the mode as above. The wordmark rules above and below apply to either theme. */
:root[data-scheme="purple"] {
  --rdm-top: #ffffff;
  --rdm-ink: #262a5e;
  --rdm-muted: #585c85;
  --rdm-line: #e6e3e2;
  --rdm-hover: #e9edff;
  --rdm-field: #fbf8f1;
  --rdm-focus: #5a6fe0;
}
:root[data-scheme="purple"][data-theme="dark"] {
  --rdm-top: #141845;
  --rdm-ink: #edf0ff;
  --rdm-muted: #aeb4e0;
  --rdm-line: #30345b;
  --rdm-hover: #1a1f52;
  --rdm-field: #0e1130;
  --rdm-focus: #8ee3c0;
}
@media (prefers-color-scheme: dark) {
  :root[data-scheme="purple"]:not([data-theme]) {
    --rdm-top: #141845;
    --rdm-ink: #edf0ff;
    --rdm-muted: #aeb4e0;
    --rdm-line: #30345b;
    --rdm-hover: #1a1f52;
    --rdm-field: #0e1130;
    --rdm-focus: #8ee3c0;
  }
}

/* The API reference colours Scalar from the same values (it sets its own on the body's light-mode and dark-mode class,
   which the page's script keeps equal to the resolved mode). */
:root[data-scheme="purple"] .light-mode,
:root[data-scheme="purple"] .light-mode .scalar-app {
  --scalar-background-1: #fbf8f1;
  --scalar-background-2: #f3eee2;
  --scalar-background-3: #e9edff;
  --scalar-background-accent: #e9edff;
  --scalar-color-1: #262a5e;
  --scalar-color-2: #585c85;
  --scalar-color-3: #585c85;
  --scalar-color-accent: #4f61c6;
  --scalar-border-color: #e6e3e2;
  --scalar-button-1: #586cdb;
  --scalar-button-1-hover: #4d5ec0;
  --scalar-button-1-color: #ffffff;
  --scalar-sidebar-background-1: #fbf8f1;
  --scalar-sidebar-color-1: #262a5e;
  --scalar-sidebar-color-2: #585c85;
  --scalar-sidebar-color-active: #262a5e;
  --scalar-sidebar-border-color: #e6e3e2;
  --scalar-sidebar-item-hover-background: #e9edff;
  --scalar-sidebar-item-active-background: #d7ddfd;
  --scalar-sidebar-search-background: #ffffff;
  --scalar-sidebar-search-border-color: #e6e3e2;
  --scalar-sidebar-search-color: #585c85;
}
:root[data-scheme="purple"] .dark-mode,
:root[data-scheme="purple"] .dark-mode .scalar-app {
  --scalar-background-1: #0e1130;
  --scalar-background-2: #141845;
  --scalar-background-3: #1a1f52;
  --scalar-background-accent: #2b3285;
  --scalar-color-1: #edf0ff;
  --scalar-color-2: #aeb4e0;
  --scalar-color-3: #aeb4e0;
  --scalar-color-accent: #9fb0ff;
  --scalar-border-color: #30345b;
  --scalar-button-1: #9fb0ff;
  --scalar-button-1-hover: #c8d4ff;
  --scalar-button-1-color: #0e1130;
  --scalar-sidebar-background-1: #0e1130;
  --scalar-sidebar-color-1: #edf0ff;
  --scalar-sidebar-color-2: #aeb4e0;
  --scalar-sidebar-color-active: #edf0ff;
  --scalar-sidebar-border-color: #30345b;
  --scalar-sidebar-item-hover-background: #1a1f52;
  --scalar-sidebar-item-active-background: #2b3285;
  --scalar-sidebar-search-background: #141845;
  --scalar-sidebar-search-border-color: #30345b;
  --scalar-sidebar-search-color: #aeb4e0;
}

.rdm-header {
  display: flex;
  align-items: stretch;
  gap: 20px;
  height: 56px;
  padding: 0 16px 0 20px;
  box-sizing: border-box;
  background: var(--rdm-top);
  border-bottom: 1px solid var(--rdm-line);
  color: var(--rdm-ink);
  font: 14px system-ui, sans-serif;
}
.rdm-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  color: inherit;
  text-decoration: none;
}
.rdm-mark img {
  display: block;
  width: auto;
  max-width: none;
  height: 32px;
}
.rdm-mark img.rdm-wordmark {
  height: 18px;
}
:root[data-theme="dark"] .rdm-wordmark {
  filter: brightness(0) invert(0.93);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .rdm-wordmark {
    filter: brightness(0) invert(0.93);
  }
}
.rdm-tabs {
  display: flex;
  gap: 20px;
}
.rdm-tab {
  display: flex;
  align-items: center;
  padding-top: 2px;
  border-bottom: 2px solid transparent;
  color: var(--rdm-muted);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.rdm-tab:hover {
  color: var(--rdm-ink);
}
.rdm-tab[aria-current] {
  border-bottom-color: var(--rdm-ink);
  color: var(--rdm-ink);
  font-weight: 600;
}
.rdm-mark:focus-visible,
.rdm-tab:focus-visible,
.rdm-theme select:focus-visible {
  outline: 2px solid var(--rdm-focus);
  outline-offset: 2px;
}
.rdm-spacer {
  flex: 1;
}
.rdm-short {
  display: none;
}
.rdm-theme {
  align-self: center;
  display: flex;
  align-items: center;
}
.rdm-theme select {
  height: 32px;
  padding: 0 6px;
  border: 1px solid var(--rdm-line);
  border-radius: 6px;
  background: var(--rdm-top);
  color: var(--rdm-ink);
  font: 13px system-ui, sans-serif;
}

/* Phone: the wordmark is dropped, the pair reads Docs | API. */
@media (max-width: 50rem) {
  .rdm-header {
    gap: 12px;
    padding: 0 12px;
  }
  .rdm-mark img.rdm-wordmark {
    display: none;
  }
  .rdm-tabs {
    gap: 14px;
  }
  .rdm-full {
    display: none;
  }
  .rdm-short {
    display: inline;
  }
}