/*
 * The Career card (PlayerCareer.js) — spells in one view, seasons in the other.
 *
 * Both views share a column grid so the two read as one table seen two ways:
 * the crest and the name take whatever is left, and every figure column is a
 * fixed width so the numbers line up down the card — including the ones inside
 * an expanded season, which is what makes the expansion worth opening.
 */

.player-career {
  padding-inline: 0;
  gap: var(--space-2);
}

.player-career .player-card__header {
  padding-inline: var(--space-5);
}

/*
 * `TabBar` is sticky by default — it was written for the top of a page, where
 * the row should stay put while the panel behind it scrolls. Inside a card it is
 * a row of two, and sticking makes it ride over the rows below it as the page
 * scrolls past. Static here, and only here.
 */
/* `TabBar` is shared with three other surfaces, so it carries no scale of its
   own — see the note on `.filter-chip` in player-performance.css for why this is
   applied here rather than at the source. */
.player-career .tab-bar__tab {
  padding: var(--space-2) var(--space-3)
    var(--space-3);
  font-size: var(--text-sm);
}

.player-career .tab-bar {
  position: static;
  margin-bottom: var(--space-2);
  /*
   * Inset to the section's gutter, less the first tab's own side padding, so
   * "Club" starts on the same line as the eyebrow above it — and no top rule,
   * because full-bleed with hairlines top and bottom it was a second copy of
   * the page's own tab row, directly under it, and the eye read the two as
   * one control with a title between them. Inset and ruled only underneath,
   * it is a view switch inside a section, which is what it is.
   */
  margin-inline: calc((var(--space-5) - var(--space-3)));
  border-top: 0;
  /* On the sheet, not on the page ground: the row sits inside a white
     section, and the page's own tab row above it is painted the same way
     (player-details.css) — a grey strip here would be the one thing on the
     sheet still wearing the page behind it. */
  background: var(--surface);
}

.player-career__view[hidden] {
  display: none;
}

.player-career__group {
  display: flex;
  flex-direction: column;
}

.player-career__group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
}

.player-career__columns {
  display: flex;
  align-items: center;
  color: var(--text-secondary);
}

/*
 * The figure columns are narrow on purpose. The Season view carries four of
 * them plus a chevron, and every pixel they take comes off the club's name —
 * at 40 apiece the name truncated to "Previ…" on a 390px screen, which is the
 * column that was worth keeping.
 */
.player-career__column {
  display: grid;
  place-items: center;
  width: calc(32px * var(--scale));
}

.player-career__list {
  display: flex;
  flex-direction: column;
}

/* --- Rows -------------------------------------------------------------------- */

.player-career__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-5);
  text-align: left;
}

.player-career__row + .player-career__row,
.player-career__season + .player-career__season {
  border-top: 1px solid var(--border);
}

.player-career__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.player-career__name {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text);
}

.player-career__years {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.player-career__figure {
  width: calc(32px * var(--scale));
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/*
 * The season view's rating, tinted rather than solid — it sits in a row of four
 * columns where the solid chip the match list uses would be the loudest thing
 * on the card and would drag the eye down the rating column past everything
 * else. Same bands, quieter voice; the two treatments are the pair
 * season-stats.css and match-lineup.css already keep apart.
 */
.player-career__rating {
  width: calc(38px * var(--scale));
  padding-block: 1px;
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.player-career__rating[data-tier="high"] {
  background: var(--rating-high-soft);
  color: var(--rating-high);
}

.player-career__rating[data-tier="mid"] {
  background: var(--rating-mid-soft);
  color: var(--rating-mid);
}

.player-career__rating[data-tier="low"] {
  background: var(--rating-low-soft);
  color: var(--rating-low);
}

.player-career__chevron {
  display: flex;
  color: var(--text-muted);
  transition: transform var(--duration) var(--easing);
}

.player-career__chevron[data-open="true"] {
  transform: rotate(180deg);
}

/* --- A season's competitions -------------------------------------------------- */

.player-career__competitions {
  display: flex;
  flex-direction: column;
  background: var(--surface-sunken);
}

.player-career__competition {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* Indented past the crest column above it, so a competition reads as
     belonging to the season rather than as another season. */
  padding: var(--space-2) var(--space-5) var(--space-2) calc(var(--space-5) + var(--space-7));
}

.player-career__competition .player-career__name {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}

/* --- Legend ------------------------------------------------------------------- */

.player-career__legend {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5) 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.player-career__legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/*
 * The Season view's name line. Smaller than the Club view's, because this row
 * carries two more columns and a chevron in the same width — and because the
 * line under it (the season) is the one the reader is scanning for here, where
 * on the Club view it is the club.
 */
.player-career__row--season .player-career__name {
  font-size: var(--text-sm);
}