/*fern-site-stylesheet*/@font-face {
    font-family: 'Instrument Sans';
    src: url('/_fern-files/runcaptain.docs.buildwithfern.com/55748ab364d5408ceb15fc3de300e4f643617d060fa2132b704484f11cb507c5/docs/assets/fonts/InstrumentSans-VariableFont_wdth_wght.ttf') format('ttf');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-017E, U+01CD-01CE, U+0218-0237, U+02C7-02DD, U+0300-0328, U+1E80-1E9E, U+1EF2-1EF3, U+2190-2199;
}
@font-face {
    font-family: 'Instrument Sans';
    src: url('/_fern-img/55748ab364d5408ceb15fc3de300e4f6-v1.latin.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0020-007E, U+00A0-00A3, U+00A5, U+00A7-00AB, U+00AE-00B0, U+00B4, U+00B6-00B8, U+00BA-00BB, U+00BF-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
    font-family: 'Instrument Sans';
    src: url('/_fern-files/runcaptain.docs.buildwithfern.com/2e9dccf7b145334a49d2ec113d52f3b7a8bdeef2ea95e7b1d541644b8c15ac3f/docs/assets/fonts/InstrumentSans-Italic-VariableFont_wdth_wght.ttf') format('ttf');
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0100-017E, U+01CD-01CE, U+0218-0237, U+02C7-02DD, U+0300-0328, U+1E80-1E9E, U+1EF2-1EF3, U+2190-2199;
}
@font-face {
    font-family: 'Instrument Sans';
    src: url('/_fern-img/2e9dccf7b145334a49d2ec113d52f3b7-v1.latin.woff2') format('woff2');
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0020-007E, U+00A0-00A3, U+00A5, U+00A7-00AB, U+00AE-00B0, U+00B4, U+00B6-00B8, U+00BA-00BB, U+00BF-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
    font-family: 'Poppins';
    src: url('/_fern-files/runcaptain.docs.buildwithfern.com/3dc5d0c52428fe1696264907a1054ebbaac07f8cbe45832c105f819c2ae397c0/docs/assets/fonts/Poppins-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist Mono';
    src: url('/_fern-files/runcaptain.docs.buildwithfern.com/84ba9928e46485eef8e440a9ecf17d81b8c3ba3bec85f7ac4f3997acd915958e/docs/assets/fonts/GeistMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-0192, U+01B7-01EF, U+0218-0237, U+0259, U+0292, U+02B9-02DD, U+0300-0335, U+039B-03C0, U+0400-04EF, U+0E3F, U+1E20-1E21, U+1E80-1EBD, U+1EF2-1EF9, U+2070-20BD, U+2107-2117, U+2153-215E, U+2190-21B5, U+21E4-2265, U+2326-232B, U+23CE, U+240B-2423, U+2500-250C, U+25B2-25CF, U+3002-301C, U+A78B-A78C, U+FF01-FF5D;
}
@font-face {
    font-family: 'Geist Mono';
    src: url('/_fern-img/84ba9928e46485eef8e440a9ecf17d81-v1.latin.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
    font-family: 'Geist Mono';
    src: url('/_fern-files/runcaptain.docs.buildwithfern.com/666ae5bd9247f6c77368a82e5f66270effdd11cf922dc9991e5bcee7b1156933/docs/assets/fonts/GeistMono-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-0192, U+01B7-01EF, U+0218-0237, U+0259, U+0292, U+02B9-02DD, U+0300-0335, U+039B-03C0, U+0400-04EF, U+0E3F, U+1E20-1E21, U+1E80-1EBD, U+1EF2-1EF9, U+2070-20BD, U+2107-2117, U+2153-215E, U+2190-21B5, U+21E4-2265, U+2326-232B, U+23CE, U+240B-2423, U+2500-250C, U+25B2-25CF, U+3002-301C, U+A78B-A78C, U+FF01-FF5D;
}
@font-face {
    font-family: 'Geist Mono';
    src: url('/_fern-img/666ae5bd9247f6c77368a82e5f66270e-v1.latin.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
    font-family: 'Instrument Sans Fallback';
    src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
    size-adjust: 102.74%;
    ascent-override: 94.42%;
    descent-override: 24.33%;
    line-gap-override: 0.00%;
}
@font-face {
    font-family: 'Poppins Fallback';
    src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
    size-adjust: 112.16%;
    ascent-override: 93.62%;
    descent-override: 31.21%;
    line-gap-override: 8.92%;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 24px;
  --font-body: 'Instrument Sans', 'Instrument Sans Fallback', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'Poppins', 'Poppins Fallback', 'Instrument Sans', 'Instrument Sans Fallback', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: 'Geist Mono', 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: #fcfdfe;
  --accent-2: #f6faff;
  --accent-3: #ebf2ff;
  --accent-4: #dceaff;
  --accent-5: #cbe0ff;
  --accent-6: #b6d3ff;
  --accent-7: #9ec0ff;
  --accent-8: #7ca7f7;
  --accent-9: #0043ca;
  --accent-10: #002fb7;
  --accent-11: #235bd2;
  --accent-12: #152e60;

  --accent-a1: #0055aa03;
  --accent-a2: #0072ff09;
  --accent-a3: #005aff14;
  --accent-a4: #0066ff23;
  --accent-a5: #0067ff34;
  --accent-a6: #0066ff49;
  --accent-a7: #005aff61;
  --accent-a8: #0054f083;
  --accent-a9: #0043ca;
  --accent-a10: #002fb7;
  --accent-a11: #0041cbdc;
  --accent-a12: #001b52ea;

  --accent-contrast: #fff;
  --accent-surface: #f4f9ffcc;
  --accent-indicator: #0043ca;
  --accent-track: #0043ca;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.4% 0.0016 262.5);
      --accent-2: oklch(98.3% 0.0089 262.5);
      --accent-3: oklch(96.1% 0.0191 262.5);
      --accent-4: oklch(93.5% 0.0376 262.5);
      --accent-5: oklch(90.3% 0.0568 262.5);
      --accent-6: oklch(86.3% 0.0793 262.5);
      --accent-7: oklch(80.7% 0.0965 262.5);
      --accent-8: oklch(73% 0.1259 262.5);
      --accent-9: oklch(45% 0.2162 262.5);
      --accent-10: oklch(39.5% 0.2162 262.5);
      --accent-11: oklch(51% 0.192 262.5);
      --accent-12: oklch(31.3% 0.0951 262.5);

      --accent-a1: color(display-p3 0.0235 0.349 0.6745 / 0.012);
      --accent-a2: color(display-p3 0.0196 0.3882 0.8784 / 0.032);
      --accent-a3: color(display-p3 0.0078 0.3216 0.949 / 0.075);
      --accent-a4: color(display-p3 0.0078 0.349 0.9412 / 0.126);
      --accent-a5: color(display-p3 0.0078 0.3373 0.9412 / 0.189);
      --accent-a6: color(display-p3 0.0039 0.3294 0.9412 / 0.263);
      --accent-a7: color(display-p3 0.0039 0.2902 0.9451 / 0.353);
      --accent-a8: color(display-p3 0.0039 0.2706 0.8863 / 0.479);
      --accent-a9: color(display-p3 0 0.1804 0.7333 / 0.902);
      --accent-a10: color(display-p3 0 0.1255 0.6706 / 0.938);
      --accent-a11: color(display-p3 0 0.1961 0.7451 / 0.804);
      --accent-a12: color(display-p3 0 0.0784 0.2902 / 0.895);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9608 0.9725 1 / 0.8);
      --accent-indicator: oklch(45% 0.2162 262.5);
      --accent-track: oklch(45% 0.2162 262.5);
    }
  }
}


.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: #051028;
  --accent-3: #001a5d;
  --accent-4: #001f83;
  --accent-5: #002a9d;
  --accent-6: #0037b1;
  --accent-7: #0144cb;
  --accent-8: #0050ef;
  --accent-9: #0043ca;
  --accent-10: #0035ae;
  --accent-11: #87b5ff;
  --accent-12: #cbe2ff;

  --accent-a1: #00000000;
  --accent-a2: #2066ff28;
  --accent-a3: #0048ff5d;
  --accent-a4: #003dff83;
  --accent-a5: #0045ff9d;
  --accent-a6: #004fffb1;
  --accent-a7: #0156ffcb;
  --accent-a8: #0055ffef;
  --accent-a9: #0055ffca;
  --accent-a10: #004effae;
  --accent-a11: #87b5ff;
  --accent-a12: #cbe2ff;

  --accent-contrast: #fff;
  --accent-surface: #0a205080;
  --accent-indicator: #0043ca;
  --accent-track: #0043ca;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(0% 0.0446 262.5);
      --accent-2: oklch(17.8% 0.0539 262.5);
      --accent-3: oklch(25.7% 0.1238 262.5);
      --accent-4: oklch(31% 0.1692 262.5);
      --accent-5: oklch(35.8% 0.1886 262.5);
      --accent-6: oklch(40.4% 0.199 262.5);
      --accent-7: oklch(45.3% 0.2162 262.5);
      --accent-8: oklch(50.9% 0.2472 262.5);
      --accent-9: oklch(45% 0.2162 262.5);
      --accent-10: oklch(39.5% 0.199 262.5);
      --accent-11: oklch(77.6% 0.2231 262.5);
      --accent-12: oklch(91% 0.078 262.5);

      --accent-a1: color(display-p3 0 0 0 / 0);
      --accent-a2: color(display-p3 0.1843 0.4196 0.9961 / 0.15);
      --accent-a3: color(display-p3 0.0706 0.2824 1 / 0.35);
      --accent-a4: color(display-p3 0.0667 0.2392 1 / 0.495);
      --accent-a5: color(display-p3 0.0863 0.2706 1 / 0.593);
      --accent-a6: color(display-p3 0.1176 0.3176 1 / 0.667);
      --accent-a7: color(display-p3 0.1333 0.3451 1 / 0.765);
      --accent-a8: color(display-p3 0.1412 0.3451 1 / 0.902);
      --accent-a9: color(display-p3 0.1294 0.3412 1 / 0.761);
      --accent-a10: color(display-p3 0.1137 0.3137 1 / 0.655);
      --accent-a11: color(display-p3 0.5804 0.7216 1 / 0.977);
      --accent-a12: color(display-p3 0.8196 0.8941 1 / 0.989);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.0549 0.1176 0.3059 / 0.5);
      --accent-indicator: oklch(45% 0.2162 262.5);
      --accent-track: oklch(45% 0.2162 262.5);
    }
  }
}


