/* The Saturday League page (league.php).
   Every colour is a token: a club's theme re-colours this page with the rest.
   The one bold thing on the page is the side cards — a place set large, the
   season as a row of rounds under it. Everything else stays quiet. */

/* ---- our sides ---------------------------------------------------------- */

.lg-sides {
    display: grid;
    /* Two by two: a card has to hold ten rounds on one line, and four across
       the 960 column leaves each too narrow for that. One column on a phone. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.5rem 0 2rem;
}

a.lg-side {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 1rem 1.1rem 1.1rem;
    background: var(--cream);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
}
a.lg-side:hover { border-left-color: var(--fairway); }
a.lg-side:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
/* The section shown below: the edge, not a fill, so the card stays readable. */
.lg-side--current { border-left-color: var(--primary); }

.lg-side-section {
    font-size: .85rem;
    color: var(--muted);
}
.lg-side-team {
    font-weight: 600;
    color: var(--ink);
}
.lg-side-place {
    margin-top: .5rem;
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
}
.lg-side-place--waiting { color: var(--muted); }
.lg-side-rank {
    font-family: var(--font-display);
    font-size: 2.6rem;
    line-height: 1;
    color: var(--primary);
    margin-right: .15rem;
}
.lg-side-line {
    font-size: .9rem;
    margin-top: .35rem;
}

/* The season, a cell a round. Mirrors the tournament board's strip so the two
   boards read the same way; its own classes, because either part of the site
   can be switched off without the other. */
.lg-form {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    margin-top: .6rem;
}
.lg-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 1.9rem;
    padding: .15rem .15rem .2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--field-bg);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.lg-cell-r { font-size: .6rem; color: var(--muted); }
.lg-cell-v { font-size: .78rem; font-weight: 600; color: var(--text); }
.lg-cell--won { background: var(--primary); border-color: var(--primary); }
.lg-cell--won .lg-cell-r { color: rgba(var(--cream-rgb), .75); }
.lg-cell--won .lg-cell-v { color: var(--cream); }
.lg-cell--lost { background: var(--sand); }
.lg-cell--lost .lg-cell-v { color: var(--muted); }
.lg-cell--drew { background: var(--green-pale); }
.lg-cell--bye { border-style: dashed; }
.lg-cell--bye .lg-cell-v,
.lg-cell--todo .lg-cell-v { color: var(--muted); font-weight: 400; }

/* ---- one section -------------------------------------------------------- */

.lg-section { scroll-margin-top: 5rem; }
.lg-tabs { margin-bottom: 1rem; }
.lg-section-title { margin-bottom: .2rem; }
.lg-section-meta { color: var(--muted); margin-top: 0; }
.lg-h { margin: 2rem 0 .6rem; }
.lg-empty { color: var(--muted); }

.lg-table { width: 100%; font-variant-numeric: tabular-nums; }
.lg-table caption {
    caption-side: bottom;
    text-align: left;
    font-size: .85rem;
    color: var(--muted);
    padding-top: .5rem;
}
.lg-col-pos { width: 3rem; }
.lg-col-num { text-align: right; }
.lg-col-pts { font-weight: 600; }
/* Ours: a fill AND the name in bold (the markup), never colour alone. */
.lg-row--ours { background: var(--green-pale); }
.lg-row--ours td { color: var(--ink); }

/* A round's results: side, score, side — the score centred between them. */
.lg-round-when { color: var(--muted); margin-top: 0; }
.lg-results { list-style: none; margin: 0; padding: 0; }
.lg-result {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: .75rem;
    align-items: baseline;
    padding: .55rem .25rem;
    border-bottom: 1px solid var(--border);
}
.lg-result--ours { background: var(--green-pale); }
.lg-result--bye { display: block; color: var(--muted); }
.lg-result-side--b { text-align: right; }
.lg-result-side--won { font-weight: 700; color: var(--ink); }
.lg-result-score {
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}
.lg-result-pts {
    display: block;
    font-size: .78rem;
    font-weight: 400;
    color: var(--muted);
}
.lg-result-score--none { font-weight: 400; color: var(--muted); }
.lg-round-nav { margin-top: .75rem; }

