/*fern-site-stylesheet*/@font-face {
    font-family: 'Inter';
    src: url('/_fern-files/truemed.docs.buildwithfern.com/e06f6b1bc553aaea4e4668023ed0ab0a147129c3107f511bc7d03d361b0ae085/docs/assets/fonts/Inter-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/_fern-files/truemed.docs.buildwithfern.com/0ff3e94614e1493eb556314fd247ae6c4a85a7783b4cc86be539940cf83f2a48/docs/assets/fonts/Inter-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/_fern-files/truemed.docs.buildwithfern.com/5cb7103e4e605989afebc03d989c79201e54b21b5183db33981f70db9178a301/docs/assets/fonts/Inter-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/_fern-files/truemed.docs.buildwithfern.com/fa888127b6da015b65569f0351f3b5c391ad928904951f1c20e9f8462a8d95ea/docs/assets/fonts/Inter-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PP Neue Montreal';
    src: url('/_fern-files/truemed.docs.buildwithfern.com/34d3f9901ee27b047a43a8b0c322dead62fa52bcb2d01ba2287acd5f851a9221/docs/assets/fonts/PPNeueMontreal-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PP Neue Montreal';
    src: url('/_fern-files/truemed.docs.buildwithfern.com/54b454c4498eaa5b4b4e87abdf9279be749d93c839a21567698c65752ec713ef/docs/assets/fonts/PPNeueMontreal-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PP Neue Montreal';
    src: url('/_fern-files/truemed.docs.buildwithfern.com/ce1c6c460c83c7e77e071dfd42045babad8a423c55fcf636fa8ce51a52301265/docs/assets/fonts/PPNeueMontreal-Bold.woff2') format('woff2');
    font-weight: 700;
    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: 22px;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'PP Neue Montreal', 'Inter', 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: #f4f8f8;
  --accent-2: #edf5f5;
  --accent-3: #d8f2f0;
  --accent-4: #c3ece9;
  --accent-5: #ade3e0;
  --accent-6: #96d6d3;
  --accent-7: #79c6c2;
  --accent-8: #47b1ad;
  --accent-9: #0d7774;
  --accent-10: #006966;
  --accent-11: #006f6c;
  --accent-12: #194240;

  --accent-a1: #20b2d507;
  --accent-a2: #0e9fb10e;
  --accent-a3: #03c0b823;
  --accent-a4: #04bcb239;
  --accent-a5: #01afa94f;
  --accent-a6: #00a09a66;
  --accent-a7: #00958f84;
  --accent-a8: #009490b7;
  --accent-a9: #00706df2;
  --accent-a10: #006966;
  --accent-a11: #006f6c;
  --accent-a12: #002e2ce6;

  --accent-contrast: #fff;
  --accent-surface: #eaf4f4cc;
  --accent-indicator: #0d7774;
  --accent-track: #0d7774;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(97.6% 0.0048 191.7);
      --accent-2: oklch(96.4% 0.0091 191.7);
      --accent-3: oklch(94.1% 0.027 191.7);
      --accent-4: oklch(91.3% 0.0425 191.7);
      --accent-5: oklch(87.8% 0.055 191.7);
      --accent-6: oklch(83.3% 0.065 191.7);
      --accent-7: oklch(77.4% 0.0767 191.7);
      --accent-8: oklch(69.8% 0.0963 191.7);
      --accent-9: oklch(51.6% 0.0858 191.7);
      --accent-10: oklch(46.7% 0.0858 191.7);
      --accent-11: oklch(48.8% 0.0858 191.7);
      --accent-12: oklch(35% 0.0457 191.7);

      --accent-a1: color(display-p3 0 0.5882 0.7843 / 0.02);
      --accent-a2: color(display-p3 0 0.5725 0.651 / 0.048);
      --accent-a3: color(display-p3 0 0.6784 0.6745 / 0.116);
      --accent-a4: color(display-p3 0 0.6706 0.6431 / 0.188);
      --accent-a5: color(display-p3 0 0.6118 0.5922 / 0.264);
      --accent-a6: color(display-p3 0 0.549 0.5333 / 0.344);
      --accent-a7: color(display-p3 0 0.5059 0.4824 / 0.444);
      --accent-a8: color(display-p3 0 0.4863 0.4667 / 0.596);
      --accent-a9: color(display-p3 0 0.3176 0.3098 / 0.788);
      --accent-a10: color(display-p3 0 0.2824 0.2706 / 0.824);
      --accent-a11: color(display-p3 0 0.298 0.2902 / 0.812);
      --accent-a12: color(display-p3 0 0.1333 0.1294 / 0.856);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9216 0.9569 0.9529 / 0.8);
      --accent-indicator: oklch(51.6% 0.0858 191.7);
      --accent-track: oklch(51.6% 0.0858 191.7);
    }
  }
}


