.topology { container-type: inline-size; padding: 1rem; }
.topology-toolbar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; }
.topology-heading h2 { font-size: 1.42rem; line-height: 1.15; }
.topology-counts, .topology-note { color: var(--muted); font-size: .83rem; margin: 0; }
.topology-filter { min-width: 9rem; }
.topology-layout { display: grid; gap: .8rem; }
.topology-board, .topology-inspector { min-width: 0; }
.topology-canvas {
  max-height: 32rem;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: .65rem;
  background-color: #101a18;
  background-image: radial-gradient(circle, #2d4742 1px, transparent 1px);
  background-size: 18px 18px;
  scrollbar-color: #42635d #141d1b;
}
.topology-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.topology-graph { position: relative; --topology-columns: 1; }
.topology-graph[data-columns="2"] { --topology-columns: 2; min-width: 22rem; }
.topology-graph[data-columns="3"] { --topology-columns: 3; min-width: 36rem; }
.topology-node-grid {
  display: grid;
  grid-template-columns: repeat(var(--topology-columns), minmax(0, 1fr));
  gap: 3.75rem 4.25rem;
  align-items: stretch;
  padding: 2.25rem 1.3rem;
}
.topology-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.topology-edge, .topology-sample { --edge: var(--accent); }
.topology-edge.warning, .topology-sample.warning { --edge: var(--warning); }
.topology-edge.disabled, .topology-sample.disabled { --edge: #879691; }
.topology-line { stroke: var(--edge); stroke-width: 2; fill: none; }
.topology-arrow { fill: var(--edge); }
.topology-edge.warning .topology-line { stroke-dasharray: 5 3; }
.topology-edge.disabled .topology-line { stroke-dasharray: 2 4; }
.topology-hit { stroke: transparent; stroke-width: 14; fill: none; pointer-events: stroke; cursor: pointer; }
.topology-edge:is(:hover, .is-selected) .topology-line { stroke-width: 4; }
.topology-node {
  position: relative;
  display: grid;
  align-content: center;
  justify-self: stretch;
  gap: .35rem;
  min-height: 6.75rem;
  padding: .65rem .75rem;
  border: 1px solid #52706a;
  border-radius: .6rem;
  background: #1a2a26;
  box-shadow: 0 8px 12px #0a131155;
  text-align: start;
  overflow-wrap: anywhere;
}
.topology-node[aria-pressed="true"] { border-color: var(--accent); background: #1c3934; box-shadow: inset 0 0 0 1px #39c7c954; }
.topology-node-title { font-size: 1.02rem; font-weight: 720; line-height: 1.23; }
.topology-id { color: var(--muted); font-family: ui-monospace, monospace; font-size: .76rem; margin: 0; overflow-wrap: anywhere; }
.topology-node-status { display: flex; gap: .38rem; align-items: center; color: var(--muted); font-size: .75rem; }
.topology-dot { flex: 0 0 .42rem; height: .42rem; border-radius: 50%; background: #82968e; }
.topology-dot.ok { background: var(--success); }
.topology-dot.pending { background: var(--warning); }
.topology-legend { display: flex; flex-wrap: wrap; gap: .3rem .85rem; list-style: none; margin: .6rem 0 .35rem; padding: 0; }
.topology-legend-item { display: flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .78rem; }
.topology-sample { width: 1rem; border-top: 2px solid var(--edge); }
.topology-sample.warning { border-top-style: dashed; }
.topology-sample.disabled { border-top-style: dotted; }
.topology-inspector {
  align-self: start;
  display: grid;
  gap: .75rem;
  padding: .65rem;
  border: 1px solid var(--line);
  border-radius: .65rem;
  background: #141e1b;
}
.topology-detail { display: grid; gap: .5rem; padding: .7rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--raised); }
.topology-detail-header { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: .45rem; }
.topology-detail-header h3 { margin: 0; line-height: 1.25; overflow-wrap: anywhere; }
.topology-detail-section { display: grid; gap: .35rem; }
.topology-detail-section > h3 { margin: 0; font-size: .9rem; color: var(--muted); }
.topology-detail-section .topology-detail { padding: .5rem .6rem; }
.topology-facts { display: grid; grid-template-columns: minmax(0, 6.4rem) minmax(0, 1fr); gap: .25rem .65rem; margin: 0; font-size: .82rem; }
.topology-facts dt { color: var(--muted); }
.topology-facts dd { margin: 0; overflow-wrap: anywhere; }
.topology-route-button {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  justify-self: stretch;
  gap: .35rem;
  text-align: start;
  font-size: .83rem;
  overflow-wrap: anywhere;
}
.topology-issues { color: var(--warning); margin: 0; padding-left: 1.15rem; font-size: .82rem; }
.topology-empty { display: grid; justify-items: center; gap: .25rem; padding-block: 1.5rem; }
.topology-empty button { justify-self: center; }

@container (min-width: 50rem) {
  .topology-layout { grid-template-columns: minmax(0, 1fr) minmax(16.75rem, .57fr); }
  .topology-inspector { max-height: 36rem; overflow: auto; scrollbar-color: #42635d #141d1b; }
}

@media (max-width: 560px) {
  .topology { padding: .65rem; }
  .topology-graph[data-columns="2"] { min-width: 0; }
  .topology-node-grid { padding-inline: .75rem; gap: 3.2rem 2.65rem; }
}