/*fern-site-stylesheet*/@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/_fern-files/bigcommerce.docs.buildwithfern.com/b919352367353fa5d262ad7aef6dd53d89c401eb60749dee20b8fd75e8be3d72/docs/fonts/PlusJakartaSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/_fern-files/bigcommerce.docs.buildwithfern.com/388e45211c162f3b2e8b0ca21261d4ddf9fd5db42f848892640a06d1c1321f46/docs/fonts/PlusJakartaSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 720px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 24px;
  --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

:root {
  --typography-body-font-family: var(--font-body);
  --typography-heading-font-family: var(--font-heading);
  --typography-code-font-family: var(--font-code);
}


.light, :root {
  --accent-1: #fcfdff;
  --accent-2: #f5f9ff;
  --accent-3: #eaf2ff;
  --accent-4: #d9eaff;
  --accent-5: #c9dfff;
  --accent-6: #b6d2ff;
  --accent-7: #9abeff;
  --accent-8: #75a3ff;
  --accent-9: #0d35ff;
  --accent-10: #0916ec;
  --accent-11: #194bf5;
  --accent-12: #102970;

  --accent-a1: #0055ff03;
  --accent-a2: #0066ff0a;
  --accent-a3: #0062ff15;
  --accent-a4: #0073ff26;
  --accent-a5: #0068ff36;
  --accent-a6: #0062ff49;
  --accent-a7: #005bff65;
  --accent-a8: #0055ff8a;
  --accent-a9: #002afff2;
  --accent-a10: #000debf6;
  --accent-a11: #0037f4e6;
  --accent-a12: #001b66ef;

  --accent-contrast: #fff;
  --accent-surface: #f3f8ffcc;
  --accent-indicator: #0d35ff;
  --accent-track: #0d35ff;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.4% 0.0022 264.8);
      --accent-2: oklch(98.3% 0.0119 264.8);
      --accent-3: oklch(96.1% 0.0254 264.8);
      --accent-4: oklch(93.5% 0.0501 264.8);
      --accent-5: oklch(90.3% 0.0758 264.8);
      --accent-6: oklch(86.3% 0.1058 264.8);
      --accent-7: oklch(80.7% 0.1288 264.8);
      --accent-8: oklch(73% 0.1679 264.8);
      --accent-9: oklch(48.9% 0.2884 264.8);
      --accent-10: oklch(43.8% 0.2884 264.8);
      --accent-11: oklch(51% 0.2562 264.8);
      --accent-12: oklch(31.3% 0.1269 264.8);

      --accent-a1: color(display-p3 0.0235 0.349 1 / 0.012);
      --accent-a2: color(display-p3 0.0235 0.349 0.8941 / 0.036);
      --accent-a3: color(display-p3 0.0078 0.3569 0.9529 / 0.079);
      --accent-a4: color(display-p3 0.0078 0.3765 0.9451 / 0.138);
      --accent-a5: color(display-p3 0.0078 0.3451 0.9412 / 0.197);
      --accent-a6: color(display-p3 0.0039 0.3255 0.9451 / 0.267);
      --accent-a7: color(display-p3 0.0039 0.302 0.949 / 0.369);
      --accent-a8: color(display-p3 0 0.2745 0.949 / 0.502);
      --accent-a9: color(display-p3 0 0.1176 0.9569 / 0.902);
      --accent-a10: color(display-p3 0 0.0431 0.8863 / 0.953);
      --accent-a11: color(display-p3 0 0.1608 0.9098 / 0.848);
      --accent-a12: color(display-p3 0 0.0784 0.3686 / 0.914);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9569 0.9725 1 / 0.8);
      --accent-indicator: oklch(48.9% 0.2884 264.8);
      --accent-track: oklch(48.9% 0.2884 264.8);
    }
  }
}


.light, :root {
  --grayscale-1: #fdfcfd;
  --grayscale-2: #faf9fb;
  --grayscale-3: #f2eff3;
  --grayscale-4: #eae7ec;
  --grayscale-5: #e3dfe6;
  --grayscale-6: #dbd8e0;
  --grayscale-7: #d0cdd7;
  --grayscale-8: #bcbac7;
  --grayscale-9: #8e8c99;
  --grayscale-10: #84828e;
  --grayscale-11: #65636d;
  --grayscale-12: #211f26;

  --grayscale-a1: #55005503;
  --grayscale-a2: #2b005506;
  --grayscale-a3: #30004010;
  --grayscale-a4: #20003618;
  --grayscale-a5: #20003820;
  --grayscale-a6: #14003527;
  --grayscale-a7: #10003332;
  --grayscale-a8: #08003145;
  --grayscale-a9: #05001d73;
  --grayscale-a10: #0500197d;
  --grayscale-a11: #0400119c;
  --grayscale-a12: #020008e0;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #8e8c99;
  --grayscale-track: #8e8c99;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.991 0.988 0.992);
      --grayscale-2: color(display-p3 0.98 0.976 0.984);
      --grayscale-3: color(display-p3 0.946 0.938 0.952);
      --grayscale-4: color(display-p3 0.915 0.906 0.925);
      --grayscale-5: color(display-p3 0.886 0.876 0.901);
      --grayscale-6: color(display-p3 0.856 0.846 0.875);
      --grayscale-7: color(display-p3 0.814 0.804 0.84);
      --grayscale-8: color(display-p3 0.735 0.728 0.777);
      --grayscale-9: color(display-p3 0.555 0.549 0.596);
      --grayscale-10: color(display-p3 0.514 0.508 0.552);
      --grayscale-11: color(display-p3 0.395 0.388 0.424);
      --grayscale-12: color(display-p3 0.128 0.122 0.147);

      --grayscale-a1: #55005503;
      --grayscale-a2: #2b005506;
      --grayscale-a3: #30004010;
      --grayscale-a4: #20003618;
      --grayscale-a5: #20003820;
      --grayscale-a6: #14003527;
      --grayscale-a7: #10003332;
      --grayscale-a8: #08003145;
      --grayscale-a9: #05001d73;
      --grayscale-a10: #0500197d;
      --grayscale-a11: #0400119c;
      --grayscale-a12: #020008e0;

      --grayscale-contrast: #000;
      --grayscale-surface: color(display-p3 1 1 1 / 80%);
      --grayscale-indicator: color(display-p3 0.555 0.549 0.596);
      --grayscale-track: color(display-p3 0.555 0.549 0.596);
    }
  }
}


.dark {
  --accent-1: #000;
  --accent-2: #0a121f;
  --accent-3: #102244;
  --accent-4: #122d61;
  --accent-5: #1b3a75;
  --accent-6: #274887;
  --accent-7: #33589e;
  --accent-8: #3e6abd;
  --accent-9: #5a93ff;
  --accent-10: #4f87f2;
  --accent-11: #85b3ff;
  --accent-12: #cfe1ff;

  --accent-a1: #00000000;
  --accent-a2: #5395ff1f;
  --accent-a3: #3c80ff44;
  --accent-a4: #3077ff61;
  --accent-a5: #3b7fff75;
  --accent-a6: #4a88ff87;
  --accent-a7: #538eff9e;
  --accent-a8: #548fffbd;
  --accent-a9: #5a93ff;
  --accent-a10: #538efff2;
  --accent-a11: #85b3ff;
  --accent-a12: #cfe1ff;

  --accent-contrast: #fff;
  --accent-surface: #14243e80;
  --accent-indicator: #5a93ff;
  --accent-track: #5a93ff;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(0% 0.0256 261.9);
      --accent-2: oklch(18% 0.0297 261.9);
      --accent-3: oklch(25.8% 0.0676 261.9);
      --accent-4: oklch(30.9% 0.0993 261.9);
      --accent-5: oklch(36% 0.1081 261.9);
      --accent-6: oklch(41.2% 0.1125 261.9);
      --accent-7: oklch(47% 0.1214 261.9);
      --accent-8: oklch(53.5% 0.1398 261.9);
      --accent-9: oklch(67.6% 0.1709 261.9);
      --accent-10: oklch(63.7% 0.1709 261.9);
      --accent-11: oklch(76.9% 0.1326 261.9);
      --accent-12: oklch(90.8% 0.0495 261.9);

      --accent-a1: color(display-p3 0 0 0 / 0);
      --accent-a2: color(display-p3 0.4 0.6 1 / 0.118);
      --accent-a3: color(display-p3 0.3059 0.5176 1 / 0.259);
      --accent-a4: color(display-p3 0.2667 0.4706 1 / 0.369);
      --accent-a5: color(display-p3 0.3098 0.5059 1 / 0.444);
      --accent-a6: color(display-p3 0.3608 0.5451 1 / 0.514);
      --accent-a7: color(display-p3 0.3922 0.5686 1 / 0.6);
      --accent-a8: color(display-p3 0.3922 0.5725 1 / 0.718);
      --accent-a9: color(display-p3 0.4157 0.5922 1 / 0.969);
      --accent-a10: color(display-p3 0.3922 0.5686 1 / 0.922);
      --accent-a11: color(display-p3 0.5725 0.7137 1 / 0.977);
      --accent-a12: color(display-p3 0.8314 0.8863 1 / 0.989);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.0941 0.1333 0.2353 / 0.5);
      --accent-indicator: oklch(67.6% 0.1709 261.9);
      --accent-track: oklch(67.6% 0.1709 261.9);
    }
  }
}


.dark {
  --grayscale-1: #121113;
  --grayscale-2: #1a191b;
  --grayscale-3: #232225;
  --grayscale-4: #2b292d;
  --grayscale-5: #323035;
  --grayscale-6: #3c393f;
  --grayscale-7: #49474e;
  --grayscale-8: #625f69;
  --grayscale-9: #6f6d78;
  --grayscale-10: #7c7a85;
  --grayscale-11: #b5b2bc;
  --grayscale-12: #eeeef0;

  --grayscale-a1: #00000000;
  --grayscale-a2: #f5f4f609;
  --grayscale-a3: #ebeaf814;
  --grayscale-a4: #eee5f81d;
  --grayscale-a5: #efe6fe25;
  --grayscale-a6: #f1e6fd30;
  --grayscale-a7: #eee9ff40;
  --grayscale-a8: #eee7ff5d;
  --grayscale-a9: #eae6fd6e;
  --grayscale-a10: #ece9fd7c;
  --grayscale-a11: #f5f1ffb7;
  --grayscale-a12: #fdfdffef;

  --grayscale-contrast: #fff;
  --grayscale-surface: rgba(0, 0, 0, 0.05);
  --grayscale-indicator: #6f6d78;
  --grayscale-track: #6f6d78;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.07 0.067 0.074);
      --grayscale-2: color(display-p3 0.101 0.098 0.105);
      --grayscale-3: color(display-p3 0.138 0.134 0.144);
      --grayscale-4: color(display-p3 0.167 0.161 0.175);
      --grayscale-5: color(display-p3 0.196 0.189 0.206);
      --grayscale-6: color(display-p3 0.232 0.225 0.245);
      --grayscale-7: color(display-p3 0.286 0.277 0.302);
      --grayscale-8: color(display-p3 0.383 0.373 0.408);
      --grayscale-9: color(display-p3 0.434 0.428 0.467);
      --grayscale-10: color(display-p3 0.487 0.48 0.519);
      --grayscale-11: color(display-p3 0.707 0.7 0.735);
      --grayscale-12: color(display-p3 0.933 0.933 0.94);

      --grayscale-a1: #00000000;
      --grayscale-a2: #f5f4f609;
      --grayscale-a3: #ebeaf814;
      --grayscale-a4: #eee5f81d;
      --grayscale-a5: #efe6fe25;
      --grayscale-a6: #f1e6fd30;
      --grayscale-a7: #eee9ff40;
      --grayscale-a8: #eee7ff5d;
      --grayscale-a9: #eae6fd6e;
      --grayscale-a10: #ece9fd7c;
      --grayscale-a11: #f5f1ffb7;
      --grayscale-a12: #fdfdffef;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.434 0.428 0.467);
      --grayscale-track: color(display-p3 0.434 0.428 0.467);
    }
  }
}

.light, :root {
  color-scheme: light;
  --accent: rgba(13, 53, 255, 1);
  --background: rgba(255, 255, 255, 1);
  --border: rgba(228, 232, 238, 1);
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(90, 147, 255, 1);
  --background: rgba(0, 0, 0, 1);
  --border: rgba(58, 58, 74, 1);
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #000;
}

/* Makeswift badge styling — matches the live Mintlify docsite */

:root {
  --background: #ffffff;
  --foreground: #15171e;
  --contrast-50: #f8fafb;
  --contrast-100: #f2f5f8;
  --contrast-200: #e4e8ee;
  --contrast-300: #afb9c4;
  --contrast-400: #7b8793;
  --contrast-500: #363d52;

  --badge-experimental-bg: rgba(254, 226, 226, 0.5);
  --badge-experimental-text: #dc2626;
  --badge-alpha-bg: rgba(254, 249, 195, 0.5);
  --badge-alpha-text: #ca8a04;
  --badge-beta-bg: rgba(219, 234, 254, 0.5);
  --badge-beta-text: #2563eb;

  --font-display: "Plus Jakarta Sans", sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  font-family: var(--font-body);

  --font-size-base: 0.9375rem;
  --font-size-sm: 0.8125rem;

  --outline: 1px solid rgba(21, 23, 30, 0.1);
  --outline-hover: 1px solid rgba(21, 23, 30, 0.2);
  --shadow-1:
    0 1px 2px 0 rgba(21, 23, 30, 0.05), 0 2px 6px 0 rgba(21, 23, 30, 0.05);
  --shadow-2: 0px 4px 16px rgba(0, 0, 0, 0.1);
}

