/* poolsagents.com — mobile first. The audience is on phones on Saturday. */

:root{
  --bg:#F7F8F6; --sur:#FFFFFF; --line:#E3E7E1; --line2:#CDD5CA;
  --ink:#16201D; --ink2:#4B5854; --mute:#8A9894;
  --ok:#12603A; --ok-bg:#E9F5ED; --warn:#8A5A00; --warn-bg:#FFF6E2;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%}
a{color:var(--ok);text-decoration:none}
a:hover{text-decoration:underline}

header.site{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:14px 16px;background:var(--sur);border-bottom:1px solid var(--line)}
.logo{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.logo span{color:var(--ok)}
.tag{font-size:12px;color:var(--mute)}
header.site nav{margin-left:auto;display:flex;gap:14px;font-size:14px}
header.site nav a{color:var(--ink2)}
@media(max-width:600px){.tag{display:none}header.site nav{width:100%;margin:6px 0 0}}

.wrap{max-width:900px;margin:0 auto;padding:16px 16px 48px}
h1{font-size:21px;font-weight:650;letter-spacing:-.015em;margin:20px 0 4px}
h2{font-size:17px;font-weight:650;margin:26px 0 6px}
.lede{color:var(--ink2);font-size:14px;margin:0 0 14px}

/* state banner */
.banner{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:11px 14px;border-radius:9px;background:var(--sur);border:1px solid var(--line);
  font-size:14px;margin-bottom:14px}
.banner.live{background:var(--ok-bg);border-color:#C4E3D0;color:var(--ok)}
.banner.panel{background:var(--warn-bg);border-color:#EDDCB4;color:var(--warn)}
.banner .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);
  animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.banner .sep{color:var(--mute)}
.banner .meta{font-size:12px;opacity:.85}
.banner .stamp{margin-left:auto;font-family:var(--mono);font-size:11px;opacity:.8}

/* summary cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:8px}
@media(max-width:520px){.cards{grid-template-columns:1fr 1fr}.cards .card:last-child{grid-column:1/-1}}
.card{background:var(--sur);border:1px solid var(--line);border-radius:9px;padding:11px 13px}
.card .k{margin:0 0 3px;font-size:12px;color:var(--ink2)}
.card .v{margin:0;font-size:23px;font-weight:650;letter-spacing:-.02em}
.card .v.ok{color:var(--ok)}
.card .v small{font-size:13px;font-weight:400;color:var(--mute)}

/* number grid — the primary way people find their coupon numbers.
   Nigerian pools players work in numbers, not team names: the number is the
   loudest element on every row, everywhere on the site. */
.numgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(38px,1fr));gap:5px;margin:6px 0 8px}
.nc{position:relative;display:grid;place-items:center;height:42px;border-radius:7px;
  font-weight:700;font-size:15px;text-decoration:none;
  border:1px solid var(--line);background:var(--sur);color:var(--ink2)}
.nc:hover{text-decoration:none;border-color:var(--line2)}
.nc i{position:absolute;top:3px;right:5px;font-style:normal;font-size:8px;font-weight:600;opacity:.7}
.nc.s2{background:var(--ok-bg);border-color:transparent;color:var(--ok)}
.nc.s3{background:var(--ok-bg);border-color:var(--ok);color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok)}
.nc.na{color:var(--mute);background:var(--bg)}
/* board: settled or running classification */
.numgrid.board .nc.sd{background:var(--ok);border-color:var(--ok);color:#fff}
.numgrid.board .nc.nsd{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.numgrid.board .nc.void{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
/* provisional: a 1-1 at 67 minutes is not a result yet */
.numgrid.board .nc.prov{border-style:dashed}
.numkey{display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  font-size:11px;color:var(--mute);margin:0 0 16px}
.numkey b{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;margin-right:4px}
.numkey b.k3{background:var(--ok-bg);box-shadow:inset 0 0 0 1px var(--ok)}
.numkey b.k2{background:var(--ok-bg)}
.numkey b.k1{background:var(--sur);border:1px solid var(--line)}
.numkey b.k0{background:var(--bg);border:1px solid var(--line)}
.numkey b.bsd{background:var(--ok)}
.numkey b.bnsd{background:var(--ok-bg);border:1px solid var(--ok)}

/* score-draw ranking — number first, teams secondary */
.ranked{display:grid;gap:7px;margin-bottom:6px}
.ranked .r{display:grid;grid-template-columns:56px minmax(0,1fr) 92px;gap:12px;align-items:center;
  background:var(--sur);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.ranked .no{display:grid;place-items:center;height:48px;border-radius:9px;
  background:var(--ok-bg);color:var(--ok);font-size:24px;font-weight:800;
  line-height:1;letter-spacing:-.02em}
.ranked .no small{display:block;font-size:8px;font-weight:700;letter-spacing:.1em;opacity:.7;margin-top:2px}
.ranked .r.unpriced .no{background:#EDF0EC;color:var(--mute)}
.ranked .mid{min-width:0}
.ranked .t{margin:0 0 5px;font-size:14px;font-weight:500;color:var(--ink2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ranked .bar{height:5px;border-radius:99px;background:#E9EDE8;overflow:hidden}
.ranked .bar span{display:block;height:100%;background:var(--ok);border-radius:99px}
.ranked .l{margin:5px 0 0;font-size:10px;color:var(--mute);text-transform:uppercase;letter-spacing:.05em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ranked .rt{text-align:right}
.ranked .pc{margin:0;font-size:19px;font-weight:800;color:var(--ok);line-height:1.1}
.ranked .sub{margin:1px 0 0;font-size:10px;color:var(--mute)}
.ranked .na{margin:0;font-size:11px;color:var(--mute)}
@media(max-width:420px){
  .ranked .r{grid-template-columns:48px minmax(0,1fr) 74px;gap:9px;padding:9px 10px}
  .ranked .no{height:42px;font-size:20px}
  .ranked .pc{font-size:17px}
}

/* filters */
.filters{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:14px 0 9px}
.filters .lbl{font-size:12px;color:var(--ink2)}
.f{font:inherit;font-size:12px;padding:5px 12px;border-radius:99px;cursor:pointer;
  border:1px solid var(--line2);background:var(--sur);color:var(--ink2)}
.f.on{background:var(--ink);border-color:var(--ink);color:#fff}
.mine{font:inherit;font-size:12px;padding:5px 10px;width:118px;
  border:1px solid var(--line2);border-radius:99px;background:var(--sur)}

/* coupon table */
table.coupon{width:100%;border-collapse:collapse;background:var(--sur);
  border:1px solid var(--line);border-radius:9px;overflow:hidden;font-size:14px}
table.coupon col.c-no{width:34px}
table.coupon col.c-sc{width:62px}
table.coupon col.c-st{width:50px}
table.coupon col.c-cl{width:104px}
table.coupon th{font-size:10px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--mute);font-weight:700;text-align:left;padding:8px 6px;
  background:#FBFCFA;border-bottom:1px solid var(--line)}
table.coupon td{padding:8px 6px;border-bottom:1px solid #EFF2EE;vertical-align:middle}
table.coupon tr:last-child td{border-bottom:0}
table.coupon .c{text-align:center}
table.coupon .r{text-align:right}
table.coupon .b{font-weight:700}
table.coupon .s{font-size:11px;color:var(--mute)}
table.coupon .no{font-weight:700;color:var(--ink2);text-align:center}
table.coupon .m{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:0}
table.coupon .m em{display:block;font-style:normal;font-size:10px;color:var(--warn)}
table.coupon .cls{font-size:11px;font-weight:600;color:var(--ink2)}
table.coupon tr.draw{background:var(--ok-bg)}
table.coupon tr.draw .no,table.coupon tr.draw .cls{color:var(--ok)}
table.coupon tr.unpriced td{color:var(--mute)}
table.coupon tr.close{box-shadow:inset 3px 0 0 #E0A93B}
table.coupon tr.flash{animation:flash 1.4s ease-out}
@keyframes flash{0%{background:#FFF0C9}100%{background:transparent}}
table.coupon.archive .m a{font-weight:600}
table.coupon .m em{color:var(--mute)}

.prose p{font-size:14px;color:var(--ink2);max-width:62ch}

/* footer — columns rather than a stack of small grey paragraphs.
   Link colour is --ink2, not --mute: the old muted value sat near 2.5:1 on
   the footer background, which is unreadable on a phone in daylight. */
footer.site{border-top:1px solid var(--line);background:var(--sur);padding:30px 16px 26px;margin-top:34px}
.fwrap{max-width:900px;margin:0 auto;display:grid;gap:26px;
  grid-template-columns:1.6fr 1fr 1fr 1fr}
.fcol h4{margin:0 0 9px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--mute);font-weight:700}
.fcol a{display:block;font-size:13px;color:var(--ink2);margin-bottom:7px;line-height:1.4}
.fcol a:hover{color:var(--ok)}
.fbrand p{margin:0 0 9px;font-size:13px;color:var(--ink2);line-height:1.55;max-width:34ch}
.flogo{display:inline-block;font-size:17px;font-weight:800;letter-spacing:-.02em;
  color:var(--ink);margin-bottom:9px}
.flogo span{color:var(--ok)}
.f18{font-size:11px !important;color:var(--mute) !important}
.fbar{max-width:900px;margin:24px auto 0;padding-top:14px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fbar p{margin:0;font-size:11px;color:var(--mute)}
.fbar a{color:var(--ink2)}
.fnote{max-width:900px;margin:12px auto 0;font-size:11px;color:var(--mute);line-height:1.6}
@media(max-width:760px){
  .fwrap{grid-template-columns:1fr 1fr;gap:22px}
  .fbrand{grid-column:1/-1}
}
@media(max-width:420px){
  .fwrap{grid-template-columns:1fr}
  .fbar{flex-direction:column;gap:5px}
}

@media(prefers-color-scheme:dark){
  footer.site{background:#171D1A}
  :root{--bg:#121614;--sur:#1A201D;--line:#2A322E;--line2:#3A443F;
        --ink:#EAF0EC;--ink2:#A9B6B1;--mute:#7C8A85;--ok:#6FD3A0;--ok-bg:#16332A;
        --warn:#E0B961;--warn-bg:#33291494}
  .f.on{background:var(--ok);border-color:var(--ok);color:#0B1310}
  table.coupon th{background:#171D1A}
  table.coupon td{border-bottom-color:#232B27}
}

/* jumped to from the number grid */
table.coupon tr:target td{background:#FFF7DD}
table.coupon tr:target .no{box-shadow:inset 3px 0 0 var(--warn)}
@media(prefers-color-scheme:dark){
  .ranked .bar{background:#2A322E}
  .ranked .r.unpriced .no{background:#232B27}
  table.coupon tr:target td{background:#2E2A17}
}

/* ads — heights are reserved so a slow unit never shifts the table.
   Do not remove min-height: the live view repaints while people are reading. */
.adslot{min-height:280px;margin:20px 0;display:grid;place-items:center;
  background:var(--sur);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.adslot-foot{min-height:250px;margin-top:26px}
tr.adrow td{padding:0;background:var(--bg)}
tr.adrow .adslot{margin:12px 0;border:0;background:transparent}
@media(max-width:600px){.adslot{min-height:250px;margin:16px 0}}
@media(prefers-color-scheme:dark){.adslot{background:#171D1A}}

/* guide */
.wrap.prose{max-width:680px}
.wrap.prose h2{margin:26px 0 8px;font-size:17px}
.wrap.prose p{font-size:15px;color:var(--ink2);line-height:1.65;margin:0 0 12px}
.wrap.prose p.lede{font-size:16px;color:var(--ink)}
.wrap.prose strong{color:var(--ink);font-weight:650}
.wrap.prose p.fine{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);
  font-size:12px;color:var(--mute)}