.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(0, 67, 202, 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(0, 67, 202, 1);
  --background: rgba(0, 0, 0, 1);
  --border: rgba(0, 67, 202, 1);
  --sidebar-background: rgba(0, 0, 0, 1);
  --header-background: rgba(0, 0, 0, 1);
  --card-background: rgba(0, 0, 0, 1);
  --theme-color: #000;
}

/* Fonts are registered from docs.yml typography (Poppins 400 headings,
   Instrument Sans body, Geist Mono code), all self-hosted. */

/* ============================================================
   Callouts (Note / Info / Warning / Tip / Error)

   Neubrutalist treatment: 1px border, 2px hard offset shadow,
   flat saturated fill, dark grey ink rather than pure black.
   Static, no hover state. The icon is centred against the text
   block instead of pinned to the top, and each callout carries
   an uppercase type chip so the category reads at a glance.

   Replaces the earlier pale-yellow warning override, which only
   styled one intent and left the rest on Fern's defaults.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');

:root {
  --nb-font: 'Archivo Black', 'Arial Black', sans-serif;
  --nb-ink: #1a1a1a;
}

/* Structure: centre the icon, collapse Fern's empty heading slot so we
   can reuse it as the type chip, and tighten the box. */
.fern-callout .flex.items-start {
  align-items: center !important;
}
.fern-callout .mt-0\.5 {
  margin-top: 0 !important;
}
.fern-callout svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0;
}
.fern-callout {
  padding: 14px 18px !important;
}
.fern-callout p {
  margin: 0 !important;
  line-height: 1.55;
}

