/* =====================================================================
   cyklingodds.css — shared stylesheet for cyklingodds.dk
   Tour de France "maillot jaune" theme: yellow accent on an asphalt base.
   Variable NAMES are kept from the original (--grass etc.) so the whole
   sheet need not change; only their VALUES are re-tinted to the cycling
   palette. --grass = the primary yellow accent; --gold = the brighter
   best-odds highlight.
   ===================================================================== */
:root{
  --pitch:#14130c; --pitch-2:#1d1b12; --line:#3a3320; --line-soft:#2a2517;
  --grass:#f5c518; --grass-deep:#c79b08; --gold:#ffd84d; --gold-deep:#e8bb20;
  --chalk:#f6f3ea; --chalk-dim:#b8b2a0; --chalk-faint:#867f6c;
  --best-bg:#2b2410;
  --display:'Archivo',sans-serif; --cond:'Oswald',sans-serif; --mono:'Spline Sans Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--display); color:var(--chalk);
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(245,197,24,.12), transparent 60%),
    radial-gradient(700px 600px at -10% 110%, rgba(230,57,70,.07), transparent 55%),
    var(--pitch);
  min-height:100vh; padding:0 0 80px;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.6;
  background:repeating-linear-gradient(90deg, transparent 0 78px, rgba(255,255,255,.014) 78px 156px);
}
.wrap{max-width:920px; margin:0 auto; padding:0 18px; position:relative; z-index:1}

/* ---------- HERO ---------- */
header{padding:54px 0 30px; border-bottom:1px solid var(--line-soft)}
.kicker{
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.32em;
  font-size:12px; color:var(--grass); font-weight:600; display:flex; align-items:center; gap:10px;
}
.kicker::after{content:""; height:1px; flex:1; background:linear-gradient(90deg,var(--line),transparent)}
h1{
  font-family:var(--display); font-weight:900; line-height:.92; letter-spacing:-.02em;
  font-size:clamp(38px,8vw,76px); margin:14px 0 8px; text-transform:uppercase;
}
h1 .em{color:var(--gold)}
.sub{color:var(--chalk-dim); font-size:16px; max-width:580px; line-height:1.5}
.meta{
  margin-top:22px; display:flex; gap:26px; flex-wrap:wrap; font-family:var(--mono);
  font-size:12.5px; color:var(--chalk-faint);
}
.meta b{color:var(--chalk); font-weight:600}
.meta .dot{color:var(--grass)}

/* ---------- REG BAR ---------- */
.reg-bar{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px;
  margin-top:18px; padding:10px 14px;
  background:rgba(245,197,24,.05); border:1px solid rgba(245,197,24,.18); border-radius:9px;
  font-family:var(--mono); font-size:11.5px; color:var(--chalk-dim); line-height:1.4;
}
.reg-bar .reg-age{
  background:var(--gold); color:var(--pitch); font-family:var(--display); font-weight:800;
  font-size:11px; padding:2px 7px; border-radius:4px; letter-spacing:0;
}
.reg-bar .dot{color:var(--chalk-faint); opacity:.5}
.reg-bar a{color:var(--gold); text-decoration:none; font-weight:600; border-bottom:1px dotted rgba(245,197,24,.45)}
.reg-bar a:hover{color:#fff8d6; border-bottom-color:#fff8d6}

/* ---------- CONTROLS ---------- */
.controls{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  padding:22px 0 16px; position:sticky; top:0; z-index:5;
  background:linear-gradient(var(--pitch) 70%, transparent);
}
.search{flex:1; min-width:220px; position:relative}
.search input{
  width:100%; background:var(--pitch-2); border:1px solid var(--line);
  color:var(--chalk); font-family:var(--display); font-size:15px; font-weight:500;
  padding:13px 16px 13px 42px; border-radius:11px; outline:none; transition:.2s;
}
.search input:focus{border-color:var(--grass); box-shadow:0 0 0 3px rgba(245,197,24,.15)}
.search svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--chalk-faint)}
.hint{font-family:var(--mono); font-size:11.5px; color:var(--chalk-faint); white-space:nowrap}
/* on narrow screens let the hint drop to its own row and wrap over 2–3 lines
   instead of forcing the page wider (which caused horizontal scroll on mobile) */
@media(max-width:560px){
  .hint{white-space:normal; flex-basis:100%; line-height:1.45}
}

/* ---- CALC ---- */
.calc{
  display:flex; flex-direction:column; gap:10px;
  background:rgba(245,197,24,.05); border:1px solid var(--line-soft); border-left:2px solid var(--grass);
  border-radius:9px; padding:12px 14px; margin-top:12px;
}
.calc-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.calc-l{
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.12em;
  font-size:10.5px; font-weight:600; color:var(--grass);
}
.calc-stake{display:flex; align-items:center; gap:6px; flex-shrink:0}
.calc-input{
  width:78px; background:var(--pitch); border:1px solid var(--line); color:var(--chalk);
  font-family:var(--mono); font-size:14px; font-weight:600; padding:6px 10px; border-radius:7px;
  outline:none; text-align:right; -moz-appearance:textfield;
}
.calc-input::-webkit-outer-spin-button, .calc-input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.calc-input:focus{border-color:var(--grass)}
.calc-unit{font-family:var(--mono); font-size:12px; color:var(--chalk-faint)}
.calc-out{flex:1; display:flex; flex-direction:column; gap:2px; min-width:120px}
.calc-out-lbl{font-family:var(--mono); font-size:10.5px; color:var(--chalk-faint); text-transform:uppercase; letter-spacing:.06em}
.calc-out-val{font-family:var(--mono); font-weight:700; font-size:17px; color:var(--gold)}
.calc-prob{padding-top:8px; border-top:1px dashed var(--line-soft); font-family:var(--mono); font-size:11.5px}
.calc-prob-lbl{color:var(--chalk-faint); text-transform:uppercase; letter-spacing:.08em; font-size:10px}
.calc-prob-val{color:var(--chalk); font-weight:600}
.calc-prob-sep{color:var(--chalk-faint); opacity:.5}
@media(max-width:560px){
  .calc-out{min-width:0; width:100%}
}

/* ---- EMBED MODE ---- */
body.embed{padding:0}
body.embed .wrap{max-width:none; padding:8px 12px}
body.embed header,
body.embed .reg-bar,
body.embed .summary,
body.embed .chart-wrap,
body.embed .article,
body.embed footer,
body.embed .hint{display:none !important}
body.embed .controls{position:static; padding:0 0 12px}
body.embed .embed-footer{
  display:block; margin-top:14px; padding:10px 0; border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:11px; color:var(--chalk-faint); text-align:center;
}
body.embed .embed-footer a{color:var(--gold); text-decoration:none; font-weight:600}
.embed-footer{display:none}

/* ---- CHART EMBED (widget shown only on other sites) ---- */
body.embed-chart{padding:0; background:var(--pitch)}
body.embed-chart .wrap{max-width:none; padding:10px 12px 4px}
/* re-show the chart that body.embed hides, drop everything else */
body.embed-chart .chart-wrap{display:block !important; margin:0}
body.embed-chart .list,
body.embed-chart .meta-bar,
body.embed-chart .controls,
body.embed-chart .xlinks{display:none !important}
body.embed-chart .art-divider,
body.embed-chart .chart-controls,
body.embed-chart .chart-head .toggle,
body.embed-chart .chart-head .sub,
body.embed-chart .embed-btn,
body.embed-chart .chart-zoom-btn{display:none !important}
body.embed-chart .chart-head{margin-bottom:10px}
body.embed-chart .chart-head h2{font-size:18px}

/* "Indlejr" button */
.embed-btn{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  background:var(--pitch-2); color:var(--chalk-dim); border:1px solid var(--line);
  border-radius:9px; padding:8px 13px; font-family:var(--cond); font-size:13px;
  text-transform:uppercase; letter-spacing:.05em; font-weight:600; transition:.15s;
}
.embed-btn:hover{color:var(--chalk); border-color:var(--gold)}
.embed-btn svg{width:16px; height:16px}

/* embed-code builder panel */
.embed-panel{
  margin-top:14px; padding:16px 18px; background:var(--pitch-2);
  border:1px solid var(--line); border-radius:13px; max-width:560px;
}
.embed-panel[hidden]{display:none}
.ep-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:4px}
.ep-head strong{font-family:var(--display); font-size:16px; color:var(--chalk)}
.ep-close{background:none; border:none; color:var(--chalk-faint); font-size:16px; cursor:pointer; line-height:1}
.ep-close:hover{color:var(--chalk)}
.ep-hint{font-size:13px; color:var(--chalk-dim); margin:0 0 12px; line-height:1.5}
.ep-metric{display:flex; align-items:center; gap:14px; font-size:13px; color:var(--chalk-dim); margin-bottom:12px}
.ep-metric label{display:inline-flex; align-items:center; gap:5px; cursor:pointer}
.ep-metric input{accent-color:var(--grass)}
.ep-search{
  width:100%; box-sizing:border-box; padding:8px 11px; margin-bottom:8px;
  background:var(--pitch); border:1px solid var(--line); border-radius:8px;
  color:var(--chalk); font-family:var(--body); font-size:13px;
}
.ep-list{
  max-height:168px; overflow-y:auto; display:grid; grid-template-columns:1fr 1fr; gap:2px 14px;
  padding:8px 10px; background:var(--pitch); border:1px solid var(--line-soft); border-radius:8px;
}
.ep-item{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--chalk-dim); padding:3px 0; cursor:pointer; min-width:0}
.ep-item input{accent-color:var(--grass); flex:none}
.ep-item:hover{color:var(--chalk)}
.ep-empty{color:var(--chalk-faint); font-size:13px; padding:6px 2px; grid-column:1 / -1}
.ep-codelabel{display:block; font-family:var(--cond); text-transform:uppercase; letter-spacing:.06em; font-size:10.5px; color:var(--chalk-faint); margin:13px 0 6px}
.ep-code{
  width:100%; box-sizing:border-box; resize:vertical; padding:10px 12px;
  background:var(--pitch); border:1px solid var(--line); border-radius:8px;
  color:var(--chalk-dim); font-family:var(--mono); font-size:11.5px; line-height:1.5;
}
.ep-actions{display:flex; align-items:center; gap:12px; margin-top:10px}
.ep-copy{
  background:var(--gold); color:var(--pitch); border:none; border-radius:8px;
  padding:9px 16px; font-family:var(--cond); text-transform:uppercase; letter-spacing:.05em;
  font-weight:700; font-size:13px; cursor:pointer;
}
.ep-copy:hover{filter:brightness(1.08)}
.ep-copied{color:var(--grass); font-size:13px; font-weight:600}
@media(max-width:560px){ .ep-list{grid-template-columns:1fr} }

