custom.css

/* Match website heading style: tracking-wide (0.025em), semibold (600) */
h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: 0.025em;
  font-weight: 600;
}

/* Keep the wordmark readable while preserving its intrinsic ratio. */
.nav-logo {
  aspect-ratio: 64 / 29;
  block-size: 2.25rem !important;
  inline-size: auto !important;
}

/* Sidebar group titles - 50% larger */
.sidebar-group-header h5 {
  font-size: 1.5em;
}

/* Keep mobile guide content inside the viewport. */
@media (max-width: 640px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  #content-area {
    box-sizing: border-box;
    inline-size: calc(100vw - 2rem) !important;
    width: calc(100vw - 2rem) !important;
    max-inline-size: calc(100vw - 2rem) !important;
    max-width: calc(100vw - 2rem) !important;
    min-width: 0;
  }

  #header,
  #content,
  #content .columns,
  #header .prose,
  #content .prose {
    max-inline-size: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #header .prose > *,
  #content > span[data-as="p"],
  #content p,
  #content li {
    overflow-wrap: anywhere;
  }

  #header blockquote a[href$="/llms.txt"],
  #content blockquote a[href$="/llms.txt"],
  #content-area blockquote a[href$="/llms.txt"] {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
  }
}

/* Keep the agent directive discoverable without changing page layout. */
.agent-llms-directive {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reserve collapsed related-link accordions before client hydration. */
.related-api-links {
  min-height: 3rem;
}

/* Skip rendering heavy offscreen sections on long documentation pages. */
@supports (content-visibility: auto) {
  #content > :is(.accordion, .card-group, .code-block, .code-group, .expandable, .steps) {
    content-visibility: auto;
    contain-intrinsic-size: auto 320px;
  }
}

/* Meet WCAG AA contrast for Mintlify's light pagination and footer labels. */
html:not(.dark) #pagination a span,
html:not(.dark) footer a {
  color: #5f5d5c !important;
}

/* Keep Mintlify controls above WCAG AA contrast in the light theme. */
html:not(.dark) #search-bar-entry,
html:not(.dark) #search-bar-entry *,
html:not(.dark) #search-bar-entry-mobile,
html:not(.dark) #search-bar-entry-mobile *,
html:not(.dark) code-group button,
html:not(.dark) code-group button *,
html:not(.dark) .code-group button,
html:not(.dark) .code-group button * {
  color: #5f5d5c !important;
}

html:not(.dark) .text-stone-400,
html:not(.dark) [class~="peer/title"],
html:not(.dark) p.truncate.font-medium {
  color: #5f5d5c !important;
}

html:not(.dark) #navbar button span {
  color: #5f5d5c !important;
}

html:not(.dark) method-pill,
html:not(.dark) .method-pill {
  color: #3b2b27 !important;
}

html:not(.dark) .method-nav-pill span[class*="bg-[#3064E3]"],
html:not(.dark) .method-nav-pill span[class*="bg-[#CB3A32]"] {
  color: #ffffff !important;
}

html:not(.dark) .method-nav-pill span[class*="bg-[#2AB673]"] {
  color: #ffffff !important;
  background-color: #147a4b !important;
}

html:not(.dark) .method-nav-pill span[class*="bg-[#DA622B]"] {
  color: #ffffff !important;
  background-color: #a9471b !important;
}

html:not(.dark) .method-nav-pill span[class*="bg-[#C28C30]"] {
  color: #ffffff !important;
  background-color: #855d12 !important;
}

html:not(.dark) tryit-button,
html:not(.dark) .tryit-button {
  color: #ffffff !important;
  background-color: #116b46 !important;
}

html:not(.dark) [data-component-part="field-required-pill"] {
  color: #b91c1c !important;
}

/* Show one response example. The curated status tabs replace the generated one. */
html:has(.panel) [class*="xl:w-[28rem]"]:not(.panel) {
  min-height: 0;
}

html:has(.panel) [class*="xl:w-[28rem]"]:not(.panel) > .code-group + .code-group {
  display: none;
}

/* Put the request above the status tabs and let the tabs use the free height. */
@media (min-width: 1280px) {
  #content-side-layout:has(> .panel) > div:not(.panel) {
    order: 1;
    flex: 0 0 auto;
    margin-bottom: 1rem;
  }

  #content-side-layout:has(> .panel) > .panel {
    order: 2;
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 0;
  }
}

/* Show the full non-affiliation line in the footer instead of a clipped label. */
footer div:has(> div > a[href$="/non-affiliation"]) {
  max-width: 20rem;
  align-items: flex-start;
  white-space: normal;
}

footer a[href$="/non-affiliation"] {
  max-width: 20rem;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

/* Keep the next-page description inside its link on narrow API reference columns. */
#pagination [data-component-part="pagination-description"] {
  width: 100%;
  max-width: 100%;
}

/* Fit tables of up to 3 columns inside the narrow API reference column on 1280px laptops. */
@media (min-width: 1024px) and (max-width: 1535px) {
  .mdx-content table:not(:has(th:nth-child(4))) :is(td, th) {
    min-width: 110px !important;
  }

  .mdx-content table code {
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}

/* Stack cards in the narrow API reference column so bodies keep readable line lengths. */
@media (min-width: 1024px) and (max-width: 1535px) {
  #api-playground-2-operation-page .card-group {
    --cols: 1 !important;
  }
}