@import "tailwindcss";
@import "fumadocs-ui/css/neutral.css";
@import "fumadocs-ui/css/preset.css";
@import "fumadocs-openapi/css/preset.css";

/* Prevent overscroll bounce effect on the page */
html,
body {
  overscroll-behavior: none;
}

/* Prevent modals/dialogs from shifting layout via scroll-lock compensation */
html,
body {
  padding-right: 0 !important;
  margin-right: 0 !important;
}

@theme {
  --color-fd-primary: var(--color-fd-foreground);
}

/* Pure white light mode background */
:root:not(.dark) {
  --color-fd-background: hsl(0, 0%, 100%) !important;
}

/* Match landing page dark background (#1b1b1b) */
.dark {
  --color-fd-background: hsl(0, 0%, 10.6%) !important;
  --color-fd-card: hsl(0, 0%, 13%) !important;
  --color-fd-popover: hsl(0, 0%, 14%) !important;
  --color-fd-secondary: hsl(0, 0%, 15.5%) !important;
  --color-fd-muted: hsl(0, 0%, 18%) !important;
}

/* Font family utilities */
.font-sans {
  font-family: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.font-mono {
  font-family: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}

:root {
  --fd-border-sidebar: transparent !important;
  --fd-nav-height: 92px; /* Custom navbar height (52px top + 40px tabs) */
  /* Content container width used to center main content */
  --spacing-fd-container: 1400px;
  /* Edge gutter = leftover space on each side of centered container */
  --edge-gutter: max(1rem, calc((100vw - var(--spacing-fd-container)) / 2));
  /* How far sidebar/TOC shift inward from the edge gutter */
  --sidebar-shift: 50px;
  --sidebar-offset: max(0px, calc(var(--edge-gutter) - var(--sidebar-shift)));
  --toc-shift: 50px;
  --toc-offset: max(0px, calc(var(--edge-gutter) - var(--toc-shift)));
  /* Inner padding for navbar and sidebar — single source of truth */
  --nav-inset: 44px;
  /* Extra gap between sidebar/TOC and the main text content */
  --content-gap: 2.25rem;
}

/* Light mode navbar background */
:root:not(.dark) nav {
  background-color: hsla(0, 0%, 100%, 0.85) !important;
}

/* Dark mode navbar background */
:root.dark nav {
  background-color: hsla(0, 0%, 10.6%, 0.92) !important;
}

:root.dark nav button[data-search-trigger] {
  background-color: hsla(0, 0%, 15%, 0.85) !important;
  backdrop-filter: blur(33px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(33px) saturate(180%) !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

:root.dark nav button[data-search-trigger] kbd {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Floating sidebar appearance - remove background */
[data-sidebar-container],
#nd-sidebar {
  background: transparent !important;
  border: none !important;
  --color-fd-muted: transparent !important;
  --color-fd-card: transparent !important;
  --color-fd-secondary: transparent !important;
}

aside[data-sidebar],
aside#nd-sidebar {
  background: transparent !important;
  border: none !important;
}

/* Remove the fade-out mask on sidebar scroll viewport (Fumadocs applies inline maskImage) */
[data-sidebar-placeholder] [data-radix-scroll-area-viewport],
#nd-sidebar [data-radix-scroll-area-viewport],
#nd-sidebar [data-radix-scroll-area-viewport] > div,
aside#nd-sidebar [data-radix-scroll-area-viewport] {
  mask: none !important;
  mask-image: none !important;
  -webkit-mask: none !important;
  -webkit-mask-image: none !important;
}

/* Fumadocs v16: Add sidebar placeholder styling for grid area */
[data-sidebar-placeholder] {
  background: transparent !important;
}

/* Fumadocs v16: Hide sidebar panel (floating collapse button) */
[data-sidebar-panel] {
  display: none !important;
}

/* Mobile only: Reduce gap between navbar and content (custom navbar hidden on mobile) */
@media (max-width: 1023px) {
  #nd-docs-layout {
    margin-top: -25px;
  }
}

/* Hide TOC popover on tablet/medium screens (768px - 1279px) */
/* Keeps it visible on mobile (<768px) for easy navigation */
/* Desktop (>=1280px) already hides it via fumadocs xl:hidden */
@media (min-width: 768px) and (max-width: 1279px) {
  #nd-docs-layout {
    --fd-toc-popover-height: 0px !important;
  }

  [data-toc-popover] {
    display: none !important;
  }
}

/* Desktop only: Apply custom navbar offset, sidebar width and margin offsets */
/* On mobile, let fumadocs handle the layout natively */
@media (min-width: 1024px) {
  :root {
    --fd-banner-height: 92px !important; /* 52px top + 40px tabs */
  }

  #nd-docs-layout {
    /* Use 100dvh so sidebar height = 100dvh - 92px (banner) = full viewport below navbar */
    --fd-docs-height: 100dvh !important;
    --fd-sidebar-width: 300px !important;
    margin-left: var(--sidebar-offset) !important;
    margin-right: var(--toc-offset) !important;
    min-height: var(--fd-docs-height) !important;
  }

  /* Sidebar divider line — fixed to viewport, full height from navbar to bottom */
  #nd-docs-layout::before {
    content: "";
    position: fixed;
    top: 92px; /* below navbar */
    bottom: 0;
    left: calc(var(--sidebar-offset) + var(--fd-sidebar-width));
    width: 1px;
    background-color: rgba(0, 0, 0, 0.08);
    pointer-events: none;
    z-index: 21;
  }
  html.dark #nd-docs-layout::before {
    background-color: rgba(255, 255, 255, 0.08);
  }

  /* Hide fumadocs nav on desktop - we use custom navbar there */
  #nd-docs-layout > header {
    display: none !important;
  }
}

/* Sidebar spacing — left padding aligns item text with navbar content (item has 14px internal padding) */
[data-sidebar-viewport],
#nd-sidebar > div {
  padding: 0 14px 0 calc(var(--nav-inset) - 14px) !important;
  background: transparent !important;
}

/* Override Fumadocs p-4 on scroll viewport — must beat Tailwind v4 utility layer specificity */
html #nd-sidebar [data-radix-scroll-area-viewport],
html #nd-sidebar [data-radix-scroll-area-viewport].p-4,
html aside#nd-sidebar [data-radix-scroll-area-viewport] {
  padding: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Top/bottom breathing room inside the scrollable sidebar content — scrollable, not clipped */
html #nd-sidebar [data-radix-scroll-area-viewport] > div {
  padding-top: 20px !important;
  padding-bottom: 16px !important;
}

