/* Self-hosted so that no visitor's browser has to talk to a third party to
   render this page. Archivo and IBM Plex Mono are both SIL OFL 1.1; the licence
   texts ship next to the files in static_src/fonts/ and are copied into
   /assets/fonts/ with them. Only the latin and latin-ext subsets are bundled —
   the site has no other alphabet — and unicode-range means a page that stays
   inside ASCII never downloads the extended file at all. */

/* Archivo 400 800 — latin */
@font-face{
font-family: 'Archivo';
font-style: normal;
font-weight: 400 800;
font-stretch: 62% 125%;
font-display: swap;
src: url(/assets/fonts/archivo-400-800-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* Archivo 400 800 — latin-ext */
@font-face{
font-family: 'Archivo';
font-style: normal;
font-weight: 400 800;
font-stretch: 62% 125%;
font-display: swap;
src: url(/assets/fonts/archivo-400-800-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}

/* IBM Plex Mono 400 — latin */
@font-face{
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* IBM Plex Mono 400 — latin-ext */
@font-face{
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}

/* IBM Plex Mono 500 — latin */
@font-face{
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* IBM Plex Mono 500 — latin-ext */
@font-face{
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}

/* IBM Plex Mono 600 — latin */
@font-face{
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/ibm-plex-mono-600-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* IBM Plex Mono 600 — latin-ext */
@font-face{
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/ibm-plex-mono-600-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
:root{
  color-scheme: light;
  --plane:#eceff4; --surface:#ffffff; --surface-2:#f5f7fa; --sunken:#e4e8ef;
  --ink:#0f131b; --ink-2:#4d5665; --muted:#7b8593;
  --line:#dde2ea; --line-soft:#e9edf3;
  --accent:#8a6410; --accent-bright:#b8860f; --accent-wash:rgba(184,134,15,.10);
  --focus:#1e4fd8;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4; --s6:#008300;
  --w1:#86b6ef; --w2:#5598e7; --w3:#2a78d6; --w4:#1c5cab; --w5:#104281;
  --up:#006300; --down:#c0392b;
  --c-ucl:#1b5fbe; --c-uel:#b0530c; --c-uecl:#0e7a58; --c-cwc:#9333a8; --c-icfc:#0f6f7e;
  --shadow:0 1px 2px rgba(15,19,27,.05), 0 8px 24px -12px rgba(15,19,27,.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --plane:#0a0c11; --surface:#14171d; --surface-2:#1a1e26; --sunken:#0f1218;
    --ink:#eef1f6; --ink-2:#a6afbd; --muted:#78828f;
    --line:#242933; --line-soft:#1e2229;
    --accent:#e2ab45; --accent-bright:#f0bd5e; --accent-wash:rgba(226,171,69,.12);
    --focus:#7ba2ff;
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#008300;
    --w1:#184f95; --w2:#256abf; --w3:#3987e5; --w4:#6da7ec; --w5:#9ec5f4;
    --up:#0ca30c; --down:#e66767;
    --c-ucl:#6ea6f2; --c-uel:#ec8747; --c-uecl:#3bbd90; --c-cwc:#cd88e5; --c-icfc:#4bbccd;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 28px -14px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --plane:#0a0c11; --surface:#14171d; --surface-2:#1a1e26; --sunken:#0f1218;
  --ink:#eef1f6; --ink-2:#a6afbd; --muted:#78828f;
  --line:#242933; --line-soft:#1e2229;
  --accent:#e2ab45; --accent-bright:#f0bd5e; --accent-wash:rgba(226,171,69,.12);
  --focus:#7ba2ff;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#008300;
  --w1:#184f95; --w2:#256abf; --w3:#3987e5; --w4:#6da7ec; --w5:#9ec5f4;
  --up:#0ca30c; --down:#e66767;
  --c-ucl:#6ea6f2; --c-uel:#ec8747; --c-uecl:#3bbd90; --c-cwc:#cd88e5; --c-icfc:#4bbccd;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 28px -14px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--plane); color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; text-wrap:balance; font-weight:700; letter-spacing:-.01em}
p{margin:0 0 12px}
a{color:var(--ink); text-decoration-color:var(--line); text-underline-offset:2px}
a:hover{color:var(--accent); text-decoration-color:var(--accent)}
.num{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:3px}
.wrap{max-width:1180px; margin:0 auto; padding:0 20px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:99; background:var(--surface); padding:9px 14px; border-radius:8px}

/* ---------- masthead ---------- */
.masthead{background:var(--surface); border-bottom:1px solid var(--line)}
.mast-in{display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding:14px 20px; max-width:1180px; margin:0 auto}
.brand{display:flex; align-items:baseline; gap:12px; margin-right:auto; text-decoration:none}
.brand strong{font-stretch:70%; font-weight:800; font-size:23px; text-transform:uppercase; letter-spacing:.015em; line-height:1}
.brand .sub{color:var(--muted); font-size:12.5px; font-stretch:88%}
.mainnav{display:flex; gap:2px; background:var(--sunken); padding:3px; border-radius:8px; flex-wrap:wrap}
.mainnav a{
  padding:7px 15px; border-radius:6px; font-size:13.5px; font-weight:600;
  font-stretch:88%; color:var(--ink-2); text-decoration:none;
}
.mainnav a[aria-current="page"]{background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.14)}
.mainnav a:hover:not([aria-current]){color:var(--ink)}

/* ---------- breadcrumbs + page head ---------- */
.crumbs{padding:14px 0 0; font-size:12.5px; color:var(--muted)}
.crumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:7px}
.crumbs li+li::before{content:'/'; margin-right:7px; color:var(--line)}
.crumbs a{color:var(--ink-2); text-decoration:none}
.crumbs a:hover{color:var(--accent)}
main{padding:18px 0 40px}
.phead{display:flex; align-items:center; gap:13px; flex-wrap:wrap; margin-bottom:8px}
/* a flag is a file now, not a glyph: the box sets the width, the image fills it, and
   the hairline ring keeps a white or near-white flag off a white ground */
.flag .fl{display:block; width:100%; height:auto; border-radius:2px;
  box-shadow:0 0 0 1px rgba(128,128,128,.4)}
.phead .flag{font-size:30px; line-height:1; width:38px}
.phead h1{font-size:30px; font-stretch:74%; font-weight:800; text-transform:uppercase; letter-spacing:.01em}
.phead .season{font-size:15px; color:var(--muted); font-family:"IBM Plex Mono",monospace}
.lede{font-size:15.5px; color:var(--ink-2); max-width:74ch; margin-bottom:20px}
.runline{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; font-size:14px; color:var(--ink-2); margin:-8px 0 18px}
.runline .arrow{color:var(--muted)}
.runline .won{color:var(--accent); font-weight:700}

/* ---------- tiles ---------- */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:12px; margin-bottom:22px}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:13px 15px; display:flex; flex-direction:column; gap:3px}
.tile .k{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700}
.tile .v{font-size:25px; font-weight:700; font-stretch:80%; line-height:1.1; font-variant-numeric:tabular-nums}
.tile .m{font-size:12px; color:var(--muted)}

/* ---------- cards & tables ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); margin-bottom:22px; overflow:hidden}
.card-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding:15px 18px 12px}
.card-head h2{font-size:15px; font-stretch:85%}
.card-head .note{font-size:12.5px; color:var(--muted); margin-left:auto}
.tbl-scroll{overflow-x:auto}
table.grid{width:100%; border-collapse:collapse; font-size:13.5px}
table.grid th{
  text-align:left; font-size:9.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); font-weight:700; padding:9px 12px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); white-space:nowrap;
}
table.grid th.r, table.grid td.r{text-align:right}
table.grid td{padding:8px 12px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
table.grid tbody tr:last-child td{border-bottom:0}
table.grid tbody tr:hover{background:var(--accent-wash)}
table.grid a{text-decoration:none; font-weight:600}
td.rk{font-family:"IBM Plex Mono",monospace; font-weight:700; width:1%; white-space:nowrap}
td.rk.gold{color:var(--accent)}
td.tot{font-family:"IBM Plex Mono",monospace; font-weight:700}
.cty{display:flex; align-items:center; gap:9px}
.cty .flag{font-size:17px; width:22px; text-align:center}
.trophy{color:var(--accent)}
.gapmark{color:var(--down); cursor:help}
.subtle{color:var(--ink-2)}
.mut{color:var(--muted)}
.up{color:var(--up)} .down{color:var(--down)}

/* ---------- club monograms ---------- */
/* Drawn from the club's own name, not an emblem: --c is the tile, --ct the letters,
   both computed at build time so the pair always clears WCAG AA. */
.crest{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:26px; height:26px; border-radius:7px; background:var(--c); color:var(--ct);
  font-size:10.5px; font-weight:800; font-stretch:82%; line-height:1;
  letter-spacing:.02em; user-select:none;
}
.crest-lg{width:46px; height:46px; border-radius:12px; font-size:17px; letter-spacing:.01em}
/* white and black clubs, which would otherwise melt into one of the two page
   backgrounds: the ring is drawn in the letter colour, so it lands on either */
.crest-edge{box-shadow:inset 0 0 0 1.5px var(--ce)}
.clubcell{display:flex; align-items:center; gap:10px}
.clubblock > header .crest{margin-right:-2px}

/* ---------- match log ---------- */
.clubblock{border-top:1px solid var(--line)}
.clubblock > header{display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; padding:13px 18px; background:var(--surface-2)}
.clubblock h3{font-size:16px; font-stretch:80%}
.clubblock h3 a{text-decoration:none}
.clubblock .qual{font-size:12.5px; color:var(--ink-2)}
.clubblock .meta{margin-left:auto; font-size:12px; color:var(--muted); font-family:"IBM Plex Mono",monospace}
table.log{width:100%; border-collapse:collapse; font-size:13px}
table.log th{
  text-align:left; font-size:9.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted);
  font-weight:700; padding:8px 12px; border-bottom:1px solid var(--line); white-space:nowrap;
}
table.log th.r, table.log td.r{text-align:right}
table.log td{padding:7px 12px; border-bottom:1px solid var(--line-soft)}
table.log tr:last-child td{border-bottom:0}
table.log td.stage{
  font-size:11.5px; color:var(--ink-2); white-space:nowrap; font-weight:600;
  border-left:3px solid var(--cmp,transparent); padding-left:9px;
}
table.log td.stage .cmp{color:var(--cmp,inherit); font-weight:800}
table.log td.date{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--muted); white-space:nowrap}
table.log td.score{font-family:"IBM Plex Mono",monospace; font-weight:700; white-space:nowrap}
table.log td.note{font-size:11.5px; color:var(--ink-2)}
table.log tr.bonus td{background:var(--surface-2); font-style:italic; color:var(--ink-2); font-size:12px}
.tie{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.tie .ours{font-weight:700}
.tie .dash{color:var(--muted)}
.tie .oppmeta{font-size:11px; color:var(--muted); font-family:"IBM Plex Mono",monospace}
.res-w{color:var(--up)} .res-l{color:var(--down)}

/* ---------- competition colours ---------- */
/* A club can change competition mid-season, so the colour is per tie, not per club.
   It only ever repeats what the stage cell already says in words. Renamings share a
   colour: the European Cup is the Champions League, the UEFA Cup is the Europa League. */
.cmp-ucl{--cmp:var(--c-ucl)} .cmp-uel{--cmp:var(--c-uel)} .cmp-uecl{--cmp:var(--c-uecl)}
.cmp-cwc{--cmp:var(--c-cwc)} .cmp-icfc{--cmp:var(--c-icfc)}
.complegend{display:flex; flex-wrap:wrap; gap:7px 16px; margin:-6px 0 14px; font-size:11.5px}
.complegend .lg{display:inline-flex; align-items:center; gap:6px; color:var(--ink-2)}
.complegend .lg b{color:var(--cmp); font-weight:800}
.complegend .lg i{width:11px; height:11px; border-radius:3px; background:var(--cmp)}


/* ---------- season chips ---------- */
.chips{display:flex; flex-wrap:wrap; gap:6px; padding:13px 18px 17px}
.chip{
  border:1px solid var(--line); background:var(--surface-2); border-radius:7px; padding:5px 8px;
  font-size:11.5px; line-height:1.15; color:var(--ink-2); font-family:"IBM Plex Mono",monospace;
  text-decoration:none; white-space:nowrap;
}
.chip:hover{border-color:var(--accent); color:var(--accent)}
.chip[aria-current="page"]{background:var(--accent); border-color:var(--accent); color:var(--surface); font-weight:700}
.chip .won{margin-left:3px; color:var(--accent)}
.chip[aria-current="page"] .won{color:var(--surface)}

/* ---------- prev / next ---------- */
.pager{display:flex; gap:10px; flex-wrap:wrap; margin:4px 0 26px}
.pager a{
  border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:8px 14px;
  font-size:13px; font-weight:600; font-stretch:88%; color:var(--ink-2); text-decoration:none;
}
.pager a:hover{border-color:var(--accent); color:var(--accent)}
.pager .spacer{margin-left:auto}

/* ---------- indexes ---------- */
.cols{columns:250px 4; column-gap:22px}
.cols ul{list-style:none; margin:0; padding:0}
.cols li{break-inside:avoid; padding:4px 0; font-size:14px}
.cols a{text-decoration:none}
/* a fixed box, not a space: Kosovo has no flag emoji to show and its name would
   otherwise start a few pixels left of every other one */
.cols .flag{display:inline-block; width:22px; margin-right:8px}
.note-box{background:var(--surface); border:1px dashed var(--line); border-radius:12px; padding:22px; color:var(--ink-2); font-size:14px; max-width:74ch; margin-bottom:22px}
.note-box strong{color:var(--ink)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); background:var(--surface); margin-top:20px}
footer .wrap{padding-top:24px; padding-bottom:40px; color:var(--muted); font-size:12.5px}
footer a{color:var(--ink-2)}

@media (max-width:720px){
  .phead h1{font-size:23px}
  .cols{columns:1}
  table.grid td.hide-s, table.grid th.hide-s{display:none}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important} }
/* ---------- language switch ----------
   The <details> in the masthead, on content pages and in the explorer alike: build_static.py
   appends this to site.css and drops it into the explorer's own <style>. */
.lang{position:relative}
.lang summary{
  display:flex; align-items:center; gap:7px; padding:7px 11px 7px 10px; border:1px solid var(--line);
  border-radius:8px; background:var(--surface); color:var(--ink-2); font-size:13.5px; font-weight:600;
  font-stretch:88%; letter-spacing:.02em; cursor:pointer; list-style:none; user-select:none; white-space:nowrap;
}
.lang summary::-webkit-details-marker{display:none}
.lang summary:hover, .lang[open] summary{color:var(--ink); border-color:var(--ink-2)}
.lang .globe{flex:none}
.lang .caret{font-size:10px; opacity:.7; transition:transform .15s}
.lang[open] .caret{transform:rotate(180deg)}
.lang ul{
  position:absolute; right:0; top:calc(100% + 6px); min-width:170px; margin:0; padding:6px; list-style:none;
  background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); z-index:20;
}
.lang li a, .lang li span{display:block; padding:8px 12px; border-radius:6px; font-size:13.5px; text-decoration:none; color:var(--ink-2)}
.lang li a:hover{background:var(--sunken); color:var(--ink)}
.lang li span{color:var(--ink); font-weight:600; background:var(--accent-wash)}

@media (max-width:720px){
  /* brand and switch share the first row; the section nav (content pages) or the view
     tabs (explorer) take the whole second, so the switch stays at the right edge, where
     its panel is anchored and stays on screen */
  .mainnav, .tabs{order:3; flex:1 0 100%}
}
@media (max-width:480px){
  .brand .sub{display:none}       /* the range is decoration; the switch must fit beside the brand */
}