/* No inline styles anywhere: the CSP is style-src 'self'. Series colours are Okabe-Ito, matching dashboard.PALETTE. */
.chart-box { position: relative; height: 260px; }
.swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; margin-right: .4rem; vertical-align: -1px; }
.swatch-0 { background: #0072B2; } .swatch-1 { background: #E69F00; } .swatch-2 { background: #009E73; }
.swatch-3 { background: #CC79A7; } .swatch-4 { background: #D55E00; } .swatch-5 { background: #56B4E9; }
.swatch-6 { background: #F0E442; } .swatch-7 { background: #000; }

/* One cell per day. The four looks differ in shape/pattern, not only colour. */
.day-strip { display: flex; flex-wrap: wrap; gap: 3px; }
.day-cell { display: inline-block; width: 14px; height: 14px; border-radius: 3px; box-sizing: border-box; vertical-align: -3px; }
.day-cell[data-status="recorded"] { background: #0072B2; }
.day-cell[data-status="missing"] { background: transparent; border: 1.5px dashed #8a8f98; }
.day-cell[data-zero="true"] { background: #fff; border: 2px solid #0072B2; box-shadow: inset 0 -5px 0 -2px #0072B2; }
.day-cell[data-status="partial"] {
  background: repeating-linear-gradient(45deg, #9cc9e6 0 3px, #fff 3px 6px);
  border: 1.5px solid #0072B2;
}
.legend .day-cell { margin-right: .25rem; }

/* Goal ring: same blue as the recorded day cells; the track is neutral. The centre text is met/counted days. */
.goal-ring { flex: none; }
.ring-track { stroke: #dfe3e8; }
.ring-arc { stroke: #0072B2; }
.ring-text { font-size: 22px; font-weight: 600; fill: currentColor; }
.stat-card .day-cell { margin-right: .25rem; }