/* Kwallo: deep green-black and mint (the brand), one type family (Archivo, narrow for numbers and names),
   and one signature element, the chance bar. Everything else stays quiet. */
:root {
  --bg: #F3F8F6; --surface: #FFFFFF; --ink: #0B201B; --muted: #4A6B60; --line: #D3E2DB;
  --home: #2E8F6A; --draw: #9DB3A8; --away: #0B201B; --brand: #2E8F6A; --warn: #9A6212; --good: #2E8F6A; --bad: #A4433A;
  --font: "Archivo", "Arial Narrow", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --bg: #0B201B; --surface: #10302A; --ink: #F2FAF6; --muted: #A9C9BB; --line: #1E3D35;
          --home: #94E0C2; --draw: #6F8F84; --away: #E9F2EE; --brand: #94E0C2; --warn: #E3AE55; --good: #94E0C2; --bad: #E58C80; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--font); font-stretch: 100%; padding-bottom: 72px; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-stretch: 75%; font-weight: 700; line-height: 1.1; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); }
h2 { font-size: 1.35rem; margin-top: 1.6em; }
h3 { font-size: 1.05rem; }
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 1.5rem; padding: .6rem 1rem; background: var(--bg); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; font-weight: 800; font-stretch: 85%; font-size: 1.45rem; letter-spacing: -.02em; }
.rail { display: none; gap: 1.1rem; }
.rail a, .bottom a { text-decoration: none; color: var(--muted); font-weight: 600; font-stretch: 85%; }
.rail a.on, .bottom a.on { color: var(--ink); }
.rail a.on { box-shadow: inset 0 -2px var(--brand); }
.acca-count { font-stretch: 75%; color: var(--brand); }
main { max-width: 860px; margin: 0 auto; padding: 1rem 1rem 2rem; outline: none; }
.foot { max-width: 860px; margin: 0 auto; padding: 1rem; color: var(--muted); font-size: .85rem; border-top: 1px solid var(--line); }
.foot a { margin-right: 1rem; }
.bottom { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; padding: .55rem 0 calc(.55rem + env(safe-area-inset-bottom));
          background: var(--surface); border-top: 1px solid var(--line); z-index: 5; }
@media (min-width: 900px) { .rail { display: flex; } .bottom { display: none; } body { padding-bottom: 0; } }
.muted { color: var(--muted); } .small { font-size: .85rem; } .num { font-stretch: 75%; font-variant-numeric: tabular-nums; }
.tabs { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .3rem; margin: .4rem 0 1rem; scrollbar-width: none; }
.tabs button, .chip { flex: none; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 600 .9rem var(--font); font-stretch: 85%;
                      padding: .4rem .8rem; border-radius: 999px; cursor: pointer; }
.tabs button.on, .chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.group { margin-bottom: 1.6rem; }
.group > h3 { display: flex; justify-content: space-between; color: var(--muted); font-size: .95rem; border-bottom: 1px solid var(--line); padding-bottom: .3rem; }
.match { display: block; text-decoration: none; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.match .row { display: grid; grid-template-columns: 3.2rem 1fr auto; gap: .6rem; align-items: baseline; }
.match .teams { font-weight: 650; font-stretch: 85%; }
.match .pick { margin: .35rem 0 0 3.8rem; font-size: .9rem; color: var(--muted); }
.match .pick b { color: var(--ink); font-weight: 600; }
.star { border: 0; background: none; color: var(--muted); font-size: 1.15rem; cursor: pointer; padding: 0 .2rem; line-height: 1; }
.star.on { color: var(--warn); }
/* the chance bar: Kwallo's one bold element */
.bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin: .45rem 0 .2rem 3.8rem; background: var(--line); }
.bar i { display: block; height: 100%; }
.bar .h { background: var(--home); } .bar .d { background: var(--draw); } .bar .a { background: var(--away); }
.bar-legend { display: flex; justify-content: space-between; margin-left: 3.8rem; font-size: .8rem; color: var(--muted); font-stretch: 80%; }
.big .bar { height: 26px; border-radius: 6px; margin: .6rem 0 .3rem; }
.big .bar-legend { margin-left: 0; font-size: 1rem; color: var(--ink); }
.big .bar-legend span b { display: block; font-size: 1.6rem; font-weight: 750; }
.hero { padding: 1rem 0 .5rem; }
.hero .meta { color: var(--muted); }
.section { margin-top: 1.4rem; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .45rem .4rem; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; font-stretch: 85%; cursor: default; white-space: nowrap; }
th.sort { cursor: pointer; } th.sorted { color: var(--ink); }
td.r, th.r { text-align: right; } .wrap { overflow-x: auto; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: .6rem 0; border-bottom: 1px solid var(--line); }
.angle { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; }
.angle .p { font-stretch: 75%; font-weight: 750; font-size: 1.3rem; text-align: right; }
.angle .why { grid-column: 1 / -1; color: var(--muted); font-size: .88rem; }
.btn { border: 1px solid var(--ink); background: transparent; color: var(--ink); font: 600 .85rem var(--font); padding: .35rem .7rem; border-radius: 6px; cursor: pointer; }
.btn.solid { background: var(--brand); border-color: var(--brand); color: var(--bg); }
.btn.added { border-color: var(--brand); color: var(--brand); }
.tag { font-size: .75rem; padding: .05rem .4rem; border-radius: 4px; border: 1px solid var(--line); color: var(--muted); }
.tag.trusted { border-color: var(--brand); color: var(--brand); }
.won { color: var(--good); font-weight: 700; } .lost { color: var(--bad); font-weight: 700; }
.warn { color: var(--warn); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .2rem 1rem; }
.stat-grid div { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding: .3rem 0; }
.cal { display: grid; grid-template-columns: 5.5rem 1fr 3.5rem; gap: .4rem; align-items: center; margin: .25rem 0; font-size: .9rem; }
.cal .track { position: relative; height: 12px; background: var(--line); border-radius: 6px; }
.cal .track i { position: absolute; top: 0; bottom: 0; left: 0; background: var(--home); border-radius: 6px; }
.cal .track s { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); }
.form b { display: inline-block; width: 1.4rem; text-align: center; font-stretch: 75%; border-radius: 3px; margin-right: 2px; color: var(--bg); }
.form .W { background: var(--home); } .form .D { background: var(--draw); } .form .L { background: var(--bad); }
.empty { padding: 2rem 0; color: var(--muted); }
.loading { color: var(--muted); }
.cta-tg { display: inline-block; margin-top: .5rem; text-decoration: none; }
.prose { max-width: 65ch; } .prose p, .prose li { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) { .big .bar i { transition: flex-basis .5s ease-out; } }