/*fern-site-stylesheet*/@font-face {
    font-family: 'Booton';
    src: url('/docs/_fern-files/glide.docs.buildwithfern.com/d5998053efb7ec4cacdc4e5868f7a1a7648ac65c1716083d11877397269c59dc/fonts/BootonVF.ttf') format('ttf');
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Booton';
    src: url('/docs/_fern-files/glide.docs.buildwithfern.com/d5998053efb7ec4cacdc4e5868f7a1a7648ac65c1716083d11877397269c59dc/fonts/BootonVF.ttf') format('ttf');
    font-weight: 300 800;
    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: 20px;
  --font-body: 'Booton', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'Booton', 'Booton', 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: #f1f5f5;
  --accent-2: #e8f2f2;
  --accent-3: #d1efef;
  --accent-4: #bae9ea;
  --accent-5: #a3e0e3;
  --accent-6: #88d5d8;
  --accent-7: #63c5c9;
  --accent-8: #00b1b7;
  --accent-9: #0cbdc3;
  --accent-10: #00b1b7;
  --accent-11: #007479;
  --accent-12: #003e41;

  --accent-a1: #1daf8b07;
  --accent-a2: #07a79910;
  --accent-a3: #05c5bf28;
  --accent-a4: #01bfc03f;
  --accent-a5: #01b4bb57;
  --accent-a6: #01abb273;
  --accent-a7: #00a4aa99;
  --accent-a8: #00b1b7;
  --accent-a9: #00bac0f3;
  --accent-a10: #00b1b7;
  --accent-a11: #007479;
  --accent-a12: #003e41;

  --accent-contrast: #fff;
  --accent-surface: #e5f1f0cc;
  --accent-indicator: #0cbdc3;
  --accent-track: #0cbdc3;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(96.7% 0.0045 198.9);
      --accent-2: oklch(95.3% 0.0105 198.9);
      --accent-3: oklch(92.9% 0.0311 198.9);
      --accent-4: oklch(90.1% 0.0482 198.9);
      --accent-5: oklch(86.7% 0.0625 198.9);
      --accent-6: oklch(82.3% 0.0759 198.9);
      --accent-7: oklch(76.6% 0.0925 198.9);
      --accent-8: oklch(68.7% 0.1221 198.9);
      --accent-9: oklch(72.6% 0.1221 198.9);
      --accent-10: oklch(68.9% 0.1221 198.9);
      --accent-11: oklch(50% 0.1221 198.9);
      --accent-12: oklch(33% 0.0592 198.9);

      --accent-a1: color(display-p3 0.0353 0.5961 0.4157 / 0.021);
      --accent-a2: color(display-p3 0.0078 0.6 0.5294 / 0.053);
      --accent-a3: color(display-p3 0.0039 0.698 0.702 / 0.13);
      --accent-a4: color(display-p3 0.0039 0.6902 0.6941 / 0.211);
      --accent-a5: color(display-p3 0.0039 0.6314 0.6706 / 0.288);
      --accent-a6: color(display-p3 0.0039 0.6 0.6314 / 0.381);
      --accent-a7: color(display-p3 0.0039 0.5608 0.5961 / 0.498);
      --accent-a8: color(display-p3 0 0.549 0.5882 / 0.681);
      --accent-a9: color(display-p3 0 0.6039 0.6431 / 0.652);
      --accent-a10: color(display-p3 0 0.549 0.5882 / 0.681);
      --accent-a11: color(display-p3 0 0.3176 0.349 / 0.802);
      --accent-a12: color(display-p3 0 0.1647 0.1765 / 0.907);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9059 0.9412 0.9412 / 0.8);
      --accent-indicator: oklch(72.6% 0.1221 198.9);
      --accent-track: oklch(72.6% 0.1221 198.9);
    }
  }
}


