/*fern-site-stylesheet*/@font-face {
    font-family: 'Public Sans Thin';
    src: url('/_fern-files/schematic.docs.buildwithfern.com/51af9944514fbf55d8d9e8696f0ac46203357267f4198a1002eb0982e1ac2e30/docs/assets/Public-Sans-Thin.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/_fern-files/schematic.docs.buildwithfern.com/ec77738d9e8ae43b942aad4d6f555ddac5cc5476bb982d7efdcabccf20ca7c6e/docs/assets/Manrope-ExtraLight.woff2') format('woff2');
    font-weight: 600 900;
    font-style: normal;
    font-display: swap;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 30px;
  --font-body: 'Public Sans Thin', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'Inter', 'Public Sans Thin', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: 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: #fefcfc;
  --accent-2: #fef8f8;
  --accent-3: #fbecec;
  --accent-4: #fedfdd;
  --accent-5: #fad2d0;
  --accent-6: #f2c3c1;
  --accent-7: #e8b0ae;
  --accent-8: #dd9896;
  --accent-9: #db6769;
  --accent-10: #ce5a5d;
  --accent-11: #b9484d;
  --accent-12: #5b2325;

  --accent-a1: #aa000003;
  --accent-a2: #db000007;
  --accent-a3: #ca000013;
  --accent-a4: #f80f0022;
  --accent-a5: #e40b002f;
  --accent-a6: #ca09003e;
  --accent-a7: #b7070051;
  --accent-a8: #ad050069;
  --accent-a9: #c3000498;
  --accent-a10: #b40005a5;
  --accent-a11: #9e0007b7;
  --accent-a12: #410002dc;

  --accent-contrast: #fff;
  --accent-surface: #fef6f6cc;
  --accent-indicator: #db6769;
  --accent-track: #db6769;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.4% 0.0023 20.89);
      --accent-2: oklch(98.3% 0.0062 20.89);
      --accent-3: oklch(95.6% 0.016 20.89);
      --accent-4: oklch(92.8% 0.0348 20.89);
      --accent-5: oklch(89.6% 0.0455 20.89);
      --accent-6: oklch(85.7% 0.0548 20.89);
      --accent-7: oklch(80.8% 0.0658 20.89);
      --accent-8: oklch(74.6% 0.0833 20.89);
      --accent-9: oklch(65.4% 0.1458 20.89);
      --accent-10: oklch(61.4% 0.1471 20.89);
      --accent-11: oklch(55.5% 0.1458 20.89);
      --accent-12: oklch(34% 0.0822 20.89);

      --accent-a1: color(display-p3 0.6745 0.0235 0.0235 / 0.012);
      --accent-a2: color(display-p3 0.7216 0.0235 0.0235 / 0.028);
      --accent-a3: color(display-p3 0.6353 0.0588 0.0078 / 0.075);
      --accent-a4: color(display-p3 0.8196 0.0667 0.0078 / 0.13);
      --accent-a5: color(display-p3 0.7647 0.0471 0.0039 / 0.181);
      --accent-a6: color(display-p3 0.6745 0.0549 0.0039 / 0.24);
      --accent-a7: color(display-p3 0.6039 0.0392 0.0039 / 0.314);
      --accent-a8: color(display-p3 0.5765 0.0314 0.0039 / 0.404);
      --accent-a9: color(display-p3 0.6549 0.0157 0 / 0.577);
      --accent-a10: color(display-p3 0.6039 0.0078 0 / 0.624);
      --accent-a11: color(display-p3 0.5294 0 0.0078 / 0.691);
      --accent-a12: color(display-p3 0.2118 0 0.0039 / 0.851);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9922 0.9647 0.9647 / 0.8);
      --accent-indicator: oklch(65.4% 0.1458 20.89);
      --accent-track: oklch(65.4% 0.1458 20.89);
    }
  }
}


