/* 11footy, direction A, second cut ("ordine e semplicità"): one spacing scale (4 8 12 16 24 32 48), one card,
   one type scale, flat surfaces with a hairline border, cobalt only where Vesta speaks, the Lab as the one
   object with depth. Dark by default, light when the visitor asks. Every number is tabular; big numbers are
   the display face. Spacing between blocks comes from containers (gap) or siblings, never from a block itself. */

@font-face { font-family: "Schibsted Grotesk"; src: url("/static/fonts/schibsted-grotesk-latin.woff2") format("woff2"); font-weight: 400 900; font-display: swap; 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; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/static/fonts/schibsted-grotesk-latin-ext.woff2") format("woff2"); font-weight: 400 900; font-display: swap; 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; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/static/fonts/bricolage-grotesque-latin.woff2") format("woff2"); font-weight: 600 800; font-display: swap; 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; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/static/fonts/bricolage-grotesque-latin-ext.woff2") format("woff2"); font-weight: 600 800; font-display: swap; 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; }

/* ============================== tokens ============================================================== */
:root {
  --bg: #F4F4F1; --s1: #FFFFFF; --s2: #EFEFEB; --s3: #E9E9E5; --s4: #DADAD5;
  --line: #E2E2DD; --line-2: #D0D0CA;
  --text: #0B0B0C; --mut: #5C5E65; --faint: #6B6D74;  /* 4.7:1 on --bg, 5.2:1 on --s1 (WCAG AA) */
  --cob: #2A50FF; --cob-2: #2442D9; --cob-soft: #E8EDFF; --cob-soft-2: #D6DEFF; --on-cob: #FFFFFF;
  --win: #0F6B3A; --loss: #A1261B; --level: #8A8C93; --live: #E0353C; --yellow: #E6B800;
  --win-soft: #E3F3EA; --loss-soft: #FBE6E3;
  --draw: #C9CBD1; --home: #0B0B0C; --away: #2A50FF;
  --glass: rgba(244, 244, 241, .8); --card: rgba(255, 255, 255, .84); --glow: .3; --glow-2: .4; --band: rgba(11, 11, 12, .12);
  --pitch-a: #5FB37E; --pitch-b: #4E9E6B; --pitch-c: #46905F; --pitch-line: rgba(255, 255, 255, .55); --chip-name: #0B0B0C; --chip-shadow: none;
  --shadow: 0 1px 2px rgba(11, 11, 12, .04), 0 12px 32px rgba(11, 11, 12, .06); --lab-shadow: 0 16px 40px rgba(42, 80, 255, .22);
  --font: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --disp: "Bricolage Grotesque", "Schibsted Grotesk", sans-serif;
  --r: 22px; --r-sm: 14px; --r-xs: 10px; --pill: 999px; --top: 68px; --page: 1280px; --gut: 40px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
  --pad: 22px; --gap: 20px;
  color-scheme: light;
}
@media (max-width: 760px) { :root { --gut: 16px; --top: 56px; --pad: 16px; --gap: 16px; } }
@media (max-width: 1100px) { :root { --gut: 24px; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0B0B0C; --s1: #151619; --s2: #1C1D21; --s3: #25262B; --s4: #2E3036;
  --line: #24252A; --line-2: #2E3036;
  --text: #F2F2F0; --mut: #A0A2A9; --faint: #8E9099;
  --cob: #3D63FF; --cob-2: #8FA6FF; --cob-soft: rgba(61, 99, 255, .14); --cob-soft-2: rgba(61, 99, 255, .3);
  --win: #3DD68C; --loss: #FF6B6B; --level: #7C8599; --live: #FF5C5C; --yellow: #F2C94C;
  --win-soft: rgba(61, 214, 140, .14); --loss-soft: rgba(255, 107, 107, .14);
  --draw: #4A4C53; --home: #F2F2F0; --away: #3D63FF;
  --glass: rgba(11, 11, 12, .8); --card: rgba(21, 22, 25, .86); --glow: .5; --glow-2: .36; --band: rgba(255, 255, 255, .12);
  --pitch-a: #1E4D3A; --pitch-b: #12382A; --pitch-c: #0F2F24; --pitch-line: rgba(255, 255, 255, .22); --chip-name: #fff; --chip-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .35);
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --bg: #0B0B0C; --s1: #151619; --s2: #1C1D21; --s3: #25262B; --s4: #2E3036;
  --line: #24252A; --line-2: #2E3036;
  --text: #F2F2F0; --mut: #A0A2A9; --faint: #8E9099;
  --cob: #3D63FF; --cob-2: #8FA6FF; --cob-soft: rgba(61, 99, 255, .14); --cob-soft-2: rgba(61, 99, 255, .3);
  --win: #3DD68C; --loss: #FF6B6B; --level: #7C8599; --live: #FF5C5C; --yellow: #F2C94C;
  --win-soft: rgba(61, 214, 140, .14); --loss-soft: rgba(255, 107, 107, .14);
  --draw: #4A4C53; --home: #F2F2F0; --away: #3D63FF;
  --glass: rgba(11, 11, 12, .8); --card: rgba(21, 22, 25, .86); --glow: .5; --glow-2: .36; --band: rgba(255, 255, 255, .12);
  --pitch-a: #1E4D3A; --pitch-b: #12382A; --pitch-c: #0F2F24; --pitch-line: rgba(255, 255, 255, .22); --chip-name: #fff; --chip-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

/* ============================== base ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top) + 64px); }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--disp); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
h1 { font-size: 30px; } h2 { font-size: 17px; } h3 { font-size: 15px; } h4 { font-size: 13px; }
p { margin: 0; }
.n { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.n .u, .pct .u, .u { font-size: .68em; color: var(--mut); margin-left: 1px; font-weight: 600; }
.v { color: var(--cob-2); }
.g2 { color: var(--mut); } .g3 { color: var(--faint); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 2px solid var(--cob); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 12px; background: var(--cob); color: #fff; border-radius: 8px; font-weight: 700; }
.skip:focus { left: 8px; }
.note { font-size: 13px; color: var(--faint); line-height: 1.5; }
.note a, .foot a { color: var(--cob-2); font-weight: 600; }
.empty { padding: 32px 20px; text-align: center; color: var(--mut); }
.empty b { display: block; font: 800 17px var(--disp); color: var(--text); margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
/* spacing utilities: the only inline spacing a template may ask for */
.mt0 { margin-top: 0 !important; } .mt1 { margin-top: var(--s-2) !important; } .mt2 { margin-top: var(--s-4) !important; } .mt3 { margin-top: var(--s-5) !important; } .mt4 { margin-top: var(--s-6) !important; }
.pt0 { padding-top: 0 !important; } .pb0 { padding-bottom: 0 !important; } .bt0 { border-top: 0 !important; } .bb0 { border-bottom: 0 !important; }
.right { text-align: right; } .center { text-align: center; } .nowrap { white-space: nowrap; }
.row-c { display: flex; align-items: center; gap: 8px; }
.narrow { max-width: 900px; } .reading-w { max-width: 860px; }

/* -- marks: <span class="mark logomark|flagmark|plainmark|cupmark" style="--s:24px"> ----------------------- */
.mark { display: inline-flex; width: var(--s, 24px); height: var(--s, 24px); flex: none; align-items: center; justify-content: center; vertical-align: middle; }
.mark img, .mark svg { width: 100%; height: 100%; object-fit: contain; }
.mark .logo.dk { display: none; } .mark .logo.lt { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mark .logo.lt { display: none; } :root:not([data-theme="light"]) .mark .logo.dk { display: block; } }
:root[data-theme="dark"] .mark .logo.lt { display: none !important; } :root[data-theme="dark"] .mark .logo.dk { display: block !important; }
.mark:not(:has(.dk)) .logo.lt { display: block !important; }
.flagmark img { border-radius: 50%; }
.plainmark { border-radius: 50%; background: var(--s3); font: 800 calc(var(--s) * .32) var(--disp); color: var(--mut); }
.team { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; min-width: 0; }
.team > span:last-child, .team > a:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wordmark { font: 800 24px/1 var(--disp); letter-spacing: -.05em; color: var(--text); } .wordmark .wm-num { color: var(--cob-2); }
.vm { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--cob-2); }
.vm:empty { display: none; }

/* ============================== top bar ============================================================= */
.tb { position: sticky; top: 0; z-index: 30; height: var(--top); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: var(--glass); border-bottom: 1px solid var(--line); }
.tb-in { max-width: var(--page); margin: 0 auto; padding: 0 var(--gut); height: 100%; display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand .part { font: 700 12px var(--font); letter-spacing: 0; color: #fff; background: var(--cob); padding: 3px 7px; border-radius: 6px; }
.tb-nav { display: flex; gap: 2px; padding: 4px; border-radius: var(--pill); background: var(--s2); }
.tb-nav a { padding: 8px 15px; border-radius: var(--pill); font-weight: 700; color: var(--mut); font-size: 14px; transition: background .12s, color .12s; }
.tb-nav a:hover { color: var(--text); }
.tb-nav a[aria-current] { color: var(--cob-2); background: var(--s1); box-shadow: 0 2px 10px rgba(42, 80, 255, .16); }
.tb-nav a.vl { color: var(--cob-2); }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.tb-search { position: relative; display: flex; align-items: center; gap: 10px; height: 42px; width: 300px; padding: 0 16px; border-radius: var(--pill); background: var(--s1); color: var(--faint); font-size: 14px; border: 1px solid var(--line); transition: border-color .12s; }
.tb-search:focus-within { border-color: var(--cob); }
.tb-search svg { width: 15px; height: 15px; flex: none; }
.tb-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; color: var(--text); font-size: 14px; }
.tb-search input::placeholder { color: var(--faint); }
.tb-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.tb-search kbd { font: 600 11px var(--font); padding: 2px 6px; border-radius: 5px; background: var(--s3); color: var(--mut); }
.tb-search:focus-within kbd { display: none; }
.tb-search-btn { display: none; }
.suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40; list-style: none; margin: 0; padding: 6px; background: var(--s1); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow); color: var(--text); }
.suggest a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 14px; }
.suggest a:hover, .suggest a[aria-selected="true"] { background: var(--s2); }
.suggest a small { color: var(--faint); margin-left: 4px; }
.suggest .kind { margin-left: auto; font-size: 12px; color: var(--faint); }
.ib { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--pill); background: var(--s1); border: 1px solid var(--line); color: var(--mut); transition: background .12s, color .12s; }
.ib:hover { background: var(--s3); color: var(--text); }
.ib svg { width: 16px; height: 16px; }

/* the Lab's door: the cobalt button, and what it shows before you open it */
.lab-cta { position: relative; }
.lab-cta-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px 0 15px; border-radius: var(--pill); background: linear-gradient(135deg, #5B7BFF, #2A50FF); color: #fff; font-weight: 700; font-size: 14.5px; box-shadow: 0 6px 20px rgba(42, 80, 255, .35); transition: transform .15s ease, box-shadow .15s ease; }
.lab-cta-btn:hover, .lab-cta[data-open] .lab-cta-btn { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(42, 80, 255, .45); }
.lab-cta-btn svg { width: 16px; height: 16px; }
.lab-cta-btn .dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); animation: dot 2.4s ease-out 1.2s 2; }
@keyframes dot { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); } 70% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
.lab-cta-btn::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-18deg); animation: sheen 1.1s ease-out 1.8s 1 both; }
@keyframes sheen { from { left: -40%; } to { left: 120%; } }
.lab-peek { position: absolute; top: calc(100% + 10px); right: 0; z-index: 45; width: 580px; background: linear-gradient(160deg, #141A2B, #0E1220); color: #fff; border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; box-shadow: 0 30px 70px rgba(0, 0, 0, .5); padding: 20px 20px 18px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; }
.lab-cta[data-open] .lab-peek { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.lab-peek::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.lab-peek h3 { font-size: 24px; line-height: 1.05; } .lab-peek h3 b { color: #8FA4FF; }
.lab-peek p { margin-top: 10px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .72); max-width: 56ch; }
.lab-peek .nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.lab-peek .nums > a { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; padding: 12px; transition: background .12s; }
.lab-peek .nums > a:hover { background: rgba(255, 255, 255, .12); }
.lab-peek .nums b { display: block; font: 800 22px/1 var(--disp); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lab-peek .nums span { display: block; margin-top: 5px; font-size: 12px; color: rgba(255, 255, 255, .6); }
.lab-peek .tools { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 10px; }
.lab-peek .tools a { display: grid; gap: 4px; padding: 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); font-size: 12.5px; transition: background .12s, border-color .12s; }
.lab-peek .tools a b { font-size: 14px; } .lab-peek .tools a span { color: rgba(255, 255, 255, .6); line-height: 1.4; }
.lab-peek .tools a:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .3); }
.lab-peek .tools a.v b { color: #8FA4FF; }
.lab-peek .go { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; color: rgba(255, 255, 255, .6); }
.lab-peek .go a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--pill); background: linear-gradient(135deg, #5B7BFF, #2A50FF); color: #fff; font-weight: 700; }
.to-hub { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: var(--pill); background: var(--s2); color: var(--text); font-weight: 600; font-size: 14px; }
.to-hub svg { width: 15px; height: 15px; } .to-hub:hover { background: var(--s3); }

/* the live strip */
.live { position: sticky; top: var(--top); z-index: 25; background: var(--s1); border-bottom: 1px solid var(--line); }
.live-in { max-width: var(--page); margin: 0 auto; padding: 0 var(--gut); display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.live-in::-webkit-scrollbar { display: none; }
.live a { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; font-size: 13px; border-right: 1px solid var(--line); }
.live a:hover { background: var(--s2); }
.live .clock { color: var(--live); font-weight: 700; font-variant-numeric: tabular-nums; }
.live .sc { font: 800 14px var(--disp); margin: 0 4px; }

/* ============================== layout ============================================================== */
.page { max-width: var(--page); margin: 0 auto; padding: 0 var(--gut) 64px; }
/* the three column grids of the site; every direct child is spaced by the gap and never by its own margin */
.hub { display: grid; grid-template-columns: 220px minmax(0, 1fr) 340px; gap: var(--gap); align-items: start; padding-top: var(--s-5); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) 352px; gap: var(--gap); align-items: start; padding-top: var(--s-5); }
.two.even { grid-template-columns: 1fr 1fr; } .two.one { grid-template-columns: minmax(0, 860px); }
.grid-2, .grid-3, .grid-4, .three, .twoc { display: grid; gap: var(--gap); align-items: start; }
.grid-2, .twoc { grid-template-columns: 1fr 1fr; } .grid-3, .three { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); }
.twoc.wide { grid-template-columns: minmax(0, 1fr) 400px; }
.hub > *, .two > *, .grid-2 > *, .grid-3 > *, .grid-4 > *, .three > *, .twoc > * { margin-top: 0 !important; }
/* a column stacks its blocks with the same gap */
.two > div, .two > aside, .two > section, .hub > section, .hub > aside, .stack { display: grid; gap: var(--gap); align-content: start; min-width: 0; }
.two > div > *, .two > aside > *, .hub > section > *, .hub > aside > *, .stack > * { margin-top: 0 !important; }
.sec { margin-top: var(--s-6); }
.sec-h { display: flex; align-items: baseline; gap: 12px; padding-bottom: var(--s-4); }
.sec-h h2 { font-size: 30px; }
.sec-h .sub { font-size: 14px; color: var(--mut); }
.sec-h .more { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--cob-2); white-space: nowrap; }
.sticky { position: sticky; top: calc(var(--top) + 16px); }
.crumbs { display: flex; gap: 8px; padding: var(--s-4) 0 0; font-size: 13px; color: var(--faint); }
.crumbs a:hover { color: var(--text); } .crumbs b { color: var(--text); font-weight: 600; }

/* the page head: the title of a hub page, with its sub and tools; the tabs sit under it */
.dayhead { display: flex; align-items: baseline; gap: 14px; padding: var(--s-6) 0 var(--s-4); }
.dayhead h1 { font-size: 34px; white-space: nowrap; }
.dayhead .sub { color: var(--mut); font-size: 14px; } .dayhead .sub b { color: var(--text); }
.dayhead .tools { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.dayhead + .two, .dayhead + .grid-2, .dayhead + .grid-3, .dayhead + .grid-4 { padding-top: 0; }

/* the rail: every competition one click away */
.rail { font-size: 14px; }
.rail h4 { font: 700 12px var(--font); color: var(--faint); margin: var(--s-4) 0 var(--s-2) 10px; letter-spacing: 0; }
.rail h4:first-child { margin-top: 0; }
.rail a { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 9px; color: var(--mut); font-weight: 500; transition: background .12s, color .12s; }
.rail a:hover { background: var(--s2); color: var(--text); }
.rail a[aria-current] { color: var(--text); font-weight: 700; background: var(--s2); }

/* the day strip, the segmented controls, the tabs */
.days { position: sticky; top: var(--top); z-index: 20; background: var(--bg); display: flex; align-items: center; gap: 4px; padding: var(--s-3) 0; overflow-x: auto; scrollbar-width: none; }
.days::-webkit-scrollbar { display: none; }
.days a { flex: none; display: grid; justify-items: center; gap: 2px; min-width: 60px; padding: 8px 12px 9px; border-radius: 18px; font-size: 12px; color: var(--mut); transition: background .12s; }
.days a b { font: 800 17px var(--disp); color: var(--text); }
.days a .n { font-size: 11px; color: var(--faint); }
.days a:hover { background: var(--s2); }
.days a[aria-current] { background: var(--cob); color: #DCE3FF; box-shadow: 0 10px 24px rgba(42, 80, 255, .28); } .days a[aria-current] b, .days a[aria-current] .n { color: #fff; }
.days a.off { opacity: .45; }
.days .sp { flex: 1; }
.days.flat { position: static; padding: 0 0 var(--s-4); z-index: auto; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--pill); background: var(--s2); }
.seg a, .seg button { padding: 6px 13px; border-radius: var(--pill); font-size: 13px; font-weight: 600; color: var(--mut); white-space: nowrap; transition: background .12s, color .12s; }
.seg a:hover, .seg button:hover { color: var(--text); }
.seg [aria-current], .seg [aria-pressed="true"] { background: var(--s1); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.seg .v[aria-current], .seg .v[aria-pressed="true"] { background: var(--cob); color: #fff; }
.tabs { position: sticky; top: var(--top); z-index: 20; display: flex; gap: 4px; padding: var(--s-3) 0; background: var(--bg); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: none; padding: 8px 16px; border-radius: var(--pill); font-weight: 700; color: var(--mut); font-size: 14.5px; transition: background .12s, color .12s; }
.tabs a:hover { color: var(--text); background: var(--s2); }
.tabs a[aria-current] { background: var(--text); color: var(--bg); }
.tabs a.vt { color: var(--cob-2); } .tabs a.vt[aria-current] { background: var(--cob); color: #fff; }
.tabs .end { margin-left: auto; }

/* the site's own menus */
.dd { position: relative; display: inline-block; }
.dd-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 14px; border-radius: var(--pill); background: var(--s1); font-size: 14px; font-weight: 600; white-space: nowrap; border: 1px solid var(--line); transition: background .12s, border-color .12s; }
.dd-btn .lbl { color: var(--faint); font-weight: 500; }
.dd-btn svg { width: 12px; height: 12px; color: var(--faint); }
.dd-btn:hover { background: var(--s3); }
.dd[data-open] .dd-btn { border-color: var(--cob); }
.dd-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 100%; max-height: 60vh; overflow: auto; list-style: none; margin: 0; padding: 6px; background: var(--s1); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow); }
.dd-menu.r { left: auto; right: 0; } .dd.r .dd-menu { left: auto; right: 0; }
.dd-menu a, .dd-menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: 8px; font-size: 14px; white-space: nowrap; text-align: left; color: var(--text); }
.dd-menu a:hover, .dd-menu button:hover, .dd-menu a:focus-visible { background: var(--s2); }
.dd-menu [aria-current="true"], .dd-menu [aria-pressed="true"] { font-weight: 700; }
.dd-menu [aria-current="true"]::after, .dd-menu [aria-pressed="true"]::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--cob); }

/* buttons, chips, inputs */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: var(--pill); background: var(--s1); border: 1px solid var(--line); font-weight: 600; font-size: 14px; color: var(--text); transition: background .12s, transform .12s; white-space: nowrap; }
.btn:hover { background: var(--s2); }
.btn.primary, .btn.ink { background: var(--cob); border-color: var(--cob); color: #fff; box-shadow: 0 8px 22px rgba(42, 80, 255, .28); }
.btn.primary:hover, .btn.ink:hover { transform: translateY(-1px); }
.btn svg { width: 15px; height: 15px; }
.chip { height: 32px; padding: 0 12px; border-radius: var(--pill); background: var(--s1); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--mut); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: background .12s, color .12s; }
.chip:hover { color: var(--text); background: var(--s2); }
.chip[aria-pressed="true"], .chip[aria-current] { background: var(--text); color: var(--bg); border-color: var(--text); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.input { height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--s1); font-size: 14px; color: var(--text); width: 100%; }
.input:focus { outline: none; border-color: var(--cob); }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--s2); color: var(--mut); }
.pill.v { background: var(--cob-soft); color: var(--cob-2); }
.pill.live { background: var(--loss-soft); color: var(--live); }

