/* Roost-specific blocks only. Layout, color tokens, header, footer, and the shared blocks come from the
   fleet showcase kit (css/kit.css, css/rk-tokens.css); the blue accent comes from site.yml. */

/* The topology diagram: an inline SVG that follows the theme through the kit's tokens. */
.diagram { margin: 0 auto; max-width: 40rem; }
.diagram svg { display: block; width: 100%; height: auto; }
.diagram .d-box rect { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.diagram .d-box.d-inner rect { fill: var(--bg-alt); }
.diagram .d-box rect.d-idle { stroke-dasharray: 6 5; fill: transparent; }
.diagram .d-frame { fill: var(--accent-soft); stroke: var(--accent-c); stroke-width: 1.5; }
.diagram .d-text { fill: var(--text); font: 600 18px var(--font-sans); }
.diagram .d-sub { fill: var(--text-muted); font: 400 15px var(--font-sans); }
.diagram .d-title { fill: var(--accent-text); font: 700 17px var(--font-sans); }
.diagram .d-note { fill: var(--text-muted); font: 400 15px var(--font-sans); }
.diagram .d-center { text-anchor: middle; }
.diagram .d-line path, .diagram path.d-line { fill: none; stroke: var(--text-muted); stroke-width: 2; }
.diagram .d-dash { stroke-dasharray: 5 5; }
.diagram .d-arrowhead { fill: var(--text-muted); }
.diagram-list { margin: 1rem 0 0; padding-left: 1.25rem; color: var(--text-muted); font-size: 0.95rem; }
.diagram-list strong { color: var(--text); }