/* ==========================================================================
   Predictions UI — today/tomorrow lists, league and results pages, match page.
   Loaded only on those pages, after bk.css (tokens come from there).
   Scale: 4 / 8 / 12 / 16 / 24 px. Radius 16 cards, 12 inner, 8 chips.
   Mobile first; 560px and 900px breakpoints.
   ========================================================================== */
:root {
  --pr-card: #fff;
  --pr-r: 16px;
  --pr-r-in: 12px;
  --pr-line: var(--line);
  --pr-soft: var(--surface-2);
  --pr-dark: var(--pitch-900);
  --pr-dark-2: var(--pitch-800);
  --pr-num: 800 1em/1 var(--font-d);
}

/* Wide components break out of the 760px prose measure */
.kn-prose > .kn-mlist, .kn-prose > .kn-tips, .kn-prose > .kn-formgrid, .kn-prose > .kn-h2h, .kn-prose > .kn-st,
.kn-prose > .kn-oddsboard, .kn-prose > .kn-books, .kn-prose > .kn-probs, .kn-prose > .kn-accgrid, .kn-prose > .kn-mrows,
.kn-prose > .kn-lede, .kn-prose > .kn-mlist__empty { max-width: none; }

/* ---------------------------------------------------------------- Crests and league marks */
.kn-crest { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(2, 22, 14, .08), 0 2px 6px rgba(2, 22, 14, .1); overflow: hidden; }
.kn-crest img { width: 74%; height: 74%; object-fit: contain; }
.kn-crest--xs { width: 22px; height: 22px; box-shadow: 0 0 0 1px rgba(2, 22, 14, .1); }
.kn-crest--sm { width: 30px; height: 30px; }
.kn-crest--lg { width: 76px; height: 76px; box-shadow: 0 0 0 4px rgba(255, 255, 255, .14), 0 12px 28px rgba(0, 0, 0, .35); }
.kn-crest--lg img { width: 70%; height: 70%; }
.kn-crest--ini { background: var(--c); color: var(--fg); font: 800 12px/1 var(--font-d); letter-spacing: -.02em; }
.kn-crest--xs.kn-crest--ini { font-size: 8px; }
.kn-crest--sm.kn-crest--ini { font-size: 10px; }
.kn-crest--lg.kn-crest--ini { font-size: 22px; }
.kn-lglogo { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: #fff; overflow: hidden; }
.kn-lglogo img { width: 78%; height: 78%; object-fit: contain; }
.kn-lglogo--xs { width: 22px; height: 22px; border-radius: 6px; }
.kn-eyebrow .kn-lglogo { margin-right: 2px; }

/* ---------------------------------------------------------------- Hero: tabs and ticker */
.kn-hero--pred .kn-hero__title, .kn-hero--match .kn-hero__title { max-width: 22ch; }
.kn-ptabs { margin-top: 22px; }
.kn-ptabs__track { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 6px; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 88%, transparent); mask: linear-gradient(90deg, #000 88%, transparent); }
.kn-ptabs__track::-webkit-scrollbar { display: none; }
.kn-ptab { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #fff; font: 700 14px/1 var(--font-d); text-decoration: none; white-space: nowrap; transition: background .2s, border-color .2s, transform .2s; }
.kn-ptab .kn-i { width: 16px; height: 16px; color: var(--gold); }
.kn-ptab:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 198, 41, .6); color: #fff; transform: translateY(-1px); }
.kn-ptab[aria-current] { background: var(--cta); border-color: var(--cta); color: var(--cta-ink); }
.kn-ptab[aria-current] .kn-i { color: var(--cta-ink); }
@media (min-width: 900px) {
  .kn-ptabs__track { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); overflow: visible; -webkit-mask: none; mask: none; padding: 0; }
  .kn-ptab { justify-content: flex-start; }
}

.kn-tick { position: relative; z-index: 1; margin-top: 28px; border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .25); overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.kn-tick__track { display: flex; width: max-content; animation: kn-tick 70s linear infinite; }
.kn-tick:hover .kn-tick__track { animation-play-state: paused; }
.kn-tick__set { display: flex; }
@keyframes kn-tick { to { transform: translateX(-50%); } }
.kn-tick__i { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px; border-right: 1px solid rgba(255, 255, 255, .08); color: #fff; text-decoration: none; font: 700 13.5px/1 var(--font-d); white-space: nowrap; }
.kn-tick__i:hover { background: rgba(255, 255, 255, .06); color: var(--gold); }
.kn-tick__i b::before { content: attr(data-k); display: inline-block; padding: 5px 8px; border-radius: 6px; background: var(--pitch-950); color: var(--gold); font: 800 11.5px/1 var(--font-d); }

/* ---------------------------------------------------------------- Match lists */
.kn-mlist { display: grid; gap: 20px; margin: 4px 0 28px; }
.kn-mgroup { background: var(--pr-card); border: 1px solid var(--pr-line); border-radius: var(--pr-r); box-shadow: var(--sh-1); overflow: hidden; }
.kn-mgroup__h { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: linear-gradient(90deg, var(--pr-dark), var(--pr-dark-2)); color: #fff; }
.kn-mgroup__name { min-width: 0; font: 800 16px/1.2 var(--font-d); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kn-mgroup__name a { color: #fff; text-decoration: none; }
.kn-mgroup__name a:hover { color: var(--gold); }
.kn-mgroup__c::before { content: attr(data-k); display: inline-block; padding: 4px 8px; border-radius: 6px; background: rgba(255, 255, 255, .12); color: var(--gold); font: 700 10.5px/1 var(--font); letter-spacing: .07em; text-transform: uppercase; }
.kn-mgroup__n { margin-left: auto; flex: none; }
.kn-mgroup__n::before { content: attr(data-k); font: 600 12.5px/1 var(--font); color: rgba(255, 255, 255, .7); }

.kn-mrows { display: block; }
.kn-mrow + .kn-mrow { border-top: 1px solid var(--pr-line); }
.kn-mrow__link { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 18px; grid-template-areas: "when teams go" "when tip tip"; align-items: center; gap: 10px 14px; padding: 14px 14px 14px 12px; color: inherit; text-decoration: none; transition: background .2s; }
.kn-mrow__link::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cta); transform: scaleY(0); transition: transform .25s; }
a.kn-mrow__link:hover { background: var(--pr-soft); color: inherit; }
a.kn-mrow__link:hover::before { transform: scaleY(1); }
a.kn-mrow__link:focus-visible { outline-offset: -3px; }
.kn-mrow__when { grid-area: when; align-self: start; display: grid; justify-items: center; gap: 5px; padding-top: 2px; }
.kn-mrow__time, .kn-mrow__st { display: inline-grid; place-items: center; min-width: 50px; height: 30px; padding: 0 6px; border-radius: 8px; background: var(--pr-dark); color: var(--gold); font: 800 13.5px/1 var(--font-d); font-variant-numeric: tabular-nums; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .35); }
.kn-mrow__time.is-soon { background: var(--cta); color: var(--cta-ink); box-shadow: inset 0 -2px 0 var(--cta-700); }
.kn-mrow__st::before { content: attr(data-k); }
.kn-mrow__st--ft { background: var(--t-payouts); color: #fff; box-shadow: none; }
.kn-mrow__st--off { background: var(--ink-3); color: #fff; box-shadow: none; }
.kn-mrow__day { font: 600 11px/1.2 var(--font); color: var(--ink-3); text-align: center; white-space: nowrap; }
.kn-mrow__day[data-k]::before { content: attr(data-k); }
.kn-mrow__teams { grid-area: teams; display: grid; gap: 8px; min-width: 0; }
.kn-mrow__team { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kn-mrow__name { min-width: 0; font: 650 15px/1.25 var(--font); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kn-mrow__team.is-win .kn-mrow__name { font-weight: 800; }
.kn-mrow__sc { margin-left: auto; min-width: 26px; padding: 3px 0; border-radius: 6px; background: var(--pr-soft); text-align: center; font: 800 14px/1.2 var(--font-d); color: var(--ink); }
.kn-mrow__team.is-win .kn-mrow__sc { background: var(--pr-dark); color: var(--gold); }
.kn-mrow__tip { grid-area: tip; position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 12px; border-radius: var(--pr-r-in); background: var(--pr-soft); border: 1px solid var(--pr-line); }
.kn-mrow__pick { font: 800 14px/1.3 var(--font-d); color: var(--ink); }
.kn-mrow__meta { display: inline-flex; align-items: center; gap: 8px; }
.kn-mrow__pct { font: 800 15px/1 var(--font-d); color: var(--green-600); font-variant-numeric: tabular-nums; }
.kn-mrow__conf::before { content: attr(data-k); display: inline-block; padding: 4px 8px; border-radius: 999px; font: 700 11px/1 var(--font); }
.kn-mrow__conf--high::before { background: var(--green-50); color: var(--green-600); }
.kn-mrow__conf--medium::before { background: #FFF4D6; color: #8A5A00; }
.kn-mrow__conf--low::before { background: var(--surface-3); color: var(--ink-2); }
.kn-mrow__odd::before { content: "@ " attr(data-k); font: 800 13.5px/1 var(--font-d); color: var(--t-odds); }
.kn-mrow__go { grid-area: go; display: grid; place-items: center; color: var(--ink-3); transition: transform .2s, color .2s; }
.kn-mrow__go .kn-i { width: 18px; height: 18px; }
a.kn-mrow__link:hover .kn-mrow__go { transform: translateX(3px); color: var(--green-600); }
.kn-mrow.is-won .kn-mrow__tip { background: var(--t-payouts-50); border-color: rgba(12, 154, 85, .3); }
.kn-mrow.is-lost .kn-mrow__tip { background: #FFF5F5; border-color: rgba(224, 57, 63, .25); }
.kn-mrow.is-won .kn-mrow__tip::after, .kn-mrow.is-lost .kn-mrow__tip::after { position: absolute; top: -9px; right: 10px; padding: 3px 8px; border-radius: 6px; font: 800 10.5px/1 var(--font-d); letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.kn-mrow.is-won .kn-mrow__tip::after { content: "Won"; background: var(--t-payouts); }
.kn-mrow.is-lost .kn-mrow__tip::after { content: "Lost"; background: var(--t-live); }
.kn-mrow.is-lost .kn-mrow__pick { text-decoration: line-through; text-decoration-color: rgba(224, 57, 63, .5); }
.kn-mrow--fix .kn-mrow__link { grid-template-areas: "when teams teams" "when tip tip"; }
.kn-mrow__tip--soon { background: transparent; border-style: dashed; justify-content: flex-start; }
.kn-mrow__open::before { content: attr(data-k); font: 700 12.5px/1 var(--font); color: var(--ink-3); }
.kn-mrows--fix { background: var(--pr-card); border: 1px solid var(--pr-line); border-radius: var(--pr-r); overflow: hidden; margin: 10px 0 24px; }
@media (min-width: 680px) {
  .kn-mrow__link { grid-template-columns: 64px minmax(0, 1fr) minmax(220px, 36%) 18px; grid-template-areas: "when teams tip go"; gap: 0 18px; padding: 14px 16px 14px 14px; }
  .kn-mrow--fix .kn-mrow__link { grid-template-areas: "when teams tip tip"; }
  .kn-mrow__when { align-self: center; padding-top: 0; }
  .kn-mrow__time, .kn-mrow__st { min-width: 58px; height: 32px; font-size: 14px; }
  .kn-mrow__tip { flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; }
}
.kn-mlist__empty { margin: 0 0 18px; padding: 18px; border-radius: var(--pr-r); background: var(--pr-card); border: 1px dashed var(--line-2); color: var(--ink-2); }

/* Sidebar "same day" list: compact rows, tip under the teams */
.kn-sidebox--matches { background: var(--pr-card); color: var(--ink); border: 1px solid var(--pr-line); padding: 14px 0 6px; }
.kn-sidebox--matches .kn-sidebox__title { padding: 0 14px; color: var(--green-600); }
.kn-mrows--side .kn-mrow__link { grid-template-columns: 50px minmax(0, 1fr); grid-template-areas: "when teams" "when tip"; gap: 8px 10px; padding: 10px 12px; }
.kn-mrows--side .kn-mrow__go { display: none; }
.kn-mrows--side .kn-mrow__name { font-size: 13.5px; }
.kn-mrows--side .kn-crest--sm { width: 24px; height: 24px; }
.kn-mrows--side .kn-mrow__tip { flex-direction: column; align-items: flex-start; padding: 8px 10px; }
.kn-mrows--side .kn-mrow__pick { font-size: 13px; }

/* ---------------------------------------------------------------- Match board */
.kn-board { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "h m a" "v v v"; align-items: start; gap: 14px 12px; max-width: 780px; margin-top: 24px; padding: 22px 16px 16px; border-radius: 20px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .12); overflow: hidden; }
.kn-board::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .07) 45%, transparent 60%); transform: translateX(-100%); animation: kn-shine 6s ease-in-out 1s infinite; pointer-events: none; }
@keyframes kn-shine { 40%, 100% { transform: translateX(100%); } }
.kn-board__team { display: grid; justify-items: center; gap: 10px; min-width: 0; text-align: center; }
.kn-board__team--h { grid-area: h; }
.kn-board__team--a { grid-area: a; }
.kn-board__name { max-width: 100%; font: 800 clamp(15px, 2.2vw, 20px)/1.2 var(--font-d); color: #fff; overflow-wrap: anywhere; }
.kn-board__mid { grid-area: m; display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 76px; }
.kn-board__time, .kn-board__score { padding: 8px 16px; border-radius: 12px; background: var(--pitch-950); color: var(--gold); font: 800 clamp(26px, 5vw, 40px)/1 var(--font-d); font-variant-numeric: tabular-nums; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 198, 41, .28); animation: kn-glow 2.8s ease-in-out infinite; }
.kn-board__time--off { font-size: clamp(16px, 3vw, 22px); color: #fff; background: var(--ink-3); animation: none; }
.kn-board__score i { font-style: normal; opacity: .55; margin: 0 6px; }
@keyframes kn-glow { 50% { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 198, 41, .5), 0 0 24px rgba(255, 198, 41, .28); } }
.kn-board__st::before { content: attr(data-k); font: 700 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.kn-board__cd:not(:empty) { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 198, 41, .15); color: var(--gold); font: 800 12px/1.2 var(--font-d); font-variant-numeric: tabular-nums; }
.kn-board__cd.is-live { background: var(--t-live); color: #fff; }
.kn-board__cd.is-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: kn-blink 1.1s infinite; }
@keyframes kn-blink { 50% { opacity: .25; } }
.kn-board__venue { grid-area: v; justify-self: center; display: inline-flex; align-items: center; gap: 6px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); width: 100%; justify-content: center; font-size: 13px; color: rgba(255, 255, 255, .75); }
.kn-board__venue .kn-i { width: 14px; height: 14px; color: var(--gold); }
.kn-board__team .kn-crest--lg { transition: transform .35s cubic-bezier(.2, .9, .3, 1.3); }
.kn-board__team:hover .kn-crest--lg { transform: scale(1.06) rotate(-3deg); }
@media (min-width: 560px) { .kn-board { padding: 26px 24px 18px; gap: 16px 20px; } }
@media (max-width: 559px) {
  /* Phone scoreboard: kick-off block stacks in the middle column, countdown gets its own full row. */
  .kn-board { grid-template-areas: "h d a" "h t a" "h w a" "c c c" "v v v"; grid-template-rows: auto auto 1fr auto auto; gap: 6px 8px; padding: 18px 12px 14px; }
  .kn-board__mid { display: contents; }
  .kn-board__team { grid-row: 1 / 4; align-content: start; gap: 8px; }
  .kn-board__mid > .kn-board__st:first-child { grid-area: d; justify-self: center; align-self: end; }
  .kn-board__time, .kn-board__score { grid-area: t; justify-self: center; align-self: center; padding: 7px 12px; }
  .kn-board__st--eat, .kn-board__score + .kn-board__st { grid-area: w; justify-self: center; align-self: start; }
  .kn-board__cd { grid-area: c; justify-self: center; margin-top: 6px; }
  .kn-board__venue { margin-top: 4px; font-size: 12.5px; }
  .kn-form--board { gap: 2px; }
  .kn-form--board .kn-form__r { width: 16px; height: 16px; border-radius: 4px; }
  .kn-form--board .kn-form__r::before { font-size: 9px; }
}
@media (max-width: 420px) { .kn-crest--lg { width: 56px; height: 56px; } .kn-board__name { font-size: 14px; } }

/* Form chips (board and form cards) */
.kn-form { display: inline-flex; gap: 3px; }
.kn-form__r { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; font-style: normal; background: var(--surface-3); }
.kn-form__r::before { content: attr(data-k); font: 800 10px/1 var(--font-d); color: #fff; }
.kn-form__r--w { background: var(--t-payouts); }
.kn-form__r--d { background: #8A979F; }
.kn-form__r--l { background: var(--t-live); }
.kn-form--board .kn-form__r { width: 18px; height: 18px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }

/* ---------------------------------------------------------------- Lede and tip cards */
.kn-lede p { font-size: 18px; line-height: 1.6; color: var(--ink); }
.kn-tips { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 8px 0 26px; }
@media (min-width: 560px) { .kn-tips { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } }
.kn-tip { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--pr-r); background: var(--pr-card); border: 1px solid var(--pr-line); box-shadow: var(--sh-1); transition: transform .25s, box-shadow .25s; }
.kn-tip:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.kn-tip__top { display: flex; align-items: center; gap: 8px; }
.kn-tip__ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--green-50); color: var(--green-600); }
.kn-tip__ico .kn-i { width: 16px; height: 16px; }
.kn-tip__lab::before { content: attr(data-k); font: 700 11.5px/1 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.kn-tip__conf { margin-left: auto; }
.kn-tip__conf::before { content: attr(data-k); display: inline-block; padding: 4px 9px; border-radius: 999px; font: 700 11px/1 var(--font); }
.kn-tip__conf--high::before { background: var(--green-50); color: var(--green-600); }
.kn-tip__conf--medium::before { background: #FFF4D6; color: #8A5A00; }
.kn-tip__conf--low::before { background: var(--surface-3); color: var(--ink-2); }
.kn-tip__pick { font: 800 18px/1.3 var(--font-d); letter-spacing: -.01em; color: var(--ink); }
.kn-tip__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: auto; }
.kn-tip__pct { font: 800 30px/1 var(--font-d); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.kn-tip__odds::before { content: "@ " attr(data-k); display: inline-block; padding: 5px 9px; border-radius: 8px; background: #FFF4E0; color: var(--t-odds); font: 800 14px/1 var(--font-d); }
.kn-tip__bar { height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.kn-tip__bar span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--ng), #2BB673); transition: width 1.1s cubic-bezier(.2, .8, .2, 1); }
.kn-tip--main { background: linear-gradient(150deg, var(--pitch-900), var(--pitch-700)); border-color: transparent; }
.kn-tip--main .kn-tip__ico { background: rgba(255, 198, 41, .16); color: var(--gold); }
.kn-tip--main .kn-tip__lab::before { color: var(--gold); }
.kn-tip--main .kn-tip__pick, .kn-tip--main .kn-tip__pct { color: #fff; }
.kn-tip--main .kn-tip__bar { background: rgba(255, 255, 255, .14); }
.kn-tip--main .kn-tip__bar span { background: linear-gradient(90deg, var(--cta-600), var(--cta)); }
.kn-tip--main .kn-tip__conf::before { background: rgba(255, 255, 255, .14); color: #fff; }
.kn-tip--main .kn-tip__odds::before { background: rgba(255, 198, 41, .16); color: var(--gold); }
.kn-tip.is-won { box-shadow: 0 0 0 2px var(--t-payouts), var(--sh-1); }
.kn-tip.is-lost { opacity: .72; }
.kn-tip.is-won::after, .kn-tip.is-lost::after { position: absolute; top: -10px; left: 16px; padding: 4px 9px; border-radius: 6px; font: 800 11px/1 var(--font-d); letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.kn-tip.is-won::after { content: "Won"; background: var(--t-payouts); }
.kn-tip.is-lost::after { content: "Lost"; background: var(--t-live); }
html.kn-js .kn-tip__bar:not(.is-on) span { width: 0 !important; }

/* ---------------------------------------------------------------- Form cards */
.kn-formgrid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 14px 0 22px; }
@media (min-width: 640px) { .kn-formgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kn-formcard { background: var(--pr-card); border: 1px solid var(--pr-line); border-radius: var(--pr-r); overflow: hidden; box-shadow: var(--sh-1); }
.kn-formcard__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--pr-soft); border-bottom: 1px solid var(--pr-line); }
.kn-formcard__name { min-width: 0; font: 800 15px/1.2 var(--font-d); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kn-formcard__sum { margin-left: auto; flex: none; }
.kn-formcard__sum::before { content: attr(data-k); padding: 4px 8px; border-radius: 6px; background: #fff; border: 1px solid var(--pr-line); font: 800 11.5px/1 var(--font-d); color: var(--ink-2); letter-spacing: .03em; }
.kn-fr { display: grid; grid-template-columns: 50px 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 14px; }
.kn-fr + .kn-fr { border-top: 1px solid var(--pr-line); }
.kn-fr__d::before { content: attr(data-k); font: 600 12px/1 var(--font); color: var(--ink-3); white-space: nowrap; }
.kn-fr__ha::before { content: attr(data-k); display: inline-grid; place-items: center; width: 22px; height: 20px; border-radius: 5px; font: 800 10px/1 var(--font-d); }
.kn-fr__ha--h::before { background: var(--green-50); color: var(--green-600); }
.kn-fr__ha--a::before { background: var(--surface-3); color: var(--ink-2); }
.kn-fr__opp { min-width: 0; font: 600 14px/1.3 var(--font); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kn-fr__sc { min-width: 46px; padding: 5px 8px; border-radius: 7px; text-align: center; font: 800 13px/1 var(--font-d); color: #fff; font-variant-numeric: tabular-nums; }
.kn-fr__sc--w { background: var(--t-payouts); }
.kn-fr__sc--d { background: #8A979F; }
.kn-fr__sc--l { background: var(--t-live); }

/* ---------------------------------------------------------------- Head-to-head */
.kn-h2h { display: grid; gap: 8px; margin: 12px 0 22px; }
.kn-h2h__r { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "d d d" "h s a"; align-items: center; gap: 6px 12px; padding: 10px 14px; background: var(--pr-card); border: 1px solid var(--pr-line); border-radius: var(--pr-r-in); }
.kn-h2h__d { grid-area: d; text-align: center; }
.kn-h2h__d::before { content: attr(data-k); font: 600 11.5px/1 var(--font); color: var(--ink-3); letter-spacing: .03em; }
.kn-h2h__t { min-width: 0; font: 600 14.5px/1.3 var(--font); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kn-h2h__t--h { grid-area: h; text-align: right; }
.kn-h2h__t--a { grid-area: a; }
.kn-h2h__t.is-win { font-weight: 800; color: var(--ink); }
.kn-h2h__sc { grid-area: s; min-width: 64px; padding: 6px 10px; border-radius: 8px; background: var(--pr-dark); color: var(--gold); text-align: center; font: 800 15px/1 var(--font-d); font-variant-numeric: tabular-nums; }
.kn-h2h__sc i { font-style: normal; opacity: .55; margin: 0 4px; }
@media (min-width: 640px) {
  .kn-h2h__r { grid-template-columns: 96px minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "d h s a"; }
  .kn-h2h__d { text-align: left; }
}

/* ---------------------------------------------------------------- Standings and value tables */
.kn-st { margin: 12px 0 24px; background: var(--pr-card); border: 1px solid var(--pr-line); border-radius: var(--pr-r); box-shadow: var(--sh-1); overflow: auto; -webkit-overflow-scrolling: touch; }
.kn-st__t { width: 100%; min-width: 440px; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.kn-st__t caption { padding: 12px 14px 6px; text-align: left; font: 800 14px/1.3 var(--font-d); color: var(--ink); }
.kn-st__t thead th { padding: 10px 8px; background: var(--pr-dark); color: rgba(255, 255, 255, .85); font: 700 11px/1 var(--font); letter-spacing: .07em; text-transform: uppercase; text-align: center; white-space: nowrap; }
.kn-st__t td, .kn-st__t tbody th { padding: 9px 8px; border-top: 1px solid var(--pr-line); text-align: center; color: var(--ink-2); }
.kn-st__t tbody tr:first-child td, .kn-st__t tbody tr:first-child th { border-top: 0; }
.kn-st__t tbody tr:hover td, .kn-st__t tbody tr:hover th { background: var(--pr-soft); }
.kn-st__t .kn-st__team { position: sticky; left: 0; z-index: 1; min-width: 170px; text-align: left; background: var(--pr-card); }
.kn-st__t thead .kn-st__team { background: var(--pr-dark); }
.kn-st__tn { display: flex; align-items: center; gap: 8px; font: 700 14px/1.2 var(--font); color: var(--ink); white-space: nowrap; }
.kn-st__pos { width: 44px; }
.kn-st__pos span { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 4px; border-radius: 6px; background: var(--pr-soft); font: 800 12px/1 var(--font-d); color: var(--ink-2); }
.kn-st__pts { font: 800 14.5px/1 var(--font-d); color: var(--ink) !important; }
.kn-st__t tr.is-focus td, .kn-st__t tr.is-focus th { background: #FFFBEA; }
.kn-st__t tr.is-focus .kn-st__pos span { background: var(--cta); color: var(--cta-ink); }
.kn-st--value .kn-st__t { min-width: 480px; }
.kn-st--value .kn-st__team, .kn-st--value tbody th { font: 700 14px/1.3 var(--font); color: var(--ink); white-space: normal; }
.kn-edge { font: 800 14px/1 var(--font-d); }
.kn-edge--up { color: var(--t-payouts) !important; }
.kn-edge--down { color: var(--t-live) !important; }
.kn-edge--flat { color: var(--ink-3) !important; }

/* ---------------------------------------------------------------- Odds board and partner books */
.kn-oddsboard { margin: 14px 0 12px; background: var(--pr-card); border: 1px solid var(--pr-line); border-radius: var(--pr-r); box-shadow: var(--sh-1); overflow: hidden; }
.kn-oddsboard__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; background: linear-gradient(90deg, var(--pr-dark), var(--pr-dark-2)); color: #fff; }
.kn-oddsboard__src { display: grid; gap: 3px; margin-right: auto; line-height: 1.2; }
.kn-oddsboard__src b { font: 800 16px/1.1 var(--font-d); }
.kn-oddsboard__src span::before { content: attr(data-k); font-size: 12px; color: rgba(255, 255, 255, .7); }
.kn-oddrow { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 14px 16px; }
.kn-oddrow + .kn-oddrow { border-top: 1px solid var(--pr-line); }
.kn-oddrow__t::before { content: attr(data-k); font: 700 11.5px/1 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.kn-oddrow__c { display: grid; gap: 8px; }
.kn-oddrow__c--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kn-oddrow__c--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kn-odd { display: grid; justify-items: center; gap: 4px; padding: 10px 8px; border-radius: var(--pr-r-in); background: var(--pr-soft); border: 1px solid transparent; text-align: center; transition: transform .2s, background .2s, border-color .2s, box-shadow .2s; }
.kn-odd:hover { transform: translateY(-2px); background: #fff; border-color: var(--cta); box-shadow: var(--sh-1); }
.kn-odd__l { max-width: 100%; font: 600 12.5px/1.2 var(--font); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kn-odd__v { font: 800 21px/1 var(--font-d); color: var(--ink); font-variant-numeric: tabular-nums; }
.kn-odd__p::before { content: attr(data-k); font: 600 11.5px/1 var(--font); color: var(--ink-3); }
.kn-odd.is-pop .kn-odd__v { animation: kn-pop .6s ease-out; }
@keyframes kn-pop { 40% { transform: scale(1.16); color: var(--green-600); } }
.kn-oddsboard__note { padding: 10px 16px; border-top: 1px solid var(--pr-line); background: var(--pr-soft); }
.kn-oddsboard__note::before { content: attr(data-k); font-size: 12.5px; color: var(--ink-3); }
@media (min-width: 640px) {
  .kn-oddrow { grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 16px; }
  .kn-oddrow__c--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 66.6%; }
}
@media (max-width: 559px) { .kn-oddsboard__head .kn-btn { width: 100%; } }

.kn-books { display: grid; gap: 10px; margin: 0 0 24px; padding: 14px 16px; border-radius: var(--pr-r); background: linear-gradient(135deg, var(--pr-dark), var(--pitch-700)); color: #fff; }
.kn-books__t::before { content: attr(data-k); font: 700 11.5px/1 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--gold); }
.kn-books__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.kn-books__row + .kn-books__row { padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .1); }
.kn-books__px { display: inline-flex; gap: 6px; }
.kn-books__px b { position: relative; min-width: 56px; padding: 14px 8px 7px; border-radius: 8px; background: rgba(255, 255, 255, .1); text-align: center; font: 800 15px/1 var(--font-d); font-variant-numeric: tabular-nums; }
.kn-books__px b::before { content: attr(data-l); position: absolute; top: 3px; left: 0; right: 0; font: 700 9px/1 var(--font); color: rgba(255, 255, 255, .6); }
.kn-books__list { display: flex; flex-wrap: wrap; gap: 8px; }
.kn-books__b { display: inline-flex; border-radius: 10px; transition: transform .2s, box-shadow .2s; }
.kn-books__b:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--cta); }

/* ---------------------------------------------------------------- Probability bar */
.kn-probs { display: flex; gap: 4px; margin: 14px 0 18px; }
.kn-probs__s { display: grid; gap: 6px; min-width: 70px; transition: flex-grow 1.1s cubic-bezier(.2, .8, .2, 1); }
.kn-probs__s i { display: grid; place-items: center; height: 36px; border-radius: 9px; font-style: normal; }
.kn-probs__s i::before { content: attr(data-k); font: 800 14px/1 var(--font-d); color: #fff; }
.kn-probs__s em { font: 700 12.5px/1.2 var(--font); font-style: normal; color: var(--ink-2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kn-probs__s--h i { background: linear-gradient(90deg, var(--ng), #1FA866); }
.kn-probs__s--d i { background: #8A979F; }
.kn-probs__s--a i { background: linear-gradient(90deg, var(--pitch-700), var(--pitch-900)); }
html.kn-js .kn-probs:not(.is-on) .kn-probs__s { flex-grow: 1 !important; }

/* ---------------------------------------------------------------- Results tiles */
.kn-accgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 4px 0 24px; }
@media (min-width: 900px) { .kn-accgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kn-acc { display: grid; gap: 10px; padding: 16px; border-radius: var(--pr-r); background: var(--pr-card); border: 1px solid var(--pr-line); box-shadow: var(--sh-1); transition: transform .25s, box-shadow .25s; }
.kn-acc:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.kn-acc__l::before { content: attr(data-k); font: 700 11px/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.kn-acc b { font: 800 32px/1 var(--font-d); color: var(--ink); font-variant-numeric: tabular-nums; }
.kn-acc__bar { height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.kn-acc__bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--ng), #2BB673); }
.kn-acc__n::before { content: attr(data-k); font-size: 12.5px; color: var(--ink-3); }

/* ---------------------------------------------------------------- Hero floodlight */
.kn-hero--pred::before, .kn-hero--match::before { content: ""; position: absolute; inset: -40% -20% auto; height: 120%; background: radial-gradient(closest-side, rgba(255, 255, 255, .1), transparent 70%); transform: translateX(-60%); animation: kn-flood 14s ease-in-out infinite alternate; pointer-events: none; z-index: 0; }
@keyframes kn-flood { to { transform: translateX(60%); } }
.kn-hero--pred .kn-hero__in, .kn-hero--match .kn-hero__in { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .kn-tick__track, .kn-board::after, .kn-board__time, .kn-board__score, .kn-hero--pred::before, .kn-hero--match::before, .kn-odd.is-pop .kn-odd__v { animation: none !important; }
  .kn-tick__track { flex-wrap: wrap; width: auto; }
  .kn-tick__set[aria-hidden] { display: none; }
}
.kn-sidebox__more { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px 12px 8px; padding: 10px; border-radius: 10px; background: var(--pr-soft); color: var(--green-600); font: 700 13.5px/1 var(--font-d); text-decoration: none; }
.kn-sidebox__more .kn-i { width: 15px; height: 15px; }
.kn-sidebox__more:hover { background: var(--green-50); }
@media (max-width: 559px) { .kn-hero--match { padding-bottom: 36px; } }
@media (max-width: 559px) {
  /* Standings fit the phone width: team column takes what is left, long names end in an ellipsis. */
  .kn-st:not(.kn-st--value) .kn-st__t { min-width: 0; font-size: 13px; }
  .kn-st:not(.kn-st--value) .kn-st__t td, .kn-st:not(.kn-st--value) .kn-st__t th { padding-left: 3px; padding-right: 3px; }
  .kn-st:not(.kn-st--value) .kn-st__pos { width: 36px; padding-left: 8px !important; }
  .kn-st:not(.kn-st--value) .kn-st__team { position: static; width: 100%; max-width: 0; min-width: 0; }
  .kn-st:not(.kn-st--value) .kn-st__tn { min-width: 0; font-size: 13px; gap: 6px; }
  .kn-st:not(.kn-st--value) .kn-st__tn > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .kn-st:not(.kn-st--value) .kn-st__pts { padding-right: 10px !important; }
  .kn-h2h { gap: 0; border: 1px solid var(--pr-line); border-radius: var(--pr-r-in); background: var(--pr-card); overflow: hidden; }
  .kn-h2h__r { border: 0; border-radius: 0; padding: 10px 12px; gap: 4px 10px; }
  .kn-h2h__r + .kn-h2h__r { border-top: 1px solid var(--pr-line); }
  .kn-h2h__t { font-size: 13.5px; }
}
.kn-st__t .kn-st__pos { position: sticky; left: 0; z-index: 1; background: var(--pr-card); }
.kn-st__t thead .kn-st__pos { background: var(--pr-dark); }
.kn-st__t .kn-st__team { left: 44px; }
.kn-st__t tr.is-focus .kn-st__pos { background: #FFFBEA; }
@media (max-width: 559px) {
  .kn-st:not(.kn-st--value) .kn-st__t td:not(.kn-st__pos) { width: 24px; }
  .kn-st:not(.kn-st--value) .kn-st__t .kn-st__gd { width: 32px; }
  .kn-st:not(.kn-st--value) .kn-st__t .kn-st__pts { width: 34px; }
}
.kn-st__t thead th { border: 0; }
.kn-st__t thead tr { background: var(--pr-dark); }
@media (max-width: 559px) {
  .kn-st:not(.kn-st--value) .kn-st__t { table-layout: fixed; }
  .kn-st:not(.kn-st--value) .kn-st__t .kn-st__team { width: auto; max-width: none; overflow: hidden; }
  .kn-st:not(.kn-st--value) .kn-st__t thead th:nth-child(n+3) { width: 25px; }
  .kn-st:not(.kn-st--value) .kn-st__t thead th.kn-st__pos { width: 40px; }
  .kn-st:not(.kn-st--value) .kn-st__t thead th.kn-st__gd { width: 34px; }
  .kn-st:not(.kn-st--value) .kn-st__t thead th:last-child { width: 40px; }
}
.kn-st--value .kn-st__t .kn-st__team { left: 0; }
.kn-st--value tbody th { text-align: left; }
@media (max-width: 559px) {
  .kn-st--value .kn-st__t { min-width: 0; table-layout: fixed; font-size: 13px; }
  .kn-st--value .kn-st__t thead th { padding: 9px 3px; font-size: 10px; letter-spacing: .04em; }
  .kn-st--value .kn-st__t thead th:not(:first-child) { width: 50px; }
  .kn-st--value .kn-st__t thead th:first-child { padding-left: 12px; }
  .kn-st--value .kn-st__t td { padding: 9px 3px; }
  .kn-st--value .kn-st__team, .kn-st--value tbody th { position: static; padding: 9px 6px 9px 12px !important; font-size: 13px !important; line-height: 1.3 !important; overflow-wrap: anywhere; }
}
.kn-st--value thead .kn-st__team { color: rgba(255, 255, 255, .85) !important; font: 700 11px/1 var(--font) !important; letter-spacing: .07em; text-transform: uppercase; text-align: left; }
@media (max-width: 559px) { .kn-st--value thead .kn-st__team { font-size: 10px !important; } }
.kn-hero--pred .kn-hero__in > *, .kn-hero--match .kn-hero__in > * { min-width: 0; }
.kn-ptabs { max-width: 100%; }
@media (max-width: 559px) { .kn-hero--pred { padding-bottom: 40px; } }
@media (max-width: 440px) { .kn-mgroup__c { display: none; } }
@media (max-width: 679px) {
  /* Phone match row: tip bar runs the full width under the teams, so pick and chance sit on one line. */
  .kn-mrow__link { grid-template-areas: "when teams go" "tip tip tip"; gap: 10px 12px; padding: 12px; }
  .kn-mrow__teams { gap: 6px; }
  .kn-mrow__team .kn-crest { width: 26px; height: 26px; }
  .kn-mrow__name { font-size: 14.5px; }
  .kn-mrow__tip { padding: 8px 10px; gap: 4px 10px; }
  .kn-mrow__pick { font-size: 13.5px; }
  .kn-mrow__pct { font-size: 14px; }
}
@media (max-width: 679px) {
  .kn-mrow--fix .kn-mrow__link { gap: 8px 12px; }
  .kn-mrow--fix .kn-mrow__tip--soon { justify-content: flex-start; padding: 0 0 0 36px; background: none; border: 0; }
  .kn-mrow--fix .kn-mrow__open::before { font-size: 12px; color: var(--green-600); }
}
@media (max-width: 559px) {
  /* Never cut team names on phones (two "Manchester…" rows would read the same): wrap to a second line instead. */
  .kn-st:not(.kn-st--value) .kn-st__tn { white-space: normal; line-height: 1.2; }
  .kn-st:not(.kn-st--value) .kn-st__tn > span:last-child { overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .kn-st:not(.kn-st--value) .kn-st__t thead th:nth-child(n+3):not(.kn-st__gd):not(:last-child) { width: 22px; }
}
.kn-acc { align-content: start; }
.kn-acc__l { display: block; font-size: 11px; line-height: 1.3; min-height: 2.6em; }
.kn-acc__n { display: block; font-size: 12.5px; line-height: 1.4; }
.kn-acc b { display: block; }

/* ==================================================================
   Market pages: market rows, record, 2-odds slip, weekend days, grouped tabs
   ================================================================== */
.kn-prose > .kn-mlist--mk, .kn-prose > .kn-rec, .kn-prose > .kn-slip, .kn-prose > .kn-arec, .kn-prose > .kn-wkday, .kn-prose > .kn-mlist__note { max-width: none; }
.kn-mlist--mk { margin: 6px 0 26px; }
.kn-mgroup__ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(255, 255, 255, .1); color: var(--gold); }
.kn-mgroup__ic .kn-i { width: 16px; height: 16px; }
.kn-mrow__when .kn-lglogo { margin-top: 2px; }
.kn-mrow__when .kn-lglogo--xs { width: 20px; height: 20px; }
.kn-mrow__alt::before { content: attr(data-k); display: block; margin-top: 3px; font: 600 11.5px/1.2 var(--font); color: var(--ink-3); }
.kn-mrow__odd--fair::before { content: "fair " attr(data-k); color: var(--ink-3); font-weight: 700; }
.kn-mrow--mk .kn-mrow__tip { flex-wrap: wrap; }
.kn-mrow__bar { display: block; flex: 0 0 100%; width: 100%; min-height: 4px; margin-top: 2px; height: 4px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.kn-mrow__bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--ng), #2BB673); transform-origin: left; transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
html.kn-js .kn-mgroup[data-rv]:not(.is-in) .kn-mrow__bar i { transform: scaleX(0); }
.kn-mlist__note { margin: 6px 0 22px; padding: 16px 18px; border-radius: var(--pr-r); background: var(--pr-card); border: 1px dashed var(--line-2); }
.kn-mlist__note::before { content: attr(data-k); font-size: 15px; color: var(--ink-2); }

.kn-rec { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "p l" "b b"; align-items: center; gap: 8px 14px; margin: 6px 0 12px; padding: 16px 18px; border-radius: var(--pr-r); background: var(--pr-dark); color: #fff; }
.kn-rec__pct { grid-area: p; font: 800 34px/1 var(--font-d); color: var(--gold); font-variant-numeric: tabular-nums; }
.kn-rec__l { grid-area: l; }
.kn-rec__l::before { content: attr(data-k); font: 700 14px/1.3 var(--font); color: rgba(255, 255, 255, .85); }
.kn-rec__bar { grid-area: b; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.kn-rec__bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--cta), #FFE08A); }

.kn-slip { margin: 6px 0 26px; border-radius: 20px; background: var(--pr-card); border: 1px solid var(--pr-line); box-shadow: var(--sh-2); overflow: hidden; }
.kn-slip__h { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: linear-gradient(110deg, var(--pitch-950), var(--pr-dark-2)); color: #fff; }
.kn-slip__ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--cta); color: var(--cta-ink); }
.kn-slip__ic .kn-i { width: 19px; height: 19px; }
.kn-slip__t { flex: 1; min-width: 0; }
.kn-slip__t::before { content: attr(data-k); font: 800 16px/1.2 var(--font-d); }
.kn-slip__st::before { content: attr(data-k); display: inline-block; padding: 5px 12px; border-radius: 999px; font: 800 12px/1 var(--font-d); letter-spacing: .05em; text-transform: uppercase; }
.kn-slip__st--won::before { background: var(--t-payouts); color: #fff; }
.kn-slip__st--lost::before { background: var(--t-live); color: #fff; }
.kn-slip__legs { display: grid; }
.kn-slip__leg { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "teams odd" "meta odd" "pick p"; gap: 4px 16px; padding: 14px 18px; color: inherit; text-decoration: none; border-top: 1px solid var(--pr-line); transition: background .2s; }
.kn-slip__leg:first-child { border-top: 0; }
.kn-slip__leg:hover { background: var(--pr-soft); color: inherit; }
.kn-slip__leg::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--cta); }
.kn-slip__leg.is-won::before { background: var(--t-payouts); }
.kn-slip__leg.is-lost::before { background: var(--t-live); }
.kn-slip__teams { grid-area: teams; display: flex; align-items: center; gap: 7px; min-width: 0; font: 700 15px/1.25 var(--font); color: var(--ink); }
.kn-slip__teams span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kn-slip__teams i { font-style: normal; color: var(--ink-3); }
.kn-slip__teams i::before { content: attr(data-k); font-size: 12px; }
.kn-slip__meta { grid-area: meta; }
.kn-slip__meta::before { content: attr(data-k); font-size: 12.5px; color: var(--ink-3); }
.kn-slip__pick { grid-area: pick; align-self: center; font: 800 15px/1.3 var(--font-d); color: var(--green-600); }
.kn-slip__p { grid-area: p; align-self: center; justify-self: end; }
.kn-slip__p::before { content: attr(data-k); font: 700 12.5px/1 var(--font); color: var(--ink-3); }
.kn-slip__odd { grid-area: odd; align-self: center; justify-self: end; padding: 8px 12px; border-radius: 10px; background: var(--cta); color: var(--cta-ink); font: 800 18px/1 var(--font-d); font-variant-numeric: tabular-nums; }
.kn-slip__sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 12px; padding: 16px 18px; background: var(--pr-soft); border-top: 1px solid var(--pr-line); }
.kn-slip__k { grid-row: 1; }
.kn-slip__k::before { content: attr(data-k); font: 700 11.5px/1.2 var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.kn-slip__sum b { grid-row: 2; font: 800 24px/1.1 var(--font-d); color: var(--ink); font-variant-numeric: tabular-nums; }
.kn-slip__total { color: var(--cta-700) !important; }
.kn-slip__chance { color: var(--green-600) !important; }
@media (max-width: 559px) { .kn-slip__sum b { font-size: 19px; } .kn-slip__k::before { font-size: 10.5px; } .kn-slip__leg { padding: 12px 14px; } }

.kn-arec { display: grid; gap: 8px; margin: 0 0 24px; }
.kn-arec__r { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--pr-card); border: 1px solid var(--pr-line); }
.kn-arec__d::before { content: attr(data-k); font: 700 12.5px/1 var(--font); color: var(--ink-3); }
.kn-arec__legs { min-width: 0; font: 600 14px/1.35 var(--font); color: var(--ink-2); }
.kn-arec__o { font: 800 15px/1 var(--font-d); color: var(--ink); }
.kn-arec__st::before { content: attr(data-k); display: inline-block; padding: 4px 10px; border-radius: 999px; font: 800 11.5px/1 var(--font-d); color: #fff; background: var(--ink-3); }
.kn-arec__r.is-won .kn-arec__st::before { background: var(--t-payouts); }
.kn-arec__r.is-lost .kn-arec__st::before { background: var(--t-live); }
@media (max-width: 559px) { .kn-arec__r { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "d o s" "l l l"; gap: 6px 10px; } .kn-arec__d { grid-area: d; } .kn-arec__legs { grid-area: l; } .kn-arec__o { grid-area: o; } .kn-arec__st { grid-area: s; } }

.kn-wkday { margin: 6px 0 26px; }
.kn-wkday__h::before { content: attr(data-k); display: inline-flex; margin: 0 0 10px; padding: 7px 14px; border-radius: 999px; background: var(--pr-dark); color: var(--gold); font: 800 13px/1 var(--font-d); letter-spacing: .04em; text-transform: uppercase; }
.kn-wkday__sub::before { content: attr(data-k); display: block; margin: 16px 0 8px; font: 800 13px/1.2 var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.kn-wkday .kn-mrows--fix { margin: 0; }

/* grouped hero tabs: day / market / league rows */
.kn-ptabs { display: grid; gap: 10px; }
.kn-ptabs__row { display: grid; gap: 6px; min-width: 0; }
.kn-ptabs__lbl::before { content: attr(data-k); font: 800 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.kn-ptabs__row--market .kn-ptab, .kn-ptabs__row--league .kn-ptab { height: 34px; padding: 0 13px 0 10px; font-size: 13px; }
@media (min-width: 900px) {
  .kn-ptabs__row { grid-template-columns: 92px minmax(0, 1fr); align-items: start; gap: 12px; }
  .kn-ptabs__lbl { padding-top: 12px; }
  .kn-ptabs__row--market .kn-ptabs__lbl, .kn-ptabs__row--league .kn-ptabs__lbl { padding-top: 10px; }
  .kn-ptabs__track { display: flex; flex-wrap: wrap; gap: 8px; overflow: visible; -webkit-mask: none; mask: none; padding: 0; }
  .kn-ptab { justify-content: flex-start; }
}

/* market rows: the pick is drawn from data-k (the same label repeats on every row) */
.kn-mrow--mk .kn-mrow__pick::before { content: attr(data-k); }
@media (max-width: 559px) { .kn-slip__teams { flex-wrap: wrap; row-gap: 4px; font-size: 14px; } .kn-slip__teams span { white-space: normal; overflow: visible; } }
@media (max-width: 559px) { .kn-slip__teams { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; } .kn-slip__teams > :nth-child(1) { grid-area: 1 / 1; } .kn-slip__teams > :nth-child(2) { grid-area: 1 / 2; } .kn-slip__teams > i { display: none; } .kn-slip__teams > :nth-child(4) { grid-area: 2 / 2; } .kn-slip__teams > :nth-child(5) { grid-area: 2 / 1; } }

/* ==================================================================
   Football data pages: fixture rows, live state, zone table, cross-links
   ================================================================== */
.kn-prose > .kn-mlist--fx, .kn-prose > .kn-fxt, .kn-prose > .kn-fxt__legend, .kn-prose > .kn-fxt__upd, .kn-prose > .kn-fxrel { max-width: none; }
.kn-mlist--fx { margin: 6px 0 24px; display: grid; gap: 14px; }
.kn-mrow--fx .kn-fxrow__end { grid-area: tip; display: flex; align-items: center; justify-content: flex-end; min-width: 0; }
.kn-mrow--fx .kn-fxrow__end:empty { display: none; }
.kn-fxrow__cta::before { content: attr(data-k); display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--green-50); color: var(--green-600); font: 800 12.5px/1 var(--font-d); letter-spacing: .01em; white-space: nowrap; transition: background .2s, color .2s; }
a.kn-mrow__link:hover .kn-fxrow__cta::before { background: var(--green-600); color: #fff; }
span.kn-mrow__link { cursor: default; }
.kn-mrow__st--live { background: var(--t-live); color: #fff; box-shadow: none; position: relative; }
.kn-mrow__st--live::after { content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--t-live); animation: kn-blink 1.2s infinite; }
.kn-mrow--fx.is-live { background: #FFF6F6; }
@media (max-width: 679px) {
  .kn-mrow--fx .kn-mrow__link { grid-template-areas: "when teams go" "when tip tip"; }
  .kn-mrow--fx .kn-fxrow__end { justify-content: flex-start; padding-left: 0; }
  .kn-fxrow__cta::before { height: 26px; font-size: 12px; }
}
@media (min-width: 680px) {
  .kn-mrow--fx .kn-mrow__link { grid-template-columns: 64px minmax(0, 1fr) auto 18px; }
}

/* zone table */
.kn-fxt { margin: 6px 0 10px; }
.kn-fxt .kn-st__t { min-width: 560px; }
.kn-fxt .kn-st__pos { position: sticky; }
.kn-fxt td.kn-st__pos { box-shadow: inset 4px 0 0 var(--zc, transparent); }
.kn-fxt__form { width: 132px; }
.kn-fxt__form .kn-form { gap: 3px; }
.kn-fxt__form .kn-form__r { width: 20px; height: 20px; }
.kn-fxt abbr { text-decoration: none; cursor: help; }
.kn-fxt caption { padding: 12px 14px 8px; font: 800 14px/1.3 var(--font-d); color: var(--ink); text-align: left; }
.kn-fxt + .kn-fxt { margin-top: 16px; }
.kn-fxt__legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 4px 0 6px; }
.kn-fxt__z { display: inline-flex; align-items: center; gap: 7px; }
.kn-fxt__z::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--zc); }
.kn-fxt__z::after { content: attr(data-k); font: 600 13px/1.2 var(--font); color: var(--ink-2); }
.kn-fxt__upd { margin: 0 0 20px; }
.kn-fxt__upd::before { content: attr(data-k); font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 559px) {
  .kn-fxt .kn-st__t { min-width: 0; table-layout: fixed; font-size: 13px; }
  .kn-fxt .kn-fxt__gfga, .kn-fxt .kn-fxt__form { display: none; }
  .kn-fxt .kn-st__t td, .kn-fxt .kn-st__t th { padding-left: 3px; padding-right: 3px; }
  .kn-fxt .kn-st__team { position: static; width: auto; overflow: hidden; }
  .kn-fxt .kn-st__tn { white-space: normal; line-height: 1.2; font-size: 13px; gap: 6px; }
  .kn-fxt .kn-st__t thead th:nth-child(n+3) { width: 25px; }
  .kn-fxt .kn-st__t thead th.kn-st__pos { width: 40px; }
  .kn-fxt .kn-st__t thead th.kn-st__gd { width: 34px; }
  .kn-fxt .kn-st__t thead th:nth-last-child(2) { width: 40px; }
  .kn-fxt .kn-st__pos { padding-left: 8px !important; }
}

/* cross-links between a league's table, fixtures and predictions */
.kn-fxrel { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 0 0 28px; }
.kn-fxrel a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--pr-card); border: 1px solid var(--pr-line); box-shadow: var(--sh-1); color: var(--ink); font: 700 15px/1.25 var(--font-d); text-decoration: none; transition: transform .25s, border-color .25s; }
.kn-fxrel a:hover { transform: translateY(-2px); border-color: var(--green-600); color: var(--ink); }
.kn-fxrel a > span { flex: 1; min-width: 0; }
.kn-fxrel .kn-ai { width: 34px; height: 34px; padding: 8px; flex: none; border-radius: 10px; background: var(--green-50); color: var(--green-600); }
.kn-fxrel a > .kn-i:last-child { width: 16px; height: 16px; color: var(--green-600); }
.kn-fxlink { font-size: 15px; }
.kn-fxlink a { font-weight: 700; }
@media (max-width: 559px) { .kn-fxt .kn-st__t { width: 100%; } .kn-fxt .kn-st__t thead th:nth-child(n+3) { width: 23px; } .kn-fxt .kn-st__t thead th.kn-st__pos { width: 36px; } .kn-fxt .kn-st__t thead th.kn-st__gd { width: 32px; } .kn-fxt .kn-st__t thead th:nth-last-child(2) { width: 36px; } .kn-fxt .kn-st__pts { padding-right: 8px !important; } }
@media (max-width: 559px) { .kn-st.kn-fxt .kn-st__t thead th:nth-last-child(2) { width: 36px !important; } }

/* ==================================================================
   Compact fixture lists (football pages): slim league/day headings,
   one line per match on wide screens, two stacked team lines on phones
   ================================================================== */
.kn-prose > .kn-fxl { max-width: none; }
.kn-fxl { display: grid; gap: 12px; margin: 6px 0 24px; }
.kn-fxg { background: var(--pr-card); border: 1px solid var(--pr-line); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(2, 22, 14, .04); }
.kn-fxg__h { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 14px; background: #F5F8F6; border-bottom: 1px solid var(--pr-line); }
.kn-fxg__nm { min-width: 0; font: 800 14px/1.2 var(--font-d); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-fxg__nm[data-k]::before { content: attr(data-k); }
.kn-fxg__nm a { color: inherit; text-decoration: none; }
.kn-fxg__nm a:hover { color: var(--green-600); }
.kn-fxg__c::before { content: attr(data-k); font: 700 11px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.kn-fxg__n { margin-left: auto; display: inline-grid; place-items: center; min-width: 24px; height: 20px; padding: 0 6px; border-radius: 999px; background: #fff; border: 1px solid var(--pr-line); }
.kn-fxg__n::before { content: attr(data-k); font: 800 11px/1 var(--font-d); color: var(--ink-2); }
.kn-fxg__ic { display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--green-600); }
.kn-fxg__ic .kn-i { width: 16px; height: 16px; }
.kn-fxg .kn-lglogo--xs { width: 22px; height: 22px; }
.kn-fxg__rows { list-style: none; margin: 0; padding: 0; }
.kn-prose .kn-fxg__rows > li { margin: 0; padding: 0; }
.kn-prose .kn-fxg__rows > li::before { content: none; }
.kn-fxr + .kn-fxr { border-top: 1px solid var(--pr-line); }
.kn-fxr__a { display: grid; grid-template-columns: 50px minmax(0, 1fr) 58px minmax(0, 1fr) 40px; align-items: center; column-gap: 10px; min-height: 42px; padding: 4px 12px; color: var(--ink); text-decoration: none; font-size: 14px; line-height: 1.25; }
a.kn-fxr__a { transition: background .15s; }
a.kn-fxr__a:hover { background: var(--green-50); color: var(--ink); }
.kn-fxr__t { font: 700 13px/1 var(--font-d); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.kn-fxr__t[data-k]::before { content: attr(data-k); }
.kn-fxr__t--ft { color: var(--ink-3); font-size: 12px; }
.kn-fxr__t--off { color: #B7791F; font-size: 12px; }
.kn-fxr__t--live { color: var(--t-live); display: inline-flex; align-items: center; gap: 5px; }
.kn-fxr__t--live::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--t-live); animation: kn-blink 1.2s infinite; }
.kn-fxr__tm { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kn-fxr__tm--h { flex-direction: row-reverse; text-align: right; }
.kn-fxr__nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.kn-fxr__tm.is-win .kn-fxr__nm { font-weight: 800; }
.kn-fxr__sc { display: flex; align-items: center; justify-content: center; gap: 5px; height: 26px; border-radius: 7px; background: #10261C; color: #fff; font: 800 14px/1 var(--font-d); font-variant-numeric: tabular-nums; }
.kn-fxr__sc i { font-style: normal; opacity: .55; }
.kn-fxr__g { font-weight: 800; }
.kn-fxr__sc--v { background: none; color: var(--ink-3); }
.kn-fxr__sc--v::before { content: attr(data-k); font: 600 12.5px/1 var(--font); }
.kn-fxr.is-live .kn-fxr__sc { background: var(--t-live); }
.kn-fxr__tip { justify-self: end; }
.kn-fxr__tip::before { content: attr(data-k); display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--green-50); color: var(--green-600); font: 800 11.5px/1 var(--font-d); transition: background .15s, color .15s; }
.kn-fxr__tip--none::before { content: none; }
a.kn-fxr__a:hover .kn-fxr__tip::before { background: var(--green-600); color: #fff; }
@media (max-width: 599px) {
  .kn-fxr__a { grid-template-columns: 42px minmax(0, 1fr) 22px auto; grid-template-areas: "t h hg x" "t a ag x"; row-gap: 4px; column-gap: 8px; padding: 7px 12px; }
  .kn-fxr__t { grid-area: t; }
  .kn-fxr__tm--h { grid-area: h; flex-direction: row; text-align: left; }
  .kn-fxr__tm--a { grid-area: a; }
  .kn-fxr__tm .kn-crest--xs { width: 18px; height: 18px; }
  .kn-fxr__sc { display: contents; }
  .kn-fxr__sc i, .kn-fxr__sc--v { display: none; }
  .kn-fxr__g { font: 800 14px/1 var(--font-d); color: var(--ink); text-align: right; }
  .kn-fxr__g--h { grid-area: hg; }
  .kn-fxr__g--a { grid-area: ag; }
  .kn-fxr.is-live .kn-fxr__g { color: var(--t-live); }
  .kn-fxr__tip { grid-area: x; }
  .kn-fxr__tip::before { height: 20px; padding: 0 7px; font-size: 11px; }
  .kn-fxg__h { padding: 6px 12px; }
}

/* season numbers strip */
.kn-prose > .kn-fxs, .kn-prose > .kn-fxspot { max-width: none; }
.kn-fxs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 8px; }
.kn-fxs__t { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; border-radius: 12px; background: var(--pr-card); border: 1px solid var(--pr-line); overflow: hidden; }
.kn-fxs__t b { font: 800 22px/1 var(--font-d); color: var(--ink); font-variant-numeric: tabular-nums; }
.kn-fxs__t span::before { content: attr(data-k); font: 600 12px/1.25 var(--font); color: var(--ink-3); }
.kn-fxs__bar { position: absolute; left: 0; bottom: 0; height: 4px; width: var(--w); background: var(--green-600); border-radius: 0 4px 0 0; }
.kn-fxs__t--d .kn-fxs__bar { background: #C9A227; }
.kn-fxs__t--a .kn-fxs__bar { background: #3B6FD8; }

/* national team spotlight */
.kn-fxspot { margin: 6px 0 22px; padding: 18px 20px 16px; border-radius: 18px; color: #fff; background: radial-gradient(120% 140% at 0% 0%, #138A55 0%, #0B4D30 48%, #072B1C 100%); box-shadow: var(--sh-1); }
.kn-fxspot__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.kn-fxspot__lbl::before { content: attr(data-k); display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; background: #F2C94C; color: #1D1A05; font: 800 11.5px/1 var(--font-d); text-transform: uppercase; letter-spacing: .05em; }
.kn-fxspot__meta { font: 600 13px/1.3 var(--font); color: rgba(255, 255, 255, .78); }
.kn-fxspot__m { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; margin: 16px 0 10px; }
.kn-fxspot__tm { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font: 800 16px/1.2 var(--font-d); }
.kn-fxspot__tm .kn-crest--lg { width: 60px; height: 60px; }
.kn-fxspot__sc, .kn-fxspot__ko { font: 800 34px/1 var(--font-d); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kn-fxspot__sc i { font-style: normal; opacity: .5; margin: 0 6px; }
.kn-fxspot__v { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: 13px; color: rgba(255, 255, 255, .8); text-align: center; }
.kn-fxspot__v .kn-i { width: 14px; height: 14px; flex: none; }
.kn-fxspot__form { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .14); }
.kn-fxspot__fl::before { content: attr(data-k); font: 700 11px/1 var(--font); text-transform: uppercase; letter-spacing: .06em; color: rgba(255, 255, 255, .7); }
.kn-fxspot__fs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; margin: 8px 0 0; padding: 0; }
.kn-prose .kn-fxspot__form li { margin: 0; padding: 0; }
.kn-prose .kn-fxspot__form li::before { content: none; }
.kn-fxspot__f { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: #fff; }
.kn-fxspot__f span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-fxspot__f i { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 5px; font-style: normal; }
.kn-fxspot__f i::before { content: attr(data-k); font: 800 11px/1 var(--font-d); }
.kn-fxspot__f--w i { background: #22B573; } .kn-fxspot__f--d i { background: #8A9690; } .kn-fxspot__f--l i { background: #E0393F; }
@media (max-width: 559px) {
  .kn-fxspot { padding: 16px 14px 14px; }
  .kn-fxspot__tm { font-size: 14px; }
  .kn-fxspot__sc, .kn-fxspot__ko { font-size: 28px; }
  .kn-fxs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.kn-fxl--team .kn-fxr__a { grid-template-columns: 74px minmax(0, 1fr) 58px minmax(0, 1fr) 40px; }
.kn-fxr__t--d { display: flex; flex-direction: column; gap: 3px; }
.kn-fxr__t--d time::before { content: attr(data-k); font: 800 13px/1 var(--font-d); color: var(--ink); }
.kn-fxr__t--d small { font: 600 10.5px/1.1 var(--font); color: var(--ink-3); white-space: nowrap; }
@media (max-width: 599px) {
  .kn-fxl--team .kn-fxr__a { grid-template-columns: 64px minmax(0, 1fr) 22px auto; }
}
.kn-prose ul.kn-fxg__rows, .kn-prose .kn-fxspot__fs { margin-bottom: 0; padding-left: 0; }
.kn-prose ul.kn-fxg__rows { margin: 0; }
.kn-prose > .kn-fxnext { max-width: none; }
.kn-fxnext { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; }
.kn-fxnext__l::before { content: attr(data-k); font: 800 15px/1.2 var(--font-d); color: var(--ink); }
.kn-fxnext a { margin-left: auto; font: 700 13.5px/1 var(--font-d); color: var(--green-600); }
/* Day page: fixtures without a published tip show only kick-off and teams */
.kn-mrow__tip--soon:has(.kn-mrow__open[data-k=""]) { visibility: hidden; }
/* League season figures (prediction league pages): two by two, team names wrap */
.kn-fxs--lg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kn-fxs--lg .kn-fxs__t b { font-size: 18px; line-height: 1.2; overflow-wrap: anywhere; }