/*
 * The traits hexagon (PlayerTraits.js).
 *
 * The chart sits in the middle column of a three-column, four-row grid and the
 * six labels sit around it at their own vertices: the top and bottom axes get
 * the top and bottom rows, spanning the width and centred; the four diagonal
 * axes get the two middle rows, one each side, centred in rows that split the
 * chart's height in half — which lands each label level with the vertex it
 * names, since a regular hexagon on a vertex has its side vertices a quarter of
 * the way down and a quarter of the way up. Labels to the left of the chart are
 * right-aligned and labels to the right are left-aligned, so both columns read
 * *inward*, toward the shape they belong to.
 */

/* The rule under the header is the reference's, and it earns its place here
   more than on any other card: the chart below is centred and has no left
   edge of its own to hang under the title, so without the line the two float
   apart. */
.player-traits .player-card__header {
  padding-bottom: calc(var(--space-3) * var(--player-scale));
  border-bottom: 1px solid var(--border);
}

.player-traits__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto 1fr 1fr auto;
  align-items: center;
  column-gap: calc(var(--space-3) * var(--player-scale));
  row-gap: calc(var(--space-1) * var(--player-scale));
  padding-block: calc(var(--space-1) * var(--player-scale)) calc(var(--space-2) * var(--player-scale));
}

/*
 * The chart holds its size while the labels around it come down with the scale
 * — see the note on --graphic-width in player-performance.css. Sized from its
 * height because the height is the thing that was wrong: a hexagon this shape
 * is taller than it is wide, and 176 is what gives it the standing the
 * reference's has without the two side columns losing the room a two-line
 * label needs on a 390px screen.
 */
.player-traits__chart {
  grid-column: 2;
  grid-row: 2 / 4;
  height: 176px;
  /* The viewBox's own ratio — see the note on the box in PlayerTraits.js. */
  aspect-ratio: 174 / 200;
  overflow: visible;
}

/* The rings behind the shape. Dashed and hairline — graph paper, not
   structure. */
.player-traits__ring {
  fill: none;
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

/* The outer ring is the hundredth percentile and is the one edge that is
   real, so it is solid, and a shade firmer than the paper inside it. */
.player-traits__ring--edge {
  stroke: var(--surface-pressed);
  stroke-dasharray: none;
}

.player-traits__spoke {
  stroke: var(--border);
  stroke-width: 1;
}

.player-traits__shape {
  fill: rgb(var(--club-rgb) / 0.3);
  stroke: rgb(var(--club-rgb));
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.player-traits__vertex {
  fill: var(--surface);
  stroke: rgb(var(--club-rgb));
  stroke-width: 1.5;
}

.player-traits__trait {
  display: flex;
  flex-direction: column;
  gap: calc(1px * var(--player-scale));
  min-width: 0;
  font-size: calc(var(--text-sm) * var(--player-scale));
  line-height: 1.25;
}

.player-traits__percentile {
  font-size: calc(var(--text-md) * var(--player-scale));
  font-weight: var(--weight-bold);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.player-traits__label {
  color: var(--text-muted);
}

/* --- Where each label sits ----------------------------------------------------- */

/* Top and bottom: one line, name then figure, centred over their vertex. */
.player-traits__trait[data-cell="t"],
.player-traits__trait[data-cell="b"] {
  grid-column: 1 / 4;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: baseline;
  gap: calc(var(--space-1) * var(--player-scale));
}

.player-traits__trait[data-cell="t"] {
  grid-row: 1;
}

.player-traits__trait[data-cell="b"] {
  grid-row: 4;
}

.player-traits__trait[data-cell="tl"],
.player-traits__trait[data-cell="bl"] {
  grid-column: 1;
  align-items: flex-end;
  text-align: right;
}

.player-traits__trait[data-cell="tr"],
.player-traits__trait[data-cell="br"] {
  grid-column: 3;
}

.player-traits__trait[data-cell="tl"],
.player-traits__trait[data-cell="tr"] {
  grid-row: 2;
}

.player-traits__trait[data-cell="bl"],
.player-traits__trait[data-cell="br"] {
  grid-row: 3;
}