.light, :root {
  --grayscale-1: #fdfdfc;
  --grayscale-2: #f9f9f8;
  --grayscale-3: #f1f0ef;
  --grayscale-4: #e9e8e6;
  --grayscale-5: #e2e1de;
  --grayscale-6: #dad9d6;
  --grayscale-7: #cfceca;
  --grayscale-8: #bcbbb5;
  --grayscale-9: #8d8d86;
  --grayscale-10: #82827c;
  --grayscale-11: #63635e;
  --grayscale-12: #21201c;

  --grayscale-a1: #55550003;
  --grayscale-a2: #25250007;
  --grayscale-a3: #20100010;
  --grayscale-a4: #1f150019;
  --grayscale-a5: #1f180021;
  --grayscale-a6: #19130029;
  --grayscale-a7: #19140035;
  --grayscale-a8: #1915014a;
  --grayscale-a9: #0f0f0079;
  --grayscale-a10: #0c0c0083;
  --grayscale-a11: #080800a1;
  --grayscale-a12: #060500e3;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.992 0.992 0.989);
      --grayscale-2: color(display-p3 0.977 0.977 0.973);
      --grayscale-3: color(display-p3 0.943 0.942 0.936);
      --grayscale-4: color(display-p3 0.913 0.912 0.903);
      --grayscale-5: color(display-p3 0.885 0.883 0.873);
      --grayscale-6: color(display-p3 0.854 0.852 0.839);
      --grayscale-7: color(display-p3 0.813 0.81 0.794);
      --grayscale-8: color(display-p3 0.738 0.734 0.713);
      --grayscale-9: color(display-p3 0.553 0.553 0.528);
      --grayscale-10: color(display-p3 0.511 0.511 0.488);
      --grayscale-11: color(display-p3 0.388 0.388 0.37);
      --grayscale-12: color(display-p3 0.129 0.126 0.111);

      --grayscale-a1: #55550003;
      --grayscale-a2: #25250007;
      --grayscale-a3: #20100010;
      --grayscale-a4: #1f150019;
      --grayscale-a5: #1f180021;
      --grayscale-a6: #19130029;
      --grayscale-a7: #19140035;
      --grayscale-a8: #1915014a;
      --grayscale-a9: #0f0f0079;
      --grayscale-a10: #0c0c0083;
      --grayscale-a11: #080800a1;
      --grayscale-a12: #060500e3;

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


.dark {
  --accent-1: #000;
  --accent-2: #170d0d;
  --accent-3: #331313;
  --accent-4: #481518;
  --accent-5: #591e21;
  --accent-6: #6b2b2d;
  --accent-7: #833c3d;
  --accent-8: #aa4f51;
  --accent-9: #db6769;
  --accent-10: #cd5b5d;
  --accent-11: #ff9494;
  --accent-12: #fbd4d3;

  --accent-a1: #00000000;
  --accent-a2: #ff919117;
  --accent-a3: #ff5f5f33;
  --accent-a4: #ff4b5548;
  --accent-a5: #ff565f59;
  --accent-a6: #ff676c6b;
  --accent-a7: #ff757783;
  --accent-a8: #ff777aaa;
  --accent-a9: #ff787adb;
  --accent-a10: #ff7174cd;
  --accent-a11: #ff9494;
  --accent-a12: #ffd7d6fb;

  --accent-contrast: #fff;
  --accent-surface: #2e1a1a80;
  --accent-indicator: #db6769;
  --accent-track: #db6769;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(0% 0.0109 20.89);
      --accent-2: oklch(17.4% 0.017 20.89);
      --accent-3: oklch(23.6% 0.0523 20.89);
      --accent-4: oklch(28.1% 0.0779 20.89);
      --accent-5: oklch(32.7% 0.0867 20.89);
      --accent-6: oklch(38% 0.0907 20.89);
      --accent-7: oklch(44.9% 0.0986 20.89);
      --accent-8: oklch(54.3% 0.1201 20.89);
      --accent-9: oklch(65.4% 0.1458 20.89);
      --accent-10: oklch(61.4% 0.1458 20.89);
      --accent-11: oklch(78.4% 0.1329 20.89);
      --accent-12: oklch(90.3% 0.0433 20.89);

      --accent-a1: color(display-p3 0 0 0 / 0);
      --accent-a2: color(display-p3 0.9922 0.5882 0.5882 / 0.087);
      --accent-a3: color(display-p3 1 0.4471 0.4275 / 0.185);
      --accent-a4: color(display-p3 1 0.3647 0.3804 / 0.259);
      --accent-a5: color(display-p3 1 0.4157 0.4275 / 0.322);
      --accent-a6: color(display-p3 1 0.4745 0.4745 / 0.389);
      --accent-a7: color(display-p3 1 0.5255 0.5176 / 0.479);
      --accent-a8: color(display-p3 1 0.5294 0.5216 / 0.624);
      --accent-a9: color(display-p3 1 0.5412 0.5294 / 0.8);
      --accent-a10: color(display-p3 1 0.5137 0.502 / 0.75);
      --accent-a11: color(display-p3 1 0.6353 0.6275 / 0.942);
      --accent-a12: color(display-p3 1 0.8706 0.8667 / 0.961);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.1725 0.1098 0.102 / 0.5);
      --accent-indicator: oklch(65.4% 0.1458 20.89);
      --accent-track: oklch(65.4% 0.1458 20.89);
    }
  }
}


