/* ============================================================ Humanos — Mintlify rebrand Targets the documented Mintlify CSS hooks (ID selectors and element selectors) listed in mintlify.com/docs/customize/ custom-scripts. Source-of-truth tokens live in "Humanos Design System/colors_and_type.css" — copied here so Mintlify's pipeline doesn't need to resolve a path with a space in it. ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"); :root { /* Core */ --hm-authority: #111111; --hm-clarity: #f4f3ef; --hm-humanity: #e4d8c8; /* State signals — never decorative */ --hm-verification: #4b49ca; --hm-execution: #7978e9; --hm-pending: #7da0fa; --hm-rejection: #f3797e; --hm-verification-wash: rgba(75, 73, 202, 0.08); --hm-verification-wash-strong: rgba(75, 73, 202, 0.14); --hm-rejection-wash: rgba(243, 121, 126, 0.1); /* Neutrals */ --hm-ink-0: #111111; --hm-ink-1: #2a2a28; --hm-ink-2: #4a4a46; --hm-ink-3: #76746d; --hm-ink-4: #a6a29a; --hm-line: #ddd9d0; --hm-line-strong: #c9c4b7; --hm-surface-raised: #ffffff; --hm-chalk-0: #f4f3ef; --hm-chalk-1: #cfcdc6; --hm-chalk-2: #8f8d85; --hm-line-dark: #2a2a28; /* Type */ --font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --font-features-sans: "ss01" 1, "cv11" 1, "tnum" 1; --font-features-mono: "zero" 1, "ss01" 1; /* Radii — deliberately tight */ --r-1: 2px; --r-2: 4px; --r-3: 8px; /* Override Mintlify's Tailwind background tokens. Mintlify stores them as space-separated RGB triplets (used with rgb(var(--bg) / opacity)) so anything using bg-background-light / bg-background-dark — including the search bar, version dropdown, and the dark-mode main page surface — picks up the brand colors instead of pure white / #0E0E10. */ --background-light: 244 243 239; /* clarity #F4F3EF */ --background-dark: 17 17 17; /* authority #111111 */ } /* Defensive: re-assert at higher specificity (html / html.dark) with !important so Mintlify's per-mode CSS can't shadow these. */ html, html.dark { --background-light: 244 243 239 !important; --background-dark: 17 17 17 !important; } /* Fixed full-screen page bg (the layer behind navbar/sidebar/content) — pin it directly to the brand surface so it can't drift even if a Tailwind opacity modifier compositing changes the rendered color. */ html.dark .fixed.inset-0[class*="bg-background"] { background-color: var(--hm-authority) !important; } .fixed.inset-0[class*="bg-background"] { background-color: var(--hm-clarity) !important; } /* Fallback: if a Mintlify rule paints the page surface via html / body / a wrapper I haven't found, force the brand color there too. */ html.dark, html.dark body { background-color: var(--hm-authority) !important; } html:not(.dark), html:not(.dark) body { background-color: var(--hm-clarity) !important; } /* ============================================================ Page surface — clarity background, authority text ============================================================ */ #background-color, #body-content { background-color: var(--hm-clarity); } html.dark #background-color, html.dark #body-content { background-color: var(--hm-authority); } body { font-family: var(--font-sans); font-feature-settings: var(--font-features-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ============================================================ Typography — Inter, tight tracking on display sizes ============================================================ */ #page-title, mdx-content h1 { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; color: var(--hm-verification); } html.dark #page-title, html.dark mdx-content h1 { color: var(--hm-execution); } /* On API endpoint pages, the page title is the endpoint name ("Get", "Post", etc.) — keep that authority black so the indigo accent is reserved for params/fields. Mintlify renders api-section as a class (not an element) and the playground wrapper id is "api-playground-N-operation-page". */ body:has(.api-section) #page-title, body:has([id^="api-playground"]) #page-title { color: var(--hm-ink-0); } html.dark body:has(.api-section) #page-title, html.dark body:has([id^="api-playground"]) #page-title { color: var(--hm-chalk-0); } mdx-content h2 { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; } mdx-content h3, mdx-content h4 { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.005em; line-height: 1.25; } mdx-content p, mdx-content li { font-family: var(--font-sans); line-height: 1.5; } eyebrow, sidebar-group-header { font-family: var(--font-sans); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; font-size: 12px; color: var(--hm-ink-3); } html.dark eyebrow, html.dark sidebar-group-header { color: var(--hm-chalk-2); } /* ============================================================ Code — JetBrains Mono with slashed zero ============================================================ */ code, kbd, samp, pre, code-block, code-block * { font-family: var(--font-mono) !important; font-feature-settings: var(--font-features-mono); } /* Inline code — a light-indigo brand chip. The old selector used `mdx-content` as an element (this build renders it as a .mdx-content class), so it never matched and inline code fell back to Mintlify's near-invisible light-gray. Target the class and out-specify the default. */ .mdx-content :not(pre) > code { background-color: var(--hm-verification-wash) !important; color: var(--hm-verification) !important; border: 1px solid var(--hm-verification-wash) !important; border-radius: var(--r-1); padding: 0.1em 0.35em; font-size: 0.9em; } html.dark .mdx-content :not(pre) > code { background-color: rgba(121, 120, 233, 0.12) !important; color: var(--hm-execution) !important; border-color: rgba(121, 120, 233, 0.12) !important; } code-block, code-block pre { border-radius: var(--r-3); border: 1px solid var(--hm-line-dark); } /* Outer wrappers Mintlify applies rounded-2xl to — flatten to 4px so the radius matches the brand code-block spec. Covers single code blocks (.code-block) and the API page tabbed panel (.code-group). */ .code-block, .code-group { border-radius: 4px !important; } /* ============================================================ Links — verification indigo (the entire indigo budget on chrome lives in this section + active sidebar/tab) ============================================================ */ #body-content a, #body-content a *, #body-content mdx-content a, #body-content mdx-content a *, mdx-content a[href], mdx-content a[href] *, mdx-content a, mdx-content a *, link, link * { color: var(--hm-verification) !important; text-decoration-color: transparent; text-underline-offset: 0.2em; transition: text-decoration-color 120ms cubic-bezier(0.2, 0, 0, 1); } #body-content a:hover, mdx-content a:hover, link:hover { text-decoration: underline; text-decoration-color: currentColor; } html.dark #body-content a, html.dark #body-content a *, html.dark #body-content mdx-content a, html.dark #body-content mdx-content a *, html.dark mdx-content a[href], html.dark mdx-content a[href] *, html.dark mdx-content a, html.dark mdx-content a *, html.dark link, html.dark link * { color: var(--hm-verification) !important; } /* Focus ring — verification indigo at 18% */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(75, 73, 202, 0.18), 0 1px 2px rgba(17, 17, 17, 0.08); border-color: var(--hm-verification); } /* ============================================================ Top navbar — hairline divider, no shadow ============================================================ */ #navbar { background-color: var(--hm-clarity); border-bottom: 1px solid var(--hm-line); box-shadow: none; } html.dark #navbar { background-color: var(--hm-authority); border-bottom-color: var(--hm-line-dark); } /* Logo — 50% larger than Mintlify's default h-7 (28px → 42px) */ .nav-logo { height: 42px !important; } /* Page header (eyebrow + title + optional description) — same hairline separator as the navbar, but with breathing room so the title or description doesn't sit flush against the line. */ #header { background-color: transparent; border-bottom: 1px solid var(--hm-line); padding-bottom: 1.25rem; box-shadow: none; } html.dark #header { border-bottom-color: var(--hm-line-dark); } /* On API endpoint pages, drop the header divider — the API playground sits directly below and supplies its own visual structure, so the line just adds noise. */ body:has(.api-section) #header, body:has([id^="api-playground"]) #header { border-bottom: none; padding-bottom: 0; } #topbar-cta-button { background: var(--hm-authority); color: var(--hm-chalk-0); border-radius: var(--r-2); border: 1px solid var(--hm-authority); font-weight: 500; } html.dark #topbar-cta-button { background: var(--hm-chalk-0); color: var(--hm-authority); border-color: var(--hm-chalk-0); } /* ============================================================ Sidebar — hairlines, indigo wash on active item ============================================================ */ /* Remove the sticky gradient fade at the top of the sidebar (Mintlify's default mask for scrolled content). Element has from-background-light + dark:from-background-dark, so this single rule covers both modes. */ #sidebar-content [class*="from-background-light"], #sidebar-content [class*="from-background-dark"] { display: none; } /* Restore the 32px (h-8) of breathing room the removed fade div was occupying, so the first nav group doesn't sit flush against the navbar. */ #sidebar-content #navigation-items { padding-top: 2rem; } #sidebar, #sidebar-content { background-color: var(--hm-clarity); border-right: 1px solid var(--hm-line); } html.dark #sidebar, html.dark #sidebar-content { background-color: var(--hm-authority); border-right-color: var(--hm-line-dark); } sidebar-title { color: var(--hm-ink-0); font-weight: 600; } html.dark sidebar-title { color: var(--hm-chalk-0); } sidebar-nav-group-divider { border-color: var(--hm-line); } html.dark sidebar-nav-group-divider { border-color: var(--hm-line-dark); } /* Sidebar item — hover at 10% verification indigo, active / selected at 30%. Same rgba in both modes (Mintlify's default gray hover/selected washes are replaced). Text colors stay as defined: verification indigo in light mode, execution in dark mode, so the active item reads as branded on top of the wash. */ #sidebar-content li > a:hover, sidebar-group > a:hover { background-color: rgba(75, 73, 202, 0.1) !important; color: var(--hm-verification); border-radius: var(--r-2); } /* Selected state — kitchen-sink selector list to catch every possible Mintlify marker for the active sidebar item. The hover rule above already proves the link structure is #sidebar-content li > a, so if the selected state isn't hitting it must be marked via a different attribute / class on either the , the

