/* Activity feed and leaderboard (sidebar Activity tab). Colours come from the theme tokens in app.css. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.activity-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.activity-switch {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.activity-tab {
  min-height: 32px; padding: 4px 10px; border: 0; border-radius: 4px;
  background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer;
}
.activity-tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.activity-tab:focus-visible, .activity-refresh:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.activity-refresh { min-height: 36px; padding: 6px 10px; }
.activity-empty, .activity-error { margin: 8px 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.activity-error { color: var(--danger); }
.activity-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.activity-item {
  padding: 10px 12px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.activity-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.activity-actor { font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.activity-time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.activity-text { margin: 4px 0 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.leader-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.leader-table th, .leader-table td { padding: 6px 4px; border-bottom: 1px solid var(--border); text-align: right; }
.leader-table th { color: var(--muted); font-weight: 600; font-size: 12px; }
.leader-table th:first-child, .leader-table td:first-child { text-align: left; }
.leader-member { max-width: 96px; overflow-wrap: anywhere; font-weight: 600; }
.leader-num { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .activity-tab { transition: none; }
}