/*
 * Stats counters: the overall state of the table below, and navigation into
 * it. Rendered by shared/_stats on the transfers and mapping screens.
 *
 * Glacier cards with a hero number (sections 9.3 and the dashboard tile grid),
 * on the responsive `auto-fill, minmax(...)` grid the design system specifies
 * for dashboards -- so the row fills the content area evenly whether it holds
 * two tiles or six, instead of leaving a ragged gap on the right.
 *
 * Deliberately unfiltered: the numbers are a fixed reference point while the
 * table below narrows. Colours come from the same `--outcome-*` vocabulary as
 * the pills, so "failed" means the same thing in both places.
 *
 * Extracted from dashboard.css -- two screens render this, so it is not one
 * screen's block.
 */

.summary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.summary__tile {
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  /* The left edge carries the outcome colour and the tile itself stays quiet,
     so a row of tiles does not read as a row of alerts. */
  border-left-width: 3px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.summary__tile:hover {
  box-shadow: var(--shadow-sm);
}

.summary__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  color: inherit;
  text-decoration: none;
}

.summary__link:hover {
  text-decoration: none;
}

.summary__count {
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-heading);
  /* Digits line up across tiles rather than jittering by glyph width. */
  font-variant-numeric: tabular-nums;
}

.summary__label {
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--text-tertiary);
}

.summary__tile.is-success { border-left-color: var(--outcome-success); }
.summary__tile.is-pending { border-left-color: var(--outcome-pending); }
.summary__tile.is-failed  { border-left-color: var(--outcome-failed); }
.summary__tile.is-drift   { border-left-color: var(--outcome-drift); }
.summary__tile.is-neutral { border-left-color: var(--border-secondary); }

/* The hero number takes the outcome colour too. On a tile the number is what
   an operator reads, and a count of failures that is typeset the same as a
   count of successes makes them scan the label to tell which is which. */
.summary__tile.is-success .summary__count { color: var(--outcome-success); }
.summary__tile.is-pending .summary__count { color: var(--outcome-pending); }
.summary__tile.is-failed  .summary__count { color: var(--outcome-failed); }
.summary__tile.is-drift   .summary__count { color: var(--outcome-drift); }