/* Every chart in the app is a bar, and a bar is an element with a width or a
   height — no SVG, no library. Marks are thin, the data end is rounded, the
   track behind them is recessive, and the value is always present as text. */

/* Single numbers, for the figures with nothing to compare against. */
.stat-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.stat-tile {
  flex: 1 1 7rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--spacing-md);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.stat-tile__label {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat-tile__value {
  font-size: var(--font-size-xl);
  line-height: 1.1;
}

.stat-tile__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-soft);
}

/* Horizontal bars: one row per category, ranked. */
.bar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.bar-list__row {
  display: grid;
  grid-template-columns: minmax(5rem, 8rem) 1fr auto auto;
  align-items: center;
  gap: var(--spacing-sm);
}

.bar-list__label {
  font-size: var(--font-size-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-list__track {
  height: 10px;
  background: var(--chart-track);
  border-radius: 2px;
}

.bar-list__fill {
  display: block;
  height: 100%;
  background: var(--chart-bar);
  /* Square at the baseline it grows from, rounded at the data end. */
  border-radius: 0 4px 4px 0;
}

.bar-list__value {
  font-size: var(--font-size-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.bar-list__note {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

/* Columns over time — the only chart here read left to right, because it is the
   only one whose order is time rather than rank. */
.column-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--color-border-strong);
  overflow-x: auto;
}

.column-chart__col {
  flex: 1 1 0;
  min-width: 2.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.column-chart__track {
  display: flex;
  align-items: flex-end;
  width: 60%;
  max-width: 2rem;
  height: 120px;
}

.column-chart__fill {
  width: 100%;
  background: var(--chart-bar);
  border-radius: 4px 4px 0 0;
}

.column-chart__value {
  font-size: var(--font-size-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.column-chart__label {
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  white-space: nowrap;
}

/* Two players, growing out from a shared centre. */
.compare {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.compare__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--spacing-sm);
}

.compare__side {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-width: 0;
}

.compare__side--left {
  justify-content: flex-end;
}

.compare__side--right {
  justify-content: flex-start;
}

.compare__bar {
  height: 10px;
}

.compare__bar--one {
  background: var(--chart-series-1);
  border-radius: 4px 0 0 4px;
}

.compare__bar--two {
  background: var(--chart-series-2);
  border-radius: 0 4px 4px 0;
}

.compare__label {
  min-width: 4rem;
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.compare__value {
  font-size: var(--font-size-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* The swatch never carries the meaning on its own — the name is next to it. */
.legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin: 0 0 var(--spacing-md);
  padding: 0;
}

.legend__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
}

.legend__swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.legend__swatch--one {
  background: var(--chart-series-1);
}

.legend__swatch--two {
  background: var(--chart-series-2);
}

/* Recent results. The letter is the outcome; the colour only reinforces it. */
.form-strip {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.form-chip {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-sm);
  color: #ffffff;
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.form-chip--win {
  background: var(--color-success);
}

.form-chip--loss {
  background: var(--color-danger);
}

.form-chip--draw {
  background: var(--grey-400);
}