. */ #sidebar li > a:where( [data-active], [data-active="true"], [aria-current], [aria-current="page"], [aria-current="true"], [data-state="active"], [data-state="selected"], [data-state="open"], [class*="bg-primary"], [class*="active"], [class*="selected"], [class*="current"] ):hover, #sidebar-content li > a:where( [data-active], [data-active="true"], [aria-current], [aria-current="page"], [aria-current="true"], [data-state="active"], [data-state="selected"], [data-state="open"], [class*="bg-primary"], [class*="active"], [class*="selected"], [class*="current"] ):hover, #sidebar li:where( [data-active], [data-active="true"], [aria-current], [aria-current="page"], [aria-current="true"], [data-state="active"] ) > a:hover, #sidebar-content li:where( [data-active], [data-active="true"], [aria-current], [aria-current="page"], [aria-current="true"], [data-state="active"] ) > a:hover, sidebar-group[data-active]:hover, sidebar-group[data-active] > a:hover { background-color: rgba(75, 73, 202, 0.2) !important; color: var(--hm-verification) !important; } html.dark #sidebar li > a:where( [data-active], [data-active="true"], [aria-current], [aria-current="page"], [aria-current="true"], [data-state="active"], [data-state="selected"], [data-state="open"], [class*="bg-primary"], [class*="active"], [class*="selected"], [class*="current"] ):hover, html.dark #sidebar-content li > a:where( [data-active], [data-active="true"], [aria-current], [aria-current="page"], [aria-current="true"], [data-state="active"], [data-state="selected"], [data-state="open"], [class*="bg-primary"], [class*="active"], [class*="selected"], [class*="current"] ):hover, html.dark #sidebar li:where( [data-active], [data-active="true"], [aria-current], [aria-current="page"], [aria-current="true"], [data-state="active"] ) > a:hover, html.dark #sidebar-content li:where( [data-active], [data-active="true"], [aria-current], [aria-current="page"], [aria-current="true"], [data-state="active"] ) > a:hover, html.dark sidebar-group[data-active]:hover, html.dark sidebar-group[data-active] > a:hover { background-color: rgba(75, 73, 202, 0.2) !important; color: var(--hm-execution) !important; } /* ============================================================ Tabs — all tabs use verification indigo (the brand accent), active tab gets the same indigo underline ============================================================ */ .nav-tabs-item, nav-tabs-item { color: var(--hm-verification); } html.dark .nav-tabs-item, html.dark nav-tabs-item { color: var(--hm-execution); } /* The visible underline on the active tab is an absolutely positioned

 inside a "Example: …" prose row, not
   as a field-info-pill. Style it to match the type/default
   pills so visibility is consistent. Also covers other inline
    in param descriptions (range hints, max length, etc.). */
