`, shown only on dark pages). Images without a dark variant render as-is on dark pages. Mermaid diagrams use Mermaid's built-in dark theme; see layouts/_partials/scripts/mermaid.html. */ /* ── Mermaid: hide the raw graph source until it is rendered ────────────── Mermaid replaces a
 source block with an ) ──────────────────────────── */
/* Auto-rendered from front matter `description` by docs/single.html and
   docs/list.html. Matches the lead-paragraph styling from docs-theme-lotus. */
.page-description {
  font-size: 1.125rem;
  line-height: 1.6;
  color: #6b7280;
  margin-top: -0.5rem;
  margin-bottom: 1.5rem;
}
.dark .page-description {
  color: #9ca3af;
}

/* ── Copy-as-Markdown only blocks ────────────────────────────────────── */
/* Content emitted purely for transform.HTMLToMarkdown to capture (e.g. an
   OpenAPI summary inside the openapi shortcode). Hidden from readers but
   visible to the "Copy as Markdown" extraction. */
.copy-md-only {
  display: none !important;
}

/* ── Code blocks ─────────────────────────────────────────────────────── */
/* Match old theme: white background in light mode, dark grey in dark mode */
.content pre {
  border-radius: 6px;
  padding: 1rem;
  background-color: #fff !important;
  border: 1px solid #e5e7eb;
}

.content .highlight pre,
.content .chroma {
  background-color: #fff !important;
}

/* Syntax-highlighted blocks with line numbering: put the border/radius
   on the outer .chroma wrapper so lntable's two-cell layout renders as
   a single box, not one border per . Inner s keep their
   padding for code spacing.

   Scoped to `div.chroma` because Hugo emits `` for
   plain blocks and `` for line-numbered ones. The
   non-`div` form is the  itself; applying overflow:hidden there
   killed horizontal scroll on every plain code block. */
.content div.chroma {
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
}
.content div.chroma pre {
  border: 0 !important;
  border-radius: 0 !important;
}

.dark .content pre {
  background-color: #1a1a2e !important;
  border-color: #374151;
}

.dark .content .highlight pre,
.dark .content .chroma {
  background-color: #1a1a2e !important;
}

.dark .content div.chroma {
  border-color: #374151;
}

/* Chroma error tokens get a light background in the default theme.
   Clear it in dark mode so code blocks don't show light patches
   (common when non-JSON content is fenced as ```json). */
.dark .chroma .err {
  background-color: transparent !important;
}

/* ── Footnotes ───────────────────────────────────────────────────────── */
/* Goldmark emits `` immediately before a
   footnotes section. The horizontal line clashes with our typography
   (tables already have a bottom border, headings have spacing) and reads
   as a visual artifact rather than a structural separator. Hide it; the
   `` heading already separates the block. */
.footnotes-sep,
hr.footnotes-sep,
.footnotes > hr:first-child {
  display: none;
}

/* ── Tables ──────────────────────────────────────────────────────────── */
/* Match old table styling */
.content .table-wrapper {
  margin-top: 1rem;
}
.content table {
  font-size: 0.9375rem;
}
.content table th {
  font-weight: 600;
}
/* Tailwind preflight sets img{display:block} and the Hextra typography layer
   adds margin:1rem auto to all content images — override both for inline
   badge images (e.g. shields.io) used inside table cells. */
.content table td img {
  display: inline;
  vertical-align: middle;
  margin: 0 2px;
}

/* Responsive table wrapper styling (the wrapper itself comes from
   _markup/render-table.html, which inlines `overflow-x` for safety). These
   rules add the cell padding/border treatment that the inline style alone
   doesn't cover. */
.table-wrapper {
  margin: 1.5rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-wrapper table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
}
.table-wrapper th,
.table-wrapper td {
  padding: 0.5rem 0.75rem;
  border: 1px solid #e5e7eb;
  white-space: normal;
  word-wrap: break-word;
}
.dark .table-wrapper th,
.dark .table-wrapper td {
  border-color: #374151;
}

/* ── Section cards (auto-generated on list pages) ────────────────────── */
/* Replicates the docs-theme-lotus card grid on parent sections */
.section-cards {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap: 1rem;
  margin-top: 1.5rem;
}

@media (min-width: 640px) {
  .section-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .section-cards {
    /* --section-cards-cols is set inline by the {{< cards >}} shortcode
       when an author passes a `cols=N` attribute. Auto-card grids leave
       it unset and fall back to 3. */
    grid-template-columns: repeat(var(--section-cards-cols, 3), 1fr);
    grid-auto-rows: 1fr;
  }
}

.section-card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  height: 100%;
  /* Prevent the grid cell from expanding to the image's intrinsic width.
     Without this, a wide-aspect SVG with no explicit dimensions (only a
     viewBox) can force all 1fr columns wider than the available space in
     Firefox and WebKit. */
  min-width: 0;
}

.section-card:hover {
  border-color: var(--theme-primary);
  box-shadow: 0 2px 8px var(--theme-primary-tint);
}

