* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  min-height: 100%;
  overflow-y: auto;
  background: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.marimo-document {
  display: grid;
  gap: 0;
  max-width: 960px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 30px 36px 90px;
  color: #172033;
}

.dt-doc-cell {
  position: relative;
  display: block;
  scroll-margin-top: 32px;
  padding: 10px 0 18px;
}

.dt-lazy-summary,
.dt-lazy-sentinel {
  display: none;
}

.dt-lazy-sentinel {
  border-top: 1px solid #e5e7eb;
}

.dt-node-dot {
  display: none;
  width: 8px;
  height: 8px;
  margin-top: 13px;
  padding: 0;
  border: 1px solid #0f766e;
  border-radius: 50%;
  background: #14b8a6;
  cursor: pointer;
}

.dt-leaf-card {
  --dt-leaf-anchor-size: 8px;
}

.dt-cell-output {
  min-width: 0;
  max-width: 82ch;
}

.dt-node-type {
  display: none;
}

.dt-doc-cell h2 {
  margin: 0 0 8px;
  color: #111827;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
}

.dt-doc-cell h3 {
  margin: 0 0 7px;
  color: #111827;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.dt-doc-cell p {
  margin: 0 0 9px;
  color: #374151;
  font-size: 14px;
  line-height: 1.45;
}

.dt-node-preview {
  max-width: 72ch;
}

.dt-leaf-evidence {
  display: grid;
  gap: 6px;
  max-width: 72ch;
  margin: 9px 0 0;
}

/* De-clutter: one collapsed group wraps all per-entity evidence/validation panels. */
.dt-evidence-group {
  margin-top: 6px;
}
.dt-evidence-group-summary {
  padding: 5px 0;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.dt-evidence-group-summary::before {
  content: "▸ ";
  color: #94a3b8;
}
.dt-evidence-group[open] > .dt-evidence-group-summary::before {
  content: "▾ ";
}
.dt-evidence-group > .dt-leaf-evidence {
  padding-left: 10px;
  border-left: 2px solid #e2e8f0;
}

.dt-leaf-evidence-panel {
  border-top: 1px solid #dbe4e8;
  color: #172033;
}

.dt-evidence-summary {
  padding: 7px 0;
  color: #1f2937;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.dt-evidence-body {
  padding: 0 0 9px;
}

.dt-evidence-status-red .dt-evidence-summary {
  color: #7f1d1d;
}

.dt-evidence-status-pass .dt-evidence-summary {
  color: #14532d;
}

.dt-evidence-status-xfail .dt-evidence-summary {
  color: #374151;
}

.dt-evidence-rows {
  display: grid;
  gap: 5px;
  margin: 0 0 8px;
}

.dt-evidence-rows div {
  display: grid;
  grid-template-columns: minmax(110px, 0.32fr) minmax(0, 1fr);
  gap: 10px;
}

.dt-evidence-rows dt {
  color: #4b5563;
  font-size: 12px;
  font-weight: 600;
}

.dt-evidence-rows dd {
  min-width: 0;
  margin: 0;
  color: #374151;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.dt-evidence-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 8px;
}

.dt-evidence-links a {
  color: #0f766e;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dt-evidence-media-link {
  display: block;
  margin: 8px 0;
}

.dt-evidence-media {
  display: block;
  width: min(100%, 520px);
  height: auto;
  border: 1px solid #dbe4e8;
}

.dt-figure-kind-badge {
  display: inline-block;
  margin: 6px 0 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.dt-figure-kind-real {
  background: #1f6feb22;
  color: #1a5fb4;
  border: 1px solid #1f6feb55;
}

.dt-figure-kind-passthrough {
  background: #f8714922;
  color: #b3471d;
  border: 1px solid #f8714955;
}

.dt-entity-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 5px 0 7px;
}

.dt-entity-chip {
  display: none;
  align-items: center;
  justify-content: center;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #213547;
  font-size: 11px;
  line-height: 1.25;
  cursor: pointer;
}

.dt-entity-node-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border: 1px solid #0f766e;
  border-radius: 50%;
  background: #14b8a6;
}

.dt-entity-chip.mathobject,
.dt-entity-chip.inlinemathobject,
.dt-entity-card.mathobject {
  border-bottom-color: rgba(34, 197, 94, 0.42);
}

