/*fern-site-stylesheet*/@font-face {
    font-family: 'Geist';
    src: url('/_fern-files/spreadspace.docs.buildwithfern.com/28258d0621216948416a859d32487ab6ad1c9effa0d08795698e70be3c917630/fonts/Geist-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist';
    src: url('/_fern-files/spreadspace.docs.buildwithfern.com/28258d0621216948416a859d32487ab6ad1c9effa0d08795698e70be3c917630/fonts/Geist-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist Mono';
    src: url('/_fern-files/spreadspace.docs.buildwithfern.com/5bc6413e82be410dc057feccee55160495b999d0fe212b7b6c6499b29b8b1e4a/fonts/GeistMono-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 720px;
  --sidebar-width: 320px;
  --page-width: 100vw;
  --logo-height: 30px;
  --font-body: 'Geist', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'Geist', 'Geist', 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: #f7f8fa;
  --accent-2: #f1f3fc;
  --accent-3: #e8ebfd;
  --accent-4: #dbe1ff;
  --accent-5: #ccd5ff;
  --accent-6: #bcc7ff;
  --accent-7: #a6b2ff;
  --accent-8: #8994ff;
  --accent-9: #818cf8;
  --accent-10: #7680eb;
  --accent-11: #4c51b7;
  --accent-12: #252272;

  --accent-a1: #3b7b7d04;
  --accent-a2: #1548fc0a;
  --accent-a3: #c4cdff55;
  --accent-a4: #dbe1ff;
  --accent-a5: #ccd5ff;
  --accent-a6: #bcc7ff;
  --accent-a7: #a6b2ff;
  --accent-a8: #8994ff;
  --accent-a9: #0218f47c;
  --accent-a10: #0013dc87;
  --accent-a11: #01089ab2;
  --accent-a12: #05015cdd;

  --accent-contrast: #fff;
  --accent-surface: #eff1fdcc;
  --accent-indicator: #818cf8;
  --accent-track: #818cf8;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(97.9% 0.0035 276.9);
      --accent-2: oklch(96.5% 0.0124 276.9);
      --accent-3: oklch(94.4% 0.0234 276.9);
      --accent-4: oklch(91.6% 0.0472 276.9);
      --accent-5: oklch(88.4% 0.0704 276.9);
      --accent-6: oklch(84.3% 0.0932 276.9);
      --accent-7: oklch(78.6% 0.1184 276.9);
      --accent-8: oklch(70.6% 0.1583 276.9);
      --accent-9: oklch(68% 0.1583 276.9);
      --accent-10: oklch(64.2% 0.1583 276.9);
      --accent-11: oklch(48.8% 0.1583 276.9);
      --accent-12: oklch(31.5% 0.1323 276.9);

      --accent-a1: color(display-p3 0 0.3294 0.3373 / 0.012);
      --accent-a2: color(display-p3 0 0.2196 0.8824 / 0.036);
      --accent-a3: color(display-p3 0.0039 0.1176 0.9333 / 0.068);
      --accent-a4: color(display-p3 0 0.1647 0.9922 / 0.12);
      --accent-a5: color(display-p3 0 0.1569 0.9686 / 0.176);
      --accent-a6: color(display-p3 0 0.149 0.9686 / 0.24);
      --accent-a7: color(display-p3 0.0039 0.1216 0.9529 / 0.328);
      --accent-a8: color(display-p3 0 0.0824 0.9529 / 0.444);
      --accent-a9: color(display-p3 0 0.0745 0.898 / 0.476);
      --accent-a10: color(display-p3 0 0.0627 0.8078 / 0.52);
      --accent-a11: color(display-p3 0 0.0235 0.5608 / 0.692);
      --accent-a12: color(display-p3 0.0078 0 0.3451 / 0.864);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9373 0.9451 0.9843 / 0.8);
      --accent-indicator: oklch(68% 0.1583 276.9);
      --accent-track: oklch(68% 0.1583 276.9);
    }
  }
}


.light, :root {
  --grayscale-1: #fcfcfd;
  --grayscale-2: #f9f9fb;
  --grayscale-3: #f0f0f3;
  --grayscale-4: #e8e8ec;
  --grayscale-5: #e0e1e6;
  --grayscale-6: #d9d9e0;
  --grayscale-7: #cdced6;
  --grayscale-8: #b9bbc6;
  --grayscale-9: #8b8d98;
  --grayscale-10: #80838d;
  --grayscale-11: #60646c;
  --grayscale-12: #1c2024;

  --grayscale-a1: #00005503;
  --grayscale-a2: #00005506;
  --grayscale-a3: #0000330f;
  --grayscale-a4: #00002d17;
  --grayscale-a5: #0009321f;
  --grayscale-a6: #00002f26;
  --grayscale-a7: #00062e32;
  --grayscale-a8: #00083046;
  --grayscale-a9: #00051d74;
  --grayscale-a10: #00071b7f;
  --grayscale-a11: #0007149f;
  --grayscale-a12: #000509e3;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.988 0.988 0.992);
      --grayscale-2: color(display-p3 0.976 0.976 0.984);
      --grayscale-3: color(display-p3 0.94 0.941 0.953);
      --grayscale-4: color(display-p3 0.908 0.909 0.925);
      --grayscale-5: color(display-p3 0.88 0.881 0.901);
      --grayscale-6: color(display-p3 0.85 0.852 0.876);
      --grayscale-7: color(display-p3 0.805 0.808 0.838);
      --grayscale-8: color(display-p3 0.727 0.733 0.773);
      --grayscale-9: color(display-p3 0.547 0.553 0.592);
      --grayscale-10: color(display-p3 0.503 0.512 0.549);
      --grayscale-11: color(display-p3 0.379 0.392 0.421);
      --grayscale-12: color(display-p3 0.113 0.125 0.14);

      --grayscale-a1: #00005503;
      --grayscale-a2: #00005506;
      --grayscale-a3: #0000330f;
      --grayscale-a4: #00002d17;
      --grayscale-a5: #0009321f;
      --grayscale-a6: #00002f26;
      --grayscale-a7: #00062e32;
      --grayscale-a8: #00083046;
      --grayscale-a9: #00051d74;
      --grayscale-a10: #00071b7f;
      --grayscale-a11: #0007149f;
      --grayscale-a12: #000509e3;

      --grayscale-contrast: #000;
      --grayscale-surface: color(display-p3 1 1 1 / 80%);
      --grayscale-indicator: color(display-p3 0.547 0.553 0.592);
      --grayscale-track: color(display-p3 0.547 0.553 0.592);
    }
  }
}


.dark {
  --accent-1: #05050f;
  --accent-2: #131523;
  --accent-3: #1f2244;
  --accent-4: #272b5e;
  --accent-5: #323671;
  --accent-6: #3e4382;
  --accent-7: #4b5298;
  --accent-8: #5a62b5;
  --accent-9: #818cf8;
  --accent-10: #7680eb;
  --accent-11: #a1adff;
  --accent-12: #d9dfff;

  --accent-a1: #0000e808;
  --accent-a2: #7d8ffe1c;
  --accent-a3: #6c79ff3e;
  --accent-a4: #6571ff59;
  --accent-a5: #6d77fd6d;
  --accent-a6: #7882ff7e;
  --accent-a7: #7d89ff95;
  --accent-a8: #7e89ffb3;
  --accent-a9: #8590fff8;
  --accent-a10: #808bfeeb;
  --accent-a11: #a1adff;
  --accent-a12: #d9dfff;

  --accent-contrast: #fff;
  --accent-surface: #20243e80;
  --accent-indicator: #818cf8;
  --accent-track: #818cf8;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(12.3% 0.0235 276.9);
      --accent-2: oklch(20% 0.0275 276.9);
      --accent-3: oklch(26.8% 0.0627 276.9);
      --accent-4: oklch(31.5% 0.0907 276.9);
      --accent-5: oklch(36.2% 0.0992 276.9);
      --accent-6: oklch(41.2% 0.1036 276.9);
      --accent-7: oklch(46.7% 0.1119 276.9);
      --accent-8: oklch(53% 0.1287 276.9);
      --accent-9: oklch(68% 0.1583 276.9);
      --accent-10: oklch(64.2% 0.1583 276.9);
      --accent-11: oklch(77.1% 0.1205 276.9);
      --accent-12: oklch(90.8% 0.0442 276.9);

      --accent-a1: color(display-p3 0 0 0.9725 / 0.025);
      --accent-a2: color(display-p3 0.5059 0.5804 0.9961 / 0.106);
      --accent-a3: color(display-p3 0.4588 0.4902 1 / 0.235);
      --accent-a4: color(display-p3 0.4196 0.4549 1 / 0.337);
      --accent-a5: color(display-p3 0.4549 0.4824 1 / 0.409);
      --accent-a6: color(display-p3 0.4941 0.5255 1 / 0.478);
      --accent-a7: color(display-p3 0.5098 0.5529 1 / 0.563);
      --accent-a8: color(display-p3 0.5176 0.5569 0.9961 / 0.677);
      --accent-a9: color(display-p3 0.5451 0.5804 1 / 0.944);
      --accent-a10: color(display-p3 0.5255 0.5608 1 / 0.891);
      --accent-a11: color(display-p3 0.6549 0.6941 1 / 0.976);
      --accent-a12: color(display-p3 0.8667 0.8863 1 / 0.988);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.1255 0.1412 0.2275 / 0.5);
      --accent-indicator: oklch(68% 0.1583 276.9);
      --accent-track: oklch(68% 0.1583 276.9);
    }
  }
}


.dark {
  --grayscale-1: #111113;
  --grayscale-2: #18191b;
  --grayscale-3: #212225;
  --grayscale-4: #272a2d;
  --grayscale-5: #2e3135;
  --grayscale-6: #363a3f;
  --grayscale-7: #43484e;
  --grayscale-8: #5a6169;
  --grayscale-9: #696e77;
  --grayscale-10: #777b84;
  --grayscale-11: #b0b4ba;
  --grayscale-12: #edeef0;

  --grayscale-a1: #00000000;
  --grayscale-a2: #d8f4f609;
  --grayscale-a3: #ddeaf814;
  --grayscale-a4: #d3edf81d;
  --grayscale-a5: #d9edfe25;
  --grayscale-a6: #d6ebfd30;
  --grayscale-a7: #d9edff40;
  --grayscale-a8: #d9edff5d;
  --grayscale-a9: #dfebfd6d;
  --grayscale-a10: #e5edfd7b;
  --grayscale-a11: #f1f7feb5;
  --grayscale-a12: #fcfdffef;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.074);
      --grayscale-2: color(display-p3 0.095 0.098 0.105);
      --grayscale-3: color(display-p3 0.13 0.135 0.145);
      --grayscale-4: color(display-p3 0.156 0.163 0.176);
      --grayscale-5: color(display-p3 0.183 0.191 0.206);
      --grayscale-6: color(display-p3 0.215 0.226 0.244);
      --grayscale-7: color(display-p3 0.265 0.28 0.302);
      --grayscale-8: color(display-p3 0.357 0.381 0.409);
      --grayscale-9: color(display-p3 0.415 0.431 0.463);
      --grayscale-10: color(display-p3 0.469 0.483 0.514);
      --grayscale-11: color(display-p3 0.692 0.704 0.728);
      --grayscale-12: color(display-p3 0.93 0.933 0.94);

      --grayscale-a1: #00000000;
      --grayscale-a2: #d8f4f609;
      --grayscale-a3: #ddeaf814;
      --grayscale-a4: #d3edf81d;
      --grayscale-a5: #d9edfe25;
      --grayscale-a6: #d6ebfd30;
      --grayscale-a7: #d9edff40;
      --grayscale-a8: #d9edff5d;
      --grayscale-a9: #dfebfd6d;
      --grayscale-a10: #e5edfd7b;
      --grayscale-a11: #f1f7feb5;
      --grayscale-a12: #fcfdffef;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.415 0.431 0.463);
      --grayscale-track: color(display-p3 0.415 0.431 0.463);
    }
  }
}

.light, :root {
  color-scheme: light;
  --accent: rgba(129, 140, 248, 1);
  --background: rgba(250, 250, 252, 1);
  --border: rgba(233, 233, 239, 1);
  --sidebar-background: rgba(255, 255, 255, 1);
  --header-background: rgba(250, 250, 252, 1);
  --card-background: rgba(255, 255, 255, 1);
  --theme-color: #fafafc;
}

.dark {
  color-scheme: dark;
  --accent: rgba(129, 140, 248, 1);
  --background: rgba(6, 6, 8, 1);
  --border: rgba(26, 27, 30, 1);
  --sidebar-background: rgba(10, 10, 12, 1);
  --header-background: rgba(6, 6, 8, 1);
  --card-background: rgba(10, 10, 12, 1);
  --theme-color: #060608;
}

/* Inter — used ONLY for the header "Docs" lockup label below. Must stay
   the first statement in this file (@import precedes all rules per CSS spec). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400..700&display=swap');

/* SpreadSpace docs theme.
   Fonts + brand colors come from docs.yml (typography + colors blocks); this
   file only does layout/spacing/contrast polish and drives everything off
   Fern's auto-generated CSS variables — no hardcoded hex except HTTP-method
   accents below. */

