/*fern-site-stylesheet*/@font-face {
    font-family: 'Geist';
    src: url('/docs/_fern-files/signalcore.docs.buildwithfern.com/19f9c92546aa300c312235e3125af1b81394d8db9a4bc4a425cd5b641d2d54e1/docs/assets/fonts/geist-latin-wght-normal.woff2') format('woff2');
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Schibsted Grotesk';
    src: url('/docs/_fern-files/signalcore.docs.buildwithfern.com/4c8b93f431d462c696e12b9d6a033feb3394d36e66e781357c496b95d8a75e05/docs/assets/fonts/schibsted-grotesk-latin-wght-normal.woff2') format('woff2');
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/docs/_fern-files/signalcore.docs.buildwithfern.com/18be452724bfdc236c074ca94a249a7f41a86752c7d04ab258ce9ed5651f6a7e/docs/assets/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2');
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist Fallback';
    src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
    size-adjust: 104.76%;
    ascent-override: 95.94%;
    descent-override: 28.16%;
    line-gap-override: 0.00%;
}
@font-face {
    font-family: 'Schibsted Grotesk Fallback';
    src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
    size-adjust: 104.49%;
    ascent-override: 93.46%;
    descent-override: 24.67%;
    line-gap-override: 0.00%;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 672px;
  --sidebar-width: 272px;
  --page-width: 1440px;
  --logo-height: 34px;
  --font-body: 'Geist', 'Geist Fallback', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'Schibsted Grotesk', 'Schibsted Grotesk Fallback', 'Geist', 'Geist Fallback', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: 'JetBrains 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: #fefcff;
  --accent-2: #fbf7ff;
  --accent-3: #f7ecff;
  --accent-4: #f2e0ff;
  --accent-5: #ebd2ff;
  --accent-6: #e1c0ff;
  --accent-7: #d4a8ff;
  --accent-8: #c488ff;
  --accent-9: #8100c8;
  --accent-10: #7100b5;
  --accent-11: #8c1ed5;
  --accent-12: #480971;

  --accent-a1: #aa00ff03;
  --accent-a2: #8000ff08;
  --accent-a3: #9400ff13;
  --accent-a4: #9500ff1f;
  --accent-a5: #8e00ff2d;
  --accent-a6: #8600ff3f;
  --accent-a7: #8100ff57;
  --accent-a8: #8100ff77;
  --accent-a9: #8100c8;
  --accent-a10: #7100b5;
  --accent-a11: #7d00cfe1;
  --accent-a12: #41006cf6;

  --accent-contrast: #fff;
  --accent-surface: #faf5ffcc;
  --accent-indicator: #8100c8;
  --accent-track: #8100c8;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.3% 0.0054 305.8);
      --accent-2: oklch(98.2% 0.013 305.8);
      --accent-3: oklch(95.9% 0.0346 305.8);
      --accent-4: oklch(93.3% 0.0552 305.8);
      --accent-5: oklch(90.1% 0.0769 305.8);
      --accent-6: oklch(86% 0.1006 305.8);
      --accent-7: oklch(80.4% 0.1323 305.8);
      --accent-8: oklch(73.3% 0.1749 305.8);
      --accent-9: oklch(47.9% 0.248 305.8);
      --accent-10: oklch(42.8% 0.248 305.8);
      --accent-11: oklch(51.6% 0.248 305.8);
      --accent-12: oklch(32.2% 0.1569 305.8);

      --accent-a1: color(display-p3 0.6745 0.0235 1 / 0.012);
      --accent-a2: color(display-p3 0.3882 0.0196 0.8784 / 0.032);
      --accent-a3: color(display-p3 0.4784 0.0078 0.949 / 0.075);
      --accent-a4: color(display-p3 0.4706 0.0039 0.9373 / 0.118);
      --accent-a5: color(display-p3 0.4588 0.0039 0.9333 / 0.173);
      --accent-a6: color(display-p3 0.4392 0.0039 0.9373 / 0.244);
      --accent-a7: color(display-p3 0.4157 0.0039 0.9333 / 0.334);
      --accent-a8: color(display-p3 0.4157 0.0039 0.9412 / 0.455);
      --accent-a9: color(display-p3 0.4157 0 0.7294 / 0.918);
      --accent-a10: color(display-p3 0.3608 0 0.6588 / 0.934);
      --accent-a11: color(display-p3 0.4157 0 0.7686 / 0.844);
      --accent-a12: color(display-p3 0.2118 0 0.3922 / 0.942);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9765 0.9608 1 / 0.8);
      --accent-indicator: oklch(47.9% 0.248 305.8);
      --accent-track: oklch(47.9% 0.248 305.8);
    }
  }
}


