body {
    background-color: skyblue;
}

/* Squad table row actions (team/_squad_table.html.twig): all exactly the same box — width,
   height, symbol size — whether they show an emoji or a Font Awesome icon. */
.squad-action-btn {
    width: 2.25rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
}
.squad-action-btn > i {
    font-size: 1.05rem;
}

/* Collapsible boxes (templates/_collapsible_card.html.twig): the title row is the toggle. */
.collapsible-card > summary {
    cursor: pointer;
    list-style: none;
}
.collapsible-card > summary::-webkit-details-marker {
    display: none;
}
.collapsible-card-chevron {
    transition: transform .2s;
}
.collapsible-card[open] .collapsible-card-chevron {
    transform: rotate(180deg);
}

/* Player summary with badges (club/_player_macros.html.twig, playerSummaryBadges): fixed-width
   columns, so the rows of a list line up like a table — the positions column always has room
   for three badges, the name always starts at the same spot. On narrow screens it just wraps. */
.player-summary-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
}
.player-summary-row > .badge {
    min-width: 3.5rem;
}
@media (min-width: 992px) {
    .player-summary-row {
        display: inline-grid;
        grid-template-columns: 8.25rem 10rem 3rem 6.5rem 3.5rem 3.75rem;
    }
    .player-summary-value {
        text-align: right;
    }
}
.player-summary-positions {
    display: inline-flex;
    gap: .125rem;
}