.dt-entity-chip.mathobject .dt-entity-node-dot,
.dt-entity-chip.inlinemathobject .dt-entity-node-dot,
.dt-entity-card.mathobject .dt-node-dot,
.dt-entity-chip.equation .dt-entity-node-dot,
.dt-entity-card.equation .dt-node-dot,
.dt-entity-chip.variable .dt-entity-node-dot,
.dt-entity-card.variable .dt-node-dot {
  border-color: #92400e;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.18);
}

.dt-entity-node-dot.graph-neighbor-visible[data-graph-depth="2"],
.dt-node-dot.graph-neighbor-visible[data-graph-depth="2"] {
  opacity: 0.66;
}

.dt-entity-node-dot:hover,
.dt-entity-node-dot.active,
.dt-entity-node-dot.graph-neighbor-visible,
.dt-node-dot:hover,
.dt-node-dot.active,
.dt-node-dot.graph-neighbor-visible {
  opacity: 0.95;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18), 0 0 7px rgba(20, 184, 166, 0.32);
}

.rhs-view-shell {
  min-height: 100vh;
}

.rhs-view-mode-control {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 8px 36px;
  border-bottom: 1px solid #dbe4e8;
  background: #ffffff;
}

.rhs-view-mode-btn {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  color: #172033;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.rhs-view-mode-btn[aria-pressed="true"] {
  border-color: #0f766e;
  background: #ecfdf5;
  color: #064e3b;
  font-weight: 650;
}

.dt-doc-cell[data-graph-out-of-depth="true"],
.dt-entity-chip[data-graph-out-of-depth="true"] {
  opacity: 0.32;
  transition: opacity 120ms ease-out;
}

.dt-doc-cell[data-graph-out-of-depth="true"]:hover,
.dt-entity-chip[data-graph-out-of-depth="true"]:hover {
  opacity: 0.75;
}

body[data-rhs-view-mode="neo4j-graph"] #dt-documentgraph-content,
body[data-rhs-view-mode="marimo-notebook"] #dt-documentgraph-content,
body[data-rhs-view-mode="documentgraph"] #dt-neo4j-graph-content,
body[data-rhs-view-mode="marimo-notebook"] #dt-neo4j-graph-content,
body[data-rhs-view-mode="documentgraph"] #dt-marimo-notebook-content,
body[data-rhs-view-mode="neo4j-graph"] #dt-marimo-notebook-content {
  display: none;
}

.dt-marimo-notebook-view {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 50px);
}

.dt-marimo-frame {
  flex: 0 0 auto;
  width: 100%;
  min-height: 320px;
  border: 0;
  border-top: 1px solid #e2e8f0;
  background: #ffffff;
}

/* Controllable realization panel: the LHS-selected node rendered like the source,
   its DT realization, and a drill-down harmonica of its neo4j content. */
.dt-node-realization {
  flex: 1 1 auto;
  padding: 14px 16px;
  overflow-y: auto;
  font-size: 13px;
  color: #1e293b;
}
.dt-nr-empty {
  color: #64748b;
  font-style: italic;
}
.dt-nr-card {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}
.dt-nr-name {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  word-break: break-word;
}
.dt-nr-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0;
}
.dt-nr-label {
  padding: 1px 7px;
  border-radius: 999px;
  background: #e0f2fe;
  border: 1px solid #7dd3fc;
  color: #0369a1;
  font-size: 10px;
}
.dt-nr-latex {
  margin: 6px 0;
  padding: 6px 8px;
  border-radius: 5px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: #0f172a;
}
.dt-nr-section-title {
  margin: 10px 0 3px;
  color: #64748b;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dt-nr-source {
  margin: 0;
  padding: 6px 10px;
  border-left: 3px solid #cbd5e1;
  color: #334155;
  font-style: italic;
}
.dt-nr-realization {
  margin: 0;
  color: #166534;
}
.dt-nr-anchor {
  margin-top: 6px;
  color: #475569;
  font-size: 12px;
}
.dt-nr-anchor code,
.dt-nr-props code {
  background: #eef2f7;
  padding: 0 4px;
  border-radius: 3px;
}
.dt-nr-harmonica {
  margin-top: 10px;
}
.dt-nr-harmonica > summary {
  cursor: pointer;
  font-weight: 600;
  color: #334155;
  padding: 5px 0;
}
.dt-nr-props {
  display: grid;
  grid-template-columns: minmax(90px, auto) 1fr;
  gap: 2px 8px;
  margin: 4px 0 8px;
}
.dt-nr-props dt {
  color: #64748b;
}
.dt-nr-props dd {
  margin: 0;
  word-break: break-word;
}
.dt-nr-rel-title {
  color: #64748b;
  font-size: 11px;
  margin: 4px 0;
}
.dt-nr-neighbors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dt-nr-neighbor {
  appearance: none;
  width: 100%;
  text-align: left;
  padding: 4px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #ffffff;
  color: #1e293b;
  cursor: pointer;
}
.dt-nr-neighbor:hover {
  background: #eff6ff;
  border-color: #93c5fd;
}
.dt-nr-rel {
  color: #2563eb;
  font-size: 11px;
}
.dt-nr-open-notebook {
  display: inline-block;
  margin-top: 12px;
  color: #2563eb;
  font-size: 12px;
  text-decoration: none;
}
.dt-nr-open-notebook:hover {
  text-decoration: underline;
}