.light, :root {
  --grayscale-1: #fdfcfd;
  --grayscale-2: #faf9fb;
  --grayscale-3: #f2eff3;
  --grayscale-4: #eae7ec;
  --grayscale-5: #e3dfe6;
  --grayscale-6: #dbd8e0;
  --grayscale-7: #d0cdd7;
  --grayscale-8: #bcbac7;
  --grayscale-9: #8e8c99;
  --grayscale-10: #84828e;
  --grayscale-11: #65636d;
  --grayscale-12: #211f26;

  --grayscale-a1: #55005503;
  --grayscale-a2: #2b005506;
  --grayscale-a3: #30004010;
  --grayscale-a4: #20003618;
  --grayscale-a5: #20003820;
  --grayscale-a6: #14003527;
  --grayscale-a7: #10003332;
  --grayscale-a8: #08003145;
  --grayscale-a9: #05001d73;
  --grayscale-a10: #0500197d;
  --grayscale-a11: #0400119c;
  --grayscale-a12: #020008e0;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.991 0.988 0.992);
      --grayscale-2: color(display-p3 0.98 0.976 0.984);
      --grayscale-3: color(display-p3 0.946 0.938 0.952);
      --grayscale-4: color(display-p3 0.915 0.906 0.925);
      --grayscale-5: color(display-p3 0.886 0.876 0.901);
      --grayscale-6: color(display-p3 0.856 0.846 0.875);
      --grayscale-7: color(display-p3 0.814 0.804 0.84);
      --grayscale-8: color(display-p3 0.735 0.728 0.777);
      --grayscale-9: color(display-p3 0.555 0.549 0.596);
      --grayscale-10: color(display-p3 0.514 0.508 0.552);
      --grayscale-11: color(display-p3 0.395 0.388 0.424);
      --grayscale-12: color(display-p3 0.128 0.122 0.147);

      --grayscale-a1: #55005503;
      --grayscale-a2: #2b005506;
      --grayscale-a3: #30004010;
      --grayscale-a4: #20003618;
      --grayscale-a5: #20003820;
      --grayscale-a6: #14003527;
      --grayscale-a7: #10003332;
      --grayscale-a8: #08003145;
      --grayscale-a9: #05001d73;
      --grayscale-a10: #0500197d;
      --grayscale-a11: #0400119c;
      --grayscale-a12: #020008e0;

      --grayscale-contrast: #000;
      --grayscale-surface: color(display-p3 1 1 1 / 80%);
      --grayscale-indicator: color(display-p3 0.555 0.549 0.596);
      --grayscale-track: color(display-p3 0.555 0.549 0.596);
    }
  }
}


.dark {
  --accent-1: #0e0713;
  --accent-2: #1d1225;
  --accent-3: #301740;
  --accent-4: #3f1b56;
  --accent-5: #4b2264;
  --accent-6: #582d74;
  --accent-7: #6c3a8c;
  --accent-8: #8c4cb6;
  --accent-9: #ca7bff;
  --accent-10: #be6ff2;
  --accent-11: #dc95ff;
  --accent-12: #eed7ff;

  --accent-a1: #7100f00a;
  --accent-a2: #b251f81d;
  --accent-a3: #b445fc39;
  --accent-a4: #b341fd50;
  --accent-a5: #bb4cff5e;
  --accent-a6: #bd5afd6f;
  --accent-a7: #c264fe88;
  --accent-a8: #c268feb4;
  --accent-a9: #ca7bff;
  --accent-a10: #c774fef2;
  --accent-a11: #dc95ff;
  --accent-a12: #eed7ff;

  --accent-contrast: #fff;
  --accent-surface: #301a4080;
  --accent-indicator: #ca7bff;
  --accent-track: #ca7bff;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(14.5% 0.028 310);
      --accent-2: oklch(20.5% 0.0397 310);
      --accent-3: oklch(26.3% 0.0776 310);
      --accent-4: oklch(30.6% 0.1044 310);
      --accent-5: oklch(34.3% 0.1153 310);
      --accent-6: oklch(38.7% 0.122 310);
      --accent-7: oklch(44.9% 0.1362 310);
      --accent-8: oklch(54.1% 0.1676 310);
      --accent-9: oklch(72% 0.1971 310);
      --accent-10: oklch(68.3% 0.1971 310);
      --accent-11: oklch(78.5% 0.1971 310);
      --accent-12: oklch(91.1% 0.0613 310);

      --accent-a1: color(display-p3 0.3961 0 0.9922 / 0.033);
      --accent-a2: color(display-p3 0.6627 0.3333 0.9922 / 0.107);
      --accent-a3: color(display-p3 0.6863 0.298 1 / 0.213);
      --accent-a4: color(display-p3 0.6745 0.2902 1 / 0.298);
      --accent-a5: color(display-p3 0.702 0.3294 1 / 0.356);
      --accent-a6: color(display-p3 0.7176 0.3882 1 / 0.417);
      --accent-a7: color(display-p3 0.7333 0.4196 1 / 0.515);
      --accent-a8: color(display-p3 0.7412 0.4392 1 / 0.678);
      --accent-a9: color(display-p3 0.7725 0.5137 1 / 0.972);
      --accent-a10: color(display-p3 0.7608 0.4863 1 / 0.919);
      --accent-a11: color(display-p3 0.8431 0.6118 1 / 0.976);
      --accent-a12: color(display-p3 0.9294 0.8588 1 / 0.988);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.1725 0.102 0.2353 / 0.5);
      --accent-indicator: oklch(72% 0.1971 310);
      --accent-track: oklch(72% 0.1971 310);
    }
  }
}