/* Override sidebar item styling to match Raindrop */
/* Target Link and button elements in sidebar - override Fumadocs itemVariants */
/* Exclude the small chevron-only toggle buttons */
/* Using html prefix for higher specificity over Tailwind v4 utilities */
html #nd-sidebar a:not(:has(span.font-mono)),
html #nd-sidebar button:not([aria-label*="ollapse"]):not([aria-label*="xpand"]) {
  font-size: 0.875rem !important; /* 14px to match navbar items */
  line-height: 1.4 !important;
  padding: 0.375rem 0.875rem !important;
  font-weight: 450 !important;
  border-radius: 0.75rem !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif !important;
}

/* Sidebar text — aligned with platform --text-body */
html.dark #nd-sidebar a:not(:has(span.font-mono)),
html.dark #nd-sidebar button:not([aria-label*="ollapse"]):not([aria-label*="xpand"]) {
  color: #cdcdcd !important;
}

html:not(.dark) #nd-sidebar a:not(:has(span.font-mono)),
html:not(.dark) #nd-sidebar button:not([aria-label*="ollapse"]):not([aria-label*="xpand"]) {
  color: #3b3b3b !important;
}

/* Chevron icons — aligned with platform --text-icon */
#nd-sidebar svg {
  display: inline-block !important;
  opacity: 1 !important;
  color: #5e5e5e !important;
  flex-shrink: 0 !important;
}

html.dark #nd-sidebar svg {
  color: #939393 !important;
}

/* Ensure the small chevron toggle buttons are visible */
#nd-sidebar button[aria-label*="ollapse"],
#nd-sidebar button[aria-label*="xpand"] {
  display: flex !important;
  opacity: 1 !important;
  padding: 0.25rem !important;
}

/* Add tiny gap between nested items */
#nd-sidebar ul li {
  margin-bottom: 0.0625rem !important;
}

#nd-sidebar ul li:last-child {
  margin-bottom: 0 !important;
}

/* Section separator headers — styling handled by component, override fumadocs defaults */
[data-sidebar-viewport] [data-separator] p,
#nd-sidebar [data-separator] p {
  font-size: 0.625rem !important; /* 10px */
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* First separator has no top margin or divider; subsequent ones show the divider on desktop */
[data-separator]:not([data-separator] ~ [data-separator]) {
  margin-top: 0;
}

@media (min-width: 1024px) {
  [data-separator] ~ [data-separator] > .separator-divider {
    display: block;
  }
}

/* Active state — aligned with platform --surface-active */
#nd-sidebar a[data-active="true"]:not(:has(span.font-mono)),
#nd-sidebar button[data-active="true"] {
  background-image: none !important;
}

html.dark #nd-sidebar a[data-active="true"]:not(:has(span.font-mono)),
html.dark #nd-sidebar button[data-active="true"] {
  background-color: #2c2c2c !important;
  color: #cdcdcd !important;
}

html:not(.dark) #nd-sidebar a[data-active="true"]:not(:has(span.font-mono)),
html:not(.dark) #nd-sidebar button[data-active="true"] {
  background-color: #ececec !important;
  color: #3b3b3b !important;
}

/* Hover state — aligned with platform --surface-hover */
html.dark #nd-sidebar a:not(:has(span.font-mono)):hover:not([data-active="true"]),
html.dark #nd-sidebar button:hover:not([data-active="true"]) {
  background-color: #262626 !important;
}

html:not(.dark) #nd-sidebar a:not(:has(span.font-mono)):hover:not([data-active="true"]),
html:not(.dark) #nd-sidebar button:hover:not([data-active="true"]) {
  background-color: #f2f2f2 !important;
}

/* Active items don't change on hover */
html.dark #nd-sidebar a[data-active="true"]:not(:has(span.font-mono)):hover,
html.dark #nd-sidebar button[data-active="true"]:hover {
  background-color: #2c2c2c !important;
  color: #cdcdcd !important;
}

html:not(.dark) #nd-sidebar a[data-active="true"]:not(:has(span.font-mono)):hover,
html:not(.dark) #nd-sidebar button[data-active="true"]:hover {
  background-color: #ececec !important;
  color: #3b3b3b !important;
}

/* Hide search, platform, and collapse button from sidebar completely */
[data-sidebar] [data-search],
[data-sidebar] .search-toggle,
#nd-sidebar [data-search],
#nd-sidebar .search-toggle,
[data-sidebar-viewport] [data-search],
[data-sidebar-viewport] button[data-search],
aside[data-sidebar] [role="button"]:has([data-search]),
aside[data-sidebar] > div > button:first-child,
#nd-sidebar > div > button:first-child,
[data-sidebar] a[href*="sim.ai"],
#nd-sidebar a[href*="sim.ai"],
[data-sidebar-viewport] a[href*="sim.ai"],
/* Hide search buttons (but NOT folder chevron buttons) */
  aside[data-sidebar] > div:first-child
  > button:not([aria-label="Collapse"]):not([aria-label="Expand"]),
#nd-sidebar > div:first-child > button:not([aria-label="Collapse"]):not([aria-label="Expand"]),
/* Hide sidebar collapse button (panel icon) - direct children only */
aside[data-sidebar] > button:first-of-type:not([aria-label="Collapse"]):not([aria-label="Expand"]),
[data-sidebar]
  > button[type="button"]:first-of-type:not([aria-label="Collapse"]):not([aria-label="Expand"]),
button[data-collapse]:not([aria-label="Collapse"]):not([aria-label="Expand"]),
[data-sidebar-header] button,
/* Hide theme toggle from sidebar footer */
aside[data-sidebar] [data-theme-toggle],
[data-sidebar-footer],
[data-sidebar] footer,
footer button[aria-label*="heme"],
aside[data-sidebar] > div:last-child:has(button[aria-label*="heme"]),
aside[data-sidebar] button[aria-label*="heme"],
[data-sidebar] button[aria-label*="Theme"],
/* Additional theme toggle selectors */
  aside[data-sidebar] > *:last-child
  button,
[data-sidebar-viewport] ~ *,
aside[data-sidebar] > div:not([data-sidebar-viewport]),
/* Aggressive theme toggle hiding */
aside[data-sidebar] svg[class*="sun"],
aside[data-sidebar] svg[class*="moon"],
aside[data-sidebar] button[type="button"]:last-child,
aside button:has(svg:only-child),
[data-sidebar] div:has(> button[type="button"]:only-child:last-child),
/* Hide theme toggle and other non-content elements */
aside[data-sidebar] > *:not([data-sidebar-viewport]) {
  display: none !important;
}