.light, :root {
  --grayscale-1: #fcfcfc;
  --grayscale-2: #f9f9f9;
  --grayscale-3: #f0f0f0;
  --grayscale-4: #e8e8e8;
  --grayscale-5: #e0e0e0;
  --grayscale-6: #d9d9d9;
  --grayscale-7: #cecece;
  --grayscale-8: #bbbbbb;
  --grayscale-9: #8d8d8d;
  --grayscale-10: #838383;
  --grayscale-11: #646464;
  --grayscale-12: #202020;

  --grayscale-a1: #00000003;
  --grayscale-a2: #00000006;
  --grayscale-a3: #0000000f;
  --grayscale-a4: #00000017;
  --grayscale-a5: #0000001f;
  --grayscale-a6: #00000026;
  --grayscale-a7: #00000031;
  --grayscale-a8: #00000044;
  --grayscale-a9: #00000072;
  --grayscale-a10: #0000007c;
  --grayscale-a11: #0000009b;
  --grayscale-a12: #000000df;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.988 0.988 0.988);
      --grayscale-2: color(display-p3 0.975 0.975 0.975);
      --grayscale-3: color(display-p3 0.939 0.939 0.939);
      --grayscale-4: color(display-p3 0.908 0.908 0.908);
      --grayscale-5: color(display-p3 0.88 0.88 0.88);
      --grayscale-6: color(display-p3 0.849 0.849 0.849);
      --grayscale-7: color(display-p3 0.807 0.807 0.807);
      --grayscale-8: color(display-p3 0.732 0.732 0.732);
      --grayscale-9: color(display-p3 0.553 0.553 0.553);
      --grayscale-10: color(display-p3 0.512 0.512 0.512);
      --grayscale-11: color(display-p3 0.392 0.392 0.392);
      --grayscale-12: color(display-p3 0.125 0.125 0.125);

      --grayscale-a1: #00000003;
      --grayscale-a2: #00000006;
      --grayscale-a3: #0000000f;
      --grayscale-a4: #00000017;
      --grayscale-a5: #0000001f;
      --grayscale-a6: #00000026;
      --grayscale-a7: #00000031;
      --grayscale-a8: #00000044;
      --grayscale-a9: #00000072;
      --grayscale-a10: #0000007c;
      --grayscale-a11: #0000009b;
      --grayscale-a12: #000000df;

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


.dark {
  --accent-1: #202c2c;
  --accent-2: #233031;
  --accent-3: #1c4142;
  --accent-4: #0c4d4f;
  --accent-5: #0d585b;
  --accent-6: #166568;
  --accent-7: #1c7679;
  --accent-8: #168c90;
  --accent-9: #0cbdc3;
  --accent-10: #00b1b7;
  --accent-11: #3cd4da;
  --accent-12: #adeef1;

  --accent-a1: #00e90004;
  --accent-a2: #00f03109;
  --accent-a3: #00fdc71d;
  --accent-a4: #00ffe32b;
  --accent-a5: #00fced39;
  --accent-a6: #00fef448;
  --accent-a7: #0bfff95c;
  --accent-a8: #04ffff76;
  --accent-a9: #02faffb5;
  --accent-a10: #00faffa6;
  --accent-a11: #40f9fed2;
  --accent-a12: #b6fcffee;

  --accent-contrast: #fff;
  --accent-surface: #21373180;
  --accent-indicator: #0cbdc3;
  --accent-track: #0cbdc3;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(28.1% 0.0156 198.9);
      --accent-2: oklch(29.8% 0.0181 198.9);
      --accent-3: oklch(34.7% 0.0421 198.9);
      --accent-4: oklch(38.2% 0.0604 198.9);
      --accent-5: oklch(42% 0.0672 198.9);
      --accent-6: oklch(46.3% 0.0719 198.9);
      --accent-7: oklch(51.7% 0.0802 198.9);
      --accent-8: oklch(58.3% 0.0947 198.9);
      --accent-9: oklch(72.6% 0.1221 198.9);
      --accent-10: oklch(68.9% 0.1221 198.9);
      --accent-11: oklch(79.5% 0.1221 198.9);
      --accent-12: oklch(90.7% 0.0651 198.9);

      --accent-a1: color(display-p3 0 0.949 0 / 0.015);
      --accent-a2: color(display-p3 0.0353 0.9961 0.3098 / 0.033);
      --accent-a3: color(display-p3 0.0824 0.9961 0.8078 / 0.108);
      --accent-a4: color(display-p3 0.0353 1 0.9059 / 0.164);
      --accent-a5: color(display-p3 0.1529 1 0.9569 / 0.215);
      --accent-a6: color(display-p3 0.2863 1 0.9843 / 0.272);
      --accent-a7: color(display-p3 0.3686 0.9961 0.9961 / 0.351);
      --accent-a8: color(display-p3 0.3765 0.9922 1 / 0.459);
      --accent-a9: color(display-p3 0.4157 0.9725 1 / 0.701);
      --accent-a10: color(display-p3 0.3961 0.9725 1 / 0.643);
      --accent-a11: color(display-p3 0.4941 0.9725 1 / 0.812);
      --accent-a12: color(display-p3 0.7765 0.9843 1 / 0.928);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.1373 0.2118 0.1882 / 0.5);
      --accent-indicator: oklch(72.6% 0.1221 198.9);
      --accent-track: oklch(72.6% 0.1221 198.9);
    }
  }
}


.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(12, 189, 195, 1);
  --background: rgba(247, 247, 248, 1);
  --border: rgba(229, 231, 235, 1);
  --sidebar-background: initial;
  --header-background: rgba(247, 247, 248, 1);
  --card-background: initial;
  --theme-color: #f7f7f8;
}

.dark {
  color-scheme: dark;
  --accent: rgba(12, 189, 195, 1);
  --background: rgba(38, 41, 49, 1);
  --border: rgba(58, 61, 69, 1);
  --sidebar-background: initial;
  --header-background: rgba(38, 41, 49, 1);
  --card-background: initial;
  --theme-color: #262931;
}

