/* A pitch, attacking upwards. Slots are positioned by the formation's x/y. */
.pitch {
    position: relative;
    aspect-ratio: 68 / 80;
    width: 100%;
    background-color: var(--pitch);
    /* Mown stripes across the pitch. */
    background-image: repeating-linear-gradient(
        to bottom,
        var(--pitch) 0 10%,
        var(--pitch-stripe) 10% 20%
    );
    border: 0.125rem solid var(--pitch-line);
    overflow: hidden;
    /* Slot sizes below use cqi (1% of the pitch's width), so everything
       scales with the pitch rather than the screen. */
    container-type: inline-size;
}

.pitch--large {
    max-width: 30rem;
}

.pitch__halfway {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 0.125rem solid var(--pitch-line);
}

.pitch__circle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24%;
    aspect-ratio: 1;
    border: 0.125rem solid var(--pitch-line);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.pitch__box {
    position: absolute;
    left: 25%;
    width: 50%;
    height: 14%;
    border: 0.125rem solid var(--pitch-line);
}

.pitch__box--own {
    bottom: -0.125rem;
}

.pitch__box--opponent {
    top: -0.125rem;
}

.pitch__slot {
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    /* Slots in a line of n are 100/(n+1) % of the pitch apart; labels take
       90% of that gap, so neighbours never touch - narrow in a back five,
       roomy for a front two. */
    width: min(5.5rem, calc(90cqi / (var(--line-size, 1) + 1)));
    transform: translate(-50%, 50%);
    text-align: center;
}

.pitch__position {
    display: grid;
    place-items: center;
    width: clamp(1.35rem, 8.5cqi, 2.25rem);
    height: clamp(1.35rem, 8.5cqi, 2.25rem);
    border: 0.125rem solid var(--black);
    border-radius: 50%;
    background-color: var(--tertiary);
    color: var(--black);
    font-size: clamp(0.5rem, 2.4cqi, 0.7rem);
    font-weight: 700;
}

/* A taller pitch on phones gives the lines more room vertically. */
@media (max-width: 40rem) {
    .pitch--large {
        aspect-ratio: 68 / 100;
    }
}

.pitch__slot--close .pitch__position {
    background-color: var(--white);
    border-style: dashed;
}

.pitch__slot--empty .pitch__position {
    background-color: transparent;
    border: 0.125rem dashed var(--pitch-line);
    color: var(--white);
    opacity: 0.7;
}

.pitch__name {
    max-width: 100%;
    padding: 0 0.25rem;
    overflow: hidden;
    background-color: var(--black);
    color: var(--white);
    font-size: clamp(0.55rem, 2.6cqi, 0.7rem);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Legend swatches match the slot styles above. */
.legend {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-right: 1rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

.legend__swatch {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    border: 0.125rem solid var(--black);
    border-radius: 50%;
}

.legend__swatch--exact {
    background-color: var(--tertiary);
}

.legend__swatch--close {
    background-color: var(--white);
    border-style: dashed;
}

.legend__swatch--empty {
    border: 0.125rem dashed var(--border);
}

/* Catalogue / preference cards */
.formations__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 1.5rem;
}

.formation-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Fewer, bigger cards - for filled lineups, whose names need the room. */
.formations__list--roomy {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.formation-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
}

.formation-card__name {
    font-size: 1.25rem;
    font-weight: 700;
}

.formation-card__description {
    font-size: 0.875rem;
    opacity: 0.85;
}

.formation-card__pick {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.formation-card__pick input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--tertiary);
}

/*
 * Fixture lineups: closed ones are cards in a grid, the open one takes a
 * whole row. Grid items are the <turbo-frame>s around each <details>.
 */
.lineups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.75rem;
}

.lineups > :has(> .lineup[open]) {
    grid-column: 1 / -1;
}

.lineup {
    height: 100%;
    border: 0.125rem solid var(--border);
}

/* Open: no box of its own inside the Formations box, just a rule above. */
.lineup[open] {
    border-width: 0.25rem 0 0;
    border-color: var(--tertiary);
}

.lineup__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
}

/* The open one's summary is a blue bar under its yellow rule, like the page header. */
.lineup[open] > .lineup__summary {
    margin-bottom: 1rem;
    background-color: var(--primary);
    color: var(--white);
}