body:has(.api-section) :not(pre) > code,
body:has([id^="api-playground"]) :not(pre) > code {
  background-color: rgba(221, 217, 208, 0.55);
  color: var(--hm-ink-1);
  border: 1px solid rgba(221, 217, 208, 0.55);
  border-radius: var(--r-1);
  padding: 0.1em 0.35em;
  font-size: 0.9em;
}

html.dark body:has(.api-section) :not(pre) > code,
html.dark body:has([id^="api-playground"]) :not(pre) > code {
  background-color: rgba(42, 42, 40, 0.7);
  color: var(--hm-chalk-1);
  border-color: rgba(42, 42, 40, 0.7);
}

method-pill,
method-nav-pill {
  font-family: var(--font-mono);
  font-size: 0.8em;
  letter-spacing: 0.04em;
  font-weight: 500;
  border-radius: var(--r-2);
}

#api-playground-input input,
#api-playground-input select,
#api-playground-input textarea {
  background-color: var(--hm-surface-raised);
  border: 1px solid var(--hm-line);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
}

html.dark #api-playground-input input,
html.dark #api-playground-input select,
html.dark #api-playground-input textarea {
  background-color: var(--hm-line-dark);
  border-color: var(--hm-line-dark);
}

/* Try It button on API endpoint pages — verification indigo
   (the brand primary) bg with white text and icon, square
   corners, equal height to the endpoint-info card. Mintlify
   defaults to h-9 / rounded-xl / bg-[#2AB673], so each property
   needs an !important override. The icon inside the button is
   an SVG that paints via currentColor, so setting `color` on
   the button also colors the icon. */
.tryit-button {
  background-color: var(--hm-verification) !important;
  color: #ffffff !important;
  border-radius: 3px !important;
  height: 48px !important;
}

.tryit-button svg,
.tryit-button svg * {
  color: #ffffff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

.tryit-button:hover {
  opacity: 0.9;
}

html.dark .tryit-button {
  background-color: var(--hm-verification) !important;
  color: #ffffff !important;
}

/* Outer toolbar wrapper that holds [endpoint-info] + [Try It].
   Strip its bg, border, padding, and rounding. Selector matches
   any div whose direct child is a div containing the tryit-button
   — i.e. the grandparent of the button. */
[id^="api-playground"] div:has(> div > .tryit-button) {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Inner endpoint-info card (method pill + path + copy icon) —
   verification indigo border, no rounded corners, taller so it
   matches the Try It button height exactly. Scoped via :has()
   on the method-pill child so it can't bleed elsewhere. */
[id^="api-playground"] .border-standard:has(> .method-pill) {
  border-radius: 3px !important;
  border-color: var(--hm-verification) !important;
  height: 48px;
  min-height: 48px;
}

html.dark [id^="api-playground"] .border-standard:has(> .method-pill) {
  border-color: var(--hm-execution) !important;
}

/* Method badge inside the endpoint info card — always verification
   indigo regardless of HTTP method. Sidebar's .method-nav-pill keeps
   Mintlify's per-method colors (only this one card is overridden). */
[id^="api-playground"] .border-standard:has(> .method-pill) > .method-pill {
  background-color: rgba(75, 73, 202, 0.12) !important;
  color: var(--hm-verification) !important;
}

html.dark
  [id^="api-playground"]
  .border-standard:has(> .method-pill)
  > .method-pill {
  background-color: rgba(121, 120, 233, 0.18) !important;
  color: var(--hm-execution) !important;
}

/* ============================================================
   Footer + pagination — neutral hairline
   ============================================================ */
#footer,
footer,
#pagination {
  border-top: 1px solid var(--hm-line);
  background-color: transparent;
}

html.dark #footer,
html.dark footer,
html.dark #pagination {
  border-top-color: var(--hm-line-dark);
}

pagination-prev,
pagination-next {
  border: 1px solid var(--hm-line);
  border-radius: var(--r-2);
}

html.dark pagination-prev,
html.dark pagination-next {
  border-color: var(--hm-line-dark);
}

/* ============================================================
   Selection — verification wash
   ============================================================ */
::selection {
  background: var(--hm-verification-wash-strong);
  color: var(--hm-ink-0);
}

html.dark ::selection {
  background: var(--hm-verification-wash-strong);
  color: var(--hm-chalk-0);
}

/* ============================================================
   Page description — unify with body prose
   Mintlify renders the frontmatter `description` (and on API
   reference pages, the endpoint description) as a  inside
   #header, styled with a muted "subtitle gray" that reads as
   a different paragraph treatment than the body. Against
   clarity in light mode it's only a hair darker than body;
   against authority in dark mode it sits close enough to the
   background to read as low contrast. Force it to the design-
   system body color (ink-1 / chalk-1) so the whole page reads
   as one.
   ============================================================ */
#header p,
#header [class*="description"],
#header [class*="page-description"] {
  color: var(--hm-ink-1) !important;
  font-family: var(--font-sans);
}

