/* docs-theme-extras component baseline.
   Always loaded. Brand-specific colors / fonts live in brand-oss.css and
   brand-enterprise.css and are layered on top via head-end.html based on
   Site.Params.themeExtras.brand. Per-repo overrides go in the consumer's
   own assets/css/custom.css (which Hextra concats into its main bundle). */

/* ── Theme color vars ────────────────────────────────────────────────── */
/* Defaults are Tailwind blue-500/600/400 — generic brand-neutral primary.
   Brand layers (brand-enterprise.css, brand-oss.css) override these to
   the consumer's actual palette. Component rules below reference
   var(--theme-primary*) so swapping the brand layer swaps the color. */
:root {
  --theme-primary:       #3b82f6;
  --theme-primary-hover: #2563eb;
  --theme-primary-tint:  rgba(59, 130, 246, 0.1);
}
.dark {
  --theme-primary:       #60a5fa;
  --theme-primary-tint:  rgba(96, 165, 250, 0.1);
}

/* ── Light/dark image toggle ─────────────────────────────────────────── */
/* reuse-image uses .toggle-dark (light-mode image), reuse-image-dark uses
   .toggle-light (dark-mode image). Match old theme behavior. */
.toggle-dark  { display: block; }
.toggle-light { display: none;  }
.dark .toggle-light { display: block; }
.dark .toggle-dark  { display: none;  }

/* ── Cards shortcode grid ────────────────────────────────────────────── */
/* The module's `{{< cards >}}` shortcode emits
     <div class="hextra-cards hextra-cards-grid" style="--hextra-cols: N;">
   Hextra's bundled CSS styles `.hextra-cards` (grid-template-columns based
   on `--hextra-cards-grid-cols`) but not `.hextra-cards-grid`, and our
   shortcode uses the different `--hextra-cols` variable name. Without
   these rules the container is just a regular block element and cards
   stack full-width with no gap.
   Mobile-first responsive: 1 col by default, 2 at sm, --hextra-cols (3
   default) at lg. */
.hextra-cards-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .hextra-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .hextra-cards-grid {
    grid-template-columns: repeat(var(--hextra-cols, 3), minmax(0, 1fr));
  }
}

/* When a card is wrapped by another element — most commonly Goldmark's
   <p> around a card that itself lives inside a percent-form shortcode
   like `{{% version %}}{{< card >}}{{% /version %}}` — the wrapper
   becomes the direct grid child. CSS grid stretches the wrapper to the
   row's height, but the <a> card inside doesn't fill the wrapper.
   Result: a "short" card in an otherwise tall row.
   Force any single-card wrapper to be a transparent flex column so the
   card fills it. Scoped with :has() to single-child wrappers so plain
   text content inside <cards> isn't affected. */
.hextra-cards-grid > p:has(> .hextra-card:only-child) {
  display: flex;
  margin: 0;
}
.hextra-cards-grid > p:has(> .hextra-card:only-child) > .hextra-card {
  flex: 1;
}