/* Icons. Auto-cards emit 
   (font icon, sized via font-size); the {{< card >}} shortcode emits an
   inline  in auto-cards (block by default) and a
    in shortcode-rendered cards (to stay
   valid HTML inside a Goldmark-added ). Force flex column on both. */
.section-card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

/* Title + desc are 
 in auto-cards and  in shortcode cards.
   display: block makes the span behave like a block so the margins
   below apply. */
.section-card-title {
  display: block;
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin: 16px 0 4px !important;
  color: #111827;
}

.section-card-desc {
  display: block;
  font-size: 0.75rem !important;
  color: #374151;
  margin: 0 !important;
  line-height: 1.5;
}
/* When the shortcode passes the subtitle through markdownify, Goldmark
   may wrap the rendered prose in a 
 inside the .section-card-desc
   . That nested 
 picks up the default browser margins and
   spaces the description awkwardly. Zero them. */
.section-card-desc > p {
  margin: 0 !important;
}

.section-card-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  background: #e5e7eb;
  color: #374151;
  vertical-align: middle;
  margin-left: 4px;
}

.section-card-badge.badge-tag {
  background: #dbeafe;
  color: #1e40af;
}

.section-card-badge.badge-oss {
  background: #d1fae5;
  color: #065f46;
}

/* Section cards dark mode */
.dark .section-card {
  border-color: #374151;
}

.dark .section-card:hover {
  border-color: var(--theme-primary);
  box-shadow: 0 2px 8px var(--theme-primary-tint);
}

.dark .section-card-title {
  color: #f3f4f6;
}

.dark .section-card-desc {
  color: #9ca3af;
}

.dark .section-card-badge {
  background: #374151;
  color: #d1d5db;
}

.dark .section-card-badge.badge-tag {
  background: #1e3a5f;
  color: #93c5fd;
}

.dark .section-card-badge.badge-oss {
  background: #064e3b;
  color: #6ee7b7;
}

/* ── Page title badges (Enterprise / Alpha / Beta / etc.) ────────────── */
.page-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.page-badges .section-card-badge {
  margin-left: 0;
}

/* ── Sidebar nav badges (Enterprise / Open Source) ───────────────────── */
.sidebar-badge {
  display: inline-block;
  font-size: 0.4375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 1px 3px;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 2px;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1.4;
}

.sidebar-badge-enterprise {
  background: #1f2937;
  color: #f9fafb;
}

.sidebar-badge-oss {
  background: #d1fae5;
  color: #065f46;
}

.dark .sidebar-badge-enterprise {
  background: #4b5563;
  color: #f9fafb;
}

.dark .sidebar-badge-oss {
  background: #064e3b;
  color: #6ee7b7;
}

/* ── Sidebar icons ───────────────────────────────────────────────────── */
/* Material Symbols in sidebar — matches old docs-theme-lotus */
.material-icons {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

.sidebar-icon {
  font-size: 20px;
  width: 24px;
  height: 24px;
  margin-right: 6px;
  opacity: 0.7;
  flex-shrink: 0;
}

.sidebar-icon-svg {
  transform: scale(0.833333);
}

/* Keep icon + text left-aligned */
.hextra-sidebar-item a:has(.sidebar-icon) {
  justify-content: flex-start !important;
}

/* ── Version dropdown ────────────────────────────────────────────────── */
/* Replicates the docs-theme-lotus version switcher styling */

.version-dropdown {
  position: relative;
}

/* Below xl (1280px) the mobile slide-out sidebar renders its own version
   selector (.sidebar-mobile-version-row), so hide the navbar version dropdown
   there to avoid showing it in two places on mobile. Scoped to pages that
   actually have a slide-out panel, so landing / non-docs pages keep the navbar
   dropdown as their only selector. The 1279px bound matches the
   .sidebar-mobile-panel breakpoint. The dropdown stays on desktop (>= 1280px). */
@media (max-width: 1279px) {
  body:has(.sidebar-mobile-panel) .version-dropdown {
    display: none !important;
  }
}

.version-product-name {
  display: none;
}

@media (min-width: 768px) {
  .version-product-name {
    display: inline;
  }
}

.version-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  color: inherit;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}

.version-dropdown-btn:hover {
  color: var(--theme-primary);
}

.version-dropdown-btn svg {
  transition: transform 0.2s;
}

.version-dropdown.open .version-dropdown-btn svg {
  transform: rotate(180deg);
}

/* Menu — hidden by default, shown when .open is on parent */
.version-dropdown-menu {
  display: none !important;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 180px;
  max-height: 300px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 4px 0;
  z-index: 50;
  list-style: none;
}

.version-dropdown.open .version-dropdown-menu {
  display: block !important;
}

.version-dropdown-item {
  display: block;
  padding: 8px 16px;
  font-size: 0.875rem;
  color: #374151;
  text-decoration: none;
  transition: color 0.15s;
}

.version-dropdown-item:hover {
  color: var(--theme-primary);
  background: #f9fafb;
}

/* ── Version dropdown dark mode ──────────────────────────────────────── */
.dark .version-dropdown-btn {
  color: #d1d5db;
}

.dark .version-dropdown-btn:hover {
  color: var(--theme-primary);
}

