/*
 * Third Slip - the score pages.
 *
 * Builds on theme.css and declares no colour, radius or spacing value of its
 * own. If a component here needs a colour, it needs a token; if no token fits,
 * that is a decision about the system rather than about the component.
 *
 * The match card is the unit and everything else frames it.
 */

article.wide {
    max-width: 100%;
}

.lede {
    max-width: 62ch;
    text-wrap: balance;
    margin-bottom: var(--gap-6);
    color: var(--text-dim);
    font-size: 1.02rem;
}

.lede strong {
    color: var(--text);
}

.breadcrumbs {
    margin-bottom: var(--gap-4);
    font-size: 0.8rem;
    color: var(--text-mute);
}

.breadcrumbs a {
    color: var(--text-mute);
}

/* ------------------------------------------------------------------ panels */

.panel {
    margin-bottom: var(--gap-6);
    padding: var(--gap-5);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--surface);
}

/* Content that already carries its own structure keeps the heading and loses
   the box: a run of day bands and match cards does not want a box around a box. */
.panel.is-plain {
    padding: 0;
    border: 0;
    background: none;
}

.panel-title {
    margin-bottom: var(--gap-4);
    font-size: 0.8rem;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.panel-note {
    margin-top: var(--gap-3);
    color: var(--text-mute);
    font-size: 0.82rem;
}

.empty-note {
    padding: var(--gap-5);
    border: 1px dashed var(--line-2);
    border-radius: var(--r-lg);
    color: var(--text-dim);
    text-align: center;
}

/* -------------------------------------------------------------- match card */

.match-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--gap-4);
}

.match {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3);
    padding: var(--gap-4);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--surface);
}

.match.is-live {
    border-color: var(--live-edge);
    background: var(--live-wash);
}

.match-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gap-3);
}

.match-meta {
    color: var(--text-mute);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.match-time {
    flex: none;
    color: var(--text-dim);
    font-size: 0.82rem;
    font-weight: 650;
    white-space: nowrap;
}

.match-sides {
    display: grid;
    gap: var(--gap-2);
}

.side {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gap-3);
}