.dark {
  --background: #000000;
  --foreground: #ffffff;
  --body-text: #a5a0a3;
  --contrast-50: #0f1015;
  --contrast-100: #15171e;
  --contrast-200: #363d52;
  --contrast-300: #7b8793;
  --contrast-400: #afb9c4;
  --contrast-500: #e4e8ee;
  --outline: 1px solid rgba(255, 255, 255, 0.15);
  --outline-hover: 1px solid rgba(255, 255, 255, 0.2);
}

/* Dark mode: soften body text (paragraphs, lists, table cells) while keeping
   headings and UI elements at full --foreground brightness */
.dark .prose p,
.dark .prose li,
.dark .prose td,
.dark .prose dd {
  color: var(--body-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display) !important;
}

h1 {
  letter-spacing: -0.01em !important;
}

.prose :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin: 4px 0 !important;
}

.fern-mdx-link {
  color: var(--accent) !important;
  text-decoration: none !important;
  transition: color 0.15s linear !important;
}

.dark .fern-mdx-link {
  color: var(--accent-a11) !important;
}

.fern-mdx-link svg.external-link-icon {
  margin-left: calc(var(--spacing) * 1) !important;
}

.fern-mdx-link:hover {
  color: var(--contrast-500) !important;
}
.fern-mdx-link:focus-visible {
  color: var(--contrast-500) !important;
}

html.dark,
[data-theme="dark"] {
  --badge-experimental-bg: rgba(248, 113, 113, 0.1);
  --badge-experimental-text: #fca5a5;
  --badge-alpha-bg: rgba(250, 204, 21, 0.1);
  --badge-alpha-text: #fde047;
  --badge-beta-bg: rgba(96, 165, 250, 0.1);
  --badge-beta-text: #93c5fd;
}

.badge {
  display: inline-block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  font-weight: 500;
  white-space: nowrap;
  margin-left: 0.5rem;
  vertical-align: middle;
  text-transform: capitalize;
}

.experimental-badge {
  background-color: var(--badge-experimental-bg);
  color: var(--badge-experimental-text);
}

.alpha-badge {
  background-color: var(--badge-alpha-bg);
  color: var(--badge-alpha-text);
}

.beta-badge {
  background-color: var(--badge-beta-bg);
  color: var(--badge-beta-text);
}

/* Breadcrumb styling */
.fern-breadcrumb {
  font-weight: 600;
  gap: 2px !important;
}

.fern-breadcrumb .fern-breadcrumb-item {
  color: var(--accent) !important;
}

.dark .fern-breadcrumb .fern-breadcrumb-item {
  color: var(--accent-a11) !important;
}

/* Scroll area styling */
.fern-scroll-area-scrollbar {
  background-color: var(--contrast-100) !important;
}

.fern-scroll-area-thumb {
  background-color: var(--contrast-300) !important;
}

.dark .fern-scroll-area-thumb {
  background-color: var(--contrast-200) !important;
}

/* Page subtitle styling */
.page-subtitle {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-family: var(--font-body);
  margin-top: -1.6rem;
  margin-bottom: 1.5rem;
}

/* Page actions styling  */
.fern-page-actions {
  font-size: 12px !important;
  box-shadow: var(--shadow-1) !important;
  outline: var(--outline) !important;
}

.fern-page-actions .fern-button-text {
  font-size: 12px !important;
}

/* Global border styling — black borders, pink on hover */
.fern-card:not([class*="fern-explorer"]):not(figure),
.card,
button[class*="copy"],
button[class*="Copy"],
[class*="feedback"],
[class*="thumbs"],
[class*="clipboard"],
[class*="PageActions"],
[class*="page-action"],
[role="button"] {
  border-color: #000000 !important;
  transition: border-color 0.2s ease;
}

.fern-card:not([class*="fern-explorer"]):not(figure):hover,
.card:hover,
button[class*="copy"]:hover,
button[class*="Copy"]:hover,
[class*="feedback"]:hover,
[class*="thumbs"]:hover,
[class*="clipboard"]:hover,
[class*="PageActions"]:hover,
[class*="page-action"]:hover,
[role="button"]:hover {
  border-color: var(--bc-accent) !important;
}
.fern-card:not([class*="fern-explorer"]):not(figure):focus-visible,
.card:focus-visible,
button[class*="copy"]:focus-visible,
button[class*="Copy"]:focus-visible,
[class*="feedback"]:focus-visible,
[class*="thumbs"]:focus-visible,
[class*="clipboard"]:focus-visible,
[class*="PageActions"]:focus-visible,
[class*="page-action"]:focus-visible,
[role="button"]:focus-visible {
  border-color: var(--bc-accent) !important;
}

html.dark .fern-card:not([class*="fern-explorer"]):not(figure),
html.dark .card,
html.dark button[class*="copy"],
html.dark button[class*="Copy"],
html.dark [class*="feedback"],
html.dark [class*="thumbs"],
html.dark [class*="clipboard"],
html.dark [class*="PageActions"],
html.dark [class*="page-action"],
html.dark [role="button"],
[data-theme="dark"] .fern-card:not([class*="fern-explorer"]):not(figure),
[data-theme="dark"] .card,
[data-theme="dark"] button[class*="copy"],
[data-theme="dark"] button[class*="Copy"],
[data-theme="dark"] [class*="feedback"],
[data-theme="dark"] [class*="thumbs"],
[data-theme="dark"] [class*="clipboard"],
[data-theme="dark"] [class*="PageActions"],
[data-theme="dark"] [class*="page-action"],
[data-theme="dark"] [role="button"] {
  border-color: #ffffff !important;
}

html.dark .fern-card:not([class*="fern-explorer"]):not(figure):hover,
html.dark .card:hover,
html.dark button[class*="copy"]:hover,
html.dark button[class*="Copy"]:hover,
html.dark [class*="feedback"]:hover,
html.dark [class*="thumbs"]:hover,
html.dark [class*="clipboard"]:hover,
html.dark [class*="PageActions"]:hover,
html.dark [class*="page-action"]:hover,
html.dark [role="button"]:hover,
[data-theme="dark"] .fern-card:not([class*="fern-explorer"]):not(figure):hover,
[data-theme="dark"] .card:hover,
[data-theme="dark"] button[class*="copy"]:hover,
[data-theme="dark"] button[class*="Copy"]:hover,
[data-theme="dark"] [class*="feedback"]:hover,
[data-theme="dark"] [class*="thumbs"]:hover,
[data-theme="dark"] [class*="clipboard"]:hover,
[data-theme="dark"] [class*="PageActions"]:hover,
[data-theme="dark"] [class*="page-action"]:hover,
[data-theme="dark"] [role="button"]:hover {
  border-color: var(--bc-accent) !important;
}
html.dark .fern-card:not([class*="fern-explorer"]):not(figure):focus-visible,
html.dark .card:focus-visible,
html.dark button[class*="copy"]:focus-visible,
html.dark button[class*="Copy"]:focus-visible,
html.dark [class*="feedback"]:focus-visible,
html.dark [class*="thumbs"]:focus-visible,
html.dark [class*="clipboard"]:focus-visible,
html.dark [class*="PageActions"]:focus-visible,
html.dark [class*="page-action"]:focus-visible,
html.dark [role="button"]:focus-visible,
[data-theme="dark"] .fern-card:not([class*="fern-explorer"]):not(figure):focus-visible,
[data-theme="dark"] .card:focus-visible,
[data-theme="dark"] button[class*="copy"]:focus-visible,
[data-theme="dark"] button[class*="Copy"]:focus-visible,
[data-theme="dark"] [class*="feedback"]:focus-visible,
[data-theme="dark"] [class*="thumbs"]:focus-visible,
[data-theme="dark"] [class*="clipboard"]:focus-visible,
[data-theme="dark"] [class*="PageActions"]:focus-visible,
[data-theme="dark"] [class*="page-action"]:focus-visible,
[data-theme="dark"] [role="button"]:focus-visible {
  border-color: var(--bc-accent) !important;
}

/* ===== Tooltip Styling ===== */

/* Text tooltip trigger — underline customization */
.fern-mdx-tooltip-trigger {
  --tooltip-underline-color: var(--grayscale-a6) !important;
  --tooltip-underline-hover-color: var(--grayscale-a8) !important;
  --tooltip-underline-thickness: 1px !important;
  --tooltip-underline-offset: 2px !important;
  --tooltip-transition-duration: 0.1s !important;
  font-family: var(--font-body);
}

/* Target both the documented class and the role attribute as fallback */
.fern-mdx-tooltip-content,
[role="tooltip"] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 12px !important;
  gap: 4px;
  background: var(--background) !important;
  border: 0px !important;
  box-shadow: var(--shadow-2) !important;
  border-radius: 12px !important;
  font-size: 12px;
  line-height: 20px;
  color: var(--contrast-500);
}

.fern-mdx-tooltip-content strong,
[role="tooltip"] strong {
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  color: var(--foreground);
}

.fern-mdx-tooltip-content a,
[role="tooltip"] a {
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  color: #6058ff;
  text-decoration: none;
  padding-top: 4px;
}

.dark .fern-mdx-tooltip-content,
.dark [role="tooltip"] {
  background: var(--bc-bg-secondary) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.3) !important;
  color: #b8b8d0;
}

.dark .fern-mdx-tooltip-content strong,
.dark [role="tooltip"] strong {
  background: var(--contrast-100) !important;
}

.dark .fern-mdx-tooltip-content a,
.dark [role="tooltip"] a {
  color: #8078ff;
}

.fern-layout-guide,
.fern-layout-overview {
  margin-bottom: 0 !important;
}

.fern-layout-guide header {
  margin-bottom: 40px !important;
}

.fern-layout-guide article {
  margin-bottom: 0px !important;
}

.fern-layout-overview article {
  max-width: min(896px, 100%) !important;
}

/* ===== Tabs Styling (content only, not header) ===== */
/* Target content tablist: remove default underline border, add pill container */
[role="tabpanel"] ~ div [role="tablist"],
div[data-orientation="horizontal"] > [role="tablist"]:not(.fern-header-tabs *) {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  padding: 6px !important;
  gap: 0 !important;
  background: var(--contrast-100) !important;
  border: 1px solid var(--contrast-200) !important;
  border-radius: 12px !important;
}

/* Individual tab — reset h6 defaults and underline styles */
div[data-orientation="horizontal"]
  > [role="tablist"]:not(.fern-header-tabs *)
  [role="tab"] {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 28px;
  padding: 4px 10px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-display) !important;
  letter-spacing: 0em !important;
  line-height: 20px;
  text-align: center;
  color: var(--contrast-400) !important;
  transition: color 0.15s linear !important;
  white-space: nowrap;
}

div[data-orientation="horizontal"]
  > [role="tablist"]:not(.fern-header-tabs *)
  [role="tab"]:hover {
  color: var(--contrast-500) !important;
}
div[data-orientation="horizontal"] > [role="tablist"]:not(.fern-header-tabs *) [role="tab"]:focus-visible {
  color: var(--contrast-500) !important;
}

#fern-header [data-radix-collection-item][data-state="active"] {
  color: var(--accent) !important;
}

.dark #fern-header [data-radix-collection-item][data-state="active"] {
  color: var(--accent-a11) !important;
}

/* Hide the ::before underline indicator on all tabs */
div[data-orientation="horizontal"]
  > [role="tablist"]:not(.fern-header-tabs *)
  [role="tab"]::before,
div[data-orientation="horizontal"]
  > [role="tablist"]:not(.fern-header-tabs *)
  [role="tab"]::after {
  display: none !important;
}

/* Active tab — pill style */
div[data-orientation="horizontal"]
  > [role="tablist"]:not(.fern-header-tabs *)
  [role="tab"][data-state="active"] {
  justify-content: center;
  background: var(--background) !important;
  outline: var(--outline) !important;
  box-shadow: var(--shadow-1) !important;
  color: var(--foreground) !important;
  text-decoration: none !important;
}

/* Dark mode — active tab */
.dark
  div[data-orientation="horizontal"]
  > [role="tablist"]:not(.fern-header-tabs *)
  [role="tab"][data-state="active"] {
  background: var(--contrast-200) !important;
  outline: none !important;
  border: var(--outline) !important;
}

/* ===== Table Styling ===== */

/* Table root — gray background container with rounded corners */
.fern-table-root {
  background: var(--contrast-100) !important;
  border-radius: 12px !important;
  border: 1px solid var(--contrast-200) !important;
  overflow: hidden !important;
}

/* Table element — remove default borders */
.fern-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  border: none !important;
}

/* Table header row */
.fern-table thead tr {
  background: transparent !important;
}

/* Table header cells */
.fern-table thead th {
  padding: 10px 16px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  color: var(--foreground) !important;
  border: none !important;
  background: transparent !important;
}

