/* Tournaments page only (tr-*). Tokens only.
   Mobile: title, full-width Create Tournament, chips (one swipeable row) then search, stacked.
   Desktop: title left / Create Tournament right; chips left / search right in one row. The filter bar stays visible while scrolling. */
.tr-head         { display: flex; flex-direction: column; gap: var(--space-3); }
.tr-head .ui-section__lead { margin-bottom: 0; }
.tr-head__action { align-self: stretch; }

.tr-toolbar   { display: flex; flex-direction: column; }
.tr-search    { width: 100%; }
.tr-count     { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* Status groups ("All" / "Mine") */
.tr-group        { display: flex; flex-direction: column; gap: var(--space-3); }
.tr-group + .tr-group { margin-top: var(--space-4); }
.tr-group__title { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.tr-group__count { color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); }

.tr-more      { display: flex; justify-content: center; padding-top: var(--space-2); }
.tr-nextup    { width: 100%; max-width: calc(var(--space-7) * 8); text-align: left; }

@media (min-width: 576px) {
  .tr-head         { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .tr-head__action { align-self: auto; flex-shrink: 0; }
}

@media (min-width: 768px) {
  .tr-toolbar { flex-direction: row; align-items: center; justify-content: space-between; }
  .tr-toolbar .ui-chip-group { flex: 1 1 auto; min-width: 0; }
  .tr-search  { flex: 0 1 auto; }
  .tr-search  { max-width: calc(var(--space-7) * 7); }
}

/* Filters + search stay in view while scrolling, at every width (the page scrolls inside .app-body).
   Phones: tighter spacing so the pinned bar stays small. */
.tr-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  margin-inline: calc(-1 * var(--space-3));
  padding: var(--space-2) var(--space-3);
  gap: var(--space-2);
  background: var(--color-bg);
  border-bottom: var(--border-width) solid var(--color-border);
}
@media (min-width: 768px) {
  .tr-toolbar { padding: var(--space-3); gap: var(--space-3); }
}