/* ── Version banner ──────────────────────────────────────────────────── */
/* Matches old alert-info banner styling */
.version-banner {
  background: hsl(204, 45.5%, 97.8%);
  border: 1px solid #dee2e6;
  border-radius: 4px;
  color: var(--tw-prose-body, #374151);
  font-size: 0.9rem;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
  line-height: 1.5;
}

.version-banner p {
  margin: 0 !important;
}

.dark .version-banner {
  background: hsla(210, 100%, 50%, 0.1);
  border-color: #1e3a5f;
  color: #d1d5db;
}

/* ── Alerts and callouts ─────────────────────────────────────────────── */
/* Matches old docs-theme-lotus alert styling with Material Icons */
.solo-alert {
  display: flex;
  gap: 0.5rem;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: inherit;
}

.solo-alert-icon {
  flex-shrink: 0;
}

.solo-alert-icon .material-icons {
  font-size: 20px;
  vertical-align: middle;
}

.solo-alert-body {
  flex: 1;
  min-width: 0;
}

.solo-alert-body p {
  margin: 0 !important;
}

/* Alert color variants — light mode */
.alert-info    { background: hsl(204, 45.5%, 97.8%); }
.alert-warning { background: hsl(48, 100%, 96%); }
.alert-success { background: hsl(140, 50%, 96%); }
.alert-danger  { background: hsl(0, 70%, 97%); }
.alert-default { background: hsl(226, 68%, 95.1%); }

.alert-info .solo-alert-icon    { color: var(--theme-primary); }
.alert-warning .solo-alert-icon { color: #d97706; }
.alert-success .solo-alert-icon { color: #059669; }
.alert-danger .solo-alert-icon  { color: #dc2626; }
.alert-default .solo-alert-icon { color: #6b7280; }

/* Alert color variants — dark mode */
.dark .solo-alert { border-color: #374151; color: #d1d5db; }
.dark .alert-info    { background: hsla(210, 100%, 50%, 0.1); }
.dark .alert-warning { background: hsla(48, 100%, 50%, 0.1); }
.dark .alert-success { background: hsla(160, 100%, 40%, 0.1); }
.dark .alert-danger  { background: hsla(0, 100%, 50%, 0.1); }
.dark .alert-default { background: hsla(226, 68%, 50%, 0.05); }
.dark .alert-info .solo-alert-icon    { color: #60a5fa; }
.dark .alert-warning .solo-alert-icon { color: #fbbf24; }
.dark .alert-success .solo-alert-icon { color: #34d399; }
.dark .alert-danger .solo-alert-icon  { color: #f87171; }
.dark .alert-default .solo-alert-icon { color: #9ca3af; }

/* ── Copy as Markdown button ─────────────────────────────────────────── */
.copy-md-wrapper {
  display: inline-flex;
}

.copy-md-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  background: transparent;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}

.copy-md-btn:hover {
  color: var(--theme-primary);
  border-color: var(--theme-primary);
}

.copy-md-btn.copied {
  color: #059669;
  border-color: #059669;
}

.copy-md-icon {
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
}

.copy-md-source {
  display: none !important;
}

.dark .copy-md-btn {
  color: #9ca3af;
  border-color: #4b5563;
}
.dark .copy-md-btn:hover {
  color: var(--theme-primary);
  border-color: var(--theme-primary);
}
.dark .copy-md-btn.copied {
  color: #34d399;
  border-color: #34d399;
}

/* ── Full-width layout ───────────────────────────────────────────────── */
/* Wide layout — large enough to feel flush but bounded so TOC stays visible */
:root {
  --hextra-max-page-width: 100%;
  --hextra-max-navbar-width: 100%;
}

/* Show TOC at smaller viewport widths (default is xl/1280px) */
.hextra-toc {
  display: none;
}
@media (min-width: 1024px) {
  .hextra-toc {
    display: block !important;
  }
}

/* ── Typography ──────────────────────────────────────────────────────── */
/* Heading weight is component-shaped (lighter than hextra default). Heading
   *colors* are brand-specific and live in brand-{oss,enterprise}.css. */
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
  font-weight: 600 !important;
}

.content h1 {
  padding-top: 1.75rem;
}

/* Ensure spacing after headings even when followed by non-paragraph text (e.g. reuse snippets) */
.content h2, .content h3, .content h4, .content h5, .content h6 {
  margin-bottom: 1rem;
}

/* Body text size matching old theme — scoped to main content, not sidebar */
#content > .content p, #content > .content li {
  font-size: 1rem;
  line-height: 1.7;
}

/* ── Links ───────────────────────────────────────────────────────────── */
/* Link weight is component-shaped (consistent across brands). Link colors
   live in brand-{oss,enterprise}.css. */
.content a {
  font-weight: 500;
}

/* ── Code block highlighted lines ────────────────────────────────────── */
/* Expand code to the widest line. With .hl using width:max-content below,
   code's intrinsic max-content is unambiguously the widest line's text width
   (no circular dependency). .hl's min-width:100% then references this
   expanded code width, giving all highlights uniform width. */
.chroma pre > code {
  display: block;
  min-width: max-content;
}

.chroma .line.hl {
  display: block;
  width: max-content;
  min-width: 100%;
  background-color: var(--theme-primary-tint);
}

/* Line-number highlight: put the background on the .hl wrapper that contains
   .lnt (structure is <span class="hl"><span class="lnt">N</span></span>), so it
   spans the full line-number cell — not just the digit text. */
.chroma .lntable .hl:not(.line) {
  display: block;
  background-color: var(--theme-primary-tint);
}

/* Strip horizontal padding from <pre>s inside lntable so the line-number and
   code highlights meet flush and span the cell width uniformly. Hextra's own
   padding on .lnt / .hl provides breathing room within the highlight area. */
.content .chroma .lntable pre {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Remove gap between line number and code columns */
.lntable {
  border-spacing: 0 !important;
  border-collapse: collapse !important;
}

.lntd {
  vertical-align: top !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Remove right padding/margin on line number column */
.lntd:first-child {
  padding-right: 0 !important;
}

/* Remove left padding/margin on code column */
.lntd:last-child {
  padding-left: 0 !important;
}

/* ── Ordered lists (numbered steps) ──────────────────────────────────── */
/* Matches old docs-theme-lotus: grey background square with number */
#content > .content ol {
  list-style: none;
  padding-left: 0;
}

/* Flush top-level steps to the content edge. Hextra's prose adds
   margin-left: 1.5rem on every ol; we keep that for nested ols (which
   should stay indented under their parent step) but zero it for the
   first level. `ol:not(li ol)` matches ols that aren't inside any li. */
#content > .content ol:not(li ol) {
  margin-left: 0;
}

#content > .content ol > li {
  position: relative;
  padding-left: 27px;
  margin-top: 1rem;
  margin-left: 0;
}

#content > .content ol > li::before {
  content: counter(list-item);
  background: #ebf4f9;
  color: #343a40;
  font-size: 12px;
  font-weight: 500;
  line-height: 10px;
  text-align: center;
  padding: 5px 0;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  position: absolute;
  left: 0;
  top: 3px;
}

.dark #content > .content ol > li::before {
  background: #374151;
  color: #d1d5db;
}

/* Nested ordered lists: lowercase letters.
   `:not([start])` so that an explicit `<ol start="N">` continues the
   counter from the prior sibling nested ol — needed when a list-item's
   content includes a block (HTML pre, etc.) that Goldmark renders
   outside the parent <li>, splitting one logical list into two
   sibling <ol>s. Without this, item 9 after the split would render
   as "a" instead of "i". */
#content > .content ol ol:not([start]) {
  counter-reset: sublistitem;
}

#content > .content ol ol > li {
  counter-increment: sublistitem list-item 0;
}

#content > .content ol ol > li::before {
  content: counter(sublistitem, lower-alpha);
}

/* Doubly-nested ordered lists: lowercase roman numerals */
#content > .content ol ol ol:not([start]) {
  counter-reset: subsublistitem;
}

#content > .content ol ol ol > li {
  counter-increment: subsublistitem list-item 0;
}