/* The browser's focus ring doesn't show on blue. */
.lineup[open] > .lineup__summary:focus-visible {
    outline: 0.1875rem solid var(--tertiary);
    outline-offset: -0.1875rem;
}

.lineup__name {
    font-size: 1.125rem;
    font-weight: 700;
}

.lineup__filled {
    font-weight: 700;
}

/* Closed: the count goes last, at the right edge, so the cards line up. */
.lineup:not([open]) .lineup__filled {
    order: 1;
    margin-left: auto;
}

/* The pitch, then what's beside it - sized to their content, not stretched. */
.lineup__body {
    display: grid;
    gap: 1.5rem;
    padding-bottom: 0.5rem;
}

@media (min-width: 48rem) {
    .lineup__body {
        grid-template-columns: minmax(0, 30rem) minmax(12rem, 20rem);
        justify-content: start;
        align-items: start;
        gap: 2rem;
    }
}

.lineup__side h3 {
    margin-bottom: 0.5rem;
}

.lineup__side li + li {
    margin-top: 0.25rem;
}

.lineup__help {
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.badge {
    padding: 0.1rem 0.5rem;
    background-color: var(--tertiary);
    color: var(--black);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Out of position (a manager's choice) */
.pitch__slot--out_of_position .pitch__position {
    background-color: var(--warning);
    color: var(--black);
}

.legend__swatch--out {
    background-color: var(--warning);
}

/* Pinned by the manager: a small marker on the position circle */
.pitch__slot--pinned .pitch__position {
    position: relative;
}

.pitch__slot--pinned .pitch__position::after,
.legend__pin {
    content: "";
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border: 0.1rem solid var(--black);
    border-radius: 50%;
    background-color: var(--white);
}

.pitch__slot--pinned .pitch__position::after {
    position: absolute;
    top: -0.2rem;
    right: -0.2rem;
}

/* Editing: slots and bench players are links/buttons */
.swap-form {
    display: contents;
}

.swap-target {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
    text-decoration: none;
    cursor: pointer;
}

.pitch__slot .swap-target:hover .pitch__position,
.pitch__slot .swap-target:focus-visible .pitch__position {
    outline: 0.2rem solid var(--white);
    outline-offset: 0.1rem;
}

.pitch__slot.is-selected .pitch__position {
    outline: 0.25rem solid var(--white);
    outline-offset: 0.15rem;
    transform: scale(1.15);
}

/* While something is selected, every other target pulses gently. */
@media (prefers-reduced-motion: no-preference) {
    .pitch--selecting .pitch__slot:not(.is-selected) .pitch__position {
        animation: swap-hint 1.2s ease-in-out infinite alternate;
    }
}

@keyframes swap-hint {
    to { outline: 0.15rem solid var(--white); outline-offset: 0.1rem; }
}

.lineup__bench-list {
    display: grid;
    gap: 0.25rem;
}

.bench-player .swap-target {
    flex-direction: row;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.2rem 0.4rem;
    border: 0.125rem solid transparent;
}

.bench-player .swap-target:hover,
.bench-player .swap-target:focus-visible,
.bench-player.is-selected .swap-target {
    border-color: var(--tertiary);
}

.bench-player.is-selected .swap-target {
    background-color: var(--tertiary);
    color: var(--black);
}

/* Black on white, or yellow for their main position - as on the roster. */
.bench-player__positions .position-list__item:not(.position-list__item--primary) {
    background-color: var(--white);
    color: var(--black);
}

.bench-player__none {
    font-size: 0.8rem;
    opacity: 0.8;
}

.lineup__hint {
    margin-bottom: 1rem;
    font-weight: 700;
}

.lineup__note {
    font-size: 0.875rem;
    opacity: 0.85;
}

.lineup__reset {
    margin-top: 1.5rem;
}

.badge--edited {
    background-color: var(--white);
}

/* Close fits and Ranked preference: side by side when there's room. */
.fit-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    margin-bottom: 0.75rem;
}

.fit-toggle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.fit-toggle__label {
    font-weight: 700;
}

.fit-toggle__option {
    padding: 0.2rem 0.75rem;
    border: 0.125rem solid var(--border);
    text-decoration: none;
}

.fit-toggle__option.is-active {
    border-color: var(--black);
    background-color: var(--tertiary);
    color: var(--black);
    font-weight: 700;
}

.fit-toggle__link {
    margin-left: 0.5rem;
}

.legends {
    margin-bottom: 1rem;
}