.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: #111818;
  --accent-2: #131e1d;
  --accent-3: #122d2c;
  --accent-4: #0b3a39;
  --accent-5: #124745;
  --accent-6: #1c5554;
  --accent-7: #256765;
  --accent-8: #2b7d7a;
  --accent-9: #179895;
  --accent-10: #378785;
  --accent-11: #60cfcb;
  --accent-12: #aeeeeb;

  --accent-a1: #ea000008;
  --accent-a2: #f099360a;
  --accent-a3: #63f7ce17;
  --accent-a4: #11fde425;
  --accent-a5: #32ffe933;
  --accent-a6: #4ffef143;
  --accent-a7: #59fef257;
  --accent-a8: #56fff46f;
  --accent-a9: #22fff68d;
  --accent-a10: #69fff77a;
  --accent-a11: #77fff9ca;
  --accent-a12: #bafefbed;

  --accent-contrast: #fff;
  --accent-surface: #1c231e80;
  --accent-indicator: #179895;
  --accent-track: #179895;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(20.2% 0.011 192.3);
      --accent-2: oklch(22.4% 0.0151 192.3);
      --accent-3: oklch(27.7% 0.0338 192.3);
      --accent-4: oklch(31.9% 0.0488 192.3);
      --accent-5: oklch(36.3% 0.0538 192.3);
      --accent-6: oklch(41.4% 0.0585 192.3);
      --accent-7: oklch(47.3% 0.0662 192.3);
      --accent-8: oklch(53.9% 0.0776 192.3);
      --accent-9: oklch(61.6% 0.1016 192.3);
      --accent-10: oklch(57.4% 0.0776 192.3);
      --accent-11: oklch(78.9% 0.1016 192.3);
      --accent-12: oklch(90.5% 0.0646 192.3);

      --accent-a1: color(display-p3 0.9804 0 0 / 0.017);
      --accent-a2: color(display-p3 0.9725 0.7529 0.2431 / 0.03);
      --accent-a3: color(display-p3 0.5765 0.9961 0.8667 / 0.083);
      --accent-a4: color(display-p3 0.3922 0.9922 0.9255 / 0.14);
      --accent-a5: color(display-p3 0.4588 1 0.9294 / 0.196);
      --accent-a6: color(display-p3 0.5137 0.9961 0.9529 / 0.257);
      --accent-a7: color(display-p3 0.549 1 0.9529 / 0.335);
      --accent-a8: color(display-p3 0.5451 1 0.9647 / 0.427);
      --accent-a9: color(display-p3 0.4667 1 0.9765 / 0.544);
      --accent-a10: color(display-p3 0.5843 1 0.9765 / 0.47);
      --accent-a11: color(display-p3 0.6196 0.9961 0.9882 / 0.779);
      --accent-a12: color(display-p3 0.8 1 0.9922 / 0.918);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.1098 0.1333 0.1176 / 0.5);
      --accent-indicator: oklch(61.6% 0.1016 192.3);
      --accent-track: oklch(61.6% 0.1016 192.3);
    }
  }
}


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

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

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

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

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

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

.light, :root {
  color-scheme: light;
  --accent: rgba(13, 119, 116, 1);
  --background: rgba(250, 250, 249, 1);
  --border: rgba(231, 229, 228, 1);
  --sidebar-background: rgba(245, 245, 244, 1);
  --header-background: rgba(250, 250, 249, 1);
  --card-background: rgba(255, 255, 255, 1);
  --theme-color: #fafaf9;
}

.dark {
  color-scheme: dark;
  --accent: rgba(23, 152, 149, 1);
  --background: rgba(10, 25, 28, 1);
  --border: rgba(31, 51, 57, 1);
  --sidebar-background: rgba(12, 30, 35, 1);
  --header-background: rgba(10, 25, 28, 1);
  --card-background: rgba(15, 33, 39, 1);
  --theme-color: #0a191c;
}

/* ============================================================
   Truemed docs — design-system stylesheet
   Source of truth: Truemed Design System (Claude Design project),
   derived from the truemed/design-system Next.js codebase.
   Body font: Inter. Display font: PP Neue Montreal.
   Colors: teal + stone only. Borders: low-opacity black.
   ============================================================ */

:root {
  /* ---------- Brand teal ---------- */
  --teal-100: #f4fcf9;
  --teal-200: #daefee;
  --teal-300: #55b4b2;
  --teal-400: #179895; /* brand mark / accents / focus */
  --teal-500: #0d7774; /* primary hover */
  --teal-600: #183b43; /* primary solid */
  --teal-700: #0a191c; /* near-black */

  /* ---------- Stone (neutral) ---------- */
  --stone-50: #fafaf9;
  --stone-100: #f5f5f4;
  --stone-200: #e7e5e4;
  --stone-300: #d6d3d1;
  --stone-400: #a8a29e;
  --stone-500: #78716c;
  --stone-600: #57534e;
  --stone-700: #44403c;
  --stone-800: #292524;
  --stone-900: #1c1917;
  --stone-950: #0c0a09;

  /* ---------- Surfaces / foregrounds (light) ---------- */
  --tm-bg-app: var(--stone-50);
  --tm-bg-surface: #ffffff;
  --tm-bg-subtle: var(--stone-100);
  --tm-fg-primary: var(--stone-950);
  --tm-fg-muted: var(--stone-500);
  --tm-fg-subtle: var(--stone-400);
  --tm-border: rgb(12 10 9 / 0.1);
  --tm-border-soft: rgb(12 10 9 / 0.05);
  --tm-border-strong: rgb(12 10 9 / 0.15);
  --tm-focus: var(--teal-400);
  --tm-accent-ink: var(--teal-600);

  /* ---------- Radii (layered, per design system) ---------- */
  --tm-radius-sm: 0.375rem;  /* badges */
  --tm-radius-md: 0.5rem;    /* cards */
  --tm-radius-lg: 0.75rem;   /* larger cards/panels */
  --tm-radius-xl: 1rem;      /* inputs, dialogs, hero */
  --tm-radius-full: 9999px;  /* pill buttons */

  /* ---------- Shadows (tiny, per design system) ---------- */
  --tm-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.04);
  --tm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.05);
  --tm-inset-highlight: inset 0 1px rgb(255 255 255 / 0.15);

  /* ---------- Type ---------- */
  --tm-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tm-font-display: 'PP Neue Montreal', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --tm-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Dark theme tokens — faithful extrapolation on teal-700 near-black */
