/* @import must come before every other rule in the file, a browser drops it
   silently otherwise. All three faces are pulled here rather than through the
   theme's own font setting so the docs resolve the identical stack the main
   site does: Archivo for headings, Plus Jakarta Sans for body, JetBrains Mono
   for code and for every number, which reads as an instrument value.

   The `privacy` plugin self-hosts whatever these resolve to, so there is no
   separate download step.

   Windows-only local-dev gotcha, not a production issue: self-hosting a font
   referenced from a local CSS file makes the privacy plugin fall back to
   `os.readlink()` on a symlink it creates in its own cache first. Symlink
   creation fails silently without Developer Mode on Windows, and that failure
   is unhandled on this path, so a local build can drop this entire file from
   the output while still logging "Documentation built" as if nothing went
   wrong. Real builds run on Linux and are unaffected. Enabling Developer
   Mode, or building in Docker or WSL, sidesteps it locally. */
@import url("../external/fonts.googleapis.com/css2.53268628.css");

/* The brand tokens, carried over verbatim so a value can be compared against
   the main site's by eye rather than re-derived. Every colour has one job:
   signal (blue) carries interactive affordances and nothing else, and the
   blue-to-pink gradient stays a highlight rather than wallpaper. */
:root {
  --mf-ink-950: #000000;
  --mf-ink-900: #0a0a0d;
  --mf-ink-850: #121216;
  --mf-ink-800: #1a1a20;
  --mf-ink-700: #26262e;

  --mf-line: #1f1f27;
  --mf-line-strong: #34343f;
  /* The graph plane. Faint enough to read as a surface, not as content. */
  --mf-rule: #17171e;

  --mf-brand-blue: #4466ff;
  --mf-brand-pink: #ff44aa;
  --mf-gradient-brand: linear-gradient(135deg, #4466ff 0%, #ff44aa 100%);

  --mf-signal-200: #c7d2ff;
  --mf-signal-300: #a3b4ff;
  --mf-signal-400: #7b90ff;
  --mf-signal-500: #4466ff;
  --mf-signal-600: #3450db;
  --mf-signal-700: #263db0;

  --mf-bone: #f2f2f5;
  --mf-slate-muted: #9797a6;
  /* Lightened from #5c5c68 after an audit measured 2.99:1 against the canvas,
     short of the 4.5:1 needed for normal text. */
  --mf-slate-faint: #8c8c9e;

  --mf-ok: #2fd77e;

  --mf-radius-card: 28px;
  --mf-radius-control: 14px;

  /* Every rounded surface glows at rest, not only on hover, which is what
     keeps a panel reading as an object against the black canvas. */
  --mf-glow-rest:
    0 1px 0 0 rgba(255, 255, 255, 0.05) inset, 0 0 0 1px rgba(68, 102, 255, 0.14),
    0 12px 36px -16px rgba(68, 102, 255, 0.3);
  --mf-glow-hover:
    0 1px 0 0 rgba(255, 255, 255, 0.08) inset, 0 0 0 1px rgba(68, 102, 255, 0.5),
    0 24px 60px -16px rgba(255, 68, 170, 0.45);

  --mf-duration: 300ms;
  --mf-ease: cubic-bezier(0.16, 1, 0.3, 1);

  --md-text-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  --md-code-font: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --mf-font-display: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, sans-serif;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--mf-signal-500);
  --md-primary-fg-color--light: var(--mf-signal-400);
  --md-primary-fg-color--dark: var(--mf-signal-600);
  --md-accent-fg-color: var(--mf-signal-400);

  --md-default-bg-color: var(--mf-ink-950);
  --md-default-fg-color: var(--mf-bone);
  --md-default-fg-color--light: var(--mf-slate-muted);
  --md-default-fg-color--lighter: var(--mf-slate-faint);
  --md-default-fg-color--lightest: var(--mf-ink-700);

  --md-code-bg-color: var(--mf-ink-850);
  --md-code-fg-color: var(--mf-bone);

  --md-footer-bg-color: var(--mf-ink-900);
  --md-footer-bg-color--dark: var(--mf-ink-950);

  --md-typeset-mark-color: rgba(68, 102, 255, 0.35);
}

/* The warm off-white the main site flips to for a light section, rather than
   paper white, so light mode still reads as the same product underneath. */