/* ---------- Header logo "Docs" lockup ---------- */
/* Append a "Docs" label to the right of the SpreadSpace wordmark. Fern renders
   the logo as an <img> inside `a[data-fern-logo]`, which is itself a flex row
   (align-items:center) — so a ::after pseudo rides inline after the mark, already
   vertically centered with it. Inter comes from the @import at the top of this
   file (variable 400..700 axis). Scoped to the header container so a
   mobile/footer logo instance never picks it up. */
.fern-header-logo-container a[data-fern-logo]::after {
  content: "Docs";
  margin-left: -0.2rem;
  font-family: "Inter", system-ui, sans-serif;
  /* 650 on the variable axis, between Semibold and Bold. Was 500 (Medium);
     Zach 2026-08-18 stepped it up three times ("a tiny bit more stroke",
     "little more boldness", "slightly more weighty" past 600). The @import
     above loads the 400..700 range, so any value in it renders exactly. */
  font-weight: 650;
  font-size: 0.9875rem;
  line-height: 1;
  letter-spacing: -0.005em;
  /* The docs' indigo in BOTH themes: --accent-a11 is the text step Fern
     derives from the #818cf8 accent per theme (rgb(163,173,249) on dark, the
     body-link ink on light). Zach 2026-08-18: "try using the same purple ...
     on docs instead of white". The 2026-09-18 light-mode work moved the dark
     label onto the wordmark's #EDEEF0 ink and left only light on the indigo;
     Zach 2026-09-19, on the dark header: "not sure what happened to my indigo
     but it turned into ... white when we changed light mode". Indigo it is,
     no per-theme override. (Fern flags the theme with a `dark` class on
     <html>; light is its absence, which also covers the pre-hydration frame.
     Every light-only rule in this file takes the html:not(.dark) shape.) */
  color: var(--accent-a11);
  white-space: nowrap;
  /* nudge the label down off the wordmark baseline */
  position: relative;
  top: 0.15rem;
}

/* ---------- Header "Start spreading today" button ---------- */
/* docs.yml navbar-links renders one filled button (a.fern-button.filled) at the
   header's right; Fern's own paint is accent #818cf8 + white at weight 400. It
   wears the marketing hero's ghost CTA instead (RevealHero.tsx .lh-reveal-btn +
   .lh-reveal-btn--ghost, the "Talk with our team" rectangle; Zach 2026-09-19:
   "just do it like this but say Start spreading today"): 600 #818cf8 ink and a
   1px #818cf8 rule on #0a0a0c, square corners, the hero's arrow, hover lightens
   ink + rule to #a5b4fc over #101018. No lift, glow or gradient, as there.
   Sized to the header, not the hero: 2.25rem tall, the h-9 band the search box
   and the theme toggle already share, so its outline meets theirs top and
   bottom. The filled cut before it (2.75rem / 1rem text / 1.5rem pad) stood
   0.25rem proud of that band on each side (Zach 2026-09-19: "this looks way
   too big"). Text, side pad, gap and arrow are the hero's 19 / 23.75 / 12 / 18px
   scaled by 14/19. The right margin seats it a step left of Fern's theme toggle
   instead of flush against it ("move Spread here over left"). Under Fern's
   64rem header breakpoint the header copy hides and the menu drawer
   (#fern-sidebar) renders its own copy of the link: it takes the same paint
   and keeps Fern's drawer geometry (full width, 2.5rem tall). Scoped to those
   two seats so the playground's filled buttons stay Fern's. Hover restates
   fill + ink so Fern's own hover wash never shows through. */
.fern-header-content a.fern-button.filled,
#fern-sidebar a.fern-button.filled {
  gap: 0.5625rem;
  border: 1px solid #818cf8;
  border-radius: 0;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1;
  color: #818cf8;
  background: #0a0a0c;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.fern-header-content a.fern-button.filled {
  height: 2.25rem;
  min-height: 0;
  padding: 0 1.125rem;
  margin-right: 1.25rem;
}
/* The pair (button + Fern's theme toggle) share this nav, the header row's last
   flex child, so the toggle rested flush on the header's 2rem side pad. One
   right margin here steps both a little in from the edge together (Zach
   2026-09-24: "push these buttons slightly left"); the 1.25rem between them
   above is untouched. */
.fern-header-content nav.fern-header-navbar-links {
  margin-right: 0.75rem;
}
/* The hero's ArrowIcon (20-unit viewBox, 1.75 stroke, round caps) as a mask, so
   it takes the ink in rest and hover alike. Painted here rather than through
   docs.yml `rightIcon`, which would swap in a Font Awesome arrow. */
.fern-header-content a.fern-button.filled::after,
#fern-sidebar a.fern-button.filled::after {
  content: '';
  flex: none;
  width: 0.8125rem;
  height: 0.8125rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M3 10h13M11 5l5 5-5 5' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M3 10h13M11 5l5 5-5 5' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.fern-header-content a.fern-button.filled:hover,
#fern-sidebar a.fern-button.filled:hover {
  color: #a5b4fc;
  border-color: #a5b4fc;
  background: #101018;
}
/* Light theme: the same ghost cut on the light shell's own surfaces. The fill
   is the light card white (docs.yml card-background, the slot #0a0a0c fills on
   dark); ink and rule are --accent-a11, the text step the "Docs" lockup wears,
   because #818cf8 on white is about 3:1 and fails as 14px text. Hover steps the
   ink deeper instead of lighter, over a faint indigo wash. */
html:not(.dark) .fern-header-content a.fern-button.filled,
html:not(.dark) #fern-sidebar a.fern-button.filled {
  color: var(--accent-a11);
  border-color: var(--accent-a11);
  background: #fff;
}
html:not(.dark) .fern-header-content a.fern-button.filled:hover,
html:not(.dark) #fern-sidebar a.fern-button.filled:hover {
  color: var(--accent-a12);
  border-color: var(--accent-a12);
  background: #f5f6ff;
}

/* ---------- Header vertical nudge ---------- */
/* Drop the whole header row (logo lockup, search, Ask AI) down a few px so it
   sits lower in the 64px bar — less crowded against the top edge, closer in line
   with the content rail. Translate (not padding) so the header's bottom hairline
   stays put; the row is short enough in the 64px bar that it never clips. */
.fern-header-content {
  transform: translateY(0.375rem);
}

/* ---------- Hide the product-switcher dropdown ---------- */
/* We use Fern "products" only for the Plaid-style drill-in (a focused area + the
   "← All docs" back link). Fern's default entry to a product is the header switcher
   dropdown — hidden here so the only way INTO the API area is the cards on the Quick
   Start page, and the only way OUT is the sidebar "← All docs" back link. No dropdown. */
.fern-product-selector,
.product-dropdown-trigger {
  display: none !important;
}

/* Pin the manual "← All docs" back link (product-api.yml) to the top of the API
   sidebar so it stays visible while scrolling the long endpoint list — matching how
   Plaid's "‹ ALL DOCS" stays put. Targets the nav link by its back-href. */
.fern-sidebar-desktop a.fern-sidebar-link[href$="/get-started/quick-start"] {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--sidebar-background);
  /* Gap so the endpoint list sits a little below the "← All docs" back link. */
  margin-bottom: 0.875rem;
}

/* ---------- Headings ---------- */
.fern-page-heading h1,
.fern-page-heading {
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.018em;
}

/* Deck spacing. Fern renders the frontmatter `subtitle:` at Tailwind mt-2 (8px),
   which crowds it against the 2rem h1 — heading and deck read as one block.
   Unlayered, so it wins over Fern's layered mt-2/space-y-2 utilities on specificity
   alone (no !important). Hits every page carrying a `subtitle:`. */
.fern-page-subtitle {
  margin-top: 1.25rem;
}

.fern-layout-guide :is(h2, h3, h4),
.fern-layout-overview :is(h2, h3, h4),
.fern-layout-reference :is(h2, h3, h4) {
  font-weight: 600;
  letter-spacing: -0.012em;
}

.fern-layout-guide h2,
.fern-layout-overview h2,
.fern-layout-reference h2 {
  font-size: 1.375rem;
  line-height: 1.3;
  margin-top: 2.75rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--grayscale-a3);
}