/*
 * Restyle Fern's built-in navbar `navbar-links` buttons to match
 * `GlideButton` (vendored from `glideapps-marketing-module`).
 *
 * Rationale: Fern's `navbar-links` config in `docs.yml` is rendered by
 * Fern's own header component, not by user-supplied React. Replacing the
 * whole header (`header:` in docs.yml) would force us to re-implement the
 * logo, search, theme toggle, and sidebar collapse. Instead we override
 * Fern's stable button classnames with the GlideButton palette.
 *
 * Selectors are scoped to `.fern-header-navbar-links` so we don't bleed
 * into other Fern button surfaces (page actions, API playground, etc.).
 *
 * The header runs quiet on both products: the homepage link is bare text
 * ("Glide Classic Homepage" on Classic, "Glide Homepage" on GlideOS — see
 * scripts/product-theme.js) and "Open Glide" is a neutral secondary rather
 * than an aqua CTA, so nothing in the chrome competes with the page content.
 *
 * Hex values are pulled from `docs-contentful/src/app/styles/globals.css`,
 * matched against the BRAND const in `fern/components/GlideButton.tsx`.
 * Update both at the same time when the brand palette changes.
 */

/* All navbar buttons: shape + typography */
.fern-header-navbar-links .fern-button {
  height: 40px;
  padding: 0 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 120ms ease,
    color 120ms ease,
    border-color 120ms ease;
}

/*
 * Homepage link — bare text. Fern's `minimal` type already renders without a
 * fill; these rules just set the palette and tighten the padding so it reads
 * as a link sitting next to a button, not as a third surface.
 */
.fern-header-navbar-links .fern-button.minimal {
  background: transparent;
  color: #1a1d24; /* neutrals-opaque-900 */
  padding: 0 12px;
  border: none;
}

.fern-header-navbar-links .fern-button.minimal:hover {
  background: transparent;
  color: #066266; /* aqua-light-700 */
}
.fern-header-navbar-links .fern-button.minimal:focus-visible {
  background: transparent;
  color: #066266; /* aqua-light-700 */
}

/* Open Glide — neutral secondary: grey fill, black label. */
.fern-header-navbar-links .fern-button.filled.primary {
  background: #e5e7eb; /* neutrals-200 */
  color: #000205; /* black */
  border: none;
}

.fern-header-navbar-links .fern-button.filled.primary:hover {
  background: #d6d9de;
  color: #000205;
}
.fern-header-navbar-links .fern-button.filled.primary:focus-visible {
  background: #d6d9de;
  color: #000205;
}

/*
 * Dark mode. Fern toggles themes by setting `.dark` on <html> (same hook
 * product-theme.css and callouts.css use). It does NOT set `data-theme`,
 * and an OS-level `prefers-color-scheme` media query fires independently
 * of the site toggle — with the Mac in dark mode and the site in light
 * mode it painted the minimal link white on the light header (invisible).
 *
 * The secondary keeps its grey-fill read but inverts the label: black on a
 * dark grey is unreadable, so the fill is the dark neutral and the label the
 * light one.
 */
html.dark .fern-header-navbar-links .fern-button.minimal {
  color: #f7f7f8; /* neutrals-opaque-50 */
}

html.dark .fern-header-navbar-links .fern-button.minimal:hover {
  color: #96fbff; /* aqua-dark-500 */
}
html.dark .fern-header-navbar-links .fern-button.minimal:focus-visible {
  color: #96fbff; /* aqua-dark-500 */
}

html.dark .fern-header-navbar-links .fern-button.filled.primary {
  background: #2e313a;
  color: #f7f7f8; /* neutrals-opaque-50 */
}

html.dark .fern-header-navbar-links .fern-button.filled.primary:hover {
  background: #3a3d45;
  color: #f7f7f8;
}
html.dark .fern-header-navbar-links .fern-button.filled.primary:focus-visible {
  background: #3a3d45;
  color: #f7f7f8;
}

/*
 * Numbered-list "chip" markers for ordered lists in the docs body.
 *
 * Mirrors the style used by the previous Contentful-driven docs site
 * (docs-contentful/src/components/Page/content/RichTextBlock/styles.module.css):
 * each list item's number renders as a 28x28 rounded-square chip with a light
 * neutral background and a subtle border, instead of the default browser
 * decimal marker.
 *
 * Scope: only top-level ordered lists inside Fern's article body. Nested
 * ordered lists (an OL inside an LI) keep Fern's built-in lower-roman markers
 * — chip nesting reads worse than letters at depth.
 *
 * Color tokens come from Fern's theme variables so the chip adapts to dark
 * mode automatically.
 */

article ol.list-decimal:not(li ol) {
  counter-reset: item;
  list-style: none;
  padding-left: 0;
}

article ol.list-decimal:not(li ol) > li {
  /*
   * Position the chip absolutely instead of using `display: flex` on the LI.
   *
   * Why: Fern's MDX renderer emits list items with inline content as direct
   * children of <li> (text nodes, <strong>, links, etc.) — there's no <p>
   * wrapper. With `display: flex` each of those inline children becomes its
   * own flex column, breaking long sentences apart at every <strong>.
   * Absolute positioning the ::before keeps the LI as a normal block so
   * inline content flows the way Markdown expects.
   */
  position: relative;
  padding-left: 2.625rem; /* 28px chip + 14px gap */
  margin: 0.5rem 0;
  min-height: 28px;
}

