/* A team's page (www/team.html, js/teams/team-page.js): a floodlit banner
   with the badge, the squad in its lines as cards, the
   team's cups, and for a member the doors out. The sky, bands, rows,
   and cup states come from css/shared/night.css. */

/* ── Two states ───────────────────────────────────────────────────────── */
/* The script shows #teamContent once the team has loaded; until then, or
   when there is no such team, the plain head says so and keeps its
   distance from the footer. */
#teamContent:not([hidden]) ~ .team-none {
    display: none;
}

.team-none {
    margin-bottom: var(--space-16);
}

/* ── The banner ───────────────────────────────────────────────────────── */
.team-head {
    padding: var(--space-16) 0 var(--space-12);
}

.team-head__inner {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr) auto;
    grid-template-areas:
        "crest id    actions"
        "crest stats stats";
    align-items: center;
    column-gap: var(--space-10);
}

/* The badge as it is drawn, not in a round frame, standing off the sky by
   a real shadow under it. */
.team-head__crest {
    grid-area: crest;
    align-self: center;
}

.team-head__badge {
    display: block;
    width: 8rem;
    height: 8rem;
    object-fit: contain;
    filter: drop-shadow(0 12px 18px rgba(2, 6, 23, 0.55));
}

.team-head__id {
    grid-area: id;
    min-width: 0;
}

/* The team's name at the headline size, the largest words on the page. A
   long name steps down so it keeps to two lines. */
.team-head__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 1.4rem + 3.8vw, 5.25rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.015em;
    color: #fff;
    overflow-wrap: break-word;
    text-wrap: balance;
}

.team-head__name.is-long {
    font-size: clamp(2.25rem, 1.3rem + 2.8vw, 4rem);
}

.team-head__name.is-longer {
    font-size: clamp(1.875rem, 1.2rem + 2vw, 3rem);
}

.team-head__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin: var(--space-4) 0 0;
    color: var(--led-pale-72);
}

.team-head__meta:empty {
    display: none;
}

.team-head__manager {
    color: #fff;
    font-weight: var(--weight-medium);
    text-decoration: none;
    text-underline-offset: 3px;
}

.team-head__manager:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

/* Drawn rather than typed, so no line ends or starts on it. */
.team-head__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}

.team-head__notice {
    max-width: 60ch;
    margin: var(--space-3) 0 0;
    color: var(--led-pale);
}

/* The team's links, as a player's are on the profile: in the text's
   colours rather than the brands'. */
.team-head__socials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

.team-head__socials .icon-btn {
    color: var(--led-pale-72);
    text-decoration: none;
}

.team-head__socials .icon-btn svg {
    width: var(--text-lg);
    height: var(--text-lg);
}

.team-head__socials .icon-btn:hover {
    color: var(--text-primary);
}

.team-head__actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
}

.team-head__actions[hidden] {
    display: none;
}

/* The record in one line of figures, each with its word beside it, then
   the credits for a member. A team that has not played shows none. */
.team-head__stats {
    grid-area: stats;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-8);
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
}

.team-head__stats[hidden] {
    display: none;
}

.team-head__stats li {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
}

.team-head__stats li[hidden] {
    display: none;
}

.team-head__stats .t-figure {
    font-size: var(--text-2xl);
    color: #fff;
}

/* Give to the team, a text door beside the credits it adds to. */
.team-head__give {
    margin-left: var(--space-2);
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent-hover);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--duration) var(--ease-out);
}

.team-head__give:hover {
    color: #fff;
}

.team-head__give:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.team-head .t-label {
    color: var(--led-pale-72);
}

/* ── The squad ────────────────────────────────────────────────────────── */
/* The band's head carries the count and each line's, beside the title. */
.squad__counts {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.squad__counts li {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
}

.squad__counts .t-figure {
    font-size: var(--text-2xl);
    color: var(--text-primary);
}

.squad__short {
    margin-bottom: var(--space-6);
}

/* ── The squad sheet ───────────────────────────────────────────────────── */
/* Each line under its name and count, its players side by side, three to a
   row on a wide screen and one on a phone, each under a hairline. */
.squad__line + .squad__line {
    margin-top: var(--space-10);
}

.squad__line-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-strong);
}

.squad__line-name {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--led-pale);
}

.squad__line-head .t-figure {
    font-size: var(--text-lg);
    color: var(--text-primary);
}

.squad__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    column-gap: var(--space-12);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A player is their profile's link: the name's link covers the card, and
   its hairline draws over in silver from the left under the pointer. */