/* Desktop only: Hide sidebar toggle buttons and nav title/logo (keep visible on mobile) */
@media (min-width: 1025px) {
  [data-sidebar-container] > button,
  [data-sidebar-container] [data-toggle],
  aside[data-sidebar] [data-sidebar-toggle],
  button[data-sidebar-toggle],
  nav button[data-sidebar-toggle],
  button[aria-label="Toggle Sidebar"],
  button[aria-label="Collapse Sidebar"],
  /* Hide nav title/logo in sidebar on desktop - target all possible locations */
    /* Lower specificity selectors first (attribute selectors) */
    [data-sidebar-header],
  [data-sidebar] [data-title],
  aside[data-sidebar] a[href="/"],
  aside[data-sidebar] a[href="/"] img,
  aside[data-sidebar] > a:first-child,
  aside[data-sidebar] > div > a:first-child,
  aside[data-sidebar] img[alt="Sim"],
  aside[data-sidebar] svg[aria-label="Sim"],
  /* Higher specificity selectors (ID selectors) */
    #nd-sidebar
    a[href="/"],
  #nd-sidebar a[href="/"] img,
  #nd-sidebar a[href="/"] svg,
  #nd-sidebar > a:first-child,
  #nd-sidebar > div:first-child > a:first-child,
  #nd-sidebar img[alt="Sim"],
  #nd-sidebar svg[aria-label="Sim"],
  /* Hide theme toggle at bottom of sidebar on desktop */
    #nd-sidebar
    > footer,
  #nd-sidebar footer,
  aside#nd-sidebar > *:last-child:not(div),
  #nd-sidebar > button:last-child,
  #nd-sidebar button[aria-label*="theme" i],
  #nd-sidebar button[aria-label*="Theme"],
  #nd-sidebar > div:last-child > button {
    display: none !important;
  }
}

/* Extra aggressive - hide everything after the viewport */
aside[data-sidebar] [data-sidebar-viewport] ~ * {
  display: none !important;
}

/* Tighter spacing for sidebar content */
[data-sidebar-viewport] > * {
  margin-bottom: 0.0625rem;
}

[data-sidebar-viewport] > *:last-child {
  margin-bottom: 0;
}

[data-sidebar-viewport] ul {
  margin: 0;
  padding: 0;
}

/* Ensure sidebar starts with content immediately */
aside[data-sidebar] > div:first-child {
  padding-top: 0;
}

/* Remove all sidebar borders and backgrounds (except the right divider) */
[data-sidebar-container],
aside[data-sidebar],
[data-sidebar],
[data-sidebar] *,
#nd-sidebar,
#nd-sidebar * {
  border: none !important;
}

/* Sidebar border is handled via #nd-docs-layout::before pseudo-element (see desktop section below) */

/* Override fumadocs background colors for sidebar */
.dark #nd-sidebar,
.dark [data-sidebar-container],
.dark aside[data-sidebar] {
  --color-fd-muted: transparent !important;
  --color-fd-secondary: transparent !important;
  background: transparent !important;
}

/* Force normal text flow in sidebar */
[data-sidebar],
[data-sidebar] *,
[data-sidebar-viewport],
[data-sidebar-viewport] * {
  writing-mode: horizontal-tb !important;
}

/* Apply Geist Mono to code elements */
code,
pre,
pre code {
  font-family: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}

/* Inline code — neutral colors aligned with sim design system */
:not(pre) > code {
  padding: 0.2em 0.4em;
  border-radius: 0.25rem;
  font-size: 0.875em;
  font-weight: 500;
}

/* Light mode inline code — neutral, no red */
:root:not(.dark) :not(pre) > code {
  background-color: rgb(245 245 245);
  color: rgb(55 65 81);
  border: 1px solid rgb(229 231 235);
}

/* Dark mode inline code — neutral, no red */
.dark :not(pre) > code {
  background-color: rgb(38 38 38);
  color: rgb(212 212 216);
  border: 1px solid rgb(63 63 70);
}

/* Remove heavy shadows globally — aligned with sim design system (shadow-card: 0 1px 3px rgba(0,0,0,0.04)) */
figure.shiki,
figure[data-rehype-pretty-code-figure],
.shiki {
  box-shadow: none !important;
}

/* Search dialog — lighter shadow + constrained size */
[data-radix-popper-content-wrapper] > div,
[role="dialog"][data-state] {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

[role="dialog"][data-state] {
  max-width: 480px !important;
}

pre {
  font-size: 0.875rem;
  line-height: 1.7;
  tab-size: 2;
  -webkit-overflow-scrolling: touch;
}

pre code {
  display: block;
  width: fit-content;
  min-width: 100%;
}

/* Syntax highlighting adjustments for better readability */
pre code .line {
  padding-left: 0;
  padding-right: 0;
}

/* Content typography — align heading sizes and weights with platform */
main article h1,
[data-content] h1,
#nd-page h1 {
  font-size: 1.5rem !important;
  font-weight: 550 !important;
  letter-spacing: -0.02em;
  color: rgba(0, 0, 0, 0.88);
}

html.dark main article h1,
html.dark [data-content] h1,
html.dark #nd-page h1 {
  color: rgba(255, 255, 255, 0.92);
}

main article h2,
[data-content] h2,
#nd-page h2 {
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.015em;
  color: rgba(0, 0, 0, 0.85);
}

html.dark main article h2,
html.dark [data-content] h2,
html.dark #nd-page h2 {
  color: rgba(255, 255, 255, 0.88);
}

main article h3,
main article h4,
[data-content] h3,
[data-content] h4,
#nd-page h3,
#nd-page h4 {
  font-size: 1rem !important;
  font-weight: 470 !important;
  letter-spacing: -0.01em;
  color: rgba(0, 0, 0, 0.8);
}

html.dark main article h3,
html.dark main article h4,
html.dark [data-content] h3,
html.dark [data-content] h4,
html.dark #nd-page h3,
html.dark #nd-page h4 {
  color: rgba(255, 255, 255, 0.85);
}

/* Body text — align with landing text colors */
main article p,
[data-content] p,
[data-docs-page] p {
  color: rgba(0, 0, 0, 0.7);
}

html.dark main article p,
html.dark [data-content] p,
html.dark [data-docs-page] p {
  color: rgba(255, 255, 255, 0.7);
}

/* Muted text — align with landing-text-muted (#999999) */
main article .text-muted-foreground,
[data-content] .text-muted-foreground,
[data-docs-page] .text-muted-foreground {
  color: rgba(0, 0, 0, 0.45);
}

html.dark main article .text-muted-foreground,
html.dark [data-content] .text-muted-foreground,
html.dark [data-docs-page] .text-muted-foreground {
  color: rgba(255, 255, 255, 0.45);
}

/* List items — inherit body text color */
main article li,
[data-content] li,
[data-docs-page] li {
  color: rgba(0, 0, 0, 0.7);
}

html.dark main article li,
html.dark [data-content] li,
html.dark [data-docs-page] li {
  color: rgba(255, 255, 255, 0.7);
}

/* Custom text highlighting styles */
.text-highlight {
  color: var(--color-fd-primary);
}

/* Override marker color for highlighted lists */
.highlight-markers li::marker {
  color: var(--color-fd-primary);
}

/* Remove the thin border-left on nested TOC items (keeps main indicator only) */
#nd-toc a[style*="padding-inline-start"] {
  border-left: none !important;
}