/* ---- EXPAND / NEAR-FULLSCREEN CHART ---- */
.chart-zoom-btn{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  background:var(--pitch-2); color:var(--chalk-dim); border:1px solid var(--line);
  border-radius:9px; padding:8px 13px; font-family:var(--cond); font-size:13px;
  text-transform:uppercase; letter-spacing:.05em; font-weight:600; transition:.15s;
}
.chart-zoom-btn:hover{color:var(--chalk); border-color:var(--gold)}
.chart-zoom-btn svg{width:16px; height:16px}
@media(max-width:560px){.embed-btn,.chart-zoom-btn{display:none !important}}

body.chart-zoom-open{overflow:hidden}
.chart-overlay{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:3vh 3vw; background:rgba(6,20,12,.80); backdrop-filter:blur(3px);
  animation:overlay-in .16s ease-out;
}
.chart-overlay[hidden]{display:none}
@keyframes overlay-in{from{opacity:0}to{opacity:1}}
.chart-overlay-inner{
  position:relative; width:94vw; height:94vh; max-width:1400px;
  background:var(--pitch); border:1px solid var(--line); border-radius:16px;
  padding:24px clamp(16px,3vw,34px) 22px; overflow:auto;
  box-shadow:0 30px 90px rgba(0,0,0,.55);
}
.chart-overlay-close{
  position:absolute; top:14px; right:16px; z-index:3;
  width:36px; height:36px; border-radius:9px; cursor:pointer; font-size:16px; line-height:1;
  background:var(--pitch-2); border:1px solid var(--line); color:var(--chalk-dim);
}
.chart-overlay-close:hover{color:var(--chalk); border-color:var(--gold)}

/* chart appearance while expanded */
.chart-overlay .chart-wrap{margin:0; max-width:none; display:flex; flex-direction:column; min-height:100%}
.chart-overlay .chart-wrap .art-divider{display:none}
.chart-overlay .chart-head{padding-right:46px}        /* clear the close button */
.chart-overlay .chart-box{flex:none}
.chart-overlay .chart-controls{margin-top:18px}
.chart-overlay .chips{max-height:none}                 /* show every team, we have room */