/* The schedule: a real sequence of rounds, so a real ordered list. */
.lg-rounds { list-style: none; margin: 0; padding: 0; }
.lg-round {
    padding: .7rem 0 .8rem;
    border-bottom: 1px solid var(--border);
}
.lg-round-head {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .75rem;
    align-items: baseline;
    margin: 0 0 .3rem;
}
.lg-round-no { font-weight: 600; color: var(--ink); }
.lg-round-date { font-variant-numeric: tabular-nums; }
.lg-round-venue { color: var(--muted); }
.lg-round-flag {
    padding: .05rem .5rem;
    border: 1px solid var(--primary);
    border-radius: var(--radius-pill);
    font-size: .8rem;
    color: var(--primary);
}
.lg-round--next { border-left: 3px solid var(--primary); padding-left: .75rem; }
.lg-round-games {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .92rem;
    font-variant-numeric: tabular-nums;
}
.lg-game--ours { color: var(--ink); }

/* ---- a round's team (the Team dialog, and inline without JS) ------------ */

.lg-team-btn { margin-left: .6rem; vertical-align: baseline; }
.lg-team-inline {
    margin: 1rem 0 1.5rem;
    padding: 1rem 1.1rem;
    background: var(--cream);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius);
    scroll-margin-top: 5rem;
}
.lg-team-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    margin: 0 0 .2rem;
    color: var(--ink);
}
.lg-team-when { margin: 0 0 1rem; color: var(--muted); }

/* Two rinks side by side, each read top to bottom in playing order. */
.lg-rinks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.5rem;
}
.lg-rink-name {
    font-size: 1rem;
    margin: 0 0 .4rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--border);
    color: var(--ink);
}
.lg-rink-list { list-style: none; margin: 0; padding: 0; }
.lg-rink-list li {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: .5rem;
    padding: .3rem 0;
}
.lg-rink-pos { color: var(--muted); font-size: .88rem; }
.lg-rink-skip .lg-rink-player { font-weight: 700; color: var(--ink); }
.lg-rink-open { color: var(--muted); font-style: italic; }

.lg-pin label { display: block; margin-bottom: .5rem; }
.lg-pin-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.lg-pin-row input {
    width: 8rem;
    padding: .55rem .7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--field-bg);
    color: var(--text);
    font: inherit;
    letter-spacing: .15em;
    font-variant-numeric: tabular-nums;
}
.lg-pin-row input:focus-visible { outline: 3px solid var(--primary); outline-offset: 1px; }
.lg-pin-problem { color: var(--danger); margin: .5rem 0 0; }

/* Built by js/app.js from a <template>; native <dialog>, so Esc and focus
   are the browser's. */
.lg-dialog {
    /* The site's margin reset takes away a dialog's own centring; put it back. */
    margin: auto;
    inset: 0;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    width: min(36rem, calc(100vw - 2rem));
    padding: 1.25rem 1.25rem 1.4rem;
    background: var(--cream);
    color: var(--text);
    border: 1px solid var(--border);
    border-top: 4px solid var(--primary);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.lg-dialog::backdrop { background: rgba(var(--overlay-rgb), .6); }
.lg-dialog-close {
    float: right;
    margin: -.25rem -.25rem .5rem .75rem;
    padding: .35rem .7rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}
.lg-dialog-close:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

@media (max-width: 560px) {
    .lg-rinks { grid-template-columns: minmax(0, 1fr); }
    .lg-sides { grid-template-columns: minmax(0, 1fr); }
    .lg-hide-sm { display: none; }
    .lg-side-rank { font-size: 2.2rem; }
    .lg-result { grid-template-columns: 1fr; gap: .1rem; }
    .lg-result-side--b { text-align: left; }
    .lg-result-score { text-align: left; }
    .lg-result-pts { display: inline; margin-left: .4rem; }
}