/* TOC heading — align weight with landing */
#nd-toc h3,
#nd-toc [class*="title"] {
  font-weight: 480 !important;
  font-size: 0.8125rem !important;
  color: rgba(0, 0, 0, 0.5);
}

html.dark #nd-toc h3,
html.dark #nd-toc [class*="title"] {
  color: rgba(255, 255, 255, 0.45);
}

/* TOC links — softer colors aligned with landing muted text */
#nd-toc a {
  font-weight: 430 !important;
  font-size: 0.8125rem !important;
  color: rgba(0, 0, 0, 0.5);
  transition: color 0.2s;
}

html.dark #nd-toc a {
  color: rgba(255, 255, 255, 0.45);
}

#nd-toc a:hover {
  color: rgba(0, 0, 0, 0.75);
}

html.dark #nd-toc a:hover {
  color: rgba(255, 255, 255, 0.7);
}

#nd-toc a[data-active="true"] {
  color: rgba(0, 0, 0, 0.85) !important;
  font-weight: 470 !important;
}

html.dark #nd-toc a[data-active="true"] {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Add bottom spacing to prevent abrupt page endings */
[data-content] {
  padding-top: 1.5rem !important;
  padding-bottom: 4rem;
}

/* Alternative fallback for different Fumadocs versions */
main article,
.docs-page main {
  padding-top: 1.5rem !important;
  padding-bottom: 4rem;
}

/* Main content area - center and constrain like turborepo/raindrop */
/* Note: --sidebar-offset and --toc-offset are now applied at #nd-docs-layout level */
main[data-main] {
  max-width: var(--spacing-fd-container, 1400px);
  margin-left: auto;
  margin-right: auto;
  padding-top: 1rem;
  padding-left: var(--content-gap);
  padding-right: var(--content-gap);
  order: 1 !important;
}

/* Adjust for smaller screens */
@media (max-width: 768px) {
  main[data-main] {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  #nd-page:has(.api-page-header) {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Ensure docs page content is properly constrained */
[data-docs-page] {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 1.5rem !important;
}

/* Remove any unwanted outlines from video elements */
video {
  outline: none !important;
}

/* API Reference Pages — Mintlify-style overrides */

/* OpenAPI pages: span main + TOC grid columns for wide two-column layout.
   Use named grid lines from grid-template-areas so this works regardless
   of whether the grid has 3 columns (production) or 5 columns (local dev). */
#nd-page:has(.api-page-header) {
  grid-column: main-start / toc-end !important;
  max-width: 1400px !important;
  padding-left: calc(var(--content-gap) + 1rem);
  padding-right: calc(var(--content-gap) + 1rem);
}

/* Hide the empty TOC aside on OpenAPI pages so it doesn't overlay content */
#nd-docs-layout:has(#nd-page:has(.api-page-header)) #nd-toc {
  display: none;
}

/* Hide the default "Response Body" heading rendered by fumadocs-openapi */
.response-section-wrapper > .response-section-content > h2,
.response-section-wrapper > .response-section-content > h3 {
  display: none !important;
}

/* Hide default accordion triggers (status code rows) — we show our own dropdown */
.response-section-wrapper [data-orientation="vertical"] > [data-state] > h3 {
  display: none !important;
}

/* Ensure API reference pages use the same font as the rest of the docs */
#nd-page:has(.api-page-header),
#nd-page:has(.api-page-header) h2,
#nd-page:has(.api-page-header) h3,
#nd-page:has(.api-page-header) h4,
#nd-page:has(.api-page-header) p,
#nd-page:has(.api-page-header) span,
#nd-page:has(.api-page-header) div,
#nd-page:has(.api-page-header) label,
#nd-page:has(.api-page-header) button {
  font-family: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Method badge pills — shared background colors (page + sidebar) */
span.font-mono.font-medium[data-method="get"],
span.font-mono.font-medium[data-method="head"],
span.font-mono.font-medium[data-method="options"] {
  background-color: rgb(220 252 231 / 0.85);
}
html.dark span.font-mono.font-medium[data-method="get"],
html.dark span.font-mono.font-medium[data-method="head"],
html.dark span.font-mono.font-medium[data-method="options"] {
  background-color: rgb(34 197 94 / 0.15);
}
span.font-mono.font-medium[data-method="post"] {
  background-color: rgb(219 234 254 / 0.85);
}
html.dark span.font-mono.font-medium[data-method="post"] {
  background-color: rgb(59 130 246 / 0.15);
}
span.font-mono.font-medium[data-method="put"] {
  background-color: rgb(254 249 195 / 0.85);
}
html.dark span.font-mono.font-medium[data-method="put"] {
  background-color: rgb(234 179 8 / 0.15);
}
span.font-mono.font-medium[data-method="patch"] {
  background-color: rgb(255 237 213 / 0.85);
}
html.dark span.font-mono.font-medium[data-method="patch"] {
  background-color: rgb(249 115 22 / 0.15);
}
span.font-mono.font-medium[data-method="delete"] {
  background-color: rgb(254 226 226 / 0.85);
}
html.dark span.font-mono.font-medium[data-method="delete"] {
  background-color: rgb(239 68 68 / 0.15);
}

/* Sidebar links with method badges — match regular item padding */
html #nd-sidebar a:has(span.font-mono.font-medium) {
  display: flex !important;
  align-items: center !important;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem !important;
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
  font-weight: 450 !important;
  border-radius: 0.75rem !important;
}

/* Sidebar method badges — fixed-width for right-aligned labels */
#nd-sidebar a span.font-mono.font-medium {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.625rem;
  font-size: 0.625rem !important;
  line-height: 1 !important;
  padding: 0.15625rem 0.25rem;
  border-radius: 0.1875rem;
  flex-shrink: 0;
}

/* Footer navigation method badges — pill styling to match sidebar */
#nd-page span.font-mono.font-medium[data-method] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem !important;
  line-height: 1 !important;
  padding: 0.15625rem 0.375rem;
  border-radius: 0.1875rem;
}

/* API page code/card containers — transparent background */
#nd-page:has(.api-page-header) {
  --color-fd-card: transparent !important;
}

#nd-page:has(.api-page-header) figure.shiki {
  border-radius: 0.75rem !important;
  background-color: transparent !important;
}

/* API page code example panels — transparent */
#nd-page:has(.api-page-header) .rounded-xl.border.bg-fd-card {
  background-color: transparent !important;
}

#nd-page:has(.api-page-header) .rounded-xl.border.shadow-md.bg-fd-card {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Hide "Filter Properties" search bar everywhere — main page and popovers */
input[placeholder="Filter Properties"] {
  display: none !important;
}
div:has(> input[placeholder="Filter Properties"]) {
  display: none !important;
}
/* Remove top border on first visible property after hidden Filter Properties */
div:has(> input[placeholder="Filter Properties"]) + .text-sm.border-t {
  border-top: none !important;
}