[data-md-color-scheme="default"] {
  --mf-ink-950: #f7f6f2;
  --mf-ink-900: #eeebe3;
  --mf-ink-850: #e3dfd3;
  --mf-ink-800: #d6d0c2;
  --mf-ink-700: #b8b09e;

  --mf-line: #dcd6c8;
  --mf-line-strong: #c2baa8;
  --mf-rule: #dcd6c8;

  --mf-bone: #0a0a0d;
  --mf-slate-muted: #484852;
  --mf-slate-faint: #636372;

  --mf-signal-300: #3450db;
  --mf-signal-400: #263db0;

  --md-primary-fg-color: var(--mf-signal-600);
  --md-primary-fg-color--light: var(--mf-signal-500);
  --md-primary-fg-color--dark: var(--mf-signal-700);
  --md-accent-fg-color: var(--mf-signal-600);

  --md-default-bg-color: var(--mf-ink-950);
  --md-default-fg-color: var(--mf-bone);
  --md-default-fg-color--light: var(--mf-slate-muted);
  --md-default-fg-color--lighter: var(--mf-slate-faint);
  --md-default-fg-color--lightest: var(--mf-ink-700);

  --md-code-bg-color: var(--mf-ink-900);
  --md-code-fg-color: var(--mf-bone);

  --md-footer-bg-color: var(--mf-ink-900);
  --md-footer-bg-color--dark: var(--mf-ink-850);
}

/* One heading scale, so a page cannot invent its own. Tracking tightens as
   size grows, because spacing that reads correctly at body size looks loose
   at display size. Sized a step below the marketing pages: a docs heading is
   a signpost, not a hero. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: var(--mf-font-display);
  font-weight: 700;
  text-wrap: balance;
}

.md-typeset h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 1.2rem;
}

.md-typeset h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.md-typeset h3 {
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-size: 1rem;
  letter-spacing: -0.01em;
}

/* The gradient is a highlight, not wallpaper: reserved for the top-level
   heading against the dark canvas. Its pink end reads too faint on the light
   scheme's off-white to survive as a text fill there, so light mode keeps a
   solid ink heading instead. */
[data-md-color-scheme="slate"] .md-typeset h1 {
  background-image: var(--mf-gradient-brand);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

[data-md-color-scheme="default"] .md-typeset h1 {
  color: var(--mf-bone);
}

/* `background-clip: text` paints the gradient through the permalink glyph as
   well, which the theme's `opacity: 0` cannot hide, so the anchor is taken out
   of layout until it is hovered or targeted. */
[data-md-color-scheme="slate"] .md-typeset h1 .headerlink {
  display: none;
}

[data-md-color-scheme="slate"] .md-typeset h1:hover .headerlink,
[data-md-color-scheme="slate"] .md-typeset h1:target .headerlink {
  display: inline-block;
}

.md-typeset h2,
.md-typeset h3 {
  color: var(--md-default-fg-color);
}

/* The header is a hairline over a blurred canvas, not a solid blue banner:
   blue is reserved for small affordances and never fills a large surface. The
   gradient hairline under it is the same one the main site carries. */
.md-header {
  background-color: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
  position: relative;
}

.md-header::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background-image: linear-gradient(
    to right,
    transparent,
    rgba(68, 102, 255, 0.3),
    transparent
  );
}

/* Opaque rather than transparent: the tabs are not sticky, so content would
   otherwise pass visibly behind them while scrolling. */
.md-tabs {
  background-color: var(--md-default-bg-color);
  border-bottom: 1px solid var(--mf-line);
}

[data-md-color-scheme="default"] .md-header {
  background-color: rgba(247, 246, 242, 0.8);
  border-bottom-color: var(--mf-line);
}

.md-tabs__link {
  opacity: 1;
  color: var(--mf-slate-muted);
}

.md-tabs__link:hover,
.md-tabs__link--active {
  color: var(--md-default-fg-color);
}

/* The graph plane. A product priced on what can be measured at an instant
   sits on a measured surface. Masked so it fades before competing with the
   text, and `isolation` keeps the negative z-index above the page canvas
   rather than behind it. */
.md-main {
  position: relative;
  isolation: isolate;
}