html.dark {
  --tm-bg-app: #0a191c;
  --tm-bg-surface: #0f2127;
  --tm-bg-subtle: #0c1e23;
  --tm-fg-primary: #f5f5f4;
  --tm-fg-muted: #a8a29e;
  --tm-fg-subtle: #78716c;
  --tm-border: rgb(255 255 255 / 0.1);
  --tm-border-soft: rgb(255 255 255 / 0.06);
  --tm-border-strong: rgb(255 255 255 / 0.16);
  --tm-accent-ink: var(--teal-300);
}

/* ============================================================
   Fern chrome
   ============================================================ */

/* Headings — Fern's default prose scale asks for weights 600-800,
   but the display font only ships Regular/Medium/Bold (400/500/700),
   so browsers snap every heading up to Bold. Pin them to Medium
   instead, matching the hero/tiles titles below. */
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500 !important;
}

/* Left-align header tabs */
.fern-header-tabs {
  justify-content: flex-start;
}

/* Each instance audience exposes one version, so the selector has no choice to offer. */
.fern-version-selector {
  display: none;
}

header [role='tablist'] [role='tab'] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: var(--tm-font-sans);
  font-weight: 500;
}

/* Center the underline indicator under the tab text */
header [role='tablist'] [role='tab'][aria-selected='true']::after,
header [role='tablist'] [role='tab'][aria-current='page']::after {
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
}

/* Navbar CTA — design-system pill button: teal-600 solid, teal-500 hover,
   subtle inset top highlight, no outward shadow */
header .fern-button.filled,
header a[class*='fern-button'][class*='filled'] {
  background: var(--teal-600) !important;
  color: #ffffff !important;
  border-radius: var(--tm-radius-full) !important;
  box-shadow: var(--tm-inset-highlight), var(--tm-shadow-sm) !important;
  font-family: var(--tm-font-sans);
  font-weight: 500;
  transition: background 0.15s ease;
}

header .fern-button.filled:hover,
header a[class*='fern-button'][class*='filled']:hover {
  background: var(--teal-500) !important;
}
header .fern-button.filled:focus-visible,
header a[class*='fern-button'][class*='filled']:focus-visible {
  background: var(--teal-500) !important; outline: none;
}

/* Focus ring — always 2px teal-400, offset 2px */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--tm-focus);
  outline-offset: 2px;
}

/* Inline code — quiet chip on low-opacity black border */
code:not(pre code) {
  font-family: var(--tm-font-mono);
  color: inherit !important;
  background: rgb(12 10 9 / 0.04) !important;
  border: 1px solid var(--tm-border-soft) !important;
  padding: 0.125rem 0.375rem !important;
  border-radius: 0.3125rem !important;
}

html.dark code:not(pre code) {
  background: rgb(255 255 255 / 0.06) !important;
  border-color: rgb(255 255 255 / 0.08) !important;
}

/* In-page tabs (`<Tabs>` in MDX) — Fern renders each tab title at 14px, which
   reads smaller than the body copy under it. Bump it so the titles look like
   the switch they are. Header tabs are `<a role="tab">`, so scoping to the
   `h6` Fern uses for in-page tabs leaves the header alone. */
h6[role='tab'] {
  font-size: 1rem !important;
  line-height: 1.5rem !important;
}

/* Subheading inside a tab panel. Fern's "On this page" collects every `h1`-`h6`
   on the page, tab panels included, so a real heading repeated in two tabs
   shows up twice in the rail. This is a plain div styled to match a prose `h3`,
   which keeps the heading look and stays out of the rail. Each one carries
   `role="heading" aria-level="3"` in the MDX so screen readers still treat it as
   a heading — keep those attributes on any new subhead. */
.tab-subhead {
  font-family: var(--font-heading);
  font-size: 1.25em;
  font-weight: 500;
  line-height: 1.6;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
}

/* Fern drops the top margin of whatever follows a real heading, so match that
   here and the spacing below the label is the same as below an `h3`. */
.prose .tab-subhead + * {
  margin-top: 0;
}

/* ============================================================
   Checklists (markdown task lists, `- [ ]`)
   ============================================================ */

/* Fern gives a task item both a bullet and a checkbox, so every line shows two
   markers. Drop the bullet and let the box be the marker. Only direct children
   are touched, so a plain list nested inside a task item keeps its bullets. */
ul.contains-task-list > li.task-list-item::before {
  content: none !important;
}

/* Same problem on a numbered task list, with a number in place of the bullet. */
ol.contains-task-list > li.task-list-item {
  list-style: none;
}

/* Hang the box in the gutter so lines that wrap line up with the first line.
   `relative` is already set on task items in a bulleted list; numbered lists
   don't get it, and the box is positioned against the item. */
.contains-task-list > li.task-list-item {
  position: relative;
  padding-left: 1.6rem;
}

/* The first line sets where the box sits vertically, so it can't start with a
   margin of its own. Spacing between items comes from the line above. */
.contains-task-list > li.task-list-item > p:first-of-type {
  margin-top: 0;
}

