/* Garberbucks — clean, data-dense. Tokens, tables and type follow
   soccerstats.us (../s2/DESIGN.md). */

/* The palette. Add nothing here without a stated reason — a new color is a
   claim that a new kind of meaning exists on the page. */
:root {
    --ink: #1a1a1a;        /* body text; page ground is plain #fff */
    --ink-soft: #55606a;   /* secondary text, must hit 4.5:1 on white */
    --accent: #0b6e4f;     /* the green */
    --accent-dark: #085239;/* accent on hover/darker contexts */
    --hairline: #e5e7e9;   /* hairlines */
    --fill: #f6f7f8;       /* subtle panel/row ground */
    --fill-hover: #eef4f1; /* row hover highlight */
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    color: var(--ink);
    background-color: #fff;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a, a:visited {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--accent-dark);
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

h1, h2 {
    line-height: 1.2;
    margin: 1.2em 0 0.5em;
}

h1 { font-size: 1.4em; }
h2 { font-size: 1.1em; color: var(--ink-soft); }

/* Serif for voice, sans for the record. Prose is capped; tables are not. */
.prose {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.6;
    max-width: 68ch;
}

.prose a { text-decoration: underline; text-underline-offset: 0.2em; }


/* ---- Header ---- */

#site-header { border-bottom: 1px solid var(--hairline); }

.header-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
}

#maintitle {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--accent);
}

#maintitle:hover { text-decoration: none; color: var(--accent-dark); }

#nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

#nav a { color: var(--ink); font-weight: 500; }
#nav a:hover { color: var(--accent); text-decoration: none; }


/* ---- Footer ---- */

#site-footer {
    background: var(--accent);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}

.footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 14px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#site-footer a { color: #fff; text-decoration: underline; }


/* ---- Layout ---- */

#content {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 8px 16px 48px;
    flex: 1;
}

/* Where a page sits: the seasons either side, or the team and league above. */
.season-nav {
    display: flex;
    gap: 20px;
    margin: 12px 0 0;
    font-size: 14px;
}


/* ---- Tables ---- */

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    text-align: left;
    margin: 8px 0 20px;
    /* Equal-width digits so columns of numbers line up. */
    font-variant-numeric: tabular-nums;
}

/* Three columns do not need the full width; at 100% the figures drift away
   from the names they belong to. */
table.narrow { max-width: 520px; }

table th {
    position: sticky;
    top: 0;
    background: #fff;
    border-bottom: 2px solid var(--ink);
    padding: 6px 7px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--ink-soft);
}

table td {
    border-bottom: 1px solid var(--hairline);
    padding: 4px 7px;
}

table tbody tr:nth-child(even) td { background-color: var(--fill); }
table tbody tr:hover td { background-color: var(--fill-hover); }

/* Cells read as ink; the accent appears on hover and keyboard focus only. */
table td a, table td a:visited { color: var(--ink); }
table td a:hover { color: var(--accent); }
table td a:focus-visible {
    color: var(--accent);
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* Money and counts sit right so the digits line up by place. */
.num { text-align: right; white-space: nowrap; }

/* A name that follows a figure needs clear water between them. */
.num + :not(.num) { padding-left: 28px; }

/* A marked gap: the figure is missing from the record, not zero. */
td.gap { color: #9aa3ab; }

.table-legend {
    font-size: .9em;
    color: var(--ink-soft);
    max-width: 72ch;
}


/* ---- Charts: inline SVG ---- */

/* Like wide tables, a chart scrolls inside itself on a phone rather than shrinking its text. */
figure.chart { margin: 8px 0 20px; overflow-x: auto; }
figure.chart svg { display: block; width: 100%; min-width: 640px; height: auto; font-family: inherit; overflow: visible; }
figure.chart figcaption { font-size: .9em; color: var(--ink-soft); margin-top: 6px; max-width: 72ch; }
.chart text { fill: var(--ink-soft); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart text.label { fill: var(--ink); font-size: 12px; }
.chart .grid { stroke: var(--hairline); stroke-width: 1; }
.chart .axis { stroke: var(--ink-soft); stroke-width: 1; }
/* One hue throughout. Where two lines share a panel the second is dashed and
   hollow, so they are never told apart by color alone. */
.chart text.name { font-weight: 600; }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .line.median { stroke-dasharray: 5 4; stroke-linecap: butt; }
/* A surface ring lifts each point off the line it sits on. */
.chart .dot { fill: var(--accent); stroke: #fff; stroke-width: 2; }
.chart .dot.median { fill: #fff; stroke: var(--accent); stroke-width: 1.5; }
/* The point is small; what the pointer has to find is not. */
.chart .hit { fill: transparent; }
.chart a:hover .dot, .chart a:focus-visible .dot { r: 6px; }
.chart a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* A surface halo keeps a value legible where a gridline crosses it. */
.chart text.value { paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }


/* ---- Responsive ---- */

@media (max-width: 760px) {
    table {
        display: block;
        overflow-x: auto;
    }
}