/*
 * The transfer-value card (PlayerValueChart.js).
 *
 * The chart stretches (`preserveAspectRatio: none`), so everything that must
 * *not* stretch — the axis labels, the club marks — is HTML laid out around and
 * over it. See that file's header for the whole reasoning; what matters here is
 * that `.player-value__canvas` is the positioning context both the SVG and the
 * marks share, so a mark at 40% is 40% of the same box the line is drawn in.
 */

/*
 * The plot sits in a hairline frame of its own, which is what stops a chart
 * from reading as the card's wallpaper: the line, the axes and the marks are
 * one object with an edge, inset from the title the way the reference insets
 * its own.
 */
.player-value__plot {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(var(--space-2) * var(--player-scale)) calc(var(--space-3) * var(--player-scale));
  align-items: stretch;
  padding: calc(var(--space-4) * var(--player-scale)) calc(var(--space-3) * var(--player-scale))
    calc(var(--space-3) * var(--player-scale));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.player-value__y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  /* Half a line either end, so the top and bottom labels centre on the
     gridlines they name rather than sitting inside them. */
  margin-block: -0.55em;
}

.player-value__x {
  display: flex;
  justify-content: space-between;
  padding-top: calc(var(--space-1) * var(--player-scale));
}

.player-value__tick {
  font-size: calc(var(--text-xs) * var(--player-scale));
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/*
 * The plot's height does not ride --player-scale either — see the note on
 * --graphic-width in player-performance.css. Its width is the card's, and a
 * shorter chart at the same width is not a denser chart, it is a flatter one: a
 * decade of readings squashed into 98px lost the shape the card exists to show.
 */
.player-value__canvas {
  position: relative;
  height: 160px;
}

.player-value__chart {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.player-value__grid {
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.player-value__area {
  fill: rgb(var(--club-rgb) / 0.12);
  stroke: none;
}

.player-value__line {
  fill: none;
  stroke: rgb(var(--club-rgb));
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/*
 * A transfer, marked on the line. Positioned in percentages of the canvas for
 * the same reason the position card's marker is: the box stretches, and a mark
 * pinned in chart units would sit somewhere else on a wider phone.
 */
.player-value__mark {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  padding: calc(2px * var(--player-scale));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-card);
}