/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @format
 */

/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* Self-hosted Geist (Sans + Mono) — Vercel's OFL-licensed type family, built
   for dev-tool UIs. Sans drives UI/headings, Mono drives all code. These
   @import rules must precede every style rule below (CSS @import ordering). */
@import '@fontsource-variable/geist';
@import '@fontsource-variable/geist-mono';

/* ── Accent color: ONE brand hue, two lightnesses chosen by surface contrast ──
   The accent is a single warm hue (~43°), rendered at two lightness levels
   depending on what it sits on. DO NOT unify these to one value — they differ
   on purpose, because each only has enough contrast on its own surface:
     • LIGHT surfaces (docs content, sidebar, TOC) → deep gold #705000
       (~7.4:1 on white, WCAG AAA; the bright yellow would be ~1.6:1 — illegible).
     • DARK surfaces (navbar, footer, landing — and the whole site in dark mode)
       → bright brand yellow #e8bd36 (~8:1 on the dark grey; the deep gold would
       be ~1.9:1 — fails).
   So the footer/navbar/landing links are intentionally bright yellow, not the
   docs' deep gold; "fixing" them to match the docs gold would break contrast.
   It's keyed to the surface, not the site mode: in light mode the docs are light
   (gold) while the footer/navbar/landing are still dark (yellow); in dark mode
   everything is dark, so the dark-mode commit flips the docs accent to yellow
   too and the whole site is uniformly yellow. */

/* You can override the default Infima variables here. */
:root {
  /* Deep gold accent (light surfaces): a darkened member of the Flow yellow
     family that stays legible as link/accent text on white (#705000 is ~7.4:1,
     WCAG AAA), unlike the brand yellow itself which is far too light on white.
     This replaces Infima's leftover red as the primary, so links, breadcrumbs,
     tab and TOC active states, buttons, and pagination all pick up the brand
     gold. Error UI keeps its own --flow-red below — red still means "error". */
  --ifm-color-primary: #705000;
  --ifm-color-primary-dark: #614500;
  --ifm-color-primary-darker: #523a00;
  --ifm-color-primary-darkest: #423000;
  --ifm-color-primary-light: #855f00;
  --ifm-color-primary-lighter: #946a00;
  --ifm-color-primary-lightest: #a87900;
  --ifm-navbar-height: 3.5rem;
  --ifm-navbar-padding-vertical: 0;
  --ifm-code-font-size: 95%;
  /* Geist for UI + headings, Geist Mono for code (the site leans on code, so
     the mono is the most important face). System fonts as graceful fallbacks. */
  --ifm-font-family-base: 'Geist Variable', system-ui, -apple-system,
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ifm-heading-font-family: var(--ifm-font-family-base);
  --ifm-font-family-monospace: 'Geist Mono Variable', ui-monospace,
    SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --flow-yellow: #e8bd36;
  --flow-gray-darker: #384048;
  --flow-gray-darkest: #2d343a;
  --flow-green: #9cd732;
  --flow-red: #dc2319;
}

/* Inline code: soft pill style */
:root {
  --ifm-code-background: rgba(0, 0, 0, 0.06);
  --ifm-code-padding-vertical: 2px;
  --ifm-code-padding-horizontal: 6px;
  --ifm-code-border-radius: 4px;
}

code {
  border: none;
}

/* Geist Mono ships coding ligatures (via contextual alternates) that fuse
   character pairs into single glyphs — `=>` becomes an arrow, `...` an
   ellipsis, `!=` a not-equal sign. In documentation the reader needs to see
   the literal source characters, so turn ligatures off across all code (inline
   `code`, fenced blocks, and FlowCheckCodeBlock). Inheritance carries this down
   to the Prism token spans. */
code,
pre,
kbd,
[class*='codeBlock'] {
  font-variant-ligatures: none;
  font-feature-settings: 'liga' 0, 'calt' 0;
}

/* ── Dark mode (site default) ── */
/* The site renders dark by default to match the redesigned landing page. These
   variables steer Infima's dark theme toward the landing's brand grays, and use
   the true brand yellow for links/accents — legible on dark, where the deep gold
   used on light pages would be too dark. The selector matches Infima's own
   `html[data-theme='dark']` specificity so these overrides actually win. */
