/*
 * Host-mode diagram palette. The runtime inlines only marked figures, so these
 * variables cross the former <img> boundary and follow Valentus' manual theme.
 * Namespace `diagram` is the default for general-knowledge (and most) figures;
 * `nav-typology` is the docs-hub sample under publishing/.
 */
:root {
  --themed-svg-diagram-color-canvas: var(--valentus-canvas, #f3f1ec);
  --themed-svg-diagram-color-surface-primary: var(--valentus-elevated, #ffffff);
  --themed-svg-diagram-color-surface-secondary: color-mix(
    in srgb,
    var(--valentus-accent, #127266) 14%,
    var(--valentus-elevated, #ffffff)
  );
  --themed-svg-diagram-color-text-primary: var(--valentus-ink, #1a1a1a);
  --themed-svg-diagram-color-border-primary: var(--valentus-border, #2c2c2c);
  --themed-svg-diagram-color-edge: var(--valentus-ink-muted, #2c2c2c);
  --themed-svg-diagram-color-accent-primary: var(--valentus-accent, #127266);
  --themed-svg-diagram-color-accent-on-primary: #f7f3e8;
  --themed-svg-diagram-color-status-warning: color-mix(
    in srgb,
    var(--valentus-admonition-warning, #d97706) 14%,
    var(--valentus-elevated, #ffffff)
  );
  --themed-svg-diagram-color-status-warning-border: var(--valentus-admonition-warning, #d97706);
  --themed-svg-diagram-color-status-danger: color-mix(
    in srgb,
    var(--valentus-admonition-important, #dc2626) 14%,
    var(--valentus-elevated, #ffffff)
  );
  --themed-svg-diagram-color-status-danger-border: var(--valentus-admonition-important, #dc2626);

  --themed-svg-nav-typology-color-canvas: var(--valentus-canvas, #f3f1ec);
  --themed-svg-nav-typology-color-surface-primary: var(--valentus-elevated, #ffffff);
  --themed-svg-nav-typology-color-text-primary: var(--valentus-ink, #1a1a1a);
  --themed-svg-nav-typology-color-border-primary: var(--valentus-border, #2c3e5a);
  --themed-svg-nav-typology-color-edge: var(--valentus-ink-muted, #2c3e5a);
  --themed-svg-nav-typology-color-edge-label: var(--valentus-ink-muted, #2c3e5a);

  /* agent-rules component diagrams */
  --themed-svg-rules-geography-color-canvas: var(--valentus-canvas, #f8fafc);
  --themed-svg-rules-geography-color-surface-primary: var(--valentus-elevated, #ffffff);
  --themed-svg-rules-geography-color-surface-shared: #e8f0ea;
  --themed-svg-rules-geography-color-surface-personal: #f3ebe3;
  --themed-svg-rules-geography-color-surface-machine: #e8eef4;
  --themed-svg-rules-geography-color-surface-warning: #fff7ed;
  --themed-svg-rules-geography-color-text-primary: var(--valentus-ink, #0f172a);
  --themed-svg-rules-geography-color-border-primary: var(--valentus-border, #475569);
  --themed-svg-rules-geography-color-edge: var(--valentus-ink-muted, #475569);
  --themed-svg-rules-geography-color-edge-label: var(--valentus-ink-muted, #334155);

  --themed-svg-agent-cli-auth-color-canvas: var(--valentus-canvas, #f8fafc);
  --themed-svg-agent-cli-auth-color-surface-operator: #e2e8f0;
  --themed-svg-agent-cli-auth-color-surface-store: #dbeafe;
  --themed-svg-agent-cli-auth-color-surface-entry: #dcfce7;
  --themed-svg-agent-cli-auth-color-surface-cli: #fef3c7;
  --themed-svg-agent-cli-auth-color-surface-stamps: var(--valentus-elevated, #ffffff);
  --themed-svg-agent-cli-auth-color-text-primary: var(--valentus-ink, #0f172a);
  --themed-svg-agent-cli-auth-color-border-primary: var(--valentus-border, #475569);
  --themed-svg-agent-cli-auth-color-edge: var(--valentus-ink-muted, #334155);

  /* uniconfig component diagrams */
  --themed-svg-uniconfig-layers-color-canvas: var(--valentus-canvas, #f4f1eb);
  --themed-svg-uniconfig-layers-color-surface-panel: #ece8e1;
  --themed-svg-uniconfig-layers-color-surface-meaning: #2c4f4b;
  --themed-svg-uniconfig-layers-color-surface-storage: #1c1c1e;
  --themed-svg-uniconfig-layers-color-text-primary: var(--valentus-ink, #1c1c1e);
  --themed-svg-uniconfig-layers-color-text-inverse: #ece8e1;
  --themed-svg-uniconfig-layers-color-border-primary: var(--valentus-border, #1c1c1e);
  --themed-svg-uniconfig-layers-color-edge: #4b7f7a;

  --themed-svg-uniconfig-schema-minus-instance-color-canvas: var(--valentus-canvas, #f4f1eb);
  --themed-svg-uniconfig-schema-minus-instance-color-surface-instance: var(--valentus-elevated, #ffffff);
  --themed-svg-uniconfig-schema-minus-instance-color-surface-panel: #ece8e1;
  --themed-svg-uniconfig-schema-minus-instance-color-text-primary: var(--valentus-ink, #1c1c1e);
  --themed-svg-uniconfig-schema-minus-instance-color-text-muted: #4a4742;
  --themed-svg-uniconfig-schema-minus-instance-color-border-primary: var(--valentus-border, #1c1c1e);
  --themed-svg-uniconfig-schema-minus-instance-color-edge: #4b7f7a;
  --themed-svg-uniconfig-schema-minus-instance-color-edge-label: var(--valentus-canvas, #f4f1eb);
}

html.dark-theme {
  --themed-svg-diagram-color-accent-on-primary: #071512;
  --themed-svg-diagram-color-status-warning: #4a3e24;
  --themed-svg-diagram-color-status-warning-border: #d5b866;
  --themed-svg-diagram-color-status-danger: #542d2d;
  --themed-svg-diagram-color-status-danger-border: #e99a9a;

  --themed-svg-nav-typology-color-surface-success: #183629;
  --themed-svg-nav-typology-color-surface-danger: #471f24;
  --themed-svg-nav-typology-color-text-success: #d1fae5;
  --themed-svg-nav-typology-color-text-danger: #fee2e2;
  --themed-svg-nav-typology-color-status-success: #6ee7b7;
  --themed-svg-nav-typology-color-status-danger: #fca5a5;

  /* agent-rules + uniconfig (component diagrams on this hub) */
  --themed-svg-rules-geography-color-canvas: var(--valentus-canvas, #111827);
  --themed-svg-rules-geography-color-surface-primary: var(--valentus-elevated, #1f2937);
  --themed-svg-rules-geography-color-surface-shared: #17352b;
  --themed-svg-rules-geography-color-surface-personal: #422c24;
  --themed-svg-rules-geography-color-surface-machine: #172f4d;
  --themed-svg-rules-geography-color-surface-warning: #431f14;
  --themed-svg-rules-geography-color-text-primary: var(--valentus-ink, #f8fafc);
  --themed-svg-rules-geography-color-border-primary: var(--valentus-border, #94a3b8);
  --themed-svg-rules-geography-color-edge: var(--valentus-ink-muted, #cbd5e1);
  --themed-svg-rules-geography-color-edge-label: var(--valentus-ink, #e2e8f0);

  --themed-svg-agent-cli-auth-color-canvas: var(--valentus-canvas, #0f172a);
  --themed-svg-agent-cli-auth-color-surface-operator: #334155;
  --themed-svg-agent-cli-auth-color-surface-store: #17375e;
  --themed-svg-agent-cli-auth-color-surface-entry: #17452d;
  --themed-svg-agent-cli-auth-color-surface-cli: #4b3513;
  --themed-svg-agent-cli-auth-color-surface-stamps: var(--valentus-elevated, #1e293b);
  --themed-svg-agent-cli-auth-color-text-primary: var(--valentus-ink, #f8fafc);
  --themed-svg-agent-cli-auth-color-border-primary: var(--valentus-border, #94a3b8);
  --themed-svg-agent-cli-auth-color-edge: var(--valentus-ink-muted, #cbd5e1);

  --themed-svg-uniconfig-layers-color-canvas: var(--valentus-canvas, #111315);
  --themed-svg-uniconfig-layers-color-surface-panel: #292b2e;
  --themed-svg-uniconfig-layers-color-surface-meaning: #315d57;
  --themed-svg-uniconfig-layers-color-surface-storage: #08090a;
  --themed-svg-uniconfig-layers-color-text-primary: var(--valentus-ink, #f2eee7);
  --themed-svg-uniconfig-layers-color-text-inverse: #f2eee7;
  --themed-svg-uniconfig-layers-color-border-primary: var(--valentus-border, #c8c3bb);
  --themed-svg-uniconfig-layers-color-edge: #78aaa4;

  --themed-svg-uniconfig-schema-minus-instance-color-canvas: var(--valentus-canvas, #111315);
  --themed-svg-uniconfig-schema-minus-instance-color-surface-instance: #202225;
  --themed-svg-uniconfig-schema-minus-instance-color-surface-panel: #292b2e;
  --themed-svg-uniconfig-schema-minus-instance-color-text-primary: var(--valentus-ink, #f2eee7);
  --themed-svg-uniconfig-schema-minus-instance-color-text-muted: #d0cbc3;
  --themed-svg-uniconfig-schema-minus-instance-color-border-primary: var(--valentus-border, #c8c3bb);
  --themed-svg-uniconfig-schema-minus-instance-color-edge: #78aaa4;
  --themed-svg-uniconfig-schema-minus-instance-color-edge-label: var(--valentus-canvas, #111315);
}

/* Portal home tiles (FTN-style .cards / .tile) — mirror Valentus site-extra */
:root {
  --doc-tile-radius: 0.5rem;
  --doc-tile-border-color: var(--valentus-border, var(--panel-border-color, #d9dee7));
  --doc-tile-background: var(--valentus-elevated, var(--color-white, #fff));
  --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);
}
html.dark-theme,
html[data-theme="dark"] {
  --doc-tile-border-color: var(--valentus-border, #3d4048);
  --doc-tile-background: var(--valentus-elevated, #1f2125);
}
.doc .openblock.cards { margin: 1.5rem 0 0; }
.doc .openblock.cards > .content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1.25rem;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}
.doc .openblock.cards .exampleblock.tile { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.doc .openblock.cards .exampleblock.tile > .content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 7.5rem;
  margin: 0;
  background: var(--doc-tile-background, Canvas);
  border: 1px solid var(--doc-tile-border-color, GrayText);
  border-radius: var(--doc-tile-radius);
  box-shadow: var(--doc-tile-shadow);
  padding: 1.25rem 1.25rem 1rem;
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.doc .openblock.cards .exampleblock.tile > .content > :last-child:not(:only-child) {
  margin-top: auto;
  padding-top: 0.5rem;
}
@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);
  }
}
.doc .openblock.cards .exampleblock.tile .paragraph.title {
  font-weight: 600;
  font-size: 1.05rem;
  margin-top: 0;
}
.doc .openblock.cards .exampleblock.tile .paragraph.title img {
  height: 1.75rem;
  width: 1.75rem;
  vertical-align: middle;
  margin-right: 0.4rem;
}

/*
 * Config Lifecycle Management status labels (general-knowledge explanation table).
 * Maps to Valentus admonition tokens so light/dark stay readable.
 */
.doc .lifecycle-status {
  font-family: var(--monospace-font-family, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-weight: 600;
  font-size: 0.95em;
}
.doc .lifecycle-status-active {
  color: var(--valentus-admonition-tip, #059669);
}
.doc .lifecycle-status-deprecated {
  color: var(--valentus-admonition-warning, #d97706);
}
.doc .lifecycle-status-expired {
  color: var(--valentus-admonition-important, #dc2626);
}
.doc .lifecycle-status-unknown {
  color: var(--valentus-admonition-note, #2563eb);
}

/* Wide AsciiDoc tables: scroll wrapper (not the table) — Antora Zulip guidance */
.doc .tablecontainer,
.doc .valentus-table-scroll {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.doc .tablecontainer > table.tableblock,
.doc .valentus-table-scroll > table.tableblock {
  max-width: none;
}
.doc table.tableblock th,
.doc table.tableblock td {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.doc table.tableblock code {
  white-space: normal;
  overflow-wrap: anywhere;
}
.doc .listingblock > .content,
.doc .literalblock > .content {
  max-width: 100%;
  overflow-x: auto;
}
main.valentus-article,
main.valentus-article > .content {
  min-width: 0;
}

/* Read-width row: same horizontal inset as article.doc (Valentus 2.1.2+ in site-doc-layout; fallback until deploy refreshes v2 bundle). */
main.valentus-article > .content > .valentus-doc-toolbar {
  padding-inline: var(--valentus-doc-pad-inline, 1rem);
}