) are untouched. */
table thead:has(th):not(:has(th:not(:empty))) {
display: none;
}
/* Space between tables stacked directly on top of each other — adjacent table
wrappers (or bare tables) otherwise render flush with no gap between them. */
.fern-prose [class*="table-"] + [class*="table-"],
.fern-prose table + table {
margin-top: 1.5rem;
}
.table-a table th,
.table-a2 table th,
.table-a3 table th,
.table-a4 table th,
.table-b table th,
.table-b2 table th,
.table-d table th,
.table-e table th {
vertical-align: bottom;
padding: 0.5rem 0.75rem;
}
.table-a table td,
.table-a2 table td,
.table-a3 table td,
.table-a4 table td,
.table-b table td,
.table-b2 table td,
.table-d table td,
.table-e table td {
vertical-align: top;
padding: 0.5rem 0.75rem;
}
/* ── Default header background ── */
.table-a table thead th,
.table-a2 table thead th,
.table-a3 table thead th,
.table-a4 table thead th,
.table-b table thead th,
.table-b2 table thead th,
.table-d table thead th {
background: #e9e9e9;
}
:root.dark .table-a table thead th,
:root.dark .table-a2 table thead th,
:root.dark .table-a3 table thead th,
:root.dark .table-a4 table thead th,
:root.dark .table-b table thead th,
:root.dark .table-b2 table thead th,
:root.dark .table-d table thead th {
background: #444e54;
}
/* ── Table A: standard bordered ── */
.table-a th {
border: 1px solid #d8d8d8 !important;
}
:root.dark .table-a th {
border-color: #d8d8d845 !important;
}
.table-a td {
border: 1px solid #d8d8d8 !important;
}
:root.dark .table-a td {
border-color: #d8d8d845 !important;
}
/* ── Table A2: bordered + header column ── */
.table-a2 th,
.table-a2 td {
border: 1px solid #d8d8d8 !important;
}
:root.dark .table-a2 th,
:root.dark .table-a2 td {
border-color: #d8d8d845 !important;
}
.table-a2 td:first-child {
background-color: #e9e9e975;
font-weight: 600;
}
:root.dark .table-a2 td:first-child {
background-color: #363e4395 !important;
}
/* Grouped (rowspan) tables: reset header shading on spanned rows */
.table-a2:has(td[rowspan]) tr:not(:has(td[rowspan])) td:first-child {
background-color: transparent !important;
font-weight: 400 !important;
}
/* ── Table A3: merged header row ── */
.table-a3 tr,
.table-a3 td {
border: 1px solid #d8d8d8 !important;
}
:root.dark .table-a3 tr,
:root.dark .table-a3 td {
border-color: #d8d8d845 !important;
}
/* ── Table A4: header column + merged header row ── */
.table-a4 tr,
.table-a4 td {
border: 1px solid #d8d8d8 !important;
}
:root.dark .table-a4 tr,
:root.dark .table-a4 td {
border-color: #d8d8d845 !important;
}
.table-a4 td:first-child {
background-color: #e9e9e975;
font-weight: 600;
}
:root.dark .table-a4 td:first-child {
background-color: #363e4395 !important;
}
/* ── Table B: horizontal borders only ── */
.table-b tr {
border-bottom: 1px solid #d8d8d8;
}
:root.dark .table-b tr {
border-bottom: 1px solid #d8d8d845;
}
.table-b td {
background-color: #fcfcfc;
}
:root.dark .table-b td {
background-color: #303b4265;
}
/* ── Table B2: horizontal borders + header column ── */
.table-b2 tr {
border-bottom: 1px solid #d8d8d8;
}
:root.dark .table-b2 tr {
border-bottom: 1px solid #d8d8d845;
}
.table-b2 td:not(:first-child) {
background-color: #fcfcfc !important;
}
:root.dark .table-b2 td:not(:first-child) {
background-color: #303b4265 !important;
}
.table-b2 td:first-child {
background-color: #e9e9e975;
font-weight: 600;
}
:root.dark .table-b2 td:first-child {
background-color: #363e4395 !important;
}
.table-b2:has(td[rowspan]) tr:not(:has(td[rowspan])):not(:has(td.row-header)) td:first-child {
background-color: #fcfcfc !important;
font-weight: 400 !important;
}
:root.dark .table-b2:has(td[rowspan]) tr:not(:has(td[rowspan])):not(:has(td.row-header)) td:first-child {
background-color: #303b4265 !important;
font-weight: 400 !important;
}
/* ── Table D: blank corner cell ── */
.table-d th:not(:first-child),
.table-d td {
border: 1px solid #d8d8d8 !important;
}
:root.dark .table-d th:not(:first-child),
:root.dark .table-d td {
border-color: #d8d8d845 !important;
}
.table-d th {
font-weight: bold;
}
.table-d th:first-child {
background-color: transparent !important;
border-top: none;
border-left: none;
}
.table-d td:first-child {
background-color: #e9e9e975;
font-weight: 600;
}
:root.dark .table-d td:first-child {
background-color: #363e43;
}
/* ── Table E: horizontal borders + borderless header column ── */
.table-e {
border-collapse: collapse;
width: 100%;
}
.table-e td,
.table-e th {
border: 1px solid #d8d8d8;
padding: 8px;
text-align: left;
}
.table-e td:first-child,
.table-e th:first-child {
border-left: none;
background: none;
}
.table-e td:not(:first-child),
.table-e th:not(:first-child) {
border-bottom: 1px solid #d8d8d8;
}
:root.dark .table-e th:not(:first-child),
:root.dark .table-e td:not(:first-child) {
border-color: #d8d8d845 !important;
}
.table-e th:first-child {
background-color: transparent !important;
border-top: none;
border-left: none;
}
/* ── Grid: borderless + extra padding ── */
.grid {
margin: 0 0.5rem 0 0;
}
.grid table td:not(.code-block-line-content):not(.code-block-line-gutter) {
padding: 1rem;
}
/* ── Grid-list: borderless compact grid ── */
.grid-list {
margin: 0 0 1rem 0;
padding-bottom: 0.5rem;
}
.grid-list table td {
padding: 0.5rem;
}
.grid-list table td:first-child img {
margin: 0 auto;
}
/* ── Center: center first column ── */
.center table td:first-child {
text-align: center !important;
}
/* ── Utility classes ── */
th.top-lev {
background-color: #d5d5d5;
}
td.header-col,
.header-col {
background-color: #f4f4f4;
font-weight: 600;
}
:root.dark td.header-col,
:root.dark .header-col {
background-color: #303b42b0;
}
td.header-colspan,
td.header-colspan p {
background-color: #e5e5e5;
font-weight: 600;
}
.matrix-text-center th:not(:first-child),
.matrix-text-center td:not(:first-child) {
text-align: center !important;
}
.function-list td:first-child {
min-width: 150px;
font-weight: 600;
}
.full-width table {
width: 100%;
}
.header-col-200 td:first-child {
width: 200px;
}
/* ── Alternating row headers ── */
.alt-row-header tr:nth-child(2n) {
background-color: #e9e9e9 !important;
font-weight: 600;
}
:root.dark .alt-row-header tr:nth-child(2n) {
background-color: #444e54 !important;
}
/* ── Row banding (body rows only, no bold) ── */
.row-banded tbody tr:nth-child(2n) {
background-color: #e9e9e9 !important;
}
:root.dark .row-banded tbody tr:nth-child(2n) {
background-color: #444e54 !important;
}
/* ── Subheader row ── */
.subheader-row tr:nth-child(1) {
background-color: #e9e9e975;
font-weight: 600;
}
/* ── Column 3 thumbnail ── */
.col-3-thumb th:nth-child(3) {
width: 30%;
word-wrap: break-word;
}
/* ── Break long strings in cells ── */
.break-string td {
word-break: break-word;
}
/* Long unbroken strings (e.g. SSH keys) in / would otherwise
overflow and blow out the table width — force them to wrap. */
.break-string td pre,
.break-string td code {
white-space: pre-wrap;
overflow-wrap: anywhere;
word-break: break-all;
}
/* ...but the key column holds short labels — don't break those mid-word. */
.break-string td:first-child,
.break-string td:first-child p {
white-space: nowrap;
word-break: normal;
overflow-wrap: normal;
}
/* ── Prevent wrapping on inline labels ──
Usage: ... (used widely across docs). */
.no-wrap {
white-space: nowrap;
}
/* ── Table paragraph spacing ── */
.table-a td p:not(:last-child),
.table-a2 td p:not(:last-child),
.table-a3 td p:not(:last-child),
.table-a4 td p:not(:last-child),
.table-b td p:not(:last-child),
.table-b2 td p:not(:last-child),
/* plain (unwrapped) prose tables — e.g. the support page — get the same
breathing room between stacked paragraphs in a cell */
.fern-prose td p:not(:last-child) {
margin-bottom: 0.5rem;
}
/* ── Table list spacing ── */
.table-a li > p,
.table-a2 li > p,
.table-a3 li > p,
.table-a4 li > p {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.table-a li + li,
.table-a2 li + li,
.table-a3 li + li,
.table-a4 li + li {
margin-top: 0.5em;
}
/* ── Checkmark / xmark lists (e.g. billable usage events) ──
Usage: or with items.
Replaces the default bullet with a colored ✓ / ✕ marker. */
ul.checkmark,
ul.xmark {
list-style: none;
padding-left: 0.75em;
margin-left: 0;
}
.checkmark li,
.xmark li {
list-style: none;
}
.checkmark li::before,
.xmark li::before {
display: inline-block;
width: 1.2em;
font-weight: 600;
}
.checkmark li::before {
content: "✓";
color: #2e7d32;
}
.xmark li::before {
content: "✕";
color: #ff0000;
}
/* ── Prevent Fern image-zoom from adding excessive margins to table images ── */
table td img,
.fern-table td img {
margin: 0 auto !important;
display: block;
}
/* ── Give table logos a light background in dark mode so dark text stays readable ── */
:root.dark table td img,
:root.dark .fern-table td img {
background-color: rgba(255, 255, 255, 0.9);
border-radius: 4px;
padding: 4px;
}
/* ============================================================
Individual docs-page styling (scoped to non-landing pages)
- content links in Sigma blue (#1A70F1)
- page title (H1) in the Advercase display face
- left-align content images (Fern centers them via .mx-auto)
============================================================ */
/* Links — Sigma blue */
body:not(:has(.sigma-landing)) .fern-prose a {
color: #1A70F1;
}
body:not(:has(.sigma-landing)) .fern-prose a:hover {
color: #1660D6;
}
body:not(:has(.sigma-landing)) .fern-prose a:focus-visible {
color: #1660D6;
}
/* "Try it" playground buttons (RunnableEndpoint) — black in light mode,
white in dark mode, instead of inheriting the plain-link color override
above, which strips their accent styling. Matches the native "Try it"
button styling on the API reference page. */
body:not(:has(.sigma-landing)) .fern-prose a[href*="explorer=true"] {
background-color: #000000;
color: #FFFFFF;
}
body:not(:has(.sigma-landing)) .fern-prose a[href*="explorer=true"]:hover {
background-color: #262626;
color: #FFFFFF;
}
body:not(:has(.sigma-landing)) .fern-prose a[href*="explorer=true"]:focus-visible {
background-color: #262626;
color: #FFFFFF;
}
:root.dark body:not(:has(.sigma-landing)) .fern-prose a[href*="explorer=true"] {
background-color: #FFFFFF;
color: #000000;
}
:root.dark body:not(:has(.sigma-landing)) .fern-prose a[href*="explorer=true"]:hover {
background-color: #E5E5E5;
color: #000000;
}
:root.dark body:not(:has(.sigma-landing)) .fern-prose a[href*="explorer=true"]:focus-visible {
background-color: #E5E5E5;
color: #000000;
}
/* Page title — Advercase display font */
body:not(:has(.sigma-landing)) h1.fern-page-heading {
font-family: "Advercase", Georgia, "Times New Roman", serif;
font-weight: 400;
letter-spacing: 0.02em;
}
/* Images — left-aligned (override Fern's centering)… */
body:not(:has(.sigma-landing)) .fern-prose img {
margin-left: 0 !important;
margin-right: auto !important;
}
/* …but keep small images inside table cells centered (existing behavior) */
body:not(:has(.sigma-landing)) .fern-prose td img {
margin: 0 auto !important;
}
/* Step screenshots inside numbered/bulleted lists stay at the list's content
indent so they line up with the step text (not pulled out to the page
margin). Inline icons keep their inline style; table-cell images untouched. */
body:not(:has(.sigma-landing)) .fern-prose li p img:not([style*="display: inline"]) {
margin-left: 0 !important;
}
/* ============================================================
Callout styling — customer brand colors
Mapping: = "Note" (blue), = "Warning" (red),
= "Important" (purple), = "Tip" (green)
============================================================ */
/* ── Note (intent "info") — Blue ── */
.fern-callout[data-intent="info"] {
background-color: #EEF4FF !important;
border-color: #C6D8FB !important;
color: #3B6FD4 !important;
}
.fern-callout[data-intent="info"] svg {
color: #3B6FD4 !important;
}
.fern-callout[data-intent="info"] h5,
.fern-callout[data-intent="info"] p,
.fern-callout[data-intent="info"] li,
.fern-callout[data-intent="info"] a {
color: #1e3a5f !important;
}
/* ── Warning (intent "warning") — Red/Orange ── */
.fern-callout[data-intent="warning"] {
background-color: #FFF0EC !important;
border-color: #FDB19E !important;
color: #E04B28 !important;
}
.fern-callout[data-intent="warning"] svg {
color: #E04B28 !important;
}
.fern-callout[data-intent="warning"] h5,
.fern-callout[data-intent="warning"] p,
.fern-callout[data-intent="warning"] li,
.fern-callout[data-intent="warning"] a {
color: #5c1d0e !important;
}
/* ── Important (intent "note") — Purple ── */
.fern-callout[data-intent="note"] {
background-color: #F3EFFF !important;
border-color: #C4AFF5 !important;
color: #7C4DCC !important;
}
.fern-callout[data-intent="note"] svg {
color: #7C4DCC !important;
}
.fern-callout[data-intent="note"] h5,
.fern-callout[data-intent="note"] p,
.fern-callout[data-intent="note"] li,
.fern-callout[data-intent="note"] a {
color: #3b1f6e !important;
}
/* ── Tip (intent "tip") — Green ── */
.fern-callout[data-intent="tip"] {
background-color: #E5FBEA !important;
border-color: #9DE0B0 !important;
color: #27A050 !important;
}
.fern-callout[data-intent="tip"] svg {
color: #27A050 !important;
}
.fern-callout[data-intent="tip"] h5,
.fern-callout[data-intent="tip"] p,
.fern-callout[data-intent="tip"] li,
.fern-callout[data-intent="tip"] a {
color: #133d22 !important;
}
/* ── Callout icon replacement via CSS ──
Hide default SVG and inject custom icons as background-image on the container */
/* Warning: replace Bell with Triangle Alert */
.fern-callout[data-intent="warning"] > div > div:first-child {
position: relative;
}
.fern-callout[data-intent="warning"] > div > div:first-child svg {
visibility: hidden;
}
.fern-callout[data-intent="warning"] > div > div:first-child::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23E04B28' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
/* Important (note): replace Pin with Flag */
.fern-callout[data-intent="note"] > div > div:first-child {
position: relative;
}
.fern-callout[data-intent="note"] > div > div:first-child svg {
visibility: hidden;
}
.fern-callout[data-intent="note"] > div > div:first-child::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237C4DCC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/%3E%3Cline x1='4' x2='4' y1='22' y2='15'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
/* Opt a Note out of the forced Flag icon to use its inline icon= prop.
Sizing is left to Fern's own [&_svg]:size-icon-md wrapper. */
.fern-callout.custom-icon[data-intent="note"] .callout-icon svg {
visibility: visible;
width: 16px;
height: 16px;
overflow: visible;
}
.fern-callout.custom-icon[data-intent="note"] > div > div:first-child::before {
content: none;
}
/* Note (info): ensure info circle icon stays (default is already correct) */
.fern-callout[data-intent="info"] > div > div:first-child {
position: relative;
}
/* ── Dark mode callout adjustments ── */
:root.dark .fern-callout[data-intent="info"] {
background-color: rgba(59, 111, 212, 0.10) !important;
border-color: rgba(198, 216, 251, 0.25) !important;
color: #8AB4F8 !important;
}
:root.dark .fern-callout[data-intent="info"] svg {
color: #8AB4F8 !important;
}
:root.dark .fern-callout[data-intent="info"] h5,
:root.dark .fern-callout[data-intent="info"] p,
:root.dark .fern-callout[data-intent="info"] li,
:root.dark .fern-callout[data-intent="info"] a {
color: #c8dcf8 !important;
}
:root.dark .fern-callout[data-intent="warning"] {
background-color: rgba(224, 75, 40, 0.10) !important;
border-color: rgba(253, 177, 158, 0.25) !important;
color: #F4845F !important;
}
:root.dark .fern-callout[data-intent="warning"] svg {
color: #F4845F !important;
}
:root.dark .fern-callout[data-intent="warning"] h5,
:root.dark .fern-callout[data-intent="warning"] p,
:root.dark .fern-callout[data-intent="warning"] li,
:root.dark .fern-callout[data-intent="warning"] a {
color: #f8d0c0 !important;
}
:root.dark .fern-callout[data-intent="warning"] > div > div:first-child::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23F4845F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
:root.dark .fern-callout[data-intent="note"] {
background-color: rgba(124, 77, 204, 0.10) !important;
border-color: rgba(196, 175, 245, 0.25) !important;
color: #B794F4 !important;
}
:root.dark .fern-callout[data-intent="note"] svg {
color: #B794F4 !important;
}
:root.dark .fern-callout[data-intent="note"] h5,
:root.dark .fern-callout[data-intent="note"] p,
:root.dark .fern-callout[data-intent="note"] li,
:root.dark .fern-callout[data-intent="note"] a {
color: #dccef8 !important;
}
:root.dark .fern-callout[data-intent="note"] > div > div:first-child::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B794F4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/%3E%3Cline x1='4' x2='4' y1='22' y2='15'/%3E%3C/svg%3E");
}
:root.dark .fern-callout[data-intent="tip"] {
background-color: rgba(39, 160, 80, 0.10) !important;
border-color: rgba(157, 224, 176, 0.25) !important;
color: #6BCB77 !important;
}
:root.dark .fern-callout[data-intent="tip"] svg {
color: #6BCB77 !important;
}
:root.dark .fern-callout[data-intent="tip"] h5,
:root.dark .fern-callout[data-intent="tip"] p,
:root.dark .fern-callout[data-intent="tip"] li,
:root.dark .fern-callout[data-intent="tip"] a {
color: #c0f0cc !important;
}
/* Footnote CSS */
.footnote {
display: flex;
align-items: baseline;
}
.footnote-marker {
font-size: smaller;
margin-right: 0.25em;
position: relative;
top: -0.25rem;
}
.footnote-content {
font-style: italic;
font-size: 0.9rem;
}
/* ============================================================
Inline code — grayer background for higher contrast
(Fern's default uses a near-white fill that's hard to read)
============================================================ */
:root.light .fern-prose code:not(pre code):not(.fern-prompt-code),
:root.light .fern-mdx-inline-code {
background-color: #F3F3F4 !important;
border-color: #E0E2E7 !important;
color: #24242E !important;
}
:root.dark .fern-prose code:not(pre code):not(.fern-prompt-code),
:root.dark .fern-mdx-inline-code {
background-color: #2B2B33 !important;
border-color: #3A3A44 !important;
color: #E6E6EB !important;
}
/* ============================================================
Code blocks — force the configured monospace code font on
fenced (```) and blocks and use a gray background
============================================================ */
:root.light .fern-code-block {
background-color: #F3F3F4 !important;
border-color: #E0E2E7 !important;
}
:root.dark .fern-code-block {
background-color: #2B2B33 !important;
border-color: #3A3A44 !important;
}
/* The light syntax theme colors comments a very pale gray (rgb(194,195,197))
that's hard to read on the gray code-block fill. Shiki sets it inline, so
match that exact (comment-only) color and darken it for contrast. Dark mode
uses --shiki-dark (#8a8a8a) on the dark fill and reads fine, so it's left. */
:root.light .fern-code-block span[style*="color: rgb(194, 195, 197)"] {
color: #5C6370 !important;
}
pre,
code,
[class*="code-block"] {
font-family: var(--typography-code-font-family) !important;
}
/* ============================================================
Mermaid diagrams — Fern renders mermaid with the theme matching the active
site mode, so node fills, text, edge colors, and edge-label chip
backgrounds all shift between light and dark. To keep diagrams
readable AND consistent, we normalize every diagram to one light "card"
palette (dark ink text, light fills, gray edges, white edge-label chips)
in BOTH themes — light cards read fine over the dark page too. Diagram
fills authored inline in the .mdx (style X fill:#…) are decorative, so we
override them here for legibility. The diagram is an (no .mermaid wrapper), and mermaid scopes its own
styles by that dynamic #id, so we match the id prefix and use
!important to win.
============================================================ */
svg[id^="mermaid-"] .nodeLabel,
svg[id^="mermaid-"] .nodeLabel p,
svg[id^="mermaid-"] .edgeLabel,
svg[id^="mermaid-"] .edgeLabel p,
svg[id^="mermaid-"] .cluster-label,
svg[id^="mermaid-"] .label,
svg[id^="mermaid-"] span,
svg[id^="mermaid-"] text {
fill: #14213d !important;
color: #14213d !important;
}
svg[id^="mermaid-"] .node rect,
svg[id^="mermaid-"] .node polygon,
svg[id^="mermaid-"] .node circle,
svg[id^="mermaid-"] .node ellipse,
svg[id^="mermaid-"] .node path,
svg[id^="mermaid-"] .cluster rect {
fill: #eef4ff !important;
stroke: #3b6fd4 !important;
}
/* edges + arrowheads (arrowheads inherit the svg fill → invisible) */
svg[id^="mermaid-"] .flowchart-link,
svg[id^="mermaid-"] .edgePath .path {
stroke: #5a6577 !important;
}
svg[id^="mermaid-"] .marker,
svg[id^="mermaid-"] .arrowMarkerPath {
fill: #5a6577 !important;
}
/* edge-label chips — the dark theme paints the chip via background-color on
the HTML (foreignObject label), not the SVG rect, so forcing only the
rect/labelBkg leaves a dark chip under the (now dark) text in dark mode.
Force white on all four: the HTML label elements and the SVG fallbacks. */
svg[id^="mermaid-"] .edgeLabel,
svg[id^="mermaid-"] .edgeLabel p {
background-color: #ffffff !important;
opacity: 1 !important;
}
svg[id^="mermaid-"] .edgeLabel rect,
svg[id^="mermaid-"] .labelBkg {
fill: #ffffff !important;
background-color: #ffffff !important;
opacity: 1 !important;
padding: 4px !important;
}
/* Inline caret/dropdown icon sits slightly low with vertical-align: middle —
nudge it up 2px so it reads as centered (e.g. inside parentheses). */
.fern-prose img[src*="caret.svg"] {
transform: translateY(-2px);
}
/* ── Hide the Ask AI UI while the backend stays enabled ──
Hides every Ask AI surface: the header button, the "Ask AI" entry in the
search dialog, the Ask AI side panel (also reachable via keyboard
shortcut), the "Ask a question" page action, and the per-endpoint Ask AI
buttons in API reference blocks. The AI backend remains on so the MCP
server keeps working. */
#fern-ask-ai-button,
#fern-ask-ai-panel,
[data-cmdk-item][data-value^="Ask AI"],
[data-mode="ask-ai"],
button[aria-label="Ask AI"],
button[title="Ask a question about this page"],
[role="menuitemradio"].fern-dropdown-item:has(svg path[d^="M327.5 85.2"]) {
display: none !important;
}
/* If the Ask AI side panel is triggered anyway (e.g. pressing Enter in the
search dialog), the layout normally shifts left to make room for it —
with the panel hidden that leaves a blank strip. Cancel the shift. */
[data-side-panel-open] {
margin-right: 0 !important;
}
/* The header also shrinks to make room for the hidden panel — keep it full width. */
[data-side-panel-open] #fern-header {
width: 100% !important;
}
/* "Chat with AI" button loading state (toggled by custom.js while Intercom
boots). Overlay covers the existing icon/text via `background: inherit`, so
it doesn't need to know Fern's internal button markup. */
.sigma-chat-loading {
position: relative;
pointer-events: none;
}
.sigma-chat-loading::before {
content: "";
position: absolute;
inset: 0;
background: inherit;
border-radius: inherit;
}
.sigma-chat-loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 14px;
margin: -7px 0 0 -7px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: sigma-chat-spin 0.7s linear infinite;
}
@keyframes sigma-chat-spin {
to {
transform: rotate(360deg);
}
}
/* Process diagram (Build apps > AI apps overview) */
.sigma-flow-diagram {
display: flex;
align-items: center;
margin-top: 1.5rem;
padding: 0 1rem;
}
.sigma-flow-box {
flex: 1 0 calc(30% - 45px);
height: 80px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #292929;
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 1rem;
border: 1.5px solid #3d3d3d;
border-radius: 12px;
}
.sigma-flow-box-1 { background-color: #e9e9e9; }
.sigma-flow-box-2 { background-color: #c6d8fb; }
.sigma-flow-box-3 { background-color: #8ab4f8; }
.sigma-flow-connector {
flex: 0 0 42px;
height: 1.5px;
background-color: #737373;
}