/* The personal stats (refonte rf-stats, /mes-stats), loaded on their pages only: the tokens of the charter, no new one. */
.st-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--ns-space-3); margin: 0 0 var(--ns-space-5); }
.st-tiles > div { padding: var(--ns-space-3); background: var(--ns-tint); border: 1px solid var(--ns-border); border-radius: var(--ns-radius); }
.st-tiles dt { font-size: var(--ns-size-sm); color: var(--ns-muted); }
.st-tiles dd { margin: 0; font-size: var(--ns-size-xl); font-weight: 600; color: var(--ns-text-strong); font-variant-numeric: tabular-nums; }

/* The map of the year: the newest weeks in view first under a finger (rtl on the box, the drawing stays ltr). */
.st-map { direction: rtl; margin: 0 0 var(--ns-space-2); }
.st-map svg { direction: ltr; display: block; }
.st-map text { font-size: 10px; fill: var(--ns-muted); }
.st-l0 { fill: var(--ns-border); }
.st-l1 { fill: var(--ns-accent-light); }
.st-l2 { fill: var(--ns-line); }
.st-l3 { fill: var(--ns-accent); }
.st-l4 { fill: var(--ns-accent-darker); }

/* A curve: its axis in text beside it, the better on top; the drawing takes the width of the page. */
.st-chart { position: relative; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 var(--ns-space-2); margin: 0 0 var(--ns-space-4); }
.st-chart svg { display: block; width: 100%; height: auto; touch-action: pan-y; background: var(--ns-tint); border-radius: var(--ns-radius-sm); }
.st-axis { display: flex; flex-direction: column; justify-content: space-between; text-align: right; font-size: var(--ns-size-xs); color: var(--ns-muted); font-variant-numeric: tabular-nums; }
.st-dates { grid-column: 2; display: flex; justify-content: space-between; font-size: var(--ns-size-xs); color: var(--ns-muted); }
.st-chart figcaption { grid-column: 1 / -1; margin-top: var(--ns-space-2); font-size: var(--ns-size-sm); color: var(--ns-muted); }
.st-line { fill: none; stroke: var(--ns-border-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.st-average { fill: none; stroke: var(--ns-accent-dark); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.st-dot { fill: var(--ns-title); }
/* The hover of a curve (stats-curve.js): the game under the pointer. */
.st-dot-on { fill: var(--ns-accent-dark); r: 7px; }
.st-tip { position: absolute; z-index: 1; padding: var(--ns-space-1) var(--ns-space-2); font-size: var(--ns-size-xs); white-space: nowrap; color: var(--ns-on-ink); background: var(--ns-ink); border-radius: var(--ns-radius-sm); pointer-events: none; transform: translate(-50%, -130%); }
.st-game a { white-space: nowrap; }
.st-spark { display: block; color: var(--ns-title); }
.st-gain { color: var(--ns-ok); font-weight: 600; }
.st-loss { color: var(--ns-error); font-weight: 600; }