article ol.list-decimal:not(li ol) > li::before {
  content: counter(item);
  counter-increment: item;
  position: absolute;
  left: 0;
  /* Sit the chip aligned with the first line of text rather than the LI's
     box top — this matters when an item contains a heading-sized first line
     or a multi-line paragraph. */
  top: 0.125em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--grayscale-a4);
  background: var(--grayscale-3);
  color: var(--grayscale-12);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
}

.fern-breadcrumb > .fern-breadcrumb-item:first-of-type {
  pointer-events: none;
  color: inherit;
  text-decoration: none;
  cursor: default;
}

/*
 * Landing page spot-icon card grid.
 *
 * Scoped under `.landing-spot-grid` so it does not affect the default Fern
 * `<CardGroup>` chrome used throughout the rest of the docs. Color tokens
 * mirror the Figma annotations on the landing-page mock:
 *   - card surface  -> colors/neutral/warm/Warm100
 *   - card title    -> colors/neutral/Neutral950
 *   - card subtitle -> Text/text-tertiary
 */

.landing-spot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 32px 0 0;
}

@media (max-width: 720px) {

  .landing-spot-grid {
    grid-template-columns: 1fr;
  }

}

/*
 * Selectors below are scoped under `.landing-spot-grid` to (a) keep them
 * from touching unrelated cards across the docs and (b) bump specificity
 * past Fern's MDX defaults — Fern adds `fern-mdx-link` to anchors and a
 * Tailwind `mx-auto` class onto images, both of which would otherwise
 * fight the spec (mx-auto in particular horizontally centers the icon).
 */

.landing-spot-grid .landing-spot-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* defeat any inherited stretch/center */
  gap: 34px; /* icon -> copy block */
  padding: 34px 24px 24px 24px; /* extra top so the icon has breathing room */
  border-radius: 18px;
  background: #efece4; /* warm-100 (light) */
  text-decoration: none;
  transition:
    transform 160ms ease,
    background-color 160ms ease;
}

.landing-spot-grid .landing-spot-card:hover {
  background: #e8e4d9; /* warm-200 (light) */
  transform: translateY(-2px);
}
.landing-spot-grid .landing-spot-card:focus-visible {
  background: #e8e4d9; /* warm-200 (light) */
  transform: translateY(-2px);
}

/*
 * Fern's `.fern-mdx-link` adds a small external-link SVG arrow to anchors
 * with `target="_blank"`. On the landing cards that arrow appears as a
 * sibling of the icon and copy block, so the flex `gap` also produces
 * unwanted dead-space below the subtitle. Hide it on the spot cards —
 * the affordance of "this card opens an external site" is already implied
 * by the destination.
 */
.landing-spot-grid .landing-spot-card svg.external-link-icon {
  display: none;
}

.landing-spot-grid .landing-spot-card__icon {
  /*
   * The icon is a Next.js <Image> wrapper that Fern emits with intrinsic
   * width/height="325" attrs and a Tailwind `mx-auto` class. We need to
   * force the display size to 84x84 and beat `margin-inline: auto` so the
   * icon left-aligns in the flex column instead of centering. `!important`
   * is used as a guardrail — Next.js / Fern occasionally adjust their
   * preset CSS, and silent regressions on the landing page are not worth
   * the risk.
   */
  width: 84px !important;
  height: 84px !important;
  max-width: 84px !important;
  display: block;
  object-fit: contain;
  margin: 0 !important;
  margin-inline: 0 !important;
}

.landing-spot-grid .landing-spot-card__copy {
  display: flex;
  flex-direction: column;
  gap: 4px; /* title -> subtitle */
}

/* Both title and subtitle are text-lg (18px / 28px). */
.landing-spot-grid .landing-spot-card__title {
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0a0a0a; /* Neutral950 */
  margin: 0;
}

.landing-spot-grid .landing-spot-card__subtitle {
  font-size: 18px;
  line-height: 28px;
  color: #6b7280; /* text-tertiary */
  margin: 0;
}

/* Dark-mode card surface uses a warm dark to keep the spot art legible. */
:root[data-theme="dark"] .landing-spot-card,
.dark .landing-spot-card {
  background: #1f1c17;
}

:root[data-theme="dark"] .landing-spot-card:hover,
.dark .landing-spot-card:hover {
  background: #2a2620;
}
:root[data-theme="dark"] .landing-spot-card:focus-visible,
.dark .landing-spot-card:focus-visible {
  background: #2a2620;
}

:root[data-theme="dark"] .landing-spot-card__title,
.dark .landing-spot-card__title {
  color: #fafafa;
}

:root[data-theme="dark"] .landing-spot-card__subtitle,
.dark .landing-spot-card__subtitle {
  color: #a1a1aa;
}

/*
 * Per-product theming. The global palette in docs.yml is Glide Classic (light +
 * dark). GlideOS reuses the same light/dark machinery but swaps its palette —
 * and a little type weight — via the rules below, scoped to
 * html[data-product="os"] (set by product-theme.js). Both products support the
 * appearance toggle.
 *
 * GlideOS is the clean base surface — pure white in light, neutrals-opaque-900
 * in dark. Classic sits one step in from each (#F7F7F8 / #262931), so the
 * first paint on /docs/os/* barely shifts.
 */