.squad__row {
    position: relative;
    display: grid;
    grid-template-columns: 3.5rem 44px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border);
}

.squad__row::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease-out);
    pointer-events: none;
}

.squad__row:hover::after,
.squad__row:focus-within::after {
    transform: scaleX(1);
}

.squad__row:has(.squad__name:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* The position as a code, set like a figure. */
.squad__code {
    font-family: var(--font-figures);
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    text-decoration: none;
    cursor: default;
}

abbr.squad__code[title] {
    text-decoration: none;
    border: 0;
}

.squad__code--none {
    color: var(--text-secondary);
}

.squad__code--other {
    font-size: var(--text-base);
    color: var(--text-secondary);
}

.squad__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-elevated);
}

.squad__who {
    min-width: 0;
}

.squad__name-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
    margin: 0;
}

/* A player is named in Marcellus, as the trading card names them. */
.squad__name {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: 1.2;
    color: var(--text-primary);
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color var(--duration) var(--ease-out);
}

.squad__name::before {
    content: '';
    position: absolute;
    inset: 0;
}

.squad__name:focus-visible {
    outline: none;
}

.squad__row:hover .squad__name {
    color: var(--accent-hover);
}

.squad__role {
    color: var(--led-bright);
}

/* The flag and, for the team's members, the day they joined, on one quiet line. */
.squad__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    margin: var(--space-1) 0 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.squad__flag {
    display: block;
    width: 20px;
    height: 15px;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgb(var(--led-pale-rgb) / 0.18);
}

/* Above the card's own link, so each is its own door. */
.squad__nudge,
.squad__end {
    position: relative;
    z-index: 1;
}

.squad__nudge {
    display: inline-block;
    margin-top: var(--space-1);
    color: var(--accent-hover);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-underline-offset: 3px;
}

.squad__nudge:hover {
    color: var(--text-primary);
}

.squad__empty {
    grid-column: 1 / -1;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.squad__invites {
    margin-top: var(--space-12);
}

.invite-row .rows__name a {
    color: inherit;
    text-decoration: none;
}

.invite-row .rows__name a:hover {
    color: var(--accent-hover);
}

/* ── Invite a player's matches ────────────────────────────────────────── */
.invite-matches:empty {
    display: none;
}

.invite-matches {
    margin-top: var(--space-4);
}

.invite-match {
    width: 100%;
    padding-inline: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.invite-match .rows__name,
.invite-match .rows__meta {
    display: block;
}

.invite-match .rows__name {
    font-size: var(--text-base);
}

.invite-match:hover,
.invite-match:focus-visible {
    color: var(--accent-hover);
}

.invite-match__avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-elevated);
}

.invite-matches__none {
    padding: var(--space-3) 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* ── The cups ─────────────────────────────────────────────────────────── */
.team-cups > * {
    min-width: 0;
}

/* Live now over Coming up; a hidden one leaves no gap. */
.team-cups__now > .desk + .desk {
    margin-top: 0;
}

.team-cups__now > .desk:not([hidden]) + .desk {
    margin-top: var(--space-12);
}

.team-cups.is-single {
    grid-template-columns: minmax(0, 1fr);
}

.team-cups__now:not(:has(> .desk:not([hidden]))) {
    display: none;
}

.team-cups__played {
    margin-top: var(--space-16);
}

#cupsBand .desk {
    container-type: inline-size;
}

.entry-row .rows__name a {
    color: inherit;
    text-decoration: none;
}

.entry-row .rows__name a:hover {
    color: var(--accent-hover);
}

.entry-row__due {
    color: var(--led-pale);
}

/* A match from the team's side, as on a player's page: W D or L, the other
   team's badge, the score, the other team, then the day, the cup and the
   round. The columns belong to the list and each row takes them as a
   subgrid, so every score and name starts at the same place. */
.result-list {
    display: grid;
    grid-template-columns: auto auto auto minmax(0, 1fr) auto;
}

.result {
    position: relative;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: baseline;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    text-decoration: none;
}

.result::after {
    content: '';
    position: absolute;
    inset: auto 0 -1px;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease-out);
}

.result:hover::after,
.result:focus-visible::after {
    transform: scaleX(1);
}

.result:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.result__mark {
    grid-column: 1;
    padding-right: var(--space-4);
    color: var(--text-secondary);
    font-size: var(--text-xl);
}

.result__mark--w {
    color: var(--text-primary);
}