/* Table body — white background with rounded corners and border */
.fern-table tbody {
  background: var(--background) !important;
  border-radius: 12px !important;
  box-shadow: 0 0 0 1px var(--contrast-200) !important;
}

/* Round the corners of first and last rows in tbody */
.fern-table tbody tr:first-child td:first-child {
  border-top-left-radius: 12px !important;
}

.fern-table tbody tr:first-child td:last-child {
  border-top-right-radius: 12px !important;
}

.fern-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 12px !important;
}

.fern-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 12px !important;
}

/* Table body cells */
.fern-table tbody td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--contrast-200) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  font-family: var(--font-body) !important;
  line-height: 20px !important;
  color: var(--contrast-500) !important;
  background: var(--background) !important;
}

/* Remove bottom border on last row */
.fern-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* Code elements inside table cells — styled as inline pills */
.fern-table tbody td code {
  display: inline !important;
  white-space: nowrap !important;
}

/* Links inside table cells */
.fern-table tbody td a {
  line-height: 20px !important;
}

/* Keep a link's trailing external-link icon from orphaning onto its own line.
   Scoped to the first (label) column, whose links are short, so long prose
   links in other columns can still wrap freely. */
.fern-table tbody td:first-child a {
  white-space: nowrap !important;
}

/* Mobile — let wide tables scroll horizontally instead of squishing columns.
   Desktop keeps overflow: hidden on the root for rounded-corner clipping. */
@media (max-width: 640px) {

  .fern-table-root {
    overflow-x: auto !important;
  }

  .fern-table {
    min-width: 640px !important;
  }

  /* Keep the label column readable so greedy prose columns don't crush it. */
  .fern-table :is(th, td):first-child {
    min-width: 12rem !important;
  }

}

/* ===== Table of Contents (TOC) Styling ===== */

/* "On this page" heading */
#fern-toc .fern-scroll-area-viewport > div > div.text-sm.font-medium {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display) !important;
  font-weight: 600;
  line-height: 20px;
  color: var(--foreground);
  margin-bottom: 4px;
  height: 36px;
}

/* List icon before "On this page" text */
#fern-toc .fern-scroll-area-viewport > div > div.text-sm.font-medium::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cline x1='2' y1='3.33' x2='14' y2='3.33' stroke='currentColor' stroke-width='1.25' stroke-linecap='round'/%3E%3Cline x1='2' y1='8' x2='10' y2='8' stroke='currentColor' stroke-width='1.25' stroke-linecap='round'/%3E%3Cline x1='2' y1='12.67' x2='12' y2='12.67' stroke='currentColor' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* TOC list container */
#fern-toc ul.toc-root {
  border-left: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

#fern-toc ul.toc-root:before {
  background-color: var(--contrast-200) !important;
}

/* TOC list items */
#fern-toc ul.toc-root li {
  margin-bottom: 0 !important;
  border-left: none !important;
  margin-left: 0 !important;
}

/* All TOC links — base style */
#fern-toc ul.toc-root li a {
  font-weight: 500 !important;
  line-height: 20px !important;
  padding: 4px 0 4px 24px !important;
  color: var(--contrast-400) !important;
  transition: color 0.15s linear !important;
  letter-spacing: 0em !important;
}

/* TOC link hover */
#fern-toc ul.toc-root li a:hover {
  color: var(--foreground) !important;
}
#fern-toc ul.toc-root li a:focus-visible {
  color: var(--foreground) !important;
}

/* Active TOC item — no separate border, ::after handles indicator */
#fern-toc ul.toc-root li:has(a.font-bold) {
  border-left: none !important;
}

/* Active TOC link — accent color */
#fern-toc ul.toc-root li a.font-bold {
  color: var(--accent) !important;
  font-weight: 500 !important;
}

/* Nested TOC items (depth > 0) — extra indent */
#fern-toc ul.toc-root li[data-depth="1"] a {
  padding-left: 36px !important;
}

#fern-toc ul.toc-root li[data-depth="2"] a {
  padding-left: 48px !important;
}

/* Dark mode — TOC icon should match "On this page" text color */
.dark
  #fern-toc
  .fern-scroll-area-viewport
  > div
  > div.text-sm.font-medium::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cline x1='2' y1='3.33' x2='14' y2='3.33' stroke='%23E4E8EE' stroke-width='1.25' stroke-linecap='round'/%3E%3Cline x1='2' y1='8' x2='10' y2='8' stroke='%23E4E8EE' stroke-width='1.25' stroke-linecap='round'/%3E%3Cline x1='2' y1='12.67' x2='12' y2='12.67' stroke='%23E4E8EE' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E");
}

.dark #fern-toc ul.toc-root li a.font-bold {
  color: var(--accent-a11) !important;
}

/* TOC scrollbar — make track and thumb same size */
#fern-toc .toc-root::before,
#fern-toc .toc-root::after {
  width: 1px !important;
  left: 1px !important;
}

/* TOC scroll indicator — slightly darker */
#fern-toc .toc-root::after {
  background-color: var(--accent) !important;
}

/* ===== Mobile Sidebar — solid background, no transparency ===== */
#fern-sidebar {
  background: var(--background) !important;
  border-color: var(--contrast-200) !important;
}

/* Match the header's bottom divider to the sidebar's vertical border (both
 * --contrast-200) so the two separators meet cleanly at the top-left corner.
 * In dark mode Fern's default header border (rgb(58,58,74)) doesn't match the
 * sidebar's --contrast-200 (rgb(54,61,82)); light mode already matches, so
 * this is a no-op there. */
#fern-header {
  border-bottom-color: var(--contrast-200) !important;
}

#fern-sidebar[data-viewport="mobile"] {
  max-width: 100% !important;
  border-left: 0 !important;
  box-shadow: var(--shadow-1) !important;
}

/* Remove the fade gradient mask on the sidebar scroll area */
#fern-sidebar .mask-grad-y-3,
#fern-sidebar .fern-scroll-area-viewport {
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* Force Radix scrollbar to always be interactable in mobile sidebar */
#fern-sidebar [data-radix-scroll-area-scrollbar] {
  pointer-events: auto !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
}

#fern-sidebar [data-radix-scroll-area-scrollbar][data-state="visible"] {
  opacity: 1 !important;
}

/* Force vertical-only scrolling on the sidebar; prevent horizontal scroll
   from deep nav indentation. */
#fern-sidebar [data-radix-scroll-area-root] {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

#fern-sidebar .fern-scroll-area-viewport[style] {
  overflow-x: hidden !important;
  overflow-y: scroll !important;
}

/* ===== Mobile Sidebar Tabs (Docs / Blog) ===== */
#fern-sidebar [role="tablist"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin-left: -16px !important;
  margin-right: -16px !important;
  padding: 12px 16px 16px !important;
  background: transparent !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--contrast-200) !important;
  width: auto !important;
}

#fern-sidebar [role="tablist"] [role="tab"] {
  min-height: auto !important;
  padding: 4px 8px !important;
  display: block !important;
  flex: none !important;
  margin-left: 0 !important;
  border-radius: 0 !important;
  font-family: var(--font-display) !important;
  font-size: var(--font-size-base) !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  color: var(--contrast-500) !important;
  background: transparent !important;
  text-align: left !important;
  height: auto !important;
  border: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: unset !important;
  min-width: auto !important;
}

#fern-sidebar [role="tablist"] [role="tab"] .truncate {
  overflow: visible !important;
  text-overflow: unset !important;
}

#fern-sidebar [role="tablist"] [role="tab"][data-state="active"] {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-top: none !important;
}

#fern-sidebar [role="tablist"] [role="tab"]::before,
#fern-sidebar [role="tablist"] [role="tab"]::after {
  display: none !important;
}

/* Hide tab icons on mobile sidebar */
#fern-sidebar [role="tablist"] [role="tab"] span:has(svg) {
  display: none !important;
}

/* Hide product switcher icon on mobile */
#fern-sidebar .fern-selection-item-icon {
  display: none !important;
}

/* Remove bottom padding from product switcher container on mobile */
#fern-sidebar .fern-header-switchers {
  padding-bottom: 8px !important;
}

/* Product switcher — match Figma: rounded-lg, 1px outline */
#fern-sidebar .fern-product-selector .product-dropdown-trigger {
  border-radius: 8px !important;
  outline: 1px solid var(--contrast-200) !important;
  outline-offset: -1px !important;
  padding: 8px 10px !important;
}

#fern-sidebar .fern-product-selector .product-dropdown-trigger:hover {
  background: var(--contrast-100) !important;
}
#fern-sidebar .fern-product-selector .product-dropdown-trigger:focus-visible {
  background: var(--contrast-100) !important;
}

/* Dark mode — product switcher outline */
.dark #fern-sidebar .fern-product-selector .product-dropdown-trigger {
  outline: 1px solid var(--contrast-200) !important;
}

/* Dark mode — product switcher container bottom border */
.dark #fern-sidebar .fern-product-selector {
  border-bottom-color: rgba(255, 255, 255, 0.18) !important;
}

.dark #fern-sidebar div:has(> .fern-product-selector) {
  border-bottom-color: rgba(255, 255, 255, 0.18) !important;
}

/* Hide product switcher divider line (bg-border-concealed) */
#fern-sidebar div[role="none"].bg-border-concealed {
  display: none !important;
}

/* Dark mode */
.dark #fern-sidebar [role="tablist"] {
  background: transparent !important;
  border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}

.dark #fern-sidebar [role="tablist"] [role="tab"] {
  color: #7b8793 !important;
}

.dark #fern-sidebar [role="tablist"] [role="tab"][data-state="active"] {
  color: var(--accent-a11) !important;
}

/* Dark mode — brighten all sidebar border/divider colors */
.dark #fern-sidebar {
  --border-default: rgba(255, 255, 255, 0.15) !important;
  --border-concealed: rgba(255, 255, 255, 0.1) !important;
}

.dark #fern-sidebar * {
  border-color: rgba(255, 255, 255, 0.15);
}

/* ===== Sidebar Navigation Links ===== */

/* Default sidebar link — indented under section headings */
.fern-sidebar-link {
  min-height: 32px !important;
  padding: 6px 6px 6px 8px !important;
  border-radius: 8px !important;
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  color: var(--contrast-500) !important;
  background: transparent !important;
  gap: 8px !important;
}

/* Sidebar chevron — point right when collapsed, down when open */
/* Target only the chevron SVG (last child), not file/folder icons */
.fern-sidebar-link > svg:last-child:not(.lucide-external-link),
.fern-sidebar-heading > svg:last-child:not(.lucide-external-link) {
  rotate: -90deg !important;
  transition: rotate 0.2s ease !important;
}

/* When expanded, point down */
[data-state="open"] > .fern-sidebar-link > svg:last-child:not(.lucide-external-link),
[data-state="open"] > .fern-sidebar-heading > svg:last-child:not(.lucide-external-link),
.fern-sidebar-link[aria-expanded="true"] > svg:last-child:not(.lucide-external-link),
.fern-sidebar-heading[aria-expanded="true"] > svg:last-child:not(.lucide-external-link) {
  rotate: 0deg !important;
}

/* Sidebar link hover */
.fern-sidebar-link:hover {
  color: var(--contrast-500) !important;
  background-color: var(--contrast-100) !important;
}
.fern-sidebar-link:focus-visible {
  color: var(--contrast-500) !important;
  background-color: var(--contrast-100) !important;
}

/* Active sidebar link */
.fern-sidebar-link[data-state="active"] {
  color: var(--accent) !important;
  background: transparent !important;
  font-weight: 500 !important;
}

/* Sidebar link title */
.fern-sidebar-link-title {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: var(--font-size-sm) !important;
  line-height: 20px !important;
}

/*
 * Sections that have their own overview page render as a sidebar link instead
 * of a heading, and Fern marks them with `font-semibold`. Restore the heading
 * weight and size here so they don't read as ordinary pages under the base link
 * rules above (which force weight 500 and 13px).
 */
.fern-sidebar-link.font-semibold,
.fern-sidebar-link.font-semibold .fern-sidebar-link-title,
.fern-sidebar-link.font-semibold .fern-sidebar-link-title-inner {
  font-weight: 700 !important;
  font-size: 0.875rem !important;
}

#fern-sidebar[data-viewport="mobile"] .fern-sidebar-link {
  height: 36px !important;
}

#fern-sidebar[data-viewport="mobile"] .fern-sidebar-link-title {
  font-size: var(--font-size-base) !important;
}

/* Sidebar section headings */
.fern-sidebar-heading {
  padding-left: 8px !important;
  margin-bottom: 0px !important;
}

.fern-sidebar-heading-content {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  line-height: 20px !important;
  color: var(--foreground) !important;
}

#fern-sidebar[data-viewport="mobile"] .fern-sidebar-heading {
  min-height: 40px !important;
}

#fern-sidebar[data-viewport="mobile"] .fern-sidebar-heading-content {
  font-size: var(--font-size-base) !important;
}

/* Sidebar group spacing */
.fern-sidebar-group {
  gap: 8px !important;
  margin-bottom: 12px !important;
}