/* GlideOS — light (header matches the page background) */
html[data-product="os"].light {
  --background: #ffffff;
  --header-background: #ffffff;
  --border: #e5e7eb;
  --accent: #71eaee;
}

/* GlideOS — dark */
html[data-product="os"].dark {
  --background: #1a1d24;
  --header-background: #1a1d24;
  --border: #2e313a;
  --accent: #71eaee;
}

/*
 * GlideOS page titles sit at 600 rather than Fern's default 800. Booton is a
 * variable font (300–800, see docs.yml typography), so this is a real weight,
 * not a synthesized one. Scoped to the page title only — in-page headings keep
 * the default weight, and Classic is untouched.
 */
html[data-product="os"] .fern-page-heading {
  font-weight: 600;
}

/*
 * The dark-mode text color for the minimal navbar link now lives in
 * glide-buttons.css alongside its solid-fill styling — a rule here would
 * out-rank it (ID specificity) and paint light text on the light fill.
 */

/*
 * Header chrome — the product switcher, the product dropdown, and the search
 * field. Fern renders the desktop switcher as bare text + chevron and the
 * search bar with `bg-transparent`, so both read as loose text rather than
 * controls; these rules give them a container.
 *
 * The switcher, the dropdown, and the logo spacing are unscoped: the header is
 * shared, and the two products should present the same controls.
 *
 * Two rules stay scoped to html[data-product="os"] (set by product-theme.js,
 * the same hook the rest of the OS theme work uses): the single-row header,
 * which follows from GlideOS having no tabs, and the search field's neutral-50
 * fill, which would be invisible on Classic's #F7F7F8 header anyway.
 */

/*
 * Product dropdown: no icons. docs.yml no longer gives either product an
 * `icon:`, but Fern falls back to a generic `</>` glyph in a bordered box —
 * the same one for both entries, which is worse than none. Hide the icon slot
 * in the dropdown itself and in the mobile trigger that mirrors it.
 *
 * `.fern-dropdown` is Fern's shared menu surface; the product switcher is
 * currently the only selection-item dropdown in this site (no version or
 * language selectors), so an unscoped rule can't reach anything else. Revisit
 * if one of those is ever added.
 */
.fern-dropdown .fern-selection-item-icon,
.product-dropdown-trigger .fern-selection-item-icon {
  display: none;
}

/*
 * Logo → product switcher spacing. Fern packs them at `gap-2` (8px), which
 * reads as one crowded cluster; 16px lets the wordmark stand on its own.
 * Unscoped — the header is shared, and the spacing isn't product-specific.
 */
.fern-header-logo-container > div {
  column-gap: 16px;
}

/*
 * Collapse the header to a single row on GlideOS.
 *
 * `tabs-placement: header` is a global docs.yml setting, so Fern sizes
 * --header-height for the tallest product: 108px = the 64px bar + a 44px tab
 * row. GlideOS declares no tabs (see products/glide-os.yml), so its
 * .fern-header-tabs renders empty and that 44px became a gap between the header
 * and the content. Point --header-height at --header-height-real, which Fern
 * already emits alongside it. `:root` is one pseudo-class, so the attribute
 * selector here out-ranks it.
 */
html[data-product="os"] {
  --header-height: var(--header-height-real);
}

/*
 * Product switcher — unscoped, so Classic and GlideOS present the same control.
 * Two triggers share `.product-dropdown-trigger`: the desktop one (text +
 * chevron) and a mobile `.fern-selection-item` card that Fern already draws
 * borders for. `:not(.fern-selection-item)` targets desktop only.
 */
.fern-product-selector .product-dropdown-trigger:not(.fern-selection-item) {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  padding: 0 10px;
  gap: 6px;
  transition:
    border-color 120ms ease,
    background-color 120ms ease;
}

/*
 * Switcher label sits at the navbar buttons' 14px (see glide-buttons.css) so
 * the header's three text elements read at one size.
 */
.fern-product-selector .product-item-title {
  font-size: 14px;
}

.fern-product-selector:hover
  .product-dropdown-trigger:not(.fern-selection-item) {
  border-color: rgba(0, 0, 0, 0.16);
  background: rgba(0, 0, 0, 0.03);
}
.fern-product-selector:focus-within .product-dropdown-trigger:not(.fern-selection-item) {
  border-color: rgba(0, 0, 0, 0.16);
  background: rgba(0, 0, 0, 0.03);
}

html.dark
  .fern-product-selector
  .product-dropdown-trigger:not(.fern-selection-item) {
  border-color: rgba(255, 255, 255, 0.12);
}

html.dark
  .fern-product-selector:hover
  .product-dropdown-trigger:not(.fern-selection-item) {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
}
html.dark .fern-product-selector:focus-within .product-dropdown-trigger:not(.fern-selection-item) {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
}

/*
 * Search field. Fern ships `.bg-transparent` (a single class) on the button, so
 * the two-class-plus-attribute selector here wins on specificity without
 * !important.
 */
html[data-product="os"] .fern-header-search-bar {
  background: #f7f7f8; /* neutrals-opaque-50 */
}

