.beams-viz[data-viz="connectivity"] .scene-label.node-name {
  color: var(--ink);
  font-size: 10px;
  padding: 4px 6px;
  background: #0b0d2cdd;
  border: 1px solid var(--line);
}
.beams-viz[data-viz="connectivity"] .scene-label.node-state {
  font-size: 9px;
  color: var(--muted);
}
.beams-viz[data-viz="connectivity"] .scene-label.network-name {
  color: var(--signal);
  font-size: 9px;
  padding: 3px 4px;
  background: #0b0d2cdd;
}
.beams-viz[data-viz="connectivity"] .scene-label.discovery-label {
  color: var(--signal);
  font-size: 9px;
  padding: 3px 5px;
  background: #0b0d2cdd;
}
.beams-viz[data-viz="connectivity"] .scene-label.discovered {
  color: var(--signal);
}
.beams-viz[data-viz="connectivity"] .scene-label.model-slot {
  color: var(--purple);
}
.beams-viz[data-viz="connectivity"] .scene-label.audit-entry {
  width: 230px;
  white-space: normal;
  text-align: left;
  padding: 10px 12px;
  background: #0b0d2cf5;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 10px;
  line-height: 1.5;
}
.beams-viz[data-viz="connectivity"] .audit-entry > span {
  display: block;
}
.beams-viz[data-viz="connectivity"] .audit-title {
  color: #a7c8ff;
  margin-bottom: 4px;
}
.beams-viz[data-viz="connectivity"] .audit-payload {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.beams-viz[data-viz="connectivity"] .audit-heading {
  color: var(--muted);
  font-size: 8px;
  letter-spacing: 0.08em;
  margin-top: 8px;
}
.beams-viz[data-viz="connectivity"] .audit-summary {
  font-family: var(--sans);
}
.beams-viz[data-viz="connectivity"] .audit-risk {
  font-size: 9px;
  margin-top: 5px;
  color: var(--muted);
}
.beams-viz[data-viz="connectivity"][data-risk="low"] {
  --risk-color: var(--signal);
  --risk-wash: #84e6cc12;
}
.beams-viz[data-viz="connectivity"][data-risk="medium"] {
  --risk-color: #f4bf75;
  --risk-wash: #f4bf7518;
}
.beams-viz[data-viz="connectivity"] .audit-entry[data-risk="low"] .audit-risk,
.beams-viz[data-viz="connectivity"] .audit-entry[data-risk="medium"] .audit-risk {
  color: var(--risk-color);
}
.beams-viz[data-viz="connectivity"] .audit-entry.arriving {
  border-color: var(--risk-color, #a7c8ff);
  background: var(--panel);
  box-shadow: inset 3px 0 var(--risk-color, #a7c8ff);
}
@container beams-viz (max-width: 760px) {
  /* Leave room for the captured payload below the network diagram. */
  .beams-viz[data-viz="connectivity"] .swarm-field {
    height: clamp(260px, 85cqw, 320px);
  }
}
@container beams-viz (max-width: 520px) {
  .beams-viz[data-viz="connectivity"] .scene-label.node-name {
    font-size: 8px;
    padding: 3px 4px;
  }
  .beams-viz[data-viz="connectivity"] .scene-label.node-state {
    font-size: 8px;
  }
  .beams-viz[data-viz="connectivity"] .scene-label.network-name {
    font-size: 8px;
  }
  .beams-viz[data-viz="connectivity"] .scene-label.audit-entry {
    width: 174px;
    padding: 7px 8px;
    font-size: 8px;
    line-height: 1.4;
  }
  .beams-viz[data-viz="connectivity"] .audit-heading {
    margin-top: 5px;
    font-size: 7px;
  }
  .beams-viz[data-viz="connectivity"] .audit-risk {
    font-size: 8px;
    margin-top: 3px;
  }
}