.dark {
  --grayscale-1: #111111;
  --grayscale-2: #191919;
  --grayscale-3: #222222;
  --grayscale-4: #2a2a2a;
  --grayscale-5: #313131;
  --grayscale-6: #3a3a3a;
  --grayscale-7: #484848;
  --grayscale-8: #606060;
  --grayscale-9: #6e6e6e;
  --grayscale-10: #7b7b7b;
  --grayscale-11: #b4b4b4;
  --grayscale-12: #eeeeee;

  --grayscale-a1: #00000000;
  --grayscale-a2: #ffffff09;
  --grayscale-a3: #ffffff12;
  --grayscale-a4: #ffffff1b;
  --grayscale-a5: #ffffff22;
  --grayscale-a6: #ffffff2c;
  --grayscale-a7: #ffffff3b;
  --grayscale-a8: #ffffff55;
  --grayscale-a9: #ffffff64;
  --grayscale-a10: #ffffff72;
  --grayscale-a11: #ffffffaf;
  --grayscale-a12: #ffffffed;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.067);
      --grayscale-2: color(display-p3 0.098 0.098 0.098);
      --grayscale-3: color(display-p3 0.135 0.135 0.135);
      --grayscale-4: color(display-p3 0.163 0.163 0.163);
      --grayscale-5: color(display-p3 0.192 0.192 0.192);
      --grayscale-6: color(display-p3 0.228 0.228 0.228);
      --grayscale-7: color(display-p3 0.283 0.283 0.283);
      --grayscale-8: color(display-p3 0.375 0.375 0.375);
      --grayscale-9: color(display-p3 0.431 0.431 0.431);
      --grayscale-10: color(display-p3 0.484 0.484 0.484);
      --grayscale-11: color(display-p3 0.706 0.706 0.706);
      --grayscale-12: color(display-p3 0.933 0.933 0.933);

      --grayscale-a1: #00000000;
      --grayscale-a2: #ffffff09;
      --grayscale-a3: #ffffff12;
      --grayscale-a4: #ffffff1b;
      --grayscale-a5: #ffffff22;
      --grayscale-a6: #ffffff2c;
      --grayscale-a7: #ffffff3b;
      --grayscale-a8: #ffffff55;
      --grayscale-a9: #ffffff64;
      --grayscale-a10: #ffffff72;
      --grayscale-a11: #ffffffaf;
      --grayscale-a12: #ffffffed;

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

.light, :root {
  color-scheme: light;
  --accent: rgba(129, 0, 200, 1);
  --background: rgba(255, 255, 255, 1);
  --border: rgba(213, 217, 224, 1);
  --sidebar-background: rgba(255, 255, 255, 1);
  --header-background: rgba(255, 255, 255, 1);
  --card-background: rgba(246, 247, 249, 1);
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(202, 123, 255, 1);
  --background: rgba(10, 10, 10, 1);
  --border: rgba(30, 30, 30, 1);
  --sidebar-background: rgba(10, 10, 10, 1);
  --header-background: rgba(10, 10, 10, 1);
  --card-background: rgba(18, 18, 18, 1);
  --theme-color: #0a0a0a;
}

/*
 * What docs.yml cannot say, and nothing else. The look comes from docs.yml (colours, fonts,
 * layout, theme, products); this file refines it by role and never touches Fern's layout. The
 * site reads right without it (the pages carry their own structure), and with it reads finished.
 *
 * Custom CSS is a Fern Enterprise feature: if the plan does not include it, remove the `css`
 * line from docs.yml and nothing else breaks.
 *
 * The two colours of the brand each have one job here, as in the web app
 * (apps/web/src/styles/app.css):
 *   violet  is the system: links, the page you are on, focus, badges, the product you are in, the
 *           icons in light (in dark the icons of the cards are the text's own colour);
 *   orange  points: the primary action, the hover of a link, "new" and "coming soon", and the
 *           one hairline of the hero. It is never a surface and never body text.
 * Everything else is neutral: cool paper in light and, in dark, a black with no hue in it.
 */

/* 1. Tokens ---------------------------------------------------------------------------------- */

:root {
  /* The wordmark's own two stops (signalcore_core.brand): the gradient is a signature, not a wash. */
  --sc-gradient: linear-gradient(90deg, #9932cc, #ff8c00);
  --sc-orange: #ff8c00;
  /* Orange as ink, deep enough to read on paper (5.6:1 on its own tint). */
  --sc-orange-ink: #9a4a00;
  --sc-orange-tint: rgb(255 140 0 / 0.13);
  --sc-orange-line: rgb(255 140 0 / 0.42);
  /* What sits on an orange fill: near-black warm ink, 8:1. */
  --sc-on-orange: #1d1100;
  --sc-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 32%, transparent);
  /* The accent as a faint tint (a hovered or open control, the product you are in) and as a stronger one. */
  --sc-accent-tint: color-mix(in srgb, var(--accent) 9%, transparent);
  --sc-accent-tint-strong: color-mix(in srgb, var(--accent) 16%, transparent);
  /* What floats above the page (menus, the switcher): its surface and its shadow. On paper the
     surface is the page itself and the shadow does the lifting. */
  --sc-surface-raised: var(--background, #ffffff);
  --sc-shadow-raised: 0 1px 2px rgb(16 24 40 / 0.06), 0 10px 28px -6px rgb(16 24 40 / 0.18);
  /*
   * The accent as a filter on black: what turns an icon drawn by an <img> into the accent. The
   * published site draws the switcher's icons that way, and an SVG in an <img> cannot read the
   * page's `currentColor`: it is black. Found by a solver, then checked by painting black through
   * the chain in Chrome: #8100c8 (the light accent) comes out exact, #ca7bff (the dark one) within
   * 1/255 a channel (CIE76 delta E 0.6, where 1 is the least a person can see). If the accent in
   * docs.yml moves, these two move with it.
   */
  --sc-icon-filter: invert(14%) sepia(97%) saturate(6073%) hue-rotate(280deg) brightness(79%) contrast(117%);
}

:root.dark {
  --sc-orange-ink: #ffb061;
  --sc-orange-tint: rgb(255 140 0 / 0.16);
  --sc-orange-line: rgb(255 140 0 / 0.5);
  /* On black a shadow is invisible, so the surface itself steps up (#1a1a1a: one step above the
     cards, two above the page) and a hairline of light on its top edge says which way it faces. */
  --sc-surface-raised: var(--grayscale-3);
  /* Lines are light at a low alpha, not a grey: they hold on the page, on a card and on what floats. */
  --sc-hairline: rgb(255 255 255 / 0.08);
  --sc-hairline-strong: rgb(255 255 255 / 0.12);
  /* The same, for #ca7bff (the dark accent). */
  --sc-icon-filter: invert(63%) sepia(27%) saturate(6035%) hue-rotate(228deg) brightness(102%) contrast(104%);
  --sc-shadow-raised: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 1px 2px rgb(0 0 0 / 0.4),
    0 14px 32px -8px rgb(0 0 0 / 0.7);
}

/*
 * The neutral scale. Fern derives its greys from the accent, which tints every hover, divider and
 * muted line violet, so the neutrals are set here: a cool paper in light and, in dark, greys with
 * no hue at all (equal red, green and blue), so nothing on black reads blue or purple but the accent.
 * Steps follow Radix's roles: 1-2 page, 3-5 controls, 6-8 lines, 9-10 solids, 11 muted text, 12 text.
 */
html:root {
  --grayscale-1: #fcfcfd;
  --grayscale-2: #f6f7f9;
  --grayscale-3: #eff1f4;
  --grayscale-4: #e8ebef;
  --grayscale-5: #e1e4e8;
  --grayscale-6: #d8dce2;
  --grayscale-7: #c9ced6;
  --grayscale-8: #aeb4bf;
  --grayscale-9: #7b8290;
  --grayscale-10: #6f7683;
  --grayscale-11: #555c68;
  --grayscale-12: #15171c;
  --grayscale-a1: rgb(0 0 0 / 0.01);
  --grayscale-a2: rgb(0 0 0 / 0.03);
  --grayscale-a3: rgb(0 0 0 / 0.054);
  --grayscale-a4: rgb(0 0 0 / 0.077);
  --grayscale-a5: rgb(0 0 0 / 0.105);
  --grayscale-a6: rgb(0 0 0 / 0.135);
  --grayscale-a7: rgb(0 0 0 / 0.188);
  --grayscale-a8: rgb(0 0 0 / 0.288);
  --grayscale-a9: rgb(0 0 0 / 0.481);
  --grayscale-a10: rgb(0 0 0 / 0.529);
  --grayscale-a11: rgb(0 0 0 / 0.633);
  --grayscale-a12: rgb(0 0 0 / 0.906);
  --color-body: #1d2026;
}

html:root.dark {
  /* Page, cards and code, what floats: #0a0a0a, #121212, #1a1a1a. Text and muted text: #f2f2f2, #a3a3a3. */
  --grayscale-1: #0a0a0a;
  --grayscale-2: #121212;
  --grayscale-3: #1a1a1a;
  --grayscale-4: #1f1f1f;
  --grayscale-5: #262626;
  --grayscale-6: #2e2e2e;
  --grayscale-7: #3a3a3a;
  --grayscale-8: #4d4d4d;
  --grayscale-9: #7b7b7b;
  --grayscale-10: #8f8f8f;
  --grayscale-11: #a3a3a3;
  --grayscale-12: #f2f2f2;
  --grayscale-a1: rgb(255 255 255 / 0);
  --grayscale-a2: rgb(255 255 255 / 0.021);
  --grayscale-a3: rgb(255 255 255 / 0.048);
  --grayscale-a4: rgb(255 255 255 / 0.073);
  --grayscale-a5: rgb(255 255 255 / 0.095);
  --grayscale-a6: rgb(255 255 255 / 0.133);
  --grayscale-a7: rgb(255 255 255 / 0.18);
  --grayscale-a8: rgb(255 255 255 / 0.253);
  --grayscale-a9: rgb(255 255 255 / 0.412);
  --grayscale-a10: rgb(255 255 255 / 0.479);
  --grayscale-a11: rgb(255 255 255 / 0.645);
  --grayscale-a12: rgb(255 255 255 / 0.913);
  --color-body: #d4d4d4;
  /* Fern's line colour (cards, tables, the search box, the grid of the landing) as light at 8%. */
  --border: var(--sc-hairline);
}

/* 2. The signature --------------------------------------------------------------------------- */

/* One hairline of the wordmark's gradient above the header. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--sc-gradient);
  z-index: 100;
  pointer-events: none;
}

/* 3. Violet, where it means "the system" ------------------------------------------------------- */

::selection {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
}

/* Fern's greys are set above; its accent steps for text are the accent itself, so the sidebar,
   the contents and every link hold the contrast the accent was chosen for. */
html:root {
  --accent-11: var(--accent);
  --accent-a11: var(--accent);
}

/* Links in the text: violet, underlined by a hairline; orange when pointed at. */
html .fern-prose a.fern-mdx-link:not(.fern-card):not(.fern-button) {
  color: var(--accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, var(--accent) 38%, transparent);
  transition: color 0.12s, text-decoration-color 0.12s;
}

html .fern-prose a.fern-mdx-link:not(.fern-card):not(.fern-button):hover {
  color: var(--sc-orange-ink);
  text-decoration-color: currentColor;
}
html .fern-prose a.fern-mdx-link:not(.fern-card):not(.fern-button):focus-visible {
  color: var(--sc-orange-ink);
  text-decoration-color: currentColor;
}

/* The eyebrow over a title is a place, not an action: muted, not violet. */
html .fern-breadcrumb-item {
  color: var(--grayscale-11);
}

html .fern-breadcrumb-item:hover {
  color: var(--accent);
}
html .fern-breadcrumb-item:focus-visible {
  color: var(--accent);
}

/* The page you are on: ink on a neutral tint with a violet rule, not a lilac block. */
html .fern-sidebar-link[data-state="active"] {
  background: var(--grayscale-a3);
  color: var(--grayscale-12);
  box-shadow: inset 2px 0 0 var(--accent);
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}

html .fern-sidebar-link[data-state="active"] svg {
  color: var(--accent);
}

/* Inline code is a different voice, not a different colour. */
html .fern-prose :not(pre) > code {
  color: var(--grayscale-12);
  background: var(--grayscale-a3);
  border-color: var(--grayscale-a5);
}

/* 4. Cards and callouts hold their own against the page ------------------------------------------ */

html .fern-card {
  background: var(--card-background);
  border-color: var(--border);
  box-shadow: none;
  transition: border-color 0.15s, background-color 0.15s;
}

html .fern-card.interactive:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: var(--card-background);
}
html .fern-card.interactive:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: var(--card-background);
}

