/*fern-site-stylesheet*/@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/_fern-files/makeswift.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/makeswift.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: 27px;
  --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: #fffcfe;
  --accent-2: #fff7fb;
  --accent-3: #ffe8f4;
  --accent-4: #ffdaec;
  --accent-5: #fbcce4;
  --accent-6: #f5bcd9;
  --accent-7: #eda9cc;
  --accent-8: #e58fbd;
  --accent-9: #ea3baa;
  --accent-10: #db2a9d;
  --accent-11: #c80b8d;
  --accent-12: #690548;

  --accent-a1: #ff00aa03;
  --accent-a2: #ff008008;
  --accent-a3: #ff008617;
  --accent-a4: #ff007d25;
  --accent-a5: #eb007833;
  --accent-a6: #d9006f43;
  --accent-a7: #ca006856;
  --accent-a8: #c4006970;
  --accent-a9: #e40091c4;
  --accent-a10: #d4008ad5;
  --accent-a11: #c60088f4;
  --accent-a12: #660044fa;

  --accent-contrast: #fff;
  --accent-surface: #fff5facc;
  --accent-indicator: #ea3baa;
  --accent-track: #ea3baa;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.4% 0.0044 346.8);
      --accent-2: oklch(98.3% 0.0103 346.8);
      --accent-3: oklch(95.4% 0.0305 346.8);
      --accent-4: oklch(92.5% 0.0464 346.8);
      --accent-5: oklch(89.3% 0.0604 346.8);
      --accent-6: oklch(85.5% 0.0743 346.8);
      --accent-7: oklch(80.9% 0.0924 346.8);
      --accent-8: oklch(75.1% 0.1182 346.8);
      --accent-9: oklch(64.8% 0.2326 346.8);
      --accent-10: oklch(60.8% 0.2319 346.8);
      --accent-11: oklch(55.6% 0.2304 346.8);
      --accent-12: oklch(34.9% 0.142 346.8);

      --accent-a1: color(display-p3 0.6745 0.0235 0.6745 / 0.012);
      --accent-a2: color(display-p3 0.8784 0.0196 0.5098 / 0.032);
      --accent-a3: color(display-p3 0.8235 0.0118 0.4627 / 0.087);
      --accent-a4: color(display-p3 0.8353 0.0078 0.451 / 0.142);
      --accent-a5: color(display-p3 0.7804 0.0078 0.4314 / 0.193);
      --accent-a6: color(display-p3 0.7098 0.0039 0.4039 / 0.255);
      --accent-a7: color(display-p3 0.6667 0.0039 0.3647 / 0.326);
      --accent-a8: color(display-p3 0.651 0.0039 0.3725 / 0.424);
      --accent-a9: color(display-p3 0.7843 0 0.5059 / 0.706);
      --accent-a10: color(display-p3 0.7216 0 0.4784 / 0.765);
      --accent-a11: color(display-p3 0.6627 0 0.4549 / 0.84);
      --accent-a12: color(display-p3 0.3294 0 0.2196 / 0.93);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9961 0.9608 0.9804 / 0.8);
      --accent-indicator: oklch(64.8% 0.2326 346.8);
      --accent-track: oklch(64.8% 0.2326 346.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: #190c13;
  --accent-3: #331426;
  --accent-4: #491435;
  --accent-5: #571d41;
  --accent-6: #682a4f;
  --accent-7: #813a64;
  --accent-8: #a54a81;
  --accent-9: #f06cbb;
  --accent-10: #e360af;
  --accent-11: #ff88d2;
  --accent-12: #fcd2e8;

  --accent-a1: #00000000;
  --accent-a2: #ff7bc219;
  --accent-a3: #ff64be33;
  --accent-a4: #ff46ba49;
  --accent-a5: #ff55bf57;
  --accent-a6: #ff67c268;
  --accent-a7: #ff73c681;
  --accent-a8: #ff73c8a5;
  --accent-a9: #ff73c7f0;
  --accent-a10: #ff6cc5e3;
  --accent-a11: #ff88d2;
  --accent-a12: #ffd5ebfc;

  --accent-contrast: #fff;
  --accent-surface: #32182680;
  --accent-indicator: #f06cbb;
  --accent-track: #f06cbb;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(0% 0.0156 345.8);
      --accent-2: oklch(17.6% 0.0274 345.8);
      --accent-3: oklch(24.5% 0.0567 345.8);
      --accent-4: oklch(29% 0.0905 345.8);
      --accent-5: oklch(33.2% 0.0973 345.8);
      --accent-6: oklch(38.5% 0.1004 345.8);
      --accent-7: oklch(45.6% 0.1115 345.8);
      --accent-8: oklch(54.4% 0.1359 345.8);
      --accent-9: oklch(71.4% 0.1837 345.8);
      --accent-10: oklch(67.7% 0.1837 345.8);
      --accent-11: oklch(78.8% 0.1727 345.8);
      --accent-12: oklch(90.6% 0.054 345.8);

      --accent-a1: color(display-p3 0 0 0 / 0);
      --accent-a2: color(display-p3 0.9922 0.5608 0.8196 / 0.091);
      --accent-a3: color(display-p3 1 0.4667 0.7843 / 0.185);
      --accent-a4: color(display-p3 1 0.3608 0.7765 / 0.263);
      --accent-a5: color(display-p3 1 0.4157 0.8 / 0.314);
      --accent-a6: color(display-p3 1 0.4824 0.8118 / 0.377);
      --accent-a7: color(display-p3 1 0.5176 0.8196 / 0.471);
      --accent-a8: color(display-p3 1 0.5137 0.8275 / 0.604);
      --accent-a9: color(display-p3 1 0.5176 0.8196 / 0.879);
      --accent-a10: color(display-p3 1 0.4941 0.8157 / 0.828);
      --accent-a11: color(display-p3 1 0.5922 0.8667 / 0.938);
      --accent-a12: color(display-p3 1 0.8667 0.9412 / 0.961);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.1804 0.0941 0.149 / 0.5);
      --accent-indicator: oklch(71.4% 0.1837 345.8);
      --accent-track: oklch(71.4% 0.1837 345.8);
    }
  }
}