.dark {
  --grayscale-1: #111110;
  --grayscale-2: #191918;
  --grayscale-3: #222221;
  --grayscale-4: #2a2a28;
  --grayscale-5: #31312e;
  --grayscale-6: #3b3a37;
  --grayscale-7: #494844;
  --grayscale-8: #62605b;
  --grayscale-9: #6f6d66;
  --grayscale-10: #7c7b74;
  --grayscale-11: #b5b3ad;
  --grayscale-12: #eeeeec;

  --grayscale-a1: #00000000;
  --grayscale-a2: #f4f4f309;
  --grayscale-a3: #f6f6f513;
  --grayscale-a4: #fefef31b;
  --grayscale-a5: #fbfbeb23;
  --grayscale-a6: #fffaed2d;
  --grayscale-a7: #fffbed3c;
  --grayscale-a8: #fff9eb57;
  --grayscale-a9: #fffae965;
  --grayscale-a10: #fffdee73;
  --grayscale-a11: #fffcf4b0;
  --grayscale-a12: #fffffded;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.063);
      --grayscale-2: color(display-p3 0.098 0.098 0.094);
      --grayscale-3: color(display-p3 0.135 0.135 0.129);
      --grayscale-4: color(display-p3 0.164 0.163 0.156);
      --grayscale-5: color(display-p3 0.193 0.192 0.183);
      --grayscale-6: color(display-p3 0.23 0.229 0.217);
      --grayscale-7: color(display-p3 0.285 0.282 0.267);
      --grayscale-8: color(display-p3 0.384 0.378 0.357);
      --grayscale-9: color(display-p3 0.434 0.428 0.403);
      --grayscale-10: color(display-p3 0.487 0.481 0.456);
      --grayscale-11: color(display-p3 0.707 0.703 0.68);
      --grayscale-12: color(display-p3 0.933 0.933 0.926);

      --grayscale-a1: #00000000;
      --grayscale-a2: #f4f4f309;
      --grayscale-a3: #f6f6f513;
      --grayscale-a4: #fefef31b;
      --grayscale-a5: #fbfbeb23;
      --grayscale-a6: #fffaed2d;
      --grayscale-a7: #fffbed3c;
      --grayscale-a8: #fff9eb57;
      --grayscale-a9: #fffae965;
      --grayscale-a10: #fffdee73;
      --grayscale-a11: #fffcf4b0;
      --grayscale-a12: #fffffded;

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

.light, :root {
  color-scheme: light;
  --accent: rgba(219, 103, 105, 1);
  --background: rgba(255, 255, 255, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(219, 103, 105, 1);
  --background: rgba(0, 0, 0, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: rgba(26, 26, 26, 1);
  --theme-color: #000;
}

.fern-sidebar-link-content svg {
  display: none !important;
}

/* ==========================================================================
   Osano consent banner — match the Schematic docs theme (dark + light).
   Ported from schematic-ms app/globals.css, but retokenized so it adapts to
   Fern's light/dark modes instead of being dark-only. Fern signals the theme
   with a class on <html> (.dark, and .light/:root for light). Colors are
   driven by the --osano-* variables defined per theme below; the primary CTA
   reuses Fern's own --accent token so the banner tracks the docs brand in both
   modes. Fonts are inherited so the banner uses the docs fonts, not the app's.
   Osano ships its own stylesheet with the script, so overrides need !important.
   ========================================================================== */

:root,
.light,
.light-theme {
  --osano-surface: #ffffff;
  --osano-border: #e3e2e0;
  --osano-text: #21201c; /* = --grayscale-12 (light) */
  --osano-text-muted: #63635e; /* = --grayscale-11 (light) */
  --osano-secondary-bg: #f9f9f8;
  --osano-secondary-text: #21201c;
  --osano-track: #d0cfcb;
  --osano-overlay: rgba(0, 0, 0, 0.4);
  --osano-primary: var(--accent); /* docs accent (#db6769) */
  --osano-primary-hover: #c25557;
  --osano-primary-text: #ffffff;
}

.dark {
  --osano-surface: #0f0f0f; /* app's proven dark palette */
  --osano-border: #2d2e33;
  --osano-text: #ffffff;
  --osano-text-muted: #cccccc;
  --osano-secondary-bg: #18191c;
  --osano-secondary-text: #e1e4eb;
  --osano-track: #2d2e33;
  --osano-overlay: rgba(0, 0, 0, 0.6);
  --osano-primary: var(--accent);
  --osano-primary-hover: #c25557;
  --osano-primary-text: #ffffff;
}

/* Use the docs font on every Osano element — banner, drawer, buttons, inputs,
   labels, the cookie table, everything. */
[class*='osano-cm'] {
  font-family: inherit !important;
}

/* Surfaces: notice bar + preferences drawer. The drawer's actual painted panel
   is .osano-cm-info (a child of .osano-cm-info-dialog) — that's where Osano's
   purple lives, so it must be in this list or the drawer stays purple. */
.osano-cm-window,
.osano-cm-dialog,
.osano-cm-info,
.osano-cm-info-dialog-header,
.osano-cm-header {
  background-color: var(--osano-surface) !important;
  color: var(--osano-text) !important;
  border-color: var(--osano-border) !important;
}

/* .osano-cm-info-dialog is a FULL-VIEWPORT fixed layer wrapping the panel —
   painting it would black out the whole page. Keep it transparent so the page
   shows through, and dim it only while the drawer is open. */
.osano-cm-info-dialog {
  background-color: transparent !important;
}
.osano-cm-info-dialog:has(.osano-cm-info--open) {
  background-color: var(--osano-overlay) !important;
}

/* Osano paints the drawer header with a purple linear-gradient
   (background-image, not -color) — clear it so the header reads themed. */
.osano-cm-info-dialog-header,
.osano-cm-header {
  background-image: none !important;
}

/* The drawer panel ships a light-grey box-shadow ring that reads as a pale
   "sidebar border". Replace it with a depth shadow + a single subtle border. */
.osano-cm-info {
  box-shadow: -8px 0 28px rgba(0, 0, 0, 0.55) !important;
  border-left: 1px solid var(--osano-border) !important;
}

/* Drawer header close (✕) — borderless, slightly smaller, pulled in so its
   right edge sits on the same 20px gutter as the "Storage Preferences" title. */
.osano-cm-info-dialog-header__close.osano-cm-close {
  background-color: transparent !important;
  border: none !important;
  color: var(--osano-text-muted) !important;
  width: 16px !important;
  height: 16px !important;
  margin-right: 20px !important;
}
.osano-cm-info-dialog-header__close.osano-cm-close:hover {
  background-color: transparent !important;
  color: var(--osano-text) !important;
}
.osano-cm-info-dialog-header__close.osano-cm-close:focus-visible {
  background-color: transparent !important;
  color: var(--osano-text) !important;
}
.osano-cm-info-dialog-header__close.osano-cm-close svg {
  width: 16px !important;
  height: 16px !important;
}

.osano-cm-dialog {
  border: 1px solid var(--osano-border) !important;
  border-radius: 0.375rem !important;
}

/* Float the notice bar at the BOTTOM as an inset card. Osano's bar defaults to
   a full-width strip pinned to top:0; override it to sit bottom-center with a
   gap on every side so it reads as a floating card. */
.osano-cm-dialog--type_bar {
  top: auto !important;
  bottom: 1.5rem !important;
  left: 1.5rem !important;
  right: 1.5rem !important;
  width: auto !important;
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
}

@media (max-width: 640px) {

  .osano-cm-dialog--type_bar {
    bottom: 1rem !important;
    left: 1rem !important;
    right: 1rem !important;
  }

}

/* Body / description copy */
.osano-cm-message,
.osano-cm-content__message,
.osano-cm-info-dialog-header__description,
.osano-cm-label,
.osano-cm-list-item__description,
.osano-cm-disclosure__list-name {
  color: var(--osano-text-muted) !important;
}

/* Headers */
.osano-cm-header {
  color: var(--osano-text) !important;
}

/* "Privacy Policy" / disclosure links */
.osano-cm-link,
.osano-cm-message a,
.osano-cm-content__message a,
.osano-cm-disclosure__toggle {
  color: var(--osano-text) !important;
  text-decoration: underline !important;
}
.osano-cm-link:hover,
.osano-cm-message a:hover,
.osano-cm-content__message a:hover,
.osano-cm-disclosure__toggle:hover {
  color: var(--osano-text-muted) !important;
}
.osano-cm-link:focus-visible,
.osano-cm-message a:focus-visible,
.osano-cm-content__message a:focus-visible,
.osano-cm-disclosure__toggle:focus-visible {
  color: var(--osano-text-muted) !important;
}

/* Hide Osano's "Powered by Osano" footer credit */
.osano-cm-powered-by,
.osano-cm-view__powered-by {
  display: none !important;
}

/* --- Drawer spacing + typography --- */

/* Consistent horizontal gutters (20px) for the drawer content so the intro
   paragraph, category rows and buttons all line up with the header. */
.osano-cm-view--type_consent {
  padding-left: 20px !important;
  padding-right: 20px !important;
  padding-bottom: 20px !important;
}

/* Header ("Storage Preferences") — larger, bolder, more breathing room */
.osano-cm-info .osano-cm-header,
.osano-cm-info-dialog-header__header {
  font-size: 1.125rem !important; /* 18px */
  font-weight: 600 !important;
  padding: 22px 20px !important;
}

/* Intro paragraph at the top of the drawer */
.osano-cm-view__description {
  margin-top: 14px !important;
  margin-bottom: 20px !important;
}

/* Each category box (Essential / Targeted Advertising / …). The divider is the
   disclosure's bottom border; keep the gap above/below every divider equal. */
.osano-cm-drawer-item {
  padding-top: 20px !important;
  padding-bottom: 0 !important;
}

/* Label row + the category name */
.osano-cm-list-item__toggle {
  margin: 0 !important;
}
.osano-cm-toggle__label,
.osano-cm-label {
  font-size: 1rem !important; /* 16px */
  font-weight: 500 !important;
}

/* Description copy under each category */
.osano-cm-list-item__description,
.osano-cm-description {
  font-size: 0.8125rem !important; /* 13px */
  font-weight: 400 !important;
  line-height: 1.6 !important;
  margin-top: 12px !important;
}

/* Cookie/disclosure detail table (Name/_value, Provider/_value, …) */
.osano-cm-disclosure-item__title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--osano-text-muted) !important;
  margin: 0 0 4px !important;
  padding-top: 0 !important;
}
.osano-cm-disclosure-item__description {
  margin: 0 0 12px !important;
  padding-top: 0 !important;
}

/* "View Disclosures" disclosure row — its bottom border is the divider. */
.osano-cm-disclosure--collapse {
  padding-top: 14px !important;
  padding-bottom: 20px !important;
  margin-left: -20px !important;
  margin-right: -20px !important;
  margin-bottom: 0 !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.osano-cm-disclosure__toggle {
  font-size: 0.8125rem !important; /* 13px */
}

/* Let the Save button's own top margin own the gap (so it isn't doubled). */
.osano-cm-list {
  padding-bottom: 0 !important;
}

/* Save button: equal gap above (margin-top) and below (view padding-bottom). */
.osano-cm-save,
.osano-cm-view__button {
  margin-top: 20px !important;
}

/* All buttons share the product's pill shape + font */
.osano-cm-button {
  border-radius: 0.375rem !important;
  font-weight: 500 !important;
  transition: background-color 0.2s ease !important;
}

/* Primary actions: Accept All (banner) + Save (drawer). */
.osano-cm-accept,
.osano-cm-accept-all,
.osano-cm-save {
  background-color: var(--osano-primary) !important;
  color: var(--osano-primary-text) !important;
  border: none !important;
}
.osano-cm-accept:hover,
.osano-cm-accept-all:hover,
.osano-cm-save:hover {
  background-color: var(--osano-primary-hover) !important;
}
.osano-cm-accept:focus-visible,
.osano-cm-accept-all:focus-visible,
.osano-cm-save:focus-visible {
  background-color: var(--osano-primary-hover) !important;
}

/* Secondary actions: Deny / Deny All + Manage */
.osano-cm-deny,
.osano-cm-denyAll,
.osano-cm-manage {
  background-color: var(--osano-secondary-bg) !important;
  color: var(--osano-secondary-text) !important;
  border: 1px solid var(--osano-border) !important;
}
.osano-cm-deny:hover,
.osano-cm-denyAll:hover,
.osano-cm-manage:hover {
  background-color: var(--osano-border) !important;
}
.osano-cm-deny:focus-visible,
.osano-cm-denyAll:focus-visible,
.osano-cm-manage:focus-visible {
  background-color: var(--osano-border) !important;
}

/* Close (✕) on the bar + drawer. The mark is an inline <svg> whose paths are
   filled solid black by Osano — drive `fill` off currentColor. */
.osano-cm-close {
  color: var(--osano-text-muted) !important;
}
.osano-cm-close:hover {
  color: var(--osano-text) !important;
}
.osano-cm-close:focus-visible {
  color: var(--osano-text) !important;
}
.osano-cm-close svg,
.osano-cm-close svg path {
  fill: currentColor !important;
}

/* Category toggles — brand accent when on, muted track when off. Osano draws a
   2px green border on the switch; override border-color in every state. */
.osano-cm-toggle__switch {
  background-color: var(--osano-track) !important;
  border-color: var(--osano-track) !important;
  transform: scale(0.85) !important;
  transform-origin: right center !important;
}
.osano-cm-toggle--checked .osano-cm-toggle__switch {
  background-color: var(--osano-primary) !important;
  border-color: var(--osano-primary) !important;
}
/* Essential category is locked on — dim it so it reads as non-interactive */
.osano-cm-toggle--disabled .osano-cm-toggle__switch {
  opacity: 0.5 !important;
}

/* Drawer list rows */
.osano-cm-list-item,
.osano-cm-drawer-item {
  border-color: var(--osano-border) !important;
}

/* Hide Osano's default floating cookie icon — replaced by the "Cookie Settings"
   footer link injected in docs/assets/osano-cookie-settings.js. These two are a
   matched pair: per Osano, hiding the widget REQUIRES another entry point. */
.osano-cm-widget {
  display: none !important;
}