/* SCOPED to callouts on purpose. Fern stamps data-intent on other elements
   too, notably the API reference's response status-code badges (success on
   2xx, error/danger on 4xx/5xx), so a bare [data-intent] selector leaked the
   neubrutalist border + hard shadow onto every endpoint's response chips.
   The compound form covers the attr on the callout root; the descendant form
   covers it on a child, so the callout look survives Fern markup shuffles. */
.fern-callout[data-intent],
.fern-callout [data-intent] {
  background: var(--fill);
  border: 1px solid var(--nb-ink);
  border-radius: 4px !important;
  box-shadow: 2px 2px 0 var(--nb-ink);
  color: var(--nb-ink);
}
.fern-callout[data-intent] p,
.fern-callout [data-intent] p {
  color: var(--nb-ink);
  font-weight: 500;
}
.fern-callout[data-intent] p strong,
.fern-callout [data-intent] p strong {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.fern-callout[data-intent] svg,
.fern-callout [data-intent] svg {
  color: var(--nb-ink) !important;
  stroke-width: 2.5px !important;
}

/* Type chip, rendered into Fern's otherwise-empty heading slot. */
.fern-callout[data-intent] h5:empty,
.fern-callout [data-intent] h5:empty {
  display: inline-block !important;
  font-family: var(--nb-font);
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--nb-ink);
  background: #fff;
  border: 1px solid var(--nb-ink);
  padding: 2px 8px 3px;
  border-radius: 3px;
  margin: 0 0 8px !important;
}