/*
 * Close the visual gap between two sibling `api:` blocks rendered inside the
 * same section. The blocks render as two adjacent <li>s each wrapping an
 * <ul.fern-sidebar-group>. The default 8px gap and 12px margin-bottom create
 * a visible seam. Selector matches whenever an outer sidebar group has at
 * least one direct child wrapping a nested sidebar group, so unrelated nav
 * structures are untouched.
 */
ul.fern-sidebar-group:has(> li > ul.fern-sidebar-group) {
  gap: 0 !important;
}

ul.fern-sidebar-group:has(> li > ul.fern-sidebar-group) > li > ul.fern-sidebar-group {
  margin-bottom: 0 !important;
}

.fern-sidebar-group:not([class*="fern-sidebar-group-level-"])
  > li:not(:last-child) {
  margin-bottom: 12px !important;
}

@media not all and (min-width: 64rem) {

  #fern-sidebar .fern-scroll-area-viewport {
    padding-top: 0px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .fern-sidebar-group {
    margin-inline: 0 !important;
  }

  /* Only remove padding on top-level sidebar group */
  .fern-sidebar-group:not(.fern-sidebar-group-level-1) {
    padding-left: 0 !important;
  }

  /* Keep level-1 links slightly indented under headings */
  .fern-sidebar-link.fern-sidebar-level-1 {
    padding-left: 8px !important;
  }

  /* Nested links (level 2+) get more indentation */
  .fern-sidebar-link.fern-sidebar-level-2 {
    padding-left: 16px !important;
  }

}

.fern-collapsible {
  border-color: var(--contrast-200) !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  margin-left: 8px !important;
}

/* Dark mode — sidebar headings */
.dark .fern-sidebar-heading-content {
  color: #ffffff !important;
}

/* Dark mode — sidebar links */
.dark .fern-sidebar-link {
  color: var(--grayscale-a11) !important;
}

.dark .fern-sidebar-link:hover {
  color: var(--grayscale-a12) !important;
  background-color: var(--grayscale-a3) !important;
}
.dark .fern-sidebar-link:focus-visible {
  color: var(--grayscale-a12) !important;
  background-color: var(--grayscale-a3) !important;
}

.dark .fern-sidebar-link[data-state="active"] {
  color: var(--accent-a11) !important;
  background: transparent !important;
}

/* ===== Inline Code Styling ===== */

/* display: inline (not inline-flex) so long code can wrap across lines in
   narrow containers (e.g. the Ask AI panel) without the fixed-height chip
   overlapping adjacent text; box-decoration-break: clone rounds each
   wrapped fragment. Matches the makeswift repo's rule (makeswift#111). */
:not(pre) > code {
  padding: 1px 4px !important;
  margin: 0 0.15em !important;
  background: var(--contrast-100) !important;
  border-radius: 6px !important;
  display: inline !important;
  box-shadow: none !important;
  border: var(--outline) !important;
  color: var(--contrast-500) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  font-family: "Geist Mono", monospace !important;
  line-height: 20px !important;
  vertical-align: middle !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  box-decoration-break: clone !important;
  -webkit-box-decoration-break: clone !important;
}

/* Dark mode — inline code */
.dark :not(pre) > code {
  background: #14171e !important;
  border: 1px solid #363d52 !important;
  color: #e4e8ee !important;
}

/* ===== Code Block Styling ===== */