/* ============================== the card ============================================================ */
.card, .w, .grp, .feat, .board { background: var(--card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.card + .card, .card + .labw, .labw + .card, .card + .w, .w + .card, .w + .w, .grp + .card, .card + .grp, .grp + .grp, .w + .labw, .labw + .w, .feat + .w, .w + .feat { margin-top: var(--gap); }
/* its head */
.ch, .w-h, .gh { display: flex; align-items: center; gap: 10px; padding: var(--s-4) var(--pad) var(--s-3); min-height: 52px; }
.ch h2, .w-h h2 { font-size: 19px; } .ch h3, .w-h h3, .gh h2, .gh h3 { font-size: 15px; }
.gh { min-height: 48px; padding: 0 var(--pad); border-bottom: 1px solid var(--line); font-weight: 700; font-size: 15px; }
.gh h2, .gh h3 { font: 700 15px var(--font); letter-spacing: 0; }
.w-h { font-weight: 700; font-size: 15px; }
.ch .sub, .w-h .sub, .gh .g3 { color: var(--mut); font-size: 13.5px; font-weight: 500; min-width: 0; }
.w-h .g3 { font-weight: 500; font-size: 13px; }
.ch .more, .w-h .more, .gh .more { margin-left: auto; color: var(--cob-2); font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.ch .more:hover, .w-h .more:hover, .gh .more:hover { text-decoration: underline; text-underline-offset: 3px; }
.ch.b { border-bottom: 1px solid var(--line); }
.ch .tools, .w-h .tools { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* its body and foot */
.cb, .w-b { padding: 0 var(--pad) var(--pad); }
.cf, .gf { display: flex; gap: 16px; flex-wrap: wrap; padding: var(--s-3) var(--pad) var(--s-4); color: var(--faint); font-size: 13px; border-top: 1px solid var(--line); line-height: 1.45; }
.cf a, .gf a { color: var(--cob-2); font-weight: 600; }
.sub-h { padding: var(--s-2) var(--pad); background: var(--s2); font-size: 12.5px; color: var(--faint); font-weight: 600; border-top: 1px solid var(--line); }
/* number tiles inside a card: one component, many columns */
.stats, .stats4, .kv, .six { display: grid; gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.stats, .stats4 { grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); } .kv { grid-template-columns: 1fr 1fr; } .six { grid-template-columns: repeat(6, 1fr); }
.stats.c3, .stats4.c3 { grid-template-columns: repeat(3, 1fr); } .stats.c2 { grid-template-columns: 1fr 1fr; }
.stats > div, .stats4 > div, .kv > div, .six > div { background: var(--s1); padding: var(--s-4) var(--pad); min-width: 0; }
.stats b, .stats4 b, .kv .big, .six .big { display: block; font: 800 26px/1 var(--disp); letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.stats b.v, .stats4 b.v, .kv .big.v, .six .big.v { color: var(--cob-2); }
.stats > div > span, .stats4 > div > span, .kv .l, .six .l { display: block; margin-top: 6px; color: var(--mut); font-size: 13px; line-height: 1.4; }
.stats span b, .stats4 span b, .kv .l b { font: 600 13px var(--font); display: inline; color: var(--text); letter-spacing: 0; }
/* rows inside a card */
.w-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: var(--s-3) var(--pad); min-height: 52px; border-top: 1px solid var(--line); font-size: 14px; transition: background .12s; }
.w-row .n { font: 800 17px var(--disp); font-variant-numeric: tabular-nums; }
.w-row small { display: block; color: var(--faint); font-size: 12.5px; margin-top: 1px; font-weight: 500; }
.w-row:hover { background: var(--s2); }
.w-row .who { display: flex; gap: 10px; align-items: center; min-width: 0; }
.w-row .who > span:last-child { min-width: 0; }
.w-row .fn { font: 800 20px var(--disp); width: 52px; flex: none; font-variant-numeric: tabular-nums; color: var(--text); }
.w-row .fn.v { color: var(--cob-2); }
.w .rk { width: 20px; color: var(--faint); font-weight: 600; font-size: 13px; text-align: center; flex: none; }
.w .n .u { font-size: 12px; color: var(--mut); font-weight: 600; }
.w-sub { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: var(--s-3) var(--pad) var(--s-1); font-size: 13px; font-weight: 700; } .w-sub a { display: inline-flex; align-items: center; gap: 6px; color: var(--text); } .w-sub .more { font-weight: 600; color: var(--cob-2); }
.rr { display: grid; grid-template-columns: 20px minmax(0, 1fr) 110px 46px; align-items: center; gap: 10px; padding: 7px var(--pad); font-size: 14px; color: var(--text); }
.rr:hover { background: var(--s2); }
.rr .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rr .bar { height: 6px; border-radius: 3px; background: var(--s3); overflow: hidden; } .rr .bar i { display: block; height: 100%; background: var(--cob); border-radius: 3px; }
.rr .v { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--cob-2); }
.w-row.mv { justify-content: flex-start; gap: 14px; grid-template-columns: 48px minmax(0, 1fr); } .w-row.mv .who { flex: 1; min-width: 0; }
.w-row.mv .d { font: 800 18px var(--disp); width: 48px; flex: none; font-variant-numeric: tabular-nums; } .mv .d.up { color: var(--win); } .mv .d.down { color: var(--loss); }

/* one match in a list */
.mr { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) 40px 132px; align-items: center; gap: 0 14px; min-height: 60px; padding: 6px var(--pad); border-top: 1px solid var(--line); transition: background .12s; }
.gh + .mr, .sub-h + .mr, .ch + .mr { border-top: 0; }
.mr:hover { background: var(--s2); }
.mr .when { font: 800 15px var(--disp); color: var(--text); text-align: center; font-variant-numeric: tabular-nums; }
.mr .when .d { display: block; font: 500 11px var(--font); color: var(--faint); margin-bottom: 1px; }
.mr .when.fin { font: 700 12px var(--font); color: var(--faint); }
.mr .when.on { color: var(--live); font: 800 13px var(--disp); }
.mr .sides { display: grid; gap: 5px; min-width: 0; }
.mr .side { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; font-weight: 500; }
.mr .side .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr .side.won { font-weight: 700; } .mr .side.lost { color: var(--mut); }
.mr .goals { display: grid; gap: 5px; font: 800 16px/1.3 var(--disp); text-align: right; font-variant-numeric: tabular-nums; }
.mr .goals span { min-height: 20px; }
.mr .vesta { display: grid; gap: 5px; }
.mr .vesta .p3 { display: grid; grid-template-columns: 1fr 1fr 1fr; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--faint); }
.mr .vesta .p3 b { color: var(--text); font-weight: 700; }
.mr .vesta .p3 > :nth-child(2) { text-align: center; } .mr .vesta .p3 > :nth-child(3) { text-align: right; }
.mr .vesta .none { font-size: 12px; color: var(--faint); text-align: right; }
.mr .ctx { grid-column: 2 / -1; font-size: 12px; color: var(--faint); }
.mr .peek { position: absolute; right: var(--pad); bottom: 100%; margin-bottom: -4px; z-index: 5; padding: 8px 12px; border-radius: 10px; background: var(--s3); color: var(--text); font-size: 12.5px; white-space: nowrap; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .14s, transform .14s, visibility 0s linear .14s; pointer-events: none; }
.mr .peek b { font: 800 14px var(--disp); color: var(--cob-2); }
.mr:hover .peek { opacity: 1; visibility: visible; transform: none; transition-delay: .25s; }
.w .mr { grid-template-columns: 46px minmax(0, 1fr) 30px 86px; gap: 0 10px; padding: 6px var(--s-4); min-height: 54px; }
.w .mr .side { font-size: 14px; gap: 8px; } .w .mr .side .mark { --s: 20px !important; }
.w .mr .when { font-size: 13.5px; } .w .mr .when .d { font-size: 10.5px; }
.w .mr .goals { font-size: 15px; } .w .mr .vesta .p3 { font-size: 11.5px; } .w .mr .peek { display: none; }
.strip { display: flex; gap: 3px; height: 7px; }
.strip i { display: block; min-width: 3px; border-radius: 4px; }
.strip .h { background: var(--home); } .strip .d { background: var(--draw); } .strip .a { background: var(--away); }
.strip.lg { height: 14px; gap: 4px; } .strip.lg i { border-radius: 7px; }
.strip .hit { outline: 2px solid var(--win); outline-offset: 2px; }

/* the match of the day in a side column */
.feat { position: relative; }
.feat::before, .feat::after { content: ""; position: absolute; z-index: 0; top: -60px; width: 220px; height: 220px; border-radius: 50%; filter: blur(50px); opacity: var(--glow); pointer-events: none; }
.feat::before { left: -60px; background: var(--c1, #1A3BA8); } .feat::after { right: -60px; background: var(--c2, #4D6BFF); opacity: var(--glow-2); }
.feat > * { position: relative; z-index: 1; }
.feat .fh { display: flex; justify-content: space-between; align-items: center; padding: var(--s-4) var(--pad) 0; font-size: 13px; color: var(--mut); }
.feat .fm { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: var(--s-4) var(--pad) var(--s-2); text-align: center; }
.feat .fm .tm { display: grid; justify-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.feat .fm .tm small { font-size: 12px; color: var(--mut); font-weight: 500; }
.feat .fm .ko { font: 800 30px/1 var(--disp); letter-spacing: -.03em; }
.feat .fm .ko small { display: block; font: 500 12px var(--font); color: var(--mut); margin-top: 4px; letter-spacing: 0; }
.feat .fs { padding: var(--s-2) var(--pad) var(--s-4); display: grid; gap: 8px; }
.feat .fs .p3 { display: grid; grid-template-columns: 1fr 1fr 1fr; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.feat .fs .p3 > :nth-child(2) { text-align: center; color: var(--mut); } .feat .fs .p3 > :nth-child(3) { text-align: right; color: var(--cob-2); }
.feat .ff { border-top: 1px solid var(--line); padding: var(--s-3) var(--pad); font-size: 13px; color: var(--mut); display: flex; justify-content: space-between; gap: 10px; }

/* the Lab block on a hub page: the one surface with depth */
.labw { border-radius: var(--r); padding: var(--pad); background: linear-gradient(145deg, #2A50FF, #1A2E8F 70%, #121B4F); color: #fff; box-shadow: var(--lab-shadow); }
.labw .tag { font-size: 13px; font-weight: 700; opacity: .85; display: flex; align-items: center; gap: 8px; } .labw .tag svg { width: 15px; height: 15px; }
.labw h3 { font-size: 22px; margin-top: 10px; line-height: 1.1; } .labw p { margin: 8px 0 14px; opacity: .85; font-size: 14px; line-height: 1.5; }
.labw .rows { display: grid; gap: 6px; margin-bottom: 14px; }
.labw .rows a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .1); font-size: 14px; transition: background .12s; }
.labw .rows a:hover { background: rgba(255, 255, 255, .18); }
.labw .rows b { font: 800 16px var(--disp); font-variant-numeric: tabular-nums; } .labw .rows small { display: block; opacity: .7; font-size: 12px; }
.labw .go { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; background: #fff; color: #1A2E8F; font-weight: 700; transition: transform .12s; }
.labw .go:hover { transform: translateY(-1px); }

/* ============================== heads: the match, the entity, the home ============================== */
.hero, .ehero, .hh { position: relative; overflow: hidden; margin: 0 calc(50% - 50vw); border-bottom: 1px solid var(--line); }
.hero::before, .hero::after, .hh::before, .hh::after, .ehero::before { content: ""; position: absolute; z-index: 0; top: -160px; width: 560px; height: 560px; border-radius: 50%; filter: blur(90px); pointer-events: none; background: var(--c1, #1A3BA8); opacity: var(--glow); }
.hero::before, .hh::before, .ehero::before { left: -120px; } .hero::after, .hh::after { right: -120px; background: var(--c2, #4D6BFF); opacity: var(--glow-2); }
.hero-in, .hh-in, .ehero > * { position: relative; z-index: 1; max-width: var(--page); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
.hero-in { padding-top: var(--s-4); padding-bottom: var(--s-5); }
.hero .meta { display: flex; justify-content: space-between; align-items: center; margin-top: var(--s-3); font-size: 13.5px; color: var(--mut); gap: 12px; }
.hero .meta .pub { color: var(--cob-2); font-weight: 600; }
.hero .sides { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; margin-top: var(--s-4); }
.hero .side { display: flex; align-items: center; gap: 18px; min-width: 0; } .hero .side.r { flex-direction: row-reverse; text-align: right; }
.hero .side .nm { font: 800 34px/1 var(--disp); letter-spacing: -.03em; display: block; }
.hero .side .nm:hover { color: var(--cob-2); }
.hero .side .sub { margin-top: 8px; color: var(--mut); font-size: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .hero .side.r .sub { justify-content: flex-end; }
.hero .ko { text-align: center; } .ko .t, .ko .s { font: 800 72px/1 var(--disp); letter-spacing: -.05em; font-variant-numeric: tabular-nums; } .ko .l { margin-top: 6px; color: var(--mut); font-size: 14px; } .ko .l.live { color: var(--live); font-weight: 700; }
.vstrip { margin-top: var(--s-5); }
.vstrip .pcts { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: var(--s-3); }
.vstrip .pcts b { font: 800 30px/1 var(--disp); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .vstrip .pcts > div > span { display: block; color: var(--mut); font-size: 13.5px; margin-top: 4px; }
.vstrip .pcts > :nth-child(2) { text-align: center; } .vstrip .pcts > :nth-child(3) { text-align: right; } .vstrip .pcts > :nth-child(3) b { color: var(--cob-2); }
.form { display: inline-flex; gap: 3px; vertical-align: middle; }
.form i { width: 17px; height: 17px; border-radius: 5px; font: 800 11px/17px var(--font); font-style: normal; text-align: center; color: #fff; }
.form .W { background: var(--win); } .form .D { background: var(--level); } .form .L { background: var(--loss); }
.ehero .crumbs { padding-top: var(--s-4); }
.eh { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-5); padding-top: var(--s-4); padding-bottom: var(--s-5); }
.eh.plain { grid-template-columns: minmax(0, 1fr) auto; padding-top: var(--s-6); } .eh.plain h1 { max-width: 16ch; } .eh.plain .meta { margin-top: var(--s-3); }
.eh .kicker { display: block; margin-bottom: 8px; font-size: 13.5px; }
.eh h1 { font-size: 36px; letter-spacing: -.03em; }
.eh .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 14px; color: var(--mut); align-items: center; }
.eh .meta a { color: var(--text); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .eh .meta a:hover { color: var(--cob-2); }
.eh .kpis { display: flex; gap: var(--s-6); }
.eh .kpis > div { text-align: right; }
.eh .kpis .big { font: 800 28px/1 var(--disp); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.eh.plain .kpis .big { font-size: 34px; }
.eh .kpis .l { font-size: 12.5px; color: var(--mut); margin-top: 5px; max-width: 150px; margin-left: auto; line-height: 1.3; }
.eh .kpis .name { font-size: 20px; display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
:root[data-theme="dark"] .eh > .mark.logomark:not(:has(.dk)) { background: rgba(255, 255, 255, .92); border-radius: 16px; padding: 7px; box-sizing: content-box; }
.avatar { width: 64px; height: 64px; border-radius: 16px; background: var(--s2); overflow: hidden; } .avatar img { width: 100%; height: 100%; object-fit: cover; }
/* the home head */
.hh { background: linear-gradient(180deg, var(--s2), var(--bg)); }
.hh-in { padding-top: var(--s-7); padding-bottom: var(--s-7); display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: var(--s-7); align-items: center; }
.hh-txt .kicker { display: block; font-size: 14px; }
.hh-txt h1 { font-size: 64px; letter-spacing: -.045em; line-height: .96; margin-top: var(--s-4); max-width: 13ch; }
.hh-txt p { margin-top: var(--s-4); font-size: 17px; line-height: 1.5; color: var(--mut); max-width: 54ch; }
.hh-txt .acts { display: flex; gap: 10px; margin-top: var(--s-5); flex-wrap: wrap; }
.hh-txt .acts .btn { height: 44px; padding: 0 20px; border-radius: 12px; font-size: 15px; }
.hh-card { display: block; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r); padding: var(--pad) var(--pad) var(--s-4); color: var(--text); transition: transform .15s, border-color .15s; }
.hh-card:hover { transform: translateY(-2px); border-color: var(--cob-soft-2); }
.hh-card .top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--mut); font-weight: 600; }
.hh-card .sides { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 12px; margin-top: var(--s-4); text-align: center; }
.hh-card .tm { display: grid; justify-items: center; gap: 8px; min-width: 0; } .hh-card .tm .nm { font: 800 18px var(--disp); letter-spacing: -.02em; } .hh-card .tm small { font-size: 12.5px; color: var(--mut); }
.hh-card .ko { font: 800 46px/1 var(--disp); letter-spacing: -.04em; font-variant-numeric: tabular-nums; padding-top: 10px; } .hh-card .ko small { display: block; font: 500 12.5px var(--font); color: var(--mut); margin-top: 8px; letter-spacing: 0; }
.hh-card .strip { margin-top: var(--s-4); }
.hh-card .p3 { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: var(--s-3); }
.hh-card .p3 b { font: 800 32px/1 var(--disp); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .hh-card .p3 b .u { font-size: 16px; }
.hh-card .p3 span:not(.u) { display: block; font-size: 12.5px; color: var(--mut); margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hh-card .p3 > :nth-child(2) { text-align: center; color: var(--mut); } .hh-card .p3 > :nth-child(3) { text-align: right; } .hh-card .p3 > :nth-child(3) b { color: var(--cob-2); }
.hh-card .by { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line); font-size: 12.5px; color: var(--mut); display: flex; justify-content: space-between; }

/* ============================== Vesta's pieces ====================================================== */
.hd { display: grid; grid-template-columns: 180px minmax(0, 1fr) 80px 230px; gap: 16px; padding: var(--s-3) var(--pad) 2px; color: var(--faint); font-size: 12.5px; font-weight: 600; }
.hd > :nth-child(3) { text-align: right; }
.hd.b { border-top: 1px solid var(--line); padding-top: var(--s-4); }
.rows { padding: 4px var(--pad) var(--s-3); }
.vr { display: grid; grid-template-columns: 180px minmax(0, 1fr) 80px 230px; align-items: center; gap: 16px; min-height: 50px; border-top: 1px solid var(--line); font-size: 15px; }
.vr:first-child { border-top: 0; }
.vr .bar { height: 10px; background: var(--s3); border-radius: 5px; overflow: hidden; } .vr .bar i { display: block; height: 100%; background: linear-gradient(90deg, #5B7BFF, #8FA4FF); border-radius: 5px; }
.vr .p { font: 800 22px/1 var(--disp); color: var(--cob-2); text-align: right; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.vr .hit { color: var(--win); font-weight: 700; font-size: 13px; margin-left: 6px; }
.rc { color: var(--faint); font-size: 13px; line-height: 1.35; } .rc b { color: var(--mut); }
a.rc:hover b { color: var(--cob-2); }
.nx { display: grid; grid-template-columns: 150px 64px minmax(0, 1fr) 64px; align-items: center; gap: 16px; height: 56px; border-top: 1px solid var(--line); padding: 0 var(--pad); }
.nx .l { color: var(--mut); } .nx .v1 { font: 800 22px/1 var(--disp); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .nx .v2 { font: 800 22px/1 var(--disp); letter-spacing: -.02em; color: var(--cob-2); text-align: right; font-variant-numeric: tabular-nums; }
.dial { position: relative; height: 16px; display: block; } .dial .track { position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--s3); } .dial .band { position: absolute; top: 3px; height: 10px; border-radius: 5px; background: var(--band); } .dial .mark { position: absolute; top: 0; width: 3px; height: 16px; border-radius: 2px; background: var(--home); margin-left: -1px; }
.dial .real { position: absolute; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--win); margin-left: -5px; box-shadow: 0 0 0 2px var(--s1); }
.dial.aw .band { background: var(--cob-soft); } .dial.aw .mark { background: var(--cob-2); }
.two-d { display: grid; gap: 8px; }
.lgd { padding: var(--s-3) var(--pad) var(--s-4); color: var(--faint); font-size: 12.5px; display: flex; gap: 18px; flex-wrap: wrap; }
.lgd i { display: inline-block; vertical-align: -1px; margin-right: 6px; } .lgd .mm { width: 3px; height: 12px; background: var(--home); border-radius: 2px; } .lgd .bb { width: 18px; height: 8px; border-radius: 4px; background: var(--band); } .lgd .rr { width: 9px; height: 9px; border-radius: 50%; background: var(--win); }
.pw { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 4px var(--pad) var(--pad); }
.pw h3 { font: 700 14px var(--font); display: flex; align-items: center; gap: 8px; margin: 12px 0 10px; letter-spacing: 0; }
.pcard { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 14px; background: var(--s2); border-radius: 12px; transition: background .12s, transform .12s; }
.pcard + .pcard { margin-top: 8px; }
.pcard:hover { background: var(--s3); transform: translateY(-1px); }
.pcard .sh svg { width: 44px; height: 44px; }
.pcard .who { font-weight: 700; font-size: 15px; min-width: 0; } .pcard .who small { display: block; color: var(--mut); font-weight: 500; font-size: 12.5px; margin-top: 2px; }
.pcard .sc { text-align: right; } .pcard .sc b { font: 800 24px/1 var(--disp); color: var(--cob-2); font-variant-numeric: tabular-nums; } .pcard .sc > span { display: block; font-size: 12px; color: var(--mut); margin-top: 3px; }
.pcard .sc b.ok { color: var(--win); }
.vcell { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--cob-soft); color: var(--cob-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.okx { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.okx.ok { background: var(--win-soft); color: var(--win); } .okx.no { background: var(--loss-soft); color: var(--loss); }
.okrow { display: grid; grid-template-columns: minmax(0, 1fr) 80px 120px; align-items: center; gap: 16px; padding: 0 var(--pad); height: 50px; border-top: 1px solid var(--line); font-size: 15px; }
.okrow .p { font: 800 22px/1 var(--disp); color: var(--cob-2); text-align: right; font-variant-numeric: tabular-nums; }
.xgrow { display: grid; grid-template-columns: 150px 64px minmax(0, 1fr) 64px; align-items: center; gap: 16px; height: 52px; padding: 0 var(--pad); border-top: 1px solid var(--line); font-size: 15px; }
.xgrow .n { font: 800 22px/1 var(--disp); font-variant-numeric: tabular-nums; } .xgrow .n.v { color: var(--cob-2); } .xgrow .n.r { text-align: right; }
.grid6 { display: grid; grid-template-columns: 32px repeat(6, 1fr); gap: 4px; padding: 8px var(--pad) 6px; font-size: 13px; }
.grid6 .hd { display: block; padding: 0; color: var(--faint); text-align: center; font-weight: 600; align-self: center; }
.grid6 .c { height: 36px; display: grid; place-items: center; border-radius: 8px; background: color-mix(in srgb, var(--cob) calc(var(--a) * 100%), var(--s2)); color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; }
.grid6 .c.hot { color: #fff; } .grid6 .c.hit { outline: 2px solid var(--win); outline-offset: -2px; }
.start { display: grid; grid-template-columns: minmax(0, 1fr) 100px 44px; align-items: center; gap: 12px; padding: 0 var(--pad); height: 34px; border-top: 1px solid var(--line); font-size: 14px; }
.start .b { height: 6px; background: var(--s3); border-radius: 3px; overflow: hidden; } .start .b i { display: block; height: 100%; background: var(--cob); }
.start .n { text-align: right; color: var(--cob-2); font-weight: 700; }

/* the pitch: two elevens, shirts with numbers */
.pitch-wrap { padding: 4px var(--pad) var(--pad); display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: var(--gap); align-items: start; }
.pitch-wrap.one { grid-template-columns: minmax(0, 460px); }
.pitch-side { display: flex; justify-content: space-between; align-items: center; padding: 8px 2px; font-weight: 700; font-size: 14.5px; } .pitch-side span { display: inline-flex; align-items: center; gap: 8px; } .pitch-side .g3 { font-weight: 500; }
.pitchv { position: relative; aspect-ratio: 68 / 105; border-radius: 14px; overflow: hidden; background: radial-gradient(120% 60% at 50% 0%, var(--pitch-a), var(--pitch-b) 60%, var(--pitch-c)); }
.pitchv > svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--pitch-line); stroke-width: .6; }
.pitchv ul { list-style: none; margin: 0; padding: 0; }
.chip-p { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 3px; width: 78px; text-align: center; }
.chip-p .sh { display: block; width: 40px; height: 40px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .35)); } .chip-p .sh svg { width: 100%; height: 100%; }
.chip-p b { font-size: 12px; font-weight: 700; color: var(--chip-name); text-shadow: var(--chip-shadow); white-space: nowrap; max-width: 78px; overflow: hidden; text-overflow: ellipsis; }
.chip-p b a:hover { text-decoration: underline; }
.chip-p .bd { display: flex; gap: 2px; position: absolute; top: -2px; right: 12px; } .chip-p .bd i { width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 1px solid #0F1420; } .chip-p .bd i.a { background: var(--cob); } .chip-p .bd i.y { background: var(--yellow); border-radius: 2px; } .chip-p .bd i.r { background: var(--loss); border-radius: 2px; }
.bench h4 { font: 700 13px var(--font); color: var(--faint); margin: 10px 0 6px; letter-spacing: 0; }
.bench div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.bench .n { color: var(--cob-2); font-weight: 700; } .bench .g3 { font-size: 12.5px; }
.lineups { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 0 28px; align-items: start; padding: 4px var(--pad) var(--pad); }

/* events, comparisons */
.evs { padding: 0 var(--pad) 8px; font-size: 14.5px; }
.ev { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 40px; border-top: 1px solid var(--line); }
.ev .t { text-align: center; font-size: 12.5px; color: var(--mut); } .ev .t b { display: block; font: 800 15px var(--disp); color: var(--text); font-variant-numeric: tabular-nums; }
.ev .l { text-align: right; } .ev .r { text-align: left; }
.ev .goal { font-weight: 700; } .ev .goal::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--home); margin: 0 7px -1px 0; }
.ev .r .goal::before { background: var(--cob); }
.ev small { color: var(--faint); font-size: 12.5px; }
.ev.ht { background: var(--s2); font-size: 12.5px; color: var(--faint); min-height: 28px; border-radius: 8px; border-top: 0; margin: 4px 0; }
.ev .bk { display: inline-block; width: 9px; height: 12px; border-radius: 2px; background: var(--yellow); vertical-align: -1px; margin: 0 5px; border: 0; } .ev .bk.red { background: var(--loss); }
.cmp { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; gap: 12px; height: 40px; border-top: 1px solid var(--line); font-size: 13.5px; padding: 0 var(--pad); }
.cmp .n { font: 800 17px var(--disp); font-variant-numeric: tabular-nums; } .cmp .n.r { text-align: right; color: var(--cob-2); }
.cmp .mid { display: grid; gap: 5px; text-align: center; color: var(--mut); font-size: 12.5px; }
.cmp .pair { display: flex; gap: 3px; height: 7px; } .cmp .pair i { display: block; border-radius: 4px; } .cmp .pair .h { background: var(--home); } .cmp .pair .a { background: var(--cob); }
.pitch { position: relative; width: 100%; aspect-ratio: 105 / 68; background: radial-gradient(80% 80% at 50% 50%, var(--pitch-a), var(--pitch-b)); border-radius: 14px; overflow: hidden; }
.pitch svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pitch .ln { fill: none; stroke: var(--pitch-line); stroke-width: .35; }
.pitch .sh { fill: rgba(255, 255, 255, .25); stroke: #fff; stroke-width: .25; }
.pitch .sa { fill: rgba(77, 107, 255, .35); stroke: var(--cob-2); stroke-width: .25; }
.pitch .g { fill: #fff; } .pitch .ga { fill: var(--cob-2); }
.nav2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.nav2 a { display: block; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--s1); font-size: 14px; transition: background .12s; }
.nav2 a small { display: block; color: var(--faint); font-size: 12.5px; margin-bottom: 3px; } .nav2 a:hover { background: var(--s2); }
.nav2 a.r { text-align: right; }

/* ============================== tables ============================================================== */
.tw { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; }
.t th { text-align: right; font-weight: 600; font-size: 12.5px; color: var(--faint); padding: 8px 12px; white-space: nowrap; background: var(--s2); }
.t td { text-align: right; padding: 0 12px; height: 44px; border-top: 1px solid var(--line); white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 14px; }
.t th.l, .t td.l { text-align: left; }
.t th:first-child, .t td:first-child { padding-left: var(--pad); } .t th:last-child, .t td:last-child { padding-right: var(--pad); }
.t tbody tr { transition: background .12s; } .t tbody tr:hover td { background: var(--s2); }
.t td.k { font-weight: 700; }
.t tr.me td { background: var(--cob-soft); }
.t td.z { box-shadow: inset 4px 0 0 var(--zc, transparent); }
.t td.vc, .t th.vc { color: var(--cob-2); }
.t td.heat { background: color-mix(in srgb, var(--cob) calc(var(--a) * 28%), transparent); }
.t.dense td { height: 38px; font-size: 13.5px; } .t.dense th { padding: 6px 12px; }
.t td.pos { color: var(--faint); width: 36px; }
.t.boxed { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.lgd-t { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px var(--pad); font-size: 12px; color: var(--mut); border-top: 1px solid var(--line); font-weight: 600; }
.lgd-t i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
td.cbar { background: linear-gradient(90deg, var(--cob-soft-2) var(--w), transparent var(--w)); }
@media (max-width: 760px) { .hide-sm { display: none !important; } }

/* ============================== small charts ======================================================== */
.rel { width: 100%; height: auto; }
.rel .g { stroke: var(--line); } .rel .dg { stroke: var(--line-2); stroke-dasharray: 4 4; }
.rel .pt { fill: var(--cob); } .rel .ln { fill: none; stroke: var(--cob); stroke-width: 1.8; }
.rel text { fill: var(--faint); font: 500 10px var(--font); }
.rec-curve { max-width: 300px; margin: 0 auto; }
.race { width: 100%; height: auto; }
.race .g { stroke: var(--line); } .race text { fill: var(--faint); font: 500 10px var(--font); }
.race .h { fill: none; stroke: var(--home); stroke-width: 2; } .race .a { fill: none; stroke: var(--cob); stroke-width: 2; }
.race .gh { fill: var(--home); stroke: var(--s1); stroke-width: 2; } .race .ga { fill: var(--cob); stroke: var(--s1); stroke-width: 2; }
.race .end { font: 800 12px var(--disp); } .race .end.h { fill: var(--text); stroke: none; } .race .end.a { fill: var(--cob-2); stroke: none; }
.fstrip { display: flex; gap: 3px; flex-wrap: wrap; }
.fstrip i { width: 16px; height: 22px; border-radius: 4px; display: grid; place-items: center; font: 700 9px var(--font); font-style: normal; color: #fff; }
.fstrip .W { background: var(--win); } .fstrip .D { background: var(--level); } .fstrip .L { background: var(--loss); }
.fstrip .sep { width: 1px; background: var(--line-2); margin: 0 3px; }
.tl svg { width: 100%; height: auto; display: block; }
.tl .base { stroke: var(--line-2); } .tl .ag { fill: var(--s4); }
.tl .W { fill: var(--win); } .tl .D { fill: var(--level); } .tl .L { fill: var(--loss); }
.tl text { fill: var(--faint); font: 500 9px var(--font); } .tl .sep { stroke: var(--line-2); stroke-dasharray: 3 3; }
.half { position: relative; width: 100%; aspect-ratio: 68 / 52.5; background: radial-gradient(120% 90% at 50% 0%, var(--pitch-a), var(--pitch-b)); border-radius: 14px; overflow: hidden; }
.half svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.half .ln { fill: none; stroke: var(--pitch-line); stroke-width: .35; }
.half .s { fill: rgba(255, 255, 255, .3); stroke: #fff; stroke-width: .25; } .half .g { fill: var(--cob-2); stroke: #fff; stroke-width: .3; }
.cbars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; height: 130px; align-items: end; padding: 10px var(--pad) 0; }
.cbars span { display: grid; grid-template-rows: auto 1fr auto; height: 100%; align-items: end; justify-items: center; gap: 4px; }
.cbars i { display: block; width: 100%; background: var(--s4); border-radius: 6px 6px 0 0; } .cbars i.now { background: var(--cob); }
.cbars b { font: 800 13px var(--disp); } .cbars small { font-size: 10.5px; color: var(--faint); }
.posb { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; height: 76px; align-items: end; padding: 0 var(--pad) 6px; }
.posb span { display: grid; grid-template-rows: 1fr auto; height: 100%; align-items: end; justify-items: center; gap: 4px; }
.posb i { display: block; width: 100%; background: var(--cob-soft-2); border-radius: 3px 3px 0 0; min-height: 2px; } .posb i.on { background: var(--cob); }
.posb b { font-size: 9.5px; color: var(--faint); font-weight: 500; }
.spk { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; vertical-align: middle; }
.spk i { width: 4px; background: var(--s4); border-radius: 1px; min-height: 2px; } .spk i.g { background: var(--cob); }
.pr { display: grid; grid-template-columns: 140px 48px minmax(0, 1fr) 34px; align-items: center; gap: 10px; height: 32px; font-size: 13.5px; border-top: 1px solid var(--line); }
.pr .bar { height: 7px; background: var(--s3); border-radius: 4px; overflow: hidden; } .pr .bar i { display: block; height: 100%; background: var(--text); border-radius: 4px; } .pr .bar i.top { background: var(--cob); }
.shotlgd { display: flex; gap: 16px; font-size: 12.5px; color: var(--faint); padding: 10px 0 0; flex-wrap: wrap; }
.shotlgd i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; margin-right: 5px; } .shotlgd .s { background: rgba(255, 255, 255, .5); border: 1px solid var(--mut); } .shotlgd .g { background: var(--cob); }
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .tick, .chart .val { fill: var(--faint); font: 500 11px var(--font); }
.chart .val { fill: var(--text); font-weight: 700; }
.chart .line { stroke: var(--cob); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { fill: var(--cob); stroke: var(--s1); stroke-width: 2; }
.chart .c-goals { fill: var(--cob); } .chart .c-xg { fill: var(--s4); }
.chart .l-pts { stroke: var(--text); stroke-width: 2.5; stroke-linejoin: round; } .chart .l-xp { stroke: var(--cob); stroke-width: 2.5; stroke-dasharray: 5 4; stroke-linejoin: round; }
.chart .l-pts-dot { fill: var(--text); } .chart .l-xp-dot { fill: var(--cob); }
.chart .end { font: 800 12px var(--disp); } .chart .l-pts-end { fill: var(--text); } .chart .l-xp-end { fill: var(--cob-2); }
.chart .x-h { stroke: var(--home); stroke-width: 2.5; } .chart .x-a { stroke: var(--cob); stroke-width: 2.5; }
.chart .x-h-g { fill: var(--home); stroke: var(--s1); stroke-width: 2; } .chart .x-a-g { fill: var(--cob); stroke: var(--s1); stroke-width: 2; }
.chart .x-h-t { fill: var(--text); } .chart .x-a-t { fill: var(--cob-2); }
.shotmap { width: 100%; height: auto; display: block; border-radius: 14px; background: radial-gradient(120% 90% at 50% 0%, var(--pitch-a), var(--pitch-b)); }
.shotmap.matchmap { background: radial-gradient(80% 80% at 50% 50%, var(--pitch-a), var(--pitch-b)); }
.shotmap .ln { fill: none; stroke: var(--pitch-line); stroke-width: .35; } .shotmap .ln.goal { fill: var(--pitch-line); stroke: none; } .shotmap .ln.dot { fill: var(--pitch-line); }
.shotmap .s-shot { fill: rgba(255, 255, 255, .3); stroke: #fff; stroke-width: .25; } .shotmap .s-goal { fill: var(--cob); stroke: #fff; stroke-width: .3; }
.shotmap .m-h { fill: rgba(255, 255, 255, .28); stroke: #fff; stroke-width: .25; } .shotmap .m-a { fill: rgba(77, 107, 255, .4); stroke: var(--cob-2); stroke-width: .25; }
.shotmap .m-h.goal { fill: #fff; } .shotmap .m-a.goal { fill: var(--cob); }
.hbars { display: grid; gap: 6px; } .hbar { display: grid; grid-template-columns: 140px minmax(0, 1fr) 48px; align-items: center; gap: 10px; font-size: 13px; }
.hbar-track { height: 8px; background: var(--s3); border-radius: 4px; overflow: hidden; } .hbar-fill { display: block; height: 100%; background: var(--cob); border-radius: 4px; }
.hbar-label { color: var(--mut); } .hbar-value { text-align: right; font-weight: 700; }

/* ============================== the Lab shell ======================================================= */
.lab { display: grid; grid-template-columns: 232px 288px minmax(0, 1fr); min-height: calc(100vh - var(--top)); }
.lab.closed { grid-template-columns: 232px 0 minmax(0, 1fr); }
.lab.panel { grid-template-columns: 232px 288px minmax(0, 1fr); }
.lab.panel.with-insp { grid-template-columns: 232px 288px minmax(0, 1fr) 340px; }
.lab-side { background: var(--s1); border-right: 1px solid var(--line); }
.lab-side .stick { position: sticky; top: var(--top); display: flex; flex-direction: column; gap: 2px; padding: 18px 14px 20px; max-height: calc(100vh - var(--top)); overflow: auto; }
.lab-side h4 { font: 700 11.5px var(--font); color: var(--faint); letter-spacing: 0; margin: 14px 10px 6px; } .lab-side h4:first-child { margin-top: 0; }
.lab-side a { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: 11px; font-size: 14px; font-weight: 600; color: var(--mut); transition: background .12s, color .12s; }
.lab-side a svg { width: 18px; height: 18px; flex: none; }
.lab-side a:hover { background: var(--s2); color: var(--text); }
.lab-side a[aria-current] { background: var(--cob); color: #fff; box-shadow: 0 6px 16px rgba(42, 80, 255, .3); }
.lab-side a.vl svg { color: var(--cob-2); } .lab-side a.vl[aria-current] svg { color: #fff; }
.lab-side .recent { display: grid; gap: 2px; } .lab-side .recent > span { padding: 4px 10px; font-size: 12.5px; line-height: 1.4; }
.lab-side .recent a { height: 34px; font-weight: 500; }
.lab-side .back { margin-top: auto; padding-top: 14px; font-size: 13px; color: var(--faint); }
.labhero { position: relative; overflow: hidden; background: linear-gradient(135deg, #2A50FF 0%, #1A2E8F 60%, #121B4F 100%); color: #fff; }
.labhero::before { content: ""; position: absolute; right: -120px; top: -160px; width: 520px; height: 520px; border-radius: 50%; background: rgba(255, 255, 255, .12); filter: blur(60px); }
.labhero .in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: end; padding: 38px var(--pad) 56px; }
.labhero .kicker { display: block; font: 700 13.5px var(--font); color: rgba(255, 255, 255, .72); margin-bottom: 10px; }
.labhero h1 { font-size: 34px; letter-spacing: -.03em; max-width: 18ch; line-height: 1.05; }
.labhero p { margin-top: 12px; max-width: 62ch; color: rgba(255, 255, 255, .78); font-size: 14.5px; line-height: 1.5; }
.labhero .tb-search.big { display: flex; height: 48px; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); color: #fff; }
.labhero .tb-search.big input { color: #fff; font-size: 15px; } .labhero .tb-search.big input::placeholder { color: rgba(255, 255, 255, .7); } .labhero .tb-search.big svg { color: rgba(255, 255, 255, .8); }
.lwk.lifted { margin-top: -30px; padding-top: 0; position: relative; z-index: 2; }
.lwk > a.card { border-radius: var(--r); padding: 16px 18px; }
.tools .tool.card { border-radius: var(--r); padding: 20px; }
.tool h3 { gap: 12px; } .tool h3 svg { width: 36px; height: 36px; padding: 9px; border-radius: 12px; background: var(--cob-soft); color: var(--cob-2); box-sizing: border-box; }
.tool.v h3 svg { background: rgba(255, 255, 255, .16); color: #fff; }
.boards .board.card { border-radius: var(--r); }
.lab-title h1, .lab-title h2 { font-size: 22px; }
@media (max-width: 1100px) { .lab, .lab.closed, .lab.panel, .lab.panel.with-insp { grid-template-columns: minmax(0, 1fr); } .lab-side, .lab-panel { display: none; } .lab-nav-phone { display: flex; gap: 6px; overflow-x: auto; padding: 10px var(--pad); scrollbar-width: none; } .labhero .in { grid-template-columns: 1fr; } }
.lab-ico { background: var(--s1); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 6px; }
.lab-ico a { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--mut); transition: background .12s, color .12s; }
.lab-ico a svg { width: 20px; height: 20px; }
.lab-ico a:hover { background: var(--s2); color: var(--text); }
.lab-ico a[aria-current] { background: var(--cob); color: #fff; box-shadow: 0 6px 16px rgba(42, 80, 255, .35); }
.lab-ico .sp { flex: 1; }
.lab-ico .tip { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--text); color: var(--bg); font-size: 12.5px; font-weight: 600; padding: 5px 9px; border-radius: 7px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 5; }
.lab-ico a:hover .tip, .lab-ico a:focus-visible .tip { opacity: 1; }
.lab-panel { background: var(--s1); border-right: 1px solid var(--line); overflow: hidden; }
.lab-panel .in { padding: 16px 16px 24px; }
.lab-panel h3 { font: 700 12px var(--font); color: var(--faint); margin: 0 0 8px; letter-spacing: 0; }
.fl { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 36px; font-size: 13.5px; }
.fl .k { color: var(--mut); }
.fl .dd, .fl .input { width: 100%; } .fl .dd-btn { width: 100%; justify-content: space-between; }
.lab-panel .hr { border-top: 1px solid var(--line); margin: 14px 0; }
.lab-panel .count { font-size: 13px; color: var(--faint); margin-top: 12px; } .lab-panel .count b { color: var(--text); }
.lab-main { min-width: 0; min-height: calc(100vh - var(--top)); }
.lab-bar { position: sticky; top: var(--top); z-index: 15; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 var(--pad); background: var(--glass); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.lab-bar h1 { font-size: 18px; white-space: nowrap; }
.lab-bar .path { font-size: 13px; color: var(--faint); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lab-bar .right { margin-left: auto; display: flex; gap: 8px; align-items: center; flex: none; }
.lab-canvas { padding: 0 0 56px; }
.lab-canvas .tw { overflow: auto; }
.lab-canvas table.t thead th { position: sticky; top: 0; z-index: 2; }
.lab-canvas table.t th.l.fix, .lab-canvas table.t td.l.fix { position: sticky; left: 0; background: var(--s1); z-index: 1; }
.lab-canvas table.t tr:hover td.fix { background: var(--s2); }
.lab-canvas table.t tr.on td { background: var(--cob-soft); }
.insp { position: sticky; top: var(--top); align-self: start; max-height: calc(100vh - var(--top)); background: var(--s1); border-left: 1px solid var(--line); overflow: auto; }
.insp .in { padding: 18px; }
.insp h2 { font-size: 22px; }
.insp .k6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 14px; }
.insp .k6 div { background: var(--s2); padding: 10px 12px; border-radius: 10px; }
.insp .k6 .big { font: 800 20px/1 var(--disp); font-variant-numeric: tabular-nums; } .insp .k6 .l { font-size: 11.5px; color: var(--mut); margin-top: 4px; }
.insp .acts { display: flex; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.lab-title { padding: var(--s-5) var(--pad) var(--s-2); }
.lab-title h1, .lab-title h2 { font-size: 26px; }
.lab-title p { color: var(--mut); margin-top: 6px; font-size: 14.5px; max-width: 72ch; line-height: 1.5; }
.lwk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); padding: var(--pad) var(--pad) 4px; }
.lwk > a { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px; display: grid; gap: 4px; align-content: start; transition: background .12s, transform .12s; }
.lwk > a:hover { background: var(--s2); transform: translateY(-1px); }
.lwk .big { font: 800 28px/1.1 var(--disp); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .lwk .l { font-size: 12.5px; color: var(--mut); } .lwk .big .u { font-size: .6em; }
.tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); padding: 8px var(--pad) 0; }
.tool { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; min-height: 160px; display: grid; align-content: start; gap: 8px; grid-template-rows: auto auto 1fr auto; transition: transform .12s, background .12s; }
.tool:hover { transform: translateY(-2px); background: var(--s2); }
.tool h3 { font-size: 17px; display: flex; align-items: center; gap: 10px; }
.tool h3 svg { width: 18px; height: 18px; color: var(--cob-2); }
.tool p { color: var(--mut); font-size: 13.5px; line-height: 1.45; }
.tool .ex { font-size: 12.5px; color: var(--faint); margin-top: auto; }
.tool.v { background: linear-gradient(145deg, #2A50FF, #1A2E8F 70%, #121B4F); color: #fff; border: 0; box-shadow: var(--lab-shadow); } .tool.v p, .tool.v .ex { color: rgba(255, 255, 255, .78); } .tool.v h3 svg { color: #fff; } .tool.v .rel .pt, .tool.v .rel .ln { fill: #fff; stroke: #fff; } .tool.v .rel .pt { stroke: none; } .tool.v .rel .dg, .tool.v .rel .g { stroke: rgba(255, 255, 255, .3); }
.boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--pad); padding: 0 var(--pad); }
.board .db-h { padding: 14px 18px 8px; }
.db-h { display: flex; align-items: baseline; gap: 10px; padding: 14px var(--pad) 8px; font-weight: 700; font-size: 15px; } .db-h .sub { font-size: 13px; color: var(--faint); font-weight: 500; } .db-h .right { margin-left: auto; display: flex; gap: 6px; }
.board .row { display: grid; grid-template-columns: 22px 24px minmax(0, 1fr) 64px; align-items: center; gap: 10px; height: 40px; padding: 0 18px; border-top: 1px solid var(--line); font-size: 14px; }
.board .row:hover { background: var(--s2); }
.board .row small { display: block; font-size: 12px; color: var(--faint); }
.board .row .n { text-align: right; font: 800 16px var(--disp); font-variant-numeric: tabular-nums; }
.cols-pick { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px var(--pad); border-bottom: 1px solid var(--line); background: var(--s1); align-items: center; }
.heat-lgd { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mut); white-space: nowrap; }
.heat-lgd i { width: 56px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, transparent, var(--cob-soft-2)); border: 1px solid var(--line); }
.ex-t th button { font: inherit; color: inherit; display: inline-flex; align-items: center; gap: 4px; }
.ex-t th[aria-sort="descending"] button::after { content: "▾"; font-size: 10px; } .ex-t th[aria-sort="ascending"] button::after { content: "▴"; font-size: 10px; }
.ex-t th[aria-sort="descending"], .ex-t th[aria-sort="ascending"] { color: var(--text); }
.ex-t td.k { font-weight: 700; } .ex-t td.top { color: var(--cob-2); font-weight: 700; }
.ex-t tbody tr { cursor: pointer; }
.ex-more { display: block; width: 100%; padding: 14px; text-align: center; font-weight: 600; color: var(--mut); border-top: 1px solid var(--line); } .ex-more:hover { background: var(--s2); }
.multi { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-3); padding: 8px var(--pad); }
.multi a { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px 10px; display: grid; gap: 6px; align-content: start; transition: transform .12s; }
.multi a:hover { transform: translateY(-2px); } .multi a.on { border-color: var(--cob); background: var(--cob-soft); }
.multi h4 { font: 700 13px/1.25 var(--font); min-height: 32px; letter-spacing: 0; } .multi .m { font-size: 12px; color: var(--faint); } .multi .m b { color: var(--cob-2); }
.fam-h { padding: 18px var(--pad) 6px; font: 700 14px var(--font); color: var(--mut); display: flex; gap: 10px; align-items: baseline; } .fam-h span { font-weight: 500; font-size: 12.5px; color: var(--faint); }
.lab-nav-phone { display: none; }
@media (min-width: 1101px) { .lab-nav-phone { display: none !important; } }

/* ============================== home blocks ========================================================= */
.fcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--s-4); }
.fcard { display: block; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-4); color: var(--text); transition: transform .15s, border-color .15s; }
.fcard:hover { transform: translateY(-2px); border-color: var(--cob-soft-2); }
.fcard.hidden { display: none; }
.fcard .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mut); font-weight: 600; } .fcard .top .team { gap: 6px; }
.fcard .row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 10px; font-weight: 600; font-size: 15px; color: var(--mut); min-height: 0; border: 0; }
.fcard .row.fav { color: var(--text); font-weight: 800; }
.fcard .row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcard .row .pc { font: 800 20px/1 var(--disp); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); } .fcard .row .pc .u { font-size: 12px; color: var(--mut); }
.fcard .row.a .pc { color: var(--cob-2); }
.fcard .strip { margin-top: 12px; }
.fcard .dr { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--mut); margin-top: 8px; } .fcard .dr b { color: var(--text); }
.nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.nums > * { display: block; background: var(--s1); padding: var(--s-4) var(--pad) 18px; color: var(--text); min-width: 0; } .nums a:hover { background: var(--s2); }
.nums b.n { font: 800 28px/1 var(--disp); letter-spacing: -.03em; display: block; font-variant-numeric: tabular-nums; }
.nums > * > span { display: block; margin-top: 7px; font-size: 13px; color: var(--mut); line-height: 1.4; } .nums span b { color: var(--text); }
.watch { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-4); }
.wp { display: grid; gap: 8px; align-content: start; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-4); color: var(--text); min-width: 0; transition: transform .15s, border-color .15s; }
.wp:hover { transform: translateY(-2px); border-color: var(--cob-soft-2); }
.wp .top { display: flex; justify-content: space-between; align-items: center; } .wp .top svg { width: 52px; height: 52px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .18)); }
.wp .top b { font: 800 32px/1 var(--disp); letter-spacing: -.03em; color: var(--cob-2); font-variant-numeric: tabular-nums; } .wp .top b .u { font-size: 16px; }
.wp .nm { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
.wp .mt { font-size: 12.5px; color: var(--mut); line-height: 1.35; } .wp .mt b { color: var(--text); font-weight: 600; }

/* ============================== stories, search, reading, legal, lock, groups ======================== */
.sform { position: relative; display: flex; gap: 8px; align-items: center; max-width: 640px; }
.sform .ic { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--faint); pointer-events: none; }
.sform .input { flex: 1; height: 46px; padding-left: 42px; font-size: 16px; border-radius: 14px; }
.sform .btn { height: 46px; border-radius: 14px; padding: 0 18px; }
.sform .suggest { top: calc(100% + 6px); right: 108px; }
.sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--gap); margin-top: var(--gap); }
.sgrid .card { margin: 0; }
.res .w-row .who > span { min-width: 0; } .res .w-row small { white-space: normal; }
.stories { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-4); }
.stories.small { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.story { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 14px; padding: var(--pad); border-radius: var(--r); background: var(--s1); border: 1px solid var(--line); color: var(--text); overflow: hidden; transition: transform .18s, border-color .18s; }
.story::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 70% at 100% 0%, var(--cob-soft), transparent 60%); opacity: 0; transition: opacity .25s; }
.story:hover { transform: translateY(-2px); border-color: var(--cob-soft-2); } .story:hover::before { opacity: 1; }
.story > * { position: relative; }
.story .fig { font: 800 52px/1 var(--disp); letter-spacing: -.04em; color: var(--cob-2); font-variant-numeric: tabular-nums; }
.stories.small .story .fig { font-size: 40px; }
.story .tx { display: grid; gap: 8px; align-content: start; }
.story h2 { font-size: 19px; line-height: 1.2; letter-spacing: -.02em; } .stories.small .story h2 { font-size: 16px; }
.story p { font-size: 14px; line-height: 1.5; color: var(--mut); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.story .rd { font-size: 13px; font-weight: 700; color: var(--cob-2); margin-top: 4px; }
.story.lead { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: none; align-items: center; gap: 28px; padding: 30px; }
.story.lead .fig { font-size: 112px; } .story.lead h2 { font-size: 28px; } .story.lead p { font-size: 16px; -webkit-line-clamp: 4; }
.reading { max-width: 860px; }
.reading .rh { padding: var(--s-3) 0 var(--s-4); display: grid; gap: 10px; }
.reading .rh .fig { font: 800 64px/1 var(--disp); letter-spacing: -.04em; color: var(--cob-2); }
.reading .rh h1 { font-size: 36px; letter-spacing: -.03em; line-height: 1.1; max-width: 22ch; }
.reading .rh .lede { font-size: 17px; line-height: 1.5; color: var(--mut); max-width: 68ch; }
.reading .prose p:first-child { font-size: 17px; }
.prose { padding: 10px 28px 28px; font-size: 15.5px; line-height: 1.62; }
.prose h2 { font-size: 22px; margin: 30px 0 10px; } .prose h2:first-child { margin-top: 16px; }
.prose h3 { font-size: 17px; margin: 22px 0 8px; }
.prose p { margin: 0 0 12px; max-width: 72ch; }
.prose ul, .prose ol { margin: 0 0 12px; padding-left: 22px; max-width: 72ch; } .prose li { margin: 4px 0; } .prose li::marker { color: var(--cob-2); font-weight: 700; }
.prose a { color: var(--cob-2); text-decoration: underline; text-decoration-color: var(--cob-soft-2); text-underline-offset: 3px; } .prose a:hover { text-decoration-color: var(--cob-2); }
.prose strong, .prose b { font-weight: 700; }
.prose code { font: 500 13.5px/1 ui-monospace, "Cascadia Mono", Menlo, monospace; background: var(--s2); padding: 2px 6px; border-radius: 6px; }
.prose table { width: 100%; border-collapse: collapse; margin: 10px 0 16px; font-size: 14px; }
.prose th, .prose td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; } .prose th { font-size: 12.5px; color: var(--faint); font-weight: 700; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
.prose blockquote { margin: 12px 0; padding: 10px 16px; border-left: 3px solid var(--cob); background: var(--s2); border-radius: 0 12px 12px 0; }
.prose dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 12px; } .prose dt { font-weight: 700; } .prose dd { margin: 0; }
mark.todo { background: var(--draw); color: #000; padding: 1px 6px; border-radius: 6px; font-weight: 600; }
.simple .card { padding: var(--pad); } .simple .card > h2 { margin-bottom: 10px; }
.simple p { color: var(--mut); font-size: 15px; line-height: 1.55; max-width: 72ch; } .simple p + p { margin-top: 8px; }
.simple a:not(.btn) { color: var(--cob-2); } .simple ul { padding-left: 20px; } .simple li { margin: 4px 0; }
.lock { padding: 10px var(--pad) var(--pad); }
.lock-in { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 16px; background: linear-gradient(135deg, var(--cob-soft), var(--s2)); border: 1px solid var(--cob-soft-2); overflow: hidden; }
.lock-in > svg { width: 26px; height: 26px; color: var(--cob-2); }
.lock-in h3 { font-size: 16px; } .lock-in p { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--mut); max-width: 60ch; }
.lock-in .acts { display: flex; gap: 8px; }
.card > .lock:first-child { padding-top: var(--pad); }
.groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-4) var(--gap); padding: 0 var(--pad) var(--pad); }
.groups > div { min-width: 0; }
.groups h4 { font: 700 12.5px var(--font); color: var(--faint); padding: 4px 0 6px; letter-spacing: 0; }
.groups .t { table-layout: fixed; }
.groups .t th:first-child, .groups .t td:first-child { width: 28px; }
.groups .t th:nth-child(n+3), .groups .t td:nth-child(n+3) { width: 40px; }
.groups .team span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================== track record ======================================================== */
.lrow { display: grid; grid-template-columns: minmax(0, 1fr) 96px 96px 150px 28px; gap: 12px; align-items: center; padding: var(--s-3) var(--pad); border-top: 1px solid var(--line); font-size: 14px; }
.lrow.head { padding: 8px var(--pad); font-size: 12px; font-weight: 700; color: var(--faint); border-top: 0; }
.lrow .n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .lrow .n.v { color: var(--cob-2); font-weight: 800; }
.lrow .nm { display: grid; gap: 2px; font-weight: 700; min-width: 0; } .lrow .nm small { font-size: 12.5px; font-weight: 500; color: var(--mut); }
.lx > summary { list-style: none; cursor: pointer; transition: background .15s; } .lx > summary::-webkit-details-marker { display: none; }
.lx > summary:hover, .lx[open] > summary { background: var(--s2); }
.lx > summary:focus-visible { outline: 2px solid var(--cob); outline-offset: -2px; }
.lx .chev { width: 18px; height: 18px; color: var(--faint); transition: transform .2s; justify-self: end; } .lx[open] .chev { transform: rotate(90deg); color: var(--cob-2); }
.lx-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; padding: 6px var(--pad) 18px; background: var(--s2); border-top: 1px solid var(--line); }
.lx-body > div:first-child { min-width: 0; overflow-x: auto; }
.lx-body .t { width: 100%; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--s1); }
.lx-chart { padding-top: 8px; } .lx-chart .chart { width: 100%; height: auto; }
.gapbar { position: relative; display: block; height: 8px; border-radius: 4px; background: var(--s3); overflow: hidden; }
.gapbar::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.gapbar i { position: absolute; top: 0; bottom: 0; border-radius: 4px; } .gapbar i.over { background: var(--cob); } .gapbar i.under { background: var(--loss); }

