.infra-layers { display: flex; flex-direction: column; border-top: 1px solid var(--border-subtle); }
.infra-layer { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--space-8); padding: var(--space-8) 0; border-bottom: 1px solid var(--border-subtle); }
.infra-layer-label { display: flex; flex-direction: column; gap: var(--space-1); }
.infra-layer-index { color: var(--text-faint); font-family: var(--font-mono); font-size: var(--text-sm); }
.infra-layer-label > span:last-child { color: var(--text-secondary); font-size: var(--text-md); font-weight: 600; }
.infra-layer-head { margin-bottom: var(--space-5); }
.infra-layer-head h2 { margin: 0 0 var(--space-1); color: var(--text-primary); font-size: var(--text-lg); font-weight: 600; }
.infra-layer-head p { margin: 0; color: var(--text-muted); font-size: var(--text-base); line-height: 1.6; }

.infra-nodes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.infra-node { padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.infra-node-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-1); }
.infra-node-head strong { color: var(--text-secondary); font-size: var(--text-md); font-weight: 600; }
.infra-node-meta { margin: 0 0 var(--space-3); color: var(--text-faint); font-size: var(--text-sm); line-height: 1.5; }
.infra-node-items { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border-subtle); }
.infra-node-items li { padding: 5px 0; border-bottom: 1px solid var(--border-subtle); color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-sm); }
.infra-node-items li:last-child { border-bottom: 0; }

.infra-notes { padding-top: var(--space-10); }
.infra-notes h2 { margin: 0 0 var(--space-4); font-size: var(--text-lg); font-weight: 600; }
.infra-notes-list { margin: 0; border-top: 1px solid var(--border-subtle); }
.infra-notes-list > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-6); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); }
.infra-notes-list dt { color: var(--text-secondary); font-size: var(--text-base); font-weight: 500; }
.infra-notes-list dd { margin: 0; color: var(--text-muted); font-size: var(--text-base); line-height: 1.6; }

@media (max-width: 800px) {
    .infra-layer { grid-template-columns: 1fr; gap: var(--space-4); }
    .infra-layer-label { flex-direction: row; align-items: baseline; gap: var(--space-2); }
    .infra-notes-list > div { grid-template-columns: 1fr; gap: var(--space-1); }
}