/* ──────────────────────────────────────────────────────────────────
   Blueprint‑style Schematic
   (kept entirely namespaced so it never collides with existing CSS)
   ──────────────────────────────────────────────────────────────────*/

.schematic-container {
  /* centring + responsiveness */
  margin: 2.5rem auto;
  width: 100%;
  max-width: 600px;
  position: relative;
  overflow: hidden;                 /* hide any stray glow */
  border-radius: 8px;               /* soften edges on desktop */
}

/* deep‑blue background + subtle 20 px engineering grid */
.bg-grid {
  background-color: #0A1F44;
  background-image:
    repeating-linear-gradient(0deg ,  #12345A 0 1px, transparent 1px 20px),
    repeating-linear-gradient(90deg,  #12345A 0 1px, transparent 1px 20px);
  background-size: 20px 20px;
}

/* make the SVG always fill its wrapper */
.schematic-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* pipeline strokes */
.pipeline {

  stroke: #ffffff;
  stroke-linecap: round;
}

/* glowing nodes */
.node {
  fill: #ffffff;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.6));
}

/* arrow‑heads share the pipeline white */
.arrow-head {
  fill: #ffffff;
}

/* laundromat hub outline */
.hub {
  stroke: #ffffff;
  stroke-width: 3;
  fill: #b6c8ff;
}

/* Mobile ­– make the diagram span the full viewport width */
@media (max-width: 600px) {
  .schematic-container {
    border-radius: 0;
  }
}

/* pipeline strokes (add flow animation back) */
.pipeline {
  fill: none;
  stroke: #ffffff;
  stroke-linecap: round;

  /* flowing dashes */
  stroke-dasharray: 6 12;
  animation: flow 4s linear infinite;
}

/* keyframes were in the first version – add them back */
@keyframes flow { to { stroke-dashoffset: -200; } }