/* Hide "TypeScript Definitions" copy panel on API pages */
#nd-page:has(.api-page-header) div.not-prose.rounded-xl.border.p-3.mb-4 {
  display: none !important;
}
#nd-page:has(.api-page-header) div.not-prose.rounded-xl.border.p-3:has(> div > p.font-medium) {
  display: none !important;
}

/* Hide info tags (Format, Default, etc.) everywhere — main page and popovers */
div.flex.flex-row.gap-2.flex-wrap.not-prose:has(> div.bg-fd-secondary) {
  display: none !important;
}
div.flex.flex-row.items-start.bg-fd-secondary.border.rounded-lg.text-xs {
  display: none !important;
}

/* Method+path bar — cleaner, lighter styling like Gumloop.
   Override bg-fd-card CSS variable directly for reliability. */
#nd-page:has(.api-page-header) div.flex.flex-row.items-center.rounded-xl.border.not-prose {
  --color-fd-card: rgb(249 250 251) !important;
  background-color: rgb(249 250 251) !important;
  border-color: rgb(229 231 235) !important;
}
html.dark
  #nd-page:has(.api-page-header)
  div.flex.flex-row.items-center.rounded-xl.border.not-prose {
  --color-fd-card: rgb(24 24 27) !important;
  background-color: rgb(24 24 27) !important;
  border-color: rgb(63 63 70) !important;
}
/* Method badge inside path bar — cleaner sans-serif, softer colors */
#nd-page:has(.api-page-header)
  div.flex.flex-row.items-center.rounded-xl.border.not-prose
  span.font-mono.font-medium {
  font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  padding: 0.125rem 0.5rem !important;
  border-radius: 0.375rem !important;
}
/* Path bar per-method colors (fumadocs renders these, so we match by class) */
/* GET */
#nd-page:has(.api-page-header)
  div.flex.flex-row.items-center.rounded-xl.border.not-prose
  span.font-mono.font-medium[class*="text-green"] {
  color: rgb(22 163 74) !important;
  background-color: rgb(220 252 231 / 0.7) !important;
}
html.dark
  #nd-page:has(.api-page-header)
  div.flex.flex-row.items-center.rounded-xl.border.not-prose
  span.font-mono.font-medium[class*="text-green"] {
  color: rgb(74 222 128) !important;
  background-color: rgb(34 197 94 / 0.15) !important;
}
/* POST */
#nd-page:has(.api-page-header)
  div.flex.flex-row.items-center.rounded-xl.border.not-prose
  span.font-mono.font-medium[class*="text-blue"] {
  color: rgb(37 99 235) !important;
  background-color: rgb(219 234 254 / 0.7) !important;
}
html.dark
  #nd-page:has(.api-page-header)
  div.flex.flex-row.items-center.rounded-xl.border.not-prose
  span.font-mono.font-medium[class*="text-blue"] {
  color: rgb(96 165 250) !important;
  background-color: rgb(59 130 246 / 0.15) !important;
}
/* PUT */
#nd-page:has(.api-page-header)
  div.flex.flex-row.items-center.rounded-xl.border.not-prose
  span.font-mono.font-medium[class*="text-yellow"] {
  color: rgb(161 98 7) !important;
  background-color: rgb(254 249 195 / 0.7) !important;
}
html.dark
  #nd-page:has(.api-page-header)
  div.flex.flex-row.items-center.rounded-xl.border.not-prose
  span.font-mono.font-medium[class*="text-yellow"] {
  color: rgb(250 204 21) !important;
  background-color: rgb(234 179 8 / 0.15) !important;
}
/* PATCH */
#nd-page:has(.api-page-header)
  div.flex.flex-row.items-center.rounded-xl.border.not-prose
  span.font-mono.font-medium[class*="text-orange"] {
  color: rgb(194 65 12) !important;
  background-color: rgb(255 237 213 / 0.7) !important;
}
html.dark
  #nd-page:has(.api-page-header)
  div.flex.flex-row.items-center.rounded-xl.border.not-prose
  span.font-mono.font-medium[class*="text-orange"] {
  color: rgb(251 146 60) !important;
  background-color: rgb(249 115 22 / 0.15) !important;
}
/* DELETE */
#nd-page:has(.api-page-header)
  div.flex.flex-row.items-center.rounded-xl.border.not-prose
  span.font-mono.font-medium[class*="text-red"] {
  color: rgb(185 28 28) !important;
  background-color: rgb(254 226 226 / 0.7) !important;
}
html.dark
  #nd-page:has(.api-page-header)
  div.flex.flex-row.items-center.rounded-xl.border.not-prose
  span.font-mono.font-medium[class*="text-red"] {
  color: rgb(248 113 113) !important;
  background-color: rgb(239 68 68 / 0.15) !important;
}

/* Path text inside method+path bar — monospace, bright like Gumloop */
#nd-page:has(.api-page-header) div.flex.flex-row.items-center.rounded-xl.border.not-prose code {
  color: rgb(55 65 81) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-size: 0.8125rem !important;
}
html.dark
  #nd-page:has(.api-page-header)
  div.flex.flex-row.items-center.rounded-xl.border.not-prose
  code {
  color: rgb(229 231 235) !important;
}

/* Inline code in API pages — neutral color aligned with sim design.
   Exclude code inside the method+path bar (handled above). */
#nd-page:has(.api-page-header) .prose :not(pre) > code {
  color: rgb(55 65 81) !important;
}
html.dark #nd-page:has(.api-page-header) .prose :not(pre) > code {
  color: rgb(212 212 216) !important;
}

/* Response Section — custom dropdown-based rendering (Mintlify style) */

/* Hide divider lines between accordion items */
.response-section-wrapper [data-orientation="vertical"].divide-y > * {
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
}
.response-section-wrapper [data-orientation="vertical"].divide-y {
  border-top: none !important;
}

/* Remove content type labels inside accordion items (we show one in the header) */
.response-section-wrapper [data-orientation="vertical"] p.not-prose:has(code.text-xs) {
  display: none !important;
}

/* Hide the top-level response description (e.g. "Execution was successfully cancelled.")
   but NOT field descriptions inside Schema which also use prose-no-margin.
   The response description is a direct child of AccordionContent (role=region) with mb-2. */
.response-section-wrapper [data-orientation="vertical"] [role="region"] > .prose-no-margin.mb-2,
.response-section-wrapper
  [data-orientation="vertical"]
  [role="region"]
  > div
  > .prose-no-margin.mb-2 {
  display: none !important;
}

/* Remove left padding on accordion content so it aligns with Path Parameters */
.response-section-wrapper [data-orientation="vertical"] [role="region"] {
  padding-inline-start: 0 !important;
}

/* Response section header */
.response-section-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
  margin-bottom: 0.25rem;
}

.response-section-title {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0;
  color: rgba(0, 0, 0, 0.85);
  font-family: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, sans-serif;
}

