/* ============================================================
   NeuralFlow — diagram styles for the MD Dashboard engine.
   Self-contained: all variables are scoped to `.neuralflow` so they never
   clash with the page theme. Labels use SF Pro Display; math uses KaTeX.
   ============================================================ */

.neuralflow {
  /* Text = SF Pro Display; math is rendered by KaTeX (see .katex rules). */
  --font: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", "Inter", system-ui, sans-serif;
  --ink: #111214;
  --muted: #9096a0;
  --line: #ededf1;
  --line-strong: #d9dce1;
  --bg: #ffffff;
  --nf-text-size: 14px;
  --nf-math-scale: 1.1;
  --nf-edge-label-size: 12.5px;

  margin: 32px 0;
  overflow-x: auto;
  padding: 8px 0;
}

/* Border-box so a measured node keeps its size when the height is pinned
   (otherwise padding+border inflate it → overlapping nodes, group boxes that
   don't contain their members). The standalone module gets this from a global
   reset; the engine page does not, so scope it here. */
.neuralflow,
.neuralflow *,
.neuralflow *::before,
.neuralflow *::after {
  box-sizing: border-box;
}

.neuralflow-canvas {
  position: relative;
  min-width: max-content;
  margin: 0 auto;
}

/* Scale-to-fit box for flowchart mode: holds the *scaled* size of the canvas
   inside it, so a shrunk chart reserves exactly the room it paints. */
.neuralflow-fit {
  position: relative;
  margin: 0 auto;
  overflow: visible;
}

/* ---------- Edges ---------- */