html[data-product="os"] .fern-header-search-bar:hover {
  background: #f0f0f1;
}
html[data-product="os"] .fern-header-search-bar:focus-visible {
  background: #f0f0f1;
}

html.dark[data-product="os"] .fern-header-search-bar {
  background: rgba(255, 255, 255, 0.05);
}

html.dark[data-product="os"] .fern-header-search-bar:hover {
  background: rgba(255, 255, 255, 0.08);
}
html.dark[data-product="os"] .fern-header-search-bar:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

/* GlideOS callout palette.
 *
 * Restyles Fern's built-in <Callout> per intent, scoped to the GlideOS
 * product only (html[data-product="os"] is set by product-theme.js on
 * /docs/os/... routes). Classic docs match html[data-product="glide"]
 * and keep Fern's default callout styling.
 *
 * Palette provided by Design (2026-07-10). Each rule sets:
 *   background: intent 100 (light) / 800 (dark)
 *   border:     intent 300 (light) / 700 (dark)
 *   color:      intent 600/700 (light) / 300/400 (dark)
 * `check` intent uses a quieter transparent outline treatment.
 */

/* ---------- Light mode ---------- */

html[data-product="os"] .fern-callout[data-intent="info"] {
  background-color: #f1f1fd;
  border-color: #a6a8f9;
  color: #3b3e9e;
} /* blue 100/300/600 */
html[data-product="os"] .fern-callout[data-intent="warning"] {
  background-color: #fcf4d4;
  border-color: #f7da62;
  color: #7b4a00;
} /* yellow 100/300/700 */
html[data-product="os"] .fern-callout[data-intent="success"] {
  background-color: #d7faeb;
  border-color: #80e1b5;
  color: #00824c;
} /* green 100/300/600 */
html[data-product="os"] .fern-callout[data-intent="error"] {
  background-color: #ffdee9;
  border-color: #ff7b96;
  color: #a9183a;
} /* red 100/300/600 */
html[data-product="os"] .fern-callout[data-intent="note"] {
  background-color: #e4feff;
  border-color: #a8f2f5;
  color: #066266;
} /* aqua 100/300/700 */
html[data-product="os"] .fern-callout[data-intent="tip"] {
  background-color: #def7f3;
  border-color: #62aea0;
  color: #176355;
} /* pine 100/300/500 */
html[data-product="os"] .fern-callout[data-intent="check"] {
  background-color: transparent;
  border-color: #80e1b5;
  color: #00824c;
} /* quiet outline */

/* ---------- Dark mode ---------- */

html.dark[data-product="os"] .fern-callout[data-intent="info"] {
  background-color: #232450;
  border-color: #34366a;
  color: #a6a8f9;
} /* blue 800/700/300 */
html.dark[data-product="os"] .fern-callout[data-intent="warning"] {
  background-color: #2f1c00;
  border-color: #7b4a00;
  color: #f7da62;
} /* yellow 800/700/300 */
html.dark[data-product="os"] .fern-callout[data-intent="success"] {
  background-color: #002f11;
  border-color: #00561e;
  color: #80e1b5;
} /* green 800/700/300 */
html.dark[data-product="os"] .fern-callout[data-intent="error"] {
  background-color: #2f0800;
  border-color: #6b0017;
  color: #ff7b96;
} /* red 800/700/300 */
html.dark[data-product="os"] .fern-callout[data-intent="note"] {
  background-color: #034244;
  border-color: #066266;
  color: #71eaee;
} /* aqua 800/700/400 */
html.dark[data-product="os"] .fern-callout[data-intent="tip"] {
  background-color: #002921;
  border-color: #0d372f;
  color: #62aea0;
} /* pine 800/700/300 */
html.dark[data-product="os"] .fern-callout[data-intent="check"] {
  background-color: transparent;
  border-color: #00561e;
  color: #80e1b5;
} /* quiet outline */

/* Fern's <Tooltip> component: term trigger + rich-content bubble.
   Fern exposes CSS variables on the trigger but doesn't ship a text-decoration
   rule, so we declare it explicitly. Bubble is targeted via .fern-mdx-tooltip-content.
   Reference: https://buildwithfern.com/learn/docs/writing-content/components/tooltips#custom-styling
   Scoped to GlideOS (html[data-product="os"] set by product-theme.js). */

/* ---------- Term — light ---------- */
html[data-product="os"] .fern-mdx-tooltip-trigger {
  --tooltip-underline-color: #0cbdc3;
  --tooltip-underline-hover-color: #0cbdc3;

  text-decoration: underline dotted var(--tooltip-underline-color);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  border-radius: 3px;
  cursor: help;
  transition: background 120ms ease;
}
html[data-product="os"] .fern-mdx-tooltip-trigger:hover {
  background: rgba(12, 189, 195, 0.12);
}
html[data-product="os"] .fern-mdx-tooltip-trigger:focus-visible {
  background: rgba(12, 189, 195, 0.12);
}

/* ---------- Term — dark ---------- */
html.dark[data-product="os"] .fern-mdx-tooltip-trigger {
  --tooltip-underline-color: #71eaee;
  --tooltip-underline-hover-color: #71eaee;
}
html.dark[data-product="os"] .fern-mdx-tooltip-trigger:hover {
  background: rgba(150, 251, 255, 0.35);
}
html.dark[data-product="os"] .fern-mdx-tooltip-trigger:focus-visible {
  background: rgba(150, 251, 255, 0.35);
}