html.dark .response-section-title {
  color: rgba(255, 255, 255, 0.88);
}

.response-section-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

/* Status code dropdown */
.response-section-dropdown-wrapper {
  position: relative;
}

.response-section-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-fd-muted-foreground);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: color 0.15s;
  font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
}
.response-section-dropdown-trigger:hover {
  color: var(--color-fd-foreground);
}

.response-section-chevron {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 0.15s;
}
.response-section-chevron-open {
  transform: rotate(180deg);
}

.response-section-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 50;
  min-width: 5rem;
  background-color: var(--color-fd-popover, white);
  border: 1px solid rgb(229 231 235);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  padding: 0.375rem;
  overflow: hidden;
}
html.dark .response-section-dropdown-menu {
  background-color: var(--color-fd-popover, rgb(24 24 27));
  border-color: rgb(63 63 70);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.response-section-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
  color: var(--color-fd-muted-foreground);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 0.25rem;
  transition:
    background-color 0.1s,
    color 0.1s;
  font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
}
.response-section-dropdown-item:hover {
  background-color: rgb(243 244 246);
  color: var(--color-fd-foreground);
}
html.dark .response-section-dropdown-item:hover {
  background-color: rgb(39 39 42);
}
.response-section-dropdown-item-selected {
  color: var(--color-fd-foreground);
}

.response-section-check {
  width: 0.875rem;
  height: 0.875rem;
}

.response-section-content-type {
  font-size: 0.875rem;
  color: var(--color-fd-muted-foreground);
  font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
}

/* Response schema container — remove border to match Path Parameters style */
.response-section-wrapper [data-orientation="vertical"] .border.px-3.py-2.rounded-lg {
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background-color: transparent;
}

/* Property row — reorder: name (1) → type badge (2) → required badge (3) */
#nd-page:has(.api-page-header) .flex.flex-wrap.items-center.gap-3.not-prose {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* Name span — order 1 */
#nd-page:has(.api-page-header)
  .flex.flex-wrap.items-center.gap-3.not-prose
  > span.font-medium.font-mono.text-fd-primary {
  order: 1;
}

/* Type badge — order 2, grey pill */
#nd-page:has(.api-page-header)
  .flex.flex-wrap.items-center.gap-3.not-prose
  > span.text-sm.font-mono.text-fd-muted-foreground {
  order: 2;
  background-color: rgb(241 245 249);
  color: rgb(71 85 105);
  padding: 0.1875rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.6875rem;
  line-height: 1.125rem;
  font-weight: 500;
  font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
}
html.dark
  #nd-page:has(.api-page-header)
  .flex.flex-wrap.items-center.gap-3.not-prose
  > span.text-sm.font-mono.text-fd-muted-foreground {
  background-color: rgb(51 51 56);
  color: rgb(212 212 220);
}

/* Hide the "*" inside the name span — we'll add "required" as a ::after on the flex row */
#nd-page:has(.api-page-header) span.font-medium.font-mono.text-fd-primary > span.text-red-400 {
  display: none;
}

/* Required badge — order 3, red pill */
#nd-page:has(.api-page-header)
  .flex.flex-wrap.items-center.gap-3.not-prose:has(span.text-red-400)::after {
  content: "required";
  order: 3;
  display: inline-flex;
  align-items: center;
  background-color: rgb(254 226 226);
  color: rgb(185 28 28);
  padding: 0.1875rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.6875rem;
  line-height: 1.125rem;
  font-weight: 500;
  font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
}
html.dark
  #nd-page:has(.api-page-header)
  .flex.flex-wrap.items-center.gap-3.not-prose:has(span.text-red-400)::after {
  background-color: rgb(153 27 27 / 0.3);
  color: rgb(252 165 165);
}

/* Optional "?" indicator — hide it */
#nd-page:has(.api-page-header)
  span.font-medium.font-mono.text-fd-primary
  > span.text-fd-muted-foreground {
  display: none;
}

/* Hide the auth scheme type label (e.g. "apiKey") next to Authorization heading */
#nd-page:has(.api-page-header) .flex.items-start.justify-between.gap-2 > div.not-prose {
  display: none !important;
}

/* Auth property — replace "<token>" with "string" badge, add "header" and "required" badges.
   Auth properties use my-4 (vs py-4 for regular properties). */

/* Auth property flex row — name: order 1, type: order 2, ::before "header": order 3, ::after "required": order 4 */
#nd-page:has(.api-page-header)
  div.my-4
  > .flex.flex-wrap.items-center.gap-3.not-prose
  > span.font-medium.font-mono.text-fd-primary {
  order: 1;
}
#nd-page:has(.api-page-header)
  div.my-4
  > .flex.flex-wrap.items-center.gap-3.not-prose
  > span.text-sm.font-mono.text-fd-muted-foreground {
  order: 2;
  font-size: 0;
  padding: 0 !important;
  background: none !important;
  line-height: 0;
}
#nd-page:has(.api-page-header)
  div.my-4
  > .flex.flex-wrap.items-center.gap-3.not-prose
  > span.text-sm.font-mono.text-fd-muted-foreground::after {
  content: "string";
  font-size: 0.6875rem;
  line-height: 1.125rem;
  font-weight: 500;
  font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
  background-color: rgb(241 245 249);
  color: rgb(71 85 105);
  padding: 0.1875rem 0.5rem;
  border-radius: 0.375rem;
  display: inline-flex;
  align-items: center;
}
html.dark
  #nd-page:has(.api-page-header)
  div.my-4
  > .flex.flex-wrap.items-center.gap-3.not-prose
  > span.text-sm.font-mono.text-fd-muted-foreground::after {
  background-color: rgb(51 51 56);
  color: rgb(212 212 220);
}

/* "header" badge via ::before on the auth flex row */
#nd-page:has(.api-page-header) div.my-4 > .flex.flex-wrap.items-center.gap-3.not-prose::before {
  content: "header";
  order: 3;
  display: inline-flex;
  align-items: center;
  background-color: rgb(241 245 249);
  color: rgb(71 85 105);
  padding: 0.1875rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.6875rem;
  line-height: 1.125rem;
  font-weight: 500;
  font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
}
html.dark
  #nd-page:has(.api-page-header)
  div.my-4
  > .flex.flex-wrap.items-center.gap-3.not-prose::before {
  background-color: rgb(51 51 56);
  color: rgb(212 212 220);
}

/* "required" badge via ::after on the auth flex row — red pill */
#nd-page:has(.api-page-header) div.my-4 > .flex.flex-wrap.items-center.gap-3.not-prose::after {
  content: "required";
  order: 4;
  display: inline-flex;
  align-items: center;
  background-color: rgb(254 226 226);
  color: rgb(185 28 28);
  padding: 0.1875rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.6875rem;
  line-height: 1.125rem;
  font-weight: 500;
  font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
}
html.dark
  #nd-page:has(.api-page-header)
  div.my-4
  > .flex.flex-wrap.items-center.gap-3.not-prose::after {
  background-color: rgb(153 27 27 / 0.3);
  color: rgb(252 165 165);
}

