/* InTech Solutions — "How we work" combined service flowchart.
   Cyan = the stage running now, green = completed, amber = the fix-and-retest branch. */

.proc-flow { position: relative; }

/* ---- caption + progress ------------------------------------------------- */
.proc-phase {
  margin: 0 0 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue-dark);
  min-height: 18px;
}
.proc-progress {
  height: 3px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
  margin-bottom: 22px;
}
.proc-progress span {
  display: block; height: 100%; width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #3eb9f0, #4ec98d);
  transition: width .9s cubic-bezier(.4, 0, .2, 1);
}

/* ---- the chart ---------------------------------------------------------- */
.proc-flow .pf-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-body), "Segoe UI", system-ui, sans-serif;
  overflow: visible;
}

/* phase bands behind each group */
.proc-flow .pf-band {
  fill: var(--bg-soft);
  stroke: var(--line-soft);
  stroke-width: 1;
}
.proc-flow .pf-band-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: .1em;
  fill: #8296ae;
}

/* connectors */
.proc-flow .pf-edge {
  fill: none;
  stroke: #c8d7e8;
  stroke-width: 1.7;
  transition: stroke .45s ease;
}
.proc-flow .pf-edge.lit { stroke: #4ec98d; }
.proc-flow .pf-edge.dash { stroke-dasharray: 5 4; }
.proc-flow .pf-edge.loop { stroke: #dcc59a; }
.proc-flow .pf-edge.loop.lit { stroke: #d69e2e; }
.proc-flow .pf-head { fill: #c8d7e8; }
.proc-flow .pf-bus-note {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: .06em;
  fill: #8296ae;
}
.proc-flow .pf-loop-label {
  font-size: 10.5px;
  fill: #93866a;
}

/* boxes */
.proc-flow .pf-box {
  fill: #ffffff;
  stroke: var(--line);
  stroke-width: 1.3;
  transition: stroke .45s ease, fill .45s ease, filter .45s ease;
}
.proc-flow .pf-icon path {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .45s ease;
}
.proc-flow .pf-title {
  font-size: 12.5px;
  font-weight: 700;
  fill: var(--navy);
  transition: fill .45s ease;
}
.proc-flow .pf-sub {
  font-size: 10.5px;
  fill: var(--muted);
}
.proc-flow .pf-node { opacity: .62; transition: opacity .45s ease; }

/* lane headers read a touch stronger than their steps */
.proc-flow .pf-node.lane-head .pf-box { fill: #f7fbff; }
.proc-flow .pf-node.lane-head .pf-title { font-size: 13px; }
.proc-flow .pf-node.lane-step .pf-title { font-weight: 600; font-size: 12px; }

/* ---- states ------------------------------------------------------------- */
.proc-flow .pf-node.done { opacity: 1; }
.proc-flow .pf-node.done .pf-box { stroke: rgba(78, 201, 141, .62); }
.proc-flow .pf-node.done .pf-icon path { stroke: #2fa36c; }

.proc-flow .pf-node.current { opacity: 1; }
.proc-flow .pf-node.current .pf-box {
  stroke: var(--blue);
  stroke-width: 2.1;
  fill: #f2fbff;
  filter: drop-shadow(0 4px 12px rgba(62, 185, 240, .3));
}
.proc-flow .pf-node.current .pf-icon path { stroke: var(--blue-dark); }

/* the fix-and-retest branch */
.proc-flow .pf-node.rework .pf-box { stroke-dasharray: 5 4; }
.proc-flow .pf-node.rework.done .pf-box { stroke: rgba(214, 158, 46, .7); }
.proc-flow .pf-node.rework.done .pf-icon path { stroke: #c08a22; }
.proc-flow .pf-node.rework.current .pf-box {
  stroke: #d69e2e; stroke-dasharray: none; fill: #fffaf0;
  filter: drop-shadow(0 4px 12px rgba(214, 158, 46, .28));
}
.proc-flow .pf-node.rework.current .pf-icon path { stroke: #b57d16; }

.proc-flow .pf-node.final.done .pf-box { fill: rgba(78, 201, 141, .1); }

/* ---- narrow screens ----------------------------------------------------- */
/* The chart is wide by nature; below tablet it scrolls sideways rather than
   shrinking the labels into illegibility. */
.proc-scroll { overflow-x: auto; }
@media (max-width: 900px) {
  .proc-flow .pf-svg { min-width: 900px; }
}

@media (prefers-reduced-motion: reduce) {
  .proc-flow .pf-edge, .proc-flow .pf-box,
  .proc-flow .pf-icon path, .proc-flow .pf-title,
  .proc-flow .pf-node, .proc-progress span { transition: none; }
}