.md-main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--mf-rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--mf-rule) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 25%, transparent 75%);
}

/* Surfaces round generously and glow at rest, which is what decides whether a
   panel reads as a soft object or as a box with the corners taken off. */
.md-typeset .admonition,
.md-typeset details,
.md-typeset .tabbed-set > .tabbed-content,
.md-typeset .grid.cards > :is(ul, ol) > li,
.md-typeset .grid.cards > ul > li {
  border-radius: var(--mf-radius-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-color: rgba(255, 255, 255, 0.025);
  box-shadow: var(--mf-glow-rest);
  transition:
    transform var(--mf-duration) var(--mf-ease),
    border-color var(--mf-duration) var(--mf-ease),
    box-shadow var(--mf-duration) var(--mf-ease),
    background-color var(--mf-duration) var(--mf-ease);
}

[data-md-color-scheme="default"] :is(.md-typeset .admonition, .md-typeset details, .md-typeset .grid.cards > ul > li) {
  border-color: var(--mf-line);
  background-color: rgba(255, 255, 255, 0.6);
}

/* Only cards lift. An admonition is a container, not something to click. */
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > ul > li:focus-within {
  transform: translateY(-4px);
  border-color: rgba(68, 102, 255, 0.35);
  background-color: rgba(255, 255, 255, 0.04);
  box-shadow: var(--mf-glow-hover);
}

/* Code is content rather than a surface, so it takes the control radius and
   no glow: a halo behind every snippet would read as decoration. */
.md-typeset pre > code,
.md-typeset .highlight,
.md-typeset .highlighttable,
.md-typeset code {
  border-radius: var(--mf-radius-control);
}

.md-typeset .highlight > pre > code {
  border: 1px solid var(--mf-line);
}

/* A field, deliberately not a pill: only actions are fully rounded, so shape
   alone tells a control that accepts typing from one that performs. */
.md-search__form {
  border-radius: var(--mf-radius-control);
  background-color: rgba(255, 255, 255, 0.05);
  transition:
    background-color var(--mf-duration) var(--mf-ease),
    box-shadow var(--mf-duration) var(--mf-ease);
}

.md-search__form:hover,
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background-color: rgba(255, 255, 255, 0.08);
  box-shadow: var(--mf-glow-rest);
}

.md-search__output {
  border-radius: var(--mf-radius-control);
}

/* Actions are pills. */
.md-typeset .md-button {
  border-radius: 9999px;
  border-width: 1px;
  font-weight: 600;
  transition:
    transform var(--mf-duration) var(--mf-ease),
    box-shadow var(--mf-duration) var(--mf-ease),
    background-color var(--mf-duration) var(--mf-ease);
}

.md-typeset .md-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--mf-glow-hover);
}

.md-typeset .md-button--primary {
  background-image: var(--mf-gradient-brand);
  border-color: transparent;
  color: #ffffff;
}

/* Tables carry capacity figures and plan grants, so they get the same hairline
   and rounding the main site's plan matrix uses. */
.md-typeset table:not([class]) {
  border-radius: var(--mf-radius-card);
  border: 1px solid var(--mf-line);
  overflow: hidden;
  box-shadow: none;
}

.md-typeset table:not([class]) th {
  background-color: rgba(255, 255, 255, 0.03);
  font-family: var(--mf-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Sidebar and table of contents: quiet by default, signal only where the
   reader actually is. */
.md-nav__link {
  transition: color var(--mf-duration) var(--mf-ease);
}

.md-nav__link--active,
.md-nav__link:focus,
.md-nav__link:hover {
  color: var(--mf-signal-400);
}

.md-nav__title {
  font-family: var(--mf-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.md-typeset a {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

:focus-visible {
  outline: 2px solid var(--mf-signal-400);
  outline-offset: 2px;
  border-radius: 6px;
}

::selection {
  background: var(--mf-signal-500);
  color: #ffffff;
}

/* The shared MeridFlow wordmark, used in the strip and in the footer. */
.mf-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mf-font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: -0.01em;
  color: var(--md-default-fg-color);
  text-decoration: none;
}

.mf-brand:hover {
  opacity: 0.8;
}

.mf-brand__logo {
  width: 1rem;
  height: 1rem;
  flex: none;
}

/* The site name in the header stands on its own; the only mark on the page is
   the company one in the strip above it. */
.md-header__button.md-logo {
  display: none;
}

/* The storefront strip above the header: a pill capsule of links mirroring the
   main site's nav, so crossing between the two does not feel like a handoff to
   a different company. */
.mf-strip {
  background-color: var(--mf-ink-950);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[data-md-color-scheme="default"] .mf-strip {
  border-bottom-color: var(--mf-line);
}

.mf-strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.4rem 0.8rem;
  font-size: 0.7rem;
}

.mf-strip__status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--md-code-font);
  color: var(--mf-slate-muted);
}

.mf-strip__dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--mf-ok);
  box-shadow: 0 0 8px var(--mf-ok);
  flex: none;
}