/* Hide "In: header" text below auth property — redundant with the header badge */
#nd-page:has(.api-page-header) div.my-4 .prose-no-margin p:has(> code) {
  display: none !important;
}

/* Section dividers — bottom border after Authorization and Body sections. */
.api-section-divider {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgb(229 231 235 / 0.6);
}
html.dark .api-section-divider {
  border-bottom-color: rgb(255 255 255 / 0.07);
}

/* Property rows — breathing room like Mintlify.
   Regular properties use border-t py-4; auth properties use border-t my-4. */
#nd-page:has(.api-page-header) .text-sm.border-t.py-4 {
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}
#nd-page:has(.api-page-header) .text-sm.border-t.my-4 {
  margin-top: 1.25rem !important;
  margin-bottom: 1.25rem !important;
  padding-top: 1.25rem;
}

/* Divider lines between fields — very subtle like Mintlify */
#nd-page:has(.api-page-header) .text-sm.border-t {
  border-color: rgb(229 231 235 / 0.6);
}
html.dark #nd-page:has(.api-page-header) .text-sm.border-t {
  border-color: rgb(255 255 255 / 0.07);
}

/* Body/Callback section "application/json" label — remove inline code styling */
#nd-page:has(.api-page-header) .flex.gap-2.items-center.justify-between p.not-prose code.text-xs,
#nd-page:has(.api-page-header) .flex.justify-between.gap-2.items-end p.not-prose code.text-xs {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: var(--color-fd-muted-foreground) !important;
  font-size: 0.875rem !important;
  font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif !important;
}

/* Object/array type triggers in property rows — order 2 + badge chip styling */
#nd-page:has(.api-page-header) .flex.flex-wrap.items-center.gap-3.not-prose > button,
#nd-page:has(.api-page-header) .flex.flex-wrap.items-center.gap-3.not-prose > span:has(> button) {
  order: 2;
  background-color: rgb(241 245 249);
  color: rgb(71 85 105);
  padding: 0.1875rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.6875rem;
  line-height: 1.125rem;
  font-weight: 500;
  font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
}
html.dark #nd-page:has(.api-page-header) .flex.flex-wrap.items-center.gap-3.not-prose > button,
html.dark
  #nd-page:has(.api-page-header)
  .flex.flex-wrap.items-center.gap-3.not-prose
  > span:has(> button) {
  background-color: rgb(51 51 56);
  color: rgb(212 212 220);
}

/* Section headings (Authorization, Path Parameters, etc.) — consistent top spacing */
#nd-page:has(.api-page-header) .min-w-0.flex-1 h2 {
  margin-top: 1.75rem !important;
  margin-bottom: 0.25rem !important;
}

/* Code examples in right column — wrap long lines instead of horizontal scroll */
#nd-page:has(.api-page-header) pre {
  white-space: pre-wrap !important;
  word-break: break-all !important;
}
#nd-page:has(.api-page-header) pre code {
  width: 100% !important;
  word-break: break-all !important;
  overflow-wrap: break-word !important;
}

/* Callout/alert — transparent background, no shadow, hide colored bar, add padding */
div.rounded-xl.border.bg-fd-card.shadow-md:has(> [role="none"]) {
  background-color: transparent !important;
  box-shadow: none !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  padding-left: 0.875rem !important;
  align-items: center !important;
}

html.dark div.rounded-xl.border.bg-fd-card.shadow-md:has(> [role="none"]) {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

div.rounded-xl.border.bg-fd-card.shadow-md > [role="none"] {
  display: none !important;
}

/* Files component — transparent background */
div.not-prose.rounded-md.border.bg-fd-card.p-2 {
  background-color: transparent !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

html.dark div.not-prose.rounded-md.border.bg-fd-card.p-2 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Callout icon — outline style, text color, vertically centered */
div.rounded-xl.border.bg-fd-card.shadow-md:has(> [role="none"]) > svg {
  fill: none !important;
  color: var(--color-fd-foreground) !important;
  stroke-width: 1.75 !important;
  flex-shrink: 0;
  width: 1rem !important;
  height: 1rem !important;
}

/* API page header — constrain title/copy-page to left content column, not full width.
   Only applies on OpenAPI pages (which have the two-column layout). */
@media (min-width: 1280px) {
  .api-page-header {
    max-width: calc(100% - 400px - 1.5rem);
  }
}

/* Footer navigation — constrain to left content column on OpenAPI pages only.
   Target pages that contain the two-column layout via :has() selector. */
#nd-page:has(.api-page-header) > div:last-child {
  max-width: calc(100% - 400px - 1.5rem);
}
@media (max-width: 1024px) {
  #nd-page:has(.api-page-header) > div:last-child {
    max-width: 100%;
  }
}

/* ─── Content Components — aligned with platform design system ─── */

/* Heading anchor links — no underline, inherit color */
#nd-page h1 a,
#nd-page h2 a,
#nd-page h3 a,
#nd-page h4 a,
#nd-page h5 a,
#nd-page h6 a,
.prose h1 a,
.prose h2 a,
.prose h3 a,
.prose h4 a,
.prose h5 a,
.prose h6 a {
  text-decoration: none !important;
  color: inherit !important;
  border: none !important;
}

/* Tables — clean divider-based style matching chat markdown renderer */
.prose table,
[data-docs-page] table,
[data-content] table,
main article table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  font-size: 0.875rem !important;
}

.prose thead th,
[data-docs-page] thead th,
[data-content] thead th,
main article thead th {
  background: none !important;
  font-weight: 600 !important;
  padding: 0.5rem 0.75rem !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-inline-start: none !important;
  color: rgba(0, 0, 0, 0.85);
  text-align: left;
  white-space: nowrap;
  line-height: 1.5;
}

html.dark .prose thead th,
html.dark [data-docs-page] thead th,
html.dark [data-content] thead th,
html.dark main article thead th {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.88);
}

.prose td,
[data-docs-page] td,
[data-content] td,
main article td {
  padding: 0.5rem 0.75rem !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-inline-start: none !important;
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.5;
}

html.dark .prose td,
html.dark [data-docs-page] td,
html.dark [data-content] td,
html.dark main article td {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.7);
}

/* Remove bottom border on last row */
.prose tbody tr:last-child td,
[data-docs-page] tbody tr:last-child td,
[data-content] tbody tr:last-child td,
main article tbody tr:last-child td {
  border-bottom: none !important;
}

/* Code blocks — aligned with platform chat code block styling */