.fern-layout-guide h3,
.fern-layout-overview h3,
.fern-layout-reference h3 {
  font-size: 1.125rem;
  line-height: 1.4;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.fern-layout-guide h4,
.fern-layout-overview h4,
.fern-layout-reference h4 {
  font-size: 1rem;
  margin-top: 1.5rem;
}

/* Defer to Fern's tight component-heading spacing. API-reference section
   headings (Request/Response/Headers/…) carry .mt-0/.mb-0 for inline layouts —
   e.g. the "Request" heading shares a flex row with the content-type selector.
   Our generic heading margins above would push the heading out of line with it. */
.fern-layout-reference :is(h1, h2, h3, h4, h5, h6).mt-0 {
  margin-top: 0 !important;
}
.fern-layout-reference :is(h1, h2, h3, h4, h5, h6).mb-0 {
  margin-bottom: 0 !important;
}

/* ---------- Body rhythm ---------- */
/* Fern's default prose color sits at the muted --grayscale-a11 step — reads dim
   next to headings/code, which are already pinned to the brighter -a12 step
   elsewhere in this file. Bump body copy to the same -a12 token so description
   text doesn't look washed out. */
.fern-layout-guide p,
.fern-layout-overview p,
.fern-layout-reference p,
.fern-layout-guide li,
.fern-layout-overview li,
.fern-layout-reference li {
  line-height: 1.7;
  color: var(--grayscale-a12);
}

.fern-layout-guide p,
.fern-layout-overview p,
.fern-layout-reference p {
  margin-bottom: 1rem;
}

/* API property/section descriptions: kill the prose paragraph margins that read
   as double blank lines. Fern wraps every description in .fern-prose.text-sm,
   whose typography defaults give each <p> a 1.25em top margin (+ the 1rem
   bottom margin above) — inside a space-y-3 property block that rendered as ~2
   empty lines between a property's name row and its text, and again before the
   next divider, on every endpoint page. The block's own space-y-3 (12px) is the
   whole intended rhythm; paragraphs contribute none. Multi-paragraph
   descriptions keep a small internal gap. */
.fern-layout-reference .fern-prose.text-sm p {
  margin-top: 0;
  margin-bottom: 0;
}
.fern-layout-reference .fern-prose.text-sm p + p {
  margin-top: 0.625rem;
}

/* Links: accent text, underline only on hover */
.fern-mdx-link,
.fern-layout-guide a,
.fern-layout-overview a,
.fern-layout-reference a {
  color: var(--accent-a11);
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.15s ease;
}
.fern-mdx-link:hover,
.fern-layout-guide a:hover,
.fern-layout-overview a:hover,
.fern-layout-reference a:hover {
  text-decoration-color: currentColor;
}

/* ---------- Code ---------- */
/* Inline code: subtle theme-aware chip (grayscale-a* adapts light/dark). Geist
   sans, not mono — mono is reserved for the right-hand request/response panels. */
:not(pre) > code {
  background: var(--grayscale-a3);
  border: 1px solid var(--grayscale-a4);
  border-radius: var(--radius-1);
  padding: 0.1em 0.34em;
  font-size: 0.875em;
  font-family: "Geist", system-ui, sans-serif;
  color: var(--grayscale-a12) !important;
}
/* White, not accent green, for the text inside inline code chips (and any
   syntax-colored child spans). */
:not(pre) > code * {
  color: var(--grayscale-a12) !important;
}

/* Code blocks: lift off the page, generous padding, soft hairline */
pre,
.fern-code-block {
  border: 1px solid var(--grayscale-a4);
  border-radius: var(--radius-3);
}
pre {
  padding: 1rem 1.1rem;
  line-height: 1.6;
}

/* API-reference code panels ship at 16px — oversized. Keep the panel base tight;
   the CODE body (cURL + JSON) is bumped to ~13px just below. */
.fern-endpoint-code-snippets {
  font-size: 0.6875rem;
  line-height: 1.5;
}

/* The code body INSIDE both boxes — cURL request (<pre>) and JSON response (a
   <table> of .code-block-line) — at ~13px for readability. "Just inside": the
   header path/selector keep their own size. */
.fern-endpoint-code-snippets pre,
.fern-endpoint-code-snippets pre *,
.fern-endpoint-code-snippets .code-block-line,
.fern-endpoint-code-snippets .code-block-line * {
  font-size: 0.8125rem !important;
  line-height: 1.5 !important;
}
.fern-endpoint-code-snippets .code-block-line :is(td, th) {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

/* Terminal look — strip the spreadsheet grid Fern draws on the code <table>:
   per-cell borders + the line-number gutter's right/bottom dividers. */
.fern-endpoint-code-snippets .code-block-line :is(td, th),
.fern-endpoint-code-snippets .code-block-line-gutter {
  border: 0 !important;
}

/* Wrap long lines instead of horizontal-scrolling, so nothing is ever clipped
   and the horizontal scrollbar never appears. */
.fern-endpoint-code-snippets pre,
.fern-endpoint-code-snippets .code-block-line,
.fern-endpoint-code-snippets .code-block-line :is(td, th),
.fern-endpoint-code-snippets .code-block-line span {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
}
.fern-endpoint-code-snippets .fern-x-overflow {
  overflow-x: hidden !important;
}

/* SDK + guide markdown code blocks render as the same gutter-grid <table> as the
   API-reference response panel — give them the identical terminal treatment: strip
   the per-cell borders + line-number-gutter dividers, wrap instead of horizontal-
   scrolling, tighten the rows, and match the ~13px size. */
.fern-layout-guide .code-block-line :is(td, th),
.fern-layout-guide .code-block-line-gutter {
  border: 0 !important;
}
.fern-layout-guide .code-block-line :is(td, th) {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}
.fern-layout-guide .code-block-line,
.fern-layout-guide .code-block-line :is(td, th),
.fern-layout-guide .code-block-line span {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
}
.fern-layout-guide .code-block-line,
.fern-layout-guide .code-block-line * {
  font-size: 0.8125rem !important;
  line-height: 1.5 !important;
}

/* …but NEVER wrap the line-number gutter — the cell-level overflow-wrap above was
   splitting two-digit line numbers ("10" → a stacked "1"/"0"). Scoped with the
   gutter class so it out-specifies the wrap rules (covers API panels + SDK/guide
   markdown blocks alike). */
.fern-endpoint-code-snippets .code-block-line .code-block-line-gutter,
.fern-endpoint-code-snippets .code-block-line .code-block-line-gutter *,
.fern-layout-guide .code-block-line .code-block-line-gutter,
.fern-layout-guide .code-block-line .code-block-line-gutter * {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

/* SDK / guide code cards are airier than the API-reference panels — the card adds
   ~16px padding and the inner blocks another ~12px (~28px of vertical air), vs the
   API panel's tight ~8px. Drop the extra so the SDK terminals read at the same
   density (markdown blocks just don't get the header bar on top). */
.fern-layout-guide .code-block-root {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.fern-layout-guide .code-block,
.fern-layout-guide .code-block-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* The SDK code-card hairline reads a touch heavy at 1px — halve it to 0.5px. Guide
   pages only; the API-reference panels keep their own (top-edge) border treatment. */
.fern-layout-guide .fern-code-block {
  border-width: 0.5px !important;
}

/* SDK / guide pages are single-column — keep ALL content (prose, tables, code) in
   ONE readable column, left-aligned under the page title. The API reference reaches
   the right edge only because it's a two-column layout; stretching code full-width on
   a single column just strands it in empty space next to narrow prose. .w-content-width
   already pins the column to docs.yml's content-width, so every block already shares
   one width — we only override Fern's mx-auto so the whole column hugs the left
   instead of floating centered. (Laptop-width look — recentered above 112rem by
   the fluid-layout section near the end of this file.) */
.fern-layout-guide .w-content-width {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* ---------- Request terminal header (Plaid-style) ---------- */
/* Show just the resource path. Fern renders "DELETE /api/custom-lending-types/:id"
   in the request panel header; drop the HTTP-method badge and the /api/ prefix so
   it reads "custom-lending-types/:id". The path is a row of segment spans — the
   first three (`/`, `api`, `/`) are the prefix. Scoped to the code panel, so the
   page-title badge and the cURL body URL stay intact, and the response panel
   (status badge, no path) is untouched. */
.fern-endpoint-code-snippets [data-badge-type="http-method"] {
  display: none !important;
}
.fern-endpoint-code-snippets .font-mono.text-xs > span:nth-child(-n + 3) {
  display: none !important;
}

/* ---------- Code panel: one unified card ---------- */
/* Fern nests a bordered, fully-rounded code body (.code-block-root) INSIDE the
   outer card, so each panel reads as "a rounded card inside a square." Flatten it
   into ONE rounded card: drop the inner body's border + top rounding so it sits
   flush, and separate it from the header with a single faint divider line
   (Plaid-style). The outer card keeps the rounding; only the inner outline goes. */
.fern-endpoint-code-snippets .code-block-root {
  border-width: 1px 0 0 0 !important; /* keep only the top edge as a faint divider */
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
/* Outer card stroke: much fainter — a barely-there grey outline. */
.fern-endpoint-code-snippets .border-card-border {
  border-color: var(--grayscale-a3) !important;
}

/* ---------- The page never scrolls sideways ---------- */
/* Every block in this sheet adapts to the viewport (the endpoint halves shrink, code
   pre-wraps, guide tables unwind to the pane or keep Fern's own scroll box under
   56rem), so page-level sideways overflow is always a defect, never content. Pin
   that at the root: the viewport keeps its vertical scroll, a trackpad or wheel
   cannot drag the page sideways, and no horizontal scrollbar can appear. Zach
   2026-09-05: "no horizontal scroll ... horizontal scroll creates all kinds of
   issues and clunkiness". Verified 2026-09-05 (Chromium, 1512px viewport, with the
   old 640px aside below deliberately left overflowing by 92px): wheel(300, 0)
   moved the page 92px before this rule, 0px after. Root element ONLY: overflow-x
   on <body> as well would make body its own scroll container and the sticky code
   panels / sidebar would stop sticking. Element-level scroll boxes (Fern's table
   ScrollArea under 56rem, the endpoint URL bar's .fern-x-overflow) are their own
   scrollers and are untouched. */
html {
  overflow-x: hidden;
}

/* ---------- Endpoint two-column balance ---------- */
/* The code aside fills its grid column and NEVER exceeds it. It used to carry a
   40rem floor ("so long cURL lines keep their room"); that floor WAS the docs'
   horizontal scroll. The halves were (viewport - 20rem sidebar - 4rem padding -
   6rem gutter) / 2, i.e. 480px at 1440 and 600px at 1680 (3rem gutter since
   2026-09-05: 504px and 624px), so a 640px aside poked
   past the viewport and the whole PAGE scrolled sideways between the 90rem stack
   point and ~106rem (measured 2026-09-05 on the hosted site: 1440 -> 1568px of
   document, 1512 -> 1604, 1600 -> 1648, 1680 -> 1688; clean from 1728 up). On
   phones, where the aside is the single stacked column, it forced 640px onto a
   390px viewport (656px of document, 266px of sideways scroll on EVERY endpoint
   page). Long lines already pre-wrap inside the panel, and the panel header still
   fits at 480px (path 282px + controls 180px), so the floor bought nothing. */
.fern-layout-reference-aside {
  width: 100% !important;
  min-width: 0 !important;
}

/* Content (left/"orange") side: ~15% larger and all-Geist. Property names and
   inline code drop the mono — mono stays only in the code panels on the right. */
.fern-layout-reference-content :is(p, li, .fern-api-property-meta) {
  font-size: 1rem;
}
.fern-api-property-name,
.fern-api-property-key {
  font-family: "Geist", system-ui, sans-serif !important;
  font-size: 1rem;
}

/* ---------- Cards & tables ---------- */
/* Link cards (the Get started entry cards, "Read next" groups): Stripe-style.
   Zach 2026-08-18: "the cards here aren't cool, they should be Stripe here".
   Fern's default is a tall stacked card (32px icon above the title, 24px
   padding, 12px radius, ~190px tall). Recut as a compact row: a 22px icon in
   the brand accent inline-left of a 15px semibold title, a 14px muted one-line
   description under it, 16px/18px padding, 8px radius, hairline border, and a
   hover that lifts the border and tints the background rather than moving the
   card. ~106px tall at the 2-column width. Selectors are structural
   (.card-icon + its text column) because Fern's inner classes are Tailwind +
   styled-jsx hashes. Icons: Fern inlines the SVG file inside .card-icon and
   sets color: var(--accent-a10) on it, so a currentColor icon takes the accent;
   the fill/stroke rules below normalise the baked-#818cf8 files (fill for the
   filled glyphs, stroke for the outlined webhook glyph) to the same accent so
   every card icon is one color. Do NOT fill descendants: the transparent
   backdrop rect some icons carry (fill="none") must stay empty. */
.fern-card {
  border: 1px solid var(--grayscale-a4);
  border-radius: 0.5rem;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.fern-card:hover {
  border-color: var(--grayscale-a7);
}
.fern-card.interactive {
  padding: 1rem 1.125rem !important;
  border-radius: 0.5rem !important;
  border-color: var(--grayscale-a4) !important;
  background: transparent !important;
}
.fern-card.interactive:hover {
  border-color: var(--grayscale-a7) !important;
  background: var(--grayscale-a2) !important;
}
.fern-card.interactive > div {
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 0.875rem !important;
}
.fern-card.interactive > div > * + * {
  margin-top: 0 !important;
}
.fern-card .card-icon {
  width: 1.375rem !important;
  height: 1.375rem !important;
  flex: 0 0 auto;
  margin-top: 0.0625rem;
  color: var(--accent-a10) !important;
}
.fern-card .card-icon svg {
  color: inherit !important;
  fill: currentColor;
}
.fern-card .card-icon svg[stroke] {
  fill: none;
  stroke: currentColor;
}
.fern-card .card-icon + div > div:first-child {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.fern-card .card-icon + div > div:last-child {
  font-size: 0.875rem;
  line-height: 1.45;
  margin-top: 0.125rem !important;
}
.fern-card .card-icon + div > div:last-child p {
  margin: 0;
}
.fern-card-group {
  gap: 0.75rem !important;
}

.fern-layout-guide table,
.fern-layout-overview table,
.fern-layout-reference table {
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.fern-layout-guide :is(th, td),
.fern-layout-overview :is(th, td),
.fern-layout-reference :is(th, td) {
  border: 1px solid var(--grayscale-a3);
  padding: 0.55rem 0.8rem;
}
.fern-layout-guide th,
.fern-layout-overview th,
.fern-layout-reference th {
  background: var(--grayscale-a2);
  font-weight: 600;
  text-align: left;
}

/* ---------- Tables on guide pages: shown whole, never scrolled ---------- */
/* Fern wraps every markdown table in a Radix ScrollArea (.fern-table-root >
   .fern-scroll-area > .fern-scroll-area-viewport) pinned to the 48rem prose
   measure, so any table wider than the measure is clipped behind a horizontal
   scrollbar (the attribute catalog's 5-column tables need ~845px at their
   narrowest; the measure is 768px). Zach 2026-08-18: "tables shouldn't have a
   horizontal scroll, they should just be wide enough to view on their own."
   So on guide/overview pages a table takes its own width: the root sizes to
   the table (max-content), capped at the pane the article sits in and at
   80rem, and the ScrollArea is unwound into plain blocks so nothing scrolls or
   clips. A table narrower than the measure is unchanged; a wider one grows to
   the right over the empty margin, and its prose columns wrap once the cap is
   hit. The first column is the key column (attribute name, event name, field
   name): its code stays on one line at every width the pane can carry it, and
   headers never wrap (the 64-77rem band below is the one exception: a 4+ column
   table's headers may break there to keep the table inside the pane).
   `100cqw` is the guide's own content box (the article's containing block),
   so the cap tracks the responsive padding and never reaches the right rail.
   The >=112rem / >=140rem variants subtract the article's centering margin
   from the fluid-layout section below (margin-left = 50% - 33rem/34rem of the
   same content box, i.e. 50cqw - 33rem), so the table's right edge still
   lands on the pane's edge, never past it. Measured 2026-08-18 in Chrome:
   1728px -> table 353..1375 (rail at 1408); 1920px -> 433..1567 (pane edge
   1568); 2560px -> 737..2207 (pane edge 2208), no page-level overflow.
   Under 56rem (phones, portrait tablets) none of this applies: a five-column
   table cannot fit a 358px pane however it wraps, and unwinding the ScrollArea
   there pushed the whole PAGE into a horizontal scroll (measured: 699px of
   document width on a 390px viewport). Below that width Fern's own
   scroll-inside-the-table stays, which is the least bad thing a phone can do
   with a data table. */
@media (min-width: 56rem) {

  .fern-layout-guide,
  .fern-layout-overview {
    container-type: inline-size;
  }
  :is(.fern-layout-guide, .fern-layout-overview) .fern-table-root {
    display: block !important;
    width: max-content !important;
    max-width: min(100cqw, 80rem) !important;
    overflow: visible !important;
  }
  :is(.fern-layout-guide, .fern-layout-overview) .fern-table-root :is(.fern-scroll-area, .fern-scroll-area-viewport) {
    display: block !important;
    width: auto !important;
    overflow: visible !important;
  }
  :is(.fern-layout-guide, .fern-layout-overview) .fern-table-root .fern-scroll-area-viewport > div {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
  }
  :is(.fern-layout-guide, .fern-layout-overview) .fern-table-root .fern-scroll-area-scrollbar {
    display: none !important;
  }
  :is(.fern-layout-guide, .fern-layout-overview) table.fern-table {
    width: 100% !important;
  }
  :is(.fern-layout-guide, .fern-layout-overview) table.fern-table th,
  :is(.fern-layout-guide, .fern-layout-overview) table.fern-table td:first-child code {
    white-space: nowrap;
  }
  /* Sample documents: every table on the page takes the widest table's width
     (SBA forms, 823px at the docs' type scale, measured 2026-08-18), so the
     two- and three-column tables carry dead space at the right of their cells
     instead of four ragged right edges. Zach 2026-08-18: "all tables should be
     equal to the width of table 3, adding dead space to tables 1 and 2." The
     page opts in with an empty <div className="ss-uniform-tables" /> marker
     at the top of its MDX; nothing else on the page changes. min-width, not
     width, so a longer row in the widest table still shows whole (the others
     then trail it until 51.5rem is re-measured); min() against the pane so
     nothing can overflow the cap above. */
  .fern-layout-guide:has(.ss-uniform-tables) .fern-table-root {
    min-width: min(51.5rem, 100cqw) !important;
  }

}
@media (min-width: 112rem) {

  .fern-layout-guide .fern-table-root {
    max-width: min(100cqw, 50cqw + 33rem, 80rem) !important;
  }

}
@media (min-width: 140rem) {

  .fern-layout-guide .fern-table-root {
    max-width: min(100cqw, 50cqw + 34rem, 80rem) !important;
  }

}
/* 80rem-97rem: Fern shows the "On this page" rail from xl (80rem), but the
   pane it leaves (viewport - 20rem sidebar - 20rem rail - 4rem padding =
   576-848px) is narrower than a wide table's narrowest layout (~845px for a
   5-column table with unbroken code names). Rather than wrap the key column,
   drop the rail on pages that carry a 4+ column table: the pane grows to
   >=896px and the table shows whole. Above 97rem both fit; below 80rem Fern
   drops the rail itself. Two- and three-column tables never need this. */
@media (min-width: 80rem) and (max-width: 96.9375rem) {

  main.fern-main:has(.fern-layout-guide table.fern-table th:nth-child(4)) #fern-toc {
    display: none !important;
  }

}
/* Below the widths where even the whole pane can't carry the widest table
   (sidebar shown, no rail: 64rem-77rem, pane 640-847px), let the key column
   break so the table shrinks to the pane instead of pushing the whole page
   into a horizontal scroll (phones are handled above: under 56rem the table
   keeps Fern's own scroll box). The floor on the first cell of a 4+ column
   table keeps the key column from being starved (an auto-layout table hands a
   breakable column almost nothing once the others are longer); a broken name
   is the last resort, never the first. */
@media (min-width: 64rem) and (max-width: 76.9375rem) {

  :is(.fern-layout-guide, .fern-layout-overview) table.fern-table td:first-child code {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  :is(.fern-layout-guide, .fern-layout-overview) table.fern-table:has(th:nth-child(4)) td:first-child {
    min-width: 12rem;
  }
  /* ...and let a 4+ column table's headers wrap as well. With the key column at its
     12rem floor the catalog's widest table still needed 682px against a 640px pane
     at 1024 (its last 10px poked past the viewport, 1024-1035 only); a wrapped
     "When present" header brings it to 656px, inside the pane's padding. Measured
     2026-09-05. Above 77rem the pane carries the table and headers stay on one
     line. */
  :is(.fern-layout-guide, .fern-layout-overview) table.fern-table:has(th:nth-child(4)) th {
    white-space: normal;
  }

}

/* ---------- "On this page": blank when it has nothing to offer ---------- */
/* A rail with a single entry is not a table of contents, and a page that fits
   the viewport has nothing to jump to. Zach 2026-08-18: "if there is no scroll
   we don't need an On this page section." One entry is decided here at first
   paint (the object pages, one "Attributes" heading each, are the whole family
   today; Fern's list is flat, ul.toc-root > li[data-depth]); no-scroll needs a
   measurement, so custom.js §12 sets .ss-toc-idle and re-checks on resize and
   layout changes. visibility, not display: the rail keeps its width, so the
   pane (and the article the >=112rem section below centers inside it at
   50cqw - 33rem) does not shift 160px between a page with a rail and one
   without. */
#fern-toc:has(ul.toc-root > li:only-child),
#fern-toc.ss-toc-idle {
  visibility: hidden;
}

/* ---------- Badges ---------- */
.fern-docs-badge {
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: var(--radius-1);
  border: 1px solid var(--grayscale-a5);
}
.fern-docs-badge.small {
  font-size: 0.6875rem;
}

/* Method-badge labels (GET/POST/PATCH/DELETE): brighter and heavier. Fern's
   subtle chips paint the label in the Radix a11 tint (--green-a11 etc.), which
   reads muddy on the dark tint bg — lift each toward white while keeping the
   hue, and bump the weight. The .solid variant's label is already white; it
   picks up only the weight bump from the shared selector. (The white lift is
   dark-only: the light rules right below hand the label back to the plain
   a11 tint, which Radix already sizes for a light surface.) */
.fern-docs-badge[data-http-method] {
  font-weight: 600;
}
.fern-docs-badge[data-http-method].subtle.green {
  color: color-mix(in oklab, var(--green-a11) 55%, white);
}
.fern-docs-badge[data-http-method].subtle.red {
  color: color-mix(in oklab, var(--red-a11) 55%, white);
}
.fern-docs-badge[data-http-method].subtle.blue {
  color: color-mix(in oklab, var(--blue-a11) 55%, white);
}
.fern-docs-badge[data-http-method].subtle.orange {
  color: color-mix(in oklab, var(--orange-a11) 55%, white);
}
html:not(.dark) .fern-docs-badge[data-http-method].subtle.green {
  color: var(--green-a11);
}
html:not(.dark) .fern-docs-badge[data-http-method].subtle.red {
  color: var(--red-a11);
}
html:not(.dark) .fern-docs-badge[data-http-method].subtle.blue {
  color: var(--blue-a11);
}
html:not(.dark) .fern-docs-badge[data-http-method].subtle.orange {
  color: var(--orange-a11);
}

/* The response panel's status badge ("200 Retrieved") runs ~15% larger than it
   needs to. Shrink the whole chip ~15%: font + line-height + (em-relative) padding
   all scale together. Scoped to the code panels, so the error-list badges and the
   page-title badge are untouched. */
.fern-endpoint-code-snippets [data-badge-type="status-code"] {
  font-size: 0.74rem !important;
  line-height: 1.15 !important;
  padding: 0 0.57em !important;
  height: 1.25rem !important; /* 20px — the .large variant pins 24px; 15% down + flex-centered */
}

/* The response panel header ("200 Retrieved ▾") eats too much vertical space —
   shrink the whole component ~10%. Trim the bar height (only the bar carrying a
   status badge = the response) and scale the trigger as one unit so the badge,
   label, chevron, and hover border all come down together. */
/* Shrink BOTH the fixed-height h-10 wrapper AND the min-h-10 bar to 36px — if only
   the inner bar shrinks, the wrapper keeps 40px and its border-bottom no longer
   overlaps the code body's border-top, which shows as a double line. */
.fern-endpoint-code-snippets [class*="h-10"]:has([data-badge-type="status-code"]) {
  height: 2.25rem !important;
  min-height: 2.25rem !important; /* 40px → 36px */
}
.fern-endpoint-code-snippets .fern-button:has([data-badge-type="status-code"]) {
  transform: scale(0.9);
  transform-origin: left center;
}

/* Method badges size to their label. Fern pins a rigid width sized for the mono
   font, but Geist's caps are wider — so the longest method ("PATCH") spilled past
   its chip (notably in the search palette). max-content makes each chip fit. */
[data-badge-type="http-method"] {
  width: max-content !important;
}

/* ---------- Error-response disclosure ---------- */
/* The expandable error list (400/401/…) ships its body at 16px — oversized next
   to the dense panels. Bring the prose + property text down to ~13px; the status
   badges keep their own size. */
.fern-endpoint-section-errors {
  font-size: 0.8125rem;
}
.fern-endpoint-section-errors :is(p, li, .fern-prose, .fern-prose *),
.fern-endpoint-section-errors :is(.fern-api-property-name, .fern-api-property-key, .fern-api-property-meta),
.fern-endpoint-section-errors .fern-collapse-trigger {
  font-size: 0.8125rem !important;
}
/* …but the status badges (400/401/…) keep their small size — the base above
   would otherwise inflate them from inheritance. */
.fern-endpoint-section-errors .fern-docs-badge {
  font-size: 0.6875rem !important;
}

/* Expand/collapse easing: Fern runs the Radix collapsible at a snappy 0.15s
   ease-in (cubic-bezier(0.4,0,1,1)), which reads as jittery. Keep its height
   keyframes but slow it to a gentle ~0.3s glide with a smooth cubic-bezier. */
.fern-endpoint-section-errors .fern-collapsible {
  animation-duration: 0.3s !important;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* The header itself toggles open/closed (custom.js §7 forwards to Fern's X), so
   the X is redundant chrome — hide it. display:none (not removal) keeps it
   .click()-able so the forward still drives Fern's React state. */
.fern-endpoint-section-errors button[aria-label="Collapse error"] {
  display: none;
}

/* ---------- Object-property disclosure: drop the +/✕ glyph ---------- */
/* The "Show N properties" / "Hide N properties" toggles on request, response, and
   error schemas lead with an icon. Hide just the glyph so each reads as a plain
   text control — the button still expands and collapses on click (the whole row is
   the hit target; the icon is decorative), and custom.js §4 keys the auto-expand
   off the button TEXT, not the icon, so this doesn't disturb it. The button's flex
   `gap` collapses with the icon gone, so the label sits flush with no orphaned
   indent. Scoped to the reading pane so the API Explorer's own add-row "+"
   controls (.api-explorer, ?explorer=true) keep theirs. Fern has shipped this
   glyph as lucide-plus/lucide-minus and, currently, as a single lucide-x that's
   rotate-45'd into a plus when collapsed — cover all three so an upstream icon
   swap doesn't resurface it. */
.fern-layout-reference button svg.lucide-plus,
.fern-layout-reference button svg.lucide-minus,
.fern-layout-reference button.fern-collapse-trigger svg.lucide-x {
  display: none !important;
}

/* ---------- Heading anchor ---------- */
/* Kill the hover "paperclip" deep-link icon next to headings — it barely
   functions and just clutters the heading on hover. */
.fern-anchor {
  display: none !important;
}

/* ---------- Route-change loading bar ---------- */
/* Fern shows an @bprogress top bar on navigation, colored brand-green
   (--bprogress-color is var(--accent)) with a glowing green "peg" — it flashes on
   every uncached nav and reads as a sketchy green flicker. Remove it: prefetched
   navigations are instant, so the bar is mostly noise. */
.bprogress,
.bprogress .bar,
.bprogress .peg,
.bprogress .spinner {
  display: none !important;
}

/* ---------- Sidebar ---------- */
/* No method badges in the sidebar. The endpoint summary already says what each
   row is ("List borrowers", "Create counterparty tag"), so the GET/POST/DEL/PATCH
   chips are redundant noise. They still appear on the endpoint page heading and
   the right-hand code rail — just not in the nav. */
.fern-sidebar-link .fern-docs-badge {
  display: none !important;
}

/* Active row: the signature indigo highlight (rgba(124,92,252,.2) — same value
   the marketing page hero uses) on the selected page/endpoint row. Replaced the
   old grey Plaid-style treatment 2026-08-12 (Zach: "the 8-family indigo/purple on
   the selected endpoint"). Label stays white; the tinted pill is the only
   selection cue — still no accent bar, no green text. */
.fern-sidebar-link[data-state="active"] {
  background-color: rgba(124, 92, 252, 0.2) !important;
  box-shadow: none !important;
  color: var(--grayscale-a12) !important;
}

/* Collapsed-group chevron: when a closed section still holds the active page, Fern
   tints its expand-indicator chip + arrow accent-green. Retint to match the
   indigo active row — indigo chip, white arrow. */
.fern-sidebar-link .expand-indicator[data-state="active"] {
  background-color: rgba(124, 92, 252, 0.2) !important;
  color: var(--grayscale-a12) !important;
}

/* Light theme: the dark pill's rgba(124,92,252,.2) was tuned for the #0A0A0C
   rail; on the white light rail it composites to a candy lilac (#e5defe). The
   light row is instead the marketing nav's light-menu row highlight, verbatim
   (globals.css `.page-shell-marketing .nav.nav-light .ssm-item:hover`): an
   indigo-to-white wash that fades left to right plus a faint indigo hairline.
   Zach 2026-09-18: the flat #eef2ff cut "don't have parity", "check app for
   parity, perhaps menus in light mode on marketing". Ink label, no left bar,
   Fern's own 8px radius (the menu's 12px suits its 70px tile rows, not a 34px
   text row). The collapsed-group chip follows. */
html:not(.dark) .fern-sidebar-link[data-state="active"],
html:not(.dark) .fern-sidebar-link .expand-indicator[data-state="active"] {
  background: linear-gradient(90deg, rgba(114, 105, 224, 0.075), rgba(255, 255, 255, 0.55)) !important;
  box-shadow: inset 0 0 0 1px rgba(116, 109, 186, 0.09) !important;
}

/* Nav rails are chrome, not content: no text selection anywhere on them (Zach
   2026-08-12: "impossible to click and drag or click and copy any text on any
   of the nav side bars"). #fern-sidebar = left rail, #fern-toc = right
   "On this page" rail; the row classes cover any other render (mobile drawer);
   .ss-sdk-subnav is the injected SDK TOC mirror. Drag suppression lives in
   custom.js (wireNavRailNoDrag) — Firefox needs a dragstart preventer, CSS
   alone can't do it there. */
#fern-sidebar,
#fern-toc,
.fern-sidebar-link,
.fern-sidebar-heading,
.ss-sdk-subnav {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none;
}

/* Nested group children — the Getting Started concept pages and every expanded
   endpoint group's rows. Fern's default nesting is a ~13px inset with a
   border-l painted in --border (#1A1B1E) on the #0A0A0C sidebar — effectively
   invisible, so children read as flat siblings of their parent (Zach
   2026-08-12: Getting Started "was supposed to encapsulate all of the
   non-endpoint objects"). Deepen the inset and lift the guide line to a
   visible grey so containment is legible. One rule covers both cases — the
   doc-nav section and the api-reference groups share this markup. */
.fern-sidebar-desktop ul.fern-sidebar-group.fern-collapsible {
  margin-left: 1rem !important;
  padding-left: 0.5rem !important;
  border-left-color: var(--grayscale-a5) !important;
}

/* Hide the collapse chevron on the top-level (level-1) collapsible sections
   (API Reference + SDKs) — they still open on click. The endpoint groups inside
   are level-2, so their chevrons are untouched. */
.fern-sidebar-desktop .fern-sidebar-link.fern-sidebar-level-1 .expand-indicator {
  display: none !important;
}

/* The collapsible API Reference renders as a sidebar LINK (weight 400, slightly
   translucent), so it reads thinner/dimmer than the SDKs / Guides section
   headings. Bold + brighten its label so it matches them. */
.fern-sidebar-desktop .fern-sidebar-link.fern-sidebar-level-1 .fern-sidebar-link-title-inner {
  font-weight: 600 !important;
  color: var(--grayscale-12) !important;
}

/* THE GREEN BAR — found at last. Fern marks the active sidebar row with a ::before
   accent indicator: a 1px vertical bar filled with brand green (rgba(51,254,165)).
   It's a pseudo-element, never a scrollbar — which is why every prior scrollbar
   fix missed it. Neutralize the accent fill on the link/group pseudos so the calm
   grey row highlight is the only selection cue. */
.fern-sidebar-link::before,
.fern-sidebar-link::after,
.fern-sidebar-group::before,
.fern-sidebar-group::after {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

/* Section headings ("API", "SDKs", "Embedded Client"): real HEADERS, one step above
   the rows they title (Zach 2026-08-17: "BIGGER AND unmuted they should read as
   HEADERS not footers"). Fern paints the label at 14px semibold, and the earlier rule
   here muted it to a 45%-alpha grey "per the design" — net effect, the group title
   was SMALLER and DIMMER than the 15-15.25px near-white item rows beneath it, so it
   read as a footer/eyebrow label. Reversed: 16px, semibold, full white (the same
   --grayscale-12 the item labels resolve to). 18px was the first cut — Zach, same
   day, on the local preview: "too big on the font" / "this is too big" — so 16px:
   +1px over the rows, with weight + white doing the rest. Line-height is set
   explicitly so Fern's 20px text-sm leading can't clip; the wrapper's 36px
   min-height still fits, so the sidebar rhythm below is unchanged. Measured on the
   live DOM 2026-08-17; same class on every product's sidebar, one rule covers all.
   (History: an even earlier rule `display:none`-d the "API" heading by targeting the
   section <li> holding a collapsible link — post-`flattened` that became the "API"
   section's own <li>. Gone; both headings show.) */
.fern-sidebar-desktop .fern-sidebar-heading .fern-sidebar-heading-content {
  font-size: 1rem !important;   /* 16px — vs the 15-15.25px item rows */
  line-height: 1.35 !important;
  font-weight: 600 !important;
  color: var(--grayscale-12) !important;
}
/* …and the rows sit slightly RIGHT of the header (Zach 2026-08-17: "the tabs should
   be slightly right of the header too"). Fern gives the heading wrapper the same 8px
   left pad as the row boxes, so header text and item text shared one left edge
   (x=52 at desktop width). Zeroing the header's pad puts the header flush with the
   row highlight boxes (x=44) and leaves the item labels 8px to its right — the rows
   themselves don't move, so the active-row box, the nested Getting Started inset,
   and the "← All docs" pull-back are all untouched. */
.fern-sidebar-desktop .fern-sidebar-heading {
  padding-left: 0 !important;
}

/* Even, tight sidebar rhythm. Default `space-y-6` puts 24px between top-level
   BLOCKS (page group / API / SDKs) but the grouped page links sit tighter, so the
   rail reads lopsided. Normalize every top-level item to ONE small gap.
   CRITICAL: Tailwind v4's space-y applies the gap as `margin-block-END` on
   `:not(:last-child)` (NOT margin-top / margin-block-start), so that is the only
   property an override actually wins against. First selector = between blocks;
   second = between the grouped page links. */
.fern-sidebar-desktop ul.fern-sidebar-group.space-y-6 > li:not(:last-child),
.fern-sidebar-desktop ul.fern-sidebar-group.space-y-6 > li > ul.fern-sidebar-group-level-1 > li:not(:last-child) {
  margin-block-end: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

/* Nested rows (endpoints inside a group, pages inside a section) sit 1px apart
   at a 31px row: too easy to hit the neighbour (Zach 2026-08-18, "maybe 10%
   extra space"). 4px between rows makes the pitch 35px, about 10% more. */
.fern-sidebar-desktop ul.fern-sidebar-group-level-2 > li:not(:last-child) {
  margin-block-end: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

/* Widen the sidebar a touch for the indented nav. docs.yml `sidebar-width` silently
   falls back to the 18rem default for non-integer rem, so force the CSS var Fern
   drives the whole shell off (sidebar width + content offset stay in sync). */
:root {
  --sidebar-width: 20rem !important;
}

/* Indent the whole nav list right a touch (the rail sat too tight to the edge).
   Padding the list shifts everything uniformly and preserves the endpoint nesting;
   the "← All docs" back link (tagged .ss-all-docs in custom.js) is pulled back so it
   stays flush-left as the anchor. Sidebar widened in docs.yml to make the room. */
.fern-sidebar-desktop ul.fern-sidebar-group.space-y-6 {
  padding-left: 1.5rem !important;
}
.fern-sidebar-desktop .fern-sidebar-link.ss-all-docs {
  margin-left: -1.25rem !important;
}

/* Home vs API sidebar scale. CRITICAL: scope off the SERVER-RENDERED markup, never off a
   class custom.js adds after load. The earlier version keyed these on .ss-nav-home /
   .ss-nav-api, which custom.js set on DOMContentLoaded — i.e. AFTER first paint — so every
   icon/label first painted at Fern's default size and then snapped to these values on load
   (the visible "settle"/FOUC). The API product is the only sidebar with COLLAPSIBLE
   endpoint groups, so :has(.expand-indicator) tells it apart from the very first frame —
   the compact treatment below covers BOTH short sidebars (Get Started home + the Embed
   product area), which is what we want. (The old discriminator was the presence of
   .fern-sidebar-heading, which stopped discriminating once the Embed product — whose
   sidebar carries a heading but nothing collapsible — joined the API product in having
   headings.) Icon SIZES key off the icon's own class (.fern-file-icon / [data-ss-glyph])
   which is already in the SSR HTML — so nothing resizes on load. */

/* Tighter short-list navs (Get Started home + the Embed product area) — a handful of
   items each, so trim Fern's roomy default rhythm; the long API endpoint list (the one
   with collapsible groups) keeps its default spacing. */
.fern-sidebar-desktop:not(:has(.expand-indicator)) .fern-sidebar-link.fern-sidebar-level-1 {
  padding-top: 0.4375rem !important;   /* 7px — a touch more vertical breathing room */
  padding-bottom: 0.4375rem !important;
  margin-block-end: 0 !important;      /* drop the active link's 14px bottom margin */
  margin-bottom: 0 !important;
}
/* +1px on the labels (14px -> 15px), and a touch lighter (600 -> 500) — at the bigger
   size the semibold read heavy. The #fern-sidebar id outweighs the global active-weight
   pin below, so the selected item drops to 500 too (no bolder-when-selected). */
#fern-sidebar:not(:has(.expand-indicator)) .fern-sidebar-link.fern-sidebar-level-1 .fern-sidebar-link-title-inner {
  font-size: 0.9375rem !important;  /* 15px */
  font-weight: 500 !important;      /* 600 -> 500 */
}
.fern-sidebar-desktop:not(:has(.expand-indicator)) ul.fern-sidebar-group.space-y-6 > li > ul.fern-sidebar-group-level-1 > li:not(:last-child) {
  margin-block-end: 0.625rem !important;  /* 10px between the rows: 41px pitch -> 45px, Zach's "10% between these too" (2026-08-18) */
  margin-bottom: 0.625rem !important;
}

/* API product label scale: +1.25px on every nav label (14 -> 15.25px). */
.fern-sidebar-desktop:has(.expand-indicator) .fern-sidebar-link .fern-sidebar-link-title-inner {
  font-size: 0.953125rem !important;  /* 14 -> 15.25px */
}

/* ICON SIZES, keyed off the icon's OWN class (in the server markup), so each icon paints
   at its final size on frame one with no 20->22 settle. File icons (the API Getting
   Started / Overview rows, if Fern ever paints them again) are 22px; the custom group
   glyphs custom.js §5 injects on the API sidebar (currently OFF) are 17.5px. The SDK
   row icons are CSS-painted (NAV ICONS, below) and size themselves there; the home rows
   carry no icon since 2026-09-04.
   Chevrons (.expand-indicator) carry neither class, so they keep their own size. */
.fern-sidebar-desktop .fern-sidebar-link.fern-sidebar-level-1 svg.fern-file-icon {
  width: 1.375rem !important;         /* 20 -> 22px */
  height: 1.375rem !important;
}
/* Keyed on the glyph KIND, not just the attribute's presence, so a future second kind
   can't trade sizes with it on a source reorder. "group" = the API endpoint glyphs
   (custom.js §5, currently switched off). */
.fern-sidebar-desktop .fern-sidebar-link.fern-sidebar-level-1 svg[data-ss-glyph='group'] {
  width: 1.09375rem !important;       /* 16 -> 17.5px */
  height: 1.09375rem !important;
}
/* Only on the INSERT path (Fern painted no icon at all, so there is no Fern-supplied
   gap to inherit). The replace path sits in the slot Fern already spaced. */
.fern-sidebar-desktop .fern-sidebar-link.fern-sidebar-level-1 svg.ss-glyph-inserted {
  flex: 0 0 auto;
  margin-right: 0.5rem;
  display: block;
}

/* NAV ICONS, painted by CSS, in the server HTML, so they are on screen at first paint.
   The three SDK language rows get their logos here; the SDK Overview row is bare (Zach
   2026-09-20: language logos only), so every ::before rule below steps around it and
   product-sdks.yml declares no `icon:` for it. They used to come from custom.js (§5b), which
   Fern attaches only AFTER the whole React bundle has loaded and hydrated (measured
   2026-09-02 on the live site: text painted at ~0.3s, icons at ~1.45s, a visible 1.2s
   late-pop on every hard load; Zach: "these icons take like 1.2 to render"), and the
   rows' Font Awesome names painted a grey 16px placeholder that then swapped to the
   logo. So each row paints its own glyph as a ::before background image, a data: URI of
   the SAME art as fern/assets/icons/<name>.svg (those files stay the design source of
   truth; the MDX cards still read them from disk). Regenerate the URIs from the files if
   the art changes: collapse whitespace, then percent-encode (`<` `>` `#` `"` at minimum).
   The six Get Started (home) rows were painted the same way until 2026-09-04, when Zach
   had the nav icons removed ("too clunky"); those rows are bare now, like the Embed
   product's, and product-get-started.yml declares no `icon:` for them. Rows are keyed by
   href and SCOPED to the SDK list (the group that also holds the TypeScript link) because
   /sdks/overview is also a row, a bare one, in the home list, and /embed/overview is the
   Embed product's Overview row, which stays bare by the 2026-08-11 ruling.
   The longhands carry !important because THE GREEN BAR reset above declares
   `background: transparent !important` on every .fern-sidebar-link::before; these
   selectors out-specify it, so the image wins while the reset keeps doing its job.
   Any icon Fern itself paints in these rows (a Font Awesome glyph, or a file icon if
   its renderer ever heals) is hidden, so the row can never show two. Size: 22px in
   Fern's own 12px flex gap. */
ul.fern-sidebar-group-level-1:has(> li > a[href="/sdks/typescript"]) > li > a.fern-sidebar-link.fern-sidebar-level-1:not([href="/sdks/overview"])::before {
  display: block;
  flex: 0 0 auto;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}
ul.fern-sidebar-group-level-1:has(> li > a[href="/sdks/typescript"]) > li > a.fern-sidebar-link.fern-sidebar-level-1:not([href="/sdks/overview"])::before {
  width: 1.375rem;                    /* 22px, the size the swapped-in logos had */
  height: 1.375rem;
}
ul.fern-sidebar-group-level-1:has(> li > a[href="/sdks/typescript"]) > li > a.fern-sidebar-link.fern-sidebar-level-1 > svg:not(.expand-indicator) {
  display: none !important;           /* never two icons on one row */
}
ul.fern-sidebar-group-level-1:has(> li > a[href="/sdks/typescript"]) > li > a.fern-sidebar-link.fern-sidebar-level-1[href="/sdks/typescript"]::before {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22512%22 height=%22512%22 viewBox=%220 0 512 512%22%3E%3Crect width=%22512%22 height=%22512%22 rx=%2284%22 fill=%22%233178c6%22%3E%3C/rect%3E%3Cpath fill=%22%23fff%22 d=%22M317 407v50c8.1 4.2 17.7 7.3 28.9 9.4s23 3.1 35.4 3.1c12.1 0 23.6-1.2 34.5-3.5 10.9-2.3 20.5-6.1 28.7-11.4 8.2-5.3 14.7-12.2 19.5-20.7s7.2-19 7.2-31.6c0-9.1-1.4-17.1-4.1-23.9-2.7-6.9-6.6-13-11.7-18.4-5.1-5.3-11.2-10.1-18.3-14.4-7.1-4.2-15.1-8.2-24-12-6.5-2.7-12.3-5.3-17.5-7.9-5.2-2.5-9.6-5.1-13.3-7.7-3.7-2.7-6.5-5.5-8.5-8.5-2-2.9-3-6.3-3-10.1 0-3.5.9-6.7 2.7-9.5s4.3-5.3 7.5-7.3c3.2-2.1 7.2-3.6 11.9-4.8 4.7-1.1 9.9-1.7 15.7-1.7 4.2 0 8.6.3 13.3 1 4.7.6 9.4 1.6 14.2 3 4.8 1.3 9.4 3 13.9 5.1 4.5 2 8.6 4.4 12.4 7.1v-46.7c-7.6-2.9-15.9-5.1-24.9-6.5s-19.3-2.1-30.9-2.1c-12 0-23.4 1.3-34.1 3.9s-20.1 6.7-28.2 12.3c-8.1 5.6-14.5 12.7-19.2 21.3-4.7 8.6-7.1 18.8-7.1 30.7 0 15 4.3 27.7 13 38.2 8.6 10.5 21.8 19.4 39.4 26.7 6.8 2.8 13.1 5.5 19 8.2s11 5.5 15.3 8.4c4.3 3 7.7 6.2 10.2 9.7 2.5 3.4 3.7 7.4 3.7 11.9 0 3.3-.8 6.4-2.4 9.3s-4 5.4-7.2 7.5c-3.2 2.1-7.2 3.7-11.9 4.9-4.7 1.1-10.2 1.7-16.4 1.7-10.6 0-21.1-1.8-31.5-5.5s-20-9.3-28.9-16.7zm-84.4-114.9h64.9v-41.6h-181v41.6h64.6v183.9h51.5z%22%3E%3C/path%3E%3C/svg%3E") !important;
}
ul.fern-sidebar-group-level-1:has(> li > a[href="/sdks/typescript"]) > li > a.fern-sidebar-link.fern-sidebar-level-1[href="/sdks/python"]::before {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22256%22 height=%22255%22 viewBox=%220 0 256 255%22%3E%3Cdefs%3E%3ClinearGradient id=%22pyA%22 x1=%2212.959%25%22 y1=%2212.039%25%22 x2=%2279.639%25%22 y2=%2278.201%25%22%3E%3Cstop offset=%220%22 stop-color=%22%23387EB8%22%3E%3C/stop%3E%3Cstop offset=%221%22 stop-color=%22%23366994%22%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient id=%22pyB%22 x1=%2219.128%25%22 y1=%2220.579%25%22 x2=%2290.742%25%22 y2=%2288.429%25%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFE052%22%3E%3C/stop%3E%3Cstop offset=%221%22 stop-color=%22%23FFC331%22%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill=%22url(%23pyA)%22 d=%22M126.916.072c-64.832 0-60.784 28.115-60.784 28.115l.072 29.128h61.868v8.745H41.631S.145 61.355.145 126.77c0 65.417 36.21 63.097 36.21 63.097h21.61v-30.356s-1.165-36.21 35.632-36.21h61.362s34.475.557 34.475-33.319V33.97S224.66.072 126.916.072zM92.802 19.66a11.12 11.12 0 0 1 11.13 11.13 11.12 11.12 0 0 1-11.13 11.13 11.12 11.12 0 0 1-11.13-11.13 11.12 11.12 0 0 1 11.13-11.13z%22%3E%3C/path%3E%3Cpath fill=%22url(%23pyB)%22 d=%22M128.757 254.126c64.832 0 60.784-28.115 60.784-28.115l-.072-29.128h-61.868v-8.745h86.441s41.486 4.705 41.486-60.711c0-65.416-36.21-63.096-36.21-63.096h-21.61v30.355s1.165 36.21-35.632 36.21h-61.362s-34.475-.557-34.475 33.32v56.013s-5.235 33.897 92.51 33.897zm34.114-19.587a11.12 11.12 0 0 1-11.13-11.13 11.12 11.12 0 0 1 11.13-11.131 11.12 11.12 0 0 1 11.13 11.13 11.12 11.12 0 0 1-11.13 11.13z%22%3E%3C/path%3E%3C/svg%3E") !important;
}
ul.fern-sidebar-group-level-1:has(> li > a[href="/sdks/typescript"]) > li > a.fern-sidebar-link.fern-sidebar-level-1[href="/sdks/csharp"]::before {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22455%22 height=%22512%22 viewBox=%220 0 455 512%22 fill=%22none%22%3E%3Cpath d=%22M227.5 10 L455 134 L455 378 L227.5 502 L0 378 L0 134 Z%22 fill=%22%23a279dd%22%3E%3C/path%3E%3Cpath d=%22M455 134 L0 378 L227.5 502 L455 378 Z%22 fill=%22%23270068%22%3E%3C/path%3E%3Cpath d=%22M302.3 374.2 A150 150 0 1 1 302.3 137.8 L262.9 188.2 A86 86 0 1 0 262.9 323.8 Z%22 fill=%22%23ffffff%22%3E%3C/path%3E%3Crect x=%22352%22 y=%22198%22 width=%2216%22 height=%22116%22 rx=%222%22 fill=%22%23ffffff%22%3E%3C/rect%3E%3Crect x=%22390%22 y=%22198%22 width=%2216%22 height=%22116%22 rx=%222%22 fill=%22%23ffffff%22%3E%3C/rect%3E%3Crect x=%22340%22 y=%22222%22 width=%2278%22 height=%2216%22 rx=%222%22 fill=%22%23ffffff%22%3E%3C/rect%3E%3Crect x=%22340%22 y=%22274%22 width=%2278%22 height=%2216%22 rx=%222%22 fill=%22%23ffffff%22%3E%3C/rect%3E%3C/svg%3E") !important;
}

/* ACTIVE nav item: pin the label weight to its siblings' (groups/pages 600, endpoints
   400) so nothing bolds on click. We deliberately do NOT recolor the icon here anymore:
   the sidebar icons now carry their own SpreadSpace indigo (#818cf8 — baked into the
   uploaded SVGs and the injected group glyphs). An earlier `color: muted !important`
   override fought that and greyed the currentColor icons on the active row, so it's
   gone. Each icon owns its color in every state. */
.fern-sidebar-desktop .fern-sidebar-link[data-state='active'].fern-sidebar-level-1 .fern-sidebar-link-title-inner {
  font-weight: 600 !important;  /* same as inactive groups / pages */
}
.fern-sidebar-desktop .fern-sidebar-link[data-state='active']:not(.fern-sidebar-level-1) .fern-sidebar-link-title-inner {
  font-weight: 400 !important;  /* same as inactive endpoints */
}

/* Sidebar label weights (sections layout — the API + SDKs + Webhooks screen). Shift the
   whole scale down one notch so the sidebar reads lighter: the SELECTED row drops to the
   weight the inactive rows used to carry (600), and every inactive row goes significantly
   lighter (400). The #fern-sidebar id outweighs both the class-level pins above AND Fern's
   own active-bold default, which the class pin at line 627 couldn't beat (that's why the
   active row still rendered heaviest). The generic level-1 rule also matches the active
   row, so the active override below must stay MORE specific to win it back to 600. */
#fern-sidebar:has(.expand-indicator) .fern-sidebar-link.fern-sidebar-level-1 .fern-sidebar-link-title-inner {
  font-weight: 400 !important;  /* inactive rows: was ~600, reduced significantly */
}
#fern-sidebar:has(.expand-indicator) .fern-sidebar-link[data-state='active'].fern-sidebar-level-1 .fern-sidebar-link-title-inner {
  font-weight: 600 !important;  /* selected row: = the weight inactive rows used to be */
}

/* API reference (endpoint) pages: keep the prose|code body a COMPACT, left-aligned block
   so it stays in seeing distance — narrow prose (fewer words per line) with the code box
   right beside it, never pushed off-screen. Capped well under any viewport (width:100% so
   it shrinks on smaller screens, 72rem ceiling so it never balloons) → the page never
   gets a horizontal scrollbar. Long request/response lines wrap inside the code box rather
   than scrolling. Room to the right on wide monitors is fine — the content is deliberately
   brought in, not stretched to fill. */
/* Fern centers the whole reference PANE with auto side-margins; once the content is this
   narrow that leaves a big gap on the left. Pin the pane left so the compact block sits
   next to the sidebar instead of floating in the middle. (Laptop-width look — recentered
   above 112rem by the fluid-layout section below.) */
.fern-layout-reference {
  margin-left: 0 !important;
  margin-right: auto !important;
}
.fern-layout-reference article {
  width: 100% !important;
  /* 82rem (halves 624px): widened from 76rem 2026-08-07 — Zach: reference pages read
     sparse/dead-space at laptop width, and the 576px halves read "too densely packed".
     624px halves widen the measure AND shave the empty right margin (1728px viewport:
     352px sidebar + 1312px article leaves 64px, was 160px).
     2026-08-23: 82rem -> 92rem (halves 624px -> 688px, 6rem gutter, +10% text per line; Zach: more
     room for Authentication / Path parameters prose - laptops zoom out). */
  max-width: 92rem !important;
}
/* Two equal prose|code columns only while there's room. Under ~90rem of effective
   viewport (heavy browser zoom, small windows) stack them instead — the old
   unconditional 2-col force crushed both halves into wrapped slivers. */
@media (min-width: 90rem) {

  .fern-layout-reference-content {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    /* Gutter between the prose and the code "terminals". History: 4rem -> 6rem on
       2026-08-23 (Zach: shift the text block left of the snippets a bit; the article
       widths below carried the extra 2rem). 2026-09-05: 6rem -> 3rem. Zach, on the
       AR agings endpoint at 90% zoom: "why is there such a big gap between the snippet
       and the text?" 3rem is Fern's own desktop gutter (its >=64rem gap-12). The
       article widths stay, so each half gains 1.5rem of measure (720px -> 744px at
       the 96rem cap). */
    column-gap: 3rem !important;
  }

}
@media (max-width: 89.9375rem) {

  .fern-layout-reference-content {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 1.5rem !important;
  }

}

.fern-layout-reference pre {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
}

/* ---------- Reference-page vertical density ---------- */
/* Endpoint pages read sparse (Zach 2026-08-07): Fern separates the left column's
   sections (Authentication / Headers / Query parameters / Response / Errors) with
   space-y-12 (48px) and wraps every one-line property row in m-3 (12px above AND
   below, on top of the h-px dividers). Tighten both — sections to 32px, rows to
   8px — so a page carries visibly more content per screen. CRITICAL (same gotcha
   as the sidebar rhythm rules above): Tailwind v4 space-y applies the gap as
   margin-block-END on :not(:last-child) — that is the only property an override
   wins against. Scoped to the reference prose column; guide pages keep their
   roomier article rhythm, and the code panels (aside) are untouched. */
.fern-layout-reference-content .fern-prose .space-y-12 > :not(:last-child),
.fern-layout-reference-content .fern-prose.space-y-12 > :not(:last-child) {
  margin-block-end: 2rem !important;
  margin-bottom: 2rem !important;
}
/* Property rows (name row + description) between the h-px dividers: m-3 -> 8px
   vertical. .mx-0 keeps the selector on the API property rows only — no other
   m-3 in the reference prose carries it. */
.fern-layout-reference-content .fern-prose .m-3.mx-0 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

/* Guide/overview reading measure: docs.yml's 720px (45rem) left ~half the pane
   empty on no-code pages at laptop width — part of the same sparse read as the
   reference pages (2026-08-07). One step wider at base; the ≥112rem/≥140rem
   overrides below still take it to 52/56rem on big monitors. */
:root {
  --content-width: 48rem !important;
}

/* ---------- Fluid layout on larger monitors ---------- */
/* Everything above is tuned on a ~108rem (16" laptop) viewport, where sidebar +
   pinned-left content fills the screen edge-to-edge. On a 27"/32" monitor the same
   fixed-width strip strands the whole right half in dead space. Above 112rem:
   center the content block in the space right of the sidebar (balanced margins
   read deliberate; a hard-left strip reads unfinished) and let the reading measure
   grow one step. Above 140rem: one step more. Below 112rem nothing changes — the
   laptop layout stays exactly as tuned. Must stay AFTER the base pin rules
   (.fern-layout-guide .w-content-width / .fern-layout-reference): same specificity,
   later-in-file wins. */
@media (min-width: 112rem) {

  :root {
    --content-width: 52rem !important; /* 45rem laptop measure -> ~92ch */
  }
  .fern-layout-reference {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Guide/SDK pages have no code panel, so centering here centers only the narrow
     reading measure — landing 80px right of where endpoint prose starts, so text
     jumps sideways between the two page kinds. Match the endpoint left edge instead:
     that's a 100rem pane (96rem article + 2rem padding a side) centered right of the
     20rem sidebar, and this column's containing block is the viewport less 44rem
     (sidebar + TOC rail + padding), so 50% of it lands there minus (120-44)/2 = 38rem.
     Percentages, not 100vw: 100vw counts the scrollbar and would re-skew it. */
  .fern-layout-guide .w-content-width {
    margin-left: max(0px, 50% - 38rem) !important;
    margin-right: auto !important;
  }
  .fern-layout-reference article {
    max-width: 96rem !important; /* endpoint prose|code halves 688px -> 720px */
  }

}
@media (min-width: 140rem) {

  :root {
    --content-width: 56rem !important; /* ceiling ~99ch */
  }
  /* Endpoint pane grows to 98rem + 4rem padding = 102rem -> (102 + 20 - 44) / 2 = 39rem. */
  .fern-layout-guide .w-content-width {
    margin-left: max(0px, 50% - 39rem) !important;
  }
  .fern-layout-reference article {
    max-width: 98rem !important; /* halves 752px — use a 27"+ screen */
  }

}

/* ---------- Object pages: the Explore head ---------- */
/* Zach 2026-08-23 (Claude Design canvas "Endpoint placement", frame 2a): every
   "The X object" page opens Stripe-style - the description on the left, an
   "Explore" list of that object's endpoints on the right; the Attributes ran
   full width below until 2026-10-03, when the body took the description's
   column (the cap after the grid rules). The list is GENERATED between
   explore:start/end markers by
   fern/gen-explore.py (spec + nav are the source of truth; the markers sit inside
   .ss-object-head, whose first child is the .ss-object-intro prose).
   The page borrows the endpoint pages' block wholesale: same article widths
   (92/96/98rem), the same 3rem gutter and the same >=90rem stack point, so the
   Explore column sits exactly where the sibling endpoint pages put their code
   panel and the left edge matches theirs (plain auto centering lands on
   sidebar + (W - A)/2, the reference pane's own left edge, once the rail is
   gone). The rail is dropped with display, not visibility: these pages have a
   single heading, so the rail was already blank (see "On this page" above), and
   the block needs its 20rem. Measured 2026-08-23 headless: intro|Explore at
   656/1488 (2560px), 352/1168 (1920px), 352/1072 (1728px) - identical to the
   prose|code halves on the endpoint pages; stacked under 90rem. */
main.fern-main:has(.ss-object-head) #fern-toc {
  display: none !important;
}
.fern-layout-guide:has(.ss-object-head) .w-content-width {
  width: 100% !important;
  max-width: 92rem !important;
}
@media (min-width: 112rem) {

  .fern-layout-guide:has(.ss-object-head) .w-content-width {
    max-width: 96rem !important;
    margin-left: auto !important;
  }

}
@media (min-width: 140rem) {

  .fern-layout-guide:has(.ss-object-head) .w-content-width {
    max-width: 98rem !important;
  }

}
.ss-object-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 2.5rem;
  align-items: start;
}
@media (min-width: 90rem) {

  .ss-object-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 3rem;
  }

}
/* Zach 2026-10-03: "keep it narrow ... make everything uniformly narrow,
   instead of having it wide and a narrow text block". Frame 2a ran the
   Attributes full width under the head, so a page read as a narrow intro and
   then a wide body running under the Explore column. Now everything after the
   head in the prose container takes the measure the grid gives the intro,
   (100% - 3rem) / 2 of the same containing block, so the two edges cannot
   drift apart; !important because the guide-page table rule above
   (.fern-table-root max-width: min(100cqw, 80rem) !important, equal
   specificity, earlier in the file) would otherwise keep the tables wide.
   Below 90rem the head stacks and the body stays full width, as before. A
   table whose unbreakable cells (the key column and the headers never wrap,
   see the table rules) need more than the column still shows whole and runs
   past the column edge rather than scrolling or clipping, the table doctrine
   above; that happens only in the band just over the stack point, where the
   column is 504px (1440px viewport) to 648px (1728px). Measured 2026-10-03 on
   the hosted pages by injection: body and intro both 352..1096 at 1920px and
   656..1416 at 2560px, every table inside the column at 1728px and up on the
   AP Aging page, no page-level overflow at any width. */
@media (min-width: 90rem) {

  .fern-layout-guide .ss-object-head ~ * {
    max-width: calc((100% - 3rem) / 2) !important;
  }

}
.ss-object-intro > :first-child {
  margin-top: 0 !important;
}
.ss-object-intro > :last-child {
  margin-bottom: 0 !important;
}
.ss-explore {
  display: flex;
  flex-direction: column;
}
/* The title is a real h2 (Zach 2026-08-23: "section heading font, not just
   generic - aka unmuted"), so it takes the page's h2 face and hairline from the
   heading rules near the top of this file; only the margins change, so it sits
   flush with the intro's first line. Entries are cards (Zach 2026-09-24:
   "distinctive separation … a tinge of purple background low opacity and a
   black line on the edge aligned with explore"): a faint indigo wash behind
   each (--accent-a2, one step under the param chips' a3 so the chips still
   read on it), an ink rule down the left edge (--grayscale-a12: near-black on
   light, near-white on dark) flush with the title's left edge, right corners
   rounded, and 0.75rem between cards as a sibling margin, not a container
   gap, so the first card sits flush under the title's hairline (Zach
   2026-09-25: "remove margin between dividing line and the first point").
   The rows' old hairlines are gone; the cards separate themselves.
   No hover paint was added, so the :focus-visible block at the
   end of the file needs no new twin. Checked 2026-09-24 by injecting the
   rules into the hosted page, both themes. */
.fern-layout-guide h2.ss-explore-title {
  margin-top: 0;
  margin-bottom: 0;
}
.ss-explore-link {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--accent-a2);
  border-left: 0.125rem solid var(--grayscale-a12);
  border-radius: 0 0.5rem 0.5rem 0;
  color: inherit !important;
  text-decoration: none !important;
  font-weight: inherit !important;
}
.ss-explore-link + .ss-explore-link {
  margin-top: 0.75rem;
}
.ss-explore-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 600;
  color: var(--grayscale-a12);
  line-height: 1.4;
}
.ss-explore-chevron {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--grayscale-a9);
  transition: color 0.15s ease, transform 0.15s ease;
}
.ss-explore-link:hover .ss-explore-name,
.ss-explore-link:hover .ss-explore-chevron {
  color: var(--accent-a11);
}
.ss-explore-link:focus-within .ss-explore-name,
.ss-explore-link:focus-within .ss-explore-chevron {
  color: var(--accent-a11); outline: none;
}
.ss-explore-link:hover .ss-explore-chevron {
  transform: translateX(2px);
}
.ss-explore-link:focus-within .ss-explore-chevron {
  transform: translateX(2px); outline: none;
}
/* The route: Fern's own method badge (same classes as the sidebar) and the path
   as plain text. Inline code on this site is Geist sans (see "Code" above), so
   the path inherits that; only the chip box and Fern's inset ring come off, and
   the path params wear the endpoint title row's accent chips. */
.ss-explore-route {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}
.ss-explore-route code {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--grayscale-a11);
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow-wrap: anywhere;
}
.ss-explore-param {
  color: var(--accent-a11);
  background: var(--accent-a3);
  border-radius: var(--radius-1);
  padding: 0 0.25rem;
  white-space: nowrap;
}

/* ---------- Tutorial products: the column fills the pane ---------- */
/* Zach 2026-10-03, reading the API integration guide on a 1920px screen: "this
   is too narrow" (a JSON example clipped at 795px whose lines need 1323px),
   "margin dead on the right ... use it to widen stuff", and "widen everything
   so it doesn't look out of place": the prose too, not only the code, so a
   page keeps one measure. On the Get Started, Embed and SDKs products (every
   page under those slugs: the quick start, the two integration guides,
   agent-assisted integration, the four embed pages and the four SDK pages)
   the article takes the whole pane between the sidebar and the "On this page"
   rail, capped at 80rem, the ceiling the guide-page tables already have. The
   API product's concept pages keep the reading measure above and the object
   pages keep their own block. The pages are picked by product off
   main[data-fern-active-slugs], which Fern writes into the server HTML
   (checked 2026-10-03 with curl), so no marker goes into the MDX and nothing
   flashes before hydration. The >=112rem left-edge rule still places the
   column where the endpoint prose starts; its margin is bounded by the room
   left beside an 80rem column so the two never add up past the pane
   (unbounded, the column ran up to 32px into the right padding between
   1920px and 2048px). Measured 2026-10-03 on the hosted pages by injection:
   article 352..1568 at 1920px (was 352..1184), 352..1376 at 1728px (was
   352..1120), 656..1936 at 2560px (was 656..1552), 368..1648 at 2000px with
   the content box ending at 1648; clipped code blocks across the twelve pages
   at 1920px 24 -> 4; unchanged at 1440px and below, where the 48rem measure
   already fills the pane. */
main.fern-main:is([data-fern-active-slugs^="get-started/"], [data-fern-active-slugs^="embed/"], [data-fern-active-slugs^="sdks/"]) .fern-layout-guide .w-content-width {
  width: 100% !important;
  max-width: 80rem !important;
}
@media (min-width: 112rem) {

  main.fern-main:is([data-fern-active-slugs^="get-started/"], [data-fern-active-slugs^="embed/"], [data-fern-active-slugs^="sdks/"]) .fern-layout-guide .w-content-width {
    margin-left: max(0px, min(50% - 38rem, 100% - 80rem)) !important;
  }

}
@media (min-width: 140rem) {

  main.fern-main:is([data-fern-active-slugs^="get-started/"], [data-fern-active-slugs^="embed/"], [data-fern-active-slugs^="sdks/"]) .fern-layout-guide .w-content-width {
    margin-left: max(0px, min(50% - 39rem, 100% - 80rem)) !important;
  }

}

/* SDK page section nav — custom.js MIRRORS the right-hand "On this page" TOC into
   the LEFT sidebar, nested under the active SDK link (Fern has no native option).
   Both rails show the same anchors since 2026-08-13 (Zach: "show both rails");
   `.ss-toc-hidden` is the dormant hide switch behind custom.js's HIDE_SDK_TOC —
   see the note there for why hiding it misaligned the page.
   PARITY with the API reference's nested endpoint rows (2026-08-13, Zach:
   "significant drift in the way that the SDK route handled sub tabs compared to
   the api reference … same font, weight, color, style"). It drifted because the
   list is hand-rolled markup (<ul class=ss-sdk-subnav><li><a>) that inherits
   NONE of the .fern-sidebar-link rules — it was styled as a quiet, smaller,
   grey TOC mirror (13px / a11 / 4px radius / grey active fill) while the API
   groups render Fern's own rows. Every value below is measured off a live
   .fern-sidebar-group-level-2 row on /api/api-reference/* at >=lg — keep them in
   step if the sidebar rules above move:
     ul  margin-left 1rem, padding 0.25rem 0 0.25rem 0.5rem, 1px a5 rule
     li  margin-block-end 1px
     a   padding 6px 8px, radius 8px, 15.25px / 400 / a12, line-height 1.25
         (= the 31.06px row height), hover a3, active the signature indigo
   The active fill is the same rgba(124,92,252,.2) the selected endpoint row
   carries — the indigo pill is the ONLY selection cue on both surfaces. */
.ss-toc-hidden {
  display: none !important;
}
.ss-sdk-subnav {
  list-style: none;
  margin: 0 0 0 1rem;
  padding: 0.25rem 0 0.25rem 0.5rem;
  border-left: 1px solid var(--grayscale-a5);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ss-sdk-subnav li {
  margin-block-end: 1px;
}
.ss-sdk-subnav a {
  display: block;
  padding: 0.375rem 0.5rem;
  font-size: 0.953125rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--grayscale-a12);
  text-decoration: none;
  border-radius: 0.5rem;
  background: transparent;
  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}
.ss-sdk-subnav a:hover {
  color: var(--grayscale-a12);
  background: var(--grayscale-a3);
}
.ss-sdk-subnav a.ss-active {
  color: var(--grayscale-a12);
  background: rgba(124, 92, 252, 0.2);
}

/* Breadcrumbs: neutral grey, not accent green (the "API Reference › …" trail). */
.fern-breadcrumb-item {
  color: var(--grayscale-a11) !important;
}

/* Sidebar scroll viewport: no scrollbar (it scrolls by wheel/trackpad). Hidden via
   the standard property + the webkit pseudo so it's gone in every mode. */
.fern-scroll-area-viewport {
  scrollbar-width: none;
}
.fern-scroll-area-viewport::-webkit-scrollbar {
  display: none !important;
}

/* THE GREEN SCROLLBAR. Fern hides the native scrollbar and renders its own Radix
   one instead — .fern-scroll-area-scrollbar > .fern-scroll-area-thumb — and paints
   the thumb var(--accent-track), i.e. brand green. It's opacity:0 until you scroll,
   so static scans never caught it; this Radix thumb (not any ::-webkit-scrollbar)
   is the green bar you actually see. Make it a neutral grey. */
.fern-scroll-area-thumb {
  background-color: var(--grayscale-a7) !important;
}

/* ---------- Response-status dropdown ---------- */
/* Drop the row type ~3px (14px → 11px) for a tighter list. Scoped to dropdown
   options so sidebar HTTP-method badges are untouched. The status-code numbers
   are also switched off the mono stack to Geist — but Fern pins that font with a
   cascade-layer !important that only an inline style can beat, so that half lives
   in custom.js, not here. */
[role="option"]:has(.fern-docs-badge) {
  font-size: 0.75rem;
}
[role="option"] .fern-docs-badge {
  font-size: 0.75rem;
}

/* ---------- Misc ---------- */
/* Brand text-selection highlight */
::selection {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
}

/* Slim, dark scrollbars to match the product */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--grayscale-a6) transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  background: var(--grayscale-a5);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--grayscale-a7);
}
*::-webkit-scrollbar-thumb:focus-visible {
  background: var(--grayscale-a7);
}

/* ---------- Remove Fern's page-bottom chrome ----------
   Hides the whole footer region in one shot — the "Was this page helpful?"
   toolbar, the Previous/Next bar, and the "Built with Fern" badge — with no
   leftover gap. Feedback + nav are also disabled via layout.hide-feedback /
   hide-nav-links in docs.yml so they never mount. */
.fern-layout-footer {
  display: none !important;
}
/* The API Explorer ("Try it", ?explorer=true) is a separate fixed overlay with
   its OWN branding bar, outside .fern-layout-footer. Its badge reuses
   id="builtwithfern" (a duplicate id) and Fern out-ranks a plain #builtwithfern
   rule, so hide the bar with higher specificity via :has(). */
.api-explorer div:has(> #builtwithfern) {
  display: none !important;
}

/* API Explorer endpoint-list group headers (Billing, Borrowers, …) render
   in accent green at 12px. Make them white, bigger, and bolder so they read as
   real section labels — like the main sidebar. (--accent-a11 is the only thing
   tinting them; the selector matches just those headers.) */
.api-explorer [class*="accent-a11"] {
  color: var(--grayscale-a12) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
}

/* Uniform selection in the Explorer: neutralize the active row's badge border so
   it matches the main sidebar. The active ROW's bg + label color are pinned green
   by Fern's design layer (CSS can't out-rank it, like the badges) — that half is
   set inline in custom.js. */
.api-explorer .fern-endpoint-selector.active .fern-docs-badge[data-http-method] {
  border-color: var(--grayscale-a5) !important;
}

/* Explorer search box: a plain faint-white border, not the accent-green ring. */
.api-explorer .fern-input {
  border-color: var(--grayscale-a6) !important;
  outline-color: var(--grayscale-a6) !important;
}

/* ---------- Search dialog ---------- */
/* Keep the results panel from collapsing during the empty frame(s) while cmdk
   swaps filtered hits. On every filter mutation (add / switch / Remove filter)
   the item set unmounts for ~2-5 frames before the new hits (or the "No
   results" row) mount; without a floor the dialog collapses to the chip row
   and the backdrop-blurred page bleeds through where the dark panel was —
   which reads as a white flash on the dark theme (Zach's 2026-08-12 recording;
   flash measured at 33-42ms). The floor holds the dark panel painted through
   the swap. 7rem ≈ the Ask AI row + the "No results" message, so steady empty
   states don't grow — only the transient zero-height state is prevented. */
#fern-search-dialog [data-cmdk-list] {
  min-height: 7rem;
}