/* Code block container */
.fern-code,
.not-prose.bg-card-background {
  background: var(--contrast-100) !important;
  border-radius: 12px !important;
  border: 1px solid var(--contrast-200) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.fern-code:after {
  box-shadow: none !important;
}

/* Code block content/pre */
.fern-code .fern-code-content,
.fern-code pre {
  border-radius: 12px !important;
  outline: 1px solid var(--contrast-200) !important;
  font-family: "Geist Mono", "SF Mono", "Fira Code", monospace !important;
}

.fern-code .code-block {
  background: var(--contrast-50) !important;
}

/* Light mode — improve comment contrast in code blocks */
:root:not(.dark) span[style*="--shiki-dark: #8a8a8a"] {
  color: #57606a !important;
}

/* Code block header — no border separator */
.fern-code-block-header,
.fern-code-header {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding-bottom: 1px !important;
}

.fern-code-block-header-inner,
.fern-code-header-inner {
  box-shadow: none !important;
}

.fern-code-group-tabs {
  gap: 8px !important;
  padding-left: 8px !important;
}

.fern-code-group-tabs button {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.fern-code-group-tabs button:hover .fern-code-group-tab-label {
  background: var(--contrast-200) !important;
}
.fern-code-group-tabs button:focus-within .fern-code-group-tab-label {
  background: var(--contrast-200) !important;
}

/* Hide line numbers */
.code-block-line-gutter {
  display: none !important;
}

/* Preserve blank lines in code blocks when gutter is hidden */
.code-block-line-content .line:empty::after {
  content: "\a0";
}

/* Hide expand button (top-right overlay) */
.fern-code-block .fern-expand-button {
  display: none !important;
}

/* Code block title/label */
.fern-code-label,
.fern-code-block-title-label {
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: var(--font-size-sm) !important;
  color: var(--foreground) !important;
}

/* Copy button */
.fern-copy-button {
  width: 28px !important;
  height: 28px !important;
  background: var(--background) !important;
  border-radius: 6px !important;
  outline: var(--outline) !important;
  box-shadow: var(--shadow-1) !important;
  backdrop-filter: none !important;
  transition: all 0.15s linear !important;
  /* cursor: pointer !important; */
}

.fern-copy-button svg,
.fern-copy-button path {
  color: var(--contrast-400) !important;
  stroke: var(--contrast-400) !important;
  transition: all 0.15s linear !important;
}

.fern-copy-button:hover {
  outline: var(--outline-hover) !important;
}
.fern-copy-button:focus-visible {
  outline: var(--outline-hover) !important;
}
.fern-copy-button:hover svg,
.fern-copy-button:hover path {
  color: var(--foreground) !important;
  stroke: var(--foreground) !important;
}
.fern-copy-button:focus-within svg,
.fern-copy-button:focus-within path {
  color: var(--foreground) !important;
  stroke: var(--foreground) !important;
}

/* Expand/show more button */
.fern-expand-button {
  background: var(--background) !important;
  border-radius: 8px !important;
  outline: var(--outline) !important;
  box-shadow: var(--shadow-1) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  color: var(--contrast-500) !important;
  backdrop-filter: none !important;
}

/* Inline code (single-line code blocks without header) */
.not-prose.bg-card-background:not(.fern-code-block) {
  padding: 4px 8px !important;
  background: var(--contrast-100) !important;
  border-radius: 12px !important;
  min-height: 48px !important;
}

/* Dark mode — code blocks */
.dark .fern-code-block,
.dark .not-prose.bg-card-background {
  background: var(--bc-bg-secondary) !important;
}

.dark .fern-code-block .fern-code-content,
.dark .fern-code-block pre,
.dark .not-prose.bg-card-background pre {
  background: var(--bc-bg-secondary) !important;
}

.dark .fern-code-block-header,
.dark .fern-code-header {
  background: var(--bc-bg-secondary) !important;
}

.dark .fern-copy-button {
  background: var(--contrast-100) !important;
}

.dark .fern-expand-button {
  background: var(--bc-bg-card) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ===== Frame Component Styling ===== */

/* Frame container — matches Card border treatment site-wide
 * (1px solid var(--contrast-200) in both modes). Applies to every <Frame> on
 * the site, regardless of contents (images, videos, custom embeds). The
 * fern-explorer guard keeps the API Explorer's own figures untouched. */
figure.fern-card:not([class*="fern-explorer"]) {
  padding: 4px !important;
  background: var(--contrast-100) !important;
  border-radius: 16px !important;
  border: 1px solid var(--contrast-200) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  gap: 8px !important;
  transition: all 0.15s linear !important;
}

figure.fern-card:not([class*="fern-explorer"]):hover {
  border: 1px solid var(--contrast-200) !important;
}
figure.fern-card:not([class*="fern-explorer"]):focus-visible {
  border: 1px solid var(--contrast-200) !important;
}

/* Frame image wrapper */
figure.fern-card > div {
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Frame image */
figure.fern-card > div {
  box-shadow: none !important;
}

figure.fern-card > div p {
  margin: 0 !important;
}

figure.fern-card img,
figure.fern-card video {
  border-radius: 12px !important;
  border: 1px solid var(--contrast-200) !important;
  width: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Frame caption */
figure.fern-card figcaption {
  font-weight: 400 !important;
  font-size: var(--font-size-sm) !important;
  line-height: 20px !important;
  color: var(--contrast-500) !important;
  text-align: center !important;
  padding: 12px 12px 8px 12px !important;
  margin-top: 0 !important;
}

/* Dark mode — frame */
.dark figure.fern-card:not([class*="fern-explorer"]) {
  background: var(--contrast-100) !important;
  border: 1px solid var(--contrast-200) !important;
}

.dark figure.fern-card:not([class*="fern-explorer"]):hover {
  border: 1px solid var(--contrast-200) !important;
}
.dark figure.fern-card:not([class*="fern-explorer"]):focus-visible {
  border: 1px solid var(--contrast-200) !important;
}

@supports (color: color-mix(in lab, red, red)) {

  .custom-backdrop [data-rmiz-modal-overlay="visible"] {
    background-color: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px) !important;
  }

}

/* ===== Card Styling ===== */

.fern-card:not(figure):not(.fern-accordion):not([class*="fern-explorer"]) {
  min-height: 140px !important;
  padding: 24px !important;
  background-color: var(--background) !important;
  border-radius: 16px !important;
  border: 1px solid var(--contrast-200) !important;
  outline: none !important;
  box-shadow: none !important;
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 24px !important;
  overflow: hidden !important;
}

.fern-card:not(figure):not(.fern-accordion):not([class*="fern-explorer"]):hover {
  background-color: var(--contrast-100) !important;
  border: 1px solid var(--contrast-200) !important;
  outline: none !important;
  transition: background-color 0.15s linear !important;
}
.fern-card:not(figure):not(.fern-accordion):not([class*="fern-explorer"]):focus-visible {
  background-color: var(--contrast-100) !important;
  border: 1px solid var(--contrast-200) !important;
  outline: none !important;
  transition: background-color 0.15s linear !important;
}

.fern-card:not(figure):not(.fern-accordion):not([class*="fern-explorer"]) > div {
  width: 100% !important;
  height: 100% !important;
  justify-content: flex-start !important;
}

.fern-card:not(figure):not(.fern-accordion):not([class*="fern-explorer"]) .fern-card-title {
  font-weight: 600 !important;
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  line-height: 28px !important;
  letter-spacing: -0.01em !important;
  color: var(--foreground) !important;
}

.fern-card:not(figure):not(.fern-accordion):not([class*="fern-explorer"]) .fern-card-description,
.fern-card:not(figure):not(.fern-accordion):not([class*="fern-explorer"]) p {
  font-weight: 400 !important;
  line-height: 24px !important;
  color: var(--contrast-500) !important;
}

.fern-card:not(figure):not(.fern-accordion):not([class*="fern-explorer"]) .card-icon {
  margin-block-end: 0 !important;
  width: 24px !important;
  height: 24px !important;
  color: var(--accent) !important;
}

.dark .fern-card:not(figure):not(.fern-accordion):not([class*="fern-explorer"]) .card-icon {
  color: var(--accent-a11) !important;
}

/* Gap between icon and card content */
.fern-card:not(figure):not(.fern-accordion):not([class*="fern-explorer"]) .flex.flex-col {
  gap: 24px !important;
}

/* Dark mode cards */
.dark .fern-card:not(figure):not(.fern-accordion):not([class*="fern-explorer"]) {
  background: var(--contrast-50) !important;
  /* Excluding figures from the global border rule above raised that rule's
   * specificity over the light card rule, so in dark mode the global #ffffff
   * border would win. Re-assert the subtle card border here (this selector is
   * more specific than the global rule). */
  border-color: var(--contrast-200) !important;
}

.dark .fern-card:not(figure):not(.fern-accordion):not([class*="fern-explorer"]):hover {
  background: var(--contrast-100) !important;
  /* Re-assert the card border on hover: the global "pink on hover" rule is
   * more specific in dark mode, so without this the border would switch to
   * the accent color on hover. Keep it matching the resting border. */
  border-color: var(--contrast-200) !important;
}
.dark .fern-card:not(figure):not(.fern-accordion):not([class*="fern-explorer"]):focus-visible {
  background: var(--contrast-100) !important;
  /* Re-assert the card border on hover: the global "pink on hover" rule is
   * more specific in dark mode, so without this the border would switch to
   * the accent color on hover. Keep it matching the resting border. */
  border-color: var(--contrast-200) !important;
}

.dark .fern-card:not(figure):not(.fern-accordion):not([class*="fern-explorer"]) .fern-card-description,
.dark .fern-card:not(figure):not(.fern-accordion):not([class*="fern-explorer"]) p {
  color: var(--body-text) !important;
}

/* ===== Callout Styling ===== */

/* Base callout styles */
.fern-callout {
  min-height: 56px !important;
  padding: 24px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(21, 23, 30, 0.1) !important;
  gap: 16px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: flex-start !important;
}

.dark .fern-callout {
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.fern-callout .text-sm {
  margin: 0 !important;
}

.fern-callout p:last-child {
  margin-bottom: 0 !important;
}

/* Remove inline baseline gap on images that are the last element in a callout */
.fern-callout p:last-child:has(img) {
  line-height: 0;
  font-size: 0;
}

.fern-callout h5 {
  margin-bottom: 8px !important;
}

/*
 * Hide the empty title slot and reset the following element's top margin so
 * title-less callouts align with the icon (matches Fern's documented default).
 * Fern renders the title as `div.font-heading`; older versions used `h5`, so
 * both are targeted for forward/backward compatibility.
 */
.fern-callout h5:empty,
.fern-callout .font-heading:empty {
  display: none !important;
}

.fern-callout h5:empty + *,
.fern-callout .font-heading:empty + * {
  margin-top: 0 !important;
}

.fern-callout ul,
.fern-callout ol {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
}

.fern-callout .text-sm > :first-child {
  margin-top: 0 !important;
}

.fern-callout .text-sm > :last-child {
  margin-bottom: 0 !important;
}

.fern-callout .text-sm::before,
.fern-callout .text-sm::after {
  display: none !important;
}

.fern-callout .text-sm {
  font-weight: 400 !important;
  line-height: 20px !important;
}

/* Info callout */
.fern-callout[data-intent="info"] {
  background: var(--contrast-100) !important;
}

.fern-callout[data-intent="info"] svg {
  color: var(--contrast-400) !important;
}

.fern-callout[data-intent="info"] .text-sm {
  color: var(--contrast-500) !important;
}

/* Note callout */
.fern-callout[data-intent="note"] {
  background: #ede9fe !important;
}

.fern-callout[data-intent="note"] svg {
  color: #6058ff !important;
}

.fern-callout[data-intent="note"] .text-sm {
  color: #312e81 !important;
}

/* Warning callout */
.fern-callout[data-intent="warning"] {
  background: #fefce8 !important;
}

.fern-callout[data-intent="warning"] svg {
  color: #fcd34d !important;
}

.fern-callout[data-intent="warning"] .text-sm {
  color: #6a4504 !important;
}

/* Error callout */
.fern-callout[data-intent="error"] {
  background: #fff1f2 !important;
}

.fern-callout[data-intent="error"] svg {
  color: #ec4899 !important;
}

.fern-callout[data-intent="error"] .text-sm {
  color: #831843 !important;
}

/* Success callout */
.fern-callout[data-intent="success"] {
  background: #ecfdf5 !important;
}

.fern-callout[data-intent="success"] svg {
  color: #10b981 !important;
}

.fern-callout[data-intent="success"] .text-sm {
  color: #064e3b !important;
}

/* Launch callout */
.fern-callout[data-intent="launch"] {
  background: #ecfdf5 !important;
}

.fern-callout[data-intent="launch"] svg {
  color: #10b981 !important;
}

.fern-callout[data-intent="launch"] .text-sm {
  color: #064e3b !important;
}

/* Dark mode — Non-info callouts should look the same as light mode */
.dark .fern-callout[data-intent="note"],
.dark .fern-callout[data-intent="warning"],
.dark .fern-callout[data-intent="error"],
.dark .fern-callout[data-intent="success"],
.dark .fern-callout[data-intent="launch"] {
  border: 0px !important;
}

.dark .fern-callout[data-intent="note"] {
  background: #1a1527 !important;
  outline: 1px solid #2e2452 !important;
}

.dark .fern-callout[data-intent="note"] svg {
  color: #a78bfa !important;
}

.dark .fern-callout[data-intent="note"] .text-sm {
  color: #c4b5fd !important;
}

.dark .fern-callout[data-intent="warning"] {
  background: #1c1a0e !important;
  outline: 1px solid #3d3516 !important;
}

.dark .fern-callout[data-intent="warning"] svg {
  color: #f59e0b !important;
}

.dark .fern-callout[data-intent="warning"] .text-sm {
  color: #fcd34d !important;
}

.dark .fern-callout[data-intent="error"] {
  background: #1f1318 !important;
  outline: 1px solid #3d1f2e !important;
}

.dark .fern-callout[data-intent="error"] svg {
  color: #f472b6 !important;
}

.dark .fern-callout[data-intent="error"] .text-sm {
  color: #fda4af !important;
}

.dark .fern-callout[data-intent="success"] {
  background: #0f1a16 !important;
  outline: 1px solid #1a3329 !important;
}

.dark .fern-callout[data-intent="success"] svg {
  color: #34d399 !important;
}

.dark .fern-callout[data-intent="success"] .text-sm {
  color: #6ee7b7 !important;
}

.dark .fern-callout[data-intent="launch"] {
  background: #0f1a16 !important;
  outline: 1px solid #1a3329 !important;
}

.dark .fern-callout[data-intent="launch"] svg {
  color: #34d399 !important;
}

.dark .fern-callout[data-intent="launch"] .text-sm {
  color: #6ee7b7 !important;
}

/* ===== Accordion Styling ===== */

/* Accordion container */
.fern-accordion.fern-card,
.fern-accordion.fern-card:hover {
  background: var(--background) !important;
  border-radius: 16px !important;
  outline: 1px solid var(--contrast-200) !important;
  outline-offset: -1px !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.fern-accordion.fern-card:focus-visible {
  background: var(--background) !important;
  border-radius: 16px !important;
  outline: 1px solid var(--contrast-200) !important;
  outline-offset: -1px !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* Accordion item */
.fern-accordion-item {
  padding: 16px !important;
  border-bottom: 1px solid var(--contrast-200) !important;
}

.fern-accordion-item:last-child {
  border-bottom: none !important;
}

/* Accordion trigger */
.fern-accordion-trigger {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.fern-accordion-trigger-title {
  font-size: 0.9375rem !important;
}

.fern-accordion-trigger::-webkit-details-marker,
.fern-accordion-trigger::marker {
  display: none !important;
}

.fern-accordion-trigger:hover,
.fern-accordion-trigger-title:hover {
  color: var(--text-default) !important;
  background: transparent !important;
  text-decoration: none !important;
  opacity: 1 !important;
}
.fern-accordion-trigger:focus-visible,
.fern-accordion-trigger-title:focus-visible {
  color: var(--text-default) !important;
  background: transparent !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

/* Accordion trigger arrow */
.fern-accordion-trigger-arrow {
  width: 20px !important;
  height: 20px !important;
  color: var(--text-default) !important;
  transition: transform 0.2s ease !important;
}

/* Arrow rotates down when open */
.fern-accordion-item[data-state="open"] .fern-accordion-trigger-arrow,
.fern-accordion-item[open] .fern-accordion-trigger-arrow,
.fern-accordion-trigger[data-state="open"] .fern-accordion-trigger-arrow,
.fern-accordion-trigger[aria-expanded="true"] .fern-accordion-trigger-arrow {
  transform: rotate(0deg) !important;
}

/* Accordion title */
.fern-accordion-trigger-title {
  font-weight: 600 !important;
  line-height: 24px !important;
  color: var(--text-default) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Accordion content */
.fern-accordion-item [role="region"] {
  margin: 0 !important;
  margin-top: 12px !important;
  padding: 0 !important;
}

.fern-accordion-item [role="region"] > .px-5 {
  padding-left: 28px !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 4px !important;
}

.fern-accordion-item [role="region"] p {
  font-weight: 400 !important;
  line-height: 24px !important;
  color: var(--contrast-500) !important;
  margin: 0 0 0.75em 0 !important;
}

.fern-accordion-item [role="region"] p:last-child {
  margin-bottom: 0 !important;
}

.dark .fern-accordion-item [role="region"] p {
  color: var(--body-text) !important;
}

/* ===== Steps Styling ===== */

.fern-steps {
  padding-left: 0px !important;
  border: 0px !important;
}

.fern-step {
  padding-left: 32px !important;
  padding-bottom: 4px !important;
}

.fern-step:not(:last-child) {
  border-left: 1px solid var(--contrast-200) !important;
}

/* Position anchor and set 20px gap between circle and content */
.fern-step .fern-anchor {
  margin-left: -50px !important;
}

/* Step number circle */
.fern-step .fern-anchor-icon {
  width: 36px !important;
  height: 36px !important;
  padding-bottom: 0px !important;
  background: var(--background) !important;
  border-radius: 200px !important;
  border: 1px solid var(--contrast-200) !important;
  box-shadow: var(--shadow-1) !important;
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
  margin-top: 4px !important;
}

.fern-step .fern-anchor-icon span {
  font-weight: 600 !important;
  line-height: 24px !important;
  color: var(--foreground) !important;
  text-align: center !important;
}

/* Step content spacing — 6px top padding to align with circle, 20px gap between blocks */
.fern-step h3 {
  font-weight: 600 !important;
  line-height: 24px !important;
  font-family: var(--font-display) !important;
  font-size: var(--font-size-base) !important;
  color: var(--foreground) !important;
  margin-bottom: 8px !important;
  margin-top: 0px !important;
  padding-top: 6px !important;
}

.fern-step p {
  font-weight: 400 !important;
  line-height: 24px !important;
  font-size: var(--font-size-base) !important;
  color: var(--contrast-500) !important;
  margin-bottom: 20px !important;
}

.dark .fern-step p {
  color: var(--body-text) !important;
}

/* Dark mode — step number circle */
.dark .fern-step .fern-anchor-icon {
  background: var(--contrast-100) !important;
}

/* ===== Header Search Bar Styling ===== */

#fern-search-button.fern-header-search-bar {
  height: 36px !important;
  padding: 8px !important;
  background: var(--contrast-100) !important;
  border-radius: 8px !important;
  gap: 8px !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 500 !important;
  line-height: 20.8px !important;
  color: var(--contrast-400) !important;
  /* Remove ring border */
  --tw-ring-shadow: none !important;
  box-shadow: none !important;
}

/* Keyboard shortcut badge */
#fern-search-button .fern-kbd {
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 4px 0 5px !important;
  background: var(--background) !important;
  border-radius: 6px !important;
  outline: var(--outline) !important;
  box-shadow: var(--shadow-1) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 18px !important;
  letter-spacing: 0px !important;
  color: var(--contrast-400) !important;
}

/* Dark mode — search bar */
.dark #fern-search-button.fern-header-search-bar {
  background: var(--contrast-100) !important;
  color: var(--contrast-400) !important;
}

.dark #fern-search-button .fern-kbd {
  background: var(--contrast-100) !important;
  outline: var(--outline) !important;
  box-shadow: var(--shadow-1) !important;
  color: var(--contrast-400) !important;
}

/* ===== Ask AI Button Styling ===== */

#fern-ask-ai-button.outlined {
  --tw-ring-shadow: none !important;
  box-shadow: none !important;
  outline: 0 !important;
}

#fern-ask-ai-button {
  height: 32px !important;
  margin-top: 2px !important;
  padding: 0 6px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: none !important;
}

#fern-ask-ai-button:hover {
  background: var(--contrast-100) !important;
}
#fern-ask-ai-button:focus-visible {
  background: var(--contrast-100) !important;
}

#fern-ask-ai-button .fern-button-text {
  font-family: var(--font-display) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  color: var(--foreground) !important;
}

/* Dark mode — Ask AI button */
.dark #fern-ask-ai-button .fern-button-text {
  color: #ffffff !important;
}

/* ===== Mobile Header Layout ===== */
/* Below Fern's `lg` breakpoint (64rem) the header row holds logo + chevron,
 * the search bar, Ask AI, and the hamburger. The logo site-switcher chevron
 * adds width Fern doesn't budget for, so on small phones (~320px) the
 * hamburger was pushed to or past the right edge. Collapse the two
 * Fern-native controls to icons and stop the hamburger from shrinking. */
@media not all and (min-width: 64rem) {

  /* Search — icon only. The label is a bare text node inside the button (no
   * wrapping element), so it's hidden via font-size. The icon is sized in rem
   * (Tailwind size-4) so it's unaffected. Button keeps its aria-label="Search". */
  #fern-search-button.fern-header-search-bar {
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 0 !important;
    justify-content: center !important;
    font-size: 0 !important;
    gap: 0 !important;
  }

  #fern-search-button .fern-kbd,
  #fern-search-button > div {
    display: none !important;
  }

  /* Ask AI — icon only. The button has no aria-label, so keep the text in the
   * accessibility tree with a visually-hidden pattern instead of display:none. */
  #fern-ask-ai-button .fern-button-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  #fern-ask-ai-button {
    position: relative !important;
    padding: 0 8px !important;
  }

  /* Push the compact search + Ask AI controls toward the hamburger instead of
   * leaving a gap in the middle of the row. */
  #fern-header .fern-header-search-bar {
    margin-left: auto !important;
  }

  /* Hamburger must never be squeezed off-screen. */
  .fern-header-mobile-menu-button {
    flex-shrink: 0 !important;
  }

}

/* Mobile menu button styling */
/* .fern-header-mobile-menu-button button:hover {
  background: var(--contrast-100) !important;
} */

.fern-header-mobile-menu-button button svg {
  width: 20px !important;
  height: 20px !important;
}

/* Full width for landing page */
.bc-landing-page {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
}

/* ===== Header Nav Buttons ===== */

/* Header nav buttons - Sign In (minimal/ghost) */
.fern-header a.fern-button[data-variant="minimal"],
.fern-header .fern-navbar-link[data-variant="minimal"] {
  height: 32px !important;
  padding: 0 6px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: none !important;
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
}

