/* kizon-pl — one stylesheet, mobile first, light and dark. */

:root {
    color-scheme: light dark;
    --bg: #ffffff;
    --fg: #1b1b1b;
    --muted: #6b6b6b;
    --line: #e6e6e6;
    --accent: #1b5e20;
    --live: #c62828;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #121212;
        --fg: #ececec;
        --muted: #9a9a9a;
        --line: #2a2a2a;
        --accent: #81c784;
        --live: #ef5350;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main,
footer {
    max-width: 40rem;
    margin: 0 auto;
    padding: 1rem;
}

header .competition {
    margin: 0;
    color: var(--muted);
    font-size: 0.875rem;
}

h1 {
    margin: 0.25rem 0;
    color: var(--accent);
    font-size: 1.75rem;
}

header .dates {
    margin: 0 0 1rem;
    color: var(--muted);
}

.results {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Phone: home · score · away on one line, the detail line underneath. */
.fixture {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.125rem 0.75rem;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--line);
}

.team.home {
    text-align: right;
}

.score {
    min-width: 3.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.meta {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 0.8125rem;
    text-align: center;
}

.status-in_play .meta,
.status-paused .meta {
    color: var(--live);
    font-weight: 600;
}

/* Wider screens: the detail moves to its own column on the right. */
@media (min-width: 36rem) {
    .fixture {
        grid-template-columns: 1fr auto 1fr 7rem;
    }

    .meta {
        grid-column: auto;
        text-align: right;
    }
}

footer {
    color: var(--muted);
    font-size: 0.8125rem;
}

footer a {
    color: inherit;
}