.result__score {
    grid-column: 2;
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    padding-right: var(--space-4);
}

.result__crest {
    grid-column: 3;
    align-self: center;
    padding-right: var(--space-3);
}

.result__crest img {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.result__score .t-figure {
    font-size: var(--text-xl);
}

.result__team {
    grid-column: 4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-family: var(--font-display);
    font-size: var(--text-base);
    line-height: 1.3;
    overflow-wrap: anywhere;
    transition: color var(--duration) var(--ease-out);
}

a.result:hover .result__team {
    color: var(--accent-hover);
}

.result__dash {
    align-self: center;
    width: 0.5rem;
    height: 1px;
    background: var(--text-secondary);
}

.result__v {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.result__meta {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-2);
    margin-top: var(--space-1);
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

@container (min-width: 36rem) {
    .result__meta {
        grid-column: 5;
        grid-row: 1;
        flex-wrap: nowrap;
        margin-top: 0;
        padding-left: var(--space-6);
        white-space: nowrap;
    }
}

.result-list + .rows {
    margin-top: var(--space-4);
}

.wdl {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
}

.wdl .t-figure {
    font-size: var(--text-xl);
}

.wdl .t-label {
    margin-left: -0.15rem;
}

.cup-end {
    min-width: 6.5rem;
}

.cup-place {
    color: var(--text-secondary);
}

.cup-place--1 {
    color: var(--text-primary);
}

/* ── The doors out ────────────────────────────────────────────────────── */
.team-door {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Whichever band is last keeps the footer's distance. */
#teamContent {
    padding-bottom: var(--space-20);
}

/* Bootstrap fills .btn-danger red while it is focused or pressed; a door
   that cannot be undone stays an outline. */
.btn-danger:focus,
.btn-danger:active {
    border-color: rgba(239, 68, 68, 0.4);
    background: transparent;
    color: #f87171;
    box-shadow: none;
}

.btn-danger:hover {
    border-color: var(--danger);
    background: rgba(239, 68, 68, 0.08);
    color: #fca5a5;
}

/* ── The invite and edit dialogs ──────────────────────────────────────── */
.badge-pick { display: flex; align-items: center; gap: var(--space-3); }
.badge-pick__preview { flex: none; width: 64px; height: 64px; border-radius: 8px; object-fit: cover; }
.badge-pick .form-input { min-width: 0; }

/* A form between .modal-content and its body and footer. Bootstrap's
   scrollable dialog shrinks only direct children, so the form has to shrink
   for the body to scroll and the footer to stay on screen. */
.modal-content > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.modal-footer {
    gap: var(--space-3);
}

.modal-footer > * {
    margin: 0;
}

/* ── Smaller screens ──────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .team-head__inner {
        grid-template-columns: 9rem minmax(0, 1fr);
        grid-template-areas:
            "crest id"
            "crest actions"
            "crest stats";
        grid-template-columns: 7rem minmax(0, 1fr);
        column-gap: var(--space-8);
    }
    .team-head__badge {
        width: 7rem;
        height: 7rem;
    }
    .team-head__actions {
        justify-content: flex-start;
        margin-top: var(--space-5);
    }
    .team-cups {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .team-head {
        padding: var(--space-10) 0 var(--space-10);
    }
    .team-head__inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "crest"
            "id"
            "actions"
            "stats";
    }
    .team-head__crest {
        justify-self: start;
        margin-bottom: var(--space-5);
    }
    .team-head__badge {
        width: 5.5rem;
        height: 5.5rem;
    }
    .team-head__name {
        font-size: clamp(2.25rem, 1.5rem + 3.5vw, 2.75rem);
    }
    .team-head__name.is-long {
        font-size: 2rem;
    }
    .team-head__name.is-longer {
        font-size: 1.625rem;
    }
    .team-head__actions > * {
        flex: 1 1 auto;
    }
    .team-head__stats {
        gap: var(--space-2) var(--space-6);
    }

    .squad__row {
        grid-template-columns: 2.75rem 36px minmax(0, 1fr) auto;
        column-gap: var(--space-3);
    }
    .squad__avatar {
        width: 36px;
        height: 36px;
    }
    .squad__name {
        font-size: var(--text-lg);
    }
    .squad__code {
        font-size: var(--text-xl);
    }
    .squad__end .btn-sm {
        min-height: 44px;
    }
    .entry-row .rows__end {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
    }
    .team-none {
        margin-bottom: var(--space-12);
    }
}