/* ---------- Palette ---------- */

/* Light scheme: neutral black & white — no blue chrome.
   Scoped to [data-md-color-scheme="default"] only: when these lived on
   :root, slate inherited the dark header foreground and the dark header
   went invisible. */
[data-md-color-scheme="default"] {
  /* White header with dark text, GitBook-style. */
  --md-primary-fg-color: #ffffff;
  --md-primary-bg-color: #111417;
  --md-primary-bg-color--light: rgba(17, 20, 23, 0.6);
  --md-primary-fg-color--light: #3a3f45;
  --md-primary-fg-color--dark: #000000;
  --md-accent-fg-color: #111417;
  --md-typeset-a-color: #111417;
}

/* GitBook-measured greys (gitbook.com/docs, 2026-08-24): text #1d1d1d,
   secondary = same at 64% opacity. */
[data-md-color-scheme="default"] {
  --md-default-fg-color: #1d1d1d;
  --md-default-fg-color--light: rgba(29, 29, 29, 0.64);
  --md-default-fg-color--lighter: rgba(29, 29, 29, 0.32);
  --md-default-fg-color--lightest: rgba(29, 29, 29, 0.08);
  --md-typeset-a-color: #1d1d1d;
  --md-accent-fg-color: #1d1d1d;
  --md-primary-bg-color: #1d1d1d;
}

[data-md-color-scheme="default"] .md-header {
  border-bottom: 1px solid rgba(17, 20, 23, 0.1);
  box-shadow: none;
}

/* Header title carries the site name now that the mark is gone. */
.md-header__title {
  font-size: 0.75rem;
  font-weight: 600;
}

/* Search: GitBook-style pill — white inside a hairline border, tinting
   only on hover/focus. */
.md-search__form {
  border-radius: 24px;
  height: 1.95rem;
  background-color: transparent;
  border: 1px solid var(--md-default-fg-color--lightest);
  transition: background-color 0.15s, border-color 0.15s;
}

.md-search__form:hover {
  background-color: var(--md-default-fg-color--lightest);
  border-color: var(--md-default-fg-color--lighter);
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  border-radius: 24px 24px 0 0;
  background-color: var(--md-default-bg-color);
}

.md-search__input {
  font-size: 0.65rem;
}

.md-search__input::placeholder,
.md-search__icon {
  color: var(--md-default-fg-color--light);
}

[data-md-color-scheme="default"] .md-search__form {
  border-color: #d9d9d9;
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0b1216;
  --md-primary-fg-color: #0b1216;
  /* One blue only: the accent (search highlights, hovers) matches the
     link color instead of introducing a second, lighter cyan. */
  --md-accent-fg-color: #56a8f2;
  --md-typeset-a-color: #56a8f2;
}

/* Light mode: links stay neutral, underlined so they remain visible. */
[data-md-color-scheme="default"] .md-typeset a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-color: rgba(17, 20, 23, 0.35);
}
[data-md-color-scheme="default"] .md-typeset a:hover {
  text-decoration-color: currentColor;
}

/* ---------- Typography (GitBook-measured) ---------- */

/* Body: 16px / 26px. Material's root is 20px, so 0.8rem = 16px. */
.md-typeset {
  font-size: 0.65rem;   /* 13px */
  line-height: 1.75;
}

/* Headings carry the text color (Material dims h1 by default). */
.md-typeset h1 {
  font-size: 1.7rem;        /* 34px */
  line-height: 1.26;
  font-weight: 500;
  letter-spacing: -0.045em; /* -0.9px */
  color: var(--md-default-fg-color);
}

/* GitBook-style lede: the paragraph right under the title reads as a grey
   subtitle. */
.md-typeset h1 + p {
  color: var(--md-default-fg-color--light);
  font-size: 0.7rem;    /* 14px */
  line-height: 1.55;
}

.md-typeset h2 {
  font-size: 1.1rem;        /* 22px */
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.0125em; /* -0.3px */
  color: var(--md-default-fg-color);
}

.md-typeset h3 {
  font-size: 0.9rem;        /* 18px */
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--md-default-fg-color);
}