.neuralflow-edges {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.neuralflow-edge {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.25;
}

.neuralflow-arrowhead { fill: var(--line-strong); }

.neuralflow-canvas--net .neuralflow-edge {
  stroke: #aab0ba;
  stroke-width: 1.1;
  stroke-linecap: round;
}
.neuralflow-canvas--net .neuralflow-edge:hover {
  stroke: #4b5563;
  stroke-width: 2;
}
.neuralflow-canvas--net .neuralflow-arrowhead { fill: #aab0ba; }

.neuralflow-canvas--net .neuralflow-edge--weight {
  stroke: #2563eb;
  stroke-width: 1.7;
  stroke-opacity: 0.9;
}
.neuralflow-canvas--net .neuralflow-edge--bias {
  stroke: #d97706;
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}
/* Double-class so the label colour beats the base `.neuralflow-edge-label`
   colour below (equal single-class specificity would otherwise let the later
   base rule win, leaving weight/bias labels grey instead of matching their
   lines). */
.neuralflow-edge-label.neuralflow-edge-label--weight { color: #2563eb; font-weight: 600; }
.neuralflow-edge-label.neuralflow-edge-label--bias { color: #b45309; font-weight: 600; }

/* ---------- Layer bands + captions ---------- */

.neuralflow-layer-band {
  position: absolute;
  border-radius: 16px;
  background: #f7f8fa;
  z-index: 0;
}
.neuralflow-layer-band--alt { background: #eef1f5; }

.neuralflow-layer-label {
  position: absolute;
  transform: translateX(-50%);
  color: var(--muted);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-align: center;
}

/* ---------- Edge labels (HTML so KaTeX math renders) ---------- */

.neuralflow-edge-label {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 0 3px;
  background: var(--bg);
  border-radius: 4px;
  color: #5b616b;
  font-family: var(--font);
  font-size: var(--nf-edge-label-size);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}
.neuralflow-edge-label .katex {
  font-size: calc(var(--nf-edge-label-size) * var(--nf-math-scale));
}

/* ---------- Nodes ---------- */

.neuralflow-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 10px 14px;
  background: var(--bg);
  text-align: center;
  white-space: nowrap;
}

.neuralflow-node--input     { border-style: dashed; }
.neuralflow-node--operation { border-color: #b3b8bf; }
.neuralflow-node--activation{ border-radius: 999px; }
.neuralflow-node--output    { box-shadow: inset 0 0 0 1px var(--line-strong); }

.neuralflow-node--circle {
  border-radius: 50%;
  padding: 6px;
  gap: 0;
  min-width: 0;
  border-width: 1.5px;
  border-style: solid;
}
.neuralflow-node--circle.neuralflow-node--input {
  border-color: #6b7280;
  background: #f6f7f9;
}
.neuralflow-node--circle.neuralflow-node--operation { border-color: #64748b; }
.neuralflow-node--circle.neuralflow-node--activation {
  border-color: #64748b;
  border-radius: 50%;
}
.neuralflow-node--circle.neuralflow-node--output {
  border-color: #374151;
  box-shadow: none;
}
.neuralflow-node--circle .neuralflow-node-title { line-height: 1; }

.neuralflow-node--circle.neuralflow-node--bias {
  border-style: dashed;
  border-color: #d97706;
  background: #fff7ed;
  color: #b45309;
}
.neuralflow-node--bias .neuralflow-node-title { color: #b45309; }

.neuralflow-node-title {
  font-family: var(--font);
  font-size: var(--nf-text-size);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.3;
}
.neuralflow-node-detail {
  font-family: var(--font);
  font-size: var(--nf-text-size);
  font-weight: 400;
  color: #5b616b;
  line-height: 1.3;
}
.neuralflow-node-detail:empty { display: none; }

/* ---------- Math (KaTeX, sized off the text) ---------- */

.neuralflow-math {
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
}
.neuralflow-node-detail .katex,
.neuralflow-node-title .katex,
.neuralflow-math .katex {
  font-size: calc(1em * var(--nf-math-scale));
  line-height: 1.2;
}
.neuralflow-node-detail .katex-display { margin: 0; }

/* ---------- Errors ---------- */

.neuralflow-error {
  border: 1px solid #e6c2c2;
  border-radius: 10px;
  padding: 16px;
  background: #fdf7f7;
  color: #7a3a3a;
  font-size: 14px;
}
.neuralflow-error pre { margin-bottom: 0; white-space: pre-wrap; }

/* ============================================================
   Structure charts — topology / status diagrams
   Enabled per-diagram via `.neuralflow-canvas--structure`.
   ============================================================ */

.neuralflow-canvas--structure .neuralflow-edge {
  stroke: #334155;
  stroke-width: 1.5;
}
.neuralflow-canvas--structure .neuralflow-arrowhead { fill: #334155; }

.neuralflow-edge--dotted { stroke-dasharray: 3 4; }

.neuralflow-edge-label--plain {
  color: #1f2733;
  background: #ffffff;
  font-weight: 500;
}

/* ---------- Grouping containers ---------- */

.neuralflow-group {
  position: absolute;
  z-index: 0;
  border: 1px solid #ca8a04;
  border-radius: 10px;
  background: #fefce8;
}
.neuralflow-group-title {
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
  line-height: 1.25;
  white-space: nowrap;
}

/* ---------- Status colours (node tag `status=...`) ---------- */

.neuralflow-status-ok   { background: #dcfce7; border-color: #16a34a; color: #052e16; }
.neuralflow-status-warn { background: #fef9c3; border-color: #ca8a04; color: #422006; }
.neuralflow-status-err  { background: #fce7ef; border-color: #db2777; color: #500724; }
.neuralflow-status-crit { background: #fee2e2; border-color: #dc2626; color: #450a0a; }
.neuralflow-status-off  { background: #f1f5f9; border-color: #94a3b8; color: #111827; }
.neuralflow-status-info { background: #eff6ff; border-color: #3b82f6; color: #0c1e3e; }

.neuralflow-node[class*="neuralflow-status-"] { border-width: 1.5px; }
.neuralflow-node[class*="neuralflow-status-"] .neuralflow-node-title,
.neuralflow-node[class*="neuralflow-status-"] .neuralflow-node-detail {
  color: inherit;
}

/* ============================================================
   Flowchart mode — decision charts (`flowchart`)
   Enabled per-diagram via `.neuralflow-canvas--flow`.
   ============================================================ */

/* A touch heavier than a topology edge: in a decision chart the lines carry the
   logic, so they should read as firmly as the boxes. */
.neuralflow-canvas--flow .neuralflow-edge { stroke-width: 1.6; }

/* Labels sit beside their line rather than on it (the renderer nudges them
   clear), so they need no line-hiding backplate — just enough to stay legible
   where a lane is tight. */
.neuralflow-canvas--flow .neuralflow-edge-label {
  padding: 0 2px;
  font-weight: 600;
}

/* ---------- Diamond (decision) nodes ---------- */

.neuralflow-node--diamond {
  border: none;
  background: transparent;
  padding: 20px 46px;
  isolation: isolate;
}
.neuralflow-diamond-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 0;
}
.neuralflow-diamond-bg polygon {
  fill: var(--bg);
  stroke: #a78bfa;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.neuralflow-node--diamond .neuralflow-node-title,
.neuralflow-node--diamond .neuralflow-node-detail {
  position: relative;
  z-index: 1;
}