/* Public live scoreboard — no login, viewed on anything from a phone in
   the stands to a desktop browser. Three views: a lightweight landing list
   (Pages/Scores/Index), one dual match at a time (Pages/Scores/DualMatch,
   card per dual match, row per position — same visual language admin's
   all-at-once Live Scores page also uses), and one position drilled into
   (Pages/Scores/Match). */

.scores-page {
    max-width: 780px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

/* Layout only: the pills themselves are .pill-filter in site.css. */
.scores-division-filter {
    margin-bottom: 1.25rem;
}

/* ---- Landing list ---- */

.landing-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* --color-accent itself (the vivid yellow-green .match-complete-title uses
   on its dark card) isn't legible as text on this section's plain light
   background. Same reason site.css says to always pair --color-accent
   with --color-accent-ink rather than use it as a text color directly.
   --color-accent-dark is the same yellow family, just dark enough to read
   here, mirroring how wimbledon.com itself only sets this kind of eyebrow
   text in yellow over their own dark green header. */
.landing-group-heading {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--color-accent-dark);
    margin: 1.25rem 0 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.landing-group-heading:first-child { margin-top: 0; }

.landing-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Holds one .dualmatch-scoretable, which does the row's whole layout. */
.landing-row {
    display: block;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    color: var(--color-ink);
    text-decoration: none;
    transition: box-shadow 0.15s, transform 0.15s;
}

.landing-row:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* The table's type is sized for the dark card header on admin's board; in a
   list row it sits closer to the surrounding text. */
.landing-row .dualmatch-team { font-size: 1rem; }
.landing-row .dualmatch-team-score { font-size: 1.05rem; }

/* Every row is its own table, so nothing makes their columns agree on a
   width by itself: a wider pill pushes that row's columns somewhere its
   neighbours' aren't, and a list of fixtures reads as a zigzag.
   table-layout: fixed is what makes the widths below actually hold; under
   the default auto layout they're only minimums, and content wider than
   them wins. The team column takes whatever is left. No fixture-meta column
   here: the tiles carry no division/location text, just the team names,
   scores and status badge. */
.landing-row .dualmatch-scoretable {
    table-layout: fixed;
}

.landing-row .dualmatch-team { width: auto; }
.landing-row .dualmatch-team-score { width: 3rem; }
.landing-row .dualmatch-fixture-badge { width: 5.5rem; }

/* A long school name runs past the column it's given, and a fixed layout
   would otherwise just cut it mid-word. */
.landing-row .dualmatch-team {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* .score-numbers and the pills' own margin reset live in site.css, beside
   renderDualMatchScore, since the coach schedule and admin's Dual Matches
   fill the same cell from the same helper. */

/* H/V prefix on each school name (dualMatchTeamCell's sideLabel), dimmed so
   it reads as a small annotation rather than competing with the name. */
.dualmatch-side-label {
    color: var(--color-text-faint);
    font-weight: 600;
    margin-right: 0.35rem;
}

/* ---- Completed matches (collapsed) ---- */

.landing-past {
    margin-top: 0.5rem;
}

.landing-past-summary {
    cursor: pointer;
    padding: 0.5rem 0.25rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-text-muted);
    list-style-position: outside;
}

.landing-past-summary:hover {
    color: var(--color-ink);
}

/* Only once open, so the closed state stays a single quiet line. */
.landing-past[open] .landing-list {
    margin-top: 0.5rem;
}

.scores-header {
    margin-bottom: 1.5rem;
}

.scores-header h1 {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: 0.2rem;
}

.scores-subtitle {
    color: var(--color-text-muted);
    font-size: 0.92rem;
}

.scores-status-message {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-text-muted);
}

.scores-content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.dualmatch-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.dualmatch-header {
    background: var(--color-primary-darker);
    color: #fff;
    padding: 0.9rem 1.15rem;
}

/* Used on admin's Live Scores page, where the header is a link into the
   single-dual-match view — the public single-dual-match page itself has
   no reason to link to itself, so its header stays a plain div. */
.dualmatch-header-link {
    display: block;
    text-decoration: none;
}

.dualmatch-title {
    font-size: 1.1rem;
    font-weight: 700;
}

.dualmatch-subtitle {
    font-size: 0.85rem;
    color: var(--color-primary-muted-on-dark);
    margin-top: 0.1rem;
}

.dualmatch-meta {
    font-size: 0.82rem;
    color: var(--color-primary-muted-on-dark);
    margin-top: 0.1rem;
}

/* ---- Live Scores card header (admin-live-scores.js) ---- */

/* Two rows, one per school, so each score sits beside the name it belongs
   to. The fixture's own facts (division, date and location, status) span
   both rows and centre against them. */
.dualmatch-scoretable {
    width: 100%;
    border-collapse: collapse;
}

.dualmatch-scoretable td,
.dualmatch-scoretable th {
    padding: 0.1rem 0;
    vertical-align: middle;
}

.dualmatch-team {
    text-align: left;
    font-size: 1.05rem;
    font-weight: 600;
    /* The full width the fixture meta beside it doesn't need, so both
       schools' scores land in the same column however long a name is. */
    width: 100%;
}