/* ---------- Sidebar (GitBook-style) ---------- */

/* Page links: grey, so section titles and the active page stand out. */
.md-nav--primary .md-nav__link {
  color: var(--md-default-fg-color--light);
  font-size: 0.6rem;   /* 12px */
  line-height: 1.5;
}
.md-nav--primary .md-nav__link:hover {
  color: var(--md-default-fg-color);
}

/* Section titles: slightly bigger and darker than the links. */
.md-nav--primary .md-nav__item--section > label.md-nav__link,
.md-nav--primary .md-nav__item--section > .md-nav__link {
  font-size: 0.5rem;   /* 10px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--md-default-fg-color);
  opacity: 1;
  margin-top: 1.4em;
}

/* Active page: neutral highlight — never the link accent, so the sidebar
   stays monochrome in both schemes. */
.md-nav--primary .md-nav__link--active,
.md-nav--primary .md-nav__link--active:hover {
  color: var(--md-default-fg-color);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--md-default-fg-color--lighter);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin-left: -0.5rem;
  border-radius: 0 5px 5px 0;
}

/* A pale neutral wash behind the active item, light enough in dark mode
   to read as a highlight rather than a dark grey block. */
[data-md-color-scheme="default"] .md-nav--primary .md-nav__link--active {
  background: rgba(29, 29, 29, 0.04);
}
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__link--active {
  background: rgba(255, 255, 255, 0.11);
  color: rgba(255, 255, 255, 0.95);
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.55);
}

/* ---------- GitBook-style previous / next cards ---------- */

.md-footer__inner {
  display: flex;
  gap: 0.8rem;
  padding: 0.8rem 1rem 1.2rem;
  max-width: 47rem;   /* prose column (45rem) + its side padding */
  margin: 0 auto;
  box-sizing: border-box;
}

/* With both sidebars on screen the footer is centred on the whole page,
   which slid the cards under the navigation column. Reuse Material's grid
   and inset by the sidebar widths (12.1rem) plus the content's own
   margin and padding, so the cards line up with the text above them. */
@media screen and (min-width: 76.25em) {
  .md-footer__inner {
    max-width: 61rem;
    padding-left: 14.3rem;
    padding-right: 14.3rem;
  }
}

.md-footer__link {
  flex: 1;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  padding: 0.45rem 0.7rem;
  margin: 0;
  background: var(--md-default-bg-color);
  transition: border-color 0.15s, transform 0.15s;
  align-items: center;
}

.md-footer__title {
  font-size: 0.65rem;   /* 13px */
  line-height: 1.3;
}

.md-footer__direction {
  font-size: 0.5rem;    /* 10px */
}

.md-footer__link:hover {
  border-color: var(--md-accent-fg-color);
  opacity: 1;
  transform: translateY(-1px);
}

.md-footer__link--prev {
  justify-content: flex-start;
}

.md-footer__link--next {
  justify-content: flex-end;
  text-align: right;
}

/* Footer band inherits the page background instead of the primary color. */
.md-footer,
.md-footer-meta {
  background-color: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
}

.md-footer__title {
  color: var(--md-default-fg-color);
}

.md-footer__direction {
  color: var(--md-default-fg-color--light);
  opacity: 1;
}

.md-footer__button {
  color: var(--md-default-fg-color--light);
}

.md-footer-meta .md-footer-meta__inner {
  color: var(--md-default-fg-color--light);
}

.md-footer-meta a,
.md-copyright,
.md-copyright__highlight,
.md-social__link svg {
  color: var(--md-default-fg-color--light);
  fill: var(--md-default-fg-color--light);
}

/* ---------- Images ---------- */