html[data-theme='dark'] {
  /* A soft brand gray, lighter than Infima's near-black (#1b1b1d). The muted
     rgba(255,255,255,0.55) labels measure ~5:1 on the lightest part of the
     gradient (top #2d343a), clearing WCAG AA. */
  --ifm-background-color: #2a313a;
  --ifm-background-surface-color: #353d46;

  --ifm-color-primary: #e8bd36;
  --ifm-color-primary-dark: #e3b51d;
  --ifm-color-primary-darker: #d7aa17;
  --ifm-color-primary-darkest: #b18c13;
  --ifm-color-primary-light: #ecc750;
  --ifm-color-primary-lighter: #efce65;
  --ifm-color-primary-lightest: #f3da8c;
  --ifm-link-color: var(--flow-yellow);
  --ifm-link-hover-color: #f0c94a;

  --ifm-code-background: rgba(255, 255, 255, 0.1);
  --ifm-toc-border-color: rgba(255, 255, 255, 0.1);
  --ifm-table-border-color: rgba(255, 255, 255, 0.12);
  --ifm-table-stripe-background: rgba(255, 255, 255, 0.03);
  --ifm-blockquote-border-left-color: rgba(255, 255, 255, 0.15);
  --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.08);

  /* DocSearch paints the selected/recent result with --docsearch-highlight-color
     and white text on top. Left at the bright brand yellow (the dark primary)
     that's white-on-yellow and unreadable, so pin it to the deeper gold where
     white text stays legible. */
  --docsearch-highlight-color: #8a6300;
}

/* Top-to-bottom gradient on the docs/blog surface, matching the landing page's
   hero gradient (#2d343a → #232930) so docs share the homepage's tone and ramp.
   Painted on .main-wrapper — the content-height element between the navbar and
   the footer — so it bottoms out at exactly #232930, the footer color, right
   where the footer begins: the gradient flows straight into the footer with no
   tonal step. (Painting it on <html> with a fixed attachment instead made the
   seam depend on scroll position, so the footer met a lighter mid-gradient tone
   — a visible jump.) The body, doc content, and both sidebars are transparent,
   so it shows through as one surface. Scoped to plugin-docs/plugin-blog, leaving
   the landing and Try pages alone. */