/* ---------- LIST ---------- */
.list{display:flex; flex-direction:column; gap:9px; margin-top:6px}
.card{
  background:linear-gradient(180deg,var(--pitch-2),#0c2417);
  border:1px solid var(--line-soft); border-radius:14px; overflow:hidden;
  transition:border-color .2s, transform .15s;
}
.card:hover{border-color:var(--line)}
.card.top3{border-color:rgba(245,197,24,.32)}
.row{
  display:grid; grid-template-columns:46px 1fr auto auto; align-items:center;
  gap:16px; padding:15px 18px; cursor:pointer;
}
.rank{
  font-family:var(--cond); font-weight:700; font-size:22px; color:var(--chalk-faint);
  text-align:center; font-variant-numeric:tabular-nums; line-height:1;
  display:flex; flex-direction:column; align-items:center; gap:3px;
}
.rank-mv{
  display:inline-flex; align-items:center; gap:1px;
  font-family:var(--mono); font-size:9.5px; font-weight:600; line-height:1;
}
.rank-mv svg{width:8px;height:8px}
.rank-mv.up{color:#4fcf7f}
.rank-mv.down{color:#f0726a}
.top3 .rank{color:var(--gold)}

/* ---- KNOCKED OUT ---- */
.card.out{opacity:.58; filter:saturate(.4)}
.card.out:hover{opacity:.78}
.card.out .rank{color:var(--chalk-faint)}
.card.out .team{color:var(--chalk-dim); text-decoration:line-through; text-decoration-color:var(--chalk-faint); text-decoration-thickness:1.5px}
.card.out .best .lbl{color:var(--chalk-faint)}
.card.out .best .val{color:var(--chalk-dim)}
.out-tag{
  display:inline-flex; align-items:center; gap:5px; margin-left:9px;
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.1em;
  font-size:10px; font-weight:600; padding:2px 8px 3px; border-radius:5px;
  background:rgba(200,60,60,.14); color:#e8867f; border:1px solid rgba(200,60,60,.3);
  vertical-align:middle; white-space:nowrap;
}
.out-tag svg{width:11px;height:11px}
.card.out .team{display:inline}

.team-block{min-width:0}
.team{
  font-family:var(--display); font-weight:800; font-size:clamp(17px,3.5vw,21px);
  letter-spacing:-.01em; line-height:1.05;
}
.implied{font-family:var(--mono); font-size:11.5px; color:var(--chalk-faint); margin-top:4px; display:flex; align-items:center; flex-wrap:wrap; gap:8px}
.best{text-align:right; min-width:96px}
.best .lbl{
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.12em;
  font-size:9.5px; color:var(--grass); font-weight:600; margin-bottom:1px;
}
.best .val{
  font-family:var(--mono); font-weight:600; font-size:clamp(22px,5vw,30px);
  color:var(--chalk); line-height:1; font-variant-numeric:tabular-nums;
}
.best .bk{font-family:var(--display); font-size:11.5px; color:var(--chalk-dim); margin-top:14px; font-weight:600}
.bk-more{
  display:inline-block; margin-left:3px; padding:1px 5px; border-radius:4px;
  background:rgba(245,197,24,.12); color:var(--gold); font-size:10px;
  font-weight:600; vertical-align:1px; cursor:help;
}
.chev{
  width:30px; height:30px; border-radius:8px; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--chalk-dim); transition:.25s; flex-shrink:0;
}
.card.open .chev{transform:rotate(180deg); background:var(--grass); border-color:var(--grass); color:var(--pitch)}
.row:hover .chev{border-color:var(--grass); color:var(--grass)}

/* ---------- EXPAND ---------- */
.detail{display:none; border-top:1px dashed var(--line); padding:4px 18px 18px}
.card.open .detail{display:block; animation:slide .3s ease}
@keyframes slide{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}
.detail-head{
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.18em; font-size:11px;
  color:var(--chalk-faint); padding:14px 0 10px; display:flex; justify-content:space-between; align-items:center;
}
.detail-head .mv{letter-spacing:0}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:7px}
.bk-cell{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  background:var(--pitch); border:1px solid var(--line-soft); border-radius:8px;
  padding:9px 11px; text-decoration:none; color:inherit; transition:.15s;
}
.bk-cell:hover{border-color:var(--grass); background:var(--best-bg); transform:translateY(-1px)}
.bk-cell .n{font-size:11.5px; font-weight:600; color:var(--chalk-dim); white-space:normal; line-height:1.15}
.bk-cell .orow{display:flex; align-items:baseline; gap:7px; width:100%}
.bk-cell .o{font-family:var(--mono); font-weight:600; font-size:16px; color:var(--chalk); line-height:1}

/* ---- MOVEMENT ARROWS (DK: stiger=grøn, falder=rød) ---- */
.mv{
  display:inline-flex; align-items:center; gap:2px; font-family:var(--mono);
  font-size:10px; font-weight:600; white-space:nowrap;
}
.mv svg{width:9px;height:9px}
.mv.stiger{color:#3fbf6f}    /* odds højere = grøn */
.mv.falder{color:#e5564a}    /* odds lavere = rød */
.bk-cell .mv{font-size:10px}
.best .mv{font-size:11px; justify-content:flex-end; margin-top:4px}
/* team trend pill in row */
.trend{
  display:inline-flex; align-items:center; gap:4px;
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.08em;
  font-size:10px; font-weight:600; padding:2px 8px 3px; border-radius:5px; white-space:nowrap;
}
.trend svg{width:10px;height:10px}
.trend.stiger{background:rgba(63,191,111,.14); color:#4fcf7f; border:1px solid rgba(63,191,111,.32)}
.trend.falder{background:rgba(229,86,74,.13); color:#f0726a; border:1px solid rgba(229,86,74,.32)}
.bk-cell.is-best{border-color:var(--gold); background:rgba(245,197,24,.08)}
.bk-cell.is-best .o{color:var(--gold)}
.bk-cell.is-best .n{color:var(--gold-deep)}

/* ---- SUMMARY / HERO BAR ---- */
.summary{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line-soft); border:1px solid var(--line); border-radius:14px;
  overflow:hidden; margin-top:26px;
}
.scell{background:linear-gradient(180deg,var(--pitch-2),#0c2417); padding:16px 18px}
.scell .sl{
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.16em;
  font-size:10px; font-weight:600; color:var(--chalk-faint); margin-bottom:8px;
  display:flex; align-items:center; gap:6px;
}
.scell .sl svg{width:13px;height:13px}
.scell.fav .sl{color:var(--gold)}
.scell.val .sl{color:var(--grass)}
.scell .st{font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-.01em; line-height:1.15}
.scell .sd{font-family:var(--mono); font-size:12px; color:var(--chalk-dim); margin-top:5px}
.scell .sd b{color:var(--chalk)}
@media(max-width:560px){
  .summary{grid-template-columns:1fr}
  .scell .st{font-size:17px}
}
.vbadge{
  display:inline-flex; align-items:center; gap:4px;
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.08em;
  font-size:10px; font-weight:600; padding:2px 7px 3px; border-radius:5px;
  background:rgba(245,197,24,.14); color:var(--gold); border:1px solid rgba(245,197,24,.3);
}
.vbadge svg{width:11px;height:11px}
.cta{
  position:relative; display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:14px; padding:14px 18px; overflow:hidden;
  background:linear-gradient(100deg,var(--grass-deep),var(--grass) 55%,#ffe06b);
  background-size:200% 100%; color:var(--pitch);
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.12em; font-weight:700;
  font-size:14px; border-radius:11px; text-decoration:none;
  box-shadow:0 4px 16px rgba(245,197,24,.22);
  transition:transform .15s, box-shadow .25s, background-position .5s;
}
/* shimmer sweep that runs when the card opens */
.cta::before{
  content:""; position:absolute; top:0; left:-60%; width:50%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);
}
.card.open .cta::before{animation:sweep 1.1s ease .15s 1}
@keyframes sweep{0%{left:-60%}100%{left:130%}}
/* soft attention pulse on the glow */
.card.open .cta{animation:ctaIn .35s ease both, ctaGlow 2.8s ease-in-out 1s infinite}
@keyframes ctaIn{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
@keyframes ctaGlow{0%,100%{box-shadow:0 4px 16px rgba(245,197,24,.22)}50%{box-shadow:0 6px 26px rgba(245,197,24,.5)}}
.cta .cta-arrow{display:inline-block; transition:transform .22s; font-size:16px}
.cta:hover{transform:translateY(-2px); background-position:100% 0; box-shadow:0 8px 28px rgba(245,197,24,.45); animation-play-state:paused}
.cta:hover .cta-arrow{transform:translateX(5px)}
.cta:active{transform:translateY(0)}
.card.out .cta{
  display:flex; background:var(--line-soft); color:var(--chalk-faint);
  box-shadow:none; cursor:not-allowed; pointer-events:none; animation:none;
}
.card.out .cta::before{display:none}
.nohit{text-align:center; color:var(--chalk-faint); padding:50px; font-family:var(--mono); font-size:14px}
@media(prefers-reduced-motion:reduce){
  .card.open .cta, .card.open .cta::before{animation:none}
  .cta,.cta .cta-arrow{transition:none}
}

/* secondary site nav, lives in the page footer (mini-sitemap) */
.footer-nav{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px;
  margin-top:40px; padding-top:22px; border-top:1px solid var(--line-soft);
}
.footer-nav a{
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.12em;
  font-size:11.5px; font-weight:600; text-decoration:none; color:var(--chalk-dim);
  padding:7px 13px; border-radius:9px; border:1px solid var(--line-soft);
}
.footer-nav a:hover{ border-color:var(--line); color:var(--chalk) }
.footer-nav a.active{ color:var(--chalk); border-color:var(--line) }
body.embed .footer-nav{ display:none }
/* the footer nav already carries the divider rule, so drop footer's own when it follows */
.footer-nav + footer{margin-top:24px; padding-top:0; border-top:0}

footer{margin-top:36px; padding-top:22px; border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:11.5px; color:var(--chalk-faint); line-height:1.7}
@media(max-width:560px){
  .row{grid-template-columns:34px 1fr auto auto; gap:11px; padding:13px}
  .best .bk{display:none}
  .implied .imp-txt{display:none}
  .implied{margin-top:6px}
}

/* ===== EDITORIAL ===== */
.article{margin-top:56px}
.art-divider{display:flex; align-items:center; gap:16px; margin:0 0 38px}
.art-divider span{
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.3em;
  font-size:12px; font-weight:600; color:var(--grass); white-space:nowrap;
}
.art-divider::before,.art-divider::after{content:""; height:1px; flex:1; background:var(--line)}
.art h2{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(18px,5vw,36px); letter-spacing:-.02em; line-height:1; margin:0 0 18px;
}
.art h2 .em{color:var(--gold)}
.art h3{
  font-family:var(--display); font-weight:800; font-size:clamp(19px,3.4vw,25px);
  letter-spacing:-.01em; margin:46px 0 14px; display:flex; align-items:center; gap:11px;
}
.art h3 .num{
  font-family:var(--cond); font-weight:700; font-size:15px; color:var(--pitch);
  background:var(--grass); width:28px; height:28px; border-radius:7px;
  display:inline-grid; place-items:center; flex-shrink:0;
}
.art p{font-size:15.5px; line-height:1.72; color:var(--chalk-dim); margin:0 0 16px; max-width:680px}
.art p b{color:var(--chalk); font-weight:700}
.art strong{color:var(--gold); font-weight:700}
.podium{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:26px 0 8px; align-items:end}
.pod{
  background:linear-gradient(180deg,var(--pitch-2),#0c2417); border:1px solid var(--line-soft);
  border-radius:13px 13px 0 0; padding:18px 14px; text-align:center; position:relative;
}
.pod .medal{font-family:var(--cond); font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase}
.pod .pn{font-family:var(--display); font-weight:800; font-size:18px; margin:8px 0 4px; letter-spacing:-.01em}
.pod .po{font-family:var(--mono); font-weight:600; font-size:24px; line-height:1}
.pod .pb{font-family:var(--mono); font-size:11px; color:var(--chalk-faint); margin-top:6px}
.pod.p1{border-color:rgba(245,197,24,.4); padding-bottom:34px}
.pod.p1 .medal{color:var(--gold)} .pod.p1 .po{color:var(--gold)}
.pod.p2{padding-bottom:22px} .pod.p2 .medal{color:#cfd8d0}
.pod.p3 .medal{color:#c98a5e}
.callout{
  background:linear-gradient(135deg,rgba(245,197,24,.1),rgba(245,197,24,.03));
  border:1px solid rgba(245,197,24,.28); border-left:3px solid var(--grass);
  border-radius:12px; padding:20px 22px; margin:24px 0; max-width:680px;
}
.callout .ct{
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.14em; font-size:11px;
  font-weight:600; color:var(--grass); margin-bottom:9px; display:flex; align-items:center; gap:7px;
}
.callout .ct svg{width:14px;height:14px}
.callout p{margin:0; color:var(--chalk-dim)}
.callout p b{color:var(--chalk)}
/* inline links inside article prose / callouts / FAQ answers use the gold convention
   (the .xlink cards have their own styling and are intentionally excluded) */
.article p a,.callout p a,.faq .fa a{color:var(--gold); text-decoration:none; font-weight:600; border-bottom:1px dotted rgba(245,197,24,.45)}
.article p a:hover,.callout p a:hover,.faq .fa a:hover{border-bottom-color:var(--gold)}
.facts{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:26px 0; max-width:720px}
.fact{background:var(--pitch-2); border:1px solid var(--line-soft); border-radius:11px; padding:15px 13px; text-align:center}
.fact .fn{font-family:var(--mono); font-weight:600; font-size:23px; color:var(--gold); line-height:1}
.fact .fl{font-family:var(--cond); text-transform:uppercase; letter-spacing:.08em; font-size:10px; color:var(--chalk-faint); margin-top:7px; line-height:1.3}
.faq{margin-top:14px; max-width:680px}
.faq details{border:1px solid var(--line-soft); border-radius:11px; margin-bottom:9px; background:var(--pitch-2); overflow:hidden}
.faq summary{
  cursor:pointer; padding:15px 18px; font-family:var(--display); font-weight:700; font-size:15.5px;
  color:var(--chalk); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--mono); font-size:20px; color:var(--grass); transition:.2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] summary{border-bottom:1px solid var(--line-soft)}
.faq .fa{padding:14px 18px 17px; font-size:14.5px; line-height:1.65; color:var(--chalk-dim)}
.faq .fa b{color:var(--chalk)}

/* ===== INSIGHT TABLES (auto-generated odds insights) ===== */
.itable{width:100%; max-width:720px; border-collapse:collapse; margin:22px 0 8px; font-variant-numeric:tabular-nums}
.itable caption{
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.08em; font-size:11px;
  color:var(--chalk-faint); text-align:left; padding:0 0 10px;
}
.itable th{
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.06em; font-size:10.5px;
  color:var(--chalk-faint); font-weight:600; text-align:left; padding:0 12px 9px; border-bottom:1px solid var(--line);
}
.itable th.num,.itable td.num{text-align:right; font-family:var(--mono)}
.itable td{padding:11px 12px; border-bottom:1px solid var(--line-soft); font-size:14px; color:var(--chalk-dim)}
.itable tr:last-child td{border-bottom:none}
.itable td.rk{font-family:var(--mono); font-size:12px; color:var(--chalk-faint); width:30px}
.itable td.nm{font-family:var(--display); font-weight:700; color:var(--chalk)}
.itable td.od{font-family:var(--mono); font-weight:600; color:var(--gold)}
.itable td.bk{font-size:12.5px; color:var(--chalk-faint)}
.itable td .imp{font-family:var(--mono); font-size:11px; color:var(--chalk-faint)}
.itable td .val{color:var(--grass); font-weight:600}
.itable tr:first-child td.rk{color:var(--gold)}

/* price-band distribution bars */
.bband{max-width:720px; margin:20px 0 8px; display:flex; flex-direction:column; gap:9px}
.bband .row{display:grid; grid-template-columns:120px 1fr 46px; align-items:center; gap:12px}
.bband .lbl{font-family:var(--mono); font-size:12px; color:var(--chalk-dim); white-space:nowrap}
.bband .track{height:14px; background:var(--pitch-2); border:1px solid var(--line-soft); border-radius:7px; overflow:hidden}
.bband .fill{height:100%; background:linear-gradient(90deg,var(--grass-deep),var(--grass)); border-radius:6px}
.bband .cnt{font-family:var(--mono); font-size:12px; color:var(--chalk-faint); text-align:right}

@media(max-width:560px){
  .podium{grid-template-columns:1fr; gap:8px}
  .pod.p1{order:1} .pod.p2{order:2} .pod.p3{order:3}
  .pod,.pod.p1,.pod.p2{padding-bottom:18px; border-radius:11px}
  .facts{grid-template-columns:repeat(2,1fr)}
  /* scroll the analysis tables horizontally (keep all columns) instead of hiding them */
  .itable{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .itable th,.itable td{white-space:nowrap}
  .bband .row{grid-template-columns:96px 1fr 40px; gap:9px}
}

/* ===== HISTORY CHART ===== */
.chart-wrap{margin-top:50px}
.chart-head{display:flex; justify-content:space-between; align-items:end; gap:20px; flex-wrap:wrap; margin-bottom:18px}
.chart-head h2{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(22px,4.2vw,32px); letter-spacing:-.02em; line-height:1; margin:0 0 8px;
}
.chart-head .sub{color:var(--chalk-dim); font-size:14px; line-height:1.5; max-width:560px}
.toggle{
  display:inline-flex; background:var(--pitch-2); border:1px solid var(--line); border-radius:9px; padding:3px; flex-shrink:0;
}
.toggle button{
  background:transparent; border:0; color:var(--chalk-dim); cursor:pointer;
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.1em; font-size:11px; font-weight:600;
  padding:7px 13px; border-radius:6px; transition:.18s;
}
.toggle button.on{background:var(--grass); color:var(--pitch)}
.toggle button:not(.on):hover{color:var(--chalk)}

.chart-box{
  background:linear-gradient(180deg,var(--pitch-2),#0c2417);
  border:1px solid var(--line-soft); border-radius:14px; padding:18px 14px 10px;
  position:relative;
}
.chart-svg{display:block; width:100%; aspect-ratio:800/360; height:auto; overflow:visible}
.chart-svg .grid-line{stroke:var(--line-soft); stroke-width:1}
.chart-svg .axis-label{font-family:var(--mono); font-size:10px; fill:var(--chalk-faint)}
.chart-svg .team-line{fill:none; stroke-width:2; transition:stroke-width .15s, opacity .15s}
.chart-svg .team-line.dim{opacity:.18}
.chart-svg .team-line.hot{stroke-width:3.2}
.chart-svg .hover-dot{fill:var(--pitch); stroke-width:2.5}
.chart-svg .crosshair{stroke:var(--chalk-faint); stroke-dasharray:3 3; stroke-width:1; opacity:0}
.chart-svg.has-hover .crosshair{opacity:.7}
.chart-svg .milestone{stroke:var(--chalk-faint); stroke-dasharray:2 4; stroke-width:1; opacity:.35}
.chart-svg .milestone.past{stroke:var(--grass); opacity:.6}
.chart-svg .milestone-tick{stroke:var(--chalk-faint); stroke-width:1.5; opacity:.6}
.chart-svg .milestone-tick.past{stroke:var(--grass); opacity:.85}
.chart-svg .milestone-label{font-family:var(--cond); font-size:9.5px; fill:var(--chalk-faint); text-transform:uppercase; letter-spacing:.05em}
.chart-svg .milestone-label.past{fill:var(--grass)}
.chart-svg .date-label{font-size:8px; fill:var(--chalk-dim)}

.chart-tooltip{
  position:absolute; pointer-events:none; opacity:0; transform:translate(-50%, -100%);
  background:rgba(8,22,14,.96); border:1px solid var(--line); border-radius:9px;
  padding:9px 12px; font-family:var(--display); font-size:12.5px; color:var(--chalk);
  white-space:nowrap; transition:opacity .12s; box-shadow:0 6px 20px rgba(0,0,0,.5); z-index:5;
  margin-top:-10px;
}
.chart-tooltip.on{opacity:1}
.chart-tooltip .ttd{font-family:var(--mono); font-size:10.5px; color:var(--chalk-faint); margin-bottom:5px; text-transform:uppercase; letter-spacing:.08em}
.chart-tooltip .ttrow{display:flex; align-items:center; gap:8px; padding:2px 0; font-family:var(--mono); font-size:13px}
.chart-tooltip .ttrow .sw{width:10px; height:10px; border-radius:50%; flex-shrink:0}
.chart-tooltip .ttrow .ttt{font-family:var(--display); font-weight:600; min-width:90px}
.chart-tooltip .ttrow .ttv{font-weight:600; color:var(--gold)}

.chart-controls{margin-top:14px}
.presets{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:11px}
.preset{
  background:var(--pitch); border:1px solid var(--line); color:var(--chalk-dim);
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.1em; font-size:11px; font-weight:600;
  padding:7px 13px; border-radius:7px; cursor:pointer; transition:.15s;
}
.preset:hover{border-color:var(--grass); color:var(--chalk)}
.chips{display:flex; gap:6px; flex-wrap:wrap; max-height:118px; overflow-y:auto; padding-right:4px}
.chip{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; user-select:none;
  background:var(--pitch); border:1px solid var(--line-soft); color:var(--chalk-dim);
  font-family:var(--display); font-weight:600; font-size:12.5px;
  padding:6px 11px 6px 9px; border-radius:7px; transition:.15s;
}
.chip:hover{border-color:var(--line); color:var(--chalk)}
.chip.on{color:var(--chalk); background:var(--pitch-2)}
.chip .sw{width:10px; height:10px; border-radius:50%; background:var(--line); transition:.15s}
.chip.on .sw{box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.chip.out{opacity:.45; text-decoration:line-through}
.chips::-webkit-scrollbar{width:6px}
.chips::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px}

@media(max-width:560px){
  .chart-tooltip{font-size:11.5px; padding:8px 10px}
  .chart-tooltip .ttrow .ttt{min-width:70px}
  .chips{max-height:96px}
}

/* ---- LOAD STATE ---- */
.load-state{
  display:none; padding:60px 20px; text-align:center; color:var(--chalk-dim);
  font-family:var(--mono); font-size:14px;
}
body.is-loading .load-state.is-loading,
body.has-error .load-state.is-error{display:block}
body.is-loading .summary,
body.is-loading .list,
body.is-loading .chart-wrap,
body.is-loading .article,
body.has-error .summary,
body.has-error .list,
body.has-error .chart-wrap,
body.has-error .article{display:none}
.load-spinner{
  display:inline-block; width:32px; height:32px; margin-bottom:14px;
  border:3px solid var(--line); border-top-color:var(--grass);
  border-radius:50%; animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.load-err{color:#f0726a; font-family:var(--display); font-weight:700; margin-bottom:6px}
@media(prefers-reduced-motion:reduce){ .load-spinner{animation:none} }


/* ---------- SITE NAV (shared across pages) ---------- */
.site-nav{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:18px 0 0;
}
.site-nav a{
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.12em;
  font-size:12px; font-weight:600; text-decoration:none; color:var(--chalk-dim);
  padding:8px 15px; border-radius:9px; border:1px solid var(--line-soft);
  background:var(--pitch-2); transition:.16s; white-space:nowrap;
}
.site-nav a:hover{ border-color:var(--line); color:var(--chalk) }
.site-nav a.active{
  color:var(--pitch); background:var(--grass); border-color:var(--grass);
}
.site-nav a.active:hover{ color:var(--pitch) }
.site-nav .nav-sep{ flex:1 }
.site-nav .nav-brand{
  font-family:var(--display); font-weight:900; letter-spacing:-.01em;
  text-transform:none; font-size:15px; color:var(--chalk);
  border:0; background:transparent; padding:8px 4px;
}
.site-nav .nav-brand .em{ color:var(--gold) }
.site-nav .nav-brand:hover{ color:var(--chalk) }
body.embed .site-nav{ display:none }
@media(max-width:560px){
  .site-nav{
    flex-wrap:wrap; justify-content:center;
  }
  .site-nav .nav-brand{
    flex:0 0 100%; text-align:center;
  }
  .site-nav .nav-sep{ display:none }
  .site-nav a:not(.nav-brand){ padding:6px 11px }
}

/* cross-link cards between markets (in the article footer area) */
.xlinks{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:34px 0 8px }
.xlink{
  display:block; text-decoration:none; color:inherit;
  background:linear-gradient(180deg,var(--pitch-2),#0c2417);
  border:1px solid var(--line-soft); border-radius:13px; padding:18px 20px;
  transition:border-color .18s, transform .15s;
}
.xlink:hover{ border-color:var(--grass); transform:translateY(-2px) }
.xlink .xk{
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.14em;
  font-size:10.5px; font-weight:600; color:var(--grass); margin-bottom:7px;
}
.xlink .xt{ font-family:var(--display); font-weight:800; font-size:18px; letter-spacing:-.01em }
.xlink .xd{ font-family:var(--mono); font-size:12px; color:var(--chalk-dim); margin-top:6px; line-height:1.5 }
.xlink .xt .arr{ color:var(--grass); transition:transform .18s; display:inline-block }
.xlink:hover .xt .arr{ transform:translateX(4px) }
@media(max-width:560px){ .xlinks{ grid-template-columns:1fr } }

/* ===================================================================
   ABOUT / CONTENT PAGES
   =================================================================== */
.page{padding:8px 0 10px}
.page h2{font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(19px,3vw,25px); color:var(--chalk); margin:32px 0 12px}
.page h2 .em{color:var(--gold)}
.page p{color:var(--chalk-dim); font-size:15.5px; line-height:1.7; margin:0 0 14px; max-width:680px}
.page a{color:var(--gold); text-decoration:none}
.page a:hover{text-decoration:underline}
.page b{color:var(--chalk)}
.page-list{list-style:none; padding:0; margin:2px 0 16px; max-width:680px; display:flex; flex-direction:column; gap:10px}
.page-list li{padding:12px 16px; background:var(--pitch-2); border:1px solid var(--line-soft); border-radius:11px; color:var(--chalk-dim); font-size:14.5px; line-height:1.6}
.page-list li b{color:var(--chalk)}
.page-list a{color:var(--gold)}

/* ===================================================================
   COVERAGE MATRIX (bookmaker x market)
   =================================================================== */
.cov-summary{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:26px 0 22px}
.cov-sum{background:linear-gradient(180deg,var(--pitch-2),#0c2417); border:1px solid var(--line-soft); border-radius:13px; padding:15px 17px}
.cov-sum-l{font-family:var(--cond); text-transform:uppercase; letter-spacing:.08em; font-size:10.5px; color:var(--chalk-faint); margin-bottom:7px}
.cov-sum-v{font-family:var(--display); font-weight:800; font-size:18px; color:var(--chalk); line-height:1.15}
.cov-sum-v a,.cov-sum-link{color:var(--gold); text-decoration:none}
.cov-sum-v a:hover{text-decoration:underline}
.cov-sum-s{font-size:12px; color:var(--chalk-dim); margin-top:6px}
@media(max-width:720px){ .cov-summary{grid-template-columns:1fr 1fr} }

.cov-controls{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-bottom:13px}
#cov-search{flex:1 1 160px; min-width:150px; max-width:280px; padding:9px 13px; background:var(--pitch-2); border:1px solid var(--line); border-radius:9px; color:var(--chalk); font-family:inherit; font-size:14px}
#cov-search::placeholder{color:var(--chalk-faint)}
.cov-ctrl-group{display:inline-flex; align-items:center; gap:6px}
.cov-ctrl-lbl{font-family:var(--cond); text-transform:uppercase; letter-spacing:.08em; font-size:10.5px; color:var(--chalk-faint)}
.cov-ctrl-group button{background:var(--pitch-2); border:1px solid var(--line-soft); color:var(--chalk-dim); font-family:var(--cond); text-transform:uppercase; letter-spacing:.06em; font-size:11px; font-weight:600; padding:6px 11px; border-radius:7px; cursor:pointer; transition:.15s}
.cov-ctrl-group button:hover{color:var(--chalk)}
.cov-ctrl-group button.on{background:var(--grass); color:var(--pitch); border-color:var(--grass)}
.cov-ordernote{font-family:var(--cond); text-transform:uppercase; letter-spacing:.06em; font-size:10.5px; color:var(--chalk-faint)}

.cov-legend{font-size:12.5px; color:var(--chalk-faint); margin:0 0 14px; display:flex; align-items:center; flex-wrap:wrap; gap:5px}
.cov-cell.inline{display:inline-flex; align-items:center; color:var(--grass)}
.cov-cell.inline svg{width:15px; height:15px}
.cov-dash.inline{display:inline-block}

.cov-scroll{overflow:auto; border:1px solid var(--line-soft); border-radius:14px; background:var(--pitch-2); -webkit-overflow-scrolling:touch; max-height:76vh; position:relative; scrollbar-width:thin; scrollbar-color:var(--line) transparent}
.cov-skel,.cov-error{padding:40px 20px; text-align:center; color:var(--chalk-faint); font-family:var(--mono); font-size:13px}
.cov-table{border-collapse:separate; border-spacing:0; width:max-content; min-width:100%; font-variant-numeric:tabular-nums}

.cov-table thead th{position:sticky; top:0; z-index:2; background:#0c2519; box-shadow:0 8px 11px -9px rgba(0,0,0,.75)}
.cov-corner{position:sticky; left:0; top:0; z-index:4; background:#0c2519; text-align:left; padding:12px 14px; font-family:var(--cond); text-transform:uppercase; letter-spacing:.07em; font-size:11px; color:var(--chalk-faint); border-bottom:1px solid var(--line); border-right:1px solid var(--line); min-width:170px}
/* higher specificity than `.cov-table thead th` so the corner keeps left+top
   sticky and sits ABOVE every other sticky cell when scrolling either axis */
.cov-table thead th.cov-corner{position:sticky; left:0; top:0; z-index:6; box-shadow:5px 0 9px -7px rgba(0,0,0,.5)}
.cov-bk{padding:10px 8px 9px; text-align:center; border-bottom:1px solid var(--line); border-right:1px solid var(--line-soft); min-width:76px; vertical-align:bottom}
.cov-bk-name{display:block; font-family:var(--display); font-weight:700; font-size:12px; line-height:1.15; color:var(--chalk)}
.cov-bk-a{color:var(--chalk); text-decoration:none}
.cov-bk-a:hover{color:var(--gold)}
.cov-bk-n{display:inline-block; margin-top:4px; font-family:var(--mono); font-size:10.5px; color:var(--chalk-faint)}
.cov-bk.top{box-shadow:inset 0 3px 0 var(--gold)}
.cov-bk.top .cov-bk-name{color:var(--gold)}

.cov-row-h{position:sticky; left:0; z-index:1; background:var(--pitch-2); text-align:left; padding:9px 14px; border-bottom:1px solid var(--line-soft); border-right:1px solid var(--line); min-width:170px; vertical-align:middle; box-shadow:5px 0 9px -7px rgba(0,0,0,.5)}
tbody tr:hover .cov-row-h{background:var(--best-bg)}
.cov-row-label{display:flex; align-items:center; gap:6px; width:100%; background:none; border:0; padding:0; cursor:pointer; text-align:left; font-family:var(--display); font-weight:600; font-size:13.5px; color:var(--chalk)}
.cov-row-label:hover{color:var(--gold)}
.cov-chev{margin-left:auto; color:var(--chalk-faint); font-size:16px; line-height:1; transition:transform .15s}
tr.open .cov-chev{transform:rotate(90deg); color:var(--gold)}
.cov-row-meta{display:flex; align-items:center; gap:8px; margin-top:5px}
.cov-count{font-family:var(--mono); font-size:10.5px; color:var(--chalk-faint)}
.cov-bar{flex:1; height:4px; background:var(--pitch); border-radius:2px; overflow:hidden; max-width:96px}
.cov-bar i{display:block; height:100%; background:var(--grass); border-radius:2px}

.cov-cell{text-align:center; border-bottom:1px solid var(--line-soft); border-right:1px solid var(--line-soft)}
.cov-cell.yes{color:var(--grass); background:rgba(245,197,24,.07)}
.cov-cell.yes svg{width:16px; height:16px; vertical-align:middle}
.cov-dash{display:inline-block; width:11px; height:2px; border-radius:1px; background:var(--line)}

.cov-detail>td{padding:0; background:var(--pitch); border-bottom:1px solid var(--line)}
.cov-detail-inner{position:sticky; left:0; width:min(92vw,860px); padding:13px 16px; display:flex; flex-direction:column; gap:9px}
.cov-detail-grp{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.cov-dl{font-family:var(--cond); text-transform:uppercase; letter-spacing:.06em; font-size:10px; font-weight:600; padding:3px 8px; border-radius:6px; margin-right:2px}
.cov-dl.yes{color:var(--grass); background:rgba(245,197,24,.12)}
.cov-dl.no{color:var(--chalk-faint); background:var(--pitch-2)}
.cov-chip{font-family:var(--display); font-size:12px; font-weight:600; padding:4px 9px; border-radius:7px; background:var(--pitch-2); border:1px solid var(--line-soft); color:var(--chalk-faint); text-decoration:none; white-space:nowrap}
.cov-chip.yes{color:var(--chalk); border-color:var(--line)}
a.cov-chip.yes:hover{border-color:var(--gold); color:var(--gold)}
.cov-none{color:var(--chalk-faint); font-style:italic; font-size:12px}
.cov-empty{padding:26px 16px; text-align:center; color:var(--chalk-faint); font-size:13px}

@media(max-width:560px){
  .cov-corner,.cov-row-h{min-width:140px}
  .cov-bk{min-width:64px}
}

/* ===================================================================
   CUSTOM SCROLLBARS (match the site instead of OS default)
   =================================================================== */
html,
.cov-scroll,
.chips,
.ep-list,
.chart-overlay-inner{
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}
html::-webkit-scrollbar,
.cov-scroll::-webkit-scrollbar,
.chips::-webkit-scrollbar,
.ep-list::-webkit-scrollbar,
.chart-overlay-inner::-webkit-scrollbar{
  width:12px; height:12px;
}
html::-webkit-scrollbar-track,
.cov-scroll::-webkit-scrollbar-track,
.chips::-webkit-scrollbar-track,
.ep-list::-webkit-scrollbar-track,
.chart-overlay-inner::-webkit-scrollbar-track{
  background:transparent;
}
html::-webkit-scrollbar-thumb,
.cov-scroll::-webkit-scrollbar-thumb,
.chips::-webkit-scrollbar-thumb,
.ep-list::-webkit-scrollbar-thumb,
.chart-overlay-inner::-webkit-scrollbar-thumb{
  background:var(--line);
  border-radius:10px;
  border:3px solid transparent;      /* inset padding -> slimmer thumb */
  background-clip:padding-box;
}
html::-webkit-scrollbar-thumb:hover,
.cov-scroll::-webkit-scrollbar-thumb:hover,
.chips::-webkit-scrollbar-thumb:hover,
.ep-list::-webkit-scrollbar-thumb:hover,
.chart-overlay-inner::-webkit-scrollbar-thumb:hover{
  background:var(--grass);
  background-clip:padding-box;
}
html::-webkit-scrollbar-corner,
.cov-scroll::-webkit-scrollbar-corner{
  background:transparent;
}


/* =====================================================================
   /kampe/ — match list, coupon builder and match pages
   (moved here from the per-page mockups so build.js can emit thin shells)
   ===================================================================== */

/* ---------- match list + coupon (vmodds-kampe.js) ---------- */
.daygroup{margin:0 0 26px}
.dayhead{
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.12em;
  font-size:13px; font-weight:600; color:var(--grass); margin:0 0 12px;
  display:flex; align-items:center; gap:12px;
}
.dayhead::after{content:""; height:1px; flex:1; background:linear-gradient(90deg,var(--line),transparent)}
.match{
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(180deg,var(--pitch-2),#0c2417);
  border:1px solid var(--line-soft); border-radius:13px; padding:12px 14px; margin:0 0 10px;
  transition:.18s;
}
.match:hover{border-color:var(--line)}
.mcore{display:flex; align-items:center; gap:14px; flex:1; min-width:0; text-decoration:none; color:inherit}
.mcore:hover .tt{color:var(--gold)}
.match .mtime{font-family:var(--mono); font-size:13px; color:var(--chalk); font-weight:600; width:46px; flex-shrink:0}
.match .teams{flex:1; min-width:0}
.match .teams .tt{font-family:var(--display); font-weight:800; font-size:17px; letter-spacing:-.01em; line-height:1.2; transition:.16s}
.match .teams .grp{font-family:var(--mono); font-size:11px; color:var(--chalk-faint); margin-top:3px}
/* live / finished match states + status tag in the card sub-line */
.match.is-live{border-color:rgba(240,114,106,.5); background:linear-gradient(180deg,rgba(240,114,106,.07),#0c2417)}
.match.is-finished{opacity:.72}
.match.is-finished:hover{opacity:1}
.match .mtime .lv{font-family:var(--cond); font-weight:700; font-size:11px; letter-spacing:.08em; color:#f0726a}
.mtag{display:inline-flex; align-items:center; gap:5px; font-weight:600}
.mtag.live{color:#f0726a}
.mtag.live .dot{width:7px; height:7px; border-radius:50%; background:#f0726a; animation:statuspulse 1.4s ease-in-out infinite}
.mtag.done{color:var(--gold); text-transform:uppercase; letter-spacing:.06em; font-size:10px}
/* final score: in the sub-line (.mscore) and in the time column (.mtime .fin) */
.match .mscore{font-family:var(--mono); font-weight:700; color:var(--chalk)}
.match .mtime .fin{font-family:var(--display); font-weight:800; font-size:15px; color:var(--gold); letter-spacing:-.01em}
.match.is-awaiting .grp{color:var(--chalk-faint)}
/* "Afsluttede kampe" separator between the active list and the ended list */
.ended-sep{display:flex; align-items:center; gap:14px; margin:38px 0 22px}
.ended-sep h2{font-family:var(--cond); text-transform:uppercase; letter-spacing:.1em; font-size:15px; font-weight:700; color:var(--chalk-dim); margin:0; white-space:nowrap}
.ended-sep::before,.ended-sep::after{content:""; height:1px; flex:1; background:var(--line)}
.odds3{display:flex; gap:7px; flex-shrink:0}
.opill{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:var(--pitch); border:1px solid var(--line); border-radius:9px;
  padding:6px 4px 5px; width:70px; text-decoration:none; color:inherit; transition:.16s; cursor:pointer;
}
.opill:hover{border-color:var(--grass); transform:translateY(-1px)}
.opill .ok{font-family:var(--cond); font-size:9.5px; letter-spacing:.1em; color:var(--chalk-faint); text-transform:uppercase}
.opill .ov{font-family:var(--mono); font-weight:600; font-size:15px; color:var(--chalk); line-height:1}
.opill .obk{
  font-family:var(--mono); font-size:9px; color:var(--chalk-faint); line-height:1.1;
  max-width:62px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.opill.is-best{border-color:rgba(245,197,24,.5)}
.opill.is-best .ov{color:var(--gold)}
.match .chev{color:var(--chalk-faint); flex-shrink:0; text-decoration:none; display:flex; align-items:center; justify-content:center; width:24px; height:24px}
.match .chev svg{display:block}
.match .chev:hover{color:var(--grass)}

/* coupon-mode pill states */
body.coupon-mode .opill:hover{border-color:var(--grass); background:var(--best-bg)}
body.coupon-mode .opill.picked{border-color:var(--grass); background:var(--best-bg); box-shadow:inset 0 0 0 1px var(--grass)}
body.coupon-mode .opill.picked .ov{color:var(--grass)}
body.coupon-mode .opill.picked .ok{color:var(--grass)}

/* ---- "Byg kupon" toggle bar ---- */
.coupon-bar{
  display:flex; align-items:center; gap:13px; margin:2px 0 18px; padding:12px 15px;
  background:rgba(245,197,24,.05); border:1px solid var(--line-soft); border-radius:11px;
}
.switch{position:relative; display:inline-block; width:46px; height:26px; flex-shrink:0; cursor:pointer}
.switch input{opacity:0; width:0; height:0}
.switch .sl{position:absolute; inset:0; background:var(--line); border-radius:26px; transition:.2s}
.switch .sl::before{content:""; position:absolute; left:3px; top:3px; width:20px; height:20px; background:var(--chalk); border-radius:50%; transition:.2s}
.switch input:checked + .sl{background:var(--grass)}
.switch input:checked + .sl::before{transform:translateX(20px)}
.cb-text{display:flex; flex-direction:column; gap:2px; line-height:1.3}
.cb-text b{font-family:var(--display); font-weight:800; font-size:14px}
.cb-text span{font-family:var(--mono); font-size:11.5px; color:var(--chalk-faint)}

/* ---- COUPON PANEL ---- */
.coupon{
  position:fixed; z-index:50; background:var(--pitch-2);
  border:1px solid var(--line); box-shadow:0 -8px 40px rgba(0,0,0,.5);
  display:flex; flex-direction:column; overflow:hidden;   /* clip header gradient to the rounded corners */
}
/* author display:flex would otherwise defeat the [hidden] attribute, so keep it hidden until activated */
.coupon[hidden]{display:none}
.cp-head{
  display:flex; align-items:center; gap:10px; width:100%; cursor:pointer;
  background:linear-gradient(90deg,var(--grass-deep),var(--grass)); color:var(--pitch);
  border:0; padding:13px 15px; text-align:left; font-family:var(--display);
}
.cp-title{display:flex; align-items:center; gap:8px; font-weight:800; font-size:15px}
.cp-title svg{width:17px; height:17px}
.cp-count{
  background:rgba(10,31,20,.22); border-radius:20px; min-width:22px; height:22px; padding:0 7px;
  display:inline-flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:700; font-size:12px;
}
.cp-best{margin-left:auto; font-family:var(--mono); font-weight:700; font-size:13px; text-align:right; line-height:1.2}
.cp-best small{display:block; font-size:9.5px; font-weight:600; opacity:.75; text-transform:uppercase; letter-spacing:.05em}
.cp-chevron{transition:transform .2s; font-size:14px; flex-shrink:0}
.coupon.is-max .cp-chevron{transform:rotate(180deg)}
.cp-body{display:flex; flex-direction:column; flex:1 1 auto; min-height:0; overflow:auto; padding:14px 15px}
.coupon.is-min .cp-body{display:none}

.cp-empty{font-family:var(--mono); font-size:12.5px; color:var(--chalk-faint); line-height:1.6; text-align:center; padding:18px 6px}
.cp-section-l{font-family:var(--cond); text-transform:uppercase; letter-spacing:.1em; font-size:10.5px; font-weight:600; color:var(--chalk-faint); margin:0 0 4px}

.cp-leg{display:flex; align-items:center; gap:9px; padding:8px 0; border-bottom:1px dashed var(--line-soft)}
.cp-leg .lg-info{flex:1; min-width:0}
.cp-leg .lg-m{font-family:var(--mono); font-size:10px; color:var(--chalk-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cp-leg .lg-pick{font-family:var(--display); font-weight:700; font-size:13.5px; color:var(--chalk); margin-top:1px}
.cp-leg .lg-od{font-family:var(--mono); font-size:12px; color:var(--gold); font-weight:600}
.cp-leg .lg-x{
  width:22px; height:22px; flex-shrink:0; border:0; cursor:pointer; border-radius:6px;
  background:rgba(240,114,106,.12); color:#f0726a; font-size:13px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.cp-leg .lg-x:hover{background:rgba(240,114,106,.25)}

.cp-stake{display:flex; align-items:center; gap:8px; margin:13px 0 4px}
.cp-stake label{font-family:var(--cond); text-transform:uppercase; letter-spacing:.08em; font-size:10.5px; color:var(--grass); font-weight:600}
.cp-stake input{
  width:90px; background:var(--pitch); border:1px solid var(--line); color:var(--chalk);
  font-family:var(--mono); font-size:14px; font-weight:600; padding:7px 10px; border-radius:8px;
  outline:none; text-align:right; -moz-appearance:textfield;
}
.cp-stake input::-webkit-outer-spin-button, .cp-stake input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.cp-stake input:focus{border-color:var(--grass)}
.cp-stake .unit{font-family:var(--mono); font-size:13px; color:var(--chalk-faint)}

/* fixed grid columns so every row aligns identically — the .best state is a
   pure background/colour change (inset box-shadow adds no layout box) */
.cp-cmp{margin-top:12px; display:flex; flex-direction:column; gap:3px}
.cp-row{display:grid; grid-template-columns:20px minmax(0,1fr) 70px 74px; align-items:center; gap:9px; padding:9px; border-radius:8px}
.cp-row .rk{font-family:var(--mono); font-size:11px; color:var(--chalk-faint); text-align:center}
.cp-row .nm{font-family:var(--display); font-weight:600; font-size:13.5px; color:var(--chalk-dim); text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.cp-row .pay{font-family:var(--mono); font-size:10.5px; color:var(--chalk-faint); text-align:right; white-space:nowrap; overflow:hidden}
.cp-row .od{font-family:var(--mono); font-weight:700; font-size:15px; color:var(--chalk); text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cp-row.best{background:rgba(245,197,24,.08); box-shadow:inset 0 0 0 1px rgba(245,197,24,.45)}
.cp-row.best .nm{color:var(--gold)}
.cp-row.best .od{color:var(--gold)}
.cp-row.best .rk{color:var(--gold-deep)}
.cp-note{font-family:var(--mono); font-size:10px; color:var(--chalk-faint); margin-top:8px; line-height:1.45}

.cp-foot{display:flex; gap:9px; margin-top:13px}
.cp-clear{
  background:transparent; border:1px solid var(--line); color:var(--chalk-dim); cursor:pointer;
  font-family:var(--display); font-weight:700; font-size:12.5px; padding:11px 13px; border-radius:9px; flex-shrink:0;
}
.cp-clear:hover{border-color:#f0726a; color:#f0726a}
.cp-cta{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none;
  background:linear-gradient(90deg,var(--grass-deep),var(--grass)); color:var(--pitch);
  font-family:var(--display); font-weight:800; font-size:13.5px; padding:11px; border-radius:9px;
  box-shadow:0 6px 20px rgba(245,197,24,.35);
}
.cp-cta.disabled{background:var(--line); color:var(--chalk-faint); box-shadow:none; pointer-events:none}

/* desktop: floating card bottom-right (min = header bar, max = open card) */
@media(min-width:701px){
  .coupon{right:18px; bottom:18px; width:368px; border-radius:14px; max-height:80vh}
}
/* mobile: docked bar with two heights — min = header only · max = fit content, capped at 60vh.
   Top corners stay rounded in every state (overflow:hidden clips the header to them). */
@media(max-width:700px){
  .coupon{left:0; right:0; bottom:0; border-radius:14px 14px 0 0; border-bottom:0}
  .coupon.is-min{height:auto}
  .coupon.is-max{height:auto; max-height:60vh}
  body.has-coupon{padding-bottom:62px}
}

@media(max-width:620px){
  .match{flex-wrap:wrap; gap:10px}
  .mcore{flex:1 1 100%}
  .odds3{width:100%; justify-content:space-between; gap:8px}
  .opill{flex:1; width:auto}
  .match .chev{display:none}
}

/* ---------- match page: 1X2 + Over/Under (vmodds-match.js) ---------- */
.crumbs{font-family:var(--mono); font-size:12px; color:var(--chalk-faint); padding:18px 0 0}
.crumbs a{color:var(--chalk-dim); text-decoration:none}
.crumbs a:hover{color:var(--gold)}
.crumbs .sep{opacity:.5; margin:0 6px}

/* the matchup is the page H1 — neutralise the global h1 styles, keep the visual layout.
   margin-top matches the section's ~30px bottom padding for symmetric spacing. */
.matchhero{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin:28px 0 0; padding:0; font-weight:400; font-size:1rem; line-height:1.1;
  letter-spacing:normal; text-transform:none;
}
.matchhero .side{flex:1; min-width:120px; text-align:center}
.matchhero .side .nm{display:block; font-family:var(--display); font-weight:900; font-size:clamp(24px,5vw,40px); letter-spacing:-.02em; line-height:1; text-transform:uppercase; color:var(--chalk)}
.matchhero .side.fav .nm{color:var(--gold)}
.matchhero .vs{font-family:var(--mono); font-size:13px; color:var(--chalk-faint); padding:0 4px}
/* once a result is in, the centre "VS" becomes the final scoreline */
.matchhero .vs.score{font-family:var(--display); font-weight:900; font-size:clamp(26px,5vw,40px); letter-spacing:-.02em; color:var(--chalk); line-height:1}
/* odds tags live just below the H1 so the heading text stays clean (= team names).
   mirrors the .matchhero columns (flex:1 sides + a hidden VS-width gap) so each tag
   sits centered directly under its team. */
.hero-tags{display:flex; align-items:flex-start; gap:18px; margin:10px 0 0; flex-wrap:wrap}
.hero-tags .tag{flex:1; min-width:120px; text-align:center; font-family:var(--cond); text-transform:uppercase; letter-spacing:.14em; font-size:11px; color:var(--chalk-faint)}
.hero-tags .tag.is-fav{color:var(--gold)}
.hero-tags .vs-gap{font-family:var(--mono); font-size:13px; padding:0 4px; visibility:hidden}
/* on mobile the two team names overlap side-by-side, so stack them centered:
   line 1 = home, line 2 = VS / score, line 3 = away. The favourite/outsider tags
   are dropped here (the best-odds cards just below already carry that read). */
@media(max-width:560px){
  .matchhero{flex-direction:column; gap:4px; margin-top:20px}
  .matchhero .side{width:100%; min-width:0}
  .matchhero .side .nm{font-size:clamp(24px,8vw,34px); overflow-wrap:break-word}
  .matchhero .vs{padding:2px 0}
  .matchhero .vs.score{font-size:clamp(28px,9vw,38px); padding:2px 0}
  .hero-tags{display:none}
}

/* match status banner (live / finished) */
.match-status{
  display:flex; align-items:center; gap:8px; width:fit-content; margin:14px auto 0; padding:7px 13px;
  border-radius:8px; font-family:var(--cond); text-transform:uppercase; letter-spacing:.1em; font-size:12px; font-weight:600;
}
.match-status svg{width:15px; height:15px}
.match-status.finished{background:rgba(245,197,24,.1); border:1px solid rgba(245,197,24,.35); color:var(--gold);
  flex-direction:column; gap:3px; text-align:center}   /* heading / result / slutodds on three lines */
.match-status.finished b{color:#fff8d6}
.match-status .ms-line{display:inline-flex; align-items:center; gap:6px}
.match-status .ms-score{font-size:13px}
.match-status.live{background:rgba(240,114,106,.12); border:1px solid rgba(240,114,106,.4); color:#f0726a}
.match-status.live .dot{width:8px; height:8px; border-radius:50%; background:#f0726a; animation:statuspulse 1.4s ease-in-out infinite}
/* awaiting result: match over, score not yet pushed (intermittent stage between builds) */
.match-status.awaiting{background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--chalk-dim)}
.match-status.awaiting svg{animation:statuspulse 1.8s ease-in-out infinite}
@keyframes statuspulse{0%,100%{opacity:1}50%{opacity:.3}}
/* result/awaiting line at the top of a played match's analysis */
.result-line{margin:0 0 14px; padding:10px 14px; border-left:3px solid var(--gold); background:rgba(245,197,24,.06); border-radius:0 8px 8px 0; font-size:15px}

/* big best-odds summary cards (1X2 = 3 cols, O/U = 2 cols) */
.x2sum{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:24px 0 6px}
.x2sum.ou-sum{grid-template-columns:repeat(2,1fr)}
.x2cell{
  background:linear-gradient(180deg,var(--pitch-2),#0c2417); border:1px solid var(--line-soft);
  border-radius:13px; padding:16px 14px; text-align:center; text-decoration:none; color:inherit;
  display:flex; flex-direction:column; cursor:pointer; position:relative; transition:.18s;
}
.x2cell:hover{border-color:var(--gold); transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.35)}
.x2cell .k{font-family:var(--cond); text-transform:uppercase; letter-spacing:.12em; font-size:11px; color:var(--chalk-faint)}
.x2cell .k b{display:block; color:var(--chalk-dim); font-size:13px; letter-spacing:0; margin-top:3px; text-transform:none; font-family:var(--display); font-weight:700}
/* every cell shows the market-best price for its outcome -> gold value, consistent with "guld = bedste odds" */
.x2cell .v{font-family:var(--mono); font-weight:600; font-size:32px; color:var(--gold); line-height:1; margin:12px 0 6px}
.x2cell .imp{font-family:var(--mono); font-size:11px; color:var(--chalk-faint); margin:4px 0 14px}
.x2cell .x2cta{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin:auto -14px -16px; padding:11px 10px;   /* margin-top:auto pins the CTA to the card bottom so all 3 align */
  background:rgba(245,197,24,.10); border-top:1px solid var(--line-soft);
  border-radius:0 0 12px 12px;
  font-family:var(--display); font-weight:700; font-size:13px; color:var(--grass); transition:.18s;
}
.x2cell .x2cta b{color:var(--chalk)}
.x2cell .x2cta .arr{transition:transform .18s}
.x2cell:hover .x2cta{background:var(--grass); color:var(--pitch)}
.x2cell:hover .x2cta b{color:var(--pitch)}
.x2cell:hover .x2cta .arr{transform:translateX(4px)}
/* on narrow screens, stack the cards so long bookmaker names never cramp the CTA */
@media(max-width:560px){
  .x2sum{grid-template-columns:1fr; gap:9px}
  .x2cell{padding:14px 16px}
  .x2cell .v{margin:8px 0 5px}
  .x2cell .imp{margin-bottom:12px}
}

/* section heading above a comparison table */
.cmp-h2{
  font-family:var(--display); font-weight:900; letter-spacing:-.01em;
  font-size:clamp(21px,4vw,29px); line-height:1.1; margin:34px 0 6px;
}
.cmp-h2 .em{color:var(--gold)}
.cmp-lead{font-size:14.5px; color:var(--chalk-dim); line-height:1.6; margin:0 0 14px; max-width:640px}

/* over/under line switcher (segmented control) */
.ou-switch{display:inline-flex; gap:4px; background:var(--pitch-2); border:1px solid var(--line-soft); border-radius:10px; padding:4px; margin:0 0 16px}
.ou-switch button{
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.06em; font-size:12px; font-weight:600;
  color:var(--chalk-dim); background:transparent; border:0; padding:8px 15px; border-radius:7px; cursor:pointer; transition:.15s;
}
.ou-switch button:hover{color:var(--chalk)}
.ou-switch button.on{background:var(--grass); color:var(--pitch)}

/* full comparison table.
   The title/sub-line live in a fixed .cmp-cap header; only .cmp-scroll (the table)
   scrolls horizontally on narrow screens, so the caption stays readable in place. */
.cmp-wrap{margin:14px 0 8px; border:1px solid var(--line-soft); border-radius:13px; overflow:hidden}
.cmp-cap{
  text-align:left; padding:14px 14px 13px;
  font-family:var(--display); font-weight:800; font-size:15px; color:var(--chalk);
  background:var(--pitch-2); border-bottom:1px solid var(--line-soft);
}
.cmp-cap .cap-sub{display:block; font-family:var(--mono); font-weight:400; font-size:11.5px; color:var(--chalk-faint); margin-top:4px}
.cmp-cap .cap-sub .gold{color:var(--gold)}
.cmp-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
table.cmp{width:100%; border-collapse:collapse; font-family:var(--mono)}
/* on mobile the caption title is oversized — drop it to regular body-text size */
@media(max-width:560px){
  .cmp-cap{font-size:14px; padding:12px 12px 11px}
}
table.cmp th, table.cmp td{padding:11px 12px; text-align:center; border-bottom:1px solid var(--line-soft)}
table.cmp thead th{
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.08em; font-size:11px;
  color:var(--chalk-faint); background:var(--pitch-2);
}
table.cmp td.book{font-family:var(--display); font-weight:600; font-size:14px; color:var(--chalk-dim)}
table.cmp tbody tr:hover{background:rgba(245,197,24,.04)}
table.cmp td.o{font-size:15px; color:var(--chalk); font-weight:600; padding:0}
table.cmp td.o a{
  color:inherit; text-decoration:none; display:block; padding:11px 12px;
  border-radius:7px; transition:.14s;
}
table.cmp td.o a:hover{background:var(--best-bg); color:var(--chalk); box-shadow:inset 0 0 0 1px var(--line)}
/* best price per outcome -> looks like a tappable gold chip */
table.cmp td.best{background:rgba(245,197,24,.07)}
table.cmp td.best a{color:var(--gold); font-weight:700; position:relative}
table.cmp td.best a::after{content:"›"; position:absolute; right:6px; top:50%; transform:translateY(-50%); opacity:0; transition:.14s; font-size:17px}
table.cmp td.best a:hover{background:rgba(245,197,24,.14); box-shadow:inset 0 0 0 1px var(--gold)}
table.cmp td.best a:hover::after{opacity:1; right:9px}
table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp .rtp{color:var(--chalk-faint); font-size:13px}

/* CONVERSION 1 — best-RTP nudge strip */
.rtp-nudge{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:16px 0 0; padding:11px 14px; border-radius:10px;
  background:rgba(245,197,24,.06); border:1px solid var(--line-soft); border-left:2px solid var(--grass);
  font-family:var(--mono); font-size:12.5px; color:var(--chalk-dim); line-height:1.4;
}
.rtp-nudge .lab{
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.1em; font-size:10.5px;
  font-weight:600; color:var(--grass); display:inline-flex; align-items:center; gap:6px;
}
.rtp-nudge .lab svg{width:13px; height:13px}
.rtp-nudge b{color:var(--chalk); font-weight:600}
.rtp-nudge a{color:var(--gold); text-decoration:none; font-weight:600; margin-left:auto; white-space:nowrap}
.rtp-nudge a:hover{color:#fff8d6}

/* CONVERSION 2 — per-match payout calculator */
.mcalc{
  background:rgba(245,197,24,.05); border:1px solid var(--line-soft); border-left:2px solid var(--grass);
  border-radius:11px; padding:14px 16px; margin:18px 0 6px;
}
.mcalc .mc-head{
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.12em; font-size:11px;
  font-weight:600; color:var(--grass); margin-bottom:12px; display:flex; align-items:center; gap:8px;
}
.mcalc .mc-head svg{width:14px; height:14px}
.mc-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.mc-stake{display:flex; align-items:center; gap:6px; flex-shrink:0}
.mc-stake label{font-family:var(--mono); font-size:11px; color:var(--chalk-faint); text-transform:uppercase; letter-spacing:.06em}
.mc-stake input{
  width:92px; background:var(--pitch); border:1px solid var(--line); color:var(--chalk);
  font-family:var(--mono); font-size:15px; font-weight:600; padding:8px 10px; border-radius:8px;
  outline:none; text-align:right; -moz-appearance:textfield;
}
.mc-stake input::-webkit-outer-spin-button, .mc-stake input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.mc-stake input:focus{border-color:var(--grass)}
.mc-stake .unit{font-family:var(--mono); font-size:13px; color:var(--chalk-faint)}
.mc-outs{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; flex:1; min-width:240px}
.mc-out{
  background:var(--pitch); border:1px solid var(--line); border-radius:9px; padding:9px 8px;
  text-decoration:none; color:inherit; text-align:center; transition:.16s;
}
.mc-out:hover{border-color:var(--gold); transform:translateY(-1px)}
.mc-out .lbl{font-family:var(--cond); text-transform:uppercase; letter-spacing:.06em; font-size:10px; color:var(--chalk-faint)}
.mc-out .pay{font-family:var(--mono); font-weight:700; font-size:17px; color:var(--gold); margin-top:3px; line-height:1}
.mc-out .at{font-family:var(--mono); font-size:10px; color:var(--chalk-faint); margin-top:3px}
@media(max-width:560px){
  .mc-row{flex-direction:column; align-items:stretch; gap:12px}
  .mc-stake{width:100%}
  .mc-stake input{flex:1; width:auto}
  .mc-outs{min-width:0; width:100%}
}

/* CONVERSION 3 — sticky favoured-outcome CTA (mobile only) */
.sticky-cta{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:40;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(10,31,20,.4), var(--pitch) 60%);
  border-top:1px solid var(--line);
}
.sticky-cta a{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(90deg,var(--grass-deep),var(--grass)); color:var(--pitch);
  font-family:var(--display); font-weight:800; font-size:15px; text-decoration:none;
  padding:14px; border-radius:11px; box-shadow:0 6px 22px rgba(245,197,24,.4);
}
.sticky-cta a .od{font-family:var(--mono); font-weight:700; background:rgba(10,31,20,.18); padding:2px 8px; border-radius:6px}
.sticky-cta a .arr{font-size:17px}

@media(max-width:560px){
  /* keep every column (incl. RTP) and let the table scroll horizontally inside .cmp-wrap
     rather than dropping columns to fit */
  table.cmp{min-width:520px}
}
@media(max-width:700px){
  .sticky-cta{display:block}
  body{padding-bottom:84px}
}

/* =====================================================================
   LANDING PAGE — race cards (cyklingodds.dk homepage)
   ===================================================================== */
.landing-hero{padding:60px 0 26px}
.landing-hero h1{font-size:clamp(40px,8.5vw,82px)}
.landing-hero .sub{max-width:640px; font-size:17px}
.landing-intro{
  color:var(--chalk-dim); font-size:15px; line-height:1.6; max-width:680px;
  margin:18px 0 4px;
}

.race-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:18px; margin:30px 0 10px;
}
.race-card{
  position:relative; display:flex; flex-direction:column; gap:8px;
  padding:22px 22px 20px; border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg,var(--pitch-2),#171510);
  border:1px solid var(--line-soft); text-decoration:none; color:var(--chalk);
  transition:transform .2s, border-color .2s, box-shadow .25s;
}
a.race-card:hover{
  transform:translateY(-4px); border-color:var(--line);
  box-shadow:0 14px 34px rgba(0,0,0,.4);
}
/* jersey colour bar down the left edge */
.race-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px;
  background:var(--gold);
}
.race-card.jersey-yellow::before{background:linear-gradient(180deg,#ffe06b,#f5c518)}
.race-card.jersey-pink::before{background:linear-gradient(180deg,#ff8ec4,#ec4f9e)}
.race-card.jersey-red::before{background:linear-gradient(180deg,#ff6b6b,#e63946)}
.race-card.is-soon{opacity:.62; cursor:default}

.rc-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.rc-jersey{
  width:30px; height:30px; border-radius:8px; flex:none;
  background:var(--gold); box-shadow:inset 0 0 0 2px rgba(0,0,0,.18);
}
.jersey-yellow .rc-jersey{background:#f5c518}
.jersey-pink .rc-jersey{background:#ec4f9e}
.jersey-red .rc-jersey{background:#e63946}
.rc-badge{
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.14em;
  font-size:10.5px; font-weight:600; color:var(--chalk-dim);
  padding:3px 9px; border:1px solid var(--line); border-radius:999px;
}
.rc-badge.soon{color:var(--gold); border-color:rgba(245,197,24,.4)}
.rc-name{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  letter-spacing:-.01em; font-size:23px; line-height:1.05; margin-top:6px;
}
.rc-dates{font-family:var(--mono); font-size:12px; color:var(--chalk-faint)}
.rc-blurb{color:var(--chalk-dim); font-size:14px; line-height:1.5; margin-top:2px}
.rc-cta{
  margin-top:auto; padding-top:12px; font-family:var(--cond);
  text-transform:uppercase; letter-spacing:.1em; font-size:13px; font-weight:700;
  color:var(--gold); display:inline-flex; align-items:center; gap:8px;
}
.rc-cta.muted{color:var(--chalk-faint)}
.rc-arrow{transition:transform .2s}
a.race-card:hover .rc-arrow{transform:translateX(5px)}

/* small "how it works" strip under the cards */
.landing-how{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px; margin:34px 0 10px;
}
.how-cell{
  padding:18px; border:1px solid var(--line-soft); border-radius:13px;
  background:rgba(245,197,24,.03);
}
.how-cell .hn{
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.12em;
  font-size:12px; color:var(--gold); font-weight:600; margin-bottom:6px;
}
.how-cell p{color:var(--chalk-dim); font-size:13.5px; line-height:1.55}