/* TWF data-visualisation tokens and type: dark-bg native, Avenir Next Condensed numerals */
:root{
/* Categorical ramp: assign in order; wrap after 6. Size/position must encode data or be regular. */
--chart-cat-1:var(--twf-ice-cyan);
--chart-cat-2:var(--twf-cyan);
--chart-cat-3:var(--twf-royal);
--chart-cat-4:var(--twf-un-blue);
--chart-cat-5:var(--twf-coral);
--chart-cat-6:var(--twf-ice);
/* Grid and track lines */
--chart-grid:color-mix(in srgb,var(--twf-ice) 18%,transparent);
--chart-track:color-mix(in srgb,var(--twf-ice) 10%,transparent);
/* Value scales. RAMP: single-hue cyan for magnitude (low to high).
   SEVERITY: labelled multi-hue for how-bad-is-it classes; every severity
   visual imports this scale, nothing defines its own reds. */
--chart-ramp-1:var(--twf-deep);
--chart-ramp-2:var(--twf-surface-blue);
--chart-ramp-3:var(--twf-cyan);
--chart-ramp-4:var(--twf-cyan-electric);
--chart-ramp-5:var(--twf-ice-cyan);
--chart-severity-1:var(--twf-royal);
--chart-severity-2:var(--twf-sand);
--chart-severity-3:var(--twf-ember);
--chart-severity-4:var(--twf-alert);
--chart-severity-5:var(--twf-violet);
}
.twf-chart{font-family:var(--font-brand);color:var(--text-primary)}
.twf-chart-numeral{font-family:var(--font-condensed);font-weight:700;line-height:1;color:var(--twf-ice-cyan)}
.twf-chart-label{font-weight:var(--weight-heavy);font-size:14px;letter-spacing:0.02em;text-transform:uppercase}
.twf-chart-note{font-weight:var(--weight-light);font-size:14px;line-height:1.35;letter-spacing:var(--ls-body);color:var(--text-secondary)}
.twf-chart-source{font-weight:var(--weight-roman);font-size:12px;line-height:1.4;color:var(--text-secondary)}

/* Stat row (twf-stat-row) */
.twf-stat-row{display:grid;gap:40px}
.twf-stat-value{font-family:var(--font-condensed);font-weight:700;font-size:80px;line-height:1;color:var(--twf-ice-cyan)}
.twf-stat-label{font-weight:var(--weight-heavy);font-size:22px;letter-spacing:var(--ls-body);margin-top:14px}
.twf-stat-note{font-weight:var(--weight-light);font-size:18px;line-height:1.35;letter-spacing:var(--ls-body);color:var(--text-secondary);margin-top:8px}
.twf-stat-row .twf-chart-source{margin-top:28px;grid-column:1 / -1}

/* Allocation stack (twf-allocation-stack) */
.twf-alloc-bar{display:flex;width:100%;height:64px}
.twf-alloc-seg{display:flex;align-items:center;justify-content:center;font-weight:var(--weight-heavy);font-size:14px;letter-spacing:0.02em;overflow:hidden;white-space:nowrap;box-sizing:border-box}
.twf-alloc-seg + .twf-alloc-seg{border-left:1px solid color-mix(in srgb,var(--twf-abyss-deep) 40%,transparent)}
.twf-alloc-seg--ink{color:var(--twf-navy-deepest)}
.twf-alloc-seg--light{color:var(--twf-white)}
.twf-alloc-legend{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:40px;margin-top:36px}
.twf-alloc-group-name{font-weight:var(--weight-heavy);font-size:15px;letter-spacing:0.06em;text-transform:uppercase;display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--chart-grid)}
.twf-alloc-group-pct{margin-left:auto;font-family:var(--font-condensed);font-weight:700;font-size:20px;color:var(--twf-ice-cyan)}
.twf-alloc-swatch{width:12px;height:12px;flex-shrink:0}
.twf-alloc-item{display:flex;align-items:baseline;gap:8px;font-weight:var(--weight-light);font-size:15px;line-height:1.35;color:var(--text-secondary);margin-top:9px}
.twf-alloc-item-pct{margin-left:auto;font-family:var(--font-condensed);font-weight:600;font-size:16px;color:var(--text-primary)}