/* Header nav buttons - Sign Up (filled/solid) */
.fern-header a.fern-button[data-variant="filled"],
.fern-header .fern-navbar-link[data-variant="filled"] {
  height: 32px !important;
  padding: 0 6px !important;
  box-shadow:
    0px 2px 6px rgba(21, 23, 30, 0.1),
    0px 1px 2px rgba(21, 23, 30, 0.1) !important;
  border-radius: 8px !important;
  border: none !important;
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
}

.fern-header-navbar-links button:hover {
  background: var(--contrast-100) !important;
  color: var(--contrast-500) !important;
}
.fern-header-navbar-links button:focus-visible {
  background: var(--contrast-100) !important;
  color: var(--contrast-500) !important;
}

/* Dark mode - Sign In button */
.dark .fern-header a.fern-button[data-variant="minimal"],
.dark .fern-header .fern-navbar-link[data-variant="minimal"] {
  color: #ffffff !important;
}

/* Dark mode - Sign Up button */
.dark .fern-header a.fern-button[data-variant="filled"],
.dark .fern-header .fern-navbar-link[data-variant="filled"] {
  box-shadow: var(--shadow-1) !important;
}

/* Default button styling */

.fern-button {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}
.fern-button.normal {
  font-size: 13px !important;
}

.fern-button.filled,
.fern-button.outlined {
  box-shadow: var(--shadow-1) !important;
}

.fern-button.outlined {
  outline: var(--outline) !important;
}

.fern-button:not([disabled]).minimal[data-selected="true"],
.fern-button:not([disabled]).minimal[data-state="checked"],
.fern-button:not([disabled]).minimal[data-state="on"],
.fern-button:not([disabled]).minimal[data-state="open"],
.fern-button:not([disabled]).minimal[data-state="opening"] {
  background: var(--contrast-100) !important;
}

/* ===== Large Minimal Button ===== */

.fern-button.large.not-prose.minimal {
  height: 44px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: none !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.fern-button.large.not-prose.minimal .fern-button-text {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  padding: 0 6px !important;
  padding-bottom: 1px !important;
}

.fern-button.large.not-prose.minimal svg {
  width: 20px !important;
  height: 20px !important;
}

/* ===== Normal Minimal Button ===== */

.fern-button.normal.not-prose.minimal {
  height: 40px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: none !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.fern-button.normal.not-prose.minimal .fern-button-text {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  padding: 0 4px !important;
  padding-bottom: 1px !important;
}

.fern-button.normal.not-prose.minimal svg {
  width: 20px !important;
  height: 20px !important;
}

/* ===== Small Minimal Button ===== */

.fern-button.small.not-prose.minimal {
  height: 32px !important;
  padding: 0 6px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: none !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.fern-button.small.not-prose.minimal .fern-button-text {
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  padding: 0 4px !important;
  padding-bottom: 1px !important;
}

.fern-button.small.not-prose.minimal svg {
  width: 16px !important;
  height: 16px !important;
}

/* ===== Minimal Button Hover States ===== */

.fern-button:not([disabled]).minimal:hover {
  background: var(--contrast-100) !important;
}
.fern-button:not([disabled]).minimal:focus-visible {
  background: var(--contrast-100) !important;
}

.dark .fern-button.not-prose.minimal:hover {
  background: var(--contrast-100) !important;
}
.dark .fern-button.not-prose.minimal:focus-visible {
  background: var(--contrast-100) !important;
}

/* ===== Announcement Banner ===== */

#fern-announcement {
  margin-bottom: 0.5rem !important;
}

#fern-announcement > div {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

#fern-announcement .fern-button.minimal:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}
#fern-announcement .fern-button.minimal:focus-visible {
  background: rgba(255, 255, 255, 0.2) !important;
}

#fern-announcement .fern-button.minimal svg {
  color: var(--accent-contrast) !important;
}

/* ===== Large Outlined Button ===== */

