/* What the observers recorded: the fetch ladder, the command envelopes and the return tracks
   (viommu-trace-ui.mjs). Every mark is a letter or word as well as a colour. */
.viommu-trace {
  margin: 1rem 0;
  min-width: 0;
}
.viommu-trace h3,
.viommu-trace h4 {
  margin: 0.8rem 0 0.3rem;
}
.viommu-trace-note {
  margin: 0.4rem 0;
  border-left: 3px solid var(--line);
  padding-left: 0.6rem;
}
.viommu-ladder,
.viommu-returns {
  display: grid;
  gap: 0.5rem;
  padding-left: 1.2rem;
  font-size: 0.92rem;
}
.viommu-ladder li,
.viommu-returns li,
.viommu-ladder-host li {
  overflow-wrap: anywhere;
}
.viommu-ladder > li > b {
  display: block;
}
.viommu-ladder span {
  font: 0.84rem/1.5 ui-monospace, Consolas, monospace;
}
.viommu-ladder .viommu-blocked > b {
  color: var(--deny);
}
.viommu-ladder .viommu-skip {
  color: var(--muted);
  border-left: 3px dashed var(--line);
  padding-left: 0.5rem;
  list-style: none;
  margin-left: -1.2rem;
}
.viommu-ladder-host {
  margin-top: 0.3rem;
}
.viommu-ladder-host summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.viommu-ladder-host ol {
  padding-left: 1.2rem;
  font: 0.82rem/1.5 ui-monospace, Consolas, monospace;
}
.viommu-envelope {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.2rem 0.8rem 0.8rem;
  margin: 0.6rem 0;
  min-width: 0;
}
.viommu-env-lanes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}
@media (min-width: 760px) {
  .viommu-env-lanes {
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
  }
}
.viommu-env-fields,
.viommu-record dl {
  display: grid;
  grid-template-columns: minmax(6rem, max-content) 1fr;
  gap: 0.2rem 0.8rem;
  margin: 0.3rem 0;
  font: 0.84rem/1.5 ui-monospace, Consolas, monospace;
}
.viommu-env-fields dd,
.viommu-record dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.viommu-gate {
  border: 2px solid var(--accent);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  font-weight: 600;
}
.viommu-gate-refused,
.viommu-gate-stopped {
  border-style: dashed;
  border-color: var(--deny);
}
.viommu-records {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  margin: 0.6rem 0;
}
@media (min-width: 760px) {
  .viommu-records {
    grid-template-columns: 1fr 1fr;
  }
}
.viommu-record {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  min-width: 0;
}