/* The box: drawn by hand rather than left to `accent-color`, so light and dark
   both match the design system. A tight list puts the input straight in the
   item; a loose one wraps the item's text in a paragraph first. */
li.task-list-item > input[type='checkbox'],
li.task-list-item > p > input[type='checkbox'] {
  position: absolute;
  left: 0;
  top: 0.34em;
  width: 1rem;
  height: 1rem;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--tm-bg-surface);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.8rem 0.8rem;
  border: 1px solid var(--tm-border-strong);
  border-radius: 0.25rem;
  box-shadow: var(--tm-shadow-xs);
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

li.task-list-item > input[type='checkbox']:checked,
li.task-list-item > p > input[type='checkbox']:checked {
  background-color: var(--teal-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
  border-color: var(--teal-500);
}

/* interactive-checklists.js drops the `disabled` Fern renders; until it runs,
   the box stays a static marker and shouldn't invite a click. */
li.task-list-item > input[type='checkbox']:not(:disabled),
li.task-list-item > p > input[type='checkbox']:not(:disabled) {
  cursor: pointer;
}

li.task-list-item > input[type='checkbox']:not(:disabled):hover,
li.task-list-item > p > input[type='checkbox']:not(:disabled):hover {
  border-color: var(--teal-400);
}
li.task-list-item > input[type='checkbox']:not(:disabled):focus-visible,
li.task-list-item > p > input[type='checkbox']:not(:disabled):focus-visible {
  border-color: var(--teal-400); outline: none;
}

li.task-list-item > input[type='checkbox']:focus-visible,
li.task-list-item > p > input[type='checkbox']:focus-visible {
  outline: 2px solid var(--tm-focus);
  outline-offset: 2px;
}

/* teal-500 is too dark to read as "on" against the near-black background. */
html.dark li.task-list-item > input[type='checkbox']:checked,
html.dark li.task-list-item > p > input[type='checkbox']:checked {
  background-color: var(--teal-400);
  border-color: var(--teal-400);
}

/* ============================================================
   Landing page (welcome.mdx, layout: custom)
   ============================================================ */

.landing,
.landing * {
  box-sizing: border-box;
}

.landing {
  --container-max-width: 1200px;
  font-family: var(--tm-font-sans);
  color: var(--tm-fg-primary);
}

/* ---------- Hero — flat teal-tinted panel, no gradients ---------- */
.hero-section {
  max-width: var(--container-max-width);
  margin: 2rem auto 3rem auto;
  padding: 4.5rem 3.5rem;
  background: var(--teal-100);
  border: 1px solid var(--tm-border-soft);
  border-radius: var(--tm-radius-xl);
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  max-width: 44rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--tm-font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-500);
  background: #ffffff;
  border: 1px solid var(--tm-border-soft);
  border-radius: var(--tm-radius-full);
  padding: 0.25rem 0.75rem;
}

.hero-title {
  font-family: var(--tm-font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--stone-900);
  margin: 0;
}

.hero-subtitle {
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.625;
  color: var(--stone-600);
  margin: 0;
  max-width: 60ch;
}

.hero-cta-group {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.hero-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: var(--teal-600);
  color: #ffffff;
  border-radius: var(--tm-radius-full);
  box-shadow: var(--tm-inset-highlight), var(--tm-shadow-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease;
}

.hero-cta-button:hover {
  background: var(--teal-500);
  text-decoration: none;
  color: #ffffff;
}
.hero-cta-button:focus-visible {
  background: var(--teal-500);
  text-decoration: none;
  color: #ffffff; outline: none;
}

.hero-cta-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.hero-cta-secondary {
  background: #ffffff;
  color: var(--stone-950);
  box-shadow: inset 0 0 0 1px var(--tm-border), var(--tm-shadow-xs);
}

.hero-cta-secondary:hover {
  background: var(--stone-50);
  color: var(--stone-950);
  box-shadow: inset 0 0 0 1px var(--tm-border-strong), var(--tm-shadow-xs);
}
.hero-cta-secondary:focus-visible {
  background: var(--stone-50);
  color: var(--stone-950);
  box-shadow: inset 0 0 0 1px var(--tm-border-strong), var(--tm-shadow-xs); outline: none;
}

/* ---------- Audience cards ---------- */
.audience-section {
  max-width: var(--container-max-width);
  margin: 0 auto 3rem auto;
}

.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.audience-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.75rem;
  background: var(--tm-bg-surface);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-lg);
  box-shadow: var(--tm-shadow-xs);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease;
}

.audience-card:hover {
  border-color: var(--teal-400);
  text-decoration: none;
}
.audience-card:focus-visible {
  border-color: var(--teal-400);
  text-decoration: none; outline: none;
}

.audience-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--teal-200);
  color: var(--teal-600);
  border-radius: var(--tm-radius-md);
  margin-bottom: 0.5rem;
}

.audience-icon svg {
  width: 1.375rem;
  height: 1.375rem;
}

.audience-title {
  font-family: var(--tm-font-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--tm-fg-primary);
  margin: 0;
}

.audience-description {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--tm-fg-muted);
  margin: 0;
  flex-grow: 1;
}

.audience-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tm-accent-ink);
  margin-top: 0.25rem;
}

/* ---------- Quick-link tiles ---------- */
.tiles-section {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-bottom: 5rem;
}

.tiles-section-title {
  font-family: var(--tm-font-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--stone-900);
  margin: 0 0 1.25rem 0;
}

