/* =========================================================================
   VFIntel Diagram System v1.0
   Workflow diagrams, architecture maps, decision trees, relationship charts.
   All tokens inherit from colors_and_type.css. Load that file first.
   ========================================================================= */

/* -------------------------------------------------------------------------
   SHARED DIAGRAM WRAPPER
   Applies to any SVG diagram embedded in HTML output (decks, briefs, pages).
   ------------------------------------------------------------------------- */

.vfi-diagram {
  font-family: var(--font-body);
  font-size: 11px;
  background: white;
  border: 1px solid var(--light-gray);
  border-radius: var(--radius-1);
  padding: var(--space-6);
}

.vfi-diagram__label {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--warm-gray);
  margin-bottom: var(--space-4);
}

.vfi-diagram svg text {
  font-family: var(--font-body);
}

/* -------------------------------------------------------------------------
   SVG NODE TYPES
   Applied as CSS classes on SVG <g> elements wrapping a <rect> + <text>.
   All corner radii 2px. No shadows. No gradients.
   ------------------------------------------------------------------------- */

/* Default / neutral step node — white fill, hairline border */
.vfi-node rect {
  fill: white;
  stroke: var(--light-gray);
  stroke-width: 1;
}
.vfi-node text {
  fill: var(--navy);
}

/* Primary node — navy fill, white text */
.vfi-node--primary rect {
  fill: var(--navy);
  stroke: var(--navy);
}
.vfi-node--primary text {
  fill: white;
}

/* Accent node — emerald fill, white text. Use for VFIntel-owned steps only. */
.vfi-node--accent rect {
  fill: var(--emerald);
  stroke: var(--emerald);
}
.vfi-node--accent text {
  fill: white;
}
.vfi-node--accent .node-sub {
  fill: var(--mint-emerald);
}

/* Callout / highlight node — pale green fill, emerald border */
.vfi-node--callout rect {
  fill: var(--accent-bg);
  stroke: var(--emerald);
  stroke-width: 0.75;
}
.vfi-node--callout text {
  fill: var(--emerald);
}

/* Warning node — pale amber fill, amber border */
.vfi-node--warning rect {
  fill: var(--warning-bg);
  stroke: var(--warning);
  stroke-width: 0.75;
}
.vfi-node--warning text {
  fill: var(--warning);
}

/* Error / decline node — pale red fill, deep-red border */
.vfi-node--error rect {
  fill: var(--error-bg);
  stroke: var(--deep-red);
  stroke-width: 0.75;
}
.vfi-node--error text {
  fill: var(--deep-red);
}

/* Terminal node (START / END / APPROVED) — navy pill, 4px radius */
.vfi-terminal rect {
  fill: var(--navy);
  rx: 4;
}
.vfi-terminal text {
  fill: white;
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  font-size: 9px;
  text-transform: uppercase;
}

/* Decision diamond — uses <polygon>, not <rect>. Light gray fill, navy stroke. */
.vfi-decision polygon {
  fill: var(--row-gray);
  stroke: var(--navy);
  stroke-width: 1;
}
.vfi-decision text {
  fill: var(--navy);
  font-weight: 700;
}

