section > article {
  flex: 1 1 300px;
  max-width: 500px;
}

h3 > mark {
  font-size: 75%;
  font-weight: normal;
}

mark.meshcore {
  background: var(--bg-accent);
  color: var(--accent);
}

mark.meshtastic {
  background: var(--bg-success);
  color: var(--success);
}

mark.repeater {
  background: var(--bg-variant);
  color: var(--variant);
}

mark.companion {
  background: var(--bg-attention);
  color: var(--attention);
}

.node-ids {
  font-size: 85%;
  margin: 0;
  padding-left: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 0.5em;
}

.node-ids dt {
  font-weight: bold;
  margin: 0;
}

.node-ids dt::after {
  content: ":";
}

.node-ids dd {
  margin: 0;
  padding: 0;
}

article details {
  margin: 1rem 0;
}

mark.retired {
  background: var(--bg-danger);
  color: var(--danger);
}