.mf-strip__nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.2rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

[data-md-color-scheme="default"] .mf-strip__nav {
  border-color: var(--mf-line);
  background-color: rgba(255, 255, 255, 0.5);
}

.mf-strip__nav a {
  display: block;
  padding: 0.25rem 0.7rem;
  border-radius: 9999px;
  color: var(--mf-slate-muted);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  transition:
    color var(--mf-duration) var(--mf-ease),
    background-color var(--mf-duration) var(--mf-ease);
}

.mf-strip__nav a:hover {
  color: var(--md-default-fg-color);
  background-color: rgba(255, 255, 255, 0.06);
}

/* Below the header's own breakpoint the strip would wrap into three rows and
   push the docs off screen, so the secondary pieces drop and the link home
   stays. */
@media screen and (max-width: 59.984375em) {
  .mf-strip__status,
  .mf-strip__nav {
    display: none;
  }
}

/*
 * The site footer.
 *
 * The same three column groups the storefront's own footer carries, so the
 * docs end on the company rather than on a bare theme credit.
 */
.mf-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background-color: var(--mf-ink-900);
}

[data-md-color-scheme="default"] .mf-footer {
  border-top-color: var(--mf-line);
}

.mf-footer__inner {
  padding: 3rem 0.8rem 2rem;
}

.mf-footer__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}

@media screen and (min-width: 45em) {
  .mf-footer__grid {
    grid-template-columns: 1.3fr 2fr;
  }
}

.mf-footer__blurb {
  color: var(--mf-slate-muted);
  font-size: 0.72rem;
  line-height: 1.7;
  max-width: 24rem;
  margin: 0.7rem 0 0;
}

.mf-footer__nav {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.mf-footer__heading {
  font-family: var(--md-code-font);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mf-signal-400);
  margin: 0 0 0.9rem;
}

.mf-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.mf-footer__list a,
.mf-footer__legal a {
  color: var(--mf-slate-faint);
  text-decoration: none;
  font-size: 0.7rem;
  transition: color var(--mf-duration) var(--mf-ease);
}

.mf-footer__list a:hover,
.mf-footer__legal a:hover {
  color: var(--md-default-fg-color);
}

.mf-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-md-color-scheme="default"] .mf-footer__bottom {
  border-top-color: var(--mf-line);
}

.mf-footer__copyright {
  font-family: var(--md-code-font);
  font-size: 0.65rem;
  color: var(--mf-slate-faint);
  margin: 0;
}

.mf-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mf-footer__legal a {
  font-family: var(--md-code-font);
  font-size: 0.65rem;
}

/* The theme credit sits under the real footer, so it should not compete
   with it. */
.md-footer-meta {
  background-color: var(--mf-ink-950);
}

.md-footer-meta__inner {
  font-size: 0.62rem;
}

/*
 * A second, restrained use of the brand gradient beyond `h1`: the icon glyph
 * on each home page card. `background-clip: text` only works on glyphs, not
 * vector paths, so this fills through a `<linearGradient>` def instead, scoped
 * to the heading-sized icon so it never touches a small inline arrow.
 */
[data-md-color-scheme="slate"] .md-typeset .grid.cards .twemoji.lg.middle svg * {
  fill: url("#aiflow-brand-gradient");
}

/* biome-ignore-start lint/complexity/noImportantStyles: required to override all motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .md-typeset .grid.cards > ul > li:hover,
  .md-typeset .md-button:hover {
    transform: none !important;
  }
}
/* biome-ignore-end lint/complexity/noImportantStyles: required to override all motion */