.md-typeset figure img,
.md-typeset p > img {
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.md-typeset figcaption {
  font-size: 0.72rem;
  opacity: 0.75;
}

/* ---------- GitBook feel: measure, weight, tables ---------- */

/* GitBook's content column is ~45rem; Material lets text run much wider,
   which reads as "bigger". Cap and center the prose column. */
.md-content__inner {
  max-width: 45rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: content-box;
}

/* Inter 700 reads heavy in running text — GitBook bolds at 600. */
.md-typeset strong {
  font-weight: 600;
}

/* Tables: 14px, grey secondary header like GitBook's. */
.md-typeset table:not([class]) {
  font-size: 0.6rem;
}
.md-typeset table:not([class]) th {
  color: var(--md-default-fg-color--light);
  font-weight: 600;
}

/* Softer list markers and horizontal rules. */
.md-typeset ul li::marker,
.md-typeset ol li::marker {
  color: var(--md-default-fg-color--lighter);
}
.md-typeset hr {
  border-color: var(--md-default-fg-color--lightest);
}

/* Material hides the previous-link title on narrow screens; the cards have
   room for it. */
.md-footer__link--prev .md-footer__title {
  display: block;
}

/* ---------- Softer text tones ---------- */

/* Body copy sits a step below the headings: dark grey rather than
   near-black, which is easier on the eye over long pages. Headings and
   bold keep the full-strength color so hierarchy still reads. */
[data-md-color-scheme="default"] .md-typeset {
  color: #3d3d3d;
}
[data-md-color-scheme="slate"] .md-typeset {
  /* Kraken-style two-tone rule: running text a step greyer, so white is
     reserved for headings, bold and values. */
  color: rgba(255, 255, 255, 0.75);
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  color: var(--md-default-fg-color);
}

.md-typeset strong {
  color: var(--md-default-fg-color);
}

/* Right rail ("Table of contents"): grey like GitBook's "On this page",
   with the active heading in full strength. */
.md-nav--secondary .md-nav__title {
  color: var(--md-default-fg-color--light);
  font-size: 0.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.md-nav--secondary .md-nav__link {
  color: var(--md-default-fg-color--light);
  font-size: 0.6rem;
}

.md-nav--secondary .md-nav__link--active,
.md-nav--secondary .md-nav__link:hover {
  color: var(--md-default-fg-color);
}

/* Two-tone tables: the first column is the name/value and keeps full
   strength; description columns sit grey, like Kraken's parameter rows. */
.md-typeset table:not([class]) td {
  color: var(--md-default-fg-color--light);
}

.md-typeset table:not([class]) td:first-child {
  color: var(--md-default-fg-color);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) td:first-child {
  color: rgba(255, 255, 255, 0.92);
}

/* Slate's default foreground is muted, which would leave headings dimmer
   than the body copy above. Give dark mode its own hierarchy. */
[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4,
[data-md-color-scheme="slate"] .md-typeset strong {
  color: rgba(255, 255, 255, 0.95);
}

/* No mark in the header: Material falls back to its own icon when
   theme.logo is unset, so hide it and let the site name stand alone. */
.md-header .md-logo,
.md-nav__title .md-nav__button.md-logo {
  display: none;
}

/* Header icons (theme toggle, search, repo link) sit in grey like
   GitBook's, darkening on hover rather than shouting in full contrast. */
[data-md-color-scheme="default"] .md-header__button:not(.md-logo) {
  color: var(--md-default-fg-color--light);
  opacity: 1;
}
[data-md-color-scheme="default"] .md-header__button:not(.md-logo):hover {
  color: var(--md-default-fg-color);
}

[data-md-color-scheme="slate"] .md-header__button:not(.md-logo) {
  color: rgba(255, 255, 255, 0.7);
  opacity: 1;
}
[data-md-color-scheme="slate"] .md-header__button:not(.md-logo):hover {
  color: rgba(255, 255, 255, 0.95);
}

/* Theme toggle: GitBook sizes the glyph at 14px inside a 33px hit area;
   Material's default is nearly double that. */
.md-header__button.md-icon svg {
  width: 0.7rem;
  height: 0.7rem;
}

/* :not([hidden]) matters — Material toggles the inactive palette label
   with the hidden attribute, and a bare display rule would override it,
   leaving both sun and moon on screen. */
label.md-header__button[for^="__palette"]:not([hidden]) {
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Header layout: title | search | actions ---------- */

.md-header__inner {
  gap: 0.4rem;
}

/* Title and trailing actions share the outer thirds so the search box
   lands in the optical centre of the header. */
.md-header__title {
  flex: 1 1 0;
  margin-left: 0.4rem;
}

.md-header__trailing {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
}

@media screen and (min-width: 60em) {
  .md-search {
    flex: 0 1 22rem;
    margin: 0 auto;
    padding: 0;
  }
}

/* Link back to the trading app. */
.md-header__app {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 24px;
  font-size: 0.6rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--md-default-fg-color--light);
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.md-header__app:hover {
  color: var(--md-default-fg-color);
  border-color: var(--md-default-fg-color--lighter);
  background-color: var(--md-default-fg-color--lightest);
}

.md-header__app svg {
  width: 0.6rem;
  height: 0.6rem;
  fill: currentColor;
}

[data-md-color-scheme="default"] .md-header__app {
  border-color: #d9d9d9;
}

[data-md-color-scheme="slate"] .md-header__app {
  color: rgba(255, 255, 255, 0.7);
}
[data-md-color-scheme="slate"] .md-header__app:hover {
  color: rgba(255, 255, 255, 0.95);
}

/* On narrow screens keep just the arrow. */
@media screen and (max-width: 44em) {
  .md-header__app-label {
    display: none;
  }
  .md-header__app {
    padding: 0.2rem 0.3rem;
  }
}

/* ---------- Sidebar as its own column ---------- */

/* A different tone from the content area, with a hairline divider, so the
   navigation reads as a separate surface.

   On desktop the sidebar element is only ~48px tall (Material lets the
   inner scroll wrapper overflow it), so painting it directly gives a
   stripe rather than a column. A sticky-anchored pseudo-element that
   overshoots the viewport top and bottom paints the whole column at any
   scroll position. */
.md-sidebar--primary::before {
  content: "";
  position: absolute;
  top: -100vh;
  bottom: -100vh;
  left: 0;
  right: 0;
  z-index: -1;
  background-color: var(--md-sidebar-bg-color);
  /* Barely-there divider between the sidebar and the content column. */
  border-right: 1px solid var(--md-sidebar-divider-color);
}

/* The mobile drawer is a normal box: paint it directly. */
@media screen and (max-width: 76.1875em) {
  .md-sidebar--primary {
    background-color: var(--md-sidebar-bg-color);
  }
  .md-sidebar--primary::before {
    content: none;
  }
}

[data-md-color-scheme="default"] {
  --md-sidebar-bg-color: #ffffff;  /* light theme: no tint, divider only */
  --md-sidebar-divider-color: rgba(29, 29, 29, 0.05);
  /* Set explicitly: Material's slate foreground steps are too faint here
     to render a visible thumb. */
  --md-scrollbar-thumb: rgba(29, 29, 29, 0.18);
  --md-scrollbar-thumb-hover: rgba(29, 29, 29, 0.32);
}

[data-md-color-scheme="slate"] {
  --md-sidebar-bg-color: #0e161b;
  --md-sidebar-divider-color: rgba(255, 255, 255, 0.05);
  --md-scrollbar-thumb: rgba(255, 255, 255, 0.18);
  --md-scrollbar-thumb-hover: rgba(255, 255, 255, 0.32);
}

/* Scrollbars stay neutral — Material tints the thumb with the accent
   colour on hover, which put a blue bar down the sidebar — and only
   appear while the pointer is over that sidebar. */
.md-sidebar__scrollwrap {
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.2s;
}

.md-sidebar:hover .md-sidebar__scrollwrap {
  scrollbar-color: var(--md-scrollbar-thumb) transparent;
}

.md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
  background-color: transparent;
  transition: background-color 0.2s;
}

.md-sidebar:hover .md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
  background-color: var(--md-scrollbar-thumb);
}

.md-sidebar:hover .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover {
  background-color: var(--md-scrollbar-thumb-hover);
}

/* ---------- Collapsible groups in the sidebar ---------- */

/* Material already renders a chevron for nested groups and rotates it
   when open; make it lighter, smaller and animated, and give the
   children a guide line so the hierarchy reads at a glance. */
.md-nav--primary .md-nav__icon {
  width: 0.8rem;
  height: 0.8rem;
  color: var(--md-default-fg-color--lighter);
}

.md-nav--primary .md-nav__icon:after {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.md-nav--primary .md-nav__item--nested > .md-nav__link:hover .md-nav__icon {
  color: var(--md-default-fg-color--light);
}

.md-nav--primary
  .md-nav__item--nested:not(.md-nav__item--section)
  > .md-nav
  > .md-nav__list {
  border-left: 1px solid var(--md-default-fg-color--lightest);
  margin-left: 0.6rem;
  padding-left: 0.35rem;
}

/* ---------- Page actions (copy / markdown / LLM links) ---------- */

.md-page-actions {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.2rem;
  max-width: 45rem;
  margin: 0.6rem auto -1.2rem;
  padding: 0 1rem;
  box-sizing: content-box;
}

.md-page-actions__button {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 5px;
  background: transparent;
  color: var(--md-default-fg-color--light);
  font-size: 0.6rem;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.md-page-actions__button:hover {
  color: var(--md-default-fg-color);
  background-color: var(--md-default-fg-color--lightest);
}

.md-page-actions__button svg {
  width: 0.6rem;
  height: 0.6rem;
  fill: currentColor;
}

.md-page-actions__toggle {
  padding: 0.2rem 0.3rem;
}

.md-page-actions__menu {
  position: absolute;
  top: 100%;
  right: 1rem;
  z-index: 3;
  min-width: 15rem;
  margin-top: 0.25rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  background: var(--md-default-bg-color);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

/* Grouped sections, divided by a hairline: copy/markdown, then the
   assistants. */
.md-page-actions__group {
  padding: 0.25rem;
}

.md-page-actions__group + .md-page-actions__group {
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

.md-page-actions__item {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  width: 100%;
  padding: 0.35rem 0.4rem;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--md-default-fg-color);
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

/* Monochrome throughout: the hover state is a neutral wash, never an
   accent colour. */
.md-page-actions__item:hover {
  background-color: var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color);
}

.md-page-actions__item-icon svg {
  width: 0.7rem;
  height: 0.7rem;
  margin-top: 0.08rem;
  fill: var(--md-default-fg-color--light);
}

.md-page-actions__item-title {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.6rem;
  font-weight: 500;
  line-height: 1.3;
}

.md-page-actions__item-external svg {
  width: 0.55rem;
  height: 0.55rem;
  fill: var(--md-default-fg-color--lighter);
}

.md-page-actions__item-desc {
  display: block;
  font-size: 0.55rem;
  line-height: 1.35;
  color: var(--md-default-fg-color--light);
}

@media screen and (max-width: 44em) {
  .md-page-actions__button .md-page-actions__label {
    display: none;
  }
  .md-page-actions__menu {
    min-width: 13rem;
  }
}

/* Material renders the content block inside .md-typeset, so the menu
   links would otherwise pick up prose link styling — underlined in light
   mode, blue in dark. Keep them monochrome and undecorated. */
.md-typeset .md-page-actions a,
.md-typeset .md-page-actions a:hover,
.md-typeset .md-page-actions a:focus {
  color: var(--md-default-fg-color);
  text-decoration: none;
}

.md-typeset .md-page-actions a .md-page-actions__item-desc {
  color: var(--md-default-fg-color--light);
}

/* Secondary header link (API reference): text-only, no pill, so the
   Trading app link stays the primary action. */
.md-header__app--secondary {
  border-color: transparent;
}

.md-header__app--secondary:hover {
  border-color: transparent;
  background-color: var(--md-default-fg-color--lightest);
}

/* Heading permalinks: the hash appears on hover as a muted mark, not a
   bright accent glyph. */
.md-typeset .headerlink {
  color: var(--md-default-fg-color--lighter);
  text-decoration: none;
}

.md-typeset .headerlink:hover,
.md-typeset :target > .headerlink {
  color: var(--md-default-fg-color--light);
}