.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(234, 59, 170, 1);
  --background: rgba(255, 255, 255, 1);
  --border: initial;
  --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(240, 108, 187, 1);
  --background: rgba(0, 0, 0, 1);
  --border: initial;
  --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;
}

/* Standard, comfortable body line-height. Kept modest so plain paragraphs aren't
   airy; inline-code pills use trimmed vertical padding (see below) so pill-heavy
   wrapped lines stay uncrowded without forcing extra space onto every paragraph */
.prose :where(p, li, td, dd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  line-height: 1.75 !important;
}

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

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

.fern-mdx-link svg.external-link-icon {
  margin-left: calc(var(--spacing) * 1) !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;
}

/* 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;
}

/* ===== 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;
}

/* Hide the lone "Docs" tab bar on the Product docs only. Scoped via :has() to a
   Product tab link so the Developer product (which has multiple tabs) keeps its
   tab bar. The tab stays in the DOM, so /product/docs/... URLs are unaffected. */
.fern-header-tabs:has(a[href^="/product/docs"]) {
  display: none;
}

/* ===== 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;
}

.dark #fern-toc .toc-root::after {
  background-color: #EA3BAA !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;
}

#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 ===== */

: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 */
figure.fern-card {
  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:hover {
  border: 1px solid var(--contrast-200) !important;
}
figure.fern-card: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 {
  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 {
  background: var(--contrast-100) !important;
  border: 1px solid var(--contrast-200) !important;
}

.dark figure.fern-card:hover {
  border: 1px solid var(--contrast-200) !important;
}
.dark figure.fern-card: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 mode: keep card icons at original brand pink */
.dark .fern-card:not(figure):not(.fern-accordion):not([class*="fern-explorer"]) .card-icon {
  color: #EA3BAA !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;
}

/* ===== Mobile Product Badge ===== */
/* Injected by scripts/mobile-product-badge.js. Shows "Product" / "Developer"
 * next to the logo so the current docs section is clear on mobile, where Fern
 * moves the product switcher into the hamburger drawer. Matches the desktop
 * switcher's text style (.product-item-title) but is borderless and has no
 * caret — it's a static context label, not an interactive switcher. Hidden on
 * desktop, where the real switcher is already in the header. */
.ms-product-badge {
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 8px !important;
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  color: var(--foreground) !important;
  white-space: nowrap !important;
}

/* Desktop — the product switcher is already visible in the header */
@media (min-width: 64rem) {

  .ms-product-badge {
    display: none !important;
  }

}

/* ===== Mobile Header Layout ===== */
/* Below Fern's `lg` breakpoint (64rem) the header row holds logo + chevron,
 * the product badge, the search bar, Ask AI, and the hamburger. Our logo
 * chevron and badge add ~120px that Fern doesn't budget for, so the hamburger
 * was pushed off the right edge on phones. 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 "Search docs" 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 .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;
  }

  /* Badge gives way first if space is still tight on very narrow devices. */
  .ms-product-badge {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !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 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 — keep original brand pink */
.dark .fern-header a.fern-button[data-variant="filled"],
.dark .fern-header .fern-navbar-link[data-variant="filled"] {
  background: #EA3BAA !important;
  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;
}

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

@media (min-width: 64rem) {

  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;
}

/* Reduce spacing between changelog posts */
article.fern-changelog-content {
  padding: 32px 0 40px !important;
}

@media (max-width: 768px) {

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

}

/* Classic changelog pagination styling - needs class name inspection */
/* Will add specific styles once we identify the Fern pagination classes */

/* ===== 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: #EA3BAA;
}
.custom-footer-social a:focus-visible {
  color: #EA3BAA;
}

.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;
}

/* 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 text */
.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 pill — transparent with hover background */
.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;
}

/* Pull the product switcher closer to the logo. Applied unconditionally to
   the product chip (in the DOM from first paint) instead of via the JS
   wrapper so the spacing doesn't change on hydration. */
.fern-product-selector {
  margin-left: -8px;
}

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

/* Match the 8px outer padding bigcommerce uses on the product dropdown.
   Fern's default is p-1 (4px). */
[data-testid="product-dropdown-content"] .fern-scroll-area-viewport {
  padding: 8px !important;
}

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

/* Reset inner wrappers so they don't show their default chrome */
.fern-product-selector-radio-group .fern-product-item,
.fern-product-selector-radio-group .fern-selection-item {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !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 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 / highlighted state */
.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;
}

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

/* Dark mode — hover, active, trigger, 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] {
  background: var(--contrast-200) !important;
}
.dark .fern-product-selector-radio-group .fern-product-item-link:focus-visible {
  background: 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] {
  color: var(--accent-a11) !important;
}
.dark .fern-product-selector-radio-group .fern-product-item-link:focus-visible {
  color: var(--accent-a11) !important;
}

.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 .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;
}

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

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

/* Pre-emptive logo trigger styling — applied from first paint to prevent
   the JS-induced layout shift when the wrapper/chevron get injected. */
header a[href="/"]:has(img),
header a[href="/"]:has(svg),
.fern-header-selectors a:has(img),
.fern-header-selectors a: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;
}

/* Chevron rendered as a CSS pseudo-element so it occupies space from first
   paint. SVG mask + currentColor lets it pick up the surrounding text color. */
header a[href="/"]:has(img)::after,
header a[href="/"]:has(svg)::after,
.fern-header-selectors a:has(img)::after,
.fern-header-selectors a: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,
.fern-header-selectors a:has(img):hover,
.fern-header-selectors a: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,
.fern-header-selectors a:has(img):focus-visible,
.fern-header-selectors a: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 so the
   site switcher animates identically to the product switcher. */
.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-icon-light-only {
  display: inline-flex;
}

.bc-site-switcher-icon-dark-only {
  display: none;
}

.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);
}

.dark .bc-site-switcher-icon-light-only,
[data-theme="dark"] .bc-site-switcher-icon-light-only {
  display: none;
}

.dark .bc-site-switcher-icon-dark-only,
[data-theme="dark"] .bc-site-switcher-icon-dark-only {
  display: inline-flex;
}

/* ===== 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);
}