/* Branch label (YES / NO / PASS / FLAG) — positioned beside connectors */
.vfi-branch-label {
  fill: var(--warm-gray);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.vfi-branch-label--pass  { fill: var(--emerald); }
.vfi-branch-label--fail  { fill: var(--deep-red); }
.vfi-branch-label--warn  { fill: var(--warning); }

/* -------------------------------------------------------------------------
   SWIM LANES
   Horizontal or vertical groupings. Use a <rect> for the lane background
   and a rotated <text> for the label on the left spine.
   ------------------------------------------------------------------------- */

.vfi-lane {
  fill: var(--row-gray);
  stroke: var(--light-gray);
  stroke-width: 0.5;
}

.vfi-lane--header {
  fill: var(--navy);
}

.vfi-lane-label {
  fill: var(--warm-gray);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.vfi-lane-header-label {
  fill: white;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   CONNECTORS / ARROWS
   Standard arrowhead marker definitions. Reference these in SVG <defs>.
   Use navy for primary flow. Use light-gray for supporting/reference lines.
   Use emerald for positive / approved / success paths.
   Use deep-red for negative / declined / error paths.
   ------------------------------------------------------------------------- */

/*
  Paste these <defs> at the top of every diagram SVG:

  <defs>
    <!-- Primary flow arrow (navy) -->
    <marker id="vfi-arr" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
      <polygon points="0 0, 8 3, 0 6" fill="#0F1B33"/>
    </marker>
    <!-- Success path arrow (emerald) -->
    <marker id="vfi-arr-pass" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
      <polygon points="0 0, 8 3, 0 6" fill="#006B3F"/>
    </marker>
    <!-- Decline path arrow (red) -->
    <marker id="vfi-arr-fail" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
      <polygon points="0 0, 8 3, 0 6" fill="#991B1B"/>
    </marker>
    <!-- Reference/supporting line arrow (light gray) -->
    <marker id="vfi-arr-ref" markerWidth="7" markerHeight="5" refX="6" refY="2.5" orient="auto">
      <polygon points="0 0, 7 2.5, 0 5" fill="#D1D5DB"/>
    </marker>
  </defs>
*/

/* Connector line classes (apply to SVG <line> or <path> elements) */
.vfi-connector {
  stroke: var(--navy);
  stroke-width: 1;
  fill: none;
}

.vfi-connector--light {
  stroke: var(--light-gray);
  stroke-width: 1;
}

.vfi-connector--pass {
  stroke: var(--emerald);
  stroke-width: 1.5;
}

.vfi-connector--fail {
  stroke: var(--deep-red);
  stroke-width: 1;
}

.vfi-connector--dashed {
  stroke: var(--light-gray);
  stroke-width: 0.75;
  stroke-dasharray: 4 3;
}

/* -------------------------------------------------------------------------
   STEP COUNTER BADGES
   Small circles with numbers sitting on the top-left corner of a node.
   Primary path: navy. Accent step: emerald.
   ------------------------------------------------------------------------- */

.vfi-badge circle {
  fill: var(--navy);
}
.vfi-badge text {
  fill: white;
  font-size: 7.5px;
  font-weight: 700;
}

.vfi-badge--accent circle {
  fill: var(--emerald);
}

/* -------------------------------------------------------------------------
   ANNOTATION / CALLOUT BOX
   Sits below or beside a key node. Pale green panel with emerald border.
   Carries the insight sentence and supporting metric.
   ------------------------------------------------------------------------- */

.vfi-annotation rect {
  fill: var(--accent-bg);
  stroke: var(--emerald);
  stroke-width: 0.5;
  rx: 2;
}

.vfi-annotation .annotation-headline {
  fill: var(--emerald);
  font-size: 9px;
  font-weight: 700;
}

.vfi-annotation .annotation-body {
  fill: var(--charcoal);
  font-size: 8px;
}

/* Dashed leader line from annotation to the node it references */
.vfi-annotation-leader {
  stroke: var(--emerald);
  stroke-width: 0.5;
  stroke-dasharray: 3 2;
}

/* -------------------------------------------------------------------------
   ARCHITECTURE DIAGRAM EXTRAS
   Layer label strip, group box, and data store node variant.
   ------------------------------------------------------------------------- */

/* Layer header strip spanning full diagram width */
.vfi-layer-header {
  fill: var(--row-gray);
  stroke: var(--light-gray);
  stroke-width: 0.5;
}

.vfi-layer-label {
  fill: var(--warm-gray);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

/* Group / domain bounding box */
.vfi-group rect {
  fill: transparent;
  stroke: var(--light-gray);
  stroke-width: 0.75;
  stroke-dasharray: 5 3;
  rx: 2;
}

.vfi-group-label {
  fill: var(--warm-gray);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   RELATIONSHIP / ORG MAP EXTRAS
   Hub node and spoke lines.
   ------------------------------------------------------------------------- */

/* Center hub — always navy */
.vfi-hub rect {
  fill: var(--navy);
  stroke: var(--navy);
}
.vfi-hub text {
  fill: white;
  font-weight: 700;
}
.vfi-hub .hub-sub {
  fill: var(--mint-emerald);
  font-size: 9px;
}

/* Spoke connector */
.vfi-spoke {
  stroke: var(--light-gray);
  stroke-width: 1;
}

/* -------------------------------------------------------------------------
   PPTX / DOCX EXPORT NOTE
   When exporting diagrams to .pptx or .docx, render the SVG as a PNG at
   2x pixel density (min 1600px wide for a full-bleed slide).
   Use the bash command in diagram-guide.md for headless SVG-to-PNG conversion.
   Never embed raw SVG in PowerPoint — use the PNG.
   ------------------------------------------------------------------------- */