.tiles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.25rem;
  background: var(--tm-bg-surface);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-md);
  box-shadow: var(--tm-shadow-xs);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease;
}

.tile:hover {
  border-color: var(--teal-400);
  text-decoration: none;
}
.tile:focus-visible {
  border-color: var(--teal-400);
  text-decoration: none; outline: none;
}

.tile-icon {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--teal-500);
  margin-bottom: 0.375rem;
}

.tile-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.tile-title {
  font-family: var(--tm-font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tm-fg-primary);
  margin: 0;
}

.tile-description {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--tm-fg-muted);
  margin: 0;
  flex-grow: 1;
}

.tile-link {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--tm-accent-ink);
  margin-top: 0.25rem;
}

/* ---------- Landing dark theme ---------- */
html.dark .hero-section {
  background: var(--tm-bg-subtle);
  border-color: var(--tm-border-soft);
}

html.dark .hero-badge {
  background: rgb(255 255 255 / 0.05);
  border-color: var(--tm-border-soft);
  color: var(--teal-300);
}

html.dark .hero-title {
  color: #f5f5f4;
}

html.dark .hero-subtitle {
  color: var(--tm-fg-muted);
}

html.dark .hero-cta-secondary {
  background: transparent;
  color: #f5f5f4;
  box-shadow: inset 0 0 0 1px var(--tm-border);
}

html.dark .hero-cta-secondary:hover {
  background: rgb(255 255 255 / 0.04);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px var(--tm-border-strong);
}
html.dark .hero-cta-secondary:focus-visible {
  background: rgb(255 255 255 / 0.04);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px var(--tm-border-strong); outline: none;
}

html.dark .tiles-section-title {
  color: #f5f5f4;
}

/* ---------- Landing responsive ---------- */
@media (max-width: 1024px) {

  .audience-grid {
    grid-template-columns: 1fr;
  }

  .tiles-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-section {
    padding: 3rem 2rem;
  }

}

@media (max-width: 640px) {

  .tiles-grid {
    grid-template-columns: 1fr;
  }

  .hero-section {
    margin: 1rem auto 2rem auto;
    padding: 2.5rem 1.25rem;
  }

  .hero-cta-button {
    width: 100%;
  }

}

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

  .hero-cta-button,
  .tile,
  .audience-card,
  .fern-changelog-card {
    transition: none;
  }

}

/* ============================================================
   Glossary filter (in-page search on the glossary table)
   ============================================================ */

.tm-glossary-filter {
  margin: 0;
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid var(--tm-border);
}

.tm-glossary-filter input {
  width: 100%;
  padding: 0.4rem 0.25rem 0.4rem 1.75rem;
  font: inherit;
  color: inherit;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2378716c' stroke-width='2'%3E%3Ccircle cx='9' cy='9' r='6'/%3E%3Cpath d='M14 14l4 4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 0.15rem center;
  background-size: 1rem 1rem;
  border: none;
  border-radius: 4px;
  outline: none;
}

.tm-glossary-filter input::placeholder {
  color: var(--tm-fg-subtle);
}

.tm-glossary-filter:focus-within {
  border-bottom-color: var(--teal-400);
}

.tm-glossary-filter input:focus-visible {
  outline: 2px solid var(--tm-focus);
  outline-offset: 2px;
}

.tm-glossary-empty {
  color: var(--tm-fg-muted);
  font-style: italic;
  margin: 0.75rem 0.9rem;
}

/* Rows filtered out by glossary-filter.js. It flags rows with a data attribute
   instead of an inline display style, which React would wipe on re-render. */
tr[data-tm-hidden] {
  display: none;
}

html.dark .tm-glossary-filter {
  border-bottom-color: var(--tm-border);
}

/* ========================================
   Changelog post page (/changelog/YYYY/M/D)
   ======================================== */

/* Layout: single content column, aligned to the same edge as the
   "< Changelog" page header (which sits inside a `.max-w-content-width
   mx-auto` centered container). Sticky-rail aside is hidden because the
   eyebrow date at the top already shows the full date. */
article.fern-changelog-content[data-has-aside="true"] > aside {
  display: none !important;
}

@media (min-width: 1024px) {

  article.fern-changelog-content[data-has-aside="true"] {
    display: block !important;
    max-width: var(--content-width, 640px);
    width: 100%;
    margin-inline: auto;
  }

  article.fern-changelog-content[data-has-aside="true"] > div.max-w-content-width {
    max-width: none;
    width: 100%;
    margin-inline: 0;
  }

}

/* "< Changelog" back link: match the green breadcrumb on the guide and
   marketing pages, chevron kept. Fern renders this as the page h1, so it
   arrives at display size in PP Neue Montreal; these rules pull it down to
   breadcrumb scale. The variables are Fern's own, the same ones its
   .fern-breadcrumb-item rule reads, so the light and dark greens both follow
   the accent color from docs.yml. */
section.fern-changelog-content h1.fern-page-heading {
  font-family: var(--tm-font-sans);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--text-sm--line-height, 1.4286);
  color: var(--accent-a11);
}

/* Chevron: breadcrumb-separator size, tinted to match the label. */
section.fern-changelog-content a svg {
  width: 1rem;
  height: 1rem;
  color: var(--accent-a11);
}