/* ---------- "See X" description links: permanent arrow ---------- */
/* The Authorization / SpreadSpace-Version / Idempotency-Key header blurbs
   link "See Authentication" etc. by ABSOLUTE docs.spreadspace.app URL, so
   Fern's SSR pass dresses them as external (lucide arrow + target=_blank)
   and its hydration pass, recognizing the same host, re-renders them plain —
   the arrow FLASH on every first route paint (Zach 2026-08-14; ruling: show
   it permanently, "allow hyperlinks do it"). Fern's own icon can't be kept —
   the newer live bundle deletes the node — so: hide Fern's transient copy on
   these links and paint our own identical arrow as ::after, applied from
   first paint and untouched by hydration. Scoped to the docs-host-absolute
   links only; genuinely external links keep Fern's native icon behavior. */
a.fern-mdx-link[href^="https://docs.spreadspace.app/"] svg.external-link-icon {
  display: none;
}
a.fern-mdx-link[href^="https://docs.spreadspace.app/"]::after {
  content: '';
  display: inline-block;
  width: 0.875em;
  height: 0.875em;
  margin-left: 0.25em;
  vertical-align: -0.075em;
  background-color: currentColor;
  opacity: 0.7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Section headings are click-to-copy-anchor triggers in Fern, which sets an
   inline `cursor: pointer` on every h2–h4. That cursor promises a route: hover
   "Up next" and the page looks like it will navigate, then nothing happens.
   The copy-link behaviour stays; the heading just stops advertising a click.
   (Stylesheet !important beats the inline style Fern sets at render.) */
.fern-prose :is(h1, h2, h3, h4)[data-state] {
  cursor: default !important;
}

/* Short-list navs (Get Started home + the Embed product area): the handful of
   items sit a touch further left, a touch lower, and one notch larger — label
   15 -> 16.5px, icon 22 -> 24px (+10%), then both pulled back 5% (2026-08-18):
   label 15.675px, icon 22.8px. (The CSS-painted home glyphs in the NAV ICONS block
   carry the same 22.8px; a future scale tweak must touch both.) The long API list
   keeps its own scale;
   this is scoped off the SSR markup (:not(:has(.expand-indicator))) like the
   compact treatment above, so nothing resizes after first paint. */
.fern-sidebar-desktop:not(:has(.expand-indicator)) ul.fern-sidebar-group.space-y-6 {
  padding-left: 0.75rem !important;   /* 24 -> 12px: the pills start further left */
  margin-top: 0.625rem !important;    /* +10px down from the top edge */
}
#fern-sidebar:not(:has(.expand-indicator)) .fern-sidebar-link.fern-sidebar-level-1 .fern-sidebar-link-title-inner {
  font-size: 0.9796875rem !important; /* 16.5px * 0.95 = 15.675px */
}
.fern-sidebar-desktop:not(:has(.expand-indicator)) .fern-sidebar-link.fern-sidebar-level-1 svg.fern-file-icon {
  width: 1.425rem !important;         /* 24px * 0.95 = 22.8px */
  height: 1.425rem !important;
}

