/* poolsagents.com — the coupon slip.
   Loaded after site.css. Everything here is scoped to #coupon, the number board and the
   filter row, so no other page (draws, archive, dead games) changes.

   The idea: the fixtures list reads like a printed pools coupon. Each line has a number
   stub on the left, both teams written out in full, the score beside each team, and the
   result in pools notation on the right: 1 (home), X (draw), 2 (away). The X is the one
   loud mark on the page, because the draw is what the site is about. */

:root{
  --rule:#E5EAE3;
  --stub:#F2F5F0;
  --live:#B4740B;
}

/* ------------------------------------------------------------------ board */
.numgrid{grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px}
.nc{height:44px;border-radius:9px;font-size:16px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.nc i{font-variant-numeric:tabular-nums}
/* provisional (still being played): a dashed edge says "can change" without the hatching,
   which read as noise on a phone */
.numgrid.board .nc.prov{opacity:1}
.numgrid.board .nc.prov::after{display:none}
.numgrid.board .nc.prov{border-style:dashed;border-width:1.5px}
.numgrid.board .nc.sd.prov{background:var(--c-sd-bg);color:var(--c-sd);border-color:var(--c-sd)}
.numgrid.board .nc.home.prov{border-color:var(--c-home)}
.numgrid.board .nc.away.prov{border-color:var(--c-away)}
.numkey{font-size:12px;gap:16px;margin-bottom:18px}

/* ---------------------------------------------------------------- filters */
.filters{flex-wrap:nowrap;overflow-x:auto;gap:6px;margin:16px -16px 10px;padding:2px 16px 6px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.filters::-webkit-scrollbar{display:none}
.filters .lbl{display:none}
.filters .f{flex:0 0 auto;font-size:13px;padding:7px 14px;white-space:nowrap}
.filters .mine{flex:0 0 auto;width:132px;font-size:13px;padding:7px 12px}
.f:focus-visible,.mine:focus-visible{outline:2px solid var(--ok);outline-offset:2px}

/* ------------------------------------------------------------ the coupon */
table.coupon.fx{display:block;background:var(--sur);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;font-size:15px}
table.coupon.fx thead{display:none}
table.coupon.fx tbody{display:block}
table.coupon.fx tr{display:grid;position:relative;column-gap:10px;padding:11px 12px 11px 10px;
  border-bottom:1px solid var(--rule);background:var(--sur);
  grid-template-columns:38px minmax(0,1fr) 42px 30px;
  grid-template-rows:20px 20px 18px;
  grid-template-areas:"no m sc mk" "no m sc mk" "no m st mk"}
table.coupon.fx tr:last-child{border-bottom:0}
table.coupon.fx td{display:block;padding:0;border:0;text-align:left;min-width:0}
table.coupon.fx tr.adrow{display:block;padding:8px 12px}
table.coupon.fx tr.adrow td{display:block}

/* number stub */
table.coupon.fx td.no{grid-area:no;align-self:center;display:grid;place-items:center;
  width:38px;height:38px;border-radius:9px;background:var(--stub);border:1px solid var(--line);
  font-size:16px;font-weight:700;color:var(--ink2);font-variant-numeric:tabular-nums}

/* teams, league line */
table.coupon.fx td.m{grid-area:m;grid-row:1 / 4;max-width:none;overflow:visible;white-space:normal;color:var(--ink)}
table.coupon.fx .tms{display:block}
table.coupon.fx .tm{display:block;height:20px;line-height:20px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:15px;color:var(--ink)}
table.coupon.fx .vs{display:none}
table.coupon.fx .tm.w{font-weight:700}
table.coupon.fx tr.final:not(.c-score_draw):not(.c-no_score_draw) .tm:not(.w){color:var(--ink2)}
table.coupon.fx .lg{display:flex;align-items:baseline;height:18px;line-height:18px;margin-top:0;font-size:12px;color:var(--mute);
  white-space:nowrap;overflow:hidden}
table.coupon.fx .lg .lgn{min-width:0;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
table.coupon.fx .lg .pd,table.coupon.fx .lg .kt,table.coupon.fx .lg em{flex:0 0 auto;font-variant-numeric:tabular-nums}
table.coupon.fx .lg .sep{padding:0 .4em}
table.coupon.fx .lg em{font-style:normal;color:var(--live);font-weight:600}
/* "one goal away" replaces the percentage while a match is one goal from a draw */
table.coupon.fx .lg .cl{display:none}
table.coupon.fx tr.close .lg .cl{display:inline}
table.coupon.fx tr.close .lg .pd{display:none}

/* score: one number beside each team */
table.coupon.fx td.sc{grid-area:sc;grid-row:1 / 3;text-align:center;font-variant-numeric:tabular-nums}
table.coupon.fx td.sc .g{display:block;height:20px;line-height:20px;font-size:17px;font-weight:700}
table.coupon.fx td.sc i{display:none}
table.coupon.fx td.sc.sc-live{color:var(--live)}
table.coupon.fx td.sc.sc-done{color:var(--ink)}
table.coupon.fx td.sc.sc-none{color:var(--mute);font-weight:500;font-size:14px;line-height:40px}
table.coupon.fx tr.nostart td.sc{visibility:hidden}

/* status under the score: quiet when finished, loud only while live */
table.coupon.fx td.st{grid-area:st;text-align:center;white-space:nowrap;align-self:end;line-height:18px}
table.coupon.fx .st-done,table.coupon.fx .st-soon{background:none;padding:0;border-radius:0;
  font-size:11.5px;font-weight:600;color:var(--mute)}
table.coupon.fx .st-live{background:none;padding:0;gap:4px;font-size:12px;color:var(--live)}
table.coupon.fx .st-live::before{background:var(--live)}
table.coupon.fx .st-off{font-size:11px;padding:1px 6px}

/* the mark: 1, X or 2 */
table.coupon.fx td.cls{grid-area:mk;grid-row:1 / 4;align-self:center;justify-self:end;display:grid;place-items:center;
  width:30px;height:30px;border-radius:8px;border:1.5px solid transparent;background:transparent;
  font-size:14px;font-weight:800;line-height:1;color:var(--mute)}
table.coupon.fx td.cls:empty{border:1.5px dashed var(--line2);opacity:.7}
table.coupon.fx tr.c-score_draw td.cls,table.coupon.fx tr.c-no_score_draw td.cls{
  background:var(--c-sd);border-color:var(--c-sd);color:#fff}
table.coupon.fx tr.c-home td.cls{background:var(--c-home-bg);border-color:var(--c-home);color:var(--c-home)}
table.coupon.fx tr.c-away td.cls{background:var(--c-away-bg);border-color:var(--c-away);color:var(--c-away)}
table.coupon.fx tr.c-void td.cls{border-color:var(--line2);color:var(--c-void);font-weight:600;font-size:11px}
/* still playing: the same mark, outlined, because it can still change */
table.coupon.fx td.cls.prov{background:transparent !important;border-style:dashed}
table.coupon.fx tr.c-score_draw td.cls.prov,table.coupon.fx tr.c-no_score_draw td.cls.prov{color:var(--c-sd)}

/* row state: a draw gets the stub and a thin bar, not a coloured block */
table.coupon.fx tr.draw,table.coupon.fx tr.c-score_draw,table.coupon.fx tr.c-no_score_draw{background:var(--sur)}
table.coupon.fx tr.draw{box-shadow:inset 3px 0 0 var(--c-sd)}
table.coupon.fx tr.draw td.no,table.coupon.fx tr.c-score_draw td.no,table.coupon.fx tr.c-no_score_draw td.no{
  background:var(--c-sd);border-color:var(--c-sd);color:#fff;box-shadow:none}
table.coupon.fx tr.draw:not(.final) td.no{background:var(--c-sd-bg);color:var(--c-sd);border-style:dashed}
table.coupon.fx tr.close{box-shadow:inset 3px 0 0 #E0A93B}
table.coupon.fx tr.close.draw{box-shadow:inset 3px 0 0 var(--c-sd)}
table.coupon.fx tr.c-void{background:var(--c-void-bg)}
table.coupon.fx tr.c-void td{color:var(--c-void)}
table.coupon.fx tr.unpriced .tm{color:var(--ink2)}
table.coupon.fx tr.flash{animation:flash 1.4s ease-out}
table.coupon.fx tr:target{background:#FFF7DD}
table.coupon.fx tr:target td.no{box-shadow:none;outline:2px solid var(--warn);outline-offset:1px}

/* ---- before kick-off: the market's chance of a draw is the headline of each line ---- */
table.coupon.fx-priced tr{grid-template-columns:38px minmax(0,1fr) 68px;
  grid-template-areas:"no m pc" "no m pc" "no m pr"}
table.coupon.fx-priced td.pc{grid-area:pc;grid-row:1 / 3;align-self:start;text-align:right;
  font-size:20px;font-weight:800;line-height:20px;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
table.coupon.fx-priced td.pc::after{content:"";display:block;height:4px;margin:7px 0 0 auto;width:100%;
  border-radius:2px;background:linear-gradient(90deg,var(--ink2) var(--w,0%),var(--rule) var(--w,0%))}
table.coupon.fx-priced tr.top td.pc{color:var(--c-sd)}
table.coupon.fx-priced tr.top td.pc::after{background:linear-gradient(90deg,var(--c-sd) var(--w,0%),var(--rule) var(--w,0%))}
table.coupon.fx-priced tr.top td.no{background:var(--c-sd-bg);border-color:var(--c-sd);color:var(--c-sd)}
table.coupon.fx-priced td.pr{grid-area:pr;text-align:right;align-self:end;font-size:12px;line-height:18px;
  color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap}
table.coupon.fx-priced td.pr small{margin-left:6px;font-size:11px;color:var(--mute)}
table.coupon.fx-priced tr.unpriced td.pc{color:var(--mute);font-weight:500}
table.coupon.fx-priced tr.unpriced td.pc::after{display:none}
table.coupon.fx-priced tr.top{box-shadow:inset 3px 0 0 var(--c-sd)}

@media(max-width:340px){table.coupon.fx .lg .pdw{display:none}}

/* ---------------------------------------------------------------- wider screens */
@media(min-width:720px){
  table.coupon.fx{font-size:15px}
  table.coupon.fx thead{display:block;background:var(--stub);border-bottom:1px solid var(--line)}
  table.coupon.fx thead tr{padding:9px 16px 9px 16px;border-bottom:0;background:transparent;
    grid-template-rows:auto;grid-template-areas:none;
    grid-template-columns:44px minmax(0,1fr) 84px 84px 44px;column-gap:14px}
  table.coupon.fx-priced thead tr{grid-template-columns:44px minmax(0,1fr) 96px 130px}
  table.coupon.fx thead th{display:block;padding:0;border:0;background:none;text-transform:none;letter-spacing:0;
    font-size:12px;font-weight:600;color:var(--mute)}
  table.coupon.fx thead th.c{text-align:center}
  table.coupon.fx thead th.r{text-align:right}

  table.coupon.fx tr{padding:12px 16px;column-gap:14px;grid-template-rows:20px 20px;
    grid-template-columns:44px minmax(0,1fr) 84px 84px 44px;
    grid-template-areas:"no m sc st mk" "no m sc st mk"}
  table.coupon.fx td.no{width:42px;height:42px}
  table.coupon.fx td.m{grid-row:1 / 3}
  table.coupon.fx .tms{display:block;height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  table.coupon.fx .tm{display:inline;height:auto;font-size:16px}
  table.coupon.fx .vs{display:inline;color:var(--mute);padding:0 3px}
  table.coupon.fx .lg{height:20px;line-height:20px}
  table.coupon.fx td.sc{grid-row:1 / 3;align-self:center;display:flex;justify-content:center;align-items:center;gap:6px}
  table.coupon.fx td.sc .g{display:inline;height:auto;line-height:1;font-size:19px}
  table.coupon.fx td.sc i{display:inline;font-style:normal;color:var(--mute);font-weight:500}
  table.coupon.fx td.sc.sc-none{line-height:1}
  table.coupon.fx td.st{grid-row:1 / 3;align-self:center;text-align:center}
  table.coupon.fx td.cls{grid-row:1 / 3;width:34px;height:34px;justify-self:center}

  table.coupon.fx-priced tr{grid-template-columns:44px minmax(0,1fr) 96px 130px;grid-template-rows:20px 20px;
    grid-template-areas:"no m pc pr" "no m pc pr"}
  table.coupon.fx-priced td.pc{grid-row:1 / 3;align-self:center;font-size:22px}
  table.coupon.fx-priced td.pr{grid-row:1 / 3;align-self:center;font-size:14px}
}

/* ---------------------------------------------------------------- dark mode */
@media(prefers-color-scheme:dark){
  :root{--rule:#262E2A;--stub:#1F2622;--live:#E8A74A;
        --c-sd:#3FA874;--c-sd-bg:#17332A;--c-nsd:#6FD3A0;--c-nsd-bg:#17332A;
        --c-home:#8CB4E6;--c-home-bg:#1B2A3D;--c-away:#E8A74A;--c-away-bg:#33261A;
        --c-void:#98A3A0;--c-void-bg:#1F2522}
  table.coupon.fx tr:target{background:#2E2A17}
  .numgrid.board .nc.sd{color:#fff}
  table.coupon.fx tr.draw td.no,table.coupon.fx tr.c-score_draw td.no,table.coupon.fx tr.c-no_score_draw td.no,
  table.coupon.fx tr.c-score_draw td.cls,table.coupon.fx tr.c-no_score_draw td.cls{color:#fff}
  table.coupon.fx tr.draw:not(.final) td.no{color:#6FD3A0}
  table.coupon.fx tr.c-score_draw td.cls.prov,table.coupon.fx tr.c-no_score_draw td.cls.prov{color:#6FD3A0}
}

@media(prefers-reduced-motion:reduce){
  table.coupon.fx tr.flash{animation:none}
  .st-live::before{animation:none}
}