/* Stats page: totals, a per-game table and two small bar charts. */

:root {
  /* Two series, checked for colour-blind separation against this surface.
     The amber sits under 3:1 on white, so every bar carries a visible number
     and the per-game view is a table — identity is never colour alone. */
  --series-plays: #5043ff;
  --series-qr: #e07a1f;
  --series-scans: #2a9d8f; /* printed codes scanned; checked against the other two */
  --grid: rgba(28, 30, 33, 0.1);
}

.stats {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Totals: the headline numbers, no chart needed */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.tile {
  padding: 20px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(28, 30, 33, 0.08);
}

.tile__value {
  font-size: 34px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.tile__label {
  margin-top: 6px;
  font-size: 14px;
  color: var(--text-muted);
}

.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.panel__title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 400;
}

.legend {
  display: flex;
  gap: 18px;
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--text-muted);
}

.legend__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

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

.legend__swatch--plays {
  background: var(--series-plays);
}

.legend__swatch--qr {
  background: var(--series-qr);
}

.legend__swatch--scans {
  background: var(--series-scans);
}

/* Per game */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.table th {
  padding: 0 12px 10px 0;
  text-align: left;
  font-weight: 400;
  font-size: 13px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--grid);
}

.table td {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--grid);
  vertical-align: middle;
}

.table tr:last-child td {
  border-bottom: 0;
}

.table__num {
  width: 96px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table__chart {
  width: 34%;
  min-width: 160px;
}

.table__name {
  overflow-wrap: anywhere;
}

.table__note {
  font-size: 13px;
  color: var(--text-muted);
}

/* A row's two bars, thin, with a gap so they never merge into one block */
.rowbar {
  display: grid;
  gap: 4px;
}

.rowbar__track {
  height: 8px;
  border-radius: 4px;
  background: rgba(28, 30, 33, 0.06);
  overflow: hidden;
}

.rowbar__fill {
  height: 100%;
  border-radius: 4px;
  min-width: 2px;
}

.rowbar__fill--plays {
  background: var(--series-plays);
}

.rowbar__fill--qr {
  background: var(--series-qr);
}

/* Day and hour charts */
.bars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  /* A definite height, so each column has something to fill. */
  height: 240px;
  padding-top: 8px;
}

.bars--hour {
  gap: 3px;
}

/* Label on top, the bars taking whatever height is left, caption underneath. */
.bar {
  display: grid;
  grid-template-rows: 16px minmax(0, 1fr) auto;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  cursor: default;
}

.bar__stack {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px; /* keeps the two series visibly separate */
  width: 100%;
  height: 100%;
}

.bar__fill {
  width: 42%;
  max-width: 22px;
  min-height: 2px;
  border-radius: 4px 4px 0 0; /* rounded away from the baseline only */
}

.bar__fill--plays {
  background: var(--series-plays);
}

.bar__fill--qr {
  background: var(--series-qr);
}

.bar__fill--scans {
  background: var(--series-scans);
}

.bar__label {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.bar__peak {
  font-size: 12px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.bars__empty {
  padding: 40px 0;
  text-align: center;
  color: var(--text-muted);
}

@media (max-width: 700px) {
  .table__chart {
    display: none;
  }

  .bar__label {
    font-size: 10px;
  }
}

/* Which list a row belongs to; pointless when one list is already chosen */
.table__list {
  width: 90px;
}

.is-filtered .table__list {
  display: none;
}