/* ---------- Bubble — light (inverse dark surface) ---------- */
html[data-product="os"] .fern-mdx-tooltip-content {
  background: #1a1d24;
  color: #f7f7f8;
  border-radius: 8px;
  padding: 10px 14px;
  max-width: 260px;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

/* ---------- Bubble — dark (inverse light surface) ---------- */
html.dark[data-product="os"] .fern-mdx-tooltip-content {
  background: #f7f7f8;
  color: #1a1d24;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.55);
}

/*
 * Pin the GlideOS sidebar "Changelog" link to the bottom of the nav.
 *
 * It's the one link that leaves the docs (it points at the dotcom changelog),
 * so it sits apart from the page list rather than trailing it. Everything else
 * about it — type, color, hover, the external-link icon — is Fern's default
 * sidebar-link styling; it deliberately carries no fill or border of its own.
 *
 * Fern gives sidebar `link:` items no distinguishing class (just
 * `.fern-sidebar-link` plus the href), so both rules target it by destination.
 *
 * Mechanics: Fern's scroll viewport is a flex column whose inner wrapper is
 * pinned to `display: block !important` inside an `@layer` (Radix's table-sizing
 * hack), and a layered `!important` can't be overridden from an unlayered
 * sheet. So instead of flexing that wrapper, the top-level `ul` takes
 * `height: 100%` — resolvable because the wrapper's height is definite from
 * flex layout — and the flex column is built from there down.
 *
 * Desktop only: below `lg` the sidebar is a drawer that also holds the
 * navbar-links and theme controls, where stretching the list adds nothing.
 */
@media (min-width: 1024px) {

  html[data-product="os"]
    #fern-sidebar-scroll-area
    > div
    > ul.fern-sidebar-group {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  html[data-product="os"]
    #fern-sidebar-scroll-area
    > div
    > ul.fern-sidebar-group
    > li,
  html[data-product="os"]
    #fern-sidebar-scroll-area
    > div
    > ul.fern-sidebar-group
    > li
    > ul.fern-sidebar-group {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  html[data-product="os"]
    #fern-sidebar-scroll-area
    li:has(> a.fern-sidebar-link[href$="glideapps.com/changelog"]) {
    margin-top: auto;
  }

}

/* Inline icon wrapper for lucide SVGs embedded in docs prose.
 *
 * Wrap each icon like:
 *   <span className="doc-icon"><svg …>…</svg></span>
 *
 * The wrapper sits inline with surrounding text; the SVG scales with font size
 * and inherits the text color (lucide icons already use stroke="currentColor").
 * Adjust size site-wide by changing the width/height on `.doc-icon svg`.
 *
 * Scoped to the GlideOS product only (html[data-product="os"] is set by
 * product-theme.js); .doc-icon markup is used on GlideOS pages.
 */

html[data-product="os"] .doc-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: -0.15em;
  line-height: 1;
}

html[data-product="os"] .doc-icon svg {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
}

/* GlideOS docs — <OSframe> styles.
   Strong neutral mat, soft shadow on the media, caption inside the mat.
   Light/dark keyed off Fern's `.dark` class on <html>.
   Design tokens picked to work against product-theme surfaces:
     light page bg #FFFFFF → mat #F2F2F3
     dark  page bg #1A1D24 → mat #23262E
   On white the mat is a soft tray, not a slab: the media's own shadow + ring
   is what separates the screenshot from it.
*/

.osframe {
  margin: 1.25rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: #f2f2f3;
  padding: 28px 24px 20px;
}
.dark .osframe {
  border-color: rgba(255, 255, 255, 0.14);
  background: #23262e;
}

.osframe-media {
  display: inline-block;
  line-height: 0;
  max-width: 100%;
}
.osframe-media img,
.osframe-media video {
  display: block;
  max-width: 100%;
  border-radius: 12px; /* match the mat's radius */
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.12),
    0 2px 4px -2px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.08);
}
.dark .osframe-media img,
.dark .osframe-media video {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.35),
    0 2px 4px -2px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Theme-swapped media: give an <OSframe> both a `.osframe-light` and a
   `.osframe-dark` <img>; only the one matching the active theme shows.
   Class-qualified so these beat the base `.osframe-media img` display rule. */
.osframe-media img.osframe-dark {
  display: none;
}
.dark .osframe-media img.osframe-light {
  display: none;
}
.dark .osframe-media img.osframe-dark {
  display: block;
}

.osframe-caption {
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
  color: #52525b;
}
.dark .osframe-caption {
  color: #c7c9d1;
}

/* ---------- Light mode ---------- */

