/* Decentralised section: a network of team servers with no centre, where messages, commits and
   terminals hop from server to server (js/decentral-demo.js sends them). The diagram is an inline SVG. */

/* The diagram on the left, the text on the right */
.dz-row.reverse { grid-template-columns: 1.25fr 1fr; }

.dz-diagram {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.dz-link {
  stroke: var(--border-strong);
  stroke-width: 1.2;
  stroke-dasharray: 3 4;
}

.dz-spoke {
  stroke: var(--border);
  stroke-width: 1;
}

.dz-member { fill: var(--accent); }

.dz-server rect:first-child { fill: var(--text); }
.dz-bar { fill: var(--bg); }
.dz-led { fill: var(--brand-lavender); }

/* What travels: a pill with a message, a commit or a terminal on it */
.dz-pulse rect { fill: var(--accent); }

.dz-pulse text {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  fill: var(--accent-contrast);
}

/* A server lights up when something reaches it */
.dz-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  animation: dz-ring 0.9s var(--ease) forwards;
}

@keyframes dz-ring {
  from { opacity: 0.8; r: 18; }
  to { opacity: 0; r: 34; }
}

/* Tablets and phones turned sideways: the diagram under the text */
@media (max-width: 1023px) {
  .dz-row.reverse { grid-template-columns: 1fr; }
}

/* Phones: the diagram under the text, with bigger pills so they stay readable */
@media (max-width: 760px) {
  .dz-row.reverse { grid-template-columns: 1fr; }
  .dz-pill { transform: scale(1.6); }
}