/* Sankey — matches existing site's "Allocation Flow"
   Light card, four labeled columns, curved colored ribbons. */
.sankey-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 32px 18px;
}
.sankey-head {
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom: 28px; gap:24px;
}
.sankey-head h2 {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600;
  letter-spacing:-0.01em;
  margin: 0 0 8px;
  color: var(--text);
}
.sankey-head p {
  font-size: 12.5px; color: var(--text-muted);
  margin: 0; max-width: 460px; line-height: 1.5;
}
.sankey-meta {
  display:flex; gap:18px; font-size:11px; color:var(--text-muted);
}
.sankey-meta b { color:var(--text); font-weight:600; }

/* 2026-05-02: aligned to the SVG's actual circle X positions, NOT
   four equal grid columns. SVG viewBox width = 1200 (see fb-sankey.js).
   Column circle centres are at X:
     FUND_DOT  = 296 → 24.7%
     COUNTRY   = 480 → 40.0%
     SECTOR    = 720 → 60.0%
     HOLDING   = 920 → 76.7%
   Each label is positioned absolutely and translated -50% so the text
   centres on the circle below. */
.sankey-cols {
  position: relative;
  height: 18px;
  padding: 0 0 16px;
  font-family: var(--font-body);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted);
}
.sankey-cols > div {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
.sankey-cols > div:nth-child(1) { left: 24.7%; }
.sankey-cols > div:nth-child(2) { left: 40%; }
.sankey-cols > div:nth-child(3) { left: 60%; }
.sankey-cols > div:nth-child(4) { left: 76.7%; }

.sankey-svg { display:block; width:100%; }

.sankey-fund-name { font:500 12px var(--font-body); fill:var(--text-2); }
.sankey-fund-name.is-dim { fill:var(--text-muted); opacity:0.5; }
.sankey-perf-pos { font:600 12px var(--font-body); fill:#16a34a; }
.sankey-perf-neg { font:600 12px var(--font-body); fill:#dc2626; }
.sankey-perf-neg.is-dim, .sankey-perf-pos.is-dim { opacity:0.45; }
.sankey-country-label { font:500 12px var(--font-body); fill:var(--text-2); }
.sankey-country-label.is-dim { fill:var(--text-muted); opacity:0.55; }
.sankey-sector-label { font:500 12px var(--font-body); fill:var(--text-2); }
.sankey-sector-label.is-dim { fill:var(--text-muted); opacity:0.4; }
.sankey-sector-label.is-active { font-weight:600; fill:var(--text); }

.sankey-holding-card {
  fill: var(--surface);
  stroke: var(--border);
  stroke-width: 1;
}
.sankey-holding-card.is-dim { opacity: 0.4; }
.sankey-holding-name { font:600 11px var(--font-body); fill:var(--text); letter-spacing:0.04em; }
.sankey-holding-name.is-dim { fill:var(--text-muted); }
.sankey-holding-weight { font:700 13px var(--font-body); fill:var(--text); }
.sankey-holding-funds { font:500 10px var(--font-body); fill:var(--text-muted); }

.sankey-hint {
  margin-top: 14px;
  text-align:center;
  font-size: 11px; font-style:italic;
  color: var(--text-muted);
}

/* color treatments */
.sankey-wrap[data-treatment="muted"] .sankey-svg path.flow { opacity:0.55; }
.sankey-wrap[data-treatment="vivid"] .sankey-svg path.flow { filter: saturate(1.4); }
.sankey-wrap[data-treatment="mono"]  .sankey-svg path.flow { filter: grayscale(1); opacity:0.5; }