html.dark #header p,
html.dark #header [class*="description"],
html.dark #header [class*="page-description"] {
  color: var(--hm-chalk-1) !important;
}

/* ============================================================
   API reference — every description on the page
   The narrow .primitive-param-field p / li rule only catches
   paragraph and list children of param rows. API pages also
   render text via:
   • 
 wrappers around markdown descriptions
   • Tailwind text-gray-* utility classes on response field
     descriptions, status-code labels, and section prose
   • Nested expandable bodies for response schemas
   Force the design-system body color on every text element on
   an API page — paragraphs, list items, divs, and any element
   carrying a text-gray-* utility — except info pills (which
   need to stay muted; their existing rules set ink-3 / chalk-2
   directly, beating inheritance, and the :not() below skips them
   so this rule doesn't fight the pills).
   ============================================================ */
body:has(.api-section) p:not(.code-group *):not([data-radix-popper-content-wrapper] *),
body:has(.api-section) li:not(.code-group *):not([data-radix-popper-content-wrapper] *),
body:has(.api-section) .primitive-param-field:not(.code-group *):not([data-radix-popper-content-wrapper] *),
body:has(.api-section)
  [class*="text-gray-"]:not([data-component-part="field-info-pill"]):not(
    [data-component-part="field-info-pill"] *
  ):not(.code-group *):not([data-radix-popper-content-wrapper] *),
body:has([id^="api-playground"]) p:not(.code-group *):not([data-radix-popper-content-wrapper] *),
body:has([id^="api-playground"]) li:not(.code-group *):not([data-radix-popper-content-wrapper] *),
body:has([id^="api-playground"]) .primitive-param-field:not(.code-group *):not([data-radix-popper-content-wrapper] *),
body:has([id^="api-playground"])
  [class*="text-gray-"]:not([data-component-part="field-info-pill"]):not(
    [data-component-part="field-info-pill"] *
  ):not(.code-group *):not([data-radix-popper-content-wrapper] *) {
  color: var(--hm-ink-1) !important;
}

/* Keep exclusions identical in both modes: :not() contributes specificity,
   so omitting these lets the light-mode color beat the dark-mode rule. */
html.dark body:has(.api-section) p:not(.code-group *):not([data-radix-popper-content-wrapper] *),
html.dark body:has(.api-section) li:not(.code-group *):not([data-radix-popper-content-wrapper] *),
html.dark body:has(.api-section) .primitive-param-field:not(.code-group *):not([data-radix-popper-content-wrapper] *),
html.dark
  body:has(.api-section)
  [class*="text-gray-"]:not([data-component-part="field-info-pill"]):not(
    [data-component-part="field-info-pill"] *
  ):not(.code-group *):not([data-radix-popper-content-wrapper] *),
html.dark body:has([id^="api-playground"]) p:not(.code-group *):not([data-radix-popper-content-wrapper] *),
html.dark body:has([id^="api-playground"]) li:not(.code-group *):not([data-radix-popper-content-wrapper] *),
html.dark body:has([id^="api-playground"]) .primitive-param-field:not(.code-group *):not([data-radix-popper-content-wrapper] *),
html.dark
  body:has([id^="api-playground"])
  [class*="text-gray-"]:not([data-component-part="field-info-pill"]):not(
    [data-component-part="field-info-pill"] *
  ):not(.code-group *):not([data-radix-popper-content-wrapper] *) {
  color: var(--hm-chalk-1) !important;
}

/* ============================================================
   Bold — verification indigo
   Inline / in prose picks up the brand accent, the
   same color reserved for links and active sidebar. Reset
   inside code so syntax highlighting always wins.
   ============================================================ */
mdx-content strong,
mdx-content b {
  color: var(--hm-verification);
  font-weight: 600;
}

html.dark mdx-content strong,
html.dark mdx-content b {
  color: var(--hm-execution);
}

mdx-content pre strong,
mdx-content pre b,
mdx-content code strong,
mdx-content code b,
code-block strong,
code-block b {
  color: inherit;
}

/* ============================================================
   Cards & callouts — inherit Inter explicitly so Mintlify's
   per-component defaults can't shadow the brand face.
   ============================================================ */
a.card,
.card,
callout,
frame,
expandable {
  font-family: var(--font-sans);
}

/* ============================================================
   Callouts — Tip / Note / Warning / Info / Check
   Inherit the card surface (set higher up), then layer a
   3px verification-indigo left border so each one reads as a
   verifiable annotation on the prose, not just a generic card.
   ============================================================ */
callout {
  border-left: 3px solid var(--hm-verification);
}

html.dark callout {
  border-left-color: var(--hm-execution);
}

/* ============================================================
   Code-block — single flat surface, no layered washes
   Mintlify stacks several inner wrappers inside a code block —
   tab bar, header (copy / lang button), Shiki , optional
   line-number gutter. Each wrapper carries its own background
   tint (often via a top-fading linear-gradient for "depth").
   Against the light page surface those tints are invisible; in
   dark mode they paint a visible band at the top of the block.
   Strategy: paint authority black on the outer root only, then
   force every descendant surface to transparent (color + image)
   so nothing else can render a tint.
   ============================================================ */
[data-component-part="code-block-root"],
.code-block,
.code-group {
  background-color: var(--hm-authority) !important;
  background-image: none !important;
}

[data-component-part="code-block-root"] *,
.code-block *,
.code-group * {
  background-color: transparent !important;
  background-image: none !important;
}

/* Re-allow specific child surfaces that legitimately need their
   own bg — currently none, but keep this comment so anyone adding
   a tinted child later (e.g. a diff +/- line highlight) knows to
   layer it back in below. */

