/* Live scoring — a game IN PROGRESS.
 *
 * The `.ls-*` namespace exists to keep this away from `.scorecard` in
 * styles.css, which is a FINISHED result as the club keeps it (two sides, the
 * winner marked in brass, rendered by includes/templates/result_item.php). The
 * two are different objects with different rules — a live card has no winner —
 * and giving them one class name is how they would end up fighting over it.
 *
 * Colours are var(--token) only. The chips (.chip--live, .chip-dot,
 * .chip--watching) live in styles.css instead, because the homepage strip uses
 * them and index.php does not load this file.
 */

.ls-board { margin-bottom: 2rem; }

/* --- One card ---------------------------------------------------------- */

.ls-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

/* The live edge. Brass already means "won" everywhere on this site, so a live
   card cannot borrow it — the jack is the live/now colour. */
.ls-card--live { border-left: 4px solid var(--jack); }
.ls-card--final { border-left: 4px solid var(--brass); }
.ls-card--waiting { border-left: 4px solid var(--border); opacity: .92; }

.ls-card-meta { color: var(--muted); margin: 0 0 .2rem; }
.ls-card-head { margin: 0 0 .4rem; }

/* --- The two sides ------------------------------------------------------ */

.ls-teams {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin: .25rem 0 .5rem;
}

.ls-team {
    display: grid;
    /* Name takes the slack, the start note sits with it, the total is a fixed
       column so both rows' numbers line up however long the names are. */
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0 .75rem;
    padding: .35rem .5rem;
    border-radius: var(--radius-sm);
    background: var(--cream);
}

.ls-team--won { background: var(--green-pale); }

.ls-team-name {
    font-weight: 600;
    color: var(--bottle-800);
    /* A long pairs name must wrap rather than push the total off the card. */
    overflow-wrap: anywhere;
}

.ls-start {
    grid-column: 1;
    font-size: .8rem;
    color: var(--muted);
}

.ls-total {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bottle-800);
    font-variant-numeric: tabular-nums;
    min-width: 2.2ch;
    text-align: right;
}

.ls-team--won .ls-total { color: var(--bottle-900); }

.ls-progress { margin: 0; font-size: .9rem; color: var(--text); }
.ls-scorer { margin: .1rem 0 0; font-size: .85rem; }

/* --- Status lines the script owns --------------------------------------- */

.ls-note,
.ls-stale {
    margin: .4rem 0 .8rem;
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.ls-note { color: var(--muted); }
.ls-stale { color: #856404; }

/* --- The traditional board ---------------------------------------------- */

/* Wide by nature: 21 end columns will not fit a phone, so it scrolls inside its
   own container. tabindex="0" in the markup makes that scroll reachable from
   the keyboard, which an overflow container is not by default. */
.ls-ends-wrap {
    overflow-x: auto;
    margin: .5rem 0 0;
    -webkit-overflow-scrolling: touch;
}

.ls-ends {
    border-collapse: collapse;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ls-ends th,
.ls-ends td {
    border: 1px solid var(--border);
    padding: .3rem .5rem;
    text-align: center;
    min-width: 2.2rem;
}

/* The row labels are a sticky first column: scrolling to end 18 is useless if
   you can no longer see which row is Shots and which is Total.
   `color` is set EXPLICITLY. styles.css has a global
   `th { background: var(--green-dark); color: var(--cream) }` for the site's
   tables, so overriding only the background here left cream text on a cream
   ground — the labels rendered, and were invisible. */
.ls-ends th[scope="row"] {
    position: sticky;
    left: 0;
    background: var(--cream);
    color: var(--bottle-800);
    text-align: left;
    font-weight: 600;
    min-width: 5rem;
    z-index: 1;
}

.ls-ends-axis th {
    background: var(--ink);
    color: var(--cream);
    font-weight: 700;
}

.ls-ends-axis th[scope="row"] {
    background: var(--ink);
    color: var(--cream);
}

.ls-ends-name th[scope="row"] {
    background: var(--green-pale);
    color: var(--bottle-800);
}

.ls-cell--empty { color: var(--muted); }

/* --- Homepage / narrow ---------------------------------------------------- */

@media (max-width: 700px) {
    .ls-total { font-size: 1.6rem; }
    .ls-ends th[scope="row"] { min-width: 4rem; }
}

/* --- Print ---------------------------------------------------------------- */

/* A finished card is worth pinning on the clubhouse board. The scroll container
   has to release its overflow or everything past the visible ends is lost. */
@media print {
    .ls-card { box-shadow: none; border: 1px solid #000; break-inside: avoid; }
    .ls-ends-wrap { overflow: visible; }
    .ls-ends { font-size: .75rem; }
    .ls-ends th[scope="row"] { position: static; }
}