) 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.
Matches whole class names that start with "table-" (table-a, table-b2, ...), not
any class that merely contains it, such as the sigma-adv-table-* component classes. */
.fern-prose :is([class^="table-"], [class*=" table-"]) + :is([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 ──
Applies to every table-* variant (table-a, table-b2, table-d, ...) but not
sigma-adv-table-* component classes, same matching as the rule above. */
:is([class^="table-"], [class*=" table-"]) li > p {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
:is([class^="table-"], [class*=" table-"]) li + li,
:is([class^="table-"], [class*=" table-"]) li > ul {
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;
}
/* ── Interactive table (custom_blocks/CustomAdvancedTable.tsx) ──
Filterable, sortable, paginated table. Column min-widths stay inline in the
component because they're calculated from each table's data. */
/* Colors, shared with the category dropdown above linked tables (FilteredEventTables) */
.sigma-adv-table,
.sigma-filtered-tables {
--sigma-adv-table-control-border: #d1d5db;
--sigma-adv-table-header-border: #e5e7eb;
--sigma-adv-table-row-border: #f3f4f6;
--sigma-adv-table-muted: #6b7280;
--sigma-adv-table-current-bg: #dbeafe;
--sigma-adv-table-current: #1A70F1;
}
:root.dark .sigma-adv-table,
:root.dark .sigma-filtered-tables {
--sigma-adv-table-control-border: #565f65;
--sigma-adv-table-header-border: #444e54;
--sigma-adv-table-row-border: #363e43;
--sigma-adv-table-muted: #9ca3af;
--sigma-adv-table-current-bg: #1e3a5f;
--sigma-adv-table-current: #93c5fd;
}
.sigma-adv-table {
display: flex;
flex-direction: column;
gap: 8px;
}
.sigma-adv-table-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.sigma-adv-table-filter-group {
display: flex;
align-items: center;
gap: 12px;
}
.sigma-adv-table-filter {
width: 200px;
padding: 8px 12px;
border: 1px solid var(--sigma-adv-table-control-border);
border-radius: 6px;
background: inherit;
}
.sigma-adv-table-page-label {
font-size: 13px;
color: var(--sigma-adv-table-muted);
white-space: nowrap;
}
.sigma-adv-table-export {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
font-size: 14px;
border: 1px solid var(--sigma-adv-table-control-border);
border-radius: 6px;
background: inherit;
cursor: pointer;
}
.sigma-adv-table-export svg {
flex-shrink: 0;
}
.sigma-adv-table-scroll {
overflow: auto;
}
/* margin: 0 overrides Fern's prose table margins, so the 8px gap above is the only spacing */
.sigma-adv-table table {
width: 100%;
margin: 0;
border-collapse: collapse;
}
.sigma-adv-table th {
text-align: left;
padding: 8px;
border-bottom: 2px solid var(--sigma-adv-table-header-border);
white-space: nowrap;
}
.sigma-adv-table td {
padding: 8px;
border-bottom: 1px solid var(--sigma-adv-table-row-border);
}
/* Two classes, so this outranks the plain td rule above */
.sigma-adv-table .sigma-adv-table-empty {
padding: 16px;
text-align: center;
color: #9ca3af;
}
/* Strip the default button look so the sort control reads as header text,
but keep the browser's focus outline for keyboard users */
.sigma-adv-table-sort {
width: 100%;
padding: 0;
border: none;
background: none;
font: inherit;
color: inherit;
text-align: inherit;
cursor: pointer;
}
.sigma-adv-table-pager {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
flex-wrap: wrap;
}
.sigma-adv-table-pager button {
padding: 4px 12px;
border: none;
border-radius: 6px;
background: inherit;
color: inherit;
font-weight: 400;
cursor: pointer;
}
.sigma-adv-table-pager [aria-current="page"] {
font-weight: 700;
background: var(--sigma-adv-table-current-bg);
color: var(--sigma-adv-table-current);
}
/* Previous and Next use aria-disabled instead of disabled (see goToPage in the component) */
.sigma-adv-table-pager [aria-disabled="true"],
.sigma-adv-table-export:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ── Linked tables with one category dropdown (custom_blocks/FilteredEventTables.tsx) ── */
.sigma-filtered-tables {
display: flex;
flex-direction: column;
gap: 24px;
}
.sigma-filtered-tables-category {
display: flex;
flex-direction: column;
gap: 4px;
max-width: 320px;
}
/* The browser's own arrow can't be moved, so draw one 12px in from the right edge instead */
.sigma-filtered-tables-category select {
appearance: none;
padding: 4px 36px 4px 12px;
border: 1px solid var(--sigma-adv-table-control-border);
border-radius: 6px;
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 8px;
cursor: pointer;
}
:root.dark .sigma-filtered-tables-category select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* ============================================================
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;
}