/*
 * Public competition pages: competitions, seasons, divisions, ladders,
 * fixtures, teams, matches and clubs.
 *
 * Colours come from the tenant variables set in base.html (--primary,
 * --dark, --success, --danger, ...). Tenant colours are chosen for fills, so
 * wherever one is used for text it is mixed toward the ink colour to keep
 * contrast on white.
 */

body.competition {
    --ink: var(--dark, #363636);
    --paper: #fff;
    --muted: color-mix(in srgb, var(--ink) 72%, #fff); /* 5:1 on white */
    --faint: color-mix(in srgb, var(--ink) 38%, #fff); /* separators only, not text */
    --rule: color-mix(in srgb, var(--ink) 12%, #fff);
    --wash: color-mix(in srgb, var(--primary) 7%, #fff);
    --accent: var(--primary, #00d1b2);
    --accent-ink: color-mix(in srgb, var(--primary) 55%, #000);
    --won: color-mix(in srgb, var(--success) 60%, #000);
    --lost: color-mix(in srgb, var(--danger) 80%, #000);
    --drew: var(--muted);
    --display: "Bebas Neue", "Oswald", sans-serif;
    --measure: 47.5rem;
    --gutter: clamp(1rem, 4vw, 2rem);

    background: var(--paper);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.tc a,
.tc-masthead a {
    color: var(--accent-ink);
}

body.competition a:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* The site shell uppercases every heading; here only names use the display
   face, so section headings read as plain sentences. */
body.competition .tc h2,
body.competition .tc h3 {
    font-family: var(--font-body);
    letter-spacing: 0;
    text-transform: none;
}

.tc {
    padding: 0 var(--gutter) 4rem;
    max-width: 72rem;
    margin: 0 auto;
}

.tc-section {
    margin-top: 3rem;
}

.tc > :first-child {
    margin-top: 0.5rem;
}

.tc-section > h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.tc-section > h2 small {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--muted);
    margin-left: 0.5rem;
}

.tc-narrow {
    max-width: var(--measure);
}

.tc-empty {
    color: var(--muted);
    padding: 1.5rem 0;
}

/* Masthead -------------------------------------------------------------- */

.tc-masthead {
    border-top: 6px solid var(--accent);
}

.tc-masthead-inner {
    padding: 2rem var(--gutter) 1.75rem;
    max-width: 72rem;
    margin: 0 auto;
}

.tc-trail {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0;
    font-size: 0.875rem;
    color: var(--muted);
}

.tc-trail a {
    color: var(--muted);
}

.tc-trail a:hover {
    color: var(--accent-ink);
}

.tc-trail li + li::before {
    content: "/";
    padding: 0 0.5rem;
    color: var(--faint);
}

body.competition .tc-masthead h1 {
    font-family: var(--display);
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    line-height: 0.95;
    letter-spacing: 0.01em;
    font-weight: 400;
    margin: 0;
    overflow-wrap: anywhere;
}

.tc-meta {
    margin-top: 0.75rem;
    color: var(--muted);
    font-size: 1rem;
}

.tc-meta a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--rule);
    text-underline-offset: 3px;
}

.tc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 0;
    font-size: 0.9375rem;
}

/* Directory lists (competitions, seasons, divisions) --------------------- */

.tc-directory {
    border-top: 1px solid var(--rule);
}

.tc-directory > li {
    border-bottom: 1px solid var(--rule);
}

.tc-directory > li > a,
.tc-directory > li > .tc-directory-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0.25rem 1.5rem;
    padding: 1rem 0;
    color: var(--ink);
}

.tc-directory > li > a:hover .tc-directory-name {
    color: var(--accent-ink);
}

.tc-directory-name {
    font-family: var(--display);
    font-size: clamp(1.5rem, 4vw, 2rem);
    line-height: 1;
    letter-spacing: 0.01em;
}

.tc-directory-name a {
    color: inherit;
}

.tc-directory-detail {
    color: var(--muted);
    font-size: 0.9375rem;
    text-align: right;
    white-space: nowrap;
}

.tc-directory-links {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: 0.9375rem;
}

@media (max-width: 36em) {
    .tc-directory > li > a,
    .tc-directory > li > .tc-directory-row {
        grid-template-columns: 1fr;
    }

    .tc-directory-detail {
        text-align: left;
        white-space: normal;
    }
}

/* Fixtures: a day header followed by scoreboard rows --------------------- */

.tc-day {
    margin-bottom: 1.5rem;
}

.tc-day-header {
    position: sticky;
    top: var(--bulma-navbar-height, 4rem); /* below the fixed navbar */
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    background: var(--wash);
    border-left: 4px solid var(--accent);
    font-weight: 700;
}

.tc-day-header span {
    font-weight: 400;
    color: var(--muted);
    font-size: 0.9375rem;
}

.tc-day-header .tc-upcoming {
    font-style: normal;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--paper);
    background: var(--accent-ink);
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    align-self: center;
}

.tc-day-header > :last-child {
    margin-left: auto;
}

/* One match. Two team lines stacked like a broadcast scoreboard, with the
   time and place on the left. */
.tc-match {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    column-gap: 1rem;
    padding: 0.75rem 0.75rem;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
    position: relative;
}

a.tc-match {
    color: var(--ink);
}

a.tc-match:hover {
    background: var(--wash);
}

.tc-when {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 0.875rem;
    line-height: 1.3;
}

.tc-when strong {
    font-size: 1rem;
    white-space: nowrap;
}

.tc-when span {
    color: var(--muted);
    overflow-wrap: anywhere;
}

.tc-sides {
    display: grid;
    row-gap: 0.125rem;
    min-width: 0;
}

.tc-side {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 1rem;
}

.tc-team {
    font-family: var(--display);
    font-size: 1.5rem;
    line-height: 1.1;
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-score {
    font-family: var(--display);
    font-size: 1.75rem;
    line-height: 1;
    min-width: 2ch;
    text-align: right;
}

/* A decided match dims the losing side rather than colouring the winner, so
   the result reads at a glance in any tenant palette. */
.tc-match.is-decided .tc-side:not(.is-winner) {
    color: var(--muted);
}

.tc-side.is-us .tc-team {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-decoration-color: var(--accent);
    text-underline-offset: 4px;
}

.tc-note {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: var(--muted);
}

.tc-flag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    border: 1px solid currentColor;
}

.tc-flag.is-forfeit {
    color: var(--lost);
}

.tc-flag.is-video {
    color: var(--accent-ink);
}

.tc-match.is-bye {
    color: var(--muted);
}

@media (max-width: 36em) {
    .tc-match {
        grid-template-columns: 4.75rem 1fr;
        column-gap: 0.625rem;
        padding: 0.625rem 0.25rem;
    }

    .tc-team {
        font-size: 1.25rem;
    }

    .tc-score {
        font-size: 1.5rem;
    }
}

/* Ladder ---------------------------------------------------------------- */

.tc-ladder-group + .tc-ladder-group {
    margin-top: 2rem;
}

.tc-ladder-group h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.tc-ladders {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 44rem), 1fr));
    gap: 2.5rem;
}

.tc-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tc-ladder {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.tc-ladder th,
.tc-ladder td {
    padding: 0.5rem 0.5rem;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid var(--rule);
}

.tc-ladder thead th {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--muted);
    border-bottom: 2px solid var(--ink);
}

.tc-ladder abbr {
    text-decoration: none;
    cursor: help;
}

.tc-ladder .tc-pos {
    width: 2.25rem;
    text-align: right;
    color: var(--muted);
    padding-right: 0.75rem;
}

.tc-ladder .tc-name {
    text-align: left;
    position: sticky;
    left: 0;
    background: var(--paper);
}

/* On wider screens the team column takes a fixed share and the statistics
   spread evenly across the rest, in groups: results, byes and forfeits,
   scoring, points. */
@media (min-width: 48em) {
    .tc-ladder {
        table-layout: fixed;
    }

    .tc-ladder th,
    .tc-ladder td {
        text-align: center;
    }

    .tc-ladder .tc-pos {
        width: 3rem;
        text-align: right;
    }

    .tc-ladder .tc-name {
        width: 26%;
    }

    .tc-ladder .tc-group {
        padding-left: 1.5rem;
    }

    .tc-ladder td.tc-name {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.tc-ladder td.tc-name a {
    color: var(--ink);
    font-weight: 500;
}

.tc-ladder td.tc-name a:hover {
    color: var(--accent-ink);
}

.tc-ladder td.tc-pts {
    font-weight: 700;
    font-size: 1rem;
}

.tc-ladder tr.is-us td {
    background: var(--wash);
}

.tc-ladder tr.is-us td.tc-name {
    box-shadow: inset 4px 0 0 var(--accent);
}

.tc-ladder .tc-optional {
    display: none;
}

@media (min-width: 48em) {
    .tc-ladder .tc-optional {
        display: table-cell;
    }
}

/* Team ------------------------------------------------------------------ */

.tc-team-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 2rem 3rem;
    margin-top: 2rem;
}

.tc-next {
    border-top: 4px solid var(--accent);
    padding-top: 1rem;
}

.tc-next h2,
.tc-form h2 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 0.5rem;
}

.tc-next-when {
    font-family: var(--display);
    font-size: clamp(2rem, 6vw, 2.75rem);
    line-height: 1;
    letter-spacing: 0.01em;
}

.tc-next-detail {
    margin-top: 0.5rem;
    font-size: 1.0625rem;
}

.tc-next-detail a {
    font-weight: 700;
}

.tc-next-detail span {
    display: block;
    color: var(--muted);
    font-size: 0.9375rem;
}

.tc-form {
    border-top: 4px solid var(--rule);
    padding-top: 1rem;
}

.tc-pips {
    display: flex;
    gap: 0.375rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tc-pip {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 4px;
    font-weight: 700;
    color: var(--paper);
    text-decoration: none;
}

a.tc-pip {
    color: var(--paper);
}

.tc-pip.is-won { background: var(--won); }
.tc-pip.is-lost { background: var(--lost); }
.tc-pip.is-drew { background: var(--drew); }

.tc-record {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin-top: 0.75rem;
    font-size: 0.9375rem;
    color: var(--muted);
}

.tc-record b {
    color: var(--ink);
    font-weight: 700;
}

/* Match ----------------------------------------------------------------- */

.tc-board {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem 2rem;
    margin-top: 1rem;
}

.tc-board-team {
    font-family: var(--display);
    font-size: clamp(1.75rem, 5vw, 3rem);
    line-height: 1;
    letter-spacing: 0.01em;
}

.tc-board-team a {
    color: inherit;
}

.tc-board-team.is-away {
    text-align: right;
}

.tc-board-score {
    font-family: var(--display);
    font-size: clamp(3.5rem, 12vw, 6.5rem);
    line-height: 0.9;
    display: flex;
    gap: 0.25em;
    align-items: baseline;
}

.tc-board-score .is-sep {
    color: var(--faint);
    font-size: 0.5em;
}

.tc-board.is-decided .is-loser {
    color: var(--muted);
}

.tc-board-vs {
    font-size: 1rem;
    color: var(--muted);
}

@media (max-width: 36em) {
    .tc-board {
        grid-template-columns: 1fr auto;
    }

    .tc-board-team.is-home { grid-row: 1; grid-column: 1; }
    .tc-board-team.is-away { grid-row: 2; grid-column: 1; text-align: left; }
    .tc-board-score {
        grid-row: 1 / span 2;
        grid-column: 2;
        flex-direction: column;
        gap: 0.125em;
    }
    .tc-board-score .is-sep { display: none; }
}

.tc-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1.5rem;
    font-size: 1rem;
}

.tc-facts dt {
    color: var(--muted);
}

/* Player statistics ----------------------------------------------------- */

.tc-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 2rem 3rem;
}

@media (prefers-reduced-motion: reduce) {
    body.competition * {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}