/* The outer code-block wrapper and the inner Shiki  both
   carry a 1px line-dark border (set earlier in this file for
   visual definition). With every inner surface now flattened to
   the same authority black, those borders are the only thing
   painting a seam between the wrapper and the code body — the
   visible "frame" you see around the code. Drop both so the
   outer box and the code surface read as one continuous block.
   Padding stays, so the gutter between the text and the edge
   is preserved. */
[data-component-part="code-block-root"],
.code-block,
.code-group,
code-block,
code-block pre,
[data-component-part="code-block-root"] pre {
  border: none !important;
}

/* ============================================================
   SDK selector (intro page) — a tabbed SDK picker that replaces
   the old stacked SDK cards. One  per official SDK
   (TypeScript / Python / C#); Mintlify's native  renders
   the tab strip on top and the active panel below (requirement 1,
   free). Each panel is a designed vertical unit: the SDK logo,
   the SDK title, a one-line description, a macOS-style terminal
   (the fenced install command, which carries Mintlify's native
   copy button), and a docs button. Everything is scoped under the
   .sdk-tabs wrapper so nothing leaks into other Tabs / CodeGroups.

   NOTE: the W3C-standards block further down the intro page
   (introduction.mdx ~lines 71-86) still uses the .sdk-cards
   CardGroup, so the .sdk-cards CARD-CHROME rules are PRESERVED
   below unchanged. Only the old SDK-only inline-code terminal
   rules (which the tabbed selector now replaces) were removed.
   ============================================================ */

/* ============================================================
   Cards (.sdk-cards) — illustration-panel cards for the
   W3C-standards grid (intro) and the "pick your path" grid
   (quick start). Each card is a large soft-indigo panel with a
   faint grid and a big indigo icon, with the title + description
   sitting beneath it (no bordered box — the panel is the visual).
   ============================================================ */
.sdk-cards a.card,
.sdk-cards .card {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: transform 0.15s ease;
}

/* Strip Mintlify's inner padding so the panel + text go edge-to-edge. */
.sdk-cards a.card > div,
.sdk-cards .card > div {
  padding: 0 !important;
}

/* Hide the hover-arrow decoration — the panel carries the affordance. */
.sdk-cards .card > div > .absolute {
  display: none !important;
}

.sdk-cards > div {
  gap: 1.75rem !important;
  margin: 0 !important;
}

.sdk-cards > div + div {
  margin-top: 1.75rem !important;
}

.sdk-cards a.card:hover,
.sdk-cards .card:hover {
  transform: translateY(-2px);
}

/* The icon panel — a full-width tinted grid tile with a large icon.
   Mintlify card icons are mask-image svgs whose visible color is their
   background-color, so tint via that. */
.sdk-cards [data-component-part="card-icon"] {
  position: relative;
  display: block !important;
  width: 100% !important;
  height: 11rem !important;
  padding: 0 !important;
  margin: 0 0 1.1rem 0 !important;
  background-color: transparent;
  /* Tight, fine dot texture over a radial wash that is dark in the
     center and fades lighter toward the edges. */
  background-image:
    radial-gradient(circle, rgba(75, 73, 202, 0.4) 0.9px, transparent 1.3px),
    radial-gradient(
      120% 135% at 50% 50%,
      rgba(75, 73, 202, 0.72) 0%,
      rgba(75, 73, 202, 0.32) 34%,
      rgba(75, 73, 202, 0.03) 74%
    );
  background-size:
    9px 9px,
    100% 100%;
  background-repeat: repeat, no-repeat;
  background-position: center, center;
  border: none;
  border-radius: var(--r-3);
}

/* The FontAwesome icon is hidden; the Humanos mark is placed in white,
   centered on the panel (masked so the fill is always white). */
.sdk-cards [data-component-part="card-icon"] svg {
  display: none !important;
}

.sdk-cards [data-component-part="card-icon"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3rem;
  height: 3rem;
  transform: translate(-50%, -50%);
  background-color: #fff;
  -webkit-mask: url("/favicon.svg") center / contain no-repeat;
  mask: url("/favicon.svg") center / contain no-repeat;
}

html.dark .sdk-cards [data-component-part="card-icon"] {
  background-image:
    radial-gradient(circle, rgba(121, 120, 233, 0.42) 0.9px, transparent 1.3px),
    radial-gradient(
      120% 135% at 50% 50%,
      rgba(121, 120, 233, 0.66) 0%,
      rgba(121, 120, 233, 0.32) 34%,
      rgba(121, 120, 233, 0.03) 74%
    );
  border: none;
}

/* Text sits below the panel — neutral, like the reference. */
.sdk-cards .card > div > div:not([data-component-part]) {
  color: var(--hm-ink-3);
}

