/* Player career tab — accordion groups (clubs first, national team
   last). Each group is a `<details>` collapsible card that uses the
   shared `.card` chrome with `.card--no-padding` so the header sits
   flush against the card edges. */

@layer components {
  .player-career-tab__groups {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
  }

  .player-career-group {
    overflow: hidden;
  }

  .player-career-group > summary {
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .player-career-group > summary::-webkit-details-marker {
    display: none;
  }

  .player-career-group__header {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
  }

  .player-career-group__logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgb(255 255 255 / 4%);
    border-radius: 8px;
  }

  .player-career-group__logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
  }

  .player-career-group__logo-placeholder {
    font-family: var(--font-title);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-muted);
  }

  .player-career-group__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .player-career-group__name {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .player-career-group__period {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-variant-numeric: tabular-nums;
  }

  .player-career-group__totals {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-title);
    font-size: 12px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
  }

  .player-career-group__totals-item {
    padding: 2px 6px;
    background: rgb(255 255 255 / 4%);
    border-radius: 4px;
    font-weight: 600;
  }

  .player-career-group__chevron {
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    transition: transform 200ms ease;
  }

  .player-career-group[open] .player-career-group__chevron {
    transform: rotate(180deg);
  }

  .player-career-group__body {
    padding: 4px 16px 14px;
    border-top: 1px solid var(--color-border);
  }

  .player-career-group__row {
    display: grid;
    grid-template-columns: 0.6fr 2.6fr 0.55fr 0.5fr 0.5fr 0.6fr;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    border-bottom: 1px solid rgb(255 255 255 / 4%);
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--color-text);
  }

  .player-career-group__row:last-child {
    border-bottom: none;
  }

  .player-career-group__row--head {
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 10px;
    font-weight: 600;
  }

  .player-career-group__row--total {
    font-weight: 600;
    background: rgb(255 255 255 / 4%);
    margin-top: 4px;
    padding: 8px;
    border-radius: 6px;
  }

  /* Bottom-of-body CTA — link to the team's own page. Sits outside
     the `<summary>` so it doesn't clash with the details toggle.
     Visible only when the accordion is open (the current team starts
     open by default; histórico is one tap away). */
  .player-career-group__team-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 10px;
    padding: 8px 12px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.15s ease;
  }

  .player-career-group__team-link svg {
    width: 12px;
    height: 12px;
  }

  .player-career-group__team-link:hover,
  .player-career-group__team-link:focus-visible {
    background: color-mix(in oklab, var(--color-accent) 12%, transparent);
  }

  .player-career-group__col {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .player-career-group__col--num {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .player-career-group__col--has-value {
    color: var(--color-text);
    font-weight: 600;
  }

  .player-career-group__dash {
    color: var(--color-text-muted);
  }

  .player-career-group__col--comp {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .player-career-group__comp-logo {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .player-career-group__comp-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .player-career-group__crown {
    width: 14px;
    height: 14px;
    color: var(--color-trophy, #f5c518);
    flex-shrink: 0;
  }

  .player-info-grid__flag {
    width: 14px;
    height: 10px;
    border-radius: 1px;
    object-fit: cover;
    margin-right: 4px;
    vertical-align: middle;
  }

  /* Hide totals item set on small screens — they crowd the header
     row otherwise. The values still appear inside the body's "Total"
     row when the group has 2+ seasons. */
  @media (width <= 380px) {
    .player-career-group__totals {
      display: none;
    }
  }

  /* ---------- Transfers timeline ----------
     Vertical timeline with a coloured dot per row + a connecting line
     drawn via the row's `::before` (last row drops the line so the
     timeline ends cleanly). Colour of the dot depends on the move
     type via the `.player-career-transfers__row--{type}` modifier so
     the timeline reads at a glance. */
  .player-career-transfers__list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .player-career-transfers__row {
    position: relative;
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: start;
    column-gap: 12px;
    padding: 12px 0 12px 4px;
  }

  .player-career-transfers__row::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 24px;
    bottom: -8px;
    width: 2px;
    background: var(--color-border);
  }

  .player-career-transfers__row:last-child::before {
    display: none;
  }

  .player-career-transfers__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-text-muted);
    border: 2px solid var(--color-bg);
    box-shadow: 0 0 0 2px var(--color-text-muted);
    z-index: 1;
    margin-left: 4px;
    margin-top: 5px;
  }

  .player-career-transfers__row--academy .player-career-transfers__dot {
    background: #a78bfa;
    box-shadow: 0 0 0 2px #a78bfa;
  }

  .player-career-transfers__row--promoted .player-career-transfers__dot {
    background: #38bdf8;
    box-shadow: 0 0 0 2px #38bdf8;
  }

  .player-career-transfers__row--loan .player-career-transfers__dot,
  .player-career-transfers__row--loan_end .player-career-transfers__dot {
    background: var(--color-yellow-card);
    box-shadow: 0 0 0 2px var(--color-yellow-card);
  }

  /* Free transfer dot — green, matches `transfer-badge--free` chrome
     in team-transfers (single source of truth for the colour map). */
  .player-career-transfers__row--free .player-career-transfers__dot {
    background: #4ade80;
    box-shadow: 0 0 0 2px #4ade80;
  }

  .player-career-transfers__row--extended .player-career-transfers__dot {
    background: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-accent);
  }

  /* Paid transfer (compra) dot — red, matches `transfer-fee--in` (the
     destination team's spend) in team-transfers. */
  .player-career-transfers__row--paid .player-career-transfers__dot {
    background: #f87171;
    box-shadow: 0 0 0 2px #f87171;
  }

  .player-career-transfers__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  /* Row 1 — destination logo + name on the left, transfer date on the
     right. The date hugs the right edge via `margin-left: auto`. */
  .player-career-transfers__row1 {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .player-career-transfers__logo,
  .player-career-transfers__logo-placeholder {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .player-career-transfers__logo-placeholder {
    background: rgb(255 255 255 / 6%);
    border-radius: 4px;
  }

  .player-career-transfers__to {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .player-career-transfers__date {
    margin-left: auto;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Row 2 — "DESDE [logo] from-name" on the left, transfer-badge or
     transfer-fee on the right. Both children stretch to fill the row
     so the badge stays pinned on the right edge. */
  .player-career-transfers__row2 {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .player-career-transfers__from-line {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .player-career-transfers__from-label {
    text-transform: uppercase;
    letter-spacing: 0.4px;
    flex-shrink: 0;
  }

  .player-career-transfers__from-logo {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .player-career-transfers__from {
    color: var(--color-text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* Row 3 — optional age + market-value-at-the-time line. */
  .player-career-transfers__row3 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--color-text-muted);
    flex-wrap: wrap;
  }

  .player-career-transfers__age,
  .player-career-transfers__mv {
    font-variant-numeric: tabular-nums;
  }

  .player-career-transfers__sep {
    color: var(--color-text-muted);
    opacity: 0.5;
  }

  /* Faded fee chip when a transfer entry has no monetary value. */
  .transfer-fee--unknown {
    color: var(--color-text-muted);
    font-weight: 500;
  }
}