/* Integrator-kit dumps (SKILL.md / CLAUDE.md on the agent-assisted page): the two
   blocks are paste material for a partner's coding AGENT, not reading material —
   render the body visibly smaller than real code samples so a human scrolls past
   them fast; the copy button is the affordance, not the text (Zach 2026-08-20:
   "it's a copy and paste, not a ceremony"). The .ss-kit-dump wrapper is emitted by
   fern/gen-integrator-kit.py. Fern pins Tailwind text-sm (14px) on .code-block,
   hence the !important. The header strip (filename + copy button) keeps full size —
   that part IS for humans. font-size is re-declared inside the block, so the line
   layer has to be pinned too — the .code-block rule alone painted 13px. The
   descendant-star selector mirrors (and, being later in this file, out-orders at
   equal specificity) the guide-wide ".fern-layout-guide .code-block-line *"
   0.8125rem rule above, which is what was reaching .code-block-line-content. */
.ss-kit-dump .code-block {
  font-size: 0.75rem !important;   /* 14 -> 12px; gutter + lines inherit */
  line-height: 1.55 !important;
}
.ss-kit-dump .code-block-line-group,
.ss-kit-dump .code-block-line,
.ss-kit-dump .code-block-line-gutter,
.ss-kit-dump .code-block-line * {
  font-size: 0.75rem !important;
}