.sdk-cards a.card [data-component-part="card-title"],
.sdk-cards a.card h2,
.sdk-cards a.card h3,
.sdk-cards a.card h4,
.sdk-cards .card [data-component-part="card-title"],
.sdk-cards .card h2,
.sdk-cards .card h3,
.sdk-cards .card h4 {
  color: var(--hm-ink-1) !important;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

html.dark .sdk-cards .card > div > div:not([data-component-part]) {
  color: var(--hm-chalk-2);
}

html.dark .sdk-cards a.card [data-component-part="card-title"],
html.dark .sdk-cards .card [data-component-part="card-title"],
html.dark .sdk-cards a.card h2,
html.dark .sdk-cards a.card h3,
html.dark .sdk-cards a.card h4,
html.dark .sdk-cards .card h2,
html.dark .sdk-cards .card h3,
html.dark .sdk-cards .card h4 {
  color: var(--hm-chalk-0) !important;
}

/* ============================================================
   Pagination footer — the prev/next links sit flush under the
   divider bar; add room so they aren't glued to it.
   ============================================================ */
.flex.items-center.text-sm.font-semibold[class*="px-0.5"] {
  padding-top: 1.5rem !important;
}

/* ============================================================
   Steps component — number circles in the Humanos indigo, with a
   faint indigo connector line. Applies to every  block.
   ============================================================ */
.steps .step .rounded-full {
  background-color: var(--hm-verification) !important;
  color: #fff !important;
  font-weight: 600;
}

html.dark .steps .step .rounded-full {
  background-color: var(--hm-execution) !important;
  color: #fff !important;
}

/* The vertical connector between steps. */
.steps .step .w-px {
  background-color: rgba(75, 73, 202, 0.25) !important;
}

html.dark .steps .step .w-px {
  background-color: rgba(121, 120, 233, 0.3) !important;
}

/* ============================================================
   .sdk-tabs — the tabbed SDK selector
   ============================================================ */
.sdk-tabs {
  margin: 1rem 0;
}

/* --- Tab strip: brand-indigo active tab. Additive polish; the
   existing bg-primary recolor rules are scoped to #sidebar, so
   these are the only rules coloring the CONTENT tab strip. If
   Mintlify's tab markup differs from role="tablist"/role="tab",
   the panel still works and only the accent is skipped. -------- */
.sdk-tabs [role="tablist"] {
  justify-content: flex-end;
  border-bottom: 1px solid var(--hm-line);
  gap: 0.25rem;
}

html.dark .sdk-tabs [role="tablist"] {
  border-bottom-color: var(--hm-line-dark);
}

/* Each tab is an  wrapping a
   div[data-component-part="tab-button"] that carries BOTH the label and the
   active underline (Mintlify: `border-b border-current text-primary` on a
   `max-w-max` box → the underline is only as wide as the label). Put the
   horizontal padding on that inner box and drop max-w-max so the underline
   spans the whole tab (label + padding), not just the text. */
.sdk-tabs [role="tab"] [data-component-part="tab-button"] {
  max-width: none !important;
  justify-content: center;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* Active tab: force the label indigo. Mintlify colors it `text-primary`,
   which this theme sets to #111 (docs.json), so the tab never looked
   selected. The underline is `border-current`, so it follows the label
   color and turns indigo too. */
.sdk-tabs
  [role="tab"][aria-selected="true"]
  [data-component-part="tab-button"] {
  color: var(--hm-verification) !important;
}

html.dark
  .sdk-tabs
  [role="tab"][aria-selected="true"]
  [data-component-part="tab-button"] {
  color: var(--hm-execution) !important;
}

/* --- Panel: just the terminal, with a docs line beneath it. --------- */
.sdk-tabs .sdk-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* "For the full SDK documentation click here." — the `here` link is brand
   indigo and underlines on hover. */
.sdk-tabs .sdk-docs-line {
  margin: 0;
  font-size: 0.9rem;
  color: var(--hm-ink-2);
}

.sdk-tabs .sdk-docs-line a {
  color: var(--hm-verification) !important;
  /* Kill every resting-state underline mechanism Mintlify prose links use
     (text-decoration + border-bottom + background-image gradient); the
     underline should appear only on hover. */
  text-decoration: none !important;
  border-bottom: 0 !important;
  background-image: none !important;
}

.sdk-tabs .sdk-docs-line a:hover {
  text-decoration: underline !important;
}

html.dark .sdk-tabs .sdk-docs-line {
  color: var(--hm-chalk-1);
}

html.dark .sdk-tabs .sdk-docs-line a {
  color: var(--hm-execution) !important;
}

/* --- macOS terminal ---
   The site-wide rule paints [data-component-part="code-block-root"]
   authority-black and forces every DESCENDANT surface transparent
   — exactly the terminal body we want. We only add mac chrome. The
   title bar is a ::before (a pseudo-element, NOT a descendant, so
   the transparent-descendants rule can't clear its gradients): the
   three window dots on the left, the native copy button riding the
   right of the same strip. Code text clears the strip via the
   root's reserved top padding, with the pre's own top padding
   zeroed so the two don't compound. */
.sdk-tabs [data-component-part="code-block-root"] {
  position: relative;
  width: 100%;
  margin: 0;
  padding-top: 0 !important;
  border-radius: var(--r-3) !important;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(17, 17, 17, 0.22),
    0 10px 26px -12px rgba(17, 17, 17, 0.42);
}

/* Dark mode: drop the shadow, define the edge with a hairline. */
html.dark .sdk-tabs [data-component-part="code-block-root"] {
  box-shadow: none;
  border: 1px solid var(--hm-line-dark) !important;
}

/* Title strip: the red / yellow / green window dots on a subtle
   top band, drawn with sized radial gradients (recipe reused from
   the old terminal). pointer-events:none so it can never intercept
   a click meant for the copy button in the same strip. */
.sdk-tabs [data-component-part="code-block-root"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.1em;
  z-index: 1;
  pointer-events: none;
  border-radius: var(--r-3) var(--r-3) 0 0;
  background-color: rgba(255, 255, 255, 0.05);
  background-image:
    radial-gradient(circle, #ff5f57 46%, transparent 54%),
    radial-gradient(circle, #febc2e 46%, transparent 54%),
    radial-gradient(circle, #28c840 46%, transparent 54%);
  background-size: 9px 9px;
  background-position:
    14px center,
    29px center,
    44px center;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Terminal text: chalk on black, tuned mono for a real-terminal
   feel. Zero the pre's own top padding so it doesn't double up
   with the root's reserved strip band. */
.sdk-tabs [data-component-part="code-block-root"] pre,
.sdk-tabs [data-component-part="code-block-root"] code {
  font-family: var(--font-mono) !important;
  font-size: 0.82rem !important;
  line-height: 1.55 !important;
  color: var(--hm-chalk-1) !important;
}

/* Vertical padding around the code line lives on the  itself — top clears
   the traffic-light strip plus a gap, bottom balances it — so the spacing hugs
   the command rather than padding the outer wrapper. */
.sdk-tabs [data-component-part="code-block-root"] pre {
  padding-top: 2.8em !important;
  padding-bottom: 0.8em !important;
}

/* Terminal spans the full panel width. */
.sdk-tabs .code-block {
  width: 100%;
}

/* Native copy button lives in an absolutely-positioned
   [data-floating-buttons] container on .code-block (a sibling of the
   root, NOT a descendant). Mintlify anchors it to the top; re-anchor
   it over the code region below the title strip and vertically center
   it, so it sits at the single code line's vertical level, to the
   right of the command. */
.sdk-tabs .code-block [data-floating-buttons] {
  top: 2.8em !important;
  bottom: 0.8em !important;
  right: 0.55em !important;
  display: flex;
  align-items: center;
  z-index: 2;
}

/* ============================================================
   Text selection — brand-indigo highlight; keep code readable.
   (Fix: selecting code on the dark terminal turned the text
   dark-on-dark = invisible.)
   ============================================================ */
::selection {
  background: var(--hm-verification-wash-strong);
}
::-moz-selection {
  background: var(--hm-verification-wash-strong);
}

.code-block ::selection,
.code-group ::selection,
pre ::selection,
[data-component-part="code-block-root"] ::selection {
  background: var(--hm-execution) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.code-block ::-moz-selection,
.code-group ::-moz-selection,
pre ::-moz-selection,
[data-component-part="code-block-root"] ::-moz-selection {
  background: var(--hm-execution) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ============================================================
   Content links — brand indigo. The global #body-content /
   mdx-content(element) selectors earlier in this file do NOT
   match this Mintlify build: there is no #body-content, and
   mdx-content is a class (.mdx-content), not an element. Target
   the real container. Cards keep their own treatment. Underline
   only on hover, matching the SDK "here" link.
   ============================================================ */
.mdx-content a[href]:not(.card) {
  color: var(--hm-verification) !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
  background-image: none !important;
}
.mdx-content a[href]:not(.card):hover {
  text-decoration: underline !important;
}
html.dark .mdx-content a[href]:not(.card) {
  color: var(--hm-execution) !important;
}

/* ============================================================
   Color accents — the guides read very monochrome. Soft,
   design-system washes on the highest-traffic surfaces.
   ============================================================ */
/* Reference-table headers: indigo label (no background). */
.mdx-content thead th,
.mdx-content table th {
  color: var(--hm-verification);
}
html.dark .mdx-content thead th,
html.dark .mdx-content table th {
  color: var(--hm-execution);
}

/* List markers in brand indigo. */
.mdx-content ul > li::marker {
  color: var(--hm-verification);
}
html.dark .mdx-content ul > li::marker {
  color: var(--hm-execution);
}

/* Blockquotes: indigo left rule + faint wash. */
.mdx-content blockquote {
  border-left: 3px solid var(--hm-verification) !important;
  background-color: var(--hm-verification-wash);
}
html.dark .mdx-content blockquote {
  border-left-color: var(--hm-execution) !important;
}

/* Table separators — a touch darker so rows read clearly. */
.mdx-content table,
.mdx-content table thead,
.mdx-content table tbody,
.mdx-content table tr,
.mdx-content table th,
.mdx-content table td {
  /* Between --hm-line (#ddd9d0) and --hm-line-strong (#c9c4b7): visible
     but not heavy. */
  border-color: #d3cfc4 !important;
}
html.dark .mdx-content table,
html.dark .mdx-content table thead,
html.dark .mdx-content table tbody,
html.dark .mdx-content table tr,
html.dark .mdx-content table th,
html.dark .mdx-content table td {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Row breathing room — more vertical cell padding so the separators
   are not cramped against the text. */
.mdx-content table th,
.mdx-content table td {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

/* Endpoint description under the title on API reference pages renders as the
   page subtitle in a large lead font; bring it down to body size. */
#content-area .text-lg.prose,
#content-area div.mt-2.text-lg,
#content-area header p.text-lg {
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Sidebar tag badges (e.g. the Intelligence Beta tag) in indigo instead of the
   site primary. The pill carries data-nav-tag (defaults: text-primary bg-primary/10). */
[data-nav-tag] {
  color: #4f46e5 !important;
  background-color: rgba(99, 102, 241, 0.12) !important;
}
.dark [data-nav-tag] {
  color: #a5b4fc !important;
  background-color: rgba(99, 102, 241, 0.18) !important;
}

/* The Risk metrics reference link inside the endpoint descriptions, in indigo. */
#content-area a[href="/essentials/risk-metrics"] {
  color: #4f46e5;
  text-decoration-color: #4f46e5;
}
.dark #content-area a[href="/essentials/risk-metrics"] {
  color: #a5b4fc;
  text-decoration-color: #a5b4fc;
}



/* ============================================================
   Endpoint page titles — brand indigo
   The force-ink rule catches the h1 through its text-gray-900
   utility (!important), so this must be equally important and
   come later. Scoped to API pages via the same :has() guards
   the ink rule uses; guide pages keep their heading color.
   ============================================================ */
body:has(.api-section) h1#page-title,
body:has([id^="api-playground"]) h1#page-title {
  color: var(--hm-verification) !important;
}
html.dark body:has(.api-section) h1#page-title,
html.dark body:has([id^="api-playground"]) h1#page-title {
  color: #a5b4fc !important;
}

/* ============================================================
   Code panels in light mode
   The panels keep a dark background in both themes, but several
   header elements carry dark-gray text utilities (the language
   dropdown button uses text-gray-950/50, tab labels gray-600),
   which vanish on the dark panel once the theme is light. Remap
   dark grays to light ones inside .code-group; exact class names
   so .text-gray-50 (already light) is untouched.
   ============================================================ */
html:not(.dark) .code-group {
  color: #d4d4d4; /* inheritance base for classless text (e.g. the dropdown label) */
}
html:not(.dark) .code-group :is(.text-gray-950, .text-gray-900, .text-gray-800, .text-gray-700, [class*="text-gray-950/"], [class*="text-gray-900/"]) {
  color: #e5e5e5 !important;
}
html:not(.dark) .code-group :is(.text-gray-600, .text-gray-500) {
  color: #9f9f9f !important;
}

/* Language menus on the code panels (bg-codeblock) stay dark in both themes, but
   Radix's roving focus applies focus:text-gray-950/75 — a light-menu color — to the
   hovered option, dimming it to near-invisible in light mode. Keep it bright. */
html:not(.dark) .bg-codeblock [role="menuitem"]:hover,
html:not(.dark) .bg-codeblock [role="menuitem"]:focus {
  color: rgb(244 243 239 / 0.92) !important;
}

/* ============================================================
   Integrate cards — API & SDK page
   Full-width link cards with a dot-grid icon panel, body text,
   install command chip, and a hover arrow. Scoped under the
   .integrate-cards wrapper so nothing leaks.
   ============================================================ */
.integrate-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  margin: 0.5rem 0 0 !important;
}

.integrate-cards a.integrate-card,
a.integrate-card {
  display: grid !important;
  grid-template-columns: 20% 1fr auto !important;
  align-items: stretch !important;
  border: none !important;
  border-radius: var(--r-3) !important;
  background: var(--hm-surface-raised) !important;
  overflow: hidden !important;
  text-decoration: none !important;
  color: inherit !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.integrate-cards a.integrate-card:hover,
a.integrate-card:hover,
.integrate-cards a.integrate-card:hover *,
a.integrate-card:hover *,
.mdx-content a[href].integrate-card:hover,
.mdx-content a[href].integrate-card:hover * {
  text-decoration: none !important;
  text-decoration-line: none !important;
}

html.dark .integrate-cards a.integrate-card,
html.dark a.integrate-card {
  background: var(--hm-line-dark) !important;
  border: none !important;
  box-shadow: none !important;
}

/* Icon panel — 20% width, full card height, flush left */
.integrate-card__icon {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  border-radius: var(--r-3) 0 0 var(--r-3) !important;
  background-image:
    radial-gradient(circle, rgba(75, 73, 202, 0.38) 0.8px, transparent 1.2px),
    radial-gradient(
      120% 140% at 50% 50%,
      rgba(75, 73, 202, 0.65) 0%,
      rgba(75, 73, 202, 0.22) 38%,
      rgba(75, 73, 202, 0.03) 78%
    ) !important;
  background-size: 8px 8px, 100% 100% !important;
  background-repeat: repeat, no-repeat !important;
  background-position: center, center !important;
}

html.dark .integrate-card__icon {
  background-image:
    radial-gradient(circle, rgba(121, 120, 233, 0.42) 0.8px, transparent 1.2px),
    radial-gradient(
      120% 140% at 50% 50%,
      rgba(121, 120, 233, 0.58) 0%,
      rgba(121, 120, 233, 0.22) 38%,
      rgba(121, 120, 233, 0.03) 78%
    ) !important;
}

.integrate-card__icon svg {
  display: none !important;
}

.integrate-card__icon::after {
  content: "";
  position: absolute;
  width: 2rem;
  height: 2rem;
  background-color: #fff;
  opacity: 0.92;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
}

.integrate-card__icon--logo::after {
  -webkit-mask: url("/favicon.svg") center / contain no-repeat;
  mask: url("/favicon.svg") center / contain no-repeat;
}

.integrate-card__icon--ts::after {
  -webkit-mask: url("/logo/typescript.png") center / contain no-repeat;
  mask: url("/logo/typescript.png") center / contain no-repeat;
}

.integrate-card__icon--python::after {
  -webkit-mask: url("/logo/python.svg") center / contain no-repeat;
  mask: url("/logo/python.svg") center / contain no-repeat;
}

.integrate-card__icon--csharp::after {
  background-color: transparent;
  background-image: url("/logo/dotnet.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-mask: none;
  mask: none;
  opacity: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.12));
}

/* Body — title, description, install chip */
.integrate-card__body {
  flex: 1 !important;
  padding: 1.1rem 1.35rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 0.2rem !important;
}

.integrate-card__title {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  letter-spacing: -0.01em !important;
  color: var(--hm-ink-0) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

html.dark .integrate-card__title {
  color: var(--hm-chalk-0) !important;
}

.integrate-card__desc {
  font-family: var(--font-sans) !important;
  font-size: 0.84rem !important;
  line-height: 1.5 !important;
  color: var(--hm-ink-3) !important;
  margin: 0 !important;
}

html.dark .integrate-card__desc {
  color: var(--hm-chalk-2) !important;
}

.integrate-card__cmd {
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 0.4rem !important;
  font-family: var(--font-mono) !important;
  font-feature-settings: var(--font-features-mono) !important;
  font-size: 0.78rem !important;
  color: var(--hm-verification) !important;
  background: var(--hm-verification-wash) !important;
  border-radius: var(--r-2) !important;
  padding: 0.25em 0.6em !important;
  width: fit-content !important;
}

html.dark .integrate-card__cmd {
  color: var(--hm-execution) !important;
  background: rgba(121, 120, 233, 0.12) !important;
}

/* Trailing arrow — nudges right on hover */
.integrate-card__arrow {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 1.1rem !important;
  color: var(--hm-ink-4) !important;
  transition: color 200ms ease, transform 200ms ease !important;
}

.integrate-cards a.integrate-card:hover .integrate-card__arrow,
a.integrate-card:hover .integrate-card__arrow {
  color: var(--hm-verification) !important;
  transform: translateX(3px);
}

html.dark .integrate-card__arrow {
  color: var(--hm-chalk-2) !important;
}

html.dark .integrate-cards a.integrate-card:hover .integrate-card__arrow,
html.dark a.integrate-card:hover .integrate-card__arrow {
  color: var(--hm-execution) !important;
}

.integrate-card__arrow svg {
  width: 1rem !important;
  height: 1rem !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}