/* page style: infrastructure */
body[data-site-layout='flow'] .infra-essay {
  display: grid;
  gap: var(--space-xl);
}

body[data-site-layout='flow'] .infra-article-header {
  display: grid;
  gap: var(--space-sm);
}

body[data-site-layout='flow'] .infra-deck {
  color: var(--muted);
}

body[data-site-layout='flow'] .infra-section {
  display: grid;
  gap: var(--space-sm);
}

body[data-site-layout='flow'] .infra-section > [data-placement='wide'] {
  margin-top: var(--space-sm);
}

body[data-site-layout='flow'] .host-metrics {
  display: grid;
  gap: 0;
}

body[data-site-layout='flow'] .host-metrics .metric-item {
  padding: var(--space-xs) 0;
}

body[data-site-layout='flow'] .infra-status-panel .data-view {
  gap: var(--space-xs);
}

body[data-site-layout='flow'] .infra-status-panel .data-row {
  border-bottom: 0;
  padding: var(--space-xs) 0;
}

body[data-site-layout='flow'] .infra-topology-figure {
  display: grid;
  gap: var(--space-sm);
}

body[data-site-layout='flow'] .infra-topology-track {
  align-items: stretch;
  display: grid;
  gap: var(--space-xs);
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
}

body[data-site-layout='flow'] .infra-topology-node {
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  display: grid;
  gap: var(--space-xs);
  min-width: 0;
  padding: var(--space-sm);
}

body[data-site-layout='flow'] .infra-topology-label {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-site-layout='flow'] .infra-topology-node strong {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
}

body[data-site-layout='flow'] .infra-topology-node p {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

body[data-site-layout='flow'] .infra-topology-arrow {
  align-self: center;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 1rem;
  justify-self: center;
}

body[data-site-layout='flow'] .infra-topology-figure figcaption {
  color: var(--muted);
  font-size: 0.78rem;
}

@media (max-width:900px) {
  body[data-site-layout='flow'] .infra-topology-track {
    grid-template-columns: minmax(0,1fr);
  }

  body[data-site-layout='flow'] .infra-topology-arrow {
    transform: rotate(90deg);
  }
}