.fixtures__list {
    display: grid;
    gap: 0.75rem;
    max-width: 40rem;
}

/* Layout only - the look comes from .card--highlighted (card.css). */
.fixture-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.25rem 1rem;
    padding: 0.75rem 1rem;
}

.fixture-card__title {
    font-weight: 700;
}

.fixture-card__when {
    grid-column: 1;
    font-size: 0.875rem;
    opacity: 0.85;
}

.fixture-card__count {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    font-weight: 700;
}

/* Every fixture but the next one: white, so the next one stands out. */
.fixture-card--plain {
    background-color: var(--white);
}

.fixture__meta,
.fixture__count,
.fixture__share {
    margin-bottom: 1rem;
}

.fixture__mine {
    margin-top: 2rem;
}

.fixture__mine h2 {
    margin-bottom: 0.75rem;
}

.fixture__status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.fixture__status .icon {
    width: 1.75rem;
    height: 1.75rem;
}

.fixture__status--attending .icon__circle {
    fill: var(--tertiary);
}

/* Attendance and Formations: collapsible, closed to start with. */
.fixture__section {
    margin-top: 1rem;
    padding: 0 1rem;
    border: 0.125rem solid var(--border);
}

.fixture__mine + .fixture__section {
    margin-top: 2rem;
}

.fixture__section[open] {
    padding-bottom: 1rem;
}

.fixture__summary {
    display: flex;
    align-items: baseline;
    padding: 0.75rem 0;
    cursor: pointer;
}

.fixture__section[open] > .fixture__summary {
    margin-bottom: 0.25rem;
}

.form--wide {
    max-width: 60rem;
}

.form__choices--people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

/* Tighter than a page intro: these sit between controls. */
.fixture__formations .section__intro {
    margin-bottom: 0.75rem;
}