:root {
    color-scheme: light dark;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
    background: #fff;
    color: #222;
}

* { box-sizing: border-box; }

body { margin: 0; }

a { color: #0645ad; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 3px solid #f0a000;
    outline-offset: 2px;
}

header, main, footer {
    width: min(100% - 2rem, 70rem);
    margin-inline: auto;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1rem;
    border-bottom: 1px solid #ccc;
}

header form { display: flex; gap: .5rem; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

main { padding-block: 2rem; min-height: 60vh; }

footer { padding-block: 1rem 2rem; border-top: 1px solid #ccc; }

button, input, select { font: inherit; padding: .4rem .55rem; }

table { width: 100%; border-collapse: collapse; margin-block: 1rem; }

th, td { padding: .55rem .7rem; text-align: left; border-bottom: 1px solid #ccc; }

th { font-weight: 650; }

.money { white-space: nowrap; }

.attribute-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .5rem 1rem; }

.squad-table { overflow-x: auto; }

.badge { display: inline-block; padding: .1rem .45rem; border: 1px solid #999; border-radius: .2rem; font-size: .875em; }

.pagination { display: flex; gap: 1rem; align-items: center; margin-block: 1.5rem; }

.data-table { overflow-x: auto; }
.facts { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; max-width: 42rem; }
.facts dt, .facts dd { margin: 0; padding: .4rem 0; border-bottom: 1px solid #ccc; }
.facts dt { font-weight: 650; }
.section-links { padding-left: 1.2rem; }
.version-switcher { display: flex; gap: .75rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #ccc; }
.attribute { display: grid; grid-template-columns: 1fr auto; gap: .2rem .5rem; align-items: center; }
.attribute-bar { grid-column: 1 / -1; height: .35rem; background: #ddd; }
.attribute-bar i { display: block; height: 100%; background: #3c72a8; }
.attribute-context { grid-column: 1 / -1; font-size: .8125em; color: #555; }
.attribute-context-rank { font-style: italic; }
.cohort-note { max-width: 48rem; font-size: .9375em; color: #555; }

.derby-clubs { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-block: 1rem; }
.derby-club { flex: 1 1 14rem; }
.derby-club h2 { margin-block: 0 .35rem; }
.colour-swatch { display: inline-block; width: 1rem; height: 1rem; border: 1px solid #999; vertical-align: -.15rem; }
.head-to-head { display: flex; height: .8rem; background: #ddd; margin-block: .5rem; }
.head-to-head span { display: block; min-width: 0; }
.head-to-head .wins { background: #3c72a8; }
.head-to-head .draws { background: #999; }
.head-to-head .losses { background: #a8503c; }
.head-to-head-key { font-size: .875em; color: #666; }

.no-data { color: #666; font-style: italic; }

.attribute-group { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 1rem 2rem; align-items: start; }

.radar { margin: 0; --radar-accent: #3c72a8; --radar-line: #1f4e79; --radar-grid: #ccc; }
.radar-chart { display: block; width: 100%; max-width: 22rem; height: auto; overflow: visible; }
.radar-grid polygon { fill: none; stroke: var(--radar-grid); stroke-width: 1; }
.radar-grid line { stroke: var(--radar-grid); stroke-width: 1; }
.radar-shape { fill: var(--radar-accent); fill-opacity: .3; stroke: var(--radar-line); stroke-width: 2.5; stroke-linejoin: round; }
.radar-labels text { font-size: 10px; fill: currentColor; }
.radar figcaption { display: flex; flex-direction: column; gap: .15rem; font-size: .8125rem; color: #666; max-width: 22rem; }
.radar-absent, .radar-missing, .radar-note { color: #666; }
.radar-absent { font-style: italic; margin: 0 0 .5rem; }
.radar-composition { font-size: .8125rem; color: #666; max-width: 22rem; margin-top: .5rem; }
.radar-composition dt { font-weight: 650; margin-top: .35rem; }
.radar-composition dd { margin: 0; }

.flag { font-style: italic; }

.formula { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; line-height: 1.9; padding: .8rem 1rem; border-left: 3px solid #3c72a8; background: #f2f4f7; }

@media (max-width: 48rem) {
    .attribute-group { grid-template-columns: minmax(0, 1fr); }
}

/* Pitch grid. Placement is a static map keyed by position code; the cells
   themselves are written in position display order, so no-CSS reading order and
   crawler order stay sensible. */
.pitch {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        ".   fc  ."
        "aml amc amr"
        "ml  mc  mr"
        "wbl dmc wbr"
        "dl  dc  dr"
        ".   sw  ."
        ".   gk  .";
    gap: .35rem;
    max-width: 26rem;
    margin-block: 1rem;
    padding: .6rem;
    list-style: none;
    border: 1px solid #ccc;
    border-radius: .25rem;
    background: #f6f7f8;
}

.pos-fc { grid-area: fc; }
.pos-aml { grid-area: aml; }
.pos-amc { grid-area: amc; }
.pos-amr { grid-area: amr; }
.pos-ml { grid-area: ml; }
.pos-mc { grid-area: mc; }
.pos-mr { grid-area: mr; }
.pos-wbl { grid-area: wbl; }
.pos-dmc { grid-area: dmc; }
.pos-wbr { grid-area: wbr; }
.pos-dl { grid-area: dl; }
.pos-dc { grid-area: dc; }
.pos-dr { grid-area: dr; }
.pos-sw { grid-area: sw; }
.pos-gk { grid-area: gk; }

/* A code the layout does not know about is still shown, on its own row. */
.pos-unplaced { grid-column: 1 / -1; order: 1; }

.pitch .pos {
    --competency: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: .15rem;
    min-height: 3.4rem;
    padding: .3rem .25rem .25rem;
    border: 1px solid #bbb;
    border-radius: .2rem;
    background: #fff;
    text-align: center;
}

.pitch abbr { font-size: .8125rem; font-weight: 650; text-decoration: underline dotted; text-underline-offset: .15em; }

.pitch .value { font-size: 1.05rem; font-variant-numeric: tabular-nums; line-height: 1.1; }

/* The fill. `--competency` is the only thing that drives it. */
.pitch .pos::after {
    content: "";
    justify-self: stretch;
    height: .3rem;
    background: linear-gradient(to right, #3c72a8 0 calc(var(--competency) * 5%), #ddd calc(var(--competency) * 5%) 100%);
}

.pitch .is-strong { border-color: #3c72a8; }

/* Below the floor: muted weight, muted fill, full text contrast. The number
   stays in the DOM, so nothing here is meaning carried by colour alone. */
.pitch .is-weak { border-color: #ddd; }
.pitch .is-weak abbr { font-weight: 400; }
.pitch .is-weak::after { background: linear-gradient(to right, #999 0 calc(var(--competency) * 5%), #ddd calc(var(--competency) * 5%) 100%); }

/* Not recorded — dashed and unfilled, so it cannot be read as a competency of 1. */
.pitch .is-unknown { border-style: dashed; border-color: #aaa; background: transparent; }
.pitch .is-unknown abbr { font-weight: 400; }
.pitch .is-unknown::after { content: none; }

.pitch-note { max-width: 42rem; color: #666; font-size: .9375rem; }

@media (max-width: 42rem) {
    header { align-items: flex-start; flex-direction: column; }
    header form { width: 100%; }
    header input { min-width: 0; flex: 1; }
}

@media (prefers-color-scheme: dark) {
    :root { background: #171717; color: #eee; }
    a { color: #8ab4f8; }
    th, td, header, footer { border-color: #555; }
    .no-data { color: #aaa; }
    .attribute-context, .cohort-note { color: #aaa; }
    .radar { --radar-line: #cfe3f7; --radar-grid: #555; }
    .radar figcaption, .radar-absent, .radar-missing, .radar-note, .radar-composition { color: #aaa; }
    .formula { background: #232323; }
    .pitch { border-color: #555; background: #1f1f1f; }
    .pitch .pos { border-color: #555; background: #2a2a2a; }
    .pitch .pos::after { background: linear-gradient(to right, #8ab4f8 0 calc(var(--competency) * 5%), #444 calc(var(--competency) * 5%) 100%); }
    .pitch .is-strong { border-color: #8ab4f8; }
    .pitch .is-weak { border-color: #3a3a3a; }
    .pitch .is-weak::after { background: linear-gradient(to right, #888 0 calc(var(--competency) * 5%), #444 calc(var(--competency) * 5%) 100%); }
    .pitch .is-unknown { border-color: #666; background: transparent; }
    .pitch-note { color: #aaa; }
}