html[data-product="os"] .fern-table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}
html[data-product="os"] .fern-table th {
  font-size: 12px;
  font-weight: 575;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: left;
  color: #6b7280;
  background: rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 10px 16px;
}
html[data-product="os"] .fern-table th:first-child {
  border-top-left-radius: 8px;
}
html[data-product="os"] .fern-table th:last-child {
  border-top-right-radius: 8px;
}
html[data-product="os"] .fern-table td {
  font-size: 14px;
  line-height: 1.55;
  color: #3f3f46;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 12px 16px;
}
html[data-product="os"] .fern-table tbody tr:last-child td {
  border-bottom: none;
}
html[data-product="os"] .fern-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}
html[data-product="os"] .fern-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}

/* Sticky variant — opaque header + hairline shadow so rows slide underneath cleanly */
html[data-product="os"] .fern-table.sticky th {
  background: #f5f5f5;
  border-bottom: none;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
} /* opaque blend over #FFFFFF */

/* ---------- Dark mode ---------- */

html.dark[data-product="os"] .fern-table {
  border-color: rgba(255, 255, 255, 0.16);
}
html.dark[data-product="os"] .fern-table th {
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.05);
  border-bottom-color: rgba(255, 255, 255, 0.16);
}
html.dark[data-product="os"] .fern-table td {
  color: #d4d5db;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
html.dark[data-product="os"] .fern-table.sticky th {
  background: #26282f;
  border-bottom: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16);
} /* opaque blend over #1A1D24 */

/* Availability pills in the sidebar / page header (rendered when a page or
 * section sets `availability:` and layout.show-nav-availability-badges is on).
 *
 * Fern renders: <span data-badge-type="availability" title="Beta"
 *   class="fern-docs-badge small blue subtle rounded-full">Beta</span>
 * The default "blue" class doesn't match the GlideOS palette, so recolor Beta
 * pills with the established aqua pairing (same tokens as callouts.css note
 * intent and tooltip.css/sidebar-changelog-button.css accents).
 *
 * Scoped to GlideOS (html[data-product="os"] set by product-theme.js); only
 * Beta pills are targeted — other availability states keep Fern defaults.
 */

html[data-product="os"]
  .fern-docs-badge[data-badge-type="availability"][title="Beta"] {
  background: #e4feff; /* aqua 100 */
  border: 1px solid #a8f2f5; /* aqua 300 */
  color: #066266; /* aqua 700 */
}

html.dark[data-product="os"]
  .fern-docs-badge[data-badge-type="availability"][title="Beta"] {
  background: rgba(150, 251, 255, 0.08);
  border-color: rgba(150, 251, 255, 0.35);
  color: #71eaee; /* GlideOS dark accent */
}

/* GlideOS docs — <McpConnect> styles.
   A copyable server URL on the same neutral mat as <OSframe>, with a
   secondary Copy button and a primary "Open in" menu. Light/dark keyed
   off Fern's `.dark` class on <html>, like frame.css. Button colors
   mirror GlideButton.tsx (aqua primary, alpha secondary) — update both
   together when the brand palette changes. */

.mcp-connect {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 1.25rem 0;
  padding: 12px 12px 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: #f2f2f3;
}
.dark .mcp-connect {
  border-color: rgba(255, 255, 255, 0.14);
  background: #23262e;
}

.mcp-connect-url {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
  background: transparent;
  border: none;
  padding: 0;
  color: #1a1d24;
}
.dark .mcp-connect-url {
  color: #f7f7f8;
}

.mcp-connect-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.mcp-connect-copy,
.mcp-connect-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 120ms ease;
}

.mcp-connect-copy {
  background: rgba(0, 2, 5, 0.04);
  color: #000205;
}
.mcp-connect-copy:hover {
  background: rgba(0, 2, 5, 0.07);
}
.mcp-connect-copy:focus-visible {
  background: rgba(0, 2, 5, 0.07);
}
.dark .mcp-connect-copy {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
.dark .mcp-connect-copy:hover {
  background: rgba(255, 255, 255, 0.3);
}
.dark .mcp-connect-copy:focus-visible {
  background: rgba(255, 255, 255, 0.3);
}

.mcp-connect-open {
  background: #71eaee;
  color: #000205;
}
.mcp-connect-open:hover {
  background: #4fe1e6;
}
.mcp-connect-open:focus-visible {
  background: #4fe1e6;
}
.dark .mcp-connect-open {
  background: #96fbff;
}
.dark .mcp-connect-open:hover {
  background: #cefafc;
}
.dark .mcp-connect-open:focus-visible {
  background: #cefafc;
}

.mcp-connect-menu-wrap {
  position: relative;
}

.mcp-connect-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  min-width: 160px;
  padding: 4px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.12),
    0 2px 4px -2px rgba(0, 0, 0, 0.12);
}
.dark .mcp-connect-menu {
  background: #1a1d24;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35);
}

.mcp-connect-menu a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
  color: #1a1d24;
  text-decoration: none;
}
.dark .mcp-connect-menu a {
  color: #f7f7f8;
}
.mcp-connect-menu a:hover {
  background: rgba(0, 2, 5, 0.04);
}
.mcp-connect-menu a:focus-visible {
  background: rgba(0, 2, 5, 0.04);
}
.dark .mcp-connect-menu a:hover {
  background: rgba(255, 255, 255, 0.1);
}
.dark .mcp-connect-menu a:focus-visible {
  background: rgba(255, 255, 255, 0.1);
}