.dark .version-dropdown-menu {
  background: #1a1a1a;
  border-color: #333;
}

.dark .version-dropdown-item {
  color: #d1d5db;
}

.dark .version-dropdown-item:hover {
  color: var(--theme-primary);
  background: #262626;
}

.version-dropdown-divider {
  height: 0;
  margin: 4px 0;
  border-top: 1px solid #e5e7eb;
}

.dark .version-dropdown-divider {
  border-color: #444;
}

.version-dropdown-header {
  padding: 6px 16px 2px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dark .version-dropdown-header {
  color: #9ca3af;
}

.version-dropdown-hidden {
  padding: 2px 16px;
  font-size: 0;
  line-height: 0;
}

/* Search: "Other versions" collapsible section */
.hextra-search-other-versions {
  border-top: 1px solid #e5e7eb;
  margin-top: 4px;
}
.dark .hextra-search-other-versions {
  border-top-color: #374151;
}
.hextra-search-other-versions > summary {
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  user-select: none;
}
.hextra-search-other-versions > summary::-webkit-details-marker {
  display: none;
}
.hextra-search-other-versions > summary::before {
  content: '▶ ';
  font-size: 0.6rem;
  vertical-align: middle;
  margin-right: 2px;
}
details[open].hextra-search-other-versions > summary::before {
  content: '▼ ';
}
.dark .hextra-search-other-versions > summary {
  color: #9ca3af;
}
.hextra-search-other-versions > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── Hextra v0.12 missing compiled variants ──────────────────────────── */
/* hextra's compiled main.css includes hx:dark:block but not its responsive
   variants. These are used in navbar-title.html for the dark-mode logos. */
@media (min-width: 48rem) {
  .hx\:md\:dark\:block:where(.dark, .dark *) { display: block; }
}
@media not all and (min-width: 48rem) {
  .hx\:max-md\:dark\:block:where(.dark, .dark *) { display: block; }
}

/* ── Print styles ─────────────────────────────────────────────────────── */
@media print {
  @page { margin: 1.5cm 2cm; }

  /* Hide UI chrome — sidebar/TOC already have hx:print:hidden from hextra */
  .copy-md-wrapper,
  .nav-container,
  .hextra-nav-container,
  footer,
  .hextra-component-issue,
  [class*="pager"],
  [class*="page-feedback"],
  [class*="last-updated"],
  [class*="comments"],
  #chatbot-container { display: none !important; }

  /* Let article fill the printable area */
  body, html { overflow: visible !important; }
  article {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    min-height: 0 !important;
  }
  article > main {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Fix the main cause: code blocks clip at the paper edge on screen overflow */
  pre, code {
    white-space: pre-wrap !important;
    overflow: visible !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }

  /* Chroma lntable: the general pre/code rules above collapse the line-number
     column at page breaks, causing two-digit numbers to split across lines.
     Undo word-break and max-width constraints for that column only. */
  .lntable { width: 100%; }
  .lntable .lntd:first-child pre,
  .lntable .lntd:first-child code {
    white-space: pre !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    max-width: none !important;
    min-width: 2.5em;
  }

  /* Avoid breaking inside short blocks; don't force headings to next page */
  blockquote, figure, img { break-inside: avoid; }
}

/* ──────────────────────────────────────────────────────────────────────
 * Tailwind 4 hx: utility fallbacks.
 *
 * Hextra v0.12.3 ships a precompiled main.css generated from its own
 * template scan. Utilities Hextra doesn't use internally aren't in the
 * bundle — so any class extras' or a consumer's templates emit that
 * Hextra doesn't happen to use silently no-ops.
 *
 * These rules fill the specific gaps extras' own templates introduce
 * (currently the taller navbar height). They use Hextra's --hx-spacing
 * token so they track the same scale.
 * ────────────────────────────────────────────────────────────────────── */

.hx\:h-20 { height: calc(var(--hx-spacing) * 20) }
.hx\:h-24 { height: calc(var(--hx-spacing) * 24) }

/* Navbar bottom border. Hextra's navbar template emits an arbitrary-value
   shadow class — `hx:shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)]`
   — to paint a subtle bottom hairline + soft drop shadow. Hextra's
   precompiled bundle does NOT include this class (the comma + bracket
   form gets skipped by their template scanner), so the navbar renders
   without any separation from content. The matching `dark:` and
   `contrast-more:` variants are also missing. Rebuild them as direct
   rules on .nav-container-blur. */
.nav-container-blur {
  box-shadow: 0 2px 4px rgba(0,0,0,.02), 0 1px 0 rgba(0,0,0,.06);
}
:where(.dark, .dark *) .nav-container-blur {
  box-shadow: 0 -1px 0 rgba(255,255,255,.1) inset;
}
@media (prefers-contrast: more) {
  .nav-container-blur { box-shadow: 0 0 0 1px #000; }
  :where(.dark, .dark *) .nav-container-blur { box-shadow: 0 0 0 1px #fff; }
}

/* ── Hextra tab buttons ─────────────────────────────────────────────────
   Hextra v0.12.3's native tabs style their