/* Standalone code block figure — border + rounded */
figure.shiki:not(div > figure.shiki),
figure[data-rehype-pretty-code-figure]:not(div > figure[data-rehype-pretty-code-figure]),
figure:has(pre):not(div > figure:has(pre)) {
  border-radius: 0.5rem !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  overflow: hidden !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

html.dark figure.shiki:not(div > figure.shiki),
html.dark figure[data-rehype-pretty-code-figure]:not(div > figure[data-rehype-pretty-code-figure]),
html.dark figure:has(pre):not(div > figure:has(pre)) {
  border-color: rgba(255, 255, 255, 0.15) !important;
  background-color: transparent !important;
}

/* Code block inside tabs (API examples) — no extra border, inherits from parent */
div > figure.shiki {
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

html.dark div > figure.shiki {
  background-color: transparent !important;
}

/* Tabbed code block container (cURL/JS/Go tabs) */
div:has(> [role="tablist"]):has(> div > figure.shiki) {
  border-radius: 0.5rem !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

html.dark div:has(> [role="tablist"]):has(> div > figure.shiki) {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background-color: transparent !important;
}

/* Tab list bar — match platform surface-4 */
div:has(> div > figure.shiki) > [role="tablist"] {
  background: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html.dark div:has(> div > figure.shiki) > [role="tablist"] {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* Tab triggers — muted text, active gets foreground */
div:has(> div > figure.shiki) > [role="tablist"] button {
  color: rgba(0, 0, 0, 0.4) !important;
  font-weight: 470 !important;
}

div:has(> div > figure.shiki) > [role="tablist"] button:hover {
  color: rgba(0, 0, 0, 0.7) !important;
}

div:has(> div > figure.shiki) > [role="tablist"] button[data-state="active"] {
  color: rgba(0, 0, 0, 0.85) !important;
}

html.dark div:has(> div > figure.shiki) > [role="tablist"] button {
  color: rgba(255, 255, 255, 0.35) !important;
}

html.dark div:has(> div > figure.shiki) > [role="tablist"] button:hover {
  color: rgba(255, 255, 255, 0.65) !important;
}

html.dark div:has(> div > figure.shiki) > [role="tablist"] button[data-state="active"] {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* Code block title header (figcaption with filename) */
figure.shiki > div:first-child:has(figcaption) {
  background-color: rgb(245, 245, 245) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html.dark figure.shiki > div:first-child:has(figcaption) {
  background-color: rgb(41, 41, 41) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

figure.shiki figcaption {
  color: rgba(0, 0, 0, 0.45) !important;
}

html.dark figure.shiki figcaption {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Code block pre element — transparent bg */
figure.shiki pre {
  background-color: transparent !important;
}

html.dark figure.shiki pre {
  background-color: transparent !important;
}

/* Code viewport scroll area — transparent bg */
figure.shiki > div[role="region"] {
  background-color: transparent !important;
}

html.dark figure.shiki > div[role="region"] {
  background-color: transparent !important;
}

/* Copy button — minimal ghost style */
figure.shiki button[aria-label="Copy Text"],
figure.shiki button[aria-label="Copied Text"] {
  color: rgba(0, 0, 0, 0.3) !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

figure.shiki button[aria-label="Copy Text"]:hover {
  color: rgba(0, 0, 0, 0.6) !important;
}

figure.shiki button[aria-label="Copied Text"] {
  color: rgb(34, 197, 94) !important;
}

html.dark figure.shiki button[aria-label="Copy Text"],
html.dark figure.shiki button[aria-label="Copied Text"] {
  color: rgba(255, 255, 255, 0.25) !important;
}

html.dark figure.shiki button[aria-label="Copy Text"]:hover {
  color: rgba(255, 255, 255, 0.6) !important;
}

html.dark figure.shiki button[aria-label="Copied Text"] {
  color: rgb(74, 222, 128) !important;
}

/* Copy button container — remove backdrop blur bg */
figure.shiki > div:has(> button[aria-label]) {
  background: none !important;
  backdrop-filter: none !important;
}

/* Cards container — vertical list with line dividers instead of grid boxes */
.prose .grid:has(> a[data-card]),
#nd-page .grid:has(> a[data-card]) {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html.dark .prose .grid:has(> a[data-card]),
html.dark #nd-page .grid:has(> a[data-card]) {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* Card items — line-separated rows with hover bg (scoped to grid container only) */
.grid > a[data-card] {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.125rem !important;
  background: none !important;
  border: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 0 !important;
  padding: 0.875rem 1rem !important;
  transition: background-color 0.15s !important;
  box-shadow: none !important;
}

.grid > a[data-card]:last-child {
  border-bottom: none !important;
}

.grid > a[data-card]:hover {
  background-color: rgba(0, 0, 0, 0.02) !important;
}

html.dark .grid > a[data-card] {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  background: none !important;
}

html.dark .grid > a[data-card]:hover {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

/* Card title */
.grid > a[data-card] h3 {
  font-weight: 470 !important;
  font-size: 0.875rem !important;
  color: rgba(0, 0, 0, 0.85) !important;
}

html.dark .grid > a[data-card] h3 {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* Card description */
.grid > a[data-card] p,
.grid > a[data-card] div {
  color: rgba(0, 0, 0, 0.45) !important;
  font-size: 0.8125rem !important;
}

html.dark .grid > a[data-card] p,
html.dark .grid > a[data-card] div {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Steps — lighter styling aligned with platform */
.fd-steps {
  border-left-color: rgba(0, 0, 0, 0.08) !important;
}

html.dark .fd-steps {
  border-left-color: rgba(255, 255, 255, 0.08) !important;
}

.fd-step::before {
  background-color: rgb(245, 245, 245) !important;
  color: rgba(0, 0, 0, 0.5) !important;
  font-weight: 500 !important;
}

html.dark .fd-step::before {
  background-color: rgb(41, 41, 41) !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

/* Blockquotes — subtle left border, matching platform divider */
.prose blockquote,
[data-docs-page] blockquote,
[data-content] blockquote,
main article blockquote {
  border-left: 3px solid rgba(0, 0, 0, 0.1) !important;
  padding: 0.25rem 0 0.25rem 1rem !important;
  color: rgba(0, 0, 0, 0.55) !important;
  font-style: italic;
  background: none !important;
  margin: 1.5rem 0 !important;
}

html.dark .prose blockquote,
html.dark [data-docs-page] blockquote,
html.dark [data-content] blockquote,
html.dark main article blockquote {
  border-left-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Remove all remaining box-shadows on content components */
.prose > *,
[data-docs-page] figure,
[data-docs-page] table,
[data-docs-page] [data-card] {
  box-shadow: none !important;
}

/* Tailwind v4 content sources */
@source '../app/**/*.{js,ts,jsx,tsx,mdx}';
@source '../components/**/*.{js,ts,jsx,tsx,mdx}';
@source '../content/**/*.{js,ts,jsx,tsx,mdx}';
@source '../mdx-components.tsx';
@source '../node_modules/fumadocs-ui/dist/**/*.js';