#content > .content ol ol ol > li::before {
  content: counter(subsublistitem, lower-roman);
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
/* Tighten sidebar font to match old theme */
.hextra-sidebar-container {
  font-size: 0.875rem;
}

/* Hide the sidebar's scrollable content briefly on first paint to avoid the
   visible "scrolled to top → jump to active item" flash. Hextra's
   sidebar.js sets scrollTop on DOMContentLoaded; head-end.html adds the
   .sidebar-loading class during <head> parse and removes it via rAF
   after DCL, so the sidebar reveals at the correct scroll position. */
html.sidebar-loading .hextra-sidebar-container .hextra-scrollbar {
  visibility: hidden;
}

/* Product logo in sidebar */
.sidebar-product-logo {
  padding: 0.5rem 0 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.sidebar-product-logo img {
  width: 108%;
  max-width: 108%;
  height: auto;
}

.sidebar-logo-light { display: block; }
.sidebar-logo-dark { display: none; }
.dark .sidebar-logo-light { display: none; }
.dark .sidebar-logo-dark { display: block; }
.dark .sidebar-product-logo { border-bottom-color: #374151; }

/* Darken sidebar link text */
.hextra-sidebar-container .hextra-sidebar-item a {
  color: #1f2937 !important;
}
.dark .hextra-sidebar-container .hextra-sidebar-item a {
  color: #d1d5db !important;
}

/* Sidebar active item — matches old theme's grey instead of hextra's blue tint */
.hextra-sidebar-container .hextra-sidebar-active-item {
  background-color: #e8eaed !important;
  color: #1f2937 !important;
  border-radius: 6px !important;
}
.dark .hextra-sidebar-container .hextra-sidebar-active-item {
  background-color: #363c47 !important;
  color: #d1d5db !important;
}
/* Sidebar hover — matches old theme */
.hextra-sidebar-container .hextra-sidebar-item a:hover {
  background-color: #eff1f4 !important;
}
.dark .hextra-sidebar-container .hextra-sidebar-item a:hover {
  background-color: #2b303b !important;
}

/* ── Figure images in dark mode ──────────────────────────────────────────
   No automatic white-card wrapper. Authors that need a dark-mode variant
   of a screenshot use `reuse-image-dark` (wraps the dark image in
   `<div class="toggle-light">`, 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. */

/* ── Solo footer ─────────────────────────────────────────────────────── */
.solo-footer {
  border-top: 1px solid #e5e7eb;
  padding: 1rem 1.5rem 1.25rem;
  background: #fff;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #6b7280;
}
.solo-footer-inner {
  max-width: var(--hextra-max-page-width, 100%);
  margin: 0 auto;
  text-align: center;
}
.solo-footer p {
  margin: 0;
}
.dark .solo-footer {
  background: transparent;
  border-top-color: rgba(255, 255, 255, 0.1);
  color: #9ca3af;
}

#solo-back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--theme-primary);
  color: #fff;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 30;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
#solo-back-to-top:hover {
  background: var(--theme-primary-hover);
  transform: translateY(-1px);
}
#solo-back-to-top[hidden] {
  display: none;
}
.dark #solo-back-to-top {
  background: #2b3340;
  color: #d1d5db;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.dark #solo-back-to-top:hover {
  background: #3a4350;
}

