/* ============================================================
   08 · EVIDENCE PIPELINE — branching linear flow (SVG-based)
   Replaces the previous section-08 CSS entirely.
   The whole diagram is one SVG with a viewBox, so structure, text,
   circles and lines scale together with the container width.
   Tweak the variables in .mitre-pipeline .pipeline below.
   ============================================================ */

.mitre-pipeline {
  background: #f0f1f3;                 /* same as section 10 */
}

/* ---------- ADJUSTABLE ATTRIBUTES ---------- */
.mitre-pipeline .pipeline {
  /* container */
  width: min(1100px, 100%);            /* diagram width (max) */
  margin: 64px auto;                   /* placement on the page */

  /* step colors, blue -> purple -> magenta (used by nodes, numbers, lines) */
  --c1: #12c0ff;   /* Practitioner Artifacts */
  --c2: #3a9bff;   /* SharePoint Metadata    */
  --c3: #5b7cff;   /* Structured JSON        */
  --c4: #8a4dff;   /* Bitbucket branch       */
  --c5: #b02cf0;   /* Evidence registry      */
  --c6: #d43cd8;   /* Pull request           */
  --c7: #ff54c2;   /* Manual review          */

  /* lines */
  --line-w: 1px;                       /* solid line thickness */
  --line-w-alt: 2px;                   /* dotted (branch B) thickness */
  --line-dash: 2 7;                    /* dotted pattern: dash gap */
  --line-opacity: 1;

  /* nodes */
  --node-r: 7px;                       /* filled dot radius */
  --halo-r: 12px;                      /* outer ring radius */
  --halo-w: 1.5px;                     /* outer ring thickness */
  --halo-gap: #f0f1f3;                 /* match section background */
  --end-scale: 1.25;                   /* size boost for last node */

  /* text */
  --label-size: 15px;                  /* in SVG units; scales with width */
  --label-color: #444444;
  --label-weight: 400;
  --num-size: 11px;
  --num-opacity: 1;

  /* nudge groups if you want to shift things without touching HTML */
  --branch-a-y: 0px;
  --branch-b-y: 0px;
}

/* ---------- reset legacy .pipeline rules from the old design ---------- */
.mitre-pipeline .pipeline {
  display: block;                      /* was grid/flex: made the SVG collapse */
  position: relative;
  gap: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  counter-reset: none;
}

.mitre-pipeline .pipeline::before,
.mitre-pipeline .pipeline::after {
  content: none;                       /* removes the old vertical rail */
  display: none;
}

.mitre-pipeline .pipeline svg {
  display: block;
  min-width: 0;
  width: 105%;
  height: auto;
  overflow: visible;
}

/* ---------- per-step color hooks ---------- */
.mitre-pipeline .pipeline .s1 { --c: var(--c1); }
.mitre-pipeline .pipeline .s2 { --c: var(--c2); }
.mitre-pipeline .pipeline .s3 { --c: var(--c3); }
.mitre-pipeline .pipeline .s4 { --c: var(--c4); }
.mitre-pipeline .pipeline .s5 { --c: var(--c5); }
.mitre-pipeline .pipeline .s6 { --c: var(--c6); }
.mitre-pipeline .pipeline .s7 { --c: var(--c7); }

/* ---------- lines ---------- */
.mitre-pipeline .pipeline .ln {
  fill: none;
  stroke: var(--c);
  stroke-width: var(--line-w);
  stroke-linecap: round;
  opacity: var(--line-opacity);
}

/* branch B = dotted, like the lower path in the reference */
.mitre-pipeline .pipeline .branch-b .ln {
  stroke-width: var(--line-w-alt);
  stroke-dasharray: var(--line-dash);
}

/* ---------- branch placement ---------- */
.mitre-pipeline .pipeline .branch-a { transform: translateY(var(--branch-a-y)); }
.mitre-pipeline .pipeline .branch-b { transform: translateY(var(--branch-b-y)); }

/* ---------- nodes ---------- */
.mitre-pipeline .pipeline .halo {
  r: var(--halo-r);
  fill: var(--halo-gap);
  stroke: var(--c);
  stroke-width: var(--halo-w);
}

.mitre-pipeline .pipeline .dot {
  r: var(--node-r);
  fill: var(--c);
}

.mitre-pipeline .pipeline .node.end .halo,
.mitre-pipeline .pipeline .node.end .dot {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(var(--end-scale));
}

/* ---------- text ---------- */
.mitre-pipeline .pipeline .label {
  fill: var(--label-color);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: -.01em;
  text-anchor: middle;
}

.mitre-pipeline .pipeline .num {
  fill: var(--c);
  font-size: var(--num-size);
  font-weight: 700;
  letter-spacing: .13em;
  text-anchor: middle;
  opacity: var(--num-opacity);
}

/* ---------- lede lines up with the pipeline ---------- */
.mitre-pipeline .section-lede {
  width: min(1100px, 100%);
  max-width: none;
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}


/* new mobile css */
/* Desktop shows horizontal, mobile shows vertical */
.mitre-pipeline .pipeline svg.pipeline-v { display: none; }

@media (max-width: 720px) {
  .mitre-pipeline .pipeline svg.pipeline-h { display: none; }
  .mitre-pipeline .pipeline svg.pipeline-v {
    display: block;
    max-width: 420px;
    margin: 0 auto;
    margin-left: -9px;
  }
}

/* Label/number alignment overrides for the vertical layout */
.mitre-pipeline .pipeline-v .label.start { text-anchor: start; }
.mitre-pipeline .pipeline-v .label.end   { text-anchor: end; }
.mitre-pipeline .pipeline-v .num.start   { text-anchor: start; }
.mitre-pipeline .pipeline-v .num.end     { text-anchor: end; }