/* Fern wraps the link in a padded chip that fills with grey on hover, which
   reads as a button. Guide breadcrumbs are plain text with no hover state, so
   strip the padding and the fill and let the chevron sit on the content edge.
   Fern sets the gap inline and the fill through a group-hover class, so both
   overrides have to outrank those. */
section.fern-changelog-content a > div {
  gap: 0.25rem !important;
  padding: 0 !important;
  margin-left: 0 !important;
  background: transparent !important;
}

/* Eyebrow date: design-system badge — teal tint on a 6px radius, sentence
   case, no outward shadow. */
article.fern-changelog-content .eyebrow .fern-changelog-label > a.fern-docs-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--tm-font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  padding: 0.125rem 0.5rem;
  border: none;
  border-radius: var(--tm-radius-sm);
  background: rgb(23 152 149 / 0.15);
  color: var(--teal-500);
  box-shadow: none;
  white-space: nowrap;
  text-decoration: none;
}

article.fern-changelog-content .eyebrow .fern-changelog-label > a.fern-docs-badge:hover {
  background: rgb(23 152 149 / 0.22);
  color: var(--teal-500);
}
article.fern-changelog-content .eyebrow .fern-changelog-label > a.fern-docs-badge:focus-visible {
  background: rgb(23 152 149 / 0.22);
  color: var(--teal-500); outline: none;
}

html.dark article.fern-changelog-content .eyebrow .fern-changelog-label > a.fern-docs-badge {
  background: rgb(85 180 178 / 0.18);
  color: var(--teal-300);
}

html.dark article.fern-changelog-content .eyebrow .fern-changelog-label > a.fern-docs-badge:hover {
  background: rgb(85 180 178 / 0.26);
  color: var(--teal-300);
}
html.dark article.fern-changelog-content .eyebrow .fern-changelog-label > a.fern-docs-badge:focus-visible {
  background: rgb(85 180 178 / 0.26);
  color: var(--teal-300); outline: none;
}

article.fern-changelog-content .eyebrow {
  margin-bottom: 1rem;
}

/* Hide per-entry filter chips — the top-of-page filter dropdown covers this. */
article.fern-changelog-content .filter-row {
  display: none !important;
}

/* Vertical spacing between monthly entries; tighter for the first one. */
article.fern-changelog-content {
  margin-top: 4rem !important;
}

article.fern-changelog-content:first-of-type {
  margin-top: 1.5rem !important;
}

/* Close the gap under the "Changelog" back link. Fern stacks three separate
   gaps there — the header's own bottom margin, the section's, and the post's
   top margin above — which together push the post title far down the page.
   Drop the first two and let the post's own top margin set the distance. */
section.fern-changelog-content {
  margin-bottom: 0;
}

section.fern-changelog-content header {
  margin-bottom: 0;
}

article.fern-changelog-content + hr {
  display: none;
}

/* Hero image: full-width within content column, card chrome rather than a
   drop shadow (design-system shadows are hairline-thin). */
article.fern-changelog-content .fern-prose > p > img:first-child,
article.fern-changelog-content .fern-prose img.changelog-hero {
  width: 100%;
  height: auto;
  border-radius: var(--tm-radius-md);
  box-shadow: 0 0 0 1px rgb(12 10 9 / 0.05), var(--tm-shadow-sm);
  margin: 0.5rem 0 2rem;
}

html.dark article.fern-changelog-content .fern-prose > p > img:first-child,
html.dark article.fern-changelog-content .fern-prose img.changelog-hero {
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08);
}

/* A motion clip is exported with its own background and bleeds off all four
   edges, so the chrome that suits a contained screenshot works against it: the
   8px radius clips the phone bezel and the hairline ring draws a line across
   the artwork. Size it like a hero, frame it like nothing. */
article.fern-changelog-content .fern-prose video.tm-changelog-motion {
  width: 100%;
  height: auto;
  margin: 0.5rem 0 2rem;
}

/* Changelog tag filter, sorted A-Z. custom-changelog.js sets `order` on each
   item instead of moving it, so the list has to lay out as a flex column for
   that order to apply. */
[data-tm-sorted] {
  display: flex;
  flex-direction: column;
}

/* ========================================
   Changelog index (/changelog)
   ======================================== */

/* Drop the icon Fern puts on the changelog's sidebar link. Fern hardcodes a
   Lucide "history" glyph here, so it is not something the `icon:` key in
   fern/docs.yml can turn off — removing that key just falls back to this
   default. No other sidebar link shows an icon, so hide it for consistency. */
a.fern-sidebar-link > svg.lucide-history {
  display: none;
}

/* Align the changelog with the guide / API-reference content column. Fern lets
   this wrapper stretch across whatever space the sidebar and right rail leave
   over, so pin the same max-width and centering the other tabs get. The
   sidebar itself stays put on both /changelog and the per-post routes, so no
   offset is needed here to stand in for it. */
@media (min-width: 1024px) {

  .fern-layout-changelog {
    max-width: calc(var(--page-width, 1408px) + var(--page-padding, 32px) * 2);
    margin-inline: auto;
  }

}

/* Fern caps a post page at the content width but lets the index feed run the
   full width of the wrapper, so cap the feed too. This is what puts the index
   cards on the same left edge as the post you land on after clicking one. */
.fern-changelog-feed {
  max-width: var(--content-width, 640px);
  margin-inline: auto;
}

@media (max-width: 767px) {

  .fern-changelog-feed {
    width: auto;
  }

}