html[data-theme='dark'].plugin-docs .main-wrapper,
html[data-theme='dark'].plugin-blog .main-wrapper {
  background: linear-gradient(180deg, #2d343a 0%, #232930 100%);
}

/* Drop the main sidebar's right divider so the surface reads as one continuous
   gradient, the way the landing page has no internal seams. (The TOC's left
   divider is removed theme-agnostically earlier in the stack, alongside its
   "On this page" label.) */
html[data-theme='dark'] .theme-doc-sidebar-container {
  border-right: none;
}

/* With the TOC's left divider gone (above), dim its links so the secondary
   column reads as clearly secondary, with the active entry in brand yellow. The
   "On this page" eyebrow label that gives this column its identity is added
   theme-agnostically earlier in the stack. */
html[data-theme='dark'] .table-of-contents__link {
  color: rgba(255, 255, 255, 0.55);
}
html[data-theme='dark'] .table-of-contents__link:hover {
  color: rgba(255, 255, 255, 0.85);
}
html[data-theme='dark'] .table-of-contents__link--active {
  color: var(--flow-yellow);
}

/* The page's main title stays in the readable light heading color rather than
   the brand yellow — with yellow already on links, the TOC, and the sidebar, a
   yellow h1 made the page read as too yellow. Section headings (h2/h3) already
   use this color, so the whole heading hierarchy is now one consistent tone. */
html[data-theme='dark'] .theme-doc-markdown > header > h1 {
  color: var(--ifm-heading-color);
}

/* Blog post titles on a single post page: the light heading color rather than
   yellow, same reasoning as the doc title above (so the page isn't dominated by
   yellow). Covers the h1 of a normal post and the h2 link of a Medium-backed
   post on its own page. The blog index re-yellows its list titles just below. */
html[data-theme='dark'].plugin-blog article header h1,
html[data-theme='dark'].plugin-blog article header h1 a,
html[data-theme='dark'].plugin-blog article header h2 a {
  color: var(--ifm-heading-color);
}

/* Blog index: list-item titles read as yellow links like the rest of the UI,
   overriding the white-title rule above (which is .plugin-blog-scoped and so
   also matches the index). Same specificity, so this later rule wins. Scoped to
   .blog-list-page so single post pages keep their white title. */
html[data-theme='dark'].blog-list-page article header h2 a {
  color: var(--flow-yellow);
}
html[data-theme='dark'].blog-list-page article header h2 a:hover {
  color: #f0c94a;
}

/* Code blocks get the landing page's chrome: a hairline border, rounded
   corners, and a soft drop shadow so they read as raised panels on the
   gradient rather than flat insets. Scoped to docs/blog so it doesn't clobber
   the landing page's own (nearly identical) code-block border rule. Covers both
   regular code blocks and FlowCheckCodeBlock, whose root is also a
   `codeBlockContainer`. The background is retinted from vsDark's near-black
   #1e1e1e to a brand-flavored dark (#1f2630) so blocks read as part of the
   dark-gray surface family rather than flat black. */
html[data-theme='dark'].plugin-docs [class*='codeBlockContainer'],
html[data-theme='dark'].plugin-blog [class*='codeBlockContainer'] {
  --prism-background-color: #1f2630;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 28px rgba(0, 0, 0, 0.25);
}
/* FlowCheckCodeBlock paints the vsDark background inline on its <pre>, so the
   var above doesn't reach it — override it directly. */
html[data-theme='dark'].plugin-docs [class*='codeBlockContainer'] pre,
html[data-theme='dark'].plugin-blog [class*='codeBlockContainer'] pre {
  background-color: #1f2630 !important;
}

/* Now that docs render dark, the navbar no longer sits over white content, so
   drop its base to a more transparent 0.7 for a lighter, glassier bar that lets
   more of the blurred content show through. (The 0.92 in the navbar commit
   existed only to keep it dark over the old white docs pages; navbar text still
   measures >7:1 at 0.7 because the base tint is dark.) Targets ::before, where
   the base commit moved the frosted fill + blur, so the more-transparent tint
   sits on the same layer as the blur (keeping the bar glassy on every viewport,
   mobile included). */
html[data-theme='dark'] .navbar::before {
  background: radial-gradient(
      ellipse 480px 120px at max(1.5rem, calc(50% - 604px)) -40%,
      rgba(232, 189, 54, 0.1),
      transparent 70%
    ),
    rgba(40, 46, 52, 0.7);
}

/* Mobile drawer top bar: logo on the left, the toggle + close grouped at the
   right. Pushing the logo with margin-right: auto leaves a single auto gap, so
   the right group stays anchored whether or not the toggle is present (it's
   hidden on the landing/Try pages via NavbarThemeToggle). The toggle keeps a
   small gap before the close via its own margin-right--md class. (Zero Infima's
   default margin-left:auto on the close so there's only one auto margin —
   otherwise the two would split the space and park the toggle in the middle.) */
.navbar-sidebar__brand .navbar__brand {
  margin-right: auto;
}
.navbar-sidebar__brand > .navbar-sidebar__close {
  margin-left: 0;
}

/* The desktop color-mode toggle (in the right nav group) is hidden on mobile,
   where the drawer's own toggle takes over. This replaces Docusaurus's default
   colorModeToggle style, which the swizzled NavbarContent no longer applies. */
@media (max-width: 996px) {
  .navbar__items--right .flow-theme-toggle {
    display: none;
  }
}

/* Space the desktop toggle from the social icon (X) that follows it, so it
   doesn't sit flush against it. */
.navbar__items--right .flow-theme-toggle {
  margin-right: 0.75rem;
}

/* The Algolia search button defaults to a near-black fill that reads as a hard
   block on the glassy navbar. Give it a translucent fill + hairline so it sits
   on the bar like the other navbar chrome. */
html[data-theme='dark'] .navbar .DocSearch-Button {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
html[data-theme='dark'] .navbar .DocSearch-Button:hover {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

/* Prose link underline: yellow tint on dark (the base rule uses deep gold,
   which would disappear against the dark surface). */
[data-theme='dark'] .markdown a:not(.hash-link):not(.card) {
  text-decoration-color: rgba(232, 189, 54, 0.4);
}
[data-theme='dark'] .markdown a:not(.hash-link):not(.card):hover {
  text-decoration-color: rgba(232, 189, 54, 0.8);
}

/* Blog index title / "Read more" underline: yellow tint on dark, mirroring the
   prose-link override above (the base rule's deep gold would vanish on dark).
   .blog-list-page sits on <html> alongside data-theme, so these are compounded
   on one element (html[data-theme='dark'].blog-list-page), not a descendant
   combinator — matching the .plugin-blog rules elsewhere in this file. */
html[data-theme='dark'].blog-list-page h2[itemprop='headline'] a,
html[data-theme='dark'].blog-list-page footer a[aria-label^='Read more'] {
  text-decoration-color: rgba(232, 189, 54, 0.4);
}
html[data-theme='dark'].blog-list-page h2[itemprop='headline'] a:hover,
html[data-theme='dark'].blog-list-page footer a[aria-label^='Read more']:hover {
  text-decoration-color: rgba(232, 189, 54, 0.8);
}

/* Sidebar on dark: light section headers, a light hover fill, and a yellow
   active pill/text (the light-mode rule used a dark text color that would
   vanish on the dark surface). The top-level labels match the nested links'
   brightness (0.85, ~9:1 on the gradient) rather than sitting dimmer — their
   bold treatment already marks them as section headers, so they don't need to
   be quieter in tone too. */
[data-theme='dark']
  .theme-doc-sidebar-menu
  > .theme-doc-sidebar-item-category
  > .menu__list-item-collapsible
  > .menu__link,
[data-theme='dark']
  .theme-doc-sidebar-menu
  > .theme-doc-sidebar-item-link
  > .menu__link {
  color: rgba(255, 255, 255, 0.85);
}
[data-theme='dark'] .theme-doc-sidebar-menu .menu__link:hover {
  background-color: rgba(255, 255, 255, 0.06);
}
[data-theme='dark']
  .theme-doc-sidebar-menu
  .menu__link--active:not(.menu__link--sublist) {
  color: var(--flow-yellow);
  background-color: rgba(232, 189, 54, 0.14);
}
[data-theme='dark']
  .theme-doc-sidebar-menu
  .menu__link--active:not(.menu__link--sublist):hover {
  background-color: rgba(232, 189, 54, 0.2);
}

.docusaurus-highlight-code-line {
  background-color: rgb(72, 77, 91);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
}

/* Code blocks get a raised-card treatment — a hairline border, rounded corners,
   and a soft drop shadow — echoing the landing page's code chrome, adapted to
   light colors. Scoped to docs/blog so the landing keeps its own code styling;
   dark mode overrides the border/shadow for the dark surface later in the stack.
   Covers regular code blocks and FlowCheckCodeBlock (both `codeBlockContainer`).
   overflow: hidden clips the inner <pre>'s square background to the rounded
   corners — without it the background pokes over the border at the corners, so
   the border looks like it's missing there. (Theme-agnostic, so it fixes both
   modes; the dark rule only overrides colors.) */
.plugin-docs [class*='codeBlockContainer'],
.plugin-blog [class*='codeBlockContainer'] {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 20px rgba(0, 0, 0, 0.06);
}

/* Phone widths: code blocks wrap instead of forcing a horizontal scroll, with a
   slightly smaller font so more fits per row before anything wraps. white-space
   is set on the line container (and inherited downward), which reaches both
   standard Prism blocks (token-line spans) and FlowCheckCodeBlock (its
   table-cell line content). This covers every code block on the site — docs,
   blog, and the landing showcase. The flow-check error squiggles are absolutely
   positioned by character column and would drift once a line wraps, so they're
   hidden here; the red gutter bar and the error message still mark and explain
   the error. */
@media (max-width: 600px) {
  [class*='codeBlockContainer'] pre {
    font-size: 0.8125rem;
  }
  [class*='codeBlockContainer'] [class*='codeBlockLines'] {
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }
  /* Hanging indent on flow-check code lines: text-indent pulls the first row
     back to the normal code start while padding-left pushes wrapped rows in, so
     a continuation reads as part of the line above rather than a new statement.
     Targets the per-line content cell (not the row), so the line-number gutter
     stays aligned where numbers are shown. */
  [class*='codeBlockContainer'] [class*='codeBlockLineContent'] {
    padding-left: 1.5em;
    text-indent: -1.5em;
  }
  [class*='flowErrorHighlight'] {
    display: none;
  }
}

/* Prose links pick up the homepage's subtle-underline treatment: a persistent
   faint gold underline that strengthens on hover, so links are identifiable
   without relying on color alone. Scoped to markdown body content so it doesn't
   reach nav chrome (navbar, sidebar, breadcrumbs, pagination cards) or heading
   anchor links. The deep-gold link color itself comes from --ifm-color-primary.
   The docs landing cards (DocsLandingPage) suppress their own underline via
   text-decoration: none, so they need no exclusion here. */
.markdown a:not(.hash-link) {
  text-decoration: underline;
  text-decoration-color: rgba(112, 80, 0, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}
.markdown a:not(.hash-link):hover {
  text-decoration-color: rgba(112, 80, 0, 0.8);
}

/* Blog index: the post-title and "Read more" links sit outside .markdown, so
   the prose rule above doesn't reach them. Give them the same persistent subtle
   gold underline (strengthening on hover) so every gold link on the index shares
   one affordance. Scoped to .blog-list-page so blog post pages — where the title
   is the page h1, not a link — are untouched. (Dark mode tints these yellow
   later in the stack, mirroring the prose-link override.) */
.blog-list-page h2[itemprop='headline'] a,
.blog-list-page footer a[aria-label^='Read more'] {
  text-decoration: underline;
  text-decoration-color: rgba(112, 80, 0, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}
.blog-list-page h2[itemprop='headline'] a:hover,
.blog-list-page footer a[aria-label^='Read more']:hover {
  text-decoration-color: rgba(112, 80, 0, 0.8);
}

/* The trailing breadcrumb is the current page, so Docusaurus renders it as a
   non-clickable span. Don't color it like the (gold) interactive crumbs —
   use the plain text color so it doesn't read as a dead link. The parent
   crumbs stay gold and clickable. */
.breadcrumbs__item--active .breadcrumbs__link {
  color: var(--ifm-font-color-base);
  background: transparent;
}

/* Frosted-glass bar: a mostly-opaque dark base over a blurred backdrop, with a
   faint warm glow near the logo echoing the hero's radial. The base alpha is
   kept high (0.92) so the bar stays convincingly dark even over white docs
   pages — at lower opacity the blurred white content washed it out to a pale
   gray — while still letting a soft blur of the content read through underneath.
   The hairline replaces Infima's heavy drop-shadow, so the bar reads as thin
   modern chrome layered on the page rather than a solid slab. The navbar is
   already sticky via Infima's `navbar--fixed-top`, which is what lets the
   backdrop blur engage on scroll.

   The frosted fill + blur live on a ::before pseudo-element rather than on
   .navbar itself. An element with backdrop-filter becomes the containing block
   for its position: fixed descendants — and the mobile menu drawer
   (.navbar-sidebar) and its backdrop are exactly that, so putting the filter on
   .navbar would clamp them to the bar's height (the open menu then gets occluded
   by the page). Painting it on ::before keeps the blur on every viewport,
   including mobile, while leaving .navbar a normal containing block so the
   drawer spans the full screen. */
.navbar {
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.navbar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
      ellipse 480px 120px at 80px -40%,
      rgba(232, 189, 54, 0.1),
      transparent 70%
    ),
    rgba(40, 46, 52, 0.92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
}

/* Footer: a dark-grey bookend in the brand's grey family (#232930, the same
   tone the landing hero settles toward) rather than a near-black slab. It sits
   one step darker than the page bottom (#2d343a), so it reads as a subtly
   anchored bookend, with a thin grey line as the divider. More vertical padding
   gives the link columns room to breathe. The footer is dark in both themes, so
   these values are shared (no dark-mode override needed). */
.footer.footer--dark {
  background: #232930;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 3.5rem;
  padding-bottom: 3rem;
}

/* Column headers as quiet uppercase micro-labels, matching the sidebar's
   section-header treatment. */
.footer .footer__title {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  font-weight: 700;
  /* 0.55 clears WCAG AA (4.5:1) on the dark footer; 0.45 measured 4.26:1. */
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 1rem;
}

/* Site-wide: the "Copyright © …  Built with Docusaurus." line shouldn't compete
   visually with the link columns above it. */
.footer .footer__copyright {
  font-size: 0.8rem;
  opacity: 0.7;
}

/* Footer links: Flow yellow, with the landing page's persistent subtle
   underline that strengthens on hover. */
.footer .footer__link-item {
  color: var(--flow-yellow);
  text-decoration: underline;
  text-decoration-color: rgba(232, 189, 54, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s, text-decoration-color 0.15s;
}
.footer .footer__link-item:hover {
  color: #f0c94a;
  text-decoration-color: rgba(232, 189, 54, 0.7);
}

.navbar .navbar__link, .navbar .navbar__toggle, .navbar .menu__link, .navbar .navbar-sidebar__back {
  color: rgba(255, 255, 255, 0.7);
}

/* Navbar text links sit in rounded pills that fill softly and shift to Flow
   yellow on hover, matching the landing page's link treatment; the active link
   keeps a persistent soft-yellow pill for wayfinding. Excludes the icon links
   (X/GitHub) and the version pill, which are also navbar__link but carry their
   own hover treatment — the pill fill rendered as a lopsided box behind them. */
.navbar .navbar__link:not(.navbar__icon):not(.navbar__version-pill) {
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  transition: color 0.15s, background-color 0.15s;
}
.navbar .navbar__link:not(.navbar__icon):not(.navbar__version-pill):hover {
  color: var(--flow-yellow);
  background-color: rgba(255, 255, 255, 0.06);
}
.navbar .navbar__link--active {
  color: var(--flow-yellow);
  background-color: rgba(232, 189, 54, 0.12);
}

.navbar__brand, .navbar__logo {
  height: 100%;
}

/* The navbar is always dark, but Docusaurus tints the color-mode toggle icon
   for the *active* theme — so in light mode it renders dark-on-dark and
   disappears. Force it light (and yellow on hover) in both modes. */
.navbar [class*='toggleButton_'] {
  color: rgba(255, 255, 255, 0.7);
}
.navbar [class*='toggleButton_']:hover {
  color: var(--flow-yellow);
  background-color: rgba(255, 255, 255, 0.06);
}
.navbar [class*='toggleButton_'] svg {
  fill: currentColor;
}

/* Version pill: a small rounded badge showing the current Flow release,
   sitting to the left of the Twitter/GitHub icons on the dark navbar. */
.navbar .navbar__version-pill {
  align-self: center;
  margin-right: 1rem;
  padding: 0.15rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
  transition: border-color 0.15s, color 0.15s;
}
.navbar .navbar__version-pill:hover {
  border-color: var(--flow-yellow);
  color: var(--flow-yellow);
  text-decoration: none;
}
/* Drop the external-link arrow Docusaurus auto-appends to `href` navbar items —
   it clutters the pill and the badge already reads as a link. */
.navbar .navbar__version-pill svg {
  display: none;
}

/* An "On this page" eyebrow above the desktop table of contents, giving the
   secondary sidebar a clear label and identity. Uses an adaptive emphasis color
   so it reads in both light and dark themes. Scoped to the desktop TOC so the
   mobile collapsible (which has its own label) is untouched. */
.theme-doc-toc-desktop .table-of-contents::before {
  content: 'On this page';
  display: block;
  padding-left: var(--ifm-toc-padding-horizontal);
  margin-bottom: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ifm-color-emphasis-600);
}

/* With the "On this page" label giving the TOC its own identity, drop its left
   divider in both themes so it reads as a clean secondary column rather than a
   bordered-off rail. */
.table-of-contents {
  border-left: none;
}

/* Active TOC entry: a gold left accent bar (plus the gold text Docusaurus
   already applies), so the current section is obvious rather than a subtle
   color-only swap. The bar is an absolutely positioned pseudo-element sitting in
   the left gutter, so it has no effect on the link's text width or wrapping —
   left padding/border made long entries wrap, and bold text reflowed them too.
   The bar uses --ifm-color-primary (deep gold in light, brand yellow in dark);
   dark mode sets the active text color. */
.table-of-contents__link--active {
  position: relative;
}
.table-of-contents__link--active::before {
  content: '';
  position: absolute;
  left: -0.55rem;
  top: 0.15em;
  bottom: 0.15em;
  width: 2px;
  border-radius: 1px;
  background: var(--ifm-color-primary);
}

/* Give the doc content horizontal breathing room from the sidebars — a little
   on the left (main sidebar) and more on the right so it isn't crowded against
   the secondary (TOC) column. Applies in both themes. */
[class*='docItemContainer'] {
  padding-left: 1rem;
  padding-right: 2rem;
}

.navbar .navbar__icon {
  padding: 0px;
  padding-right: 1rem;
}
.navbar .navbar__icon:hover {
  opacity: 0.8;
}
.navbar .navbar__icon:active {
  opacity: 0.7;
}
.navbar .navbar__icon:before {
  content: '';
  display: flex;
  height: 20px;
  width: 21px;
  background-color: rgba(255, 255, 255, 0.7);
}

.navbar .twitter__link:before {
  /* X (formerly Twitter) mark. The glyph is near-square and fills its viewBox
     edge-to-edge, so contain + center fits it into the 21×20 icon box without
     the horizontal stretch a default background-size would cause. */
  background: url(/img/icon-x.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.navbar .github__link:before {
  background: url(/img/icon-github.svg);
  background-repeat: no-repeat;
}

/* Slightly frosted drawer: a mostly-opaque dark base over a blurred backdrop, so
   a soft blur of the page content reads through behind the menu. The alpha is
   kept high (0.85) so the light menu text stays legible even over a light docs
   page. Putting backdrop-filter on the drawer itself is safe: unlike the navbar
   case, the drawer's own children aren't position: fixed, so it only blurs the
   page behind it without becoming a containing block that clips anything. */
.navbar-sidebar {
  background-color: rgba(45, 52, 58, 0.85);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
}

.navbar-sidebar .navbar__icon {
  padding: var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal);
}
.navbar-sidebar .navbar__icon:hover {
  opacity: 1;
}
.navbar-sidebar .navbar__icon:active {
  opacity: 1;
}

/* Drawer footer row: the trailing utility items — version pill, X, GitHub (and
   the light/dark toggle the dark-theme commit adds on top) — would otherwise
   each take a full-width line. Lay them out as one small horizontal row instead.
   They're the last items in the menu list, so making just their list items
   inline-flex flows them onto a single line beneath the stacked text links;
   :has() targets exactly those items and leaves the text links stacked. */
.navbar-sidebar .menu__list-item:has(> .navbar__version-pill),
.navbar-sidebar .menu__list-item:has(> .navbar__icon) {
  display: inline-flex;
  align-items: center;
  width: auto;
  vertical-align: middle;
  margin-top: 0.75rem;
}

/* The version pill defaults to a full-width menu link in the drawer; shrink it
   to fit its label (the widest real value is around "v0.317") so it reads as a
   small pill in the row rather than a stretched bar. */
.navbar-sidebar .navbar__version-pill {
  display: inline-flex;
  width: auto;
  margin: 0 0.35rem 0 0;
}

/* Doc sidebar links rendered inside the dark navbar-sidebar need light text
   to be readable — the wide-layout sidebar lives on a light background. */
.navbar-sidebar .menu__link {
  color: rgba(255, 255, 255, 0.7);
}
.navbar-sidebar .theme-doc-sidebar-menu > .theme-doc-sidebar-item-category > .menu__list-item-collapsible > .menu__link,
.navbar-sidebar .theme-doc-sidebar-menu > .theme-doc-sidebar-item-link > .menu__link {
  color: rgba(255, 255, 255, 0.85);
}
.navbar-sidebar .menu__link:hover,
.navbar-sidebar .menu__list-item-collapsible:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: white;
}
.navbar-sidebar .menu__link--active {
  color: white;
  background-color: rgba(255, 255, 255, 0.1);
}
.navbar-sidebar .menu__caret::before,
.navbar-sidebar .menu__link--sublist-caret::after {
  filter: invert(1);
}
.navbar-sidebar__back {
  background: transparent;
  box-shadow: none;
}
.navbar-sidebar__back:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* The drawer's close (X) button picks up the brand yellow on hover/press, like
   the navbar links and other interactive chrome. The X is drawn as an SVG with
   a `stroke` presentation attribute, so the hover color has to set `stroke` on
   the inner <g> (a plain `color` change wouldn't reach it). */
.navbar-sidebar__close svg g {
  transition: stroke 0.15s;
}
.navbar-sidebar__close:hover svg g,
.navbar-sidebar__close:active svg g {
  stroke: var(--flow-yellow);
}
.navbar-sidebar .menu__list .menu__list {
  border-left-color: rgba(255, 255, 255, 0.1);
}
.navbar-sidebar .theme-doc-sidebar-menu > .theme-doc-sidebar-item-category,
.navbar-sidebar .theme-doc-sidebar-menu > .theme-doc-sidebar-item-link {
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* When the mobile sidebar is open, replace the navbar's dark drop-shadow with
   a soft white hairline matching the dividers between sidebar items. */
.navbar-sidebar__brand {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ── Sidebar: modern 2026 treatment ── */

/* All sidebar links get a rounded hit-area and a smooth hover fill — the base
   the hover and active states build on. */
.theme-doc-sidebar-menu .menu__link {
  border-radius: 8px;
  transition: color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.theme-doc-sidebar-menu .menu__link:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

/* Active page: a deep-gold rounded pill with bold deep-gold text — the same
   accent the rest of the UI uses (links, breadcrumbs, TOC), so the whole
   interface shares one color. No left bar here: a straight bar reads awkwardly
   against the pill's rounded corners, and the rounded pill already carries the
   selection (the TOC, which has no pill, uses the bar instead). The
   higher-specificity selector overrides Infima's active rule. (Dark mode
   overrides the colors later in the stack for the dark surface.) */
.theme-doc-sidebar-menu .menu__link--active:not(.menu__link--sublist) {
  color: var(--ifm-color-primary);
  font-weight: 600;
  background-color: rgba(112, 80, 0, 0.12);
}
.theme-doc-sidebar-menu .menu__link--active:not(.menu__link--sublist):hover {
  background-color: rgba(112, 80, 0, 0.16);
}

/* Top-level sections: breathing room instead of hairline rules for a lighter,
   more modern rhythm. */
.theme-doc-sidebar-menu > .theme-doc-sidebar-item-category,
.theme-doc-sidebar-menu > .theme-doc-sidebar-item-link {
  margin-top: 0.35rem;
}
.theme-doc-sidebar-menu > :first-child {
  margin-top: 0;
}

/* Top-level category labels read as section headers in normal case, so they
   stay consistent with the sentence-case link text throughout the rest of the
   sidebar. Inactive labels keep the regular link weight; the darker color and
   spacing carry the header emphasis. The active page still gets its bolder
   weight from the active rule above. */
.theme-doc-sidebar-menu > .theme-doc-sidebar-item-category > .menu__list-item-collapsible > .menu__link,
.theme-doc-sidebar-menu > .theme-doc-sidebar-item-link > .menu__link {
  color: var(--flow-gray-darker);
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

/* A top-level doc link that is the active page (e.g. "Flow for TypeScript
   Users") must keep the gold active color — the grey label color above ties on
   specificity and would otherwise win by source order, leaving it grey. */
.theme-doc-sidebar-menu
  > .theme-doc-sidebar-item-link
  > .menu__link--active {
  color: var(--ifm-color-primary);
}

/* Nested items show hierarchy through indentation alone. The old vertical guide
   line is dropped: its straight edge clashed with the rounded hover/active pills
   sitting right beside it, and dropping it matches the hairline-free, airier
   treatment used at the top level. */
.menu__list .menu__list {
  padding-left: 0.75rem;
  margin-left: 0.6rem;
}

/* Landing page (src/pages/index.mdx) — one continuous dark gradient under
   the whole page. The Hero has its own opaque gradient sitting on top;
   the Showcase rows and CTAStrip are transparent and let this gradient
   show through, so the section boundaries don't introduce any seam.

   The gradient is painted on the .main-wrapper div (a descendant of
   .landing-wrapper html), NOT on .landing-wrapper itself. <html> is the
   root element so its background is propagated to the entire canvas, but
   Layout forces html height to 100vh — gradients on the root then tile
   or get sampled per-viewport, creating bands as you scroll. <main> was
   tried too but the container box was misbehaving. .main-wrapper sits
   between them, has the actual page content height, and is a plain div
   so it paints exactly its own box without canvas-propagation quirks.

   <html> is kept on a solid base color so rubber-band scroll past the page
   edge doesn't flash white. It matches the showcase/footer tone (#232930) so
   the bottom of the page reads as one tone behind the footer's grey line. */
.landing-wrapper {
  background: #232930;
}

/* The showcase rows + CTAStrip (see src/pages/index.mdx) sit on the same
   #232930 the Hero darkens down to, so the page darkens monotonically — Hero
   #2d343a → #232930, then a steady #232930 through the showcase and straight
   into the #232930 footer, with the footer's grey line as the only divider.
   The landing is dark in both themes, so this is shared (no dark override). */
.landing-below-hero {
  background: #232930;
}

/* Landing-wide inline `code` styling — one canonical pill across prose,
   headings, and error messages. Without this, prose code (0.95rem from
   Infima's --ifm-code-font-size: 95%) and error-footer code (0.95 of 0.85em
   ≈ 0.81em) ended up visibly different sizes. The 0.9em scales relative
   to surrounding text, so code in a heading reads as a heading-sized
   accent, code in body reads as body-sized, and they all use the same
   chrome. `:not(pre) > code` excludes Prism tokens inside actual code
   blocks. */
.landing-wrapper :not(pre) > code {
  font-size: 0.9em;
  font-family: var(--ifm-font-family-monospace);
  background: rgba(255, 255, 255, 0.08);
  color: #f0f3f5;
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0.05em 0.4em;
  border-radius: 4px;
  /* Common monospace fonts (Menlo, Consolas) sit visually lower than the
     surrounding sans-serif at the same baseline. Lift slightly so text
     baselines align. */
  vertical-align: 0.03em;
}

/* Docusaurus's MDXPage wraps content in
   `<main class="container container--fluid margin-vert--lg">
      <div class="row">
        <div class="col col--8"> ... </div>`
   which on the landing adds: a 2rem top/bottom margin (margin-vert--lg
   declares it with !important, so we need !important to beat it), a 1rem
   horizontal padding from `.container`, negative-margin gutters from `.row`,
   and a 2/3-width constraint from `.col--8` that pinches the page on wide
   screens. Reset all four so the landing's own Hero/Showcase/CTAStrip
   sections control width and spacing end-to-end. */
.landing-wrapper main.container.margin-vert--lg {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
}
.landing-wrapper main.container.margin-vert--lg > .row {
  margin: 0;
}
.landing-wrapper main.container.margin-vert--lg > .row > .col {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0;
}

.rounded {
  border-radius: 0.25rem;
}

.version {
  padding: 3px 5px;
  font-size: 12px;
  border-radius: 6px;
  display: inline-block;
  vertical-align: middle;
}
.version.added {
  background: var(--flow-green);
  color: white;
}
.version.removed {
  background: var(--flow-red);
  color: white;
}

/* ── Blog post author: compact single-line display ── */

/* Authors container: inline flow instead of grid columns */
article .row:has(.avatar) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
}

/* Remove column sizing so authors sit next to each other */
article .row:has(.avatar) > [class*='col'] {
  display: flex;
  align-items: center;
  flex: none;
  width: auto;
  max-width: none;
  padding: 0;
}

/* Separator between multiple authors */
article .row:has(.avatar) > [class*='col'] + [class*='col']::before {
  content: ', ';
  white-space: pre;
  align-self: flex-start;
  line-height: 1.25;
}

/* Compact avatar: single line, no bottom margin */
article .avatar {
  margin-bottom: 0;
}

/* Make author info inline (name + socials on one line) */
article .avatar__intro {
  flex-direction: row;
  align-items: center;
}

/* Space before social links */
article .avatar__intro [class*='authorSocials'] a {
  margin-left: 0.5rem;
}

.gh-btn {
  position: relative;
  vertical-align: middle;
}

@media (min-width: 1680px) {
  .docusaurus-mermaid-container {
    /* Make mermaid graphs use up all the width available so that they are legible. */
    margin-left: calc(-50vw + var(--doc-sidebar-width) + var(--ifm-container-width-xl) / 2);
    margin-right: calc(-50vw + var(--ifm-container-width-xl) /  2);
    max-width: initial !important;
  }
}