.dualmatch-team-score {
    padding-left: 0.75rem !important;
    text-align: right;
    font-size: 1.15rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Whoever is ahead, in the heavier weight the single-line score used
   throughout. A tie leaves both at the lighter weight rather than bolding
   neither meaningfully. */
.dualmatch-team-leading {
    font-weight: 800;
}

.dualmatch-fixture-meta {
    padding-left: 1.25rem !important;
    text-align: right;
    white-space: nowrap;
}

.dualmatch-fixture-badge {
    padding-left: 0.75rem !important;
    text-align: right;
}

/* .status-tag carries a leading margin for the usual case, where it trails a
   label. Here it's alone in its own column, and has room to stay on one line
   rather than breaking "Not started" across two. */
.dualmatch-fixture-badge .status-tag {
    margin-left: 0;
    white-space: nowrap;
}

/* Both live in the dark header now rather than under a title above it, so
   they no longer need their own top margins. */
.dualmatch-scoretable .dualmatch-subtitle,
.dualmatch-scoretable .dualmatch-meta {
    margin-top: 0;
}

/* Phone: three columns of fixture facts don't fit beside a name and a score,
   so the widest of them gives way. */
@media (max-width: 34rem) {
    .dualmatch-fixture-meta,
    .dualmatch-fixture-badge {
        padding-left: 0.75rem !important;
    }

    /* Division and date still fit between the score and the pill; the court
       name doesn't, and wrapping it turned that column into a ragged
       one-word-per-line strip. */
    .dualmatch-location {
        display: none;
    }

    /* The landing list's fixed columns are what line its rows up on a wide
       screen. At this width they add up to more than the row has, which left
       the team column with nothing and clipped the school names away
       entirely. Legibility beats alignment on a phone, and a narrow row is
       barely wide enough to read as a column anyway. */
    .landing-row .dualmatch-scoretable { table-layout: auto; }
    .landing-row .dualmatch-team,
    .landing-row .dualmatch-team-score,
    .landing-row .dualmatch-fixture-badge {
        width: auto;
    }

    .landing-row .dualmatch-team { width: 100%; }
}

.dualmatch-score-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1.15rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-alt);
}

.dualmatch-score {
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--color-ink);
}

.clinched-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-accent-ink);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.position-rows {
    display: flex;
    flex-direction: column;
}

.position-row {
    display: grid;
    /* Wide enough that "started" (the longest word any status tag uses)
       fits on one line of its own, so the tag wraps as a clean 2 lines
       ("Not" / "started") rather than breaking that word again mid-word.
       The tag renders it uppercase ("STARTED") via text-transform, which is
       measurably wider than the lowercase source text — 3.5rem measured
       against the lowercase word looked like enough but was actually ~3px
       short of the uppercase rendered width, so this needs real headroom
       rather than the tightest width that happens to fit. */
    grid-template-columns: 4.25rem 1fr;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.15rem;
    border-bottom: 1px solid var(--color-surface-alt);
}

.position-row:last-child { border-bottom: none; }

.position-row-link {
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s;
}

.position-row-link:hover {
    background: var(--color-surface-alt);
}

.position-row-label {
    /* Grid items default to min-width: auto, which lets content (the tag
       below, especially) overflow past this column's track into the score
       table next to it instead of wrapping — min-width: 0 opts back into
       normal wrapping/shrinking behavior. */
    min-width: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-muted);
}

/* This element also carries .status-tag, whose own `display: inline-block`
   (defined below) wins the cascade over this rule's `display: block` at
   equal specificity — inline-block boxes size to fit their content and
   don't constrain to an ancestor's width on their own, so `max-width: 100%`
   (which nothing else here sets, so it isn't shadowed the same way) is what
   actually stops the tag text from overflowing past its narrow column and
   into the score table next to it. */
.position-row-label-tag {
    display: block;
    margin-top: 0.2rem;
    max-width: 100%;
}

.position-row-label-tag.status-tag {
    margin-left: 0;
    white-space: normal;
    line-height: 1.15;
    /* `white-space: normal` alone only allows wrapping at spaces — it
       doesn't help a single unbreakable word like "Suspended" (no space
       anywhere in it), which still overflowed the narrow column with
       nowhere to break. overflow-wrap lets the browser break *within* such
       a word, but only when there's no better option, so "Not started"
       still wraps at its natural space first. */
    overflow-wrap: break-word;
}

/* The .status-tag family moved to site.css: the coach schedule and admin's
   Dual Matches show the same pills and load neither this file nor each
   other's. Same reason the set score table styles moved there. */

/* Set score table styles (shared with the charting page) now live in
   site.css, next to .serving-dot — see that file for why. */

/* ---- Single-match (one court) detail view ---- */

.match-detail-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    text-align: center;
}

.match-detail-header {
    margin-bottom: 0.75rem;
}

.match-detail-dualmatch {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-weight: 600;
}

.match-detail-position {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--color-ink);
}

.match-detail-vs {
    color: var(--color-text-faint);
    font-weight: 500;
    margin: 0 0.3rem;
}

.match-detail-scores {
    margin: 1.25rem 0;
    text-align: left;
}

.match-detail-elapsed {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 0.5rem;
}

.match-detail-elapsed-label {
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.match-detail-elapsed-value {
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-ink);
}