/* ============ FPLMan redesign · Club index (/teams) ============
   The list every club page is reached from. Phone-first: one tappable row per
   club, carrying the same rank/played/points columns the league table on a club
   page uses — and none of them before a match has been played, when there is no
   table to show. */

/* A 20-row list of clubs reads as a table, not as a wall: hold the whole page to a column and
   centre it, so the heading sits over the rows it describes. */
.club-index-page { max-width: 680px; margin: 0 auto; }

.club-index-head,
.club-index .ci-row {
  display: grid;
  grid-template-columns: 28px 34px 1fr 34px 44px 15px;
  gap: 10px;
  align-items: center;
}

/* Before the first result there is no rank, played or points to render. */
.club-index--preseason .ci-row { grid-template-columns: 34px 1fr 15px; }

/* Set on the cells, not the row: every one of them matches a rule below that names its own
   font-size, and a direct match beats anything inherited from the row. */
.club-index-head { padding: 0 8px 9px; border-bottom: 1px solid var(--border); }
.club-index-head span {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-4); padding: 0;
}

.club-index .ci-row {
  min-height: 52px;
  padding: 9px 8px;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
}
.club-index .ci-row:last-child { border-bottom: none; }
.club-index .ci-row:hover { background: var(--surface-3); }
.club-index .ci-row:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

.ci-rank {
  font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--text-3);
  text-align: center; border-radius: 5px; padding: 3px 0;
}
/* Same tints as the club page's table, restated rather than shared: that rule is scoped
   `.pl-list .pl-rank` in redesign-club.css, which a page loads *after* the base sheet, so a common
   class hoisted into the base sheet would tie on specificity and lose on source order. What is
   shared is the decision — LeagueRow.positionBand() picks the band for both tables. */
.ci-rank.cl { background: var(--green-tint); color: var(--green-deep); }
.ci-rank.el { background: var(--blue-tint); color: var(--blue); }
.ci-rank.rel { background: var(--red-tint); color: var(--red-fg); }

.ci-kit { display: flex; align-items: center; justify-content: center; }

/* overflow:hidden is load-bearing, not cosmetic: it is what lets the 1fr name column shrink below
   its content, so a long club name ellipsizes instead of widening the row past the viewport. */
.ci-name {
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ci-p, .ci-pts { font-family: var(--mono); text-align: right; }
.ci-p { font-size: 13px; color: var(--text-3); }
.ci-pts { font-size: 15px; font-weight: 800; }

.ci-go { color: var(--text-4); }

/* A phone row is too narrow for both a club name and every column: "Brighton and Hove Albion"
   truncates before matches played earns its 36px. The club page carries the full record. */
@media (max-width: 560px) {
  .club-index-head,
  .club-index .ci-row { grid-template-columns: 24px 30px 1fr 38px 15px; gap: 8px; }
  .club-index--preseason .ci-row { grid-template-columns: 30px 1fr 15px; }
  .ci-p { display: none; }
  .ci-name { font-size: 14px; }
}