/*
 * A card's icon is the accent, on one weight, nothing more; on black it is the text's own colour
 * at 85%, so a page of cards carries no violet but the badges and the hover. Fern sets the icon's
 * colour inline from --accent-a10, which a rule cannot out-rank, so the variable is what moves.
 */
html.dark .fern-card .card-icon {
  --accent-a10: color-mix(in srgb, var(--grayscale-12) 85%, transparent);
}

/* A callout is the card with a rule on its edge: the colour says what kind, the words say what. */
html .fern-callout {
  background: var(--card-background);
  border-color: var(--border);
  color: var(--grayscale-12);
  --sc-callout: var(--accent);
  box-shadow: inset 3px 0 0 var(--sc-callout);
}

html .fern-callout svg {
  color: var(--sc-callout);
}

/* The system's own voice (a note, an aside, a tip) is violet; state keeps its colour. */
html .fern-callout[data-intent="success"],
html .fern-callout[data-intent="check"] {
  --sc-callout: var(--green-11, #1f7a4d);
}

html .fern-callout[data-intent="warning"] {
  --sc-callout: var(--amber-11, #9a6700);
}

html .fern-callout[data-intent="error"] {
  --sc-callout: var(--red-11, #c0392b);
}

/* 5. Orange: the primary action, "new" and "coming soon" ------------------------------------------ */

/* The one filled button of the header opens the app: it is the thing the page points to. */
html .fern-header-navbar-links .fern-button.filled {
  background: var(--sc-orange);
  color: var(--sc-on-orange);
  border-color: transparent;
}

html .fern-header-navbar-links .fern-button.filled:hover {
  background: color-mix(in srgb, var(--sc-orange) 86%, white);
}
html .fern-header-navbar-links .fern-button.filled:focus-visible {
  background: color-mix(in srgb, var(--sc-orange) 86%, white);
}

/*
 * The call to action of a page is a Fern <Button> in its text (the showcase, on the pages that
 * point to it): the hero's orange button, in the same ink, weight and corner. The `small` one
 * follows a frame, in the same colours. A button stands on its own line and is as wide as its
 * words. Links in the running text are not touched: they are the violet underlined ones above.
 */
html .fern-prose .fern-button {
  display: flex;
  width: fit-content;
  height: auto;
  margin: 4px 0 24px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.12s, box-shadow 0.12s;
}

html .fern-prose .fern-button > .fern-button-content {
  height: auto;
  gap: 8px;
}

html .fern-prose .fern-button.normal {
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 0.9375rem;
  line-height: 1.65;
}

html .fern-prose .fern-button.small {
  margin: 14px 0 28px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.8125rem;
  line-height: 1.5;
}

html .fern-prose .fern-button.filled.primary {
  background: var(--sc-orange);
  color: var(--sc-on-orange);
  border-color: transparent;
}

html .fern-prose .fern-button.filled.primary:hover {
  background: color-mix(in srgb, var(--sc-orange) 86%, white);
  color: var(--sc-on-orange);
}
html .fern-prose .fern-button.filled.primary:focus-visible {
  background: color-mix(in srgb, var(--sc-orange) 86%, white);
  color: var(--sc-on-orange);
}

html .fern-prose .fern-button:focus-visible {
  outline: none;
  box-shadow: var(--sc-ring);
}

/* Badges say a state in words: Live is violet, Preview is quiet, new and coming soon are orange. */
html .fern-docs-badge[data-intent="launch"] {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

html .fern-docs-badge[data-intent="note"] {
  color: var(--grayscale-11);
  background: transparent;
  border-color: var(--grayscale-a7);
  box-shadow: none;
}

html .fern-docs-badge[data-intent="warning"] {
  color: var(--sc-orange-ink);
  background: var(--sc-orange-tint);
}

html .fern-docs-badge[data-intent="warning"]:not(.subtle) {
  color: var(--sc-on-orange);
  background: var(--sc-orange);
}

/* A badge is a word, not a button: smaller than the text it sits in. */
html .fern-docs-badge {
  font-size: 0.75rem;
  line-height: 1;
  padding: 4px 8px;
}

/* 6. The landing and the doors ----------------------------------------------------------------- */

/* The two actions of the hero: the orange one is set inline, so its hover needs the weight. */
html .sc-action {
  transition: border-color 0.12s, color 0.12s, background-color 0.12s, box-shadow 0.12s;
}

html .sc-action:hover {
  border-color: var(--accent);
  color: var(--accent) !important;
}

html .sc-action-primary:hover {
  background: color-mix(in srgb, var(--sc-orange) 84%, white) !important;
  border-color: transparent;
  color: var(--sc-on-orange) !important;
}
html .sc-action-primary:focus-visible {
  background: color-mix(in srgb, var(--sc-orange) 84%, white) !important;
  border-color: transparent;
  color: var(--sc-on-orange) !important;
}

html .sc-action:focus-visible {
  outline: none;
  box-shadow: var(--sc-ring);
}

/* A card that carries a status keeps it in its corner, level with its icon. */
html .fern-card .fern-docs-badge {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
}

/* 7. Reading ------------------------------------------------------------------------------------- */

/*
 * The measure is set in docs.yml (content-width: 42rem, about 80 characters of Geist at 16px).
 * Here: the type of a page, in the scale the app uses. Headings are Schibsted Grotesk at 600 (the
 * files stop there), tracked tighter as they grow; the body is Geist at 16px on 1.65.
 */
html .fern-page-heading {
  font-size: clamp(2rem, 7vw, 2.5rem);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

html .fern-page-subtitle {
  margin-top: 0.75rem;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--grayscale-11);
  text-wrap: pretty;
}

html .fern-prose {
  line-height: 1.65;
}

html .fern-prose p,
html .fern-prose li {
  color: var(--color-body);
}

html .fern-prose p {
  margin-top: 0;
  margin-bottom: 1.1em;
  line-height: 1.65;
  text-wrap: pretty;
}

html .fern-prose li {
  line-height: 1.6;
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}

html .fern-prose h2 {
  margin-top: 3.25rem;
  margin-bottom: 1rem;
  font-size: 1.625rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.025em;
}

html .fern-prose h3 {
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.015em;
}

html .fern-prose h4 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

html .fern-prose strong {
  font-weight: 600;
}

/* Inline code: a half step smaller than the line it sits in, and not bold. */
html .fern-prose :not(pre) > code {
  font-size: 0.875em;
  font-weight: 500;
  padding: 0.12em 0.38em;
  border-radius: 5px;
}

/* Tables: a quiet head, hairlines between rows, room to breathe. */
html .fern-table-root th {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  padding: 0.6rem 0.9rem;
  color: var(--grayscale-12);
}

html .fern-table-root td {
  padding: 0.65rem 0.9rem;
  line-height: 1.5;
  vertical-align: top;
}

html .fern-table-root th,
html .fern-table-root td {
  border-color: var(--border);
}

html .fern-table-root code {
  font-size: 0.875em;
  font-weight: 500;
}

/* The steps of a procedure: a number in a quiet box, a title in the heading face. */
html .fern-step {
  padding-bottom: 0.25rem;
}

/* 8. Code ---------------------------------------------------------------------------------------- */

/*
 * Fern paints each token inline from two stock themes (a light one with red keywords, a dark one
 * with cyan punctuation). These rules put the web app's code palette on them (app.css --code-*):
 * sky for structure, green for strings, rose for calls, sand for numbers, grey for comments. The
 * light theme's comment grey was 1.7:1 on the block; it is 4.5:1 now, and every other token is
 * 5:1 or more on the block (light) and 7.5:1 or more (dark).
 */
:root {
  --sc-code-plain: var(--grayscale-12);
  --sc-code-keyword: #1b6aa8;
  --sc-code-string: #1f7a4d;
  --sc-code-call: #b4325a;
  --sc-code-number: #86661b;
  --sc-code-comment: #6b7280;
  --sc-code-punct: #6b7280;
}

:root.dark {
  --sc-code-keyword: #72b6ef;
  --sc-code-string: #5dbb88;
  --sc-code-call: #ef8aa7;
  --sc-code-number: #d6b86e;
  --sc-code-comment: #8a8a8a;
  --sc-code-punct: #a3a3a3;
  --sc-code-plain: #e6e6e6;
}

/* Light: the colour is inline on the token, so an !important colour wins. */
html:not(.dark) pre span[style*="color: rgb(211, 47, 47)"] {
  color: var(--sc-code-keyword) !important;
}

html:not(.dark) pre span[style*="color: rgb(34, 134, 58)"],
html:not(.dark) pre span[style*="color: rgb(43, 85, 129)"] {
  color: var(--sc-code-string) !important;
}

html:not(.dark) pre span[style*="color: rgb(111, 66, 193)"] {
  color: var(--sc-code-call) !important;
}

html:not(.dark) pre span[style*="color: rgb(25, 118, 210)"] {
  color: var(--sc-code-number) !important;
}

html:not(.dark) pre span[style*="color: rgb(194, 195, 197)"] {
  color: var(--sc-code-comment) !important;
}

/*
 * Dark: Fern sets `color: var(--shiki-dark) !important` inside a cascade layer, and a layered
 * !important beats any unlayered one, so the colour cannot be overridden. The variable it reads
 * can: it is set inline on the token, and an !important declaration beats an inline one. The
 * inline style is written with a space after the colon in the guides and without one in the API
 * reference's snippets, so each colour is matched both ways. The stock theme's plain text is a
 * cyan-tinted white (#EEFFFF) and its punctuation a cyan (#89DDFF): both are neutral now.
 */
html.dark pre span[style*="--shiki-dark: #C792EA" i],
html.dark pre span[style*="--shiki-dark:#C792EA" i],
html.dark pre span[style*="--shiki-dark: #F07178" i],
html.dark pre span[style*="--shiki-dark:#F07178" i] {
  --shiki-dark: var(--sc-code-keyword) !important;
}

html.dark pre span[style*="--shiki-dark: #C3E88D" i],
html.dark pre span[style*="--shiki-dark:#C3E88D" i] {
  --shiki-dark: var(--sc-code-string) !important;
}

html.dark pre span[style*="--shiki-dark: #82AAFF" i],
html.dark pre span[style*="--shiki-dark:#82AAFF" i] {
  --shiki-dark: var(--sc-code-call) !important;
}

html.dark pre span[style*="--shiki-dark: #F78C6C" i],
html.dark pre span[style*="--shiki-dark:#F78C6C" i],
html.dark pre span[style*="--shiki-dark: #FFCB6B" i],
html.dark pre span[style*="--shiki-dark:#FFCB6B" i],
html.dark pre span[style*="--shiki-dark: #FF9CAC" i],
html.dark pre span[style*="--shiki-dark:#FF9CAC" i],
html.dark pre span[style*="--shiki-dark: #B2CCD6" i],
html.dark pre span[style*="--shiki-dark:#B2CCD6" i] {
  --shiki-dark: var(--sc-code-number) !important;
}

html.dark pre span[style*="--shiki-dark: #8a8a8a" i],
html.dark pre span[style*="--shiki-dark:#8a8a8a" i] {
  --shiki-dark: var(--sc-code-comment) !important;
}

html.dark pre span[style*="--shiki-dark: #89DDFF" i],
html.dark pre span[style*="--shiki-dark:#89DDFF" i] {
  --shiki-dark: var(--sc-code-punct) !important;
}

html.dark pre span[style*="--shiki-dark: #EEFFFF" i],
html.dark pre span[style*="--shiki-dark:#EEFFFF" i] {
  --shiki-dark: var(--sc-code-plain) !important;
}

/* The same cyan, in italics, is the dark theme's keyword (from, import, async, await). */
html.dark pre span[style*="--shiki-dark: #89DDFF" i][style*="--shiki-dark-font-style: italic"],
html.dark pre span[style*="--shiki-dark:#89DDFF" i][style*="--shiki-dark-font-style:italic"] {
  --shiki-dark: var(--sc-code-keyword) !important;
}

/* Keywords are not set in italics (the dark theme italicises them). */
html pre span {
  --shiki-dark-font-style: normal !important;
  font-style: normal;
}

html .fern-code pre {
  line-height: 1.65;
}

/* Cards sit three across in a 42rem column too: tighter padding and a 15px description. */
html .fern-card {
  padding: 1.25rem;
}

html .fern-card p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}

html .fern-card .fern-docs-badge {
  top: 1.25rem;
  right: 1.25rem;
}

html .fern-card code {
  font-size: 0.875em;
  font-weight: 500;
  padding: 0.1em 0.35em;
  border-radius: 5px;
  background: var(--grayscale-a3);
  color: var(--grayscale-12);
}

/* 9. The switcher -------------------------------------------------------------------------------- */

/*
 * The product switcher (Home, API reference, SDKs, Dashboard) is a menu, not a card list: one
 * 36px row per product, an 18px icon in a small tile, the name in 14px medium, and the one you are
 * in marked by the accent (its text, a faint tint and a tick) instead of a block. The panel is
 * Fern's dropdown, portalled to the body, so it is reached by its test id (Fern's own CSS does the
 * same) and everything here is scoped to it: the other dropdowns (role, language) are untouched.
 * The descriptions stay in the markup for screen readers and are not drawn.
 */

/* The trigger at the logo: a quiet label, a faint violet tint (not a grey box) when pointed at or open. */
html .fern-product-selector .product-dropdown-trigger {
  border-radius: 8px;
  transition: background-color 0.12s ease-out, box-shadow 0.12s ease-out;
}

html .fern-product-selector .product-item-title {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--grayscale-12);
}

html .fern-product-selector .product-dropdown-trigger > svg {
  width: 14px;
  height: 14px;
  color: var(--grayscale-12);
}

@media (hover: hover) {
  html .fern-product-selector .product-dropdown-trigger:hover {
    background: var(--sc-accent-tint);
  }
}

html .fern-product-selector[data-state="open"] .product-dropdown-trigger {
  background: var(--sc-accent-tint);
}

html .fern-product-selector:focus-visible .product-dropdown-trigger {
  background: var(--sc-accent-tint);
  box-shadow: var(--sc-ring);
}

/* The same trigger inside the mobile menu: the selected product as one compact row. */
html .fern-product-selector .fern-selection-item.dense {
  min-height: 40px;
  padding-block: 4px;
  border-radius: 10px;
}

/* The panel: narrow, raised, one short fade-in from 4px above. */
@keyframes sc-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

html [data-testid="product-dropdown-content"] {
  width: max(18rem, var(--radix-dropdown-menu-trigger-width));
  border-color: var(--grayscale-a5);
  border-radius: 12px;
  background: var(--sc-surface-raised);
  box-shadow: var(--sc-shadow-raised);
  backdrop-filter: none;
  animation: sc-menu-in 0.14s ease-out;
}

html [data-testid="product-dropdown-content"] .fern-scroll-area-viewport {
  padding: 6px;
}

html [data-testid="product-dropdown-content"] .fern-product-selector-radio-group {
  gap: 2px;
}

/* A row: tile, name, and at the end a tick (where you are) or an arrow (a link out). */
html [data-testid="product-dropdown-content"] .fern-selection-item,
html .fern-product-selector .fern-selection-item {
  position: relative;
  gap: 8px;
  border-color: transparent;
  transition: background-color 0.12s ease-out, box-shadow 0.12s ease-out;
}

html [data-testid="product-dropdown-content"] .fern-selection-item {
  min-height: 36px;
  padding: 4px 8px 4px 4px;
  border-radius: 8px;
}

html [data-testid="product-dropdown-content"] .fern-selection-item > .flex,
html .fern-product-selector .fern-selection-item > .flex {
  gap: 10px;
}

html [data-testid="product-dropdown-content"] .fern-selection-item-title,
html .fern-product-selector .fern-selection-item-title {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--grayscale-12);
}

/* Not drawn, still read: the description is clipped to nothing instead of removed. */
html [data-testid="product-dropdown-content"] .fern-selection-item-subtitle,
html .fern-product-selector .fern-selection-item-subtitle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The tile: 28px, the accent at a whisper, the icon at 18px in the accent. */
html [data-testid="product-dropdown-content"] .fern-selection-item .fern-selection-item-icon.use-icon,
html .fern-product-selector .fern-selection-item.dense .fern-selection-item-icon.use-icon {
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: var(--accent);
  background: var(--sc-accent-tint);
}

html [data-testid="product-dropdown-content"] .fern-selection-item .fern-selection-item-icon .fern-file-icon,
html .fern-product-selector .fern-selection-item.dense .fern-selection-item-icon .fern-file-icon {
  width: 18px;
  height: 18px;
  transition: none;
}

/* An icon drawn by an <img> is black whatever the tile's colour: the filter makes it the accent.
   (Where Fern draws the icon inline, as the local preview does, the tile's colour already does.) */
html [data-testid="product-dropdown-content"] .fern-selection-item-icon img.fern-file-icon,
html .fern-product-selector .fern-selection-item.dense .fern-selection-item-icon img.fern-file-icon {
  filter: var(--sc-icon-filter);
}

/* Fern grows the icon by a fifth when a row is pointed at: it only makes the row jump. */
html [data-testid="product-dropdown-content"] .fern-selection-item:hover .fern-file-icon,
html [data-testid="product-dropdown-content"] .fern-selection-item:hover svg,
html [data-testid="product-dropdown-content"] .fern-product-item-link:focus-visible .fern-selection-item .fern-file-icon,
html [data-testid="product-dropdown-content"] .fern-product-item-link:focus-visible .fern-selection-item svg {
  scale: none;
}
html [data-testid="product-dropdown-content"] .fern-selection-item:focus-within .fern-file-icon,
html [data-testid="product-dropdown-content"] .fern-selection-item:focus-within svg {
  scale: none;
}

/* Pointed at: a faint neutral tint, and the text stays ink. */
html [data-testid="product-dropdown-content"] .fern-product-item-link .fern-selection-item:hover,
html [data-testid="product-dropdown-content"] .fern-product-item-link:focus-visible .fern-selection-item {
  background: var(--grayscale-a3);
  color: inherit;
}
html [data-testid="product-dropdown-content"] .fern-product-item-link .fern-selection-item:focus-visible {
  background: var(--grayscale-a3);
  color: inherit;
}

/* From the keyboard (and not under the pointer, which Radix also focuses): a hairline of accent too. */
html [data-testid="product-dropdown-content"] .fern-product-item-link:focus-visible:not(:hover) .fern-selection-item {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent);
}