/* Flex column pinned to the viewport: toolbar (auto) + graph (fills the rest). The
   graph svg has a viewBox + preserveAspectRatio meet, so it auto-scales into the full
   canvas height — no bottom card steals its vertical space anymore. */
.dt-neo4j-graph-view {
  display: flex;
  flex-direction: column;
  /* The view sits below the RHS view-mode tab header (~92px). */
  height: calc(100vh - 100px);
  padding: 16px 30px;
  color: #172033;
}

.dt-neo4j-graph-toolbar {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 28px;
  margin: 0 0 10px;
  color: #475569;
  font-size: 13px;
}

.dt-neo4j-graph-canvas {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border: 1px solid #dbe4e8;
  background: #ffffff;
}

.dt-engine-badge {
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}
.dt-engine-sympy { background: #7c3aed; }   /* symbolic */
.dt-engine-numpy { background: #2563eb; }   /* local numerical */
.dt-engine-vvuq  { background: #0d9488; }   /* VVUQ numerical service */
.dt-engine-lean  { background: #ea580c; }   /* Lean proof */
.dt-engine-multi {
  font-size: 10px;
  font-weight: 600;
  color: #1d4ed8;
}
/* A node verified >=2 independent ways gets an indigo ring in the graph (circle, diamond, or
   reproduction square — the ring rides whichever glyph the node uses). */
.dt-neo4j-d3-node.dt-multi-method circle,
.dt-neo4j-d3-node.dt-multi-method rect {
  stroke: #1d4ed8;
  stroke-width: 2.4px;
  paint-order: stroke;
}

.dt-neo4j-graph-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.dt-neo4j-graph-edge {
  fill: none;
  stroke: #94a3b8;
  stroke-width: 1;
  opacity: 0.34;
}

.dt-neo4j-graph-edge.wc-test-edge {
  stroke: #0f766e;
  stroke-dasharray: 4 4;
  opacity: 0.58;
}

.dt-neo4j-graph-node {
  position: absolute;
  left: var(--graph-x);
  top: var(--graph-y);
  max-width: 170px;
  min-height: 28px;
  padding: 5px 8px 5px 22px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #ffffff;
  color: #172033;
  font: inherit;
  font-size: 11px;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.dt-neo4j-graph-node::before {
  position: absolute;
  top: 9px;
  left: 8px;
  width: 7px;
  height: 7px;
  border: 1px solid #0f766e;
  border-radius: 50%;
  background: #14b8a6;
  content: "";
}

.dt-neo4j-graph-node.workcontracttest {
  border-color: #0f766e;
  box-shadow: 0 0 0 1px rgba(15, 118, 110, 0.12);
}

.dt-neo4j-graph-node.status-red,
.dt-neo4j-graph-node.status-xfail {
  border-style: dashed;
}

.dt-neo4j-graph-node.active {
  outline: 2px solid rgba(20, 184, 166, 0.36);
  outline-offset: 2px;
}


.dt-neo4j-graph-canvas.d3-enabled {
  flex: 1 1 auto;
  min-height: 0;
  overflow: clip;
}

.dt-neo4j-d3-svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  background: radial-gradient(circle at 50% 45%, #ffffff 0, #ffffff 46%, #f8fafc 100%);
  cursor: grab;
}

.dt-neo4j-d3-svg:active {
  cursor: grabbing;
}

.dt-neo4j-d3-link {
  fill: none; /* SVG paths default to a black fill; without this the bezier links render as solid wedges */
  stroke: #94a3b8;
  stroke-width: 1.05;
  stroke-opacity: 0.42;
}

.dt-neo4j-d3-link.wc-test-edge {
  stroke: #0f766e;
  stroke-dasharray: 4 4;
  stroke-opacity: 0.68;
}

/*
 * Back-edges in the hierarchical RHS Neo4j graph: edges that exist in
 * the documentgraph but aren't part of the d3.tree() BFS tree. Rendered
 * lighter + dashed so the tree backbone reads as the primary structure
 * and back-edges read as decoration.
 */
.dt-neo4j-d3-link.back-edge {
  stroke: #cbd5e1;
  stroke-dasharray: 2 5;
  stroke-opacity: 0.32;
  fill: none;
}

/* Issue #28: status-coloured verification edges. A verification node is always
   visible and floats next to the entity it verifies; the edge is a stoplight with a
   REDUNDANT line-style channel (so it survives colour-blindness, WCAG 1.4.1/1.4.11):
     verified = solid green   not run = dashed amber   failed = dotted red.
   Strokes clear the WCAG 3:1 non-text contrast floor on the near-white canvas
   (green 5.1:1, amber 4.1:1, red 5.4:1). These rules come after the base/wc/back-edge
   rules so they win for a verification edge. */
.dt-neo4j-graph-edge.verif-edge-ok,
.dt-neo4j-d3-link.verif-edge-ok {
  stroke: #157f3c;
  stroke-width: 2.4px;
  stroke-opacity: 0.95;
  stroke-dasharray: none;
  fill: none;
}
.dt-neo4j-graph-edge.verif-edge-notrun,
.dt-neo4j-d3-link.verif-edge-notrun {
  stroke: #a8730a;
  stroke-width: 2.4px;
  stroke-opacity: 0.95;
  stroke-dasharray: 6 3;
  fill: none;
}
.dt-neo4j-graph-edge.verif-edge-failed,
.dt-neo4j-d3-link.verif-edge-failed {
  stroke: #c0392b;
  stroke-width: 3px;
  stroke-opacity: 1;
  stroke-dasharray: 1.5 4;       /* dotted — distinct from amber's dashes under CVD */
  stroke-linecap: round;
  fill: none;
}

/* Status also rides on the verification NODE marker, not only the edge, so it is
   legible when an edge is occluded or the user scans nodes. */
.dt-neo4j-d3-node.verif-node-ok circle,
.dt-neo4j-d3-node.verif-node-ok rect.dt-verif-diamond,
.dt-neo4j-graph-node.verif-node-ok { stroke: #157f3c; fill: #157f3c; }
.dt-neo4j-d3-node.verif-node-notrun circle,
.dt-neo4j-d3-node.verif-node-notrun rect.dt-verif-diamond,
.dt-neo4j-graph-node.verif-node-notrun { stroke: #a8730a; fill: #fff7e6; }
.dt-neo4j-d3-node.verif-node-failed circle,
.dt-neo4j-d3-node.verif-node-failed rect.dt-verif-diamond,
.dt-neo4j-graph-node.verif-node-failed { stroke: #c0392b; fill: #c0392b; }
/* VVUQ verification diamond: 1.4px stroke so the rotated square reads as a crisp diamond. A
   verification node linked to the CURRENTLY FOCAL doc node is emphasised (thicker indigo halo)
   so "vvuq nodes linked to a currently visible node is also active" is obvious. */
.dt-verif-diamond { stroke-width: 1.4px; }
.dt-neo4j-d3-node.is-focal-linked rect.dt-verif-diamond { stroke: #1d4ed8; stroke-width: 2.4px; }
/* External-document portal satellite: double-outline rect + ↗ badge (opens the datasheet's own
   documentgraph in a new tab — the federated-documentgraph affordance). */
.dt-doc-portal { fill: #fff; stroke: #0f766e; stroke-width: 1.4px; }
.dt-doc-portal.dt-doc-portal-inner { fill: none; stroke: #0f766e; stroke-width: 0.8px; }
.dt-doc-portal-badge { fill: #0f766e; font-size: 9px; font-weight: 700; }
.dt-neo4j-d3-satellite[data-external-doc] { cursor: pointer; }
.dt-neo4j-graph-node.verif-node-ok,
.dt-neo4j-graph-node.verif-node-notrun,
.dt-neo4j-graph-node.verif-node-failed { border-color: currentColor; }

/* Verification colour-key shown next to the graph summary. Each swatch is a real mini
   line segment so the legend communicates the line STYLE (solid/dashed/dotted), not
   colour alone. */
.dt-verif-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 2px;
  font-size: 11px;
  color: #475569;
}
.dt-verif-legend-title {
  font-weight: 600;
  color: #334155;
}
.dt-verif-key {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.6;
}
.dt-verif-key svg { display: block; }
.dt-verif-key .verif-swatch { fill: none; stroke-width: 2.4px; }
.dt-verif-key.verif-edge-ok .verif-swatch { stroke: #157f3c; }
.dt-verif-key.verif-edge-notrun .verif-swatch { stroke: #a8730a; stroke-dasharray: 6 3; }
.dt-verif-key.verif-edge-failed .verif-swatch { stroke: #c0392b; stroke-dasharray: 1.5 4; stroke-linecap: round; stroke-width: 3px; }

#dt-neo4j-d3-arrow path {
  fill: #94a3b8;
}

#dt-neo4j-d3-arrow-wc path {
  fill: #0f766e;
}

.dt-neo4j-d3-node {
  cursor: pointer;
  outline: none;
}

/* Owner 2026-06-30: glyph KEY pinned in the graph's top-right defining every symbol. position
   absolute inside the position:relative canvas; pointer-events:none so it never steals graph clicks. */
.dt-graph-legend {
  position: absolute; top: 8px; right: 8px; z-index: 4;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #dbe4e8; border-radius: 6px;
  padding: 6px 9px; font: 11px/1.4 system-ui, sans-serif; color: #334155;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
  pointer-events: none; max-width: 230px;
}
.dt-graph-legend-title {
  display: block; font-weight: 700; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.04em; color: #64748b; margin-bottom: 3px;
}
.dt-graph-legend-row { display: flex; align-items: center; gap: 7px; margin: 2px 0; }
.dt-graph-legend-glyph { flex: 0 0 auto; overflow: visible; }
.dt-graph-legend .lg-node { fill: #fff; stroke: #0f766e; stroke-width: 1.4px; }
.dt-graph-legend .lg-repro { fill: #fff; stroke: #0f766e; stroke-width: 1.4px; }
.dt-graph-legend .lg-verif { fill: #157f3c; stroke: #fff; stroke-width: 1.2px; }
.dt-graph-legend .lg-verif-count { fill: #fff; font-size: 7px; font-weight: 700; }
.dt-graph-legend .lg-portal { fill: #fff; stroke: #0f766e; stroke-width: 1.4px; }
.dt-graph-legend .lg-portal.lg-portal-inner { fill: none; stroke-width: 0.8px; }
.dt-graph-legend .lg-portal-arrow { fill: #0f766e; font-size: 9px; font-weight: 700; }
.dt-graph-legend .lg-lineage { stroke: #0f766e; stroke-width: 2.5px; }
.dt-graph-legend .lg-backedge { stroke: #94a3b8; stroke-width: 1.5px; stroke-dasharray: 2 3; }

.dt-neo4j-d3-node circle {
  fill: #ffffff;
  stroke: #0f766e;
  stroke-width: 1.4;
}

.dt-neo4j-d3-node.workcontracttest circle {
  fill: #ecfdf5;
  stroke-width: 2;
}

.dt-neo4j-d3-node.status-red circle,
.dt-neo4j-d3-node.status-xfail circle {
  stroke-dasharray: 3 2;
}

.dt-neo4j-d3-node.active circle {
  fill: #14b8a6;
  filter: drop-shadow(0 0 7px rgba(20, 184, 166, 0.48));
}

/* Reproduction nodes render as a SQUARE glyph; mirror the circle's node styling. */
.dt-neo4j-d3-node rect.dt-node-repro-square {
  fill: #ffffff;
  stroke: #0f766e;
  stroke-width: 1.4;
}
.dt-neo4j-d3-node.active rect.dt-node-repro-square {
  fill: #14b8a6;
  filter: drop-shadow(0 0 7px rgba(20, 184, 166, 0.48));
}
.dt-neo4j-d3-node.status-red rect.dt-node-repro-square,
.dt-neo4j-d3-node.status-xfail rect.dt-node-repro-square {
  stroke-dasharray: 3 2;
}

/* #72: the path from the selected node up to the documentgraph root (its lineage/trunk),
   highlighted so a node's place in the hierarchy reads at a glance. */
.dt-neo4j-d3-link.dt-lineage {
  stroke-width: 2.5;
  stroke-opacity: 0.95;
}
/* teal trunk, but NOT on verification edges — let their red/amber stoplight colour survive
   the (rare) overlap; the thicker stroke above still marks them as on the lineage. */
.dt-neo4j-d3-link.dt-lineage:not([class*="verif-edge"]) {
  stroke: #0f766e;
}
.dt-neo4j-d3-node.dt-lineage circle,
.dt-neo4j-d3-node.dt-lineage rect {
  stroke: #0f766e;
  stroke-width: 2.5;
}
.dt-neo4j-d3-node.dt-lineage text {
  fill: #0f766e;
  font-weight: 800;
}

.dt-neo4j-d3-label {
  fill: #172033;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 650;
  paint-order: stroke;
  pointer-events: none;
  stroke: #ffffff;
  stroke-linejoin: round;
  stroke-width: 3px;
}
/* Leaf (fan-out) labels hang angled below their node so they don't collide on one
   baseline; slightly smaller + thinner halo since there are many of them. */
.dt-neo4j-d3-label.dt-leaf-label {
  font-size: 9px;
  font-weight: 600;
  stroke-width: 2.5px;
}

/* Atom-level reproduction drill-in: click a reproduced unit -> side-by-side repro | original. */
.dt-repro-unit { margin: 4px 0; }
.dt-repro-unit > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  flex-wrap: wrap;  /* in a narrow grid column the label wraps BELOW the thumb instead of clipping */
  padding: 4px 6px; border-radius: 6px;
}
.dt-repro-unit-label { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.dt-repro-unit > summary::-webkit-details-marker { display: none; }
.dt-repro-unit > summary:hover { background: rgba(255, 255, 255, 0.06); }
.dt-repro-unit-img { width: 104px; height: 64px; object-fit: contain; background: #fff; border-radius: 3px; padding: 2px; }
.dt-repro-unit-label { font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* per-part coverage grid (owner 2026-06-28): a tile per figure part — code+output or a gray box */
.dt-panel-coverage-grid { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.dt-repro-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 104px; min-height: 72px; padding: 6px; text-align: center; box-sizing: border-box;
  color: #888; font-size: 11px; border: 1px dashed #b8b8b8; border-radius: 4px;
  background: repeating-linear-gradient(45deg, #eee, #eee 6px, #e4e4e4 6px, #e4e4e4 12px);
}
.dt-repro-placeholder-label { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #666; max-width: 100%; word-break: break-word; }
.dt-repro-placeholder-tag { font-style: italic; opacity: 0.7; }
/* code + output pairs (owner 2026-06-28): generator program beside its rendered output, no original */
.dt-repro-unit-body {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; padding: 8px 6px 6px;
}
.dt-repro-codecol, .dt-repro-outcol { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dt-repro-colhdr { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; }
.dt-repro-code {
  margin: 0; max-height: 320px; overflow: auto; background: #0f172a; color: #e2e8f0;
  border-radius: 6px; padding: 8px 10px; white-space: pre; tab-size: 2;
  font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.dt-repro-out-img { max-width: 100%; background: #fff; border-radius: 4px; align-self: start; }
.dt-repro-nocode { font-size: 12px; opacity: 0.6; font-style: italic; }
.dt-leaf-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 8px 6px 4px; }
.dt-leaf-compare-cell { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.dt-leaf-compare-cell figcaption {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7;
}
.dt-leaf-repro-img,
.dt-leaf-compare-cell .dt-paper-figure {
  width: 100%; background: #fff; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.12);
}
.dt-leaf-repro-img { object-fit: contain; }
.dt-leaf-compare-missing { font-size: 11px; opacity: 0.5; font-style: italic; }
.dt-leaf-actions { padding: 2px 6px 6px; }
.dt-leaf-console-ref {
  font-size: 11px; padding: 2px 8px; border-radius: 5px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06);
  color: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.dt-leaf-console-ref:hover { background: rgba(255, 255, 255, 0.14); }
/* Generator-code editor: view/edit the matplotlib source + sandboxed re-run (local dev). */
.dt-leaf-gen { margin: 4px 6px 8px; }
.dt-leaf-gen-summary { cursor: pointer; font-size: 11px; opacity: 0.85; padding: 2px 0; }
.dt-leaf-gen-src {
  width: 100%; min-height: 160px; box-sizing: border-box; margin: 6px 0; padding: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 1.45;
  background: #0f1326; color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px; resize: vertical; white-space: pre;
}
.dt-leaf-gen-actions { display: flex; align-items: center; gap: 8px; }
.dt-leaf-gen-run {
  font-size: 11px; padding: 3px 12px; border-radius: 5px; cursor: pointer; color: inherit;
  border: 1px solid rgba(74, 158, 122, 0.6); background: rgba(74, 158, 122, 0.18);
}
.dt-leaf-gen-run:hover { background: rgba(74, 158, 122, 0.32); }
.dt-leaf-gen-status { font-size: 11px; opacity: 0.75; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.dt-leaf-gen-result { margin-top: 8px; }
.dt-leaf-gen-img {
  max-width: 100%; background: #fff; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Round 3: agent-driven halos on the RHS documentgraph (owner spec 2026-06-06) */
.dt-neo4j-d3-node.graph-bridge-halo circle {
  stroke: #f59e0b;
  stroke-width: 3px;
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.85));
}
.dt-entity-chip.graph-bridge-halo {
  outline: 2px solid #f59e0b;
  outline-offset: 1px;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.65);
}

/* v44 hover chip: "+ console" injection affordance over d3 graph nodes. */
.console-inject-chip {
  position: fixed;
  display: none;
  z-index: 60;
  padding: 2px 8px;
  font: 600 10px/1.5 ui-sans-serif, system-ui, sans-serif;
  color: #1e3a8a;
  background: #eff6ff;
  border: 1px solid #93c5fd;
  border-radius: 9px;
  cursor: pointer;
}
.console-inject-chip.visible {
  display: inline-block;
}

/* v44 C6: VerificationPoint satellites — 10px stoplight dots pinned beside the
   node they verify, inside the same zoom viewport as the tree (ride pan/zoom).
   Specificity must beat .dt-neo4j-d3-node.verif-node-* (0,2,1), so carry both
   classes in the selector (0,2,1 ties resolve by source order — this rule is
   last, so it wins; but using dt-neo4j-d3-node prefix makes intent explicit). */
.dt-neo4j-d3-node.dt-neo4j-d3-satellite circle,
.dt-neo4j-d3-node.dt-neo4j-d3-satellite rect.dt-verif-diamond {
  stroke: #ffffff;
  stroke-width: 1.5px;
}
.dt-neo4j-d3-satellite.verif-node-ok rect.dt-verif-diamond { fill: #157f3c; }
.dt-neo4j-d3-satellite.verif-node-failed rect.dt-verif-diamond { fill: #c0392b; }
.dt-neo4j-d3-satellite.verif-node-notrun rect.dt-verif-diamond { fill: #a8730a; }
/* Aggregated VVUQ verification badge: the per-host VP COUNT inside the stoplight diamond (replaces
   the per-VP diamond stack that clustered into a blob at the root). */
.dt-verif-badge-count { fill: #fff; font-size: 9px; font-weight: 700; pointer-events: none; }

/* v46 equation formalization accordion (harmonica): SymPy + Lean panels with
   infoview slots under each KaTeX-rendered Formula (lean-marimo-quantum pattern). */
.dt-formula-accordion {
  margin: 4px 0 10px;
  border-left: 2px solid #e2e8f0;
  padding-left: 8px;
}
.dt-formal-panel summary {
  cursor: pointer;
  font: 600 11px/1.6 ui-sans-serif, system-ui, sans-serif;
  color: #475569;
}
.dt-formal-body {
  padding: 4px 0 6px 12px;
}
.dt-formal-source {
  font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 6px 8px;
  white-space: pre-wrap;
  word-break: break-word;
}
.dt-formal-status {
  font: 11px/1.5 ui-sans-serif, system-ui, sans-serif;
  margin: 4px 0;
}
.dt-formal-pass { color: #0f766e; }
.dt-formal-xfail, .dt-formal-pending { color: #92400e; }
.dt-formula-ocr-fallback {
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #475569;
}