.fern-button.large.not-prose.outlined {
  height: 44px !important;
  padding: 0 8px !important;
  box-shadow:
    0px 2px 6px rgba(21, 23, 30, 0.05),
    0px 1px 2px rgba(21, 23, 30, 0.05) !important;
  border-radius: 8px !important;
  outline: 1px solid rgba(21, 23, 30, 0.15) !important;
  outline-offset: -1px !important;
  border: none !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.fern-button.large.not-prose.outlined .fern-button-text {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  padding: 0 6px !important;
  padding-bottom: 1px !important;
}

.fern-button.large.not-prose.outlined svg {
  width: 20px !important;
  height: 20px !important;
}

.dark .fern-button.large.not-prose.outlined {
  outline: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow:
    0px 2px 6px rgba(0, 0, 0, 0.1),
    0px 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.dark .fern-button.large.not-prose.outlined .fern-button-text {
  color: #ffffff !important;
}

.fern-button.large.not-prose.outlined:hover {
  background: #f8f9fb !important;
}
.fern-button.large.not-prose.outlined:focus-visible {
  background: #f8f9fb !important;
}

.dark .fern-button.large.not-prose.outlined:hover {
  background: var(--grayscale-a3) !important;
}
.dark .fern-button.large.not-prose.outlined:focus-visible {
  background: var(--grayscale-a3) !important;
}

/* ===== Normal Outlined Button ===== */

.fern-button.normal.not-prose.outlined {
  height: 40px !important;
  padding: 0 10px !important;
  box-shadow:
    0px 2px 6px rgba(21, 23, 30, 0.05),
    0px 1px 2px rgba(21, 23, 30, 0.05) !important;
  border-radius: 8px !important;
  outline: 1px solid var(--foreground/15%) !important;
  outline-offset: -1px !important;
  border: none !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.fern-button.normal.not-prose.outlined .fern-button-text {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  padding: 0 4px !important;
  padding-bottom: 1px !important;
}

.fern-button.normal.not-prose.outlined svg {
  width: 20px !important;
  height: 20px !important;
}

.dark .fern-button.normal.not-prose.outlined {
  outline: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow:
    0px 2px 6px rgba(0, 0, 0, 0.1),
    0px 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.dark .fern-button.normal.not-prose.outlined .fern-button-text {
  color: #ffffff !important;
}

.fern-button.normal.not-prose.outlined:hover {
  background: #f8f9fb !important;
}
.fern-button.normal.not-prose.outlined:focus-visible {
  background: #f8f9fb !important;
}

.dark .fern-button.normal.not-prose.outlined:hover {
  background: var(--grayscale-a3) !important;
}
.dark .fern-button.normal.not-prose.outlined:focus-visible {
  background: var(--grayscale-a3) !important;
}

/* ===== Small Outlined Button ===== */

.fern-button.small.not-prose.outlined {
  height: 32px !important;
  padding: 0 6px !important;
  box-shadow:
    0px 2px 6px rgba(21, 23, 30, 0.05),
    0px 1px 2px rgba(21, 23, 30, 0.05) !important;
  border-radius: 8px !important;
  outline: 1px solid var(--foreground/15%) !important;
  outline-offset: -1px !important;
  border: none !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.fern-button.small.not-prose.outlined .fern-button-text {
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  padding: 0 4px !important;
  padding-bottom: 1px !important;
}

.fern-button.small.not-prose.outlined svg {
  width: 16px !important;
  height: 16px !important;
}

.dark .fern-button.small.not-prose.outlined {
  outline: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow:
    0px 2px 6px rgba(0, 0, 0, 0.1),
    0px 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.dark .fern-button.small.not-prose.outlined .fern-button-text {
  color: #ffffff !important;
}

.fern-button.small.not-prose.outlined:hover {
  background: #f8f9fb !important;
}
.fern-button.small.not-prose.outlined:focus-visible {
  background: #f8f9fb !important;
}

.dark .fern-button.small.not-prose.outlined:hover {
  background: var(--grayscale-a3) !important;
}
.dark .fern-button.small.not-prose.outlined:focus-visible {
  background: var(--grayscale-a3) !important;
}

/* ===== Large Filled Button ===== */

.fern-button.large.not-prose.filled {
  height: 44px !important;
  padding: 0 8px !important;
  background: var(--brand, #0d52ff) !important;
  box-shadow:
    0px 2px 6px rgba(21, 23, 30, 0.1),
    0px 1px 2px rgba(21, 23, 30, 0.1) !important;
  border-radius: 8px !important;
  border: none !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.fern-button.large.not-prose.filled .fern-button-text {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  padding: 0 6px !important;
  padding-bottom: 1px !important;
}

.fern-button.large.not-prose.filled svg {
  width: 20px !important;
  height: 20px !important;
}

.fern-button.large.not-prose.filled:hover {
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%),
    var(--brand, #0d52ff) !important;
}
.fern-button.large.not-prose.filled:focus-visible {
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%),
    var(--brand, #0d52ff) !important;
}

/* ===== Normal Filled Button ===== */

.fern-button.normal.not-prose.filled {
  height: 40px !important;
  padding: 0 10px !important;
  background: var(--accent) !important;
  box-shadow:
    0px 2px 6px rgba(21, 23, 30, 0.1),
    0px 1px 2px rgba(21, 23, 30, 0.1) !important;
  border-radius: 8px !important;
  border: none !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.fern-button.normal.not-prose.filled .fern-button-text {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  padding: 0 4px !important;
  padding-bottom: 1px !important;
}

.fern-button.normal.not-prose.filled svg {
  width: 20px !important;
  height: 20px !important;
}

.fern-button.normal.not-prose.filled:hover {
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%),
    var(--brand, #0d52ff) !important;
}
.fern-button.normal.not-prose.filled:focus-visible {
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%),
    var(--brand, #0d52ff) !important;
}

/* ===== Small Filled Button ===== */

.fern-button.small.not-prose.filled {
  height: 32px !important;
  padding: 0 6px !important;
  background: var(--brand, #0d52ff) !important;
  box-shadow:
    0px 2px 6px rgba(21, 23, 30, 0.1),
    0px 1px 2px rgba(21, 23, 30, 0.1) !important;
  border-radius: 8px !important;
  border: none !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.fern-button.small.not-prose.filled .fern-button-text {
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  padding: 0 4px !important;
  padding-bottom: 1px !important;
}

.fern-button.small.not-prose.filled svg {
  width: 16px !important;
  height: 16px !important;
}

.fern-button.small.not-prose.filled:hover {
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%),
    var(--brand, #0d52ff) !important;
}
.fern-button.small.not-prose.filled:focus-visible {
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%),
    var(--brand, #0d52ff) !important;
}

/* ===== Badge Styling ===== */
.fern-docs-badge.large {
  height: 1.625rem !important;
}



.fern-docs-badge.outlined,
.fern-docs-badge.outlined-subtle {
  border: 1px solid var(--contrast-200) !important;
}

.fern-filter-badge-selected {
  background: var(--contrast-100) !important;
  filter: grayscale(0%) !important;
}
/* Note badge - Purple */
.fern-docs-badge[data-intent="note"] {
  background: #efeeff !important;
  color: #6058ff !important;
}

/* Warning badge - Yellow */
.fern-docs-badge[data-intent="warning"] {
  background: #fefbe0 !important;
  color: #c18027 !important;
}

/* Error badge - Red */
.fern-docs-badge[data-intent="error"] {
  background: #feefef !important;
  color: #d32b29 !important;
}

/* Info badge - Gray */
.fern-docs-badge[data-intent="info"] {
  background: var(--contrast-100) !important;
  color: var(--contrast-500) !important;
}

/* Info badge - Dark mode */
.dark .fern-docs-badge[data-intent="info"] {
  background: var(--contrast-200) !important;
  color: var(--contrast-500) !important;
}

/* Success badge - Green */
.fern-docs-badge[data-intent="success"] {
  background: #d4fbed !important;
  color: #016b82 !important;
}

/* Launch badge - Accent Blue */
.fern-docs-badge[data-intent="launch"] {
  background: #e7eeff !important;
  color: #0d52ff !important;
}

/* Tip badge - Green */
.fern-docs-badge[data-intent="tip"] {
  background: #d4fbed !important;
  color: #016b82 !important;
}

/* Check badge - Green */
.fern-docs-badge[data-intent="check"] {
  background: #d4fbed !important;
  color: #016b82 !important;
}

/* Note badge - Purple - Dark mode */
.dark .fern-docs-badge[data-intent="note"] {
  background: #2a2340 !important;
  color: #a78bfa !important;
}

/* Warning badge - Yellow - Dark mode */
.dark .fern-docs-badge[data-intent="warning"] {
  background: #2e2a16 !important;
  color: #fcd34d !important;
}

/* Error badge - Red - Dark mode */
.dark .fern-docs-badge[data-intent="error"] {
  background: #321c26 !important;
  color: #f472b6 !important;
}

/* Success badge - Green - Dark mode */
.dark .fern-docs-badge[data-intent="success"] {
  background: #1a2e26 !important;
  color: #34d399 !important;
}

/* Launch badge - Accent Blue - Dark mode */
.dark .fern-docs-badge[data-intent="launch"] {
  background: #1a2438 !important;
  color: #60a5fa !important;
}

/* Tip badge - Green - Dark mode */
.dark .fern-docs-badge[data-intent="tip"] {
  background: #1a2e26 !important;
  color: #34d399 !important;
}

/* Check badge - Green - Dark mode */
.dark .fern-docs-badge[data-intent="check"] {
  background: #1a2e26 !important;
  color: #34d399 !important;
}

/* Hide the default Fern badge (replaced by custom footer component).
   Fern >=5.121 injects an inline style block
   `html body #builtwithfern { display: flex !important }` (plus visibility,
   overflow, and position resets on the badge and its children) that outranks
   a plain `a#builtwithfern` selector on specificity. Prefix with `html body`
   and the element type so this rule wins. Legacy selectors kept alongside. */
html body a#builtwithfern,
html body a[id="builtwithfern"],
a#builtwithfern,
a[id="builtwithfern"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body a#builtwithfern *,
html body a[id="builtwithfern"] * {
  display: none !important;
}

/* Hide default clock icon on Learn tab changelog sidebar link */
.fern-sidebar-link[href*="learning-changelog"] > .lucide-history {
  display: none !important;
}

/* ===== Changelog styles ===== */
.fern-layout-changelog {
  padding: 0 !important;
}

@media (min-width: 64rem) {

  [data-pathname^="/developer/changelog"] #fern-toc,
  [data-pathname^="/developer/changelog"] #fern-sidebar,
  body:has(.fern-layout-changelog) aside#fern-toc,
  body:has(.fern-layout-changelog) #fern-sidebar,
  body:has(.fern-changelog-content) aside#fern-toc,
  body:has(.fern-changelog-content) #fern-sidebar {
    display: none !important;
  }

}

section.fern-changelog-content {
  margin: 0 !important;
}

section.fern-changelog-content > div {
  max-width: 100% !important;
}

section.fern-changelog-content header > div:first-child {
  margin-bottom: 32px !important;
}

section.fern-changelog-content header > div {
  overflow: visible !important;
}

section.fern-changelog-content header a svg + h1 {
  font-size: var(--font-size-base) !important;
}

.fern-button.outlined.fern-filter-dropdown-button {
  box-shadow: none !important;
}

.fern-button:not(
    [disabled]
  ).outlined.fern-filter-dropdown-button[data-state="open"],
.fern-button.outlined.fern-filter-dropdown-button:hover {
  background: var(--contrast-100) !important;
}
.fern-button.outlined.fern-filter-dropdown-button:focus-visible {
  background: var(--contrast-100) !important;
}

section.fern-changelog-content hr {
  display: none !important;
}

.fern-rss-feed-button {
  border-radius: 8px !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}

.fern-rss-feed-button:hover {
  background: var(--contrast-100) !important;
}
.fern-rss-feed-button:focus-visible {
  background: var(--contrast-100) !important;
}

.fern-layout-page > hr {
  display: none !important;
}

article.fern-changelog-content {
  margin: 0 !important;
  padding: 40px 0 48px !important;
  border-top: 1px solid var(--contrast-200) !important;
}

@media (max-width: 768px) {

  article.fern-changelog-content {
    padding: 24px 0 32px !important;
  }

}

article.fern-changelog-content:last-child {
  border-bottom: none !important;
}

.fern-changelog-content aside {
  width: 200px !important;
}

.fern-changelog-label {
  padding-top: 6px !important;
}

.fern-changelog-label a {
  background: transparent !important;
  padding: 0 4px !important;
  color: var(--contrast-500) !important;
  font-size: var(--font-size-base) !important;
  margin-bottom: 4px !important;
}

.fern-changelog-label .filter-row {
  gap: 4px !important;
}

/* ===== Powered By Footer ===== */
.fern-layout-footer-toolbar {
  margin-bottom: 48px !important;
}

.fern-layout-footer-toolbar:has(> div:empty) {
  display: none !important;
}

.fern-layout-footer-toolbar button {
  border: 1px solid var(--contrast-200) !important;
}

.fern-layout-footer-toolbar button:hover {
  background: var(--contrast-100) !important;
}
.fern-layout-footer-toolbar button:focus-visible {
  background: var(--contrast-100) !important;
}

.fern-layout-footer {
  margin: 0 auto !important; /* center within layout-guide, matches article above */
  width: 100% !important;
  max-width: 720px !important; /* matches docs.yml layout.content-width */
}

.fern-layout-footer > div:empty {
  display: none !important;
}

.fern-footer-nav a {
  padding: 0 !important;
  overflow: visible !important;
}

.fern-footer-nav a > span > span {
  display: block !important;
}

.fern-footer-next {
  margin-bottom: 24px !important;
}

/* Classic changelog pagination — strip the boxed "card" appearance so the
   footer nav renders as plain minimal links, matching the rest of the docs.
   The changelog's classic layout ignores `theme: footer-nav: minimal` and
   wraps the link in a bordered card (.fern-background-image); reset it here. */
.fern-layout-changelog nav.fern-footer-nav,
body:has(.fern-changelog-content) nav.fern-footer-nav {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 32px !important;
}

.fern-layout-changelog nav.fern-footer-nav a.fern-footer-next,
body:has(.fern-changelog-content) nav.fern-footer-nav a.fern-footer-next {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}

.fern-layout-changelog nav.fern-footer-nav a.fern-footer-next:hover,
body:has(.fern-changelog-content) nav.fern-footer-nav a.fern-footer-next:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.fern-layout-changelog nav.fern-footer-nav a.fern-footer-next:focus-visible,
body:has(.fern-changelog-content) nav.fern-footer-nav a.fern-footer-next:focus-visible {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Kill any pseudo-element border/background the card style draws */
.fern-layout-changelog nav.fern-footer-nav a.fern-footer-next::before,
.fern-layout-changelog nav.fern-footer-nav a.fern-footer-next::after,
body:has(.fern-changelog-content) nav.fern-footer-nav a.fern-footer-next::before,
body:has(.fern-changelog-content) nav.fern-footer-nav a.fern-footer-next::after {
  display: none !important;
}

/* Custom footer component — solid background + z-index so the footer
   cleanly covers the fixed sidebar border as it scrolls into view */
#fern-footer {
  position: relative;
  z-index: 40;
  background-color: var(--background);
}

.custom-footer {
  width: 100%;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  border-top: 1px solid var(--contrast-200);
}

.custom-footer-item {
  display: flex;
  align-items: center;
}

.custom-footer-fern svg {
  height: 18px;
  width: auto;
}

.custom-footer-divider {
  width: 1px;
  height: 16px;
  background: var(--contrast-100, rgba(21, 23, 30, 0.1));
}

.custom-footer-fern {
  display: flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: var(--contrast-400);
  transition: color 0.15s linear;
}

.custom-footer-fern:hover {
  color: var(--contrast-600);
}
.custom-footer-fern:focus-visible {
  color: var(--contrast-600);
}

.custom-footer-fern-text {
  font-size: 13px;
  line-height: 1;
}

.footer-svg-dark {
  display: none;
  opacity: 0.5;
  transition: opacity 0.15s linear;
}

.footer-svg-dark:hover {
  opacity: 1;
}
.footer-svg-dark:focus-visible {
  opacity: 1;
}

.dark .footer-svg-light {
  display: none;
}

.dark .footer-svg-dark {
  display: block;
}

.dark .custom-footer-divider {
  background: rgba(255, 255, 255, 0.15);
}

.custom-footer-social {
  display: flex;
  align-items: center;
  gap: 12px;
}

.custom-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--contrast-400);
  cursor: pointer;
  transition: color 0.2s ease;
}

.custom-footer-social a:hover {
  color: #0D52FF;
}
.custom-footer-social a:focus-visible {
  color: #0D52FF;
}

.custom-footer-social a svg {
  width: 20px;
  height: 20px;
}


/*
 * Sidebar footer links — the last top-level li in the sidebar group,
 * when it contains only plain anchor links and no collapsible sections
 * (div[data-state]), buttons, or headings. The border separator
 * appears above this footer group.
 */
ul.fern-sidebar-group:not([class*="level-"])
  > li:last-child:has(a.fern-sidebar-link):not(:has(
      button.fern-sidebar-link,
      div[data-state],
      .fern-sidebar-heading
  )) {
  margin-top: 16px !important;
  padding-top: 16px !important;
  position: relative !important;
}

ul.fern-sidebar-group:not([class*="level-"])
  > li:last-child:has(a.fern-sidebar-link):not(:has(
      button.fern-sidebar-link,
      div[data-state],
      .fern-sidebar-heading
  ))::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -999px !important;
  right: -999px !important;
  height: 1px !important;
  /* This full-bleed separator visually aligns with the sidebar's vertical
   * border and the header's bottom border, so match their token
   * (var(--contrast-200)) rather than the interior-divider gray. The token is
   * theme-adaptive, so no separate dark-mode override is needed. */
  background: var(--contrast-200) !important;
}

/* Hide the header tab bar (Docs tab) — keep tab for /docs slug
.fern-header-tabs,
#fern-sidebar [role="tablist"] {
  display: none !important;
} */

/* Prevent font-weight shift on active header tabs */
#fern-header [data-radix-collection-item][data-state="active"] > span {
  -webkit-text-stroke: 0 !important;
}

/* Prevent font-weight shift on active sidebar links */
.fern-sidebar-link[data-state="active"] .fern-sidebar-link-title-inner {
  -webkit-text-stroke: 0 !important;
}

/* ===== Newsletter Banner ===== */

.newsletter-banner {
  background-color: rgba(13, 82, 255, 0.06);
  border: 1px solid rgba(13, 82, 255, 0.15);
  border-radius: 12px;
  padding: 1.25rem 1.5rem 1.5rem;
  margin-top: 2rem;
}

.newsletter-banner > *:last-child {
  margin-bottom: 0 !important;
}

.newsletter-banner #mc_embed_signup {
  margin-bottom: 0 !important;
}

.newsletter-banner #mc_embed_signup .clear {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.newsletter-banner h2 {
  margin-top: 0 !important;
  margin-bottom: 0.25rem !important;
  color: var(--foreground);
}

.newsletter-banner p {
  margin-top: 0 !important;
  color: var(--contrast-500);
}

.dark .newsletter-banner {
  background-color: rgba(13, 82, 255, 0.1);
  border-color: rgba(13, 82, 255, 0.25);
}

/* ===== Mailchimp Newsletter Form ===== */

#mc_embed_signup {
  margin: 1rem 0 0;
}

#mc_embed_signup #mc_embed_signup_scroll {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem;
}

#mc_embed_signup .mc-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1;
  min-width: 200px;
}

#mc_embed_signup label {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--contrast-500);
}

#mc_embed_signup .asterisk {
  color: var(--accent);
}

.dark #mc_embed_signup .asterisk {
  color: var(--accent-a11);
}

#mc_embed_signup input[type="email"] {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--foreground);
  background-color: var(--background);
  border: 1px solid #000000;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

#mc_embed_signup input[type="email"]:focus {
  border-color: #0D52FF;
}

#mc_embed_signup input[type="email"]::placeholder {
  color: var(--contrast-300);
}

.dark #mc_embed_signup input[type="email"] {
  border-color: #ffffff;
  background-color: var(--contrast-50);
}

.dark #mc_embed_signup input[type="email"]:focus {
  border-color: #0D52FF;
}

#mc_embed_signup .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.5rem;
  font-family: var(--font-display);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: #ffffff;
  background-color: #0D52FF;
  border: 1px solid #0D52FF;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  box-sizing: border-box;
  margin-bottom: 1px;
}

#mc_embed_signup .button:hover {
  background-color: #0A42CC;
}
#mc_embed_signup .button:focus-visible {
  background-color: #0A42CC;
}

#mc_embed_signup .button:active {
  transform: scale(0.98);
}

#mc_embed_signup #mce-error-response,
#mc_embed_signup #mce-success-response {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  padding: 0.75rem;
  border-radius: 8px;
  margin-top: 0.75rem;
}

#mc_embed_signup #mce-error-response {
  background-color: var(--badge-experimental-bg);
  color: var(--badge-experimental-text);
}

#mc_embed_signup #mce-success-response {
  background-color: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

/* Fix format badge (e.g. "UUID") border clipping in API references */
.fern-api-property-meta {
  overflow: visible !important;
}

/* Override Fern's body `antialiased` class — fonts were rendering too light */
body,
body * {
  -webkit-font-smoothing: auto !important;
  -moz-osx-font-smoothing: auto !important;
}

/* ===== Product Switcher Styling ===== */

/* Trigger button — match dropdown item font */
.fern-product-selector .product-item-title {
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  color: var(--foreground) !important;
}

/* Trigger button — transparent with gray background hover */
.fern-product-selector .product-dropdown-trigger {
  padding: 8px 10px !important;
  border-radius: 8px !important;
  transition: background 0.15s ease !important;
}

.fern-product-selector .product-dropdown-trigger:hover {
  background: var(--contrast-100) !important;
}
.fern-product-selector .product-dropdown-trigger:focus-visible {
  background: var(--contrast-100) !important;
}

.fern-product-selector-radio-group {
  width: 140px !important;
}

/* Hide icons and end icons in product dropdown */
.fern-product-selector-radio-group .fern-selection-item-icon,
.fern-product-selector-radio-group .fern-selection-item-end-icon {
  display: none !important;
}


