/* Keep the standalone diagrams and their explanations usable on small screens. */
header {
  flex-wrap:wrap;
}
.main {
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.main > * {
  min-width:0;
}
.block {
  flex-wrap:wrap;
}
.block-text {
  min-width:0;
  overflow-wrap:anywhere;
}
.block-badge {
  max-width:100%;
  overflow-wrap:anywhere;
}
.exp-formula {
  overflow-x:auto;
}
@media(max-width:1000px) {
  .main {
    grid-template-columns:minmax(0,1fr);
  }
  .pipeline-panel,.diagram-panel {
    border-right:0;
    border-bottom:1px solid var(--border);
  }
  .explanation-panel {
    position:static;
    max-height:none;
  }
}
@media(max-width:520px) {
  header,.legend,.explanation-panel {
    padding-inline:20px;
  }
  header h1 {
    font-size:1.75rem;
  }
  .arch-container {
    flex-direction:column;
    align-items:center;
    gap:1rem;
  }
  .flow-bridge {
    padding-top:0;
    height:2rem;
  }
  .flow-bridge::before {
    top:0;
  }
  .exp-grid {
    grid-template-columns:minmax(0,1fr);
  }
  .pipeline-panel .block {
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
  }
  .block-badge {
    grid-column:2;
    justify-self:start;
  }
}