.visual-switch { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:14px; }
.visual-switch > span { font-size:14px; font-weight:650; }
.visual-switch [role=group] { display:flex; padding:3px; background:#f3f7f4; border:1px solid var(--line); }
.visual-switch button { min-height:42px; border:0; padding:8px 18px; background:transparent; font-size:14px; }
.visual-switch button[aria-pressed=true] { background:var(--green); color:white; }
.ecosystem-panel { background:#f7faf7; border:1px solid var(--line); }
.eco-toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line); font-size:14px; }
.eco-breadcrumb { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.eco-breadcrumb button { display:inline-flex; align-items:center; gap:8px; min-height:44px; border:1px solid var(--line); border-radius:4px; background:#f7faf7; color:var(--green); padding:9px 12px; font-size:14px; font-weight:600; white-space:nowrap; transition:background 180ms ease; }
.eco-breadcrumb button:hover { background:#e5eeea; }
.eco-breadcrumb button:focus-visible { outline:2px solid #096679; outline-offset:3px; }
[data-eco-location] { color:var(--muted); font-size:13px; }
.eco-level { color:var(--muted); font-size:12px; white-space:nowrap; }
.eco-graph { display:block; width:100%; aspect-ratio:900/710; overflow:hidden; }
.eco-graph text { text-anchor:middle; fill:var(--green); font-family:inherit; pointer-events:none; }
.eco-spokes path { fill:none; stroke:#6c9c97; stroke-width:2; }
.eco-halo { fill:none; stroke:#096679; stroke-width:1; opacity:.2; transition:opacity .2s,stroke-width .2s; }
.eco-core { fill:#096679; stroke:#f7faf7; stroke-width:4; }
.eco-hub .eco-core { fill:var(--green); }
.eco-graph .eco-hub-title { fill:white; font-size:36px; font-weight:800; letter-spacing:1px; }
.eco-graph .eco-hub-subtitle { fill:#cee3dd; font-size:27px; }
.eco-hub-caption { font-size:27px; }
.eco-graph .eco-partner-name { fill:white; font-size:30px; font-weight:700; }
.eco-city { font-size:calc(14px * var(--eco-unit)); font-weight:500; paint-order:stroke fill; stroke:#f7faf7; stroke-width:calc(4px * var(--eco-unit)); stroke-linejoin:round; transform:translateY(calc(23px * var(--eco-unit) - 22px)); }

.eco-partner,.eco-hub { cursor:pointer; outline:none; }
.eco-partner:hover .eco-halo,.eco-partner:focus-visible .eco-halo,.eco-hub:hover .eco-halo,.eco-hub:focus-visible .eco-halo,.eco-hub-selected .eco-hub .eco-halo { opacity:1; stroke-width:3; }
.eco-satellites { pointer-events:none; }
.eco-satellite { opacity:0; transition:opacity 240ms ease; }
.eco-active .eco-satellite { opacity:1; transition:opacity 480ms ease calc(180ms + var(--satellite-order)*65ms); }
.eco-cluster,.eco-hub { opacity:1; visibility:visible; transition:opacity 480ms ease 120ms,visibility 0s; }
.eco-cluster.eco-muted,.eco-hub.eco-muted { opacity:0; visibility:hidden; pointer-events:none; transition:opacity 320ms ease,visibility 0s 320ms; }
.eco-spokes { transition:opacity 400ms ease; }
.eco-partner .eco-core { transition:r 900ms cubic-bezier(.45,0,.2,1),stroke-width 900ms ease; }
.eco-partner .eco-halo { transition:r 900ms cubic-bezier(.45,0,.2,1),opacity 200ms,stroke-width 200ms; }
.eco-partner-name,.eco-city { transition:font-size 900ms cubic-bezier(.45,0,.2,1),transform 900ms cubic-bezier(.45,0,.2,1); }
.eco-satellites path { stroke:#94b9af; stroke-width:1; }
.eco-satellites circle { fill:#f7faf7; stroke:#096679; stroke-width:1.5; }
.eco-satellites text { font-size:13px; font-weight:600; }
.eco-satellites .eco-example-label { font-size:11px; fill:var(--muted); font-weight:400; }
.eco-local .eco-spokes { opacity:0; }
.eco-local .eco-partner .eco-core { r:40; stroke-width:2; }
.eco-local .eco-partner .eco-halo { r:46; }
.eco-local .eco-partner-name { font-size:18px; }
.eco-local .eco-city { font-size:13px; stroke-width:3px; transform:translateY(-20px); }
.eco-description { border-top:1px solid var(--line); padding:18px 20px 0; }
.eco-description strong { font-size:16px; }
.eco-description p { margin:8px 0 0; font-size:14px; line-height:1.6; }
.eco-disclaimer { padding:12px 20px 18px; margin:0; font-size:12px; line-height:1.5; color:var(--muted); }
/* Narrow drawing areas get a portrait composition, not larger text squeezed
   into the desktop positions. Layout is based on the panel width. */
.eco-compact .eco-toolbar { padding:10px 12px; }
.eco-compact .eco-description { padding:16px 14px 0; min-height:0; }
.eco-compact .eco-disclaimer { padding:12px 14px 16px; }

@media(prefers-reduced-motion:reduce) { .eco-graph * { transition:none!important; } }

.eco-partner .eco-core { r:62; }
.eco-partner .eco-halo { r:70; }


.eco-description { min-height:138px; }
.eco-forum-link { display:inline-block; margin:12px 0 4px; font-size:14px; line-height:1.5; text-underline-offset:4px; }
.eco-graph { overflow-anchor:none; }

/* Keep type and touch targets consistent even inside a narrow drawing area. */
.eco-compact:not(.eco-local) .eco-partner .eco-core { r:calc(30px * var(--eco-unit)); }
.eco-compact:not(.eco-local) .eco-partner .eco-halo { r:calc(35px * var(--eco-unit)); }
.eco-compact:not(.eco-local) .eco-partner-name { font-size:calc(14px * var(--eco-unit)); }
.eco-compact:not(.eco-local) .eco-city { font-size:calc(14px * var(--eco-unit)); }
.eco-compact .eco-hub .eco-core { r:calc(42px * var(--eco-unit)); }
.eco-compact .eco-hub .eco-halo { r:calc(47px * var(--eco-unit)); }
.eco-compact .eco-graph .eco-hub-title { font-size:calc(16px * var(--eco-unit)); }
.eco-compact .eco-graph .eco-hub-subtitle { font-size:calc(13px * var(--eco-unit)); }
.eco-compact .eco-hub-caption { font-size:calc(14px * var(--eco-unit)); transform:translateY(calc(12px * var(--eco-unit))); }
.eco-compact.eco-local .eco-partner-name { font-size:calc(17px * var(--eco-local-unit)); }
.eco-compact.eco-local .eco-city { font-size:calc(14px * var(--eco-local-unit)); }
.eco-compact .eco-satellites text { font-size:calc(14px * var(--eco-local-unit)); }
.eco-compact .eco-satellites .eco-example-label { font-size:calc(12px * var(--eco-local-unit)); }
.eco-satellites text { transform:translateY(calc(6px * var(--eco-local-unit))); }
.eco-satellites .eco-example-label { transform:translateY(calc(18px * var(--eco-local-unit))); }

.eco-compact:not(.eco-local) .eco-city { transform:translateY(calc(53px * var(--eco-unit) - 84px)); }

.eco-compact.eco-local .eco-city { transform:translateY(calc(53px * var(--eco-local-unit) - 84px)); }
.eco-compact .eco-hub-title { transform:translateY(calc(-3px * var(--eco-unit) + 8px)); }
.eco-compact .eco-hub-subtitle { transform:translateY(calc(17px * var(--eco-unit) - 23px)); }
.eco-compact .eco-hub-caption { transform:translateY(calc(65px * var(--eco-unit) - 114px)); }

.eco-hub .eco-core { r:90; }
.eco-hub .eco-halo { r:100; }
.eco-hub-caption { font-size:calc(14px * var(--eco-unit)); font-weight:500; paint-order:stroke fill; stroke:#f7faf7; stroke-width:calc(4px * var(--eco-unit)); transform:translateY(calc(23px * var(--eco-unit) - 24px)); }
.eco-compact.eco-local .eco-partner .eco-core { r:calc(30px * var(--eco-local-unit)); }
.eco-compact.eco-local .eco-partner .eco-halo { r:calc(35px * var(--eco-local-unit)); }