/* Scope dropdown overrides to ONLY the product switcher dropdown (contains .custom-nav-container) */

/* Keep outer wrapper transparent so border-radius works properly */
[data-radix-popper-content-wrapper]:has(.custom-nav-container) {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Block backdrop blur by making dropdown containers opaque */
[data-radix-popper-content-wrapper]:has(.custom-nav-container) > div,
[data-radix-popper-content-wrapper]:has(.custom-nav-container) .fern-dropdown,
[data-radix-popper-content-wrapper]:has(.custom-nav-container)
  .fern-scroll-area,
[data-radix-popper-content-wrapper]:has(.custom-nav-container)
  .fern-scroll-area-viewport {
  background: var(--colors-background, #fff) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 8px !important;
}

[data-radix-popper-content-wrapper]:has(.custom-nav-container)
  .fern-scroll-area {
  border-radius: 16px !important;
  background: var(--colors-background, #fff) !important;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1) !important;
  outline: var(--outline) !important;
  border: none !important;
  margin-left: 4px !important;
}

.fern-dropdown {
  border-radius: 16px !important;
  border: none !important;
  box-shadow: var(--shadow-2) !important;
  outline: var(--outline) !important;
}

/*
 * The API Explorer's auth form (X-Auth-Token credentials box) has a
 * fern-dropdown child that doesn't shrink to its column on narrower
 * viewports — it overflows into the adjacent request/response panel.
 * Scope the fix to the auth form so other fern-dropdown usages (which
 * legitimately want their natural width, e.g. selector popovers) are
 * unaffected.
 */
.fern-explorer-auth-form .fern-collapsible,
.fern-explorer-auth-form .fern-collapsible-child,
.fern-explorer-auth-form .fern-dropdown {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.fern-explorer-auth-form .fern-input-group,
.fern-explorer-auth-form .fern-input {
  max-width: 100% !important;
  min-width: 0 !important;
}

.fern-dropdown .fern-scroll-area-viewport {
  padding: 8px !important;
}

.fern-dropdown .fern-dropdown-item {
  border-radius: 8px !important;
}

.fern-dropdown .fern-dropdown-item:hover {
  background-color: var(--contrast-100) !important;
  color: inherit !important;
}
.fern-dropdown .fern-dropdown-item:focus-visible {
  background-color: var(--contrast-100) !important;
  color: inherit !important;
}

.fern-dropdown .fern-dropdown-item[data-highlighted] {
  background-color: var(--contrast-100) !important;
  color: inherit !important;
}

.fern-dropdown .fern-dropdown-checkmark {
  margin-top: 2px !important;
}

.dark .fern-dropdown {
  background: var(--contrast-100) !important;
  outline: 0 !important;
  border: 1px solid var(--contrast-200) !important;
}
.dark .fern-dropdown .fern-dropdown-item:hover {
  background-color: var(--contrast-200) !important;
}
.dark .fern-dropdown .fern-dropdown-item:focus-visible {
  background-color: var(--contrast-200) !important;
}

.dark .fern-product-selector-radio-group .fern-product-item-link:hover,
.dark
  .fern-product-selector-radio-group
  .fern-product-item-link[data-highlighted] {
  background: var(--contrast-200) !important;
}
.dark .fern-product-selector-radio-group .fern-product-item-link:focus-visible {
  background: var(--contrast-200) !important;
}

/* Dark mode — hover and highlighted item text color */
.dark .fern-product-selector-radio-group .fern-product-item-link:hover,
.dark
  .fern-product-selector-radio-group
  .fern-product-item-link[data-highlighted] {
  color: var(--accent-a11) !important;
}
.dark .fern-product-selector-radio-group .fern-product-item-link:focus-visible {
  color: var(--accent-a11) !important;
}

/* Dark mode — trigger hover */
.dark .fern-product-selector .product-dropdown-trigger:hover {
  background: var(--contrast-100) !important;
}
.dark .fern-product-selector .product-dropdown-trigger:focus-visible {
  background: var(--contrast-100) !important;
}

/* Dark mode — text color */
.dark .fern-product-selector .product-item-title,
.dark .fern-product-selector-radio-group .fern-product-item-link,
.dark .fern-product-selector-radio-group .fern-product-item-link *,
.dark .fern-product-selector-radio-group .fern-selection-item-title {
  color: var(--contrast-500) !important;
}

/* Radio group */
.fern-product-selector-radio-group {
  gap: 1px !important;
}

/* Reset all inner wrappers */
.fern-product-selector-radio-group .fern-product-item,
.fern-product-selector-radio-group .fern-selection-item {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  outline: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-shadow: 0 0 #0000 !important;
}

/* Link items — the clickable rows */
.fern-product-selector-radio-group .fern-product-item-link {
  display: block !important;
  padding: 8px 10px !important;
  border: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-color: transparent !important;
  transition: background 0.15s ease !important;
}

/* Kill every possible ring/border source on focus, hover, checked, and the
   custom "active" class set by custom-nav.js. */
.fern-product-selector-radio-group .fern-product-item-link:focus,
.fern-product-selector-radio-group .fern-product-item-link:focus-visible,
.fern-product-selector-radio-group .fern-product-item-link[data-highlighted],
.fern-product-selector-radio-group .fern-product-item-link[data-state="checked"],
.fern-product-selector-radio-group .fern-product-item-link[aria-checked="true"],
.fern-product-selector-radio-group .fern-product-item-link.product-switcher-active {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-color: transparent !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
}

/* Hover — light gray background */
.fern-product-selector-radio-group .fern-product-item-link:hover,
.fern-product-selector-radio-group .fern-product-item-link[data-highlighted] {
  background: var(--contrast-100) !important;
}

/* Hide the currently-selected product from the dropdown — it's already shown
   and labeled by the switcher trigger at the top, so listing it again is
   redundant. Tagged with .product-switcher-active by custom-nav.js. */
.fern-product-selector-radio-group
  .fern-product-item-link.product-switcher-active {
  display: none !important;
}

.fern-product-selector-radio-group
  .fern-selection-item
  .fern-selection-item-title {
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
}

/* Kill all inner hover/highlight effects */
.fern-product-selector-radio-group
  .fern-product-item-link:hover
  .fern-selection-item,
.fern-product-selector-radio-group
  .fern-product-item-link:hover
  .fern-product-item,
.fern-product-selector-radio-group
  .fern-product-item-link[data-highlighted]
  .fern-selection-item,
.fern-product-selector-radio-group
  .fern-product-item-link[data-highlighted]
  .fern-product-item {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
}
.fern-product-selector-radio-group .fern-product-item-link:focus-within .fern-selection-item,
.fern-product-selector-radio-group .fern-product-item-link:focus-within .fern-product-item {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
}

/* Remove padding from scroll area viewport inside product dropdown */
[data-radix-popper-content-wrapper]:has(.custom-nav-container)
  .fern-scroll-area-viewport {
  padding: 8px !important;
}

.custom-nav-container {
  display: flex;
  width: 600px;
  padding: 12px;
  align-items: flex-start;
  border-radius: 16px;
  border: 1px solid rgba(21, 23, 30, 0.1);
  background: var(--colors-background, #fff);
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
}

.custom-nav-brand-column {
  display: flex;
  flex-direction: column;
  padding: 12px;
  align-items: flex-start;
  gap: 1px;
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  border-right: 1px solid var(--colors-contrast-200, #e4e8ee);
  margin: -12px 0;
}

.custom-nav-brand-column:first-child {
  padding-left: 0;
}

.custom-nav-brand-column:last-child {
  border-right: none;
  padding-right: 0;
}

.dark .custom-nav-brand-column {
  border-right-color: #3a3a4a;
}

.dark .custom-nav-brand-column:last-child {
  border-right: none;
}

.custom-nav-brand-header {
  display: flex;
  padding: 6px 8px 12px 8px;
  align-items: center;
  gap: 10px;
  align-self: stretch;
}

.custom-nav-brand-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.custom-nav-brand-name {
  color: var(--colors-foreground, #15171e);
  font-family: var(--font-display);
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}

.dark .custom-nav-brand-name {
  color: #ffffff;
}

.custom-nav-links {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.custom-nav-link {
  display: flex;
  height: 36px;
  padding: 0 6px 0 8px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 20px;
  color: var(--colors-contrast-500, #363d52);
  text-decoration: none;
  transition: color 0.2s ease;
}

.custom-nav-link:hover {
  color: var(--bc-accent-primary, #6058ff);
}
.custom-nav-link:focus-visible {
  color: var(--bc-accent-primary, #6058ff);
}

.custom-nav-link-semibold {
  font-family: var(--font-display);
  font-weight: 500;
}

.custom-nav-link.custom-nav-link-active {
  font-weight: 500 !important;
}

.dark .custom-nav-link {
  color: #b8b8d0;
}

.dark .custom-nav-link:hover {
  color: #6058ff;
}
.dark .custom-nav-link:focus-visible {
  color: #6058ff;
}

.dark .custom-nav-container {
  background: var(--bc-bg-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.3) !important;
}

/* Mobile responsive */
@media (max-width: 768px) {

  .custom-nav-container {
    flex-direction: column;
    width: auto;
    gap: 16px;
  }

  .custom-nav-brand-column {
    min-width: auto;
    border-right: none;
    padding: 0;
    margin: 0;
  }

}

#fern-header {
  border-color: var(--contrast-200) !important;
  background-color: color-mix(
    in srgb,
    var(--background) 90%,
    transparent
  ) !important;
}

.fern-header-tabs a {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: var(--font-size-sm) !important;
  /* line-height: 24px !important; */
  /* color: var(--contrast-500) !important; */
  /* transition: color 0.1s linear !important; */
}

/* ===== Logo Site Switcher ===== */

.bc-site-switcher-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Pull the product switcher closer to the logo. Applied unconditionally to
   the product chip (which exists from first paint) instead of via wrapper
   margin so the spacing doesn't change when JS enhances the logo — that
   prevents a visible CLS blip on hydration. */
.fern-product-selector {
  margin-left: -8px;
}

/* Pre-emptive logo trigger styling — applied from first paint to prevent
   the JS-induced layout shift when the wrapper/chevron get injected. The
   selectors target both pre-JS (`header a[href="/"]`) and post-JS
   (`.bc-site-switcher-wrapper > a`) so the box stays identical across the
   hydration boundary. */
header a[href="/"]:has(img),
header a[href="/"]:has(svg),
.bc-site-switcher-wrapper > a:first-child {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  transition: background 0.15s ease;
}

/* Inline chevron rendered as a CSS pseudo-element so it occupies space from
   first paint. JS no longer needs to inject it. */
header a[href="/"]:has(img)::after,
header a[href="/"]:has(svg)::after,
.bc-site-switcher-wrapper > a:first-child::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

header a[href="/"]:has(img):hover,
header a[href="/"]:has(svg):hover,
.bc-site-switcher-wrapper > a:first-child:hover,
.bc-site-switcher-wrapper.bc-site-switcher-open > a:first-child {
  background: var(--contrast-100);
}
header a[href="/"]:has(img):focus-visible,
header a[href="/"]:has(svg):focus-visible,
.bc-site-switcher-wrapper > a:first-child:focus-visible {
  background: var(--contrast-100);
}

.bc-site-switcher-wrapper.bc-site-switcher-open > a:first-child::after {
  transform: rotate(180deg);
}

/* Reuse Fern's globally-defined `dropdown-expand` keyframes (same one the
   product switcher uses) so the two dropdowns animate identically. */

.bc-site-switcher {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1000;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-radius: 16px;
  background: var(--colors-background, #fff);
  border: 1px solid rgba(21, 23, 30, 0.1);
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
  animation: dropdown-expand 250ms cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: top left;
}

.bc-site-switcher[hidden] {
  display: none;
}

.bc-site-switcher-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none !important;
  color: var(--foreground) !important;
  transition: background 0.15s ease;
  min-width: 200px;
}

.bc-site-switcher-item:hover,
.bc-site-switcher-item:focus-visible {
  background: var(--contrast-100);
  outline: none;
}

.bc-site-switcher-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.bc-site-switcher-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.bc-site-switcher-label {
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
}

/* Dark mode */
.dark .bc-site-switcher,
[data-theme="dark"] .bc-site-switcher {
  background: var(--contrast-100);
  border-color: var(--contrast-200);
}

.dark .bc-site-switcher-item:hover,
.dark .bc-site-switcher-item:focus-visible,
[data-theme="dark"] .bc-site-switcher-item:hover,
[data-theme="dark"] .bc-site-switcher-item:focus-visible {
  background: var(--contrast-200);
}



/* ===== Brand-icon dark-mode adaptation =====
 * Cursor and OpenAI marks ship with hardcoded black fills so light-mode
 * cards render their actual brand color. In dark mode, invert them to
 * white so they remain visible against the dark card background. Claude
 * (Anthropic coral) is intentionally skipped — its color works on both
 * backgrounds without inversion.
 */
html.dark img[src*="/ai-agents/cursor.svg"],
html.dark img[src*="/ai-agents/openai.svg"],
[data-theme="dark"] img[src*="/ai-agents/cursor.svg"],
[data-theme="dark"] img[src*="/ai-agents/openai.svg"] {
  filter: invert(1);
}