/* Valentus Paint (valentus-theme 4.x). PAINT layer only: no layout, no behavior.
 *
 * 1. --cs-* scheme contract (see @antora-supplemental/color-scheme) with
 *    Valentus values for light (:root) and dark (html.dark-theme), plus the six
 *    --valentus-* names chassis-aware extensions read.
 * 2. --vp-* palette constants used by the rules below.
 * 3. Rules for standard Antora Default UI / Asciidoctor / Lunr classes only.
 *    Valentus markup (header, mast, tool band) is styled by valentus-layout,
 *    which reads the --cs-* tokens.
 * Black-alpha shadows (rgba(0, 0, 0, a)) stay inline; they are not palette.
 */
/* Schemes this paint provides (read by @antora-supplemental/color-scheme): light
   is the :root block, dark the html.dark-theme block. */
/* @color-schemes
{ "light": { "label": "Light" }, "dark": { "label": "Dark" } }
*/
:root {
  --cs-canvas: #f3f5f8;
  --cs-elevated: #ffffff;
  --cs-ink: #141820;
  --cs-ink-muted: #5a6270;
  --cs-border: #d9dee7;
  --cs-accent: #0e7068;
  --cs-accent-hover: #0c625b;
  --cs-accent-soft: rgba(15, 118, 110, 0.1);
  --cs-hover: rgba(0, 0, 0, 0.1);
  --cs-code-bg: #151a24;
  --cs-code-fg: #e8ecf2;
  --cs-admonition-note: var(--note-color, #217ee7);
  --cs-admonition-tip: var(--tip-color, #41af46);
  --cs-admonition-important: var(--important-color, #d32f2f);
  --cs-admonition-warning: var(--warning-color, #e18114);
  --cs-admonition-caution: var(--caution-color, #a0439c);

  --valentus-canvas: var(--cs-canvas);
  --valentus-elevated: var(--cs-elevated);
  --valentus-ink: var(--cs-ink);
  --valentus-ink-muted: var(--cs-ink-muted);
  --valentus-border: var(--cs-border);
  --valentus-accent: var(--cs-accent);

  --vp-bar: #141517;
  --vp-bar-ink: #f1f3f5;
  --vp-border: #373a40;
  --vp-border-strong: #495057;
  --vp-canvas: #1a1b1e;
  --vp-caution: #a0439c;
  --vp-code-ink: #e9ecef;
  --vp-control: #2c2e33;
  --vp-control-hover: #3b3d42;
  --vp-focus: #228be6;
  --vp-focus-dark: #339af0;
  --vp-green: #51cf66;
  --vp-hover: #1f2125;
  --vp-important: #d32f2f;
  --vp-ink: #c1c2c5;
  --vp-ink-faint: #909296;
  --vp-ink-soft: #adb5bd;
  --vp-input-border: #ced4da;
  --vp-link: #4dabf7;
  --vp-link-hover: #74c0fc;
  --vp-note: #217ee7;
  --vp-panel: #25262b;
  --vp-red: #ff6b6b;
  --vp-syn-builtin: #e6c07b;
  --vp-syn-comment: #5c6370;
  --vp-syn-function: #61afef;
  --vp-syn-keyword: #c678dd;
  --vp-syn-number: #d19a66;
  --vp-syn-string: #98c379;
  --vp-tile-border: #3d4048;
  --vp-tip: #41af46;
  --vp-toggle-ink: #1a1a1a;
  --vp-warning: #e18114;
  --vp-white: #ffffff;
  --vp-yellow: #fcc419;
  --vp-syntax-comment: #8b95a8;
  --vp-syntax-keyword: #7dd3c7;
  --vp-syntax-string: #f0b27a;
  --vp-syntax-number: #9db7ff;
  --vp-syntax-title: #e8ecf2;
  --vp-syntax-type: #f9a8d4;
  --vp-syntax-builtin: #67e8f9;
  --vp-syntax-meta: #94a3b8;
}

html.dark-theme {
  --cs-canvas: #0b0e13;
  --cs-elevated: #141a22;
  --cs-ink: #e8ebf0;
  --cs-ink-muted: #9aa3b2;
  --cs-border: rgba(255, 255, 255, 0.09);
  --cs-accent: #2dd4bf;
  --cs-accent-hover: #5eead4;
  --cs-accent-soft: rgba(45, 212, 191, 0.12);
  --cs-hover: #1f2125;
  --cs-code-bg: #080b10;
  --cs-code-fg: #e8ecf2;
}

/* Docs example Themed SVG palettes (match *.theme.json presets) */
/* Host CSS vars for docs example Themed SVG namespaces (match *.theme.json presets).
   Adaptive SVGs embed light+dark; host mode needs these on the document after runtime upgrade. */

:root {
  /* valentus-example-decision-flow */
  --themed-svg-valentus-example-decision-flow-color-canvas: #ffffff;
  --themed-svg-valentus-example-decision-flow-color-surface-primary: #f3f4f6;
  --themed-svg-valentus-example-decision-flow-color-surface-secondary: #ffffff;
  --themed-svg-valentus-example-decision-flow-color-text-primary: #1f2937;
  --themed-svg-valentus-example-decision-flow-color-border-primary: #6b7280;
  --themed-svg-valentus-example-decision-flow-color-edge: #4b5563;
  --themed-svg-valentus-example-decision-flow-color-edge-label: #374151;
  --themed-svg-valentus-example-decision-flow-color-accent-primary: #0f766e;

  /* valentus-example-authentication-sequence */
  --themed-svg-valentus-example-authentication-sequence-color-canvas: #ffffff;
  --themed-svg-valentus-example-authentication-sequence-color-surface-primary: #f3f4f6;
  --themed-svg-valentus-example-authentication-sequence-color-surface-secondary: #ffffff;
  --themed-svg-valentus-example-authentication-sequence-color-text-primary: #1f2937;
  --themed-svg-valentus-example-authentication-sequence-color-border-primary: #6b7280;
  --themed-svg-valentus-example-authentication-sequence-color-edge: #4b5563;
  --themed-svg-valentus-example-authentication-sequence-color-edge-label: #374151;
  --themed-svg-valentus-example-authentication-sequence-color-accent-primary: #0f766e;
}

html.dark-theme {
  --themed-svg-valentus-example-decision-flow-color-canvas: #111827;
  --themed-svg-valentus-example-decision-flow-color-surface-primary: #293548;
  --themed-svg-valentus-example-decision-flow-color-surface-secondary: #1f2937;
  --themed-svg-valentus-example-decision-flow-color-text-primary: #f9fafb;
  --themed-svg-valentus-example-decision-flow-color-border-primary: #9ca3af;
  --themed-svg-valentus-example-decision-flow-color-edge: #d1d5db;
  --themed-svg-valentus-example-decision-flow-color-edge-label: #e5e7eb;
  --themed-svg-valentus-example-decision-flow-color-accent-primary: #5eead4;

  --themed-svg-valentus-example-authentication-sequence-color-canvas: #111827;
  --themed-svg-valentus-example-authentication-sequence-color-surface-primary: #293548;
  --themed-svg-valentus-example-authentication-sequence-color-surface-secondary: #1f2937;
  --themed-svg-valentus-example-authentication-sequence-color-text-primary: #f9fafb;
  --themed-svg-valentus-example-authentication-sequence-color-border-primary: #9ca3af;
  --themed-svg-valentus-example-authentication-sequence-color-edge: #d1d5db;
  --themed-svg-valentus-example-authentication-sequence-color-edge-label: #e5e7eb;
  --themed-svg-valentus-example-authentication-sequence-color-accent-primary: #5eead4;
}

/* Valentus paint: Default UI dark-theme palette + .theme-toggle look.
 * Mechanism (html.dark-theme, data-theme, persistence, toggle behavior, theme
 * crossfade) is @antora-supplemental/color-scheme (antora-ui-chassis).
 * Formerly the vendored antora-dark-mode site-extra.css. */
/* Dark mode styles for Antora default UI */
html.dark-theme,
html.dark-theme body {
  background-color: var(--vp-canvas);
  color: var(--vp-ink);
}

html.dark-theme a {
  color: var(--vp-link);
}

html.dark-theme a:hover,
html.dark-theme a:focus {
  color: var(--vp-link-hover);
}

html.dark-theme .navbar {
  background-color: var(--vp-bar);
  color: var(--vp-bar-ink);
}

html.dark-theme .navbar a,
html.dark-theme .navbar .navbar-item,
html.dark-theme .navbar .navbar-link {
  color: var(--vp-bar-ink);
}

html.dark-theme .navbar .navbar-item:hover,
html.dark-theme .navbar .navbar-link:hover {
  background-color: var(--vp-hover);
}

/* Topbar nav area matches navbar for consistent strip (like light theme) */
html.dark-theme .navbar .navbar-menu {
  background-color: var(--vp-bar);
  border-color: var(--vp-border);
}

/* Dropdown panel distinct from navbar so it reads as a menu */
html.dark-theme .navbar .navbar-dropdown {
  background-color: var(--vp-panel);
  border-color: var(--vp-border);
}

/* Dropdown item hover same as regular navbar item hover */
html.dark-theme .navbar .navbar-dropdown .navbar-item:hover {
  background-color: var(--vp-hover);
}

html.dark-theme .navbar .button,
html.dark-theme .navbar .button.is-primary {
  background-color: var(--vp-control);
  border-color: var(--vp-border);
  color: var(--vp-bar-ink);
}

html.dark-theme .navbar .button:hover,
html.dark-theme .navbar .button.is-primary:hover {
  background-color: var(--vp-control-hover);
}

html.dark-theme .nav,
html.dark-theme .nav-panel-menu,
html.dark-theme .nav-panel-explore,
html.dark-theme .toolbar {
  background-color: var(--vp-panel);
  border-color: var(--vp-border);
  color: var(--vp-ink);
}

/* TOC sidebar transparent so it inherits page background (easier to theme) */
html.dark-theme .toc.sidebar {
  background-color: transparent;
  border-color: var(--vp-border);
  color: var(--vp-ink);
}

html.dark-theme .nav .title,
html.dark-theme .nav .title a,
html.dark-theme .nav .nav-link,
html.dark-theme .nav .nav-text,
html.dark-theme .toc.sidebar,
html.dark-theme .toc.sidebar a {
  color: var(--vp-ink);
}

html.dark-theme .toc .title,
html.dark-theme .toc .title a,
html.dark-theme .toc .toc-menu h3 {
  color: var(--vp-white);
}

html.dark-theme .nav .nav-item.is-current-page>.nav-link {
  color: var(--vp-white);
}

html.dark-theme .content,
html.dark-theme .doc {
  color: var(--vp-ink);
}

html.dark-theme .doc h1,
html.dark-theme .doc h2,
html.dark-theme .doc h3,
html.dark-theme .doc h4,
html.dark-theme .doc h5,
html.dark-theme .doc h6,
html.dark-theme .doc .title,
html.dark-theme .doc .heading {
  color: var(--vp-white);
}

html.dark-theme .doc .sect1,
html.dark-theme .doc .sect2,
html.dark-theme .doc .sect3,
html.dark-theme .doc .sect4 {
  border-color: var(--vp-border);
}

html.dark-theme .exampleblock:not(.tile),
html.dark-theme .sidebarblock,
html.dark-theme .quoteblock,
html.dark-theme .literalblock,
html.dark-theme .listingblock,
html.dark-theme .openblock:not(.cards),
html.dark-theme .tableblock {
  background-color: var(--vp-panel);
  border-color: var(--vp-border);
}

/* Admonitions: do not paint the whole table — TIP/NOTE labels live in td.icon
   above the bordered td.content card (Antora default UI + Valentus layout). */
html.dark-theme .admonitionblock {
  background-color: transparent;
  border-color: transparent;
}

/* All block types - more specific selectors for Antora */
html.dark-theme .doc .sidebarblock,
html.dark-theme .doc .sidebarblock>.content {
  background-color: var(--vp-panel) !important;
  background: var(--vp-panel) !important;
  border-color: var(--vp-border);
}

html.dark-theme .doc .exampleblock:not(.tile),
html.dark-theme .doc .exampleblock:not(.tile) > .content {
  background-color: var(--vp-hover) !important;
  background: var(--vp-hover) !important;
  border-color: var(--vp-border);
}

html.dark-theme .doc .quoteblock,
html.dark-theme .doc .quoteblock blockquote,
html.dark-theme .doc .quoteblock>blockquote {
  background-color: var(--vp-hover) !important;
  background: var(--vp-hover) !important;
  border-color: var(--vp-link);
}

html.dark-theme .doc .quoteblock .attribution,
html.dark-theme .doc .quoteblock cite {
  color: var(--vp-ink-faint);
}

html.dark-theme .doc .verseblock,
html.dark-theme .doc .verseblock pre,
html.dark-theme .doc .verseblock>pre {
  background-color: var(--vp-hover) !important;
  background: var(--vp-hover) !important;
  border-color: var(--vp-border);
  color: var(--vp-ink);
}

html.dark-theme .doc .literalblock,
html.dark-theme .doc .literalblock>.content,
html.dark-theme .doc .literalblock pre {
  background-color: var(--vp-bar) !important;
  background: var(--vp-bar) !important;
  border-color: var(--vp-border);
}

html.dark-theme .doc .listingblock,
html.dark-theme .doc .listingblock>.content {
  background-color: var(--vp-bar) !important;
  background: var(--vp-bar) !important;
  border-color: var(--vp-border);
}

html.dark-theme .doc .openblock:not(.cards),
html.dark-theme .doc .openblock:not(.cards) > .content {
  background-color: transparent !important;
  background: transparent !important;
  border-color: var(--vp-border);
}

/* Collapsible blocks (details/summary) */
html.dark-theme .doc details,
html.dark-theme .doc details[open],
html.dark-theme .doc .exampleblock.is-collapsible,
html.dark-theme .doc details>summary {
  background-color: var(--vp-hover) !important;
  background: var(--vp-hover) !important;
  border-color: var(--vp-border);
  color: var(--vp-ink);
}

html.dark-theme .doc details>.content {
  background-color: var(--vp-hover) !important;
  background: var(--vp-hover) !important;
}

/* Block titles */
html.dark-theme .doc .sidebarblock>.content>.title,
html.dark-theme .doc .exampleblock>.content>.title,
html.dark-theme .doc .quoteblock>.title,
html.dark-theme .doc .verseblock>.title,
html.dark-theme .doc .literalblock>.title,
html.dark-theme .doc .listingblock>.title,
html.dark-theme .doc .openblock>.title {
  color: var(--vp-white);
}

/* Admonition blocks — Valentus wraps TIP/NOTE in one table card; tint the table,
   not individual cells (cell washes put the label outside the border). */
html.dark-theme .doc .admonitionblock,
html.dark-theme .doc .admonitionblock > table > tbody,
html.dark-theme .doc .admonitionblock > table > tbody > tr,
html.dark-theme .doc .admonitionblock > table > tbody > tr > td.icon,
html.dark-theme .doc .admonitionblock > table > tbody > tr > td.content {
  background-color: transparent !important;
  background: transparent !important;
}

html.dark-theme .doc .admonitionblock > table {
  background-color: var(--vp-panel) !important;
  background: var(--vp-panel) !important;
}

html.dark-theme .doc .admonitionblock td.content {
  color: var(--vp-ink);
}

html.dark-theme .doc .admonitionblock .title {
  color: var(--vp-white);
}

/* Specific admonition types: tint the outer card (table), not the TIP label cell.
   One `background` only (no separate background-color fallback — that caused two-tone cards). */
html.dark-theme .doc .admonitionblock.tip > table {
  background: color-mix(in srgb, var(--valentus-admonition-tip, var(--vp-tip)) 14%, var(--vp-panel)) !important;
  border-left-color: var(--valentus-admonition-tip, var(--vp-tip)) !important;
}

html.dark-theme .doc .admonitionblock.note > table {
  background: color-mix(in srgb, var(--valentus-admonition-note, var(--vp-note)) 14%, var(--vp-panel)) !important;
  border-left-color: var(--valentus-admonition-note, var(--vp-note)) !important;
}

html.dark-theme .doc .admonitionblock.warning > table {
  background: color-mix(in srgb, var(--valentus-admonition-warning, var(--vp-warning)) 14%, var(--vp-panel)) !important;
  border-left-color: var(--valentus-admonition-warning, var(--vp-warning)) !important;
}

html.dark-theme .doc .admonitionblock.caution > table {
  background: color-mix(in srgb, var(--valentus-admonition-caution, var(--vp-caution)) 14%, var(--vp-panel)) !important;
  border-left-color: var(--valentus-admonition-caution, var(--vp-caution)) !important;
}

html.dark-theme .doc .admonitionblock.important > table {
  background: color-mix(in srgb, var(--valentus-admonition-important, var(--vp-important)) 14%, var(--vp-panel)) !important;
  border-left-color: var(--valentus-admonition-important, var(--vp-important)) !important;
}

html.dark-theme .quoteblock blockquote,
html.dark-theme .quoteblock p {
  color: var(--vp-ink-soft);
}

html.dark-theme code,
html.dark-theme pre,
html.dark-theme pre code {
  background-color: var(--vp-bar);
  color: var(--vp-code-ink);
  border-color: var(--vp-border);
}

/* Code blocks - more specific selectors for Antora */
html.dark-theme .doc code,
html.dark-theme .doc pre,
html.dark-theme .doc .listingblock pre,
html.dark-theme .doc .listingblock pre.highlight,
html.dark-theme .doc .listingblock pre.highlight code,
html.dark-theme .doc .literalblock pre,
html.dark-theme .doc pre.content,
html.dark-theme .doc pre.pygments,
html.dark-theme .doc pre.rouge,
html.dark-theme .doc pre.CodeMirror,
html.dark-theme .doc .highlight pre,
html.dark-theme .doc .highlight code {
  background-color: var(--vp-bar) !important;
  color: var(--vp-code-ink);
  border-color: var(--vp-border);
}

html.dark-theme .doc .listingblock .content,
html.dark-theme .doc .literalblock .content {
  background-color: var(--vp-bar);
}

/* Inline code */
html.dark-theme .doc p code,
html.dark-theme .doc td code,
html.dark-theme .doc li code,
html.dark-theme .doc dt code,
html.dark-theme .doc dd code {
  background-color: var(--vp-control);
  color: var(--vp-red);
  border: 1px solid var(--vp-border);
  border-radius: 0.25rem;
  padding: 0.1em 0.35em;
}

/* Syntax highlighting colors for dark mode */
html.dark-theme .doc .hljs,
html.dark-theme .doc .highlight {
  background-color: var(--vp-bar) !important;
}

html.dark-theme .doc .hljs-keyword,
html.dark-theme .doc .hljs-selector-tag,
html.dark-theme .doc .hljs-literal,
html.dark-theme .doc .hljs-section,
html.dark-theme .doc .hljs-link {
  color: var(--vp-syn-keyword);
}

html.dark-theme .doc .hljs-string,
html.dark-theme .doc .hljs-title,
html.dark-theme .doc .hljs-name,
html.dark-theme .doc .hljs-type,
html.dark-theme .doc .hljs-attribute,
html.dark-theme .doc .hljs-symbol,
html.dark-theme .doc .hljs-bullet,
html.dark-theme .doc .hljs-addition,
html.dark-theme .doc .hljs-variable,
html.dark-theme .doc .hljs-template-tag,
html.dark-theme .doc .hljs-template-variable {
  color: var(--vp-syn-string);
}

html.dark-theme .doc .hljs-comment,
html.dark-theme .doc .hljs-quote,
html.dark-theme .doc .hljs-deletion,
html.dark-theme .doc .hljs-meta {
  color: var(--vp-syn-comment);
}

html.dark-theme .doc .hljs-number,
html.dark-theme .doc .hljs-regexp,
html.dark-theme .doc .hljs-literal,
html.dark-theme .doc .hljs-link {
  color: var(--vp-syn-number);
}

html.dark-theme .doc .hljs-built_in,
html.dark-theme .doc .hljs-builtin-name {
  color: var(--vp-syn-builtin);
}

html.dark-theme .doc .hljs-function {
  color: var(--vp-syn-function);
}

html.dark-theme table {
  border-color: var(--vp-border);
}

html.dark-theme table thead,
html.dark-theme table tfoot {
  background-color: var(--vp-hover);
}

html.dark-theme table tbody tr:nth-child(even) {
  background-color: var(--vp-hover);
}

html.dark-theme .footer {
  background-color: var(--vp-bar);
  color: var(--vp-ink-faint);
}

html.dark-theme .footer a {
  color: var(--vp-bar-ink);
}

#search-input {
  border: 1px solid var(--vp-input-border);
  border-radius: 0.25rem;
  background: var(--vp-white);
  color: inherit;
  font-size: 0.875rem;
  min-height: 1.75rem;
  padding: 0.2rem 0.5rem;
}

#search-input:focus {
  outline: 2px solid var(--vp-focus);
  outline-offset: 1px;
}

html.dark-theme #search-input {
  background-color: var(--vp-control);
  color: var(--vp-white);
  border-color: var(--vp-border);
}

html.dark-theme #search-input:focus {
  outline-color: var(--vp-focus-dark);
}

html.dark-theme .search-result-dataset {
  background: var(--vp-panel);
  border-color: var(--vp-border);
}

html.dark-theme .search-result-component-header {
  color: var(--vp-bar-ink);
  border-bottom-color: var(--vp-border);
}

html.dark-theme .search-result-document-title {
  color: var(--vp-ink);
  border-right-color: var(--vp-border);
}

html.dark-theme .search-result-document-hit {
  color: var(--vp-ink-faint);
}

html.dark-theme .search-result-document-hit > a {
  color: inherit;
}

html.dark-theme .search-result-document-hit > a:hover {
  background-color: color-mix(in srgb, var(--vp-link) 10%, transparent);
}

html.dark-theme .search-result-document-hit .search-result-highlight {
  color: var(--vp-link-hover);
  background: color-mix(in srgb, var(--vp-link) 15%, transparent);
}

html.dark-theme .search-result-document-hit .search-result-section-title {
  color: var(--vp-bar-ink);
}

html.dark-theme #search-field .filter {
  background-color: var(--vp-control);
  border-color: var(--vp-border);
  color: var(--vp-ink);
}