/* The product you are in: accent text, a faint accent tint, a tick. */
html [data-testid="product-dropdown-content"] .fern-product-item-link[data-state="checked"] .fern-selection-item,
html [data-testid="product-dropdown-content"] .fern-product-item-link[data-state="checked"] .fern-selection-item:hover {
  background: var(--sc-accent-tint);
  color: var(--accent);
}
html [data-testid="product-dropdown-content"] .fern-product-item-link[data-state="checked"] .fern-selection-item:focus-visible {
  background: var(--sc-accent-tint);
  color: var(--accent);
}

html [data-testid="product-dropdown-content"] .fern-product-item-link[data-state="checked"] .fern-selection-item-title {
  color: var(--accent);
}

html [data-testid="product-dropdown-content"] .fern-product-item-link[data-state="checked"] .fern-selection-item-icon.use-icon {
  background: var(--sc-accent-tint-strong);
}

/* The end of a row is empty in Fern's markup; the tick and the arrow are drawn into it as masks. */
html [data-testid="product-dropdown-content"] .fern-selection-item-end-icon {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--grayscale-11);
}

html [data-testid="product-dropdown-content"] .fern-product-item-link[data-state="checked"] .fern-selection-item-end-icon,
html [data-testid="product-dropdown-content"] .fern-product-item-link[target="_blank"] .fern-selection-item-end-icon {
  background: currentColor;
  -webkit-mask: var(--sc-end-mark) center / contain no-repeat;
  mask: var(--sc-end-mark) center / contain no-repeat;
}

html [data-testid="product-dropdown-content"] .fern-product-item-link[data-state="checked"] .fern-selection-item-end-icon {
  color: var(--accent);
  --sc-end-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

html [data-testid="product-dropdown-content"] .fern-product-item-link[target="_blank"] .fern-selection-item-end-icon {
  --sc-end-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10M7 17 17 7'/%3E%3C/svg%3E");
}

/* A finger needs a taller row than a pointer. */
@media (pointer: coarse) {

  html [data-testid="product-dropdown-content"] .fern-selection-item {
    min-height: 40px;
  }

}

@media (prefers-reduced-motion: reduce) {

  html [data-testid="product-dropdown-content"] {
    animation: none;
  }

  html [data-testid="product-dropdown-content"] .fern-selection-item,
  html .fern-product-selector .product-dropdown-trigger,
  html .fern-product-selector .fern-selection-item {
    transition: none;
  }

}