/* The score-over-time chart on a full report (revision 4).

   Wide and flat: three guides, the line over them, the newest reading ringed.
   The plot's own width is whatever its cell gives it; score-chart.js draws to
   that width and redraws when it changes, so nothing here scales a stroke. */

.rp-chart {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.rp-chart__plot { display: block; width: 100%; height: 120px; }

.rp-chart__grid { stroke: var(--bd, rgba(29, 4, 70, .12)); stroke-width: 1; }
.rp-chart__label { font: 400 14px var(--t7-mono); fill: var(--t7-muted); }
.rp-chart__line {
  fill: none;
  stroke: var(--t7-electric);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.rp-chart__dot { fill: var(--t7-electric); }
/* Paper inside so the line does not show through the newest reading. */
.rp-chart__ring { fill: var(--t7-paper); stroke: var(--t7-electric); stroke-width: 4; }
/* Where what was measured changed: a dashed tick, so a step in the line reads
   as explained rather than as a wobble. */
.rp-chart__scope { stroke: var(--t7-muted); stroke-width: 1.5; stroke-dasharray: 3 3; }

.rp-chart__cap {
  margin: 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--t7-muted);
}
.rp-chart__cap strong { color: var(--t7-dark-purple); font-weight: 700; }
.rp-chart__scopenote {
  margin: 0;
  font: 400 13px/1.4 var(--t7-mono);
  color: var(--t7-muted);
}