.fern-callout[data-intent='note'],
.fern-callout [data-intent='note'] { --fill: #d9d6ff; }
.fern-callout[data-intent='info'],
.fern-callout [data-intent='info'] { --fill: #bfeaff; }
.fern-callout[data-intent='warning'],
.fern-callout [data-intent='warning'] { --fill: #ffe600; }
.fern-callout[data-intent='tip'],
.fern-callout [data-intent='tip'] { --fill: #baffc9; }
.fern-callout[data-intent='error'],
.fern-callout [data-intent='error'],
.fern-callout[data-intent='danger'],
.fern-callout [data-intent='danger'] { --fill: #ff8a80; }

.fern-callout[data-intent='note'] h5::before,
.fern-callout [data-intent='note'] h5::before { content: 'NOTE'; }
.fern-callout[data-intent='info'] h5::before,
.fern-callout [data-intent='info'] h5::before { content: 'INFO'; }
.fern-callout[data-intent='warning'] h5::before,
.fern-callout [data-intent='warning'] h5::before { content: 'WARNING'; }
.fern-callout[data-intent='tip'] h5::before,
.fern-callout [data-intent='tip'] h5::before { content: 'TIP'; }
.fern-callout[data-intent='error'] h5::before,
.fern-callout [data-intent='error'] h5::before,
.fern-callout[data-intent='danger'] h5::before,
.fern-callout [data-intent='danger'] h5::before { content: 'ERROR'; }

/* ============================================================
   Callout contrast (WCAG AA), audited 2026-08-28

   Links inside a callout inherit the accent blue, which lands at
   1.6:1 on the yellow and blue fills. Inline code inherited the
   accent on a page-coloured pill, tables and fenced code painted the
   page ground inside the callout, and the dark-mode border and hard
   shadow sat at 1.85:1 against black. Each rule below fixes one of
   those against the callout fill:
   - links: #00308f (6.6:1 on yellow, 7.4:1 on blue), 2px underline
   - inline code: ink text on the fill darkened 8%, ink border
   - tables and fenced code: transparent ground, ink text and borders,
     fenced code on a bordered dark block
   - dark mode: border and hard shadow in white
   - focus ring: 3px #00308f
   ============================================================ */

.fern-callout[data-intent] a,
.fern-callout [data-intent] a,
.fern-callout[data-intent] a:hover,
.fern-callout [data-intent] a:hover {
  color: #00308f !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.fern-callout[data-intent] a svg,
.fern-callout [data-intent] a svg {
  color: #00308f !important;
}
.fern-callout[data-intent] :not(pre) > code,
.fern-callout [data-intent] :not(pre) > code {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--nb-ink) !important;
  border: 1px solid var(--nb-ink) !important;
  border-radius: 3px;
}
.fern-callout[data-intent] table,
.fern-callout[data-intent] thead,
.fern-callout[data-intent] tbody,
.fern-callout[data-intent] tr,
.fern-callout[data-intent] th,
.fern-callout[data-intent] td,
.fern-callout[data-intent] .fern-table-root,
.fern-callout[data-intent] .fern-table-root * {
  background: transparent !important;
  color: var(--nb-ink) !important;
  border-color: var(--nb-ink) !important;
}
.fern-callout[data-intent] pre,
.fern-callout[data-intent] .fern-code-block {
  background: #ffffff !important;
  border: 1px solid var(--nb-ink) !important;
}
html.dark .fern-callout[data-intent] pre,
html.dark .fern-callout[data-intent] .fern-code-block {
  background: #111111 !important;
}
html.dark .fern-callout[data-intent],
html.dark .fern-callout [data-intent] {
  border-color: #ffffff;
  box-shadow: 2px 2px 0 #ffffff;
}
.fern-callout[data-intent] a:focus-visible,
.fern-callout [data-intent] a:focus-visible {
  outline: 3px solid #00308f !important;
  outline-offset: 2px;
}

/* ============================================================
   Guide card icons
   Light: the lighter accent the icons had before the brand-blue
   accent landed (#0098F7, the previous accentPrimary), icons only.
   Dark: blue-500 measures 2.5:1 on the black card surface, under the
   3:1 non-text bar, so the icon uses the lifted blue (#8fb0ff, 9.5:1).
   ============================================================ */
.fern-card .card-icon {
  color: #0098f7 !important;
}
html.dark .fern-card .card-icon {
  color: #8fb0ff !important;
}

/* Fern currently pins cURL ahead of TypeScript in the API snippet dropdown.
   Keep Python first, then TypeScript, then cURL for the language menu. */
[role='menu']:has([role='menuitemradio'] svg[icon='python']):has(
    [role='menuitemradio'] svg[icon='js']
  ):has([role='menuitemradio'] svg[icon='terminal']) {
  display: flex !important;
  flex-direction: column !important;
}

[role='group']:has(> [role='menuitemradio'] svg[icon='python']):has(
    > [role='menuitemradio'] svg[icon='js']
  ):has(> [role='menuitemradio'] svg[icon='terminal']) {
  display: flex !important;
  flex-direction: column !important;
}

[role='menuitemradio']:has(svg[icon='python']) {
  order: 1;
}

[role='menuitemradio']:has(svg[icon='js']) {
  order: 2;
}

[role='menuitemradio']:has(svg[icon='terminal']) {
  order: 3;
}

/* ============================================================
   Changelog
   Used only by fern/changelog entries. The strip is the landing
   page's cross-grid tile (.cross-grid in the marketing globals.css)
   on a transparent ground, opened by a mono bracket label.
   ============================================================ */

/* Strip variant switch. `inline-flex` shows the mono bracket
   label ahead of the grid; `none` (current) is the full-width grid variant. */
:root {
  --cl-strip-label: none;
}

.cl-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  height: 37px;
  margin: 4px 0 20px;
}
.cl-strip-label {
  display: var(--cl-strip-label);
  align-items: center;
  flex: none;
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0043ca;
  white-space: nowrap;
}
/* Light mode: the landing's dot-grid (2x2 dot on a 7px pitch, ink at
   40%, pinned 4px down). Dark mode: the cross-grid (6x6 "+" of 1px arms
   on a 14.75px pitch) in blue-500 on the black ground. */
.cl-strip-grid {
  flex: 1 1 auto;
  height: 100%;
  background-image: radial-gradient(circle 1px at 1px 1px, rgba(0, 15, 45, 0.4) 99%, transparent 100%);
  background-size: 7px 7px;
  background-position: 0 4px;
  background-repeat: repeat;
}
html.dark .cl-strip-grid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'%3E%3Cpath d='M7.5 4.5v6M4.5 7.5h6' stroke='%230043ca' stroke-opacity='.5' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 14.75px 14.5px;
  background-position: 0 center;
}

/* Retired-product status banner, used only by changelog entries with a
   retired: frontmatter key. Two variants, switched by the second class
   on the div: cl-status-fill (blue-500 ground, white text, primary) and
   cl-status-outline (page ground, blue border and text). */
.cl-status {
  border: 1px solid #0043ca;
  border-radius: 0;
  padding: 14px 18px;
  margin: 0 0 16px;
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.cl-status-label {
  display: block;
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
/* The site's bracket grammar around the label: "[ STATUS UPDATE (...) ]" */
.cl-status-label::before {
  content: '[ ';
}
.cl-status-label::after {
  content: ' ]';
}
.cl-status code {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 0.9em;
  padding: 1px 5px;
  border-radius: 0;
}
.cl-status-fill {
  background: #0043ca;
  color: #ffffff;
}
.cl-status-fill code {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.cl-status-outline {
  background: transparent;
  color: #0043ca;
}
.cl-status-outline code {
  color: #0043ca;
  background: rgba(0, 67, 202, 0.08);
  border: 1px solid #0043ca;
}
/* Dark mode: blue-500 text on black is 2.5:1, so the outline variant
   lifts its text to blue-300 while the border stays blue-500. */
html.dark .cl-status-outline {
  color: #8fb0ff;
}
html.dark .cl-status-outline code {
  color: #8fb0ff;
  background: rgba(143, 176, 255, 0.1);
  border-color: #0043ca;
}

/* Fern's changelog index clips each entry to a 64px preview behind a
   fade mask, which is what made entries read as fading out. Show the
   whole entry instead. */
.fern-changelog-card-preview {
  max-height: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Timeline marker in blue-500 */
.fern-changelog-card-marker {
  background-color: #0043ca !important;
  border-color: #0043ca !important;
}

/* Titles: Poppins 400 (docs.yml typography) at the landing's display
   ratio, line-height 1.1 and tracking -0.02em. Applies to the changelog
   and to every guide and reference heading, so page titles and section
   headings share one style; only sizes differ. */
.fern-layout-changelog h1,
.fern-changelog-card-title,
.fern-page-heading,
.fern-prose :is(h1, h2, h3, h4, h5, h6),
article :is(h1, h2, h3, h4, h5, h6) {
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
}
.fern-changelog-card-title {
  font-size: 28px !important;
}

/* 2026-08-28: the changelog has no sidebar content, so the empty left
   rail is hidden on changelog pages only. Remove this rule when the
   changelog gains sidebar navigation (years/months) worth showing. */
body:has(.fern-layout-changelog) aside.fern-sidebar-desktop,
body:has(.fern-layout-changelog) .fern-sidebar-container {
  display: none !important;
}

/* Center the changelog column on the page. Fern reserves an empty
   right rail (an aside with no content) on changelog pages, which pushes
   the column left; hide it so the auto margins center the column. The
   feed max-width and auto margins are Fern support's recommended
   override; 52rem keeps the bullet line length readable. Measured equal
   gutters at 1440 (304/304) and 1920 (544/544). */
body:has(.fern-layout-changelog) main > aside {
  display: none !important;
}
.fern-layout-changelog {
  margin-left: auto !important;
  margin-right: auto !important;
}
.fern-changelog-feed {
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
}

/* 2026-09-01: on narrow viewports the feed rendered at its content's
   preferred width (832px) instead of shrinking to the column, running the
   whole timeline off the right edge of the screen with no way to scroll
   back to it. A flex box with only max-width set is sized "shrink-to-fit"
   by default; width: 100% pins it to the column instead, and min-width: 0
   lets it actually shrink below its children's preferred width. Above
   52rem the max-width above still wins, so desktop is unaffected. */
.fern-changelog-feed {
  width: 100%;
  min-width: 0;
}

/* Belt and suspenders for the last few px: a long unbroken entry title or
   link should wrap rather than push the card wider than the column. */
.fern-changelog-card-title,
.fern-changelog-card-link {
  overflow-wrap: anywhere;
}

/* 2026-09-01: below 40rem the date rail (96px sticky block plus 16px gap)
   left the entry text a 173px column on a 390px phone. Stack the date
   above its entries instead. The vertical rail and the blue marker stay
   on the card, so it still reads as a timeline; only the date moves.
   Measured 285px of body text at 390px after this rule. */
@media (max-width: 40rem) {

  .fern-changelog-day-group {
    flex-direction: column !important;
    gap: 0.25rem !important;
  }
  time.fern-changelog-day {
    position: static !important;
    padding: 0 0 0 1.5rem !important;
    width: auto !important;
  }

}
