/* ============================================================
   status.css — the Upcoming / Ongoing / Finished pill, plus the
   two small chip/tag variants the new tabs add.

   Ongoing is the only state that is true only right now, so it is
   the only one that carries a live dot and the warm accent. The
   other two stay quiet: a list where everything shouts reads as a
   list where nothing matters.
   ============================================================ */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid transparent;
}

.status-pill--upcoming {
  color: var(--blue-ink);
  background: var(--blue-soft);
  border-color: color-mix(in srgb, var(--blue) 30%, transparent);
}
.status-pill--ongoing {
  color: var(--red-ink);
  background: var(--red-soft);
  border-color: color-mix(in srgb, var(--red) 45%, transparent);
}
.status-pill--finished {
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border-color: var(--border);
}

.status-pill--sm {
  padding: 2px 8px;
  font-size: 10px;
}

/* The live dot breathes rather than blinks — peripheral, not urgent. */
.status-pill__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red);
  flex: 0 0 auto;
  animation: livePulse 1.8s ease-in-out infinite;
}

/* ---------- Neutral tag ----------
   For labels that are not a cluster: a round name, a sport, an
   event's own "Free entry". Same shape as a cluster tag, no hue. */
.tag--plain {
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  color: var(--ink-2);
  border: 1px solid var(--border);
}

/* ---------- Chip additions ---------- */
.chip__count {
  margin-left: 2px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.chip[aria-pressed="true"] .chip__count {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
}

/* Sport chips carry no colour key, so they drop the dot slot. */
.chip--plain { padding: 9px 16px; }
.chip--plain .chip__dot,
.chip--plain .chip__check { display: none; }

/* A plain tag carries no cluster colour, so it carries no dot. */
.tag--plain::before { display: none; }