/* Each month is a full-width section: a quiet divider label, then a stack of
   entry cards below it. Replaces Fern's two-column rail-and-dots timeline,
   which has no counterpart in the design system.

   `display: contents` drops this per-day wrapper's own box, so its label and its
   cards become direct children of the timeline. A sticky element can only travel
   inside its parent's box, and Fern's wrapper covers a single day — so while the
   wrapper had a box, the month label came unstuck the moment that first day's
   cards scrolled past. Flattened, the label stays under the header for the whole
   month, until the next month's label slides up over it. Every label is the same
   size and paints an opaque band, so the one arriving hides the one it lands on
   and the handoff reads as the text swapping.
   Losing the box also loses the margins that hung off it, so the rules below put
   that spacing on the label and on the card stack instead. */
.fern-changelog-day-group {
  display: contents;
}

/* Fern makes one group per day. custom-changelog.js marks every group after the
   first in a month, and these rules are what turn the run of them into one
   section: drop the repeated divider, close the gap between one day's cards and
   the next day's to a card gap so they stack as if they shared a container, and
   keep the wider month gap above the label that opens a new month. */
.fern-changelog-day-group[data-tm-continued] > time.fern-changelog-day {
  display: none;
}

.fern-changelog-day-group[data-tm-continued] > .fern-changelog-day-entries {
  margin-top: 0.75rem;
}

.fern-changelog-day-group + .fern-changelog-day-group:not([data-tm-continued])
  > time.fern-changelog-day {
  margin-top: 2.5rem;
}

/* Month divider. Sticks flush under the site header so the label stays with
   its cards while they scroll; the opaque page-background band is what keeps
   the cards from showing through behind it. */
time.fern-changelog-day {
  display: block;
  width: 100%;
  min-width: 0;
  font-family: var(--tm-font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.4 !important;
  text-transform: none;
  color: var(--tm-fg-primary);
  background: var(--tm-bg-app);
  /* The band is exactly as wide as the cards, and each card draws its 1px ring
     and soft shadow just outside its own edge — so a card scrolling behind the
     label leaves a hairline poking out at both ends of the band. These two
     offset copies of the background cover those strips. A box shadow only
     paints outside the band's own box, so the divider line below still stops
     at the card edges. */
  box-shadow: -0.75rem 0 0 var(--tm-bg-app), 0.75rem 0 0 var(--tm-bg-app);
  padding: 1rem 0 0.5rem !important;
  border-bottom: 1px solid var(--tm-border-soft);
  margin-bottom: 1rem;
  /* Tucked 2px under the header rather than Fern's padded offset: any gap
     between the two lets a scrolling card show through above the label.
     --header-height is rounded down from the header's real height, so the
     2px absorbs that sub-pixel difference too. */
  top: calc(var(--header-height, 64px) - 2px) !important;
  /* Above the card's full-bleed link overlay (z-index 10). */
  z-index: 11;
}

.fern-changelog-day-entries {
  border-left: none !important;
  gap: 0.75rem;
  /* Fern sizes this to fill the row it used to share with the date label. Now
     that the wrapper is gone it sits in the timeline's own column, where that
     same rule would tell it to stretch down the page instead. */
  flex: 0 0 auto;
}

/* Fern's timeline dot — nothing left for it to sit on. */
.fern-changelog-card-marker {
  display: none !important;
}

/* Entry card: design-system card chrome — 8px radius on white, hairline ring
   plus a tiny lift, uniform 20px padding. */
.fern-changelog-card {
  padding: 1.25rem;
  border-radius: var(--tm-radius-md);
  background: var(--tm-bg-surface);
  box-shadow: 0 0 0 1px rgb(12 10 9 / 0.05), 0 1px 2px 0 rgb(12 10 9 / 0.04),
    0 4px 12px -2px rgb(12 10 9 / 0.05);
  transition: box-shadow 0.15s ease;
}

.fern-changelog-card:hover,
.fern-changelog-card:has(.fern-changelog-card-link:focus-visible) {
  background: var(--tm-bg-surface);
  box-shadow: 0 0 0 1px var(--teal-400), 0 1px 2px 0 rgb(12 10 9 / 0.04),
    0 4px 12px -2px rgb(12 10 9 / 0.05);
}
.fern-changelog-card:focus-visible {
  background: var(--tm-bg-surface);
  box-shadow: 0 0 0 1px var(--teal-400), 0 1px 2px 0 rgb(12 10 9 / 0.04),
    0 4px 12px -2px rgb(12 10 9 / 0.05); outline: none;
}

/* The whole card is the click target, so the title doesn't need an underline
   on top of the teal ring. */
.fern-changelog-card:hover .fern-changelog-card-link,
.fern-changelog-card:has(.fern-changelog-card-link:focus-visible) .fern-changelog-card-link {
  text-decoration: none;
}
.fern-changelog-card:focus-within .fern-changelog-card-link {
  text-decoration: none; outline: none;
}

html.dark .fern-changelog-card {
  box-shadow: 0 0 0 1px var(--tm-border-soft);
}

html.dark .fern-changelog-card:hover,
html.dark .fern-changelog-card:has(.fern-changelog-card-link:focus-visible) {
  box-shadow: 0 0 0 1px var(--teal-400);
}
html.dark .fern-changelog-card:focus-visible {
  box-shadow: 0 0 0 1px var(--teal-400); outline: none;
}

.fern-changelog-card-title {
  font-family: var(--tm-font-display);
  font-size: 1rem;
  letter-spacing: -0.005em;
  color: var(--tm-fg-primary);
}

/* Entry media as a card thumbnail. Fixed at 16:9 so cards stay even. The band
   itself is empty: the entry's own image or clip lies over it, and this colour
   holds the shape until that media has loaded. */
.fern-changelog-card[data-tm-thumb]::before {
  content: '';
  display: block;
  margin: -1.25rem -1.25rem 1rem;
  aspect-ratio: 16 / 9;
  border-radius: var(--tm-radius-md) var(--tm-radius-md) 0 0;
  border-bottom: 1px solid var(--tm-border-soft);
  background-color: #eee7e0;
}

.fern-changelog-card[data-tm-thumb] {
  position: relative;
}

/* Still entries: the entry's own image is the thumbnail, lifted out of the
   hidden copy and laid over the band. Showing the real image instead of
   repainting its URL as a background keeps the card to one download and keeps
   the alt text a screen reader reads out. */
.fern-changelog-card[data-tm-thumb] .fern-changelog-card-preview .fern-prose > p:first-of-type:has(img) {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* Prose margins would push an absolute box off the band. */
  margin: 0 !important;
}

.fern-changelog-card[data-tm-thumb] .fern-changelog-card-preview .fern-prose > p:first-of-type img {
  display: block;
  width: 100%;
  margin: 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--tm-radius-md) var(--tm-radius-md) 0 0;
}