/* ============================== footer, phone bar =================================================== */
.ft { border-top: 1px solid var(--line); margin-top: var(--s-7); padding: var(--s-5) 0 var(--s-6); font-size: 13px; color: var(--mut); }
.ft .page { padding-bottom: 0; }
.ft-top { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; }
.ft-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; } .ft-social { display: flex; gap: 18px; margin-left: auto; }
.ft-note { margin-top: 16px; font-size: 12.5px; color: var(--faint); line-height: 1.5; }
.ft a:hover { color: var(--text); }
.bn { display: none; }

/* ============================== responsive ========================================================== */
@media (max-width: 1240px) {
  .insp { position: fixed; top: var(--top); right: 0; bottom: 0; width: 360px; z-index: 25; box-shadow: var(--shadow); max-height: none; }
  .lab:not(.with-insp) > .insp { display: none; }  /* an overlay here: only once a row is picked */
  .hub { grid-template-columns: minmax(0, 1fr) 320px; } .hub .rail { display: none; }
}
@media (max-width: 1100px) { .watch { grid-template-columns: repeat(3, 1fr); } .three, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } .hh-in { grid-template-columns: minmax(0, 1fr) 400px; gap: var(--s-6); } .hh-txt h1 { font-size: 52px; } }
@media (max-width: 960px) {
  .lab, .lab.with-insp, .lab.closed, .lab.panel, .lab.panel.with-insp { grid-template-columns: minmax(0, 1fr); }
  .lab-bar .path { display: none; }
  .hub, .two, .two.even { grid-template-columns: minmax(0, 1fr); }
  .lab-peek { width: min(580px, calc(100vw - 32px)); } .lab-peek .nums { grid-template-columns: 1fr 1fr; } .lab-peek .tools { grid-template-columns: 1fr; }
  .pitch-wrap, .lineups { grid-template-columns: 1fr; }
  .stats, .stats4, .stats.c3, .stats4.c3 { grid-template-columns: 1fr 1fr; } .lwk { grid-template-columns: 1fr 1fr; } .tools, .boards { grid-template-columns: 1fr; }
  .six { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  body { padding-bottom: 64px; }
  .page { padding-bottom: 48px; }
  .bn { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; top: auto; height: auto; display: grid; align-items: start; grid-template-columns: repeat(5, 1fr); background: var(--glass); backdrop-filter: blur(16px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .bn a { display: grid; justify-items: center; gap: 3px; padding: 9px 0 7px; font-size: 10.5px; font-weight: 600; color: var(--mut); }
  .bn a svg { width: 21px; height: 21px; } .bn a[aria-current] { color: var(--cob-2); }
  .tb-nav, .tb-search { display: none; } .tb-search-btn { display: inline-flex; }
  .lab, .lab.with-insp, .lab.closed { grid-template-columns: minmax(0, 1fr); }
  .lab-ico { display: none; } .insp { position: static; width: auto; border-left: 0; border-top: 1px solid var(--line); box-shadow: none; }
  .lab-nav-phone { display: flex; gap: 6px; overflow-x: auto; padding: 12px 16px 0; scrollbar-width: none; }
  .lab-bar { height: auto; min-height: 52px; flex-wrap: wrap; padding: 8px 16px; row-gap: 6px; } .lab-bar .right { margin-left: 0; flex-basis: 100%; overflow-x: auto; }
  .lab-cta-btn { height: 36px; padding: 0 12px; } .lab-cta-btn .lbl { display: none; }
  .lab-peek { position: fixed; top: var(--top); right: 8px; left: 8px; width: auto; }
  .dayhead { flex-wrap: wrap; gap: 4px 12px; padding-top: var(--s-5); } .dayhead h1 { font-size: 26px; } .dayhead .sub { flex-basis: 100%; } .dayhead .tools { flex-basis: 100%; margin-left: 0; }
  .sec { margin-top: var(--s-5); } .sec-h { flex-wrap: wrap; row-gap: 2px; } .sec-h h2 { white-space: nowrap; font-size: 20px; } .sec-h .sub { flex-basis: 100%; }
  .mr { grid-template-columns: 44px minmax(0, 1fr) 32px 96px; gap: 0 10px; min-height: 56px; } .mr .side { font-size: 14px; } .mr .peek { display: none; }
  .gh { flex-wrap: wrap; height: auto; min-height: 46px; row-gap: 2px; padding-top: 6px; padding-bottom: 6px; }
  .hero::before, .hero::after, .hh::before, .hh::after, .ehero::before { width: 320px; height: 320px; top: -80px; }
  .hero .meta { flex-wrap: wrap; row-gap: 4px; }
  .hero .sides { grid-template-columns: 1fr minmax(84px, auto) 1fr; gap: 8px; }
  .hero .side { flex-direction: column; align-items: flex-start; gap: 8px; } .hero .side.r { align-items: flex-end; }
  .hero .side .nm { font-size: 20px; } .hero .side .sub { font-size: 12px; } .hero .side .sub .fw { display: none; } .hero .side .mark { --s: 48px !important; }
  .ko .t, .ko .s { font-size: 40px; } .ko .l { font-size: 11.5px; }
  .vstrip .pcts b { font-size: 22px; } .vstrip .pcts span { font-size: 12px; }
  .eh { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); } .eh h1 { font-size: 28px; } .eh .kpis { grid-column: 1 / -1; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .eh .kpis > div { text-align: left; } .eh .kpis .big, .eh.plain .kpis .big { font-size: 22px; } .eh .kpis .l { margin-left: 0; }
  .eh.plain { grid-template-columns: 1fr; }
  .hh-in { grid-template-columns: 1fr; gap: var(--s-5); padding-top: var(--s-5); padding-bottom: var(--s-5); }
  .hh-txt h1 { font-size: 40px; } .hh-txt p { font-size: 15px; } .hh-card .ko { font-size: 36px; } .hh-card .p3 b { font-size: 26px; }
  .ch, .w-h { flex-wrap: wrap; } .ch .more, .w-h .more { margin-left: 0; flex-basis: 100%; }
  .hd, .vr { grid-template-columns: 110px minmax(0, 1fr) 60px; } .hd > :nth-child(4), .vr > :nth-child(4) { display: none; }
  .vr .p { font-size: 18px; }
  .nx { grid-template-columns: 100px 44px minmax(0, 1fr) 44px; gap: 10px; } .nx .v1, .nx .v2 { font-size: 17px; }
  .pw { grid-template-columns: 1fr; }
  .chip-p { width: 64px; } .chip-p .sh { width: 34px; height: 34px; } .chip-p b { font-size: 11px; max-width: 64px; }
  .okrow { grid-template-columns: minmax(0, 1fr) 60px 100px; } .xgrow { grid-template-columns: 90px 50px minmax(0, 1fr) 50px; }
  .grid6 { padding: 6px 12px 4px; } .grid6 .c { height: 30px; font-size: 11.5px; }
  .nav2 { grid-template-columns: 1fr; } .nav2 a.r { text-align: left; }
  .stats b, .stats4 b, .kv .big { font-size: 22px; } .six { grid-template-columns: repeat(3, 1fr); } .six .big { font-size: 19px; }
  .labw h3 { font-size: 20px; }
  .multi { grid-template-columns: 1fr 1fr; }
  .fcards { grid-template-columns: 1fr; } .nums { grid-template-columns: 1fr 1fr; } .watch { grid-template-columns: 1fr 1fr; }
  .three, .twoc, .twoc.wide, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .sform { flex-wrap: wrap; } .sform .input { min-width: 0; } .sform .suggest { right: 0; } .sgrid { grid-template-columns: 1fr; }
  .story.lead { grid-template-columns: 1fr; gap: 10px; padding: var(--pad); } .story.lead .fig { font-size: 72px; } .story.lead h2 { font-size: 22px; }
  .reading .rh h1 { font-size: 28px; } .prose { padding: 6px 18px 22px; font-size: 15px; }
  .lock { padding: 8px 12px 16px; } .lock-in { grid-template-columns: auto minmax(0, 1fr); } .lock-in .acts { grid-column: 1 / -1; }
  .lrow { grid-template-columns: minmax(0, 1fr) 64px 64px 24px; } .lrow .gapbar, .lrow.head > span:nth-child(4) { display: none; } .lx-body { grid-template-columns: 1fr; padding: 6px 12px 16px; }
  .groups { grid-template-columns: 1fr; }
}
.kv.c3, .six.c3, .nums.c3 { grid-template-columns: repeat(3, 1fr); } .kv.c4 { grid-template-columns: repeat(4, 1fr); } .kv.c5, .stats.c5 { grid-template-columns: repeat(5, 1fr); }
.card > .chips, .card > .tw + .chips { padding: 0 var(--pad) var(--pad); }
@media (max-width: 760px) { .kv.c3, .kv.c4, .kv.c5, .stats.c5 { grid-template-columns: 1fr 1fr; } }
/* the error page */
.errp { min-height: 60vh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; } .errp section { width: 100%; max-width: 520px; text-align: center; padding: var(--s-7) 0; }
.errp .strip { max-width: 100%; margin: 0 auto var(--s-5); } .errp h1 { font-size: 36px; margin-top: var(--s-2); } .errp p { margin-top: var(--s-3); color: var(--mut); line-height: 1.5; }
.errp .acts { display: flex; gap: 8px; justify-content: center; margin-top: var(--s-5); flex-wrap: wrap; } .errp form { margin-top: var(--s-4); display: flex; gap: 8px; justify-content: center; } .errp form .input { max-width: 300px; min-width: 0; flex: 1; } .errp .ref { font-size: 13px; margin-top: var(--s-5); }
@media (max-width: 760px) { .ch .tools, .w-h .tools { flex-basis: 100%; margin-left: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .ch .tools::-webkit-scrollbar { display: none; } .ch .tools > * { flex: none; } }

/* ============================== HOME, Cobalto ======================================================= */
.hhero { position: relative; overflow: hidden; margin: 0 calc(50% - 50vw); background: #2A50FF; color: #fff; }
.hhero .ph { position: absolute; inset: 0; background: url("/static/img/stadium-hero.webp") center 20% / cover no-repeat; mix-blend-mode: luminosity; opacity: .5; }
.hhero .shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28, 56, 200, .85) 0%, rgba(42, 80, 255, .35) 55%, rgba(28, 56, 200, .55) 100%), linear-gradient(180deg, transparent 60%, rgba(20, 40, 160, .55) 100%); }
.hhero .in { position: relative; max-width: var(--page); margin: 0 auto; padding: 64px var(--gut) 72px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; min-height: min(760px, calc(100svh - var(--top))); }
.hhero .in > * { animation: hup .6s cubic-bezier(.2, .7, .2, 1) both; } .hhero .in > :nth-child(2) { animation-delay: .12s; }
@keyframes hup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hkick { font: 600 14px/1.3 var(--font); color: rgba(255, 255, 255, .8); } .hkick b { color: #fff; font-weight: 700; } .hkick .vn { color: #fff; font-weight: 700; }
.hhero h1 { font-size: clamp(46px, 7vw, 104px); margin: 14px 0 16px; color: #fff; letter-spacing: -.015em; line-height: .98; font-weight: 800; }
.hhero .lead { font: 500 19px/1.5 var(--font); color: rgba(255, 255, 255, .88); max-width: 540px; margin: 0 0 26px; }
.hhero .acts { display: flex; gap: 10px; flex-wrap: wrap; }
.hbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 26px; border-radius: var(--pill); background: #fff; color: #0B0B0C; font: 700 16px var(--font); transition: transform .12s; } .hbtn:hover { transform: translateY(-1px); }
.hbtn.ghost { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.mcard { background: rgba(244, 244, 241, .88); color: #0B0B0C; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(226, 226, 221, .7); border-radius: var(--r); padding: 22px 30px 30px; }
.mcard .hkick { color: #5C5E65; text-align: center; margin-bottom: 10px; } .mcard .hkick b { color: #0B0B0C; }
.mcard .vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; text-align: center; gap: 10px; }
.mcard .vs .tm { display: grid; justify-items: center; gap: 12px; min-width: 0; } .mcard .vs .tm .mark { margin: 0 auto; }
.mcard .vs .tm .nm { font: 800 clamp(20px, 2.2vw, 28px) var(--disp); letter-spacing: -.015em; line-height: .98; color: #0B0B0C; } .mcard .vs .tm .nm.a { color: #2442D9; }
.mcard .vs .tm .place { margin-top: -8px; font: 500 13px/1.2 var(--font); color: #8A8C93; }
.mcard .vs .ko .n { font: 800 clamp(36px, 4vw, 52px)/.9 var(--disp); letter-spacing: -.02em; } .mcard .vs .ko .hkick { margin: 6px 0 0; text-align: center; }
.mcard .vbar { display: flex; gap: 8px; height: 22px; margin: 26px 0 16px; } .mcard .vbar i { display: block; border-radius: 99px; min-width: 6px; } .mcard .vbar .h { background: #0B0B0C; } .mcard .vbar .x { background: #C9CBD1; } .mcard .vbar .a { background: #2A50FF; }
.mcard .three3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; } .mcard .three3 > :nth-child(2) { text-align: center; } .mcard .three3 > :nth-child(3) { text-align: right; }
.mcard .three3 .n { font: 800 clamp(40px, 5vw, 64px)/.9 var(--disp); letter-spacing: -.02em; } .mcard .three3 .n .pc { font-size: .5em; font-weight: 700; margin-left: .06em; } .mcard .three3 .n.m { color: #5C5E65; } .mcard .three3 .n.a { color: #2442D9; }
.mcard .three3 .lb { font: 600 14px var(--font); color: #5C5E65; margin-top: 6px; line-height: 1.25; }
.mcard .facts { margin-top: 20px; padding-top: 16px; border-top: 1px solid #E2E2DD; font: 500 14px var(--font); color: #8A8C93; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .mcard .facts b { color: #0B0B0C; }
.mcard .powered { display: block; width: fit-content; margin: 22px 0 0; font: 500 13px/1.2 var(--font); color: #8A8C93; } .mcard .powered b { font-weight: 700; color: #2442D9; }
.hstrip { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.hdays { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--pill); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.hdays a { padding: 8px 16px; border-radius: var(--pill); font: 700 13px var(--font); color: var(--mut); display: inline-flex; gap: 8px; align-items: baseline; white-space: nowrap; } .hdays a b { font: 800 16px var(--disp); color: var(--text); } .hdays a small { font-size: 11.5px; font-weight: 600; }
.hdays a[aria-current] { background: var(--cob); color: #DCE3FF; } .hdays a[aria-current] b { color: #fff; }
.hstrip .chips { margin-left: auto; } .hstrip .chip img, .hstrip .chip .mark { width: 16px; height: 16px; --s: 16px; }
.fcards { grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fcard { background: var(--card); backdrop-filter: blur(16px); border-radius: var(--r); box-shadow: var(--shadow); padding: 16px 20px 14px; }
.fcard .top { font-weight: 700; } .fcard .top .team { gap: 8px; } .fcard .top .t { color: var(--text); }
.fcard .dr { position: relative; height: 22px; margin-top: 9px; }
.fcard .dr > span { position: absolute; inset: 0; display: flex; justify-content: space-between; transition: opacity .18s, transform .18s; }
.fcard .dr .x { opacity: 0; transform: translateY(6px); color: var(--cob-2); } .fcard:hover .dr .d0 { opacity: 0; transform: translateY(-6px); } .fcard:hover .dr .x { opacity: 1; transform: none; }
.home3 { display: grid; grid-template-columns: minmax(0, 1fr) 340px 320px; gap: 20px; margin-top: 48px; align-items: stretch; }
.home3 > .card { display: flex; flex-direction: column; margin: 0 !important; } .home3 > .card > .cf { margin-top: auto; }
.home3 .t td { height: 48px; } .home3 .t th, .home3 .t td { padding-left: 8px; padding-right: 8px; } .home3 .t th:first-child, .home3 .t td:first-child { padding-left: var(--pad); } .home3 .t th:last-child, .home3 .t td:last-child { padding-right: var(--pad); }
.wl a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px var(--pad); border-top: 1px solid var(--line); }
.wl a:hover { background: var(--s2); } .wl .sh svg { width: 44px; height: 44px; } .wl .nm { font: 800 15px var(--font); } .wl small { display: block; color: var(--mut); font-size: 12px; font-weight: 600; margin-top: 2px; }
.wl b { font: 800 24px var(--disp); color: var(--cob-2); letter-spacing: -.03em; } .wl b .u { font-size: 12px; color: var(--mut); }
.rec { padding: 0 var(--pad) var(--pad); } .rec .big { font: 800 72px/1 var(--disp); letter-spacing: -.05em; color: var(--cob-2); } .rec .big .u { font-size: 26px; color: var(--text); }
.rec p { color: var(--mut); margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; font-weight: 500; }
.rec .rel { margin-top: 14px; max-width: 220px; margin-left: auto; margin-right: auto; display: block; }
.rec .two2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; } .rec .two2 div { padding: 10px 12px; border-radius: 14px; background: var(--cob-soft); } .rec .two2 b { display: block; font: 800 20px var(--disp); } .rec .two2 span { font-size: 11.5px; color: var(--mut); font-weight: 600; }
.wk { display: grid; grid-template-columns: repeat(6, 1fr); } .wk > div { padding: 18px var(--pad); border-left: 1px solid var(--line); min-width: 0; } .wk > div:first-child { border-left: 0; }
.wk b.n { display: block; font: 800 36px/1 var(--disp); letter-spacing: -.04em; } .wk > div > span { display: block; font-size: 12.5px; color: var(--mut); margin-top: 8px; line-height: 1.4; font-weight: 600; } .wk span em { font-style: normal; color: var(--text); }
.race5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items: stretch; } .race5 > *, .fcards > *, .home3 > *, .wk > * { margin-top: 0 !important; }
.race { padding: 16px 18px; color: var(--text); } .race .lg { display: flex; align-items: center; gap: 8px; font: 700 12.5px var(--font); color: var(--mut); }
.race .tm { display: flex; align-items: center; gap: 10px; margin-top: 14px; font: 800 14.5px/1.15 var(--font); min-width: 0; } .race .tm .nm { min-width: 0; flex: 1; } .race .tm b { margin-left: auto; font: 800 24px var(--disp); color: var(--cob-2); letter-spacing: -.03em; }
.race i { display: block; height: 8px; border-radius: 4px; background: var(--s2); margin-top: 12px; overflow: hidden; } .race i b { display: block; height: 100%; border-radius: 4px; background: var(--cob); }
.race small { display: block; margin-top: 8px; font-size: 12px; color: var(--mut); font-weight: 600; }
.labwide { margin-top: 48px; padding: 36px 40px; border-radius: 28px; background: linear-gradient(135deg, var(--cob), #1A2E8F 70%, #121B4F); color: #fff; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; box-shadow: 0 24px 60px rgba(42, 80, 255, .32); }
.labwide h3 { font-size: 36px; letter-spacing: -.035em; } .labwide p { margin: 10px 0 0; color: rgba(255, 255, 255, .78); font-size: 15px; max-width: 60ch; font-weight: 500; line-height: 1.55; }
.labwide .n4 { display: flex; gap: 32px; margin-top: 22px; flex-wrap: wrap; } .labwide .n4 b { display: block; font: 800 30px/1 var(--disp); letter-spacing: -.03em; } .labwide .n4 span { font-size: 12.5px; color: rgba(255, 255, 255, .7); font-weight: 600; }
.labwide .go { height: 52px; padding: 0 26px; display: inline-flex; align-items: center; gap: 8px; border-radius: var(--pill); background: #fff; color: var(--cob-2); font: 800 15px var(--font); white-space: nowrap; }
@media (max-width: 1100px) { .home3 { grid-template-columns: 1fr 1fr; } .race5 { grid-template-columns: repeat(3, 1fr); } .wk { grid-template-columns: repeat(3, 1fr); } .wk > div:nth-child(4) { border-left: 0; } .wk > div:nth-child(n+4) { border-top: 1px solid var(--line); } .fcards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .hhero .in { grid-template-columns: 1fr; gap: 28px; padding-top: 32px; padding-bottom: 36px; min-height: 0; } .hhero h1 { margin: 10px 0 12px; } .hhero .lead { font-size: 15px; margin-bottom: 18px; } .hbtn { min-height: 44px; padding: 0 18px; font-size: 14px; }
  .mcard { padding: 18px 18px 22px; } .mcard .vs .tm .mark { --s: 56px !important; } .mcard .vs .tm .nm { font-size: 17px; } .mcard .vs .ko .n { font-size: 30px; } .mcard .three3 .n { font-size: 32px; }
  .hstrip .chips { margin-left: 0; } .hdays { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .fcards { grid-template-columns: 1fr; } .home3, .race5 { grid-template-columns: 1fr; } .wk { grid-template-columns: 1fr 1fr; } .wk > div { border-left: 0; border-top: 1px solid var(--line); } .wk > div:nth-child(-n+2) { border-top: 0; } .wk > div:nth-child(2n) { border-left: 1px solid var(--line); }
  .labwide { grid-template-columns: 1fr; padding: 24px; } .labwide h3 { font-size: 26px; }
}
/* the matches page: a section of cards per competition */
.lg-sec { margin-top: var(--s-6); } .lg-sec.hidden { display: none; } .lg-sec:first-child { margin-top: var(--s-4); }
.lg-h { padding-bottom: var(--s-3); } .lg-h h2 { font-size: 24px; } .lg-h h2 a:hover { color: var(--cob-2); }
.fsub { grid-column: 1 / -1; font: 700 12.5px var(--font); color: var(--faint); padding: 6px 4px 0; }
.hdays a.off { opacity: .45; }
.dayhead .tools .btn { height: 42px; }
.lgcards .ch { padding-bottom: var(--s-2); flex-wrap: nowrap; } .lgcards .ch h2 { font-size: 17px; white-space: nowrap; } .lgcards .ch .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lgcards .kv { grid-template-columns: 1fr; gap: 0; } .lgcards .kv > div { display: flex; align-items: baseline; gap: 10px; padding: 10px var(--pad); border-top: 1px solid var(--line); } .lgcards .kv .big { font-size: 18px !important; } .lgcards .kv .l { margin: 0; font-size: 13px; }
@media (max-width: 1100px) { .lgcards { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { .lgcards { grid-template-columns: 1fr; } }

/* ============================== leader tiles, team tiles, control rows (Teams, Players) ================== */
.ltiles { margin-top: 0; }
.ltile { padding: 14px 16px 10px; }
.ltile .lt-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ltile .lt-h .k { font: 700 12.5px var(--font); color: var(--mut); } .ltile .lt-h .sh svg { width: 40px; height: 40px; }
.ltile .lt-big { display: block; margin-top: 6px; } .ltile .lt-big b { display: block; font: 800 34px/1 var(--disp); letter-spacing: -.03em; } .ltile .lt-big b small { font-size: 14px; color: var(--mut); } .ltile .lt-big span { display: block; font-size: 12.5px; color: var(--mut); margin-top: 4px; font-weight: 600; }
.ltile .lt-rows { list-style: none; margin: 12px -16px 0; padding: 0; border-top: 1px solid var(--line); }
.ltile .lt-rows a { display: grid; grid-template-columns: 18px 20px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 16px; font-size: 13.5px; font-weight: 600; } .ltile .lt-rows a:hover { background: var(--s2); }
.ltile .lt-rows .pos { color: var(--faint); font-size: 12px; } .ltile .lt-rows .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ltile .lt-rows b { font: 800 14px var(--disp); }
.lgpick { margin: var(--s-5) 0 var(--s-4); }
.lg-block.hidden { display: none; }
.tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tgrid.small { grid-template-columns: repeat(4, 1fr); }
.ttile { display: grid; grid-template-columns: 26px 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px 12px 14px; box-shadow: inset 4px 0 0 var(--zc, transparent), var(--shadow); transition: transform .15s, border-color .15s; }
.ttile:hover { transform: translateY(-2px); border-color: var(--cob-soft-2); }
.ttile .pos { font: 800 15px var(--disp); color: var(--faint); text-align: center; }
.ttile .who { min-width: 0; } .ttile .who b { display: block; font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ttile .who small { display: block; color: var(--mut); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.ttile .pts { text-align: right; } .ttile .pts b { font: 800 22px/1 var(--disp); letter-spacing: -.02em; } .ttile .pts small { display: block; font-size: 11px; color: var(--mut); font-weight: 600; }
.ttile .fm { grid-column: 1 / -1; padding-top: 2px; }
.tgrid.small .ttile { grid-template-columns: 28px minmax(0, 1fr); }
.lg-block .lgd-t { border-top: 0; padding-left: 4px; }
.ctl { display: grid; gap: 8px; padding: 0 var(--pad) var(--s-4); border-bottom: 1px solid var(--line); }
.ctl .chips .chip { height: 32px; } .ctl .chips .chip .mark { --s: 16px; }
.sub-row { display: block; color: var(--faint); font-size: 12.5px; font-weight: 500; }
@media (max-width: 1100px) { .tgrid { grid-template-columns: 1fr 1fr; } .tgrid.small { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 760px) { .tgrid, .tgrid.small { grid-template-columns: 1fr; } .ltile .lt-big b { font-size: 28px; } .dayhead .tools .tb-search { display: flex; width: 100% !important; } }

/* the landscape pitch: the home side attacks to the right */
.pitch-heads { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 8px 2px; font-weight: 700; font-size: 14.5px; }
.pitch-heads .ph-side { display: inline-flex; align-items: center; gap: 8px; } .pitch-heads .ph-side.r { justify-content: flex-end; } .pitch-heads .g3 { font-weight: 500; }
.pitchv.pitchh { aspect-ratio: 105 / 68; background: radial-gradient(60% 120% at 0% 50%, var(--pitch-a), var(--pitch-b) 60%, var(--pitch-c)); }
.pitch-wrap.h { grid-template-columns: minmax(0, 1fr); }
.pitch-wrap.h .bench.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; padding-top: 6px; }
.pitch-wrap.h .bench.two-col h4:first-child { margin-top: 10px; }
.pitch-wrap.h .bench.two-col > p { grid-column: 1 / -1; }
.t.stakes th { font-size: 11px; } .t.stakes td { height: 34px; font-size: 13px; } .t.stakes tr.st-team td { background: var(--s2); font-weight: 700; height: 36px; } .t.stakes tr.st-team .mark { vertical-align: -4px; }
@media (max-width: 760px) { .pitch-wrap.h .bench.two-col { grid-template-columns: 1fr; } }

/* a wide match row: home on the left, score in the middle, away on the right */
.mr.wide { grid-template-columns: 84px minmax(0, 1fr) 84px minmax(0, 1fr) auto; min-height: 54px; }
.mr.wide .sides { display: contents; }
.mr.wide .when { grid-column: 1; grid-row: 1; }
.mr.wide .side:first-child { grid-column: 2; grid-row: 1; flex-direction: row-reverse; text-align: right; }
.mr.wide .side:last-child { grid-column: 4; grid-row: 1; }
.mr.wide .goals { grid-column: 3; grid-row: 1; display: flex; justify-content: center; align-items: center; gap: 0; font-size: 17px; }
.mr.wide .goals span { min-height: 0; } .mr.wide .goals span:first-child::after { content: "–"; margin: 0 5px; color: var(--faint); font-weight: 500; }
.mr.wide .vesta { grid-column: 5; grid-row: 1; width: 132px; }
.mr.wide .ctx { grid-column: 5; grid-row: 1; text-align: right; }
.mr.wide .vesta + .ctx { grid-column: 1 / -1; grid-row: 2; text-align: left; }
.mr.wide .peek { right: auto; left: 50%; transform: translateX(-50%); }
@media (max-width: 760px) { .mr.wide { grid-template-columns: 56px minmax(0, 1fr) 40px 0; } .mr.wide .sides { display: grid; grid-column: 2; grid-row: 1; } .mr.wide .side:first-child, .mr.wide .side:last-child { grid-column: auto; grid-row: auto; flex-direction: row; text-align: left; } .mr.wide .goals { grid-column: 3; display: grid; gap: 5px; font-size: 15px; } .mr.wide .goals span:first-child::after { content: none; } .mr.wide .vesta, .mr.wide .ctx { grid-column: 2 / -1; grid-row: 2; width: auto; text-align: left; } }
.grid-2 + .card, .grid-3 + .card, .grid-4 + .card, .grid-2 + .w, .card + .grid-2, .card + .grid-3, .grid-2 + .grid-2, .three + .card, .card + .three, .twoc + .card, .card + .twoc { margin-top: var(--gap); }
.grid-2 .mr.wide, .two > aside .mr.wide { grid-template-columns: 64px minmax(0, 1fr) 64px minmax(0, 1fr) auto; }
.grid-2 .mr.wide .ctx { font-size: 11px; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-2 .mr.wide .side { font-size: 14px; }

/* insights: the goal-minute bands and the streak numbers */
.bands { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; height: 150px; padding: var(--s-4) var(--pad) var(--s-3); border-bottom: 1px solid var(--line); }
.bands .bd { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.bands .bv { font: 800 13px var(--disp); color: var(--mut); } .bands .bb { display: block; width: 100%; max-width: 72px; min-height: 3px; border-radius: 8px 8px 3px 3px; background: var(--cob-soft-2); } .bands .bb.top { background: var(--cob); }
.bands .bl { font-size: 11.5px; color: var(--faint); font-weight: 600; white-space: nowrap; }
.grid-2.inner { gap: 0; } .grid-2.inner > div { min-width: 0; } .grid-2.inner > div + div { border-left: 1px solid var(--line); }
.t .sn { font: 800 15px var(--disp); margin-right: 6px; }
.w-row .who .fn { width: 56px; }
@media (max-width: 760px) { .grid-2.inner > div + div { border-left: 0; border-top: 1px solid var(--line); } .bands { height: 120px; gap: 4px; } }

/* player: the bio tiles in the hero, the strip of the last matches, the percentile blocks, result pills */
.eh .bio { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 14px; }
.eh .bio div b { display: block; font: 800 17px/1.1 var(--disp); letter-spacing: -.02em; } .eh .bio div span { display: block; font-size: 12px; color: var(--mut); margin-top: 3px; }
.mstrip { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; height: 70px; align-items: end; padding: 14px var(--pad) 6px; }
.mstrip a { position: relative; display: grid; grid-template-rows: 1fr auto; height: 100%; align-items: end; justify-items: center; gap: 4px; }
.mstrip a i { display: block; width: 100%; max-width: 26px; background: var(--s3); border-radius: 4px 4px 2px 2px; min-height: 2px; } .mstrip a i.g { background: var(--cob); } .mstrip a i.a { background: var(--cob-soft-2); }
.mstrip a b { position: absolute; top: -2px; left: 50%; transform: translateX(-50%); font: 800 11px var(--disp); color: var(--cob-2); }
.mstrip a small { width: 6px; height: 6px; border-radius: 50%; background: var(--s3); } .mstrip a small.w { background: var(--win); } .mstrip a small.l { background: var(--loss); }
.mstrip a:hover i { filter: brightness(.9); }
.pblocks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; padding: 4px var(--pad) var(--s-4); }
.pblock h4 { font: 700 13px var(--font); color: var(--mut); margin: 14px 0 4px; letter-spacing: 0; }
.pr .bar i.hi { background: var(--win); } .pr .bar i.lo { background: #E8862A; }
.rp { display: inline-block; min-width: 38px; text-align: center; padding: 1px 7px; border-radius: 7px; font-weight: 800; background: var(--s3); }
.rp.w { background: var(--win); color: #fff; } .rp.l { background: var(--loss); color: #fff; }
@media (max-width: 760px) { .pblocks { grid-template-columns: 1fr; } .mstrip { gap: 2px; } }

/* team: form pills, goal-margin bars, the three boards, the table around the team */
.topstrip > .card { min-height: 100%; }
.fpills { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 6px var(--pad) var(--s-4); }
.fpills .fp { display: grid; justify-items: center; gap: 7px; padding: 10px 4px 8px; border-radius: 14px; transition: background .12s; } .fpills .fp:hover { background: var(--s2); }
.fpills .sc { min-width: 48px; text-align: center; padding: 4px 8px; border-radius: 8px; font: 800 15px var(--disp); background: var(--s3); font-variant-numeric: tabular-nums; }
.fpills .sc.w { background: var(--win); color: #fff; } .fpills .sc.l { background: var(--loss); color: #fff; }
.fpills small { font-size: 11px; color: var(--faint); font-weight: 600; }
.gdbars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 10px var(--pad) 12px; border-bottom: 1px solid var(--line); }
.gdbars a { display: grid; grid-template-rows: 44px 44px auto; justify-items: center; gap: 0; }
.gdbars .up, .gdbars .dn { display: flex; width: 100%; max-width: 30px; } .gdbars .up { align-items: flex-end; } .gdbars .dn { align-items: flex-start; border-top: 1px solid var(--line); }
.gdbars i { display: block; width: 100%; border-radius: 4px; } .gdbars i.w { background: var(--win); border-radius: 4px 4px 0 0; } .gdbars i.l { background: var(--loss); border-radius: 0 0 4px 4px; } .gdbars i.d { height: 4px; background: var(--s4); margin-bottom: -2px; }
.gdbars .mark, .gdbars svg { margin-top: 6px; }
.boards3 .ltile .lt-rows a { grid-template-columns: 18px 0 minmax(0, 1fr) auto; }
.t tr.gap td { text-align: center; color: var(--faint); height: 22px; font-size: 12px; letter-spacing: 2px; }
.t tr.me td { background: var(--cob-soft); font-weight: 700; }
@media (max-width: 760px) { .fpills .sc { min-width: 40px; font-size: 13px; } }

/* Vesta: the band on its pages */
.eh .lead { margin-top: 12px; max-width: 62ch; color: var(--mut); font-size: 15px; line-height: 1.5; }
.vhero { --glow: .45; }
.ehero.vhero::before { background: var(--c1); }
.lx .lx-chart .rel { width: 100%; height: auto; }
/* grids of cards never stagger */
.tools > *, .boards > *, .topstrip > *, .boards3 > * { margin-top: 0 !important; }
.tool h3 svg { stroke: var(--cob-2); } .tool.v h3 svg { stroke: #fff; }
.topstrip { align-items: stretch; } .topstrip > .card { display: flex; flex-direction: column; } .topstrip .ch h2 { white-space: nowrap; }
.topstrip .cb { flex: 1; display: flex; flex-direction: column; justify-content: center; } .topstrip .fcard { border: 0; box-shadow: none; padding: 0; background: transparent; } .topstrip .fcard:hover { transform: none; }
.gdbars a { grid-template-rows: 36px 36px auto; }
.tool h3 svg { width: 36px; height: 36px; padding: 9px; }

/* the tooltip (app.js): dark on the light theme, light on the dark one */
.tipbox { position: fixed; left: 0; top: 0; z-index: 200; max-width: 280px; padding: 8px 12px 9px; border-radius: 12px; background: #0B0B0C; color: #fff; font: 500 12.5px/1.35 var(--font); box-shadow: 0 12px 30px rgba(0, 0, 0, .24); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .1s, transform .1s; }
.tipbox.on { opacity: 1; transform: none; }
.tipbox b { display: block; font: 800 18px/1.1 var(--disp); letter-spacing: -.02em; margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.tipbox span { display: block; font-weight: 600; }
.tipbox small { display: block; color: rgba(255, 255, 255, .66); font-size: 11.5px; margin-top: 3px; }
.tipbox::after { content: ""; position: absolute; left: var(--ax, 50%); bottom: -5px; width: 10px; height: 10px; background: inherit; border-radius: 2px; transform: translateX(-50%) rotate(45deg); }
.tipbox.below::after { bottom: auto; top: -5px; }
:root[data-theme="dark"] .tipbox { background: #F4F4F1; color: #0B0B0C; } :root[data-theme="dark"] .tipbox small { color: rgba(11, 11, 12, .6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tipbox { background: #F4F4F1; color: #0B0B0C; } :root:not([data-theme="light"]) .tipbox small { color: rgba(11, 11, 12, .6); } }
/* what a tooltip hangs on: a bigger target, and the piece under the pointer stands out */
.strip i, .mcard .vbar i { position: relative; } .strip i::before, .mcard .vbar i::before { content: ""; position: absolute; inset: -8px -1px; }
.strip:hover i, .mcard .vbar:hover i { opacity: .45; transition: opacity .12s; } .strip i.tip-on, .mcard .vbar i.tip-on { opacity: 1; }
.vr .bar[data-tip], .pr .bar[data-tip], .hbar-track[data-tip] { position: relative; overflow: visible; } .vr .bar[data-tip]::before, .pr .bar[data-tip]::before, .hbar-track[data-tip]::before { content: ""; position: absolute; inset: -9px 0; }
.vr .bar i, .pr .bar i, .hbar-fill { transition: filter .12s; } .vr .bar.tip-on i, .pr .bar.tip-on i, .hbar-track.tip-on .hbar-fill { filter: brightness(1.12) saturate(1.2); }
.dial[data-tip]::before { content: ""; position: absolute; inset: -6px 0; } .dial.tip-on .band { filter: brightness(.94); } .dial.tip-on .mark { transform: scaleY(1.25); }
.posb span.tip-on i, .bands .bd.tip-on .bb, .mstrip a.tip-on i, .gdbars a.tip-on i { filter: brightness(.88); }
.gapbar[data-tip]::after { content: ""; position: absolute; inset: -8px 0; } .gapbar { overflow: visible; }
.chart .hp .hit { fill: transparent; } .chart .hp .hl { stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; } .chart .hp .hd { opacity: 0; }
.chart .hp.tip-on .hl, .chart .hp.tip-on .hd { opacity: 1; }
.chart rect.tip-on, .chart circle.tip-on { filter: brightness(.85); }

/* Ligue 1's silver mark is too pale at small sizes on a light page */
img.logo[src$="/leagues/L1.webp"] { filter: brightness(.5) contrast(1.3); }

/* the second pass of details (8 Oct) */
.ch h2, .w-h h2 { white-space: nowrap; }
.nav2 { margin-top: var(--gap); }
.pitch-wrap.h .bench.two-col { grid-template-columns: 1fr 1fr; gap: 0 28px; }
.bench .bt { min-width: 0; } .bench .bt h4 { display: flex; align-items: center; gap: 7px; }
.pitch-wrap.h .bench.two-col > p { margin-top: 12px; }
.pitchh .chip-p { width: 100px; } .pitchh .chip-p b { max-width: 100px; }
.pcard .who small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard .who { min-width: 0; }
.t .thm { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }

.topstrip .fpills { flex: 1; align-content: center; }
.topstrip .fcard .top { display: none; } .topstrip .fcard .row:first-of-type { margin-top: 0; }
.lgd .ln-pts { width: 18px; height: 3px; border-radius: 2px; background: var(--text); vertical-align: 3px; } .lgd .ln-xp { width: 18px; height: 0; border-top: 3px dashed var(--cob); vertical-align: 3px; }

.lgd .sq { width: 10px; height: 10px; border-radius: 3px; } .lgd .sq.c-goals { background: var(--cob); } .lgd .sq.c-xg { background: var(--s4); }
.pblocks .pr { grid-template-columns: minmax(0, 1fr) 46px minmax(90px, 1.1fr) 30px; }
.pr .lb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pblock h4 { margin-top: 20px; } .pblock:nth-child(-n+2) h4 { margin-top: 12px; }
.w-row .who > .g3:first-child { white-space: nowrap; }

/* third pass (8 Oct): grids never add the sibling margins of a column */
:where(.tgrid, .ltiles, .lgcards, .tools, .boards, .boards3, .topstrip, .grid-2, .grid-3, .grid-4, .three, .twoc, .fcards, .race5, .home3, .wk, .lwk, .pw, .multi, .stories, .nav2) > * { margin-top: 0 !important; }
/* cards side by side are as tall as each other, their foot at the bottom */
.grid-2, .grid-3, .grid-4, .twoc { align-items: stretch; }
:where(.grid-2, .grid-3, .grid-4, .twoc) > .card { display: flex; flex-direction: column; }
:where(.grid-2, .grid-3, .grid-4, .twoc) > .card > .cf, :where(.grid-2, .grid-3, .grid-4, .twoc) > .card > .lgd-t { margin-top: auto; }
.grid-2.inner { align-items: stretch; }
/* the result colours of the small pills */
.fpills .sc.r-w, .rp.r-w { background: var(--win); color: #fff; } .fpills .sc.r-l, .rp.r-l { background: var(--loss); color: #fff; }
.mstrip a small.r-w { background: var(--win); } .mstrip a small.r-l { background: var(--loss); }
/* a wide row: the competition under the score when it is not the match's own */
.mr.wide .ctx { grid-column: 2 / 5; grid-row: 2; text-align: center; font-size: 11.5px; color: var(--faint); margin-top: -4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr.wide .vesta + .ctx { grid-column: 2 / 5; text-align: center; }
.grid-2 .mr.wide { grid-template-columns: 58px minmax(0, 1fr) 58px minmax(0, 1fr); } .grid-2 .mr.wide .vesta { display: none; }
/* tables whose cells may wrap */
.t.wrap td { white-space: normal; line-height: 1.35; padding-top: 8px; padding-bottom: 8px; height: auto; }
/* the unit after a number is never smaller than 10.5px */
.u { font-size: max(.6em, 10.5px); }
.fcard .row { gap: 8px; }
.tools, .boards { gap: 16px; }
.posb b { font-size: 10.5px; }

/* phone (fourth pass): match rows keep the names, the bench in one column, card heads wrap */
@media (max-width: 760px) {
  .mr { grid-template-columns: 46px minmax(0, 1fr) 26px 92px; gap: 0 10px; padding-left: 14px; padding-right: 14px; }
  .mr .side { font-size: 14px; gap: 8px; } .mr .vesta .p3 { font-size: 11px; }
  .mr.wide, .grid-2 .mr.wide { grid-template-columns: 46px minmax(0, 1fr) 30px; }
  .pitch-wrap.h .bench.two-col { grid-template-columns: 1fr; }
  .ch { flex-wrap: wrap; row-gap: 6px; } .ch .tools, .ch > span:last-child { margin-left: 0; }
  .lgcards .ch { flex-wrap: wrap; } .lgcards .ch .sub { white-space: normal; }
  .ft-nav a, .ft-social a { display: inline-block; padding: 6px 0; }
  .bands .bl { font-size: 10.5px; } .bands { gap: 4px; }
}

.only-narrow { display: none; }
@media (max-width: 760px) { .only-wide { display: none; } .only-narrow { display: block; } .mr.wide .ctx, .mr.wide .vesta + .ctx { grid-column: 2 / -1; } }

/* names never take the tabular figures of the table cells ("M.Gladbach", "St.-Gilloise") */
.t .team > span, .t td.l a, .w-row .who > span { font-variant-numeric: normal; font-feature-settings: normal; }
.cupcards .ch { padding-bottom: var(--s-3); } .cupcards .t tbody tr:first-child td { border-top: 1px solid var(--line); }
.natlist { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; padding: 6px 0; } .natlist > a:nth-child(even) { border-left: 1px solid var(--line); }
@media (max-width: 760px) { .natlist { grid-template-columns: 1fr; } .natlist > a:nth-child(even) { border-left: 0; } }
.t td.l, .t th.l { font-variant-numeric: normal; } .t td.l.pos { font-variant-numeric: tabular-nums; }

.evh { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: 12px; padding: 0 var(--pad) 10px; font-weight: 700; font-size: 14px; }
.evh .l { display: flex; justify-content: flex-end; align-items: center; gap: 8px; } .evh .r { display: flex; align-items: center; gap: 8px; }
.ev.ht + .ev { border-top: 0; }

.grid-2 > :only-child, .grid-3 > :only-child { grid-column: 1 / -1; }

.bench .bt { display: block; padding: 0; border-top: 0; }
.ft-bottom { display: flex; align-items: baseline; gap: 12px 28px; margin-top: 16px; flex-wrap: wrap; } .ft-bottom .ft-note { margin-top: 0; flex: 1; min-width: 280px; } .ft-social { margin-left: 0; }

@media (max-width: 760px) { .pcard .who small { white-space: normal; overflow: visible; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .pitchv:not(.pitchh) .chip-p { width: 62px; } .pitchv:not(.pitchh) .chip-p b { max-width: 62px; font-size: 10.5px; } .pitchv:not(.pitchh) .chip-p .sh { width: 30px; height: 30px; } }

.mr .nm .nshort { display: none; }
@media (max-width: 760px) { .mr .nm .nfull { display: none; } .mr .nm .nshort { display: inline; } .mr .side { font-size: 14.5px; gap: 8px; } }
.grid-2 .mr .nm .nfull, .w .mr .nm .nfull { display: none; } .grid-2 .mr .nm .nshort, .w .mr .nm .nshort { display: inline; }
.pblocks .pr { height: auto; min-height: 32px; padding: 5px 0; } .pblocks .pr .lb { white-space: normal; overflow: visible; line-height: 1.3; }
.board .row { height: auto; min-height: 44px; padding-top: 6px; padding-bottom: 6px; } .board .row > span:not(.n) { min-width: 0; } .board .row small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { .boards { grid-template-columns: minmax(0, 1fr) !important; } .tools { grid-template-columns: minmax(0, 1fr); } .lwk { grid-template-columns: 1fr 1fr; } }

/* column counts as classes, so the phone can take them back */
.boards.b3 { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 20px; } .board .row.r3 { grid-template-columns: 24px minmax(0, 1fr) 44px; }
.two.narrow { grid-template-columns: minmax(0, 1fr) 360px; max-width: 1000px; }
.hd.nxh { grid-template-columns: 150px 64px minmax(0, 1fr) 64px; }
.six.c5, .stats4[data-c="5"] { grid-template-columns: repeat(5, 1fr); } .six.c4 { grid-template-columns: repeat(4, 1fr); } .stats4[data-c="3"] { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .boards.b3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .two.narrow { grid-template-columns: minmax(0, 1fr); }
  .hd.nxh { grid-template-columns: 100px 44px minmax(0, 1fr) 44px; gap: 10px; }
  .six.c5, .six.c4, .stats4[data-c="5"] { grid-template-columns: 1fr 1fr; } .stats4[data-c="3"] { grid-template-columns: 1fr 1fr 1fr; }
}

.chart .hdot { fill: var(--cob); stroke: var(--s1); stroke-width: 2; vector-effect: non-scaling-stroke; }
/* fifth pass: readable letter marks, the result of a played match shown by fading the rest */
.plainmark { font-size: max(11px, calc(var(--s) * .44)); color: var(--text); background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); }
.strip .hit { outline: 0; }
.strip:has(.hit) i:not(.hit) { opacity: .28; }
.vstrip .strip:has(.hit) i.hit { box-shadow: 0 0 0 3px var(--s1), 0 0 0 5px var(--win); }
.strip:hover i.tip-on { opacity: 1; }
/* matches grouped by league: the league is in the heading, not in every card */
.lg-sec .fcard .top .team { display: none; } .lg-sec .fcard .top { justify-content: flex-end; }
/* a note right under a grid of tiles keeps its distance from the next card */
.ltiles + .note { margin: 10px 2px var(--gap); }
.mr .when .late { color: var(--faint); font-weight: 600; }
/* figures: proportional in tables (Schibsted's tabular period is wide), tabular only where columns of digits must line up */
.t td, .t th { font-variant-numeric: normal; }
.t td.pos, .t td.k, .lrow .n, .mr .goals, .mr .when { font-variant-numeric: tabular-nums; }
/* the tables drawn by the dashboards: text left, numbers right, tighter cells */
.lab .t td:not(.n), .lab .t th:not(.n) { text-align: left; } .lab .t td.n, .lab .t th.n { text-align: right; }
.lab .dash .t td, .lab .dash .t th { padding-left: 10px; padding-right: 10px; }
.lab .dash .t td:first-child, .lab .dash .t th:first-child { padding-left: 18px; }
.chip-p b a::after { content: ""; position: absolute; inset: -4px; }
@media (max-width: 760px) { .mr:not(:has(.vesta .p3)):not(:has(.vesta .none)) { grid-template-columns: 46px minmax(0, 1fr) 30px; } .mr:not(:has(.vesta .p3)):not(:has(.vesta .none)) .vesta { display: none; } }
@media (max-width: 760px) { .ch > span:has(> .btn) { width: 100%; } }
/* the Vesta tool: its curve in the corner, so the row keeps the height of its text */
.tool.v { position: relative; padding-right: 130px; }
.tool.v .viz { position: absolute; right: 18px; bottom: 16px; width: 100px !important; opacity: .95; }
.tool.v .viz svg { width: 100px; height: 100px; }
.tools .tool { min-height: 0; }
@media (max-width: 760px) {
  .t td.l a.team { max-width: 52vw; min-width: 0; } .t td.l a.team > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .mr.wide .ctx, .mr .ctx { margin-top: 2px; }
}
@media (max-width: 760px) { .t td.l { white-space: normal; } .t td.l a.team { max-width: none; } .t td.l a.team > span { white-space: normal; overflow: visible; line-height: 1.25; } .board .row small { white-space: normal; } }
@media (max-width: 760px) { .ex-t th button, .dk-th, .pd-th { min-height: 40px; padding-top: 10px; padding-bottom: 10px; } .ex-t th { padding-top: 0; padding-bottom: 0; } }

/* split bars: how, where from, after what */
.sbars > .sb { padding: 6px var(--pad) var(--s-4); }
.sb.wide { padding: 6px var(--pad) var(--s-4); }
.sb-h, .sb-r { display: grid; grid-template-columns: minmax(0, 1.3fr) 42px minmax(60px, 1fr) 42px; gap: 10px; align-items: center; }
.sb-h { font-size: 12px; font-weight: 700; color: var(--faint); padding: 10px 0 6px; } .sb-h span:nth-child(2), .sb-h span:nth-child(4) { text-align: right; }
.sb-r { min-height: 32px; border-top: 1px solid var(--line); font-size: 13.5px; }
.sb-r .n { text-align: right; font-variant-numeric: tabular-nums; } .sb-r .bar { position: relative; height: 7px; background: var(--s3); border-radius: 4px; } .sb-r .bar i { display: block; height: 100%; border-radius: 4px; background: var(--cob); }
.sb-r .bar::before { content: ""; position: absolute; inset: -9px 0; }
/* cards of different heights in two flowing columns (records, the deeper insights) */
.mason { columns: 2; column-gap: var(--gap); margin-top: var(--gap); } .mason:first-child { margin-top: 0; }
.mason > .card { break-inside: avoid; display: block; margin: 0 0 var(--gap) !important; } .mason > .card:last-child { margin-bottom: 0 !important; }
.mason + .card, .card + .mason { margin-top: var(--gap); }
@media (max-width: 900px) { .mason { columns: 1; } }
.facts-l { display: block; }
/* the projection as a heat map: one row per team, one column per place */
.t.heat td.hc, .t.heat th.hc { text-align: center; padding: 0 2px; min-width: 28px; font-size: 11.5px; font-weight: 700; }
.t.heat td.hc { background: color-mix(in srgb, var(--cob) calc(var(--a) * 100%), transparent); color: var(--text); }
.t.heat td.hc[style*="--a:0."]:not([style*="--a:0.0"]):not([style*="--a:0.1"]):not([style*="--a:0.2"]):not([style*="--a:0.3"]) { color: #fff; }
.t.heat td.hc.tip-on { outline: 2px solid var(--text); outline-offset: -2px; }
.fn.mv.up { color: var(--win); } .fn.mv.down { color: var(--loss); }
.two > *, .mason, .mason > .card { min-width: 0; }
.mason > .card .tw { max-width: 100%; }
.t td.l > a:not(.team) { display: inline-flex; align-items: center; gap: 8px; }

.mins2 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; height: 170px; padding: var(--s-4) var(--pad) var(--s-3); }
.mins2 .mq { display: grid; grid-template-rows: 1fr auto auto; justify-items: center; gap: 4px; min-width: 0; }
.mins2 .cols { display: flex; align-items: flex-end; gap: 4px; height: 100%; width: 100%; justify-content: center; }
.mins2 .cols i { display: block; width: 38%; max-width: 26px; min-height: 2px; border-radius: 5px 5px 2px 2px; } .mins2 .cols i.f { background: var(--cob); } .mins2 .cols i.a { background: var(--text); opacity: .75; }
.mins2 b { font: 800 14px var(--disp); } .mins2 small { font-size: 11px; color: var(--faint); font-weight: 600; }
.mins2 .mq.tip-on .cols i { filter: brightness(1.15); }
.dd.full, .dd.full .dd-btn { width: 100%; justify-content: space-between; } .dd.full .dd-menu { max-height: 320px; overflow: auto; }

.cmph { display: flex; justify-content: space-between; padding: 0 var(--pad) 6px; font-weight: 700; font-size: 13.5px; } .cmph span { display: inline-flex; align-items: center; gap: 8px; }
.cmp .n.lead { color: var(--text); font-weight: 800; } .cmp .pair i { position: relative; } .cmp .pair i::before { content: ""; position: absolute; inset: -8px 0; }
.cmp .pair:hover i { opacity: .45; } .cmp .pair i.tip-on { opacity: 1; }
.cmp .n.r.lead { color: var(--cob-2); }

.sec-h.sub2 { margin-top: var(--s-5); padding-bottom: var(--s-3); } .sec-h.sub2 h3 { font-size: 19px; }
.movers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .movers > * { margin-top: 0 !important; }
.mvc { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px; transition: transform .15s; } .mvc:hover { transform: translateY(-2px); }
.mvc .who { min-width: 0; } .mvc .who b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mvc .who small { display: block; font-size: 12px; color: var(--mut); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mvc .dl { font: 800 20px var(--disp); letter-spacing: -.02em; } .mvc .dl.up { color: var(--win); } .mvc .dl.down { color: var(--loss); }
@media (max-width: 1100px) { .movers { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { .movers { grid-template-columns: 1fr; } }

.hist { padding: 14px var(--pad); border-top: 1px solid var(--line); }
.hist-h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; } .hist-h a { display: inline-flex; align-items: center; gap: 8px; } .hist-h b { font-size: 15px; } .hist-h a:hover b { color: var(--cob-2); } .hist-h .g3 { font-size: 13px; }
.pill.ok { background: var(--win-soft); color: var(--win); font-weight: 700; height: 24px; padding: 0 10px; font-size: 12px; }
.eds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.eds .ed { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 8px; background: var(--s2); font-size: 12.5px; font-weight: 600; color: var(--mut); transition: background .12s; }
.eds .ed:hover { background: var(--s3); color: var(--text); } .eds .ed.won { background: var(--cob); color: #fff; } .eds .ed.final { box-shadow: inset 0 0 0 1.5px var(--cob); color: var(--cob-2); }
.card + .chips, .card + nav.chips { margin-top: var(--gap); }
.t td.k { font-variant-numeric: normal; }

/* the top bar (review 8 Oct): plain links with a cobalt mark under the current one, Vesta with its diamond, the Lab as a quiet cobalt pill */
.tb-in { gap: 32px; }
.tb-nav { gap: 4px; padding: 0; background: none; height: 100%; align-items: stretch; }
.tb-nav a { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border-radius: 0; font-size: 14.5px; color: var(--mut); box-shadow: none; background: none; }
.tb-nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; transition: background .15s; }
.tb-nav a:hover { color: var(--text); background: none; } .tb-nav a:hover::after { background: var(--line-2); }
.tb-nav a[aria-current] { color: var(--text); background: none; box-shadow: none; } .tb-nav a[aria-current]::after { background: var(--cob); }
.tb-nav a.vl { color: var(--cob-2); } .tb-nav a.vl svg { width: 10px; height: 10px; } .tb-nav a.vl[aria-current] { color: var(--cob-2); }
.lab-btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px 0 15px; border-radius: var(--pill); background: linear-gradient(135deg, var(--cob) 0%, #4D6BFF 100%); color: #fff; font-weight: 800; font-size: 14px; box-shadow: 0 6px 18px -8px rgba(26, 59, 168, .7), inset 0 1px 0 rgba(255, 255, 255, .22); transition: transform .15s, box-shadow .15s, filter .15s; }
.lab-btn svg { width: 16px; height: 16px; overflow: visible; }
.lab-btn:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 10px 22px -8px rgba(26, 59, 168, .8), inset 0 1px 0 rgba(255, 255, 255, .25); }
.lab-btn[aria-current] { box-shadow: 0 0 0 3px var(--cob-soft), 0 6px 18px -8px rgba(26, 59, 168, .7); }
/* the gleam: a band of light crosses the button every few seconds */
.lab-btn::after { content: ""; position: absolute; inset: -20% auto -20% 0; width: 46%; z-index: -1; background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .6) 50%, transparent 100%); transform: translateX(-160%) skewX(-18deg); animation: lab-gleam 6s ease-in-out 1.2s infinite; pointer-events: none; }
@keyframes lab-gleam { 0% { transform: translateX(-160%) skewX(-18deg); } 16%, 100% { transform: translateX(330%) skewX(-18deg); } }
/* two bubbles rise in the flask */
.lab-btn .bub { opacity: 0; animation: lab-bub 3s ease-in infinite; } .lab-btn .bub.b2 { animation-delay: 1.4s; }
@keyframes lab-bub { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 70% { opacity: .9; } 100% { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .lab-btn::after, .lab-btn .bub { animation: none; } .lab-btn .bub { opacity: 1; } }
@media (max-width: 760px) { .lab-btn { height: 36px; padding: 0 12px; } .lab-btn span { display: none; } }

/* ============================== home review 8 Oct ============================================== */
/* the day strip: the number of matches in cobalt */
.hdays a small { color: var(--cob-2); font-weight: 800; } .hdays a[aria-current] small { color: #fff; opacity: .85; }
/* the match card: matchday, table places, a quieter frame */
.fcard { padding: 16px 18px 14px; }
.fcard .top .team em { font-style: normal; color: var(--faint); font-weight: 600; }
.fcard .top .t { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--pill); background: var(--s2); font-weight: 800; font-size: 12.5px; }
.fcard .row { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; margin-top: 12px; }
.fcard .row .nm { display: grid; gap: 1px; min-width: 0; } .fcard .row .nm .tn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcard .row .nm small { font-size: 11.5px; font-weight: 600; color: var(--faint); }
.fcard .row .pc { font-size: 22px; }
.fcard .strip { margin-top: 14px; }
/* players to watch, in a row */
.pwatch { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; } .pwatch > * { margin-top: 0 !important; }
.pw-c { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 16px 10px 14px; transition: transform .15s, border-color .15s; } .pw-c:hover { transform: translateY(-2px); border-color: var(--cob-soft-2); }
.pw-c .sh svg { width: 64px; height: 64px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .16)); }
.pw-c .pc { font: 800 22px/1 var(--disp); color: var(--cob-2); letter-spacing: -.02em; margin-top: 2px; }
.pw-c .nm { font-weight: 800; font-size: 13px; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-c .mt { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--mut); font-weight: 600; max-width: 100%; } .pw-c .mt > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the leaders of the five leagues */
.tops { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } .tops > * { margin-top: 0 !important; }
.tp { display: grid; gap: 10px; padding: 16px 18px; transition: transform .15s, border-color .15s; } .tp:hover { transform: translateY(-2px); border-color: var(--cob-soft-2); }
.tp .lg { display: flex; align-items: center; gap: 8px; font: 700 12.5px var(--font); color: var(--mut); } .tp .lg em { font-style: normal; margin-left: auto; color: var(--faint); font-weight: 600; }
.tp .tm { display: flex; align-items: center; gap: 10px; } .tp .tm .nm { font: 800 16px/1.15 var(--font); }
.tp .tp-n { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .tp .tp-n b { font: 800 26px/1 var(--disp); letter-spacing: -.03em; } .tp .tp-n b small { font-size: 13px; color: var(--mut); } .tp .tp-n > span { font-size: 12.5px; color: var(--mut); font-weight: 600; }
.tp .gap { font-size: 12.5px; color: var(--mut); } .tp .gap b { color: var(--win); }
/* the week and the track record side by side */
.two-home { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--gap); align-items: stretch; }
.two-home .col { display: flex; flex-direction: column; min-width: 0; } .two-home .col > .card { flex: 1; }
.wk2 { display: grid; grid-template-columns: repeat(3, 1fr); } .wk2 > div { padding: 20px 22px; min-width: 0; border-left: 1px solid var(--line); } .wk2 > div:nth-child(3n+1) { border-left: 0; } .wk2 > div:nth-child(n+4) { border-top: 1px solid var(--line); }
.wk2 b.n { display: block; font: 800 34px/1 var(--disp); letter-spacing: -.04em; } .wk2 > div > span:not(.vword) { display: block; font-size: 12.5px; color: var(--mut); margin-top: 8px; line-height: 1.4; font-weight: 600; } .wk2 span em { font-style: normal; color: var(--text); }
.rec2 { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: center; padding: 18px 22px; }
.rec2 .rec-n { display: grid; gap: 16px; } .rec2 .rec-n b { display: block; font: 800 30px/1 var(--disp); letter-spacing: -.03em; } .rec2 .rec-n b.v { color: var(--cob-2); } .rec2 .rec-n > div > span { display: block; font-size: 12.5px; color: var(--mut); margin-top: 5px; line-height: 1.4; font-weight: 600; }
/* the word Vesta, in cobalt wherever it is written (app.js marks it) */
.vword { color: var(--cob-2); font-weight: inherit; }
/* the footer */
.ft { padding: var(--s-6) 0 var(--s-5); background: var(--s1); }
.ft-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.ft-about p { margin-top: 12px; max-width: 42ch; color: var(--mut); line-height: 1.55; font-size: 13.5px; }
.ft-about .ft-social { display: flex; gap: 8px; margin: 16px 0 0; flex-wrap: wrap; } .ft-about .ft-social a { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--pill); background: var(--s2); font-weight: 700; font-size: 12.5px; color: var(--mut); } .ft-about .ft-social a:hover { background: var(--s3); color: var(--text); }
.ft-col { display: flex; flex-direction: column; gap: 10px; } .ft-col h4 { font: 800 13px var(--font); color: var(--text); letter-spacing: 0; margin-bottom: 4px; } .ft-col a { color: var(--mut); font-size: 13.5px; } .ft-col a:hover { color: var(--cob-2); }
.ft-bottom { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 28px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ft-bottom .ft-note { margin: 0; flex: 1; min-width: 280px; } .ft-copy { font-size: 12.5px; color: var(--faint); white-space: nowrap; }
@media (max-width: 1100px) { .pwatch { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tops { grid-template-columns: repeat(3, minmax(0, 1fr)); } .two-home { grid-template-columns: 1fr; } .ft-grid { grid-template-columns: 1fr 1fr 1fr; } .ft-about { grid-column: 1 / -1; } }
@media (max-width: 760px) { .pwatch { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tops { grid-template-columns: 1fr; } .wk2 { grid-template-columns: 1fr 1fr; } .wk2 > div:nth-child(3n+1) { border-left: 1px solid var(--line); } .wk2 > div:nth-child(odd) { border-left: 0; } .wk2 > div:nth-child(n+3) { border-top: 1px solid var(--line); } .rec2 { grid-template-columns: 1fr; } .ft-grid { grid-template-columns: 1fr 1fr; } }
.two-home .sec-h h2 { white-space: nowrap; } .wk2 { align-content: stretch; } .wk2 > div { display: flex; flex-direction: column; justify-content: center; }
.vword { display: inline !important; margin: 0 !important; }
.wk2 > div { justify-content: flex-start; }
.tp .lg { white-space: nowrap; min-width: 0; } .tp .lg em { white-space: nowrap; }

/* ============================== home: the day's matches, three at a time =========================== */
.fc-rail { position: relative; }
.fc-track { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 36px) / 3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 2px 12px; margin: -4px -2px -12px; }
.fc-track::-webkit-scrollbar { display: none; }
.fc-track > .fcard { scroll-snap-align: start; min-width: 0; } .fc-track > .fcard.hidden { display: none; }
.rail-btn { position: absolute; top: calc(50% - 22px); z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--s1); color: var(--text); box-shadow: 0 6px 18px -6px rgba(15, 23, 42, .28); cursor: pointer; transition: background .15s, color .15s, transform .15s, opacity .15s; }
.rail-btn svg { width: 20px; height: 20px; } .rail-btn.prev { left: -22px; } .rail-btn.prev svg { transform: rotate(180deg); } .rail-btn.next { right: -22px; }
.rail-btn:hover { background: var(--cob); color: #fff; border-color: var(--cob); } .rail-btn:focus-visible { outline: 2px solid var(--cob); outline-offset: 2px; }
.rail-btn[hidden] { display: none; } .rail-btn:disabled { opacity: 0; pointer-events: none; }
@media (max-width: 760px) { .fc-track { grid-auto-columns: 86%; } .rail-btn { display: none; } }

/* ============================== /matches: the days on one full row, the competitions below ======== */
.dayline { display: flex; align-items: center; gap: 4px; width: 100%; margin-bottom: 14px; }
.dayline .dtrack { position: relative; flex: 1; min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: max(76px, calc(100% / 14)); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.dayline .dtrack::-webkit-scrollbar { display: none; }
.dayline .dtrack a { justify-content: center; padding: 10px 4px; min-width: 0; scroll-snap-align: start; }
.dl-btn { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; color: var(--text); cursor: pointer; transition: background .15s, color .15s; }
.dl-btn svg { width: 18px; height: 18px; } .dl-btn.prev svg { transform: rotate(180deg); }
.dl-btn:hover { background: var(--cob); color: #fff; } .dl-btn:focus-visible { outline: 2px solid var(--cob); outline-offset: 1px; }
.compline { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.compline .chip { gap: 8px; height: 36px; padding: 0 14px; font-weight: 700; }
.compline .chip b { font-weight: 800; color: var(--cob-2); } .compline .chip[aria-pressed="true"] b { color: inherit; }
.compline .chip .mark, .compline .chip img { width: 18px; height: 18px; --s: 18px; }
.today-btn { transition: opacity .2s; } .today-btn[hidden] { display: inline-flex; visibility: hidden; opacity: 0; }  /* keeps its place: nothing moves when it appears */
@media (max-width: 760px) { .dayline .dtrack { grid-auto-columns: 64px; } .compline { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } }
/* the head of /matches: "Today" in cobalt, flush with the right edge of the calendar */
.dayhead .tools { padding: 0; }
.dayhead .tools .today-btn { background: var(--cob); border-color: var(--cob); color: #fff; font-weight: 700; box-shadow: 0 8px 22px rgba(42, 80, 255, .28); }
.dayhead .tools .today-btn:hover { background: var(--cob); filter: brightness(1.08); transform: translateY(-1px); }
/* a thin line between the days of the timeline, not next to the day shown (its pill separates it) */
.dayline .dtrack a { position: relative; }
.dayline .dtrack a + a::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 18px; background: var(--line-2, var(--line)); transform: translateY(-50%); }
.dayline .dtrack a[aria-current]::before, .dayline .dtrack a[aria-current] + a::before { display: none; }
.dayline .dtrack { clip-path: inset(0 0 0 1px); }  /* no line against the left arrow */
/* the match heads: the two team colours lighter, about half as strong (owner, 9 Oct 2026) */
.hero { --glow: .16; --glow-2: .2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero { --glow: .28; --glow-2: .2; } }
:root[data-theme="dark"] .hero { --glow: .28; --glow-2: .2; }

/* the match page on one page: a heading over each part after the overview */
.blk-h { margin-top: var(--s-6); scroll-margin-top: 90px; } #line-ups { scroll-margin-top: 90px; }
.two.even .mr .nm .nfull { display: none; } .two.even .mr .nm .nshort { display: inline; }  /* the form of the two sides, side by side */

/* ============================== the match pitch, redrawn 9 Oct 2026 =============================== */
/* a deeper, even green with mown stripes; thin lines; white names that read on it; bigger shirts */
.pitchv.pitchh { background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 7.142%, rgba(0, 0, 0, 0) 7.142% 14.285%),
    linear-gradient(180deg, #2E7A4E, #276B44); }
.pitchv.pitchh > svg { stroke: rgba(255, 255, 255, .38); stroke-width: .35; }
.pitchh .chip-p { width: 112px; gap: 4px; }
.pitchh .chip-p .sh { width: 46px; height: 46px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35)); }
.pitchh .chip-p b { color: #fff; font-size: 13px; font-weight: 800; max-width: 112px; text-shadow: 0 1px 3px rgba(0, 0, 0, .75), 0 0 1px rgba(0, 0, 0, .6); }
.pitchv .chip-p b { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .75), 0 0 1px rgba(0, 0, 0, .6); }
.lineups-card .pitch-wrap.h { padding-bottom: 6px; }
/* the chances to start, under the pitch: the two sides side by side, each in two columns */
.starts2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; padding: 0 var(--pad) var(--pad); }
.starts2 h4 { display: flex; align-items: center; gap: 8px; font: 800 14px var(--font); margin: 4px 0 6px; }
.starts2 .st-list { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(8, auto); gap: 0 20px; }
.starts2 .start { padding: 0; height: 32px; font-size: 13.5px; grid-template-columns: minmax(0, 1fr) 54px 36px; gap: 8px; }
.starts2 .start > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1100px) { .starts2 { grid-template-columns: 1fr; gap: 14px; } }
@media (max-width: 760px) { .starts2 .st-list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; } }
/* the match pitch smaller (owner, 9 Oct 2026): at most 820px wide, centred */
.lineups-card .pitch-wrap.h > div { max-width: 820px; width: 100%; margin: 0 auto; }
.lineups-card .pitchh .chip-p { width: 96px; } .lineups-card .pitchh .chip-p .sh { width: 40px; height: 40px; }
.lineups-card .pitchh .chip-p b { font-size: 12px; max-width: 96px; }
.hero + .lineups-card, .hero + .two { margin-top: var(--s-6); }  /* room under the match head, now there are no tabs */

/* "Chance to start" opens and closes from its heading (closed at first) */
.st-fold > summary { list-style: none; cursor: pointer; user-select: none; } .st-fold > summary::-webkit-details-marker { display: none; }
.st-fold > summary .st-tog { margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--s2); color: var(--text); transition: transform .2s, background .15s; flex: none; }
.st-fold > summary .st-tog svg { width: 16px; height: 16px; }
.st-fold > summary:hover .st-tog { background: var(--cob); color: #fff; }
.st-fold[open] > summary .st-tog { transform: rotate(180deg); }
.st-fold > summary:focus-visible { outline: 2px solid var(--cob); outline-offset: -2px; border-radius: 10px; }
.st-fold:not([open]) > summary { border-bottom: 0; }

/* the chances to start: no line under the heading; the role beside each name */
.st-fold > summary.ch { border-bottom: 0; }
.starts2 .start > span:first-child { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.starts2 .start > span:first-child a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.starts2 .start .role { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .02em; color: var(--mut); background: var(--s2); border-radius: 6px; padding: 1px 6px; flex: none; }

/* the spots of the pitch: filled points, not rings */
.pitchv > svg .spot { fill: rgba(255, 255, 255, .6); stroke: none; }

/* head to head on the match page: five meetings, the rest behind "Show more" */
.h2h-more { display: flex; flex-direction: column; }
.h2h-more > summary { order: 2; list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px var(--pad); border-top: 1px solid var(--line); font-weight: 700; font-size: 14px; color: var(--cob-2); user-select: none; }
.h2h-more > summary::-webkit-details-marker { display: none; }
.h2h-more > summary svg { width: 16px; height: 16px; transition: transform .2s; }
.h2h-more > summary:hover { background: var(--s2); }
.h2h-more > summary:focus-visible { outline: 2px solid var(--cob); outline-offset: -2px; }
.h2h-more .sm-close { display: none; } .h2h-more[open] .sm-open { display: none; } .h2h-more[open] .sm-close { display: inline; }
.h2h-more[open] > summary svg { transform: rotate(180deg); }

/* the Lab block across the page: words on the left, the two dashboards side by side, the button */
.labw.wide { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; grid-template-areas: "tag rows go" "h rows go" "p rows go"; align-items: center; column-gap: 32px; padding: 28px 32px; margin-top: var(--gap); }
.labw.wide .tag { grid-area: tag; } .labw.wide h3 { grid-area: h; font-size: 26px; } .labw.wide p { grid-area: p; margin-bottom: 0; max-width: 56ch; }
.labw.wide .rows { grid-area: rows; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.labw.wide .go { grid-area: go; white-space: nowrap; }
@media (max-width: 1100px) { .labw.wide { grid-template-columns: 1fr; grid-template-areas: "tag" "h" "p" "rows" "go"; row-gap: 12px; } .labw.wide .go { justify-self: start; } }
@media (max-width: 760px) { .labw.wide .rows { grid-template-columns: 1fr; } }
/* Every forecast in two columns: room for the bar in a half-width card */
.fc-cols .hd, .fc-cols .vr { grid-template-columns: minmax(0, 1.15fr) 84px 56px minmax(0, 1.25fr); gap: 12px; }
.fc-cols .vr { font-size: 14px; } .fc-cols .vr .p { font-size: 20px; }
.fc-cols .vr > span:last-child, .fc-cols .vr .rc { font-size: 12.5px; line-height: 1.35; }
/* the forecast tables open and close from their heading (closed at first) */
.fold > summary { list-style: none; cursor: pointer; user-select: none; } .fold > summary::-webkit-details-marker { display: none; }
.fold > summary .sub b { color: var(--cob-2); font-weight: 800; }
.fold > summary .fold-tog { margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--s2); color: var(--text); transition: transform .2s, background .15s; flex: none; }
.fold > summary .fold-tog svg { width: 16px; height: 16px; }
.fold > summary:hover .fold-tog { background: var(--cob); color: #fff; }
.fold[open] > summary .fold-tog { transform: rotate(180deg); }
.fold > summary:focus-visible { outline: 2px solid var(--cob); outline-offset: -2px; border-radius: 12px; }
.fc-cols .fold:not([open]) > summary { border-bottom: 0; }
.fc-cols .w.fold > summary { display: flex; align-items: center; gap: 10px; }
.fold.exact .w-b.note { padding: 10px var(--pad) var(--pad); }

/* "How to read it" across the page under the forecast tables */
.howto-wide { margin-top: var(--gap); }
.howto-wide .w-b { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px 32px; align-items: start; font-size: 14px; line-height: 1.55; color: var(--mut); padding-bottom: var(--pad); }
.howto-wide .w-b p { margin: 0; } .howto-wide .w-b a { font-weight: 700; color: var(--cob-2); white-space: nowrap; align-self: start; }
@media (max-width: 1100px) { .howto-wide .w-b { grid-template-columns: 1fr; } }

/* the matches before and after, redrawn (owner, 11 Oct 2026): two even cards, a round arrow, the crests */
.mnav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: var(--gap); }
.mn { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .15s, border-color .15s; min-width: 0; }
.mn:hover { transform: translateY(-2px); border-color: var(--cob-soft-2); }
.mn.next { flex-direction: row-reverse; text-align: right; }
.mn-arrow { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--s2); color: var(--text); transition: background .15s, color .15s; }
.mn-arrow svg { width: 20px; height: 20px; } .mn.prev .mn-arrow svg { transform: rotate(180deg); }
.mn:hover .mn-arrow { background: var(--cob); color: #fff; }
.mn-body { display: grid; gap: 6px; min-width: 0; }
.mn-body small { font-size: 12.5px; font-weight: 600; color: var(--mut); }
.mn-teams { display: flex; align-items: center; gap: 8px; font-size: 15.5px; min-width: 0; } .mn.next .mn-teams { justify-content: flex-end; }
.mn-teams b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mn-teams em { font-style: normal; color: var(--faint); font-weight: 600; }
@media (max-width: 760px) { .mnav { grid-template-columns: 1fr; } .mn.next { flex-direction: row; text-align: left; } .mn.next .mn-teams { justify-content: flex-start; } }
/* the matches before and after: smaller and in cobalt (owner, 11 Oct 2026) */
.mnav { display: flex; justify-content: space-between; gap: var(--gap); }
.mn { max-width: 380px; padding: 8px 16px 8px 8px; gap: 12px; border-radius: var(--pill); border: 0; color: #fff; background: linear-gradient(135deg, var(--cob) 0%, #4D6BFF 100%); box-shadow: 0 8px 20px -10px rgba(26, 59, 168, .7); }
.mn.next { padding: 8px 8px 8px 16px; margin-left: auto; }
.mn:hover { transform: translateY(-1px); filter: brightness(1.06); border-color: transparent; }
.mn-arrow { width: 34px; height: 34px; background: rgba(255, 255, 255, .18); color: #fff; } .mn-arrow svg { width: 16px; height: 16px; }
.mn:hover .mn-arrow { background: #fff; color: var(--cob-2); }
.mn-body { gap: 2px; } .mn-body small { font-size: 11.5px; color: rgba(255, 255, 255, .78); }
.mn-teams { font-size: 13.5px; gap: 6px; } .mn-teams em { color: rgba(255, 255, 255, .7); }
.mn-teams .mark { --s: 18px !important; width: 18px; height: 18px; } .mn-teams .mark img { width: 18px; height: 18px; }
@media (max-width: 760px) { .mnav { flex-direction: column; } .mn, .mn.next { max-width: none; margin-left: 0; } }
/* both pills the same fixed size, whatever the names (owner, 11 Oct 2026) */
.mn, .mn.next { width: 340px; max-width: 100%; flex: none; }
.mn-body { flex: 1; min-width: 0; } .mn-teams { min-width: 0; } .mn-teams b { min-width: 0; }
@media (max-width: 760px) { .mn, .mn.next { width: 100%; } }

/* what each player did, as icons over his shirt (owner, 11 Oct 2026) */
.chip-p .bd { display: none; }
.pm { display: inline-flex; gap: 2px; align-items: center; }
.chip-p > .pm { position: absolute; top: -6px; left: calc(50% + 10px); z-index: 1; }
.pm-i { display: inline-flex; align-items: center; height: 18px; padding: 1px; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.pm-i svg { width: 16px; height: 16px; display: block; }
.pm-i b { font: 800 10.5px/1 var(--font); color: #111; padding: 0 4px 0 2px; }
.pm-i.card { background: transparent; box-shadow: none; } .pm-i.card svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }
.pm-off { display: inline-flex; align-items: center; gap: 2px; margin-top: 1px; padding: 1px 6px 1px 4px; border-radius: 999px; background: rgba(215, 38, 46, .92); color: #fff; font: 800 10.5px/1.4 var(--font); }
.pm-off svg { width: 10px; height: 10px; }
.pm-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; padding: 4px var(--pad) var(--pad); font-size: 12.5px; color: var(--mut); }
.pm-legend > span:not(.pm):not(.pm-off) { margin-right: 8px; }
.chip-p b.long { font-size: 11px; letter-spacing: -.01em; }  /* long names on the pitch, a size smaller */
.lineups-card .pitchh .chip-p b.long, .pitchv .chip-p b.long { font-size: 10.5px; }

/* icons, second take (owner, 11 Oct 2026): a real ball and a plain "A", no backgrounds; under a
   player who went off, who came on in his place and when */
.pm-i.goal, .pm-i.own, .pm-i.assist { background: transparent; box-shadow: none; padding: 0; }
.pm-i.goal svg, .pm-i.own svg, .pm-i.assist svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
.pm-i b { background: #fff; border-radius: 8px; padding: 1px 4px; margin-left: 1px; box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.pm-off { display: none; }
.pm-sub { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; padding: 2px 7px 2px 5px; border-radius: 999px; background: rgba(10, 14, 20, .62); color: #fff; font: 700 10.5px/1.3 var(--font); white-space: nowrap; max-width: 104px; }
.pm-sub svg { width: 10px; height: 10px; color: #4ADE80; flex: none; }
.pm-sub .who { overflow: hidden; text-overflow: ellipsis; } .pm-sub .min { color: rgba(255, 255, 255, .7); font-weight: 600; }
.pm-legend .pm-sub { background: var(--s3); color: var(--text); } .pm-legend .pm-sub .min { color: var(--mut); }
.pm-sub { max-width: 76px; gap: 3px; padding: 1px 6px 1px 4px; font-size: 10px; } .pm-legend .pm-sub { max-width: none; }  /* two neighbours never overlap */
.pm-sub { max-width: 96px; font-size: 10.5px; } .chip-p .pm-sub .min { display: none; }  /* the name only: the minute is in its tip */

/* a player's card on hover: his numbers of the match in a small table */
.tipbox .trows { display: grid; grid-template-columns: auto auto; gap: 3px 16px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 12.5px; }
.tipbox .trows span { color: rgba(255, 255, 255, .7); font-weight: 500; } .tipbox .trows em { font-style: normal; font-weight: 800; text-align: right; color: #fff; }
:root[data-theme="dark"] .tipbox .trows { border-top-color: rgba(11, 11, 12, .12); } :root[data-theme="dark"] .tipbox .trows span { color: rgba(11, 11, 12, .6); } :root[data-theme="dark"] .tipbox .trows em { color: #0B0B0C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tipbox .trows { border-top-color: rgba(11, 11, 12, .12); } :root:not([data-theme="light"]) .tipbox .trows span { color: rgba(11, 11, 12, .6); } :root:not([data-theme="light"]) .tipbox .trows em { color: #0B0B0C; } }
.chip-p > .pm-sub { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; }  /* hangs under the name: the shirt keeps its place */

/* the score: the two numbers and the dash apart, never touching */
.ko .s { display: inline-flex; align-items: baseline; gap: .14em; letter-spacing: -.02em; } .ko .s .dash { color: var(--faint); font-weight: 700; }
/* the goals and cards under the score, by side */
.hev { display: grid; grid-template-columns: 1fr 24px 1fr; gap: 0 18px; max-width: 760px; margin: 14px auto 0; font-size: 13.5px; }
.hev ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; align-content: start; }
.hev li { display: flex; align-items: center; gap: 7px; min-width: 0; } .hev ul.h li { justify-content: flex-end; text-align: right; }
.hev .who { font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hev .who small { color: var(--mut); font-weight: 600; }
.hev .m { color: var(--mut); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.evi { display: inline-flex; flex: none; } .evi svg { width: 15px; height: 15px; display: block; }
@media (max-width: 760px) { .hev { grid-template-columns: 1fr 8px 1fr; gap: 0 8px; font-size: 12.5px; } }

/* the match events first, across the page, under the head */
.hero + .events-first { margin-top: var(--s-6); } .events-first + .lineups-card { margin-top: var(--gap); }

/* ============================== played match, review 12 Oct 2026 =================================== */
.ev .evi { margin-right: 6px; vertical-align: -3px; } .ev .r .evi { margin-right: 6px; }
.ev .sub-in, .ev .sub-out { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.ev .sub-in { color: var(--cob-2); } .ev .sub-out { color: #D7262E; margin-left: 10px; }
.ev .sub-in svg, .ev .sub-out svg { width: 12px; height: 12px; }
.fold-sec > summary.sec-h { display: flex; align-items: center; cursor: pointer; }
.fold-sec > summary .fold-tog { margin-left: auto; }
.fold-sec { margin-top: var(--s-6); } .fold-sec > summary.sec-h { margin-top: 0; }
.fold-sec[open] > summary { margin-bottom: var(--s-4); }
#shots-all .cb { max-width: 820px; margin-left: auto; margin-right: auto; }
.h2hw .h2h-n { display: flex; justify-content: space-between; margin-top: 10px; font-size: 13.5px; color: var(--mut); } .h2hw .h2h-n b { color: var(--text); }
.t td.k.p-w { color: var(--cob-2); } .t td.k.p-l { color: #D7262E; } .t td.k.p-d { color: #4B5563; }
:root[data-theme="dark"] .t td.k.p-d { color: #9CA3AF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .t td.k.p-d { color: #9CA3AF; } }

/* ============================== played match: what came true, 12 Oct 2026 ========================== */
.came-hero { display: flex; align-items: center; gap: 14px; padding: var(--s-4) var(--pad); border-top: 1px solid var(--line); }
.came-hero p { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--mut); } .came-hero p b { color: var(--text); }
.came-hero .ck { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--cob); color: var(--on-cob); }
.came-hero .ck svg { width: 17px; height: 17px; }
.came-g { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); }
/* three a row; the last row never holds one alone: two or four of the last tiles go two a row */
.came-g > .cm { grid-column: span 2; } .came-g > .cm.cw { grid-column: span 3; }
@media (max-width: 1100px) { .came-g > .cm, .came-g > .cm.cw { grid-column: span 3; } .came-g > .cm:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 620px) { .came-g > .cm, .came-g > .cm.cw { grid-column: 1 / -1; } }
.cm { display: grid; grid-template-rows: auto 1fr auto auto; gap: 6px; padding: 14px 16px 13px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); min-width: 0; }
.cm .k { font-size: 12.5px; font-weight: 600; color: var(--mut); }
.cm .l { font: 700 15.5px/1.3 var(--font); color: var(--text); }
.cm .bar { display: block; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: 4px; }
.cm .bar i { display: block; height: 100%; border-radius: inherit; background: var(--faint); }
.cm.top .bar i { background: var(--cob); }
.cm .f { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cm .f > b { font: 800 22px/1 var(--disp); letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.cm .rk { font-size: 12.5px; font-weight: 600; color: var(--mut); white-space: nowrap; }
.cm .rk.top { color: var(--cob-2); font-weight: 700; }
.came-note { margin: var(--s-4) 0 0; font-size: 13.5px; line-height: 1.5; color: var(--mut); max-width: 78ch; } .came-note b { color: var(--text); }
.came-t tr.hit td { font-weight: 700; } .came-t td.ok { color: var(--cob-2); font-weight: 800; }
/* the goal icon of the match events replaces the old dot */
.ev .evi.goal::before, .ev .evi + .goal::before { content: none; }
/* the last tile of what came true fills its row; the chances of the players muted, cobalt when it came true */
.came-note a { color: var(--cob-2); font-weight: 600; text-decoration: none; }
.came-t td.vc { color: var(--mut); } .came-t td.vc.ok { color: var(--cob-2); font-weight: 800; }

/* the facts of the Insight Engine: one line each, its sample under it */
.facts .kfl { list-style: none; margin: 0; padding: 4px 0 6px; }
.facts .kfl li { display: grid; gap: 3px; padding: 10px 18px; border-top: 1px solid var(--line); }
.facts .kfl li:first-child { border-top: 0; }
.facts .kft { font-size: 14px; line-height: 1.45; color: var(--text); }
.facts .kfs { font-size: 12px; font-weight: 600; color: var(--mut); font-variant-numeric: tabular-nums; }
/* the match head on a phone: crest over the name, both sides centred, long names wrap (12 Oct 2026) */
@media (max-width: 760px) {
  .hero .side, .hero .side.r { align-items: center; text-align: center; }
  .hero .side > div { min-width: 0; max-width: 100%; }
  .hero .side .nm { font-size: 18px; line-height: 1.1; }
  .hero .side .sub, .hero .side.r .sub { justify-content: center; }
  .hev { margin-top: 10px; }
  /* the match events: smaller type, the player coming on over the one going off */
  .ev { font-size: 13px; }
  .ev .sub-in, .ev .sub-out { display: flex; margin-left: 0; }
  .ev .l .sub-in, .ev .l .sub-out { justify-content: flex-end; }
  .evh { font-size: 12.5px; }
}
@media (max-width: 760px) { .ev { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); gap: 8px; } }
.hero .side .nm .nshort { display: none; }
@media (max-width: 760px) {
  .hero .side .nm .nfull { display: none; } .hero .side .nm .nshort { display: inline; }
  /* the one-pitch line-ups on a phone: smaller shirts and names, who came on is in the events */
  .pitchv:not(.pitchh) .chip-p > .pm-sub { display: none; }
  .pitchv:not(.pitchh) .chip-p .sh { width: 28px; height: 28px; }
  .pitchv:not(.pitchh) .chip-p b, .pitchv:not(.pitchh) .chip-p b.long { font-size: 10.5px; max-width: 64px; letter-spacing: -.01em; }
}

/* Vesta Live in the match events: the side's chance to win before and after (ADR 0026) */
.ev .vd { display: inline-flex; gap: 4px; align-items: baseline; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: var(--cob-soft); color: var(--cob-2); font-size: 12px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ev .vd b { font-weight: 800; }
.ev .l .vd { margin-left: 0; margin-right: 8px; }
@media (max-width: 760px) { .ev .vd { display: flex; width: max-content; margin: 4px 0 0; } .ev .l .vd { margin-left: auto; } }
/* ... and the rest of the change: draw, next goal, goals to come, likeliest score, clean sheet (model outputs) */
.ev .vdw { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 5px; justify-content: flex-start; }
.ev .l .vdw { justify-content: flex-end; }
.ev .vdw .vd { margin: 0; cursor: default; }
.ev .vdw .vd2 { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--mut); font-weight: 500; }
.ev .vdw .vd2 b { color: var(--text); }

/* what if a player misses it (ADR 0030) */
.scn { padding: 4px var(--pad) 16px; display: grid; gap: 14px; }
.scn-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.scn-pick h3 { display: flex; align-items: center; gap: 8px; font: 700 15px var(--font); margin: 0 0 8px; }
.scn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.scn-chips .chip[aria-pressed="true"] { background: var(--cob); color: var(--on-cob); border-color: var(--cob); }
.scn-text { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text); max-width: 72ch; }
.scn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.scn-card { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; min-width: 0; align-content: start; }
.scn-h { font: 700 13px var(--font); color: var(--mut); }
.scn-r { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(48px, 1fr) auto 58px; align-items: center; gap: 10px; font-size: 13.5px; }
.scn-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scn-bar { position: relative; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.scn-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; }
.scn-bar i.b { background: var(--faint); opacity: .45; } .scn-bar i.a { background: var(--cob); height: 4px; top: 2px; }
.scn-v { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--mut); } .scn-v b { color: var(--text); }
.scn-d { font-weight: 700; text-align: right; white-space: nowrap; color: var(--mut); }
.scn-d.up { color: var(--win); } .scn-d.down { color: var(--loss); }
.scn-x { font-size: 13px; color: var(--mut); } .scn-x b { color: var(--text); }
.scn-note, .scn-none { margin: 0; font-size: 13px; color: var(--mut); }
@media (max-width: 1180px) { .scn-r { grid-template-columns: minmax(0, 1fr) auto auto; } .scn-bar { display: none; } }
@media (max-width: 760px) { .scn-pick, .scn-grid { grid-template-columns: minmax(0, 1fr); } .scn-chips { gap: 5px; } .scn-chips .chip { font-size: 12.5px; padding: 5px 10px; } .scn-text { font-size: 14px; } }

/* the Lab's filters on a phone: a button, then the panel as a sheet over the page */
.lab-filters, .lab-sheet-bar { display: none; }
@media (max-width: 1100px) {
  .lab-filters:not([hidden]) { display: inline-flex; margin: 4px var(--pad) 8px; height: 36px; gap: 8px; }
  .lab-filters svg { width: 16px; height: 16px; }
  .lab.sheet .lab-panel { display: block; position: fixed; inset: var(--top) 0 0 0; z-index: 60; overflow-y: auto; border-right: 0; overscroll-behavior: contain; }
  .lab.sheet .lab-sheet-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 1; padding: 10px 16px; background: var(--s1); border-bottom: 1px solid var(--line); }
  .lab.sheet .lab-sheet-bar b { font: 700 17px var(--font); }
  html.no-scroll { overflow: hidden; }
}

/* a cell or a figure kept on one line (dates, scores) */
.nw, .t td.nw, .t .nw { white-space: nowrap; }
/* a short link inside small text (e.g. "X"): a larger tap area, the same layout */
small a.v { padding: 6px 4px; margin: -6px -4px; }
@media (min-width: 761px) and (max-width: 1100px) { .lab.sheet .lab-panel { right: auto; width: 380px; box-shadow: var(--shadow); border-right: 1px solid var(--line); } }
@media (min-width: 1101px) and (max-width: 1240px) { .lab.panel.with-insp { grid-template-columns: 232px 288px minmax(0, 1fr); } }  /* the inspector floats over the page here */

/* the Lab's expected-goals page (lab/xg.html) */
.xg-prose { padding: 16px var(--pad) 20px; max-width: 78ch; display: grid; gap: 10px; font-size: 14.5px; line-height: 1.55; color: var(--mut); }
.xg-prose p, .xg-prose ul { margin: 0; } .xg-prose ul { padding-left: 18px; display: grid; gap: 4px; } .xg-prose li::marker { color: var(--faint); }
.xg-cal { display: grid; padding: 4px var(--pad) 8px; }
.xg-cal-h, .xg-cal-r { display: grid; grid-template-columns: 90px 90px 70px 70px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 36px; font-size: 13.5px; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--line); }
.xg-cal-h { color: var(--faint); font-size: 12.5px; font-weight: 600; }
.xg-cal-r > span:nth-child(2), .xg-cal-r > span:nth-child(3), .xg-cal-r > span:nth-child(4), .xg-cal-h > span:nth-child(2), .xg-cal-h > span:nth-child(3), .xg-cal-h > span:nth-child(4) { text-align: right; }
.xg-cal-bar { position: relative; height: 16px; }
.xg-cal-bar i { position: absolute; left: 0; border-radius: 99px; }
.xg-cal-bar i.s { top: 0; height: 16px; background: var(--faint); opacity: .28; }
.xg-cal-bar i.h { top: 5px; height: 6px; background: var(--cob); }
td.xg-off { color: var(--cob-2); font-weight: 700; }
@media (max-width: 760px) { .xg-cal-h, .xg-cal-r { grid-template-columns: 64px 64px 54px 54px minmax(0, 1fr); gap: 8px; font-size: 12.5px; } .xg-cal-bar-h { visibility: hidden; } .t .xg-ll { display: none; } }

/* real, expected and projected (charts.season_path) */
.chart .played { fill: var(--s2); opacity: .55; }
.chart .proj-band { fill: var(--cob); opacity: .13; }
.chart .l-proj { stroke: var(--cob-2); stroke-width: 2.5; stroke-dasharray: 2 5; stroke-linecap: round; }
.chart .l-proj-dot { fill: var(--cob-2); } .chart .l-proj-end { fill: var(--cob-2); }
.lgd .ln-proj { width: 18px; height: 0; border-top: 3px dotted var(--cob-2); vertical-align: 3px; display: inline-block; }