html.dark-theme .home-link {
  color: var(--vp-white);
}

/* Toggle button styles
   Light-mode navbar tone: playbook site.keys.dark_mode_navbar → meta[name=dm-navbar] → html[data-dm-navbar].
   dark (default): Antora default UI black top bar — inherit white icon from navbar.
   light: light top bar — dark icon; set dark_mode_navbar: light or meta content="light". */
/* Default UI navbar only — Valentus header uses .valentus-header-icon-btn (site-doc-layout.css). */
.theme-toggle:not(.valentus-header-icon-btn) {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  font-size: 0.9rem;
  height: 100%;
}

html:not(.dark-theme):not([data-dm-navbar="light"]) .theme-toggle:not(.valentus-header-icon-btn):hover {
  background-color: var(--vp-hover);
}

html[data-dm-navbar="light"]:not(.dark-theme) .theme-toggle:not(.valentus-header-icon-btn) {
  color: var(--vp-toggle-ink);
}

html[data-dm-navbar="light"]:not(.dark-theme) .theme-toggle:not(.valentus-header-icon-btn):hover {
  background-color: rgba(0, 0, 0, 0.07);
}

.theme-toggle:not(.valentus-header-icon-btn) .theme-icon {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle:not(.valentus-header-icon-btn) .theme-icon path,
.theme-toggle:not(.valentus-header-icon-btn) .theme-icon circle {
  fill: none;
}

html.dark-theme .theme-toggle:not(.valentus-header-icon-btn):hover {
  background-color: var(--vp-control);
}

/* Dark mode icon fixes for navigation panels */
/* Use masks to force icons to absolute colors so they don't break if base SVG colors change */
html.dark-theme .nav-toggle,
html.dark-theme .home-link,
html.dark-theme .nav-item-toggle,
html.dark-theme .nav-menu-toggle {
  background-image: none !important;
  background-color: var(--vp-ink); /* Hardcoded light grey to match theme text */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  filter: none !important;
}

html.dark-theme .nav-toggle {
  -webkit-mask-image: url(../img/menu.svg);
  mask-image: url(../img/menu.svg);
  -webkit-mask-size: 49%;
  mask-size: 49%;
}

html.dark-theme .home-link {
  -webkit-mask-image: url(../img/home-o.svg);
  mask-image: url(../img/home-o.svg);
  -webkit-mask-size: normal;
  mask-size: normal;
}

html.dark-theme .nav-item-toggle {
  background-color: var(--valentus-nav-item-toggle);
  -webkit-mask-image: url(../img/caret.svg);
  mask-image: url(../img/caret.svg);
  -webkit-mask-size: 50%;
  mask-size: 50%;
  opacity: 0.8;
}

html.dark-theme .nav-menu-toggle {
  -webkit-mask-image: url(../img/octicons-16.svg#view-unfold);
  mask-image: url(../img/octicons-16.svg#view-unfold);
  -webkit-mask-size: 100%;
  mask-size: 100%;
}

/* Component/version selector in navigation */
html.dark-theme .nav-panel-explore .context .version {
  color: var(--vp-code-ink);
  background-color: var(--vp-control);
  padding: 0.1rem 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid var(--vp-border);
}

html.dark-theme .nav-panel-explore .context .version:hover {
  color: var(--vp-white);
  background-color: var(--vp-control-hover);
  border-color: var(--vp-link);
}

/* Chevron icon in component/version selector */
html.dark-theme .nav-panel-explore .context .version::after {
  background-image: none !important;
  background-color: var(--vp-white); /* Brighter white for the context selector */
  -webkit-mask: url(../img/chevron.svg) no-repeat 100%/auto 100%;
  mask: url(../img/chevron.svg) no-repeat 100%/auto 100%;
  filter: none !important;
}

/* Component/version dropdown menu and parent containers */
html.dark-theme .nav-panel-explore .components,
html.dark-theme .nav-panel-explore .component,
html.dark-theme .nav-panel-explore .component-menu,
html.dark-theme .nav-panel-explore .versions,
html.dark-theme .nav-panel-explore .component-menu ul,
html.dark-theme .nav-panel-explore .versions ul,
html.dark-theme .nav-panel-explore .context div {
  background-color: var(--vp-panel);
  color: var(--vp-ink);
}

html.dark-theme .nav-panel-explore .component-menu a,
html.dark-theme .nav-panel-explore .versions a {
  color: var(--vp-code-ink);
  background-color: var(--vp-control);
  padding: 0.25rem 0.6rem;
  margin: 0.15rem 0;
  display: block;
  border-radius: 0.25rem;
  border: 1px solid var(--vp-border);
  transition: all 0.2s ease;
}

html.dark-theme .nav-panel-explore .component-menu a:hover,
html.dark-theme .nav-panel-explore .versions a:hover,
html.dark-theme .nav-panel-explore .component-menu li:hover,
html.dark-theme .nav-panel-explore .versions li:hover {
  background-color: var(--vp-control-hover);
  color: var(--vp-white);
  border-color: var(--vp-link);
}

html.dark-theme .nav-panel-explore .component-menu .is-current,
html.dark-theme .nav-panel-explore .versions .is-current {
  background-color: var(--vp-bar);
  color: var(--vp-link);
  font-weight: 600;
  border-color: var(--vp-link);
}

/* Reduce strong inner shadow on component/version dropdown */
html.dark-theme .nav-panel-explore .components,
html.dark-theme .nav-panel-explore .component,
html.dark-theme .nav-panel-explore .versions {
  box-shadow: none;
}

html.dark-theme .nav-panel-explore .context .selector {
  box-shadow: none;
}

html.dark-theme .nav-panel-explore .context .selector .components {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Keyboard, button, and menu macros */
html.dark-theme kbd {
  background-color: var(--vp-control);
  color: var(--vp-code-ink);
  border-color: var(--vp-border-strong);
  box-shadow: 0 1px 0 var(--vp-border-strong);
}

html.dark-theme .button,
html.dark-theme .btn {
  background-color: var(--vp-control);
  color: var(--vp-code-ink);
  border-color: var(--vp-border-strong);
}

html.dark-theme .menuseq,
html.dark-theme .menu {
  color: var(--vp-ink);
}

html.dark-theme .menuseq .caret,
html.dark-theme .menuseq .submenu::before {
  color: var(--vp-ink-faint);
}

/* Tabs extension support */
html.dark-theme .tabs ul {
  background-color: var(--vp-hover);
  border-color: var(--vp-border);
}

html.dark-theme .tabs ul li {
  background-color: var(--vp-panel);
  border-color: var(--vp-border);
  color: var(--vp-ink);
}

html.dark-theme .tabs ul li.is-active,
html.dark-theme .tabs ul li[aria-selected="true"] {
  background-color: var(--vp-bar);
  color: var(--vp-white);
  border-bottom-color: var(--vp-bar);
}

html.dark-theme .tabs ul li:hover {
  background-color: var(--vp-control);
  color: var(--vp-white);
}

html.dark-theme .tabpanel,
html.dark-theme .tabs-content {
  background-color: var(--vp-bar);
  border-color: var(--vp-border);
}

/* STEM / Math rendering */
html.dark-theme .stemblock,
html.dark-theme .mathblock {
  color: var(--vp-code-ink);
}

/* Icon roles */
html.dark-theme .icon.red,
html.dark-theme [role="red"] {
  color: var(--vp-red);
}

html.dark-theme .icon.green,
html.dark-theme [role="green"] {
  color: var(--vp-green);
}

html.dark-theme .icon.yellow,
html.dark-theme [role="yellow"] {
  color: var(--vp-yellow);
}

html.dark-theme .icon.blue,
html.dark-theme [role="blue"] {
  color: var(--vp-link);
}

/* Video embeds wrapper */
html.dark-theme .videoblock {
  background-color: transparent;
}

/* Doc home: .openblock.cards + .exampleblock.tile
   Shipped in Valentus Paint so Antora prebuilds pick it up. */
:root {
  --doc-tile-radius: 0.5rem;
  --doc-tile-border-color: var(--panel-border-color);
  --doc-tile-background: var(--color-white);
  --doc-tile-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);
  --doc-tile-shadow-hover: 0 4px 8px -2px rgba(0, 0, 0, 0.1), 0 12px 24px -4px rgba(0, 0, 0, 0.12);
  --doc-tile-transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .doc .openblock.cards .exampleblock.tile > .content:hover {
    box-shadow: var(--doc-tile-shadow-hover);
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .doc .openblock.cards .exampleblock.tile > .content {
    transition: none;
  }

  .doc .openblock.cards .exampleblock.tile > .content:hover {
    box-shadow: var(--doc-tile-shadow);
    transform: none;
  }
}

html.dark-theme {
  --doc-tile-border-color: var(--vp-tile-border);
  --doc-tile-background: var(--vp-hover);
  --doc-tile-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.45);
  --doc-tile-shadow-hover: 0 6px 12px rgba(0, 0, 0, 0.4), 0 14px 32px rgba(0, 0, 0, 0.5);
}

@media print {
  .doc .openblock.cards .exampleblock.tile > .content {
    box-shadow: none !important;
    transform: none !important;
  }
}

/* Syntax colors tuned for dark code panels */
.doc .hljs-comment,
.doc .hljs-quote {
  color: var(--vp-syntax-comment) !important;
  font-style: italic;
}

.doc .hljs-keyword,
.doc .hljs-selector-tag,
.doc .hljs-subst {
  color: var(--vp-syntax-keyword) !important;
  font-weight: 500;
}

.doc .hljs-string,
.doc .hljs-doctag {
  color: var(--vp-syntax-string) !important;
}

.doc .hljs-number,
.doc .hljs-literal,
.doc .hljs-variable,
.doc .hljs-template-variable,
.doc .hljs-tag .hljs-attr {
  color: var(--vp-syntax-number) !important;
}

.doc .hljs-title,
.doc .hljs-section,
.doc .hljs-selector-id {
  color: var(--vp-syntax-title) !important;
  font-weight: 600;
}

.doc .hljs-type,
.doc .hljs-class .hljs-title {
  color: var(--vp-syntax-type) !important;
}

.doc .hljs-built_in,
.doc .hljs-builtin-name {
  color: var(--vp-syntax-builtin) !important;
}

.doc .hljs-meta {
  color: var(--vp-syntax-meta) !important;
}

/* Markup tags, names, and attributes: without this the Default UI's navy
   (#000080) shows on the dark code panel in both schemes. */
.doc .hljs-tag,
.doc .hljs-name,
.doc .hljs-attribute {
  color: var(--vp-syntax-string) !important;
}