.side-name {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    min-width: 0;
    color: var(--text-dim);
    font-size: 0.98rem;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.side.is-batting .side-name {
    color: var(--text);
    font-weight: 750;
}

/* The bat marks who is in, the way the app and the Live Activity do. It is a
   bat rather than a dot because a dot beside a score reads as a status light. */
.side-name .bat {
    flex: none;
    align-self: center;
    color: var(--brand);
}

.side-scores {
    flex: none;
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    color: var(--text-dim);
    white-space: nowrap;
}

.innings-score {
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.side.is-batting .innings-score {
    color: var(--text);
}

.overs {
    color: var(--text-mute);
    font-size: 0.8rem;
    font-weight: 600;
}

.yet-to-bat,
.is-tbc {
    color: var(--text-mute);
    font-size: 0.82rem;
    font-weight: 600;
    font-style: italic;
}

.match-foot {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding-top: var(--gap-3);
    border-top: 1px solid var(--line);
    font-size: 0.85rem;
}

.match-state {
    color: var(--text-dim);
    font-weight: 650;
}

.match-state.is-live {
    color: var(--live);
}

.match-chase {
    flex-basis: 100%;
    color: var(--text-mute);
    font-size: 0.82rem;
}

.match-venue {
    color: var(--text-mute);
    font-size: 0.8rem;
}

.live-mark {
    align-self: center;
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: var(--r-pill);
    background: var(--live);
    animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse {
    50% {
        opacity: 0.3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .live-mark {
        animation: none;
    }
}

/* --------------------------------------------------------------- day bands */

.day-band {
    margin-bottom: var(--gap-6);
}

.day-heading {
    margin-bottom: var(--gap-3);
    padding-bottom: var(--gap-2);
    border-bottom: 1px solid var(--line);
    font-size: 0.95rem;
    font-weight: 750;
    letter-spacing: -0.01em;
}

/* ------------------------------------------------------------------ tables */

/* A table is a wide thing and the page body must never scroll sideways, so it
   scrolls inside its own frame instead. */
.table-scroll {
    overflow-x: auto;
    margin: 0 calc(-1 * var(--gap-2));
    padding: 0 var(--gap-2);
}

table.standings {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    white-space: nowrap;
}

table.standings caption {
    margin-bottom: var(--gap-3);
    color: var(--text-dim);
    font-size: 0.85rem;
    font-weight: 650;
    text-align: left;
}

table.standings th,
table.standings td {
    padding: 0.55rem 0.5rem;
    text-align: right;
    border-bottom: 1px solid var(--line);
}

table.standings thead th {
    color: var(--text-mute);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

table.standings abbr {
    text-decoration: none;
    border: 0;
}

table.standings .pos {
    width: 2.5rem;
    text-align: left;
    color: var(--text-mute);
    font-weight: 650;
}

table.standings .team {
    width: 100%;
    text-align: left;
    color: var(--text);
    font-weight: 650;
    white-space: normal;
}

table.standings tbody tr:last-child th,
table.standings tbody tr:last-child td {
    border-bottom: 0;
}

table.standings .rating {
    color: var(--text);
    font-weight: 750;
}

table.standings .form-cell {
    text-align: right;
    white-space: nowrap;
}

.form {
    display: inline-flex;
    gap: 0.2rem;
    vertical-align: middle;
}

.form-mark {
    display: grid;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text-mute);
    font-size: 0.65rem;
    font-weight: 750;
}

.form-mark.is-w {
    background: var(--turf-wash);
    color: var(--turf);
}

.form-mark.is-l {
    background: var(--live-wash);
    color: var(--live);
}

/* --------------------------------------------------------------------- CTA */

.cta-panel {
    border-color: var(--brand-edge);
    background: var(--brand-wash);
}

.cta-panel p {
    max-width: 56ch;
    margin-bottom: var(--gap-4);
    color: var(--text-dim);
}

.cta-panel p:last-child {
    margin-bottom: 0;
}

.button {
    display: inline-block;
    padding: 0.6rem 1.1rem;
    border-radius: var(--r-pill);
    background: var(--brand);
    color: var(--on-brand);
    font-size: 0.9rem;
    font-weight: 700;
}

.button:hover {
    background: var(--brand-bright);
    color: var(--on-brand);
}

@media (max-width: 520px) {
    .match-list {
        grid-template-columns: 1fr;
    }

    .panel {
        padding: var(--gap-4);
    }
}

/* ------------------------------------------------------------ the set picker */

/* Six Again's season picker, ported: a named row of pills, the current one a
   brand wash inside a brand ring. It suits a two-option switch better than the
   underlined tab strip it replaces, because it reads as a choice rather than as
   navigation.

   Radios and labels, no script. Every panel stays in the document whichever one
   is showing, so a crawler and find-in-page still see all of it, and with no CSS
   at all the page simply shows every panel in order. Positional selectors, so
   the same rules serve any picker on the site; a third option anywhere needs a
   third line in each block. */
.set-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.set-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: var(--gap-5);
}

.set-picker-label {
    margin-right: var(--gap-1);
    color: var(--text-mute);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.set-picker label {
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    color: var(--text-dim);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

.set-picker label:hover {
    background: var(--surface-2);
    border-color: var(--line-2);
    color: var(--text);
}

/* The ring is inset rather than a border so the pill does not change size when
   it becomes the current one. */
.set-radio:nth-of-type(1):checked ~ .set-picker label:nth-of-type(1),
.set-radio:nth-of-type(2):checked ~ .set-picker label:nth-of-type(2),
.set-radio:nth-of-type(3):checked ~ .set-picker label:nth-of-type(3),
.set-radio:nth-of-type(4):checked ~ .set-picker label:nth-of-type(4),
.set-radio:nth-of-type(5):checked ~ .set-picker label:nth-of-type(5),
.set-radio:nth-of-type(6):checked ~ .set-picker label:nth-of-type(6) {
    background: var(--brand-wash);
    border-color: transparent;
    box-shadow: inset 0 0 0 1px var(--brand-edge);
    color: var(--text);
}

.set-radio:nth-of-type(1):focus-visible ~ .set-picker label:nth-of-type(1),
.set-radio:nth-of-type(2):focus-visible ~ .set-picker label:nth-of-type(2),
.set-radio:nth-of-type(3):focus-visible ~ .set-picker label:nth-of-type(3),
.set-radio:nth-of-type(4):focus-visible ~ .set-picker label:nth-of-type(4),
.set-radio:nth-of-type(5):focus-visible ~ .set-picker label:nth-of-type(5),
.set-radio:nth-of-type(6):focus-visible ~ .set-picker label:nth-of-type(6) {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.set-radio:nth-of-type(1):checked ~ .set-panels > .set-panel:not(:nth-child(1)),
.set-radio:nth-of-type(2):checked ~ .set-panels > .set-panel:not(:nth-child(2)),
.set-radio:nth-of-type(3):checked ~ .set-panels > .set-panel:not(:nth-child(3)),
.set-radio:nth-of-type(4):checked ~ .set-panels > .set-panel:not(:nth-child(4)),
.set-radio:nth-of-type(5):checked ~ .set-panels > .set-panel:not(:nth-child(5)),
.set-radio:nth-of-type(6):checked ~ .set-panels > .set-panel:not(:nth-child(6)) {
    display: none;
}

/* ------------------------------------------------------------ match detail */

.match-hero .match {
    cursor: default;
}

.match-hero .match-list {
    grid-template-columns: minmax(0, 32rem);
}

.innings-panel {
    padding-bottom: var(--gap-4);
}

.innings-title {
    margin-bottom: var(--gap-4);
    font-size: 1.05rem;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.innings-overs {
    color: var(--text-mute);
    font-size: 0.85rem;
    font-weight: 600;
}

table.scorecard {
    margin-bottom: var(--gap-4);
}

/* How a batter went out, under the name rather than beside it: a scorecard is
   read down the runs column, and a dismissal on the same line competes with it. */
.how-out {
    display: block;
    color: var(--text-mute);
    font-size: 0.78rem;
    font-weight: 500;
}

table.scorecard .figure {
    color: var(--text);
    font-weight: 750;
}

.info-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--gap-4);
    margin: 0;
}

.info-list dt {
    color: var(--text-mute);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.info-list dd {
    margin: 0.15rem 0 0;
    color: var(--text-dim);
}

/* The card is a link everywhere it is a list item. */
a.match {
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
}

a.match:hover {
    border-color: var(--line-2);
    background: var(--surface-2);
    color: inherit;
}

a.match.is-live:hover {
    border-color: var(--live);
}

/* --------------------------------------------------------- the back control */

/* A real link with a real href, so it works before any script runs and a
   crawler follows it. scores.js repoints it at the page you actually came
   from, which is the only thing script adds. */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: var(--gap-4);
    color: var(--text-mute);
    font-size: 0.85rem;
    font-weight: 650;
}

.back-link:hover {
    color: var(--text);
}

.back-link .chevron {
    font-size: 1.1em;
    line-height: 1;
}

/* The innings picker sits under the scoreboard, not over the page. */
.innings-sets .set-picker {
    margin-top: var(--gap-5);
}