/* Agent-assisted card: the fifth Get started card sits alone under the 2-column
   card grid, centered, at one grid column's width (Zach 2026-08-20: "a block
   listed underneath centered", replacing the old footnote link). Width mirrors a
   column: 50% minus half the group's 0.75rem gap. Goes full-width where the
   group itself stacks to one column. */
.ss-card-centered {
  display: flex;
  justify-content: center;
  margin-top: 0.75rem;
}
/* Fern wraps a lone <Card> in its own .fern-card-group grid, so the width has to
   land on that wrapper (the flex child), not on the <a class="fern-card"> inside. */
.ss-card-centered .fern-card-group {
  width: calc(50% - 0.375rem);
}
@media (max-width: 40rem) {

  .ss-card-centered .fern-card-group {
    width: 100%;
  }

}

/* ---------- Keyboard focus rings ---------- */
/* Fern's docs renderer post-processes this file. After every rule whose selector
   ENDS in a plain :hover it emits a twin: :hover swapped for :focus-visible, the
   same declarations, plus `outline: none`. The twins are not on disk (grep finds
   no :focus-visible above this block; the served sheet carried 11). So a Tab
   stop on anything we gave a hover rule showed only that hover paint and no
   ring: the header button moved one indigo step, a card's hairline went a7, a
   prose link underlined. Measured 2026-09-19 in headless Chromium, both themes:
   outline-style none on every selector below. That is too little to find the
   focus by (WCAG 2.4.7), so the ring comes back. The hover paint a twin adds on
   focus stays; this only sets the outline back over it, and a mouse never sees
   it (:focus-visible does not match a click on a link). A :hover in MID-selector
   (.ss-explore-link:hover .ss-explore-name) gets a :focus-within twin instead;
   its `outline: none` lands on the children, which take no focus, so that kind
   strips nothing and needs no entry here.

   ORDER IS THE MECHANISM. Each twin sits right after its hover rule, at that
   rule's specificity, so a ring wins only from LATER in the file at equal or
   higher specificity. That is why this block is the last thing in the file, and
   why it restates each hover selector exactly, the html:not(.dark) button pair
   included (a light-only twin outranks the plain selector). `.fern-layout-guide
   a` and its siblings are broad on purpose: their twin strips the ring from
   every anchor in the page body (cards, breadcrumbs, the Explore rows), and the
   same selector hands it back to all of them. A new rule ending in :hover needs
   its :focus-visible selector added here. Never write :hover inside this block:
   that would spawn another twin below it.

   --accent-a11 is the indigo text step Fern derives per theme (#a1adff on dark,
   a deep indigo on light: 9.6:1 and 6.3:1 against the page), so one rule serves
   both themes. Fern's own base ring color, --accent-9 (#818cf8), is 2.9:1 on
   the light page, under the 3:1 a focus indicator needs. 2px wide, 2px out from
   the box: the geometry of Fern's base ring. The ring follows each element's
   own corner radius (square on the header button, 0.5rem on cards). */
.fern-header-content a.fern-button.filled:focus-visible,
#fern-sidebar a.fern-button.filled:focus-visible,
html:not(.dark) .fern-header-content a.fern-button.filled:focus-visible,
html:not(.dark) #fern-sidebar a.fern-button.filled:focus-visible,
.fern-mdx-link:focus-visible,
.fern-layout-guide a:focus-visible,
.fern-layout-overview a:focus-visible,
.fern-layout-reference a:focus-visible,
.fern-card:focus-visible,
.fern-card.interactive:focus-visible,
.ss-sdk-subnav a:focus-visible {
  outline: 2px solid var(--accent-a11);
  outline-offset: 2px;
}
/* The SDK section rows stack 1px apart, so a ring 2px outside one row would run
   across the fill of the row above and below it (the active row's indigo pill,
   a hovered row's grey). Drawn inside the row's own box instead, along its
   0.5rem corners. */
.ss-sdk-subnav a:focus-visible {
  outline-offset: -2px;
}