/* Quiet surfaces, direct labels and spacing establish hierarchy before color. */
.cc-points-charts { display: grid; gap: 1.75rem; margin-top: 1.5rem; min-width: 0; }
.cc-points-chart { min-width: 0; color: var(--mdb-body-color); }
.cc-points-chart h3 { font-size: 1.05rem; margin: 0 0 .35rem; }
.cc-points-chart__caption { font-size: .8rem; color: var(--mdb-secondary-color, inherit); margin: 0 0 1rem; }
.cc-points-chart__categories, .cc-points-chart__months { list-style: none; padding: 0; margin: 0; }
.cc-points-chart__categories { display: grid; gap: 1rem; }
.cc-points-chart__label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; font-size: .85rem; margin-bottom: .4rem; }
.cc-points-chart strong { font-variant-numeric: tabular-nums; font-weight: 600; }
.cc-points-chart__track { height: .5rem; background: var(--mdb-tertiary-bg, rgba(127,127,127,.15)); border-radius: .25rem; overflow: hidden; }
.cc-points-chart__fill { display: block; height: 100%; border-radius: inherit; }
.cc-points-chart__fill--ratings { background: var(--cc-green, #95c11f); }
.cc-points-chart__fill--submissions { background: var(--cc-pink, #ff2d6f); }
.cc-points-chart__fill--bonus { background: var(--ld-gold, var(--cc-gold, #d4af37)); }
.cc-points-chart__scroll { overflow-x: auto; padding-bottom: .5rem; }
.cc-points-chart__scroll:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.cc-points-chart__months { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(3.7rem, 1fr); gap: .5rem; }
.cc-points-chart__months li { text-align: center; font-size: .75rem; }
.cc-points-chart__months time { display: block; white-space: nowrap; margin-top: .5rem; }
.cc-points-chart__column { height: 7rem; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--mdb-border-color, #777); margin-top: .5rem; }
.cc-points-chart__column span { width: 1.25rem; background: var(--cc-green, #95c11f); border-radius: .2rem .2rem 0 0; }