.chart-box { position: relative; height: 240px; }
.chart-box.tall { height: 300px; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.legend .item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--ink-soft); }
.legend .swatch { width: 12px; height: 12px; border-radius: 3px; }

.ratebar { display: flex; flex-direction: column; gap: 10px; }
.ratebar .line { display: grid; grid-template-columns: 120px 1fr 56px; align-items: center; gap: 10px; }
.ratebar .track { height: 12px; background: var(--line); border-radius: 999px; overflow: hidden; }
.ratebar .fill { height: 100%; border-radius: 999px; }