/* Ecosystem map (widgets/ecosystem/ecosystem.js) */
.eco { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px 24px; padding: 14px 26px 14px 14px; }
.eco__svg { width: 100%; height: 100%; min-height: 0; overflow: visible; }
.eco__e { stroke: color-mix(in srgb, var(--a-teal) 70%, var(--ink) 10%); stroke-width: 3; transition: stroke .2s ease; }
.eco__e.is-hot { stroke: var(--a-orange); stroke-width: 6; }
.eco__e--b { stroke: var(--ink); stroke-width: 3; }
.eco__el { font: 500 26px var(--font); fill: var(--muted); text-anchor: middle; }
.eco__n { cursor: default; transition: opacity .2s ease; outline: none; }
.eco__n circle, .eco__n rect { fill: #59b3bd; transition: fill .4s ease; }
.eco__n--hub circle { fill: #44829a; }
.eco__n--core circle { fill: #33586a; }
.eco__n text { fill: #fff; font: 500 30px var(--font); text-anchor: middle; pointer-events: none; }
.eco__n--core text { font-size: 38px; }
.eco__n--box text { font-size: 30px; }
.eco__n .aha-i { color: #fff; stroke-width: 1.6; }
.eco__hi { display: none; }
.eco__n:hover circle, .eco__n:focus-visible circle { fill: var(--a-orange); }
.eco__n.is-dim { opacity: .28 !important; }
.eco__cap { fill: var(--ink) !important; font-size: 26px !important; opacity: 0; transition: opacity .3s ease; }
.eco__n.is-after .eco__cap { opacity: 1; }
/* Findings colours, as in the team's takeaway diagram. */
.eco__k-users.is-after rect { fill: #f7931e; }
.eco__k-focus.is-after circle { fill: #f15a24; }
.eco__k-social.is-after circle { fill: #e8d92b; }
.eco__k-social.is-after text { fill: #3b3a10; }
.eco__k-factor.is-after circle { fill: #9ccb2d; }
.eco__k-factor.is-after text { fill: #24300a; }
.eco__k-bridge.is-after circle { fill: var(--a-teal); }
.eco__side { align-self: center; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.eco__side h3 { margin: 0; font-size: clamp(16px, 5.2cqh, 22px); line-height: 1.15; font-weight: 600; letter-spacing: -.01em; }
.eco__side p { margin: 0; color: var(--ink-2); max-width: 44ch; }
.eco__tabs { display: flex; gap: 6px; }
.eco__legend { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--ink-2); opacity: 0; transition: opacity .4s ease; }
.eco--after .eco__legend { opacity: 1; }
.eco__legend li { display: inline-flex; align-items: center; gap: 6px; }
.eco__sw { width: 10px; height: 10px; border-radius: 50%; }
.eco__sw--users { background: #f7931e; border-radius: 2px; } .eco__sw--focus { background: #f15a24; } .eco__sw--social { background: #e8d92b; }
.eco__sw--factor { background: #9ccb2d; } .eco__sw--bridge { background: var(--a-teal); }
/* Narrow frames (≤ 640px; class set by widgets/aha-kit/kit.js). */
.eco.aha--w640 { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; padding: 12px 14px; }
/* Too small to read: names go to the tips, every node shows an icon. */
.aha--w640 .eco__n:not(.eco__n--leaf) > text { display: none; }
.aha--w640 .eco__hi { display: inline; }
.aha--w640 .eco__cap { display: none; }
.is-vertical .eco { grid-template-rows: auto auto; }
.is-vertical .eco__svg { height: auto; }