/* Motion entries: the clip lies over the thumbnail band and fades in on hover,
   so at most one plays at a time. custom-changelog.js drives play and pause and
   clears the autoplay the post page needs. */
.fern-changelog-card[data-tm-thumb] video.tm-changelog-motion {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* Prose gives video a 2em margin, which pushes an absolute box off the band. */
  margin: 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--tm-radius-md) var(--tm-radius-md) 0 0;
  /* No border here: `aspect-ratio` sizes the border box, so a 1px border would
     shrink the painted video to 359px and let the still show through the last
     row. The card's ::after draws the hairline instead. */
  opacity: 0;
  transition: opacity 0.2s ease;
  /* The whole card is one link, so the clip must not swallow the click. */
  pointer-events: none;
}

.fern-changelog-card[data-tm-thumb]:hover video.tm-changelog-motion,
.fern-changelog-card[data-tm-thumb]:focus-within video.tm-changelog-motion {
  opacity: 1;
}
.fern-changelog-card[data-tm-thumb]:focus-within video.tm-changelog-motion {
  opacity: 1; outline: none;
}

/* No still ships with the entry: custom-changelog.js parks the clip on its
   final frame, and that parked frame is the resting thumbnail. */
.fern-changelog-card[data-tm-selfthumb] video.tm-changelog-motion {
  opacity: 1;
}

/* The band's bottom hairline, drawn as its own layer. It cannot live on the
   clip: a video is a replaced element, so its frame paints over any inset
   shadow, and a real border would eat a row of the picture. Same geometry as
   the band, so the line lands on the same pixel whether the clip shows or not. */
.fern-changelog-card[data-tm-thumb]::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid var(--tm-border-soft);
  pointer-events: none;
}

/* Less motion means the still stands, hover or not. A selfthumb card has no
   still to fall back to, so its parked frame stays; JS never plays it. */
@media (prefers-reduced-motion: reduce) {

  .fern-changelog-card[data-tm-thumb]:not([data-tm-selfthumb]):hover video.tm-changelog-motion,
  .fern-changelog-card[data-tm-thumb]:not([data-tm-selfthumb]):focus-within video.tm-changelog-motion {
    opacity: 0;
  }
.fern-changelog-card[data-tm-thumb]:not([data-tm-selfthumb]):focus-within video.tm-changelog-motion {
    opacity: 0; outline: none;
}

}

/* Preview copy: two clamped lines ending in an ellipsis, instead of Fern's
   fade-to-transparent mask (the design system has no gradients). Only one
   paragraph shows, so the text block under every card is the same height. */
.fern-changelog-card-preview {
  max-height: none;
  -webkit-mask-image: none;
  mask-image: none;
  /* Fern positions and clips this box to fade the preview out. The fade is
     already off above, and the clip overlay has to reach the thumbnail band
     above this box, so stop being its containing block and stop clipping. */
  position: static;
  overflow: visible;
}

.fern-changelog-card-preview .fern-prose > p,
.fern-changelog-card-preview video {
  display: none;
}

/* The lead copy: whichever paragraph is not the entry's opening image or clip.
   The second selector only takes the paragraph after an *opening* one, or an
   entry that led with copy and put an image further down would show two. */
.fern-changelog-card-preview .fern-prose > p:first-of-type:not(:has(img, video)),
.fern-changelog-card-preview .fern-prose > p:first-of-type:has(img, video) + p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0 !important;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--tm-fg-muted) !important;
}

/* Tags: design-system badge — 6px radius, stone tint, no border. */
.fern-changelog-card-tags .fern-docs-badge,
.fern-changelog-tags .fern-docs-badge {
  font-family: var(--tm-font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  padding: 0.125rem 0.375rem;
  border: none;
  border-radius: var(--tm-radius-sm);
  background: rgb(87 83 78 / 0.1);
  color: var(--stone-700);
}

html.dark .fern-changelog-card-tags .fern-docs-badge,
html.dark .fern-changelog-tags .fern-docs-badge {
  background: rgb(255 255 255 / 0.08);
  color: var(--stone-300);
}