/* Score chart: the score of every evaluation over time, on a fixed 0 to 100
   scale. The plot is an SVG stretched to its box; strokes keep their width
   through vector-effect, and each point is a zero-length line with a round
   cap, so it stays a dot whatever the stretch. */

.score-chart {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 12rem auto;
  column-gap: var(--space-xs);
  row-gap: var(--space-2xs);
  padding: var(--space-m) var(--space-l) var(--space-s) var(--space-s);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background-color: var(--bg-surface);
}

/* Negative margins centre the first and last labels on the 100 and 0 lines. */
.score-chart__scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-block: -0.5lh;
  color: var(--text-muted);
  font-size: var(--step--1);
  text-align: end;
}

.score-chart__plot {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}

.score-chart__grid {
  stroke: var(--border-subtle);
  stroke-width: 1;
}

.score-chart__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
}

.score-chart__point {
  stroke: var(--accent);
  stroke-width: 8;
  stroke-linecap: round;
}

.score-chart__dates {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  color: var(--text-muted);
  font-size: var(--step--1);
}