/* TOC active item — matches sidebar active styling */
.hextra-toc ul li {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.hextra-toc a,
.hextra-toc a.toc-active {
  padding: 2px 8px;
  font-weight: 400 !important;
  transition: none !important;
}
/* Don't change text color on hover — only the active state should look
   different. Otherwise hovering one link while another is scroll-active
   makes them look mismatched. */
.hextra-toc a:hover {
  color: inherit !important;
  background-color: #f5f6f8;
  border-radius: 6px;
}
.dark .hextra-toc a:hover {
  background-color: #2b303b;
}
.hextra-toc a.toc-active {
  color: #111827 !important;
  background-color: #e8eaed;
  border-radius: 6px;
}
.dark .hextra-toc a.toc-active {
  color: #f9fafb !important;
  background-color: #363c47;
}

/* ── Page description (subtitle under <h1>) ──────────────────────────── */
/* 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 <pre>. Inner <pre>s keep their
   padding for code spacing.

   Scoped to `div.chroma` because Hugo emits `<pre class="chroma">` for
   plain blocks and `<div class="chroma">` for line-numbered ones. The
   non-`div` form is the <pre> 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 `<hr class="footnotes-sep">` 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
   `<section class="footnotes">` 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;
}

/* ── 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 {
    grid-template-columns: repeat(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%;
}

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

.section-card-icon {
  font-size: 28px;
  color: var(--theme-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.section-card-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.section-card-title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin: 16px 0 4px !important;
  color: #111827;
}

.section-card-desc {
  font-size: 0.75rem !important;
  color: #374151;
  margin: 0 !important;
  line-height: 1.5;
}

.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;
}

/* 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;
}

.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; }
}