/* VDL Draft - shared styles. Extends the look of the original landing page. */
:root{
  --bg:#0b0f16;
  --text:#e8eef5;
  --muted:#8b98a9;
  --faint:#6b7787;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --surface:rgba(255,255,255,.035);
  --card:rgba(11,15,22,.62);
  --accent:#4ade80;
  --gold:#e0a415;
  /* In-progress matches use a LIGHTER green than settled results, so a score
     that can still change never looks final. 14.97:1 on the page background,
     OKLab dE 14.2 from the played green - comfortably tellable apart. */
  --live:#a7f3d0;
  --prov:#60a5fa;
  /* Categorical series, fixed order, validated >=3:1 on --bg */
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
  --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767;
}
*{box-sizing:border-box}
html,body{min-height:100%}
/* clip rather than hidden: hidden on body alone still lets content overflow,
   and turns the element into a scroll container. */
html{overflow-x:clip;max-width:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  max-width:100%;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;
  position:relative;overflow-x:hidden;
}

/* ---- ambient background (shared with the landing page) ---- */
.wash,.gridlines{position:fixed;inset:0;pointer-events:none;z-index:0}
.wash{background:
  radial-gradient(60rem 40rem at 15% -10%, rgba(74,222,128,.10), transparent 60%),
  radial-gradient(50rem 35rem at 90% 110%, rgba(96,165,250,.10), transparent 60%);}
.gridlines{
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 30%,#000 5%,transparent 70%);
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000 5%,transparent 70%);
  opacity:.4;
}
.crests{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.crest{position:absolute;opacity:.13;animation:drift 18s ease-in-out infinite}
.crest img{display:block;width:100%;height:100%;object-fit:contain}
.c1{width:94px;height:94px;top:9%;left:4%;animation-delay:0s;animation-duration:18s}
.c3{width:86px;height:86px;top:52%;left:2%;animation-delay:-6s;animation-duration:21s}
.c5{width:98px;height:98px;bottom:8%;left:9%;animation-delay:-12s;animation-duration:17s}
.c2{width:102px;height:102px;top:14%;right:4%;animation-delay:-3s;animation-duration:19.5s}
.c4{width:88px;height:88px;top:58%;right:3%;animation-delay:-9s;animation-duration:22s}
.c6{width:92px;height:92px;bottom:11%;right:10%;animation-delay:-15s;animation-duration:16.5s}
.c2{opacity:.19}
.c2 img{filter:brightness(0) invert(1)}
@keyframes drift{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(2deg)}}

/* ---- shell ---- */
.shell{position:relative;z-index:1;max-width:74rem;margin:0 auto;padding:2rem 1.25rem 4rem}

.site-header{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-bottom:1.75rem;
  padding-bottom:1.1rem;border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:baseline;gap:.7rem;text-decoration:none;color:inherit}
.brand h1{
  font-size:1.6rem;font-weight:700;letter-spacing:-.03em;margin:0;
  background:linear-gradient(180deg,#fff,#9fb0c4);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand .sub{font-size:.76rem;color:var(--muted);letter-spacing:.02em}
nav{display:flex;gap:.35rem}
nav a{
  color:var(--muted);text-decoration:none;font-size:.88rem;font-weight:500;
  padding:.4rem .8rem;border-radius:7px;border:1px solid transparent;
  transition:color .18s,background .18s,border-color .18s;
}
nav a:hover{color:var(--text);background:var(--surface)}
nav a[aria-current="page"]{color:var(--text);background:var(--surface);border-color:var(--line-strong)}
nav a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- status strip ---- */
.status{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  font-size:.8rem;color:var(--muted);margin-bottom:1.5rem;
}
.pill{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:.26rem .6rem;border-radius:999px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--muted);white-space:nowrap;
}
.pill.mock{color:#f5c451;border-color:rgba(245,196,81,.45);background:rgba(245,196,81,.10)}
.pill.livegw{color:var(--accent);border-color:rgba(74,222,128,.4);background:rgba(74,222,128,.10)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{opacity:1}50%{opacity:.35}100%{opacity:1}}

/* ---- cards ---- */
.card{
  min-width:0;
  border:1px solid var(--line);background:var(--card);
  backdrop-filter:blur(8px);border-radius:13px;padding:1.1rem 1.15rem 1.25rem;
}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;margin-bottom:.9rem}
.card-title{font-size:.95rem;font-weight:650;letter-spacing:-.01em;margin:0;display:flex;align-items:center;gap:.5rem}
.card-title::before{content:"";width:3px;height:1em;border-radius:2px;background:var(--accent)}
.card.prov .card-title::before{background:var(--prov)}
.card-note{font-size:.72rem;color:var(--faint)}

/* ---- home layout: two tables side by side, graph across the bottom ---- */
.board{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;min-width:0}
.board .chart-card{grid-column:1 / -1}
@media (max-width:860px){ .board{grid-template-columns:1fr} }

/* ---- tables ---- */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:.87rem}
table.tbl th{
  text-align:left;font-size:.65rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);padding:.4rem .5rem .55rem;
  border-bottom:1px solid var(--line-strong);white-space:nowrap;
}
table.tbl td{padding:.5rem;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tbody tr{transition:background .15s}
table.tbl tbody tr:hover{background:rgba(255,255,255,.035)}
.rank{width:2rem;text-align:center;font-variant-numeric:tabular-nums;font-weight:650;color:var(--muted);font-size:.8rem}
tr.pos-1 .rank{color:var(--gold)}
.team{font-weight:600}
.team .mgr{display:block;font-size:.72rem;font-weight:400;color:var(--faint);letter-spacing:.01em}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pts{font-weight:700;font-size:.95rem}
.unconf{color:var(--prov);font-weight:600;font-size:.82rem}
.unconf.zero{color:var(--faint);font-weight:400}
.delta{font-size:.72rem;font-variant-numeric:tabular-nums;width:2.4rem;text-align:right}
.delta.up{color:var(--accent)} .delta.down{color:#e66767} .delta.same{color:var(--faint)}

/* ---- chart ---- */
.chart-card{padding-bottom:1rem}
.chart-holder{position:relative;width:100%;min-width:0;max-width:100%}
svg.chart{display:block;width:100%;max-width:100%;height:auto;overflow:hidden}
.chart .axis{stroke:var(--line);stroke-width:1}
.chart .gridline{stroke:rgba(255,255,255,.055);stroke-width:1}
.chart .tick{fill:var(--faint);font-size:10px}
.chart .axis-label{fill:var(--muted);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.chart .line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chart .line.dim{opacity:.16}
.chart .endpoint{stroke:var(--bg);stroke-width:2}
.chart .endpoint.dim{opacity:.16}
.chart .crosshair{stroke:var(--line-strong);stroke-width:1;stroke-dasharray:3 3}
.chart .hoverdot{stroke:var(--bg);stroke-width:2}

.legend{display:flex;flex-wrap:wrap;gap:.3rem .95rem;margin-top:.85rem;padding-top:.85rem;border-top:1px solid var(--line)}
.legend button{
  display:inline-flex;align-items:center;gap:.45rem;background:none;border:0;
  padding:.2rem .1rem;cursor:pointer;color:var(--muted);font-size:.78rem;
  font-family:inherit;border-radius:5px;transition:color .15s,opacity .15s;
}
.legend button:hover{color:var(--text)}
.legend button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.legend button.off{opacity:.4}
.legend .swatch{width:11px;height:11px;border-radius:3px;flex:none}

.tooltip{
  position:absolute;pointer-events:none;z-index:5;opacity:0;
  transform:translate(-50%,-100%);transition:opacity .12s;
  background:#131926;border:1px solid var(--line-strong);border-radius:9px;
  padding:.55rem .7rem;font-size:.78rem;min-width:11rem;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.7);
}
.tooltip.on{opacity:1}
.tooltip .tt-head{font-weight:700;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.tooltip .tt-row{display:flex;align-items:center;gap:.45rem;justify-content:space-between;padding:.08rem 0}
.tooltip .tt-name{display:flex;align-items:center;gap:.4rem;min-width:0}
.tooltip .tt-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:8.5rem}
.tooltip .tt-val{font-variant-numeric:tabular-nums;font-weight:700}

/* ---- team viewer ---- */
/* min(...,100%) is what stops these tracks forcing a wider-than-viewport grid
   item on narrow screens - a bare minmax(19rem,1fr) can never shrink below
   19rem and silently overflows the page. */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(19rem,100%),1fr));gap:1rem}
.squad h3{margin:0;font-size:.98rem;font-weight:650;letter-spacing:-.01em}
.squad .mgr{font-size:.76rem;color:var(--faint);font-weight:400}
.pos-group{margin-top:.75rem}
.pos-label{
  font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);padding-bottom:.3rem;border-bottom:1px solid var(--line);margin-bottom:.35rem;
}
.player{display:flex;align-items:center;gap:.55rem;padding:.28rem 0;font-size:.85rem}
.player .pname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player .pteam{font-size:.68rem;color:var(--faint);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.player .ppts{font-variant-numeric:tabular-nums;font-weight:650;font-size:.8rem;width:2.2rem;text-align:right}
.player.flagged .pname{color:#e6a15f}
.player .flag{font-size:.64rem;color:#e6a15f}

.empty{padding:2.5rem 1rem;text-align:center;color:var(--muted);font-size:.9rem}
.empty strong{display:block;color:var(--text);font-size:1rem;margin-bottom:.35rem}
footer{margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.76rem;color:var(--faint)}
footer code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* pre-season hint above a table that is real but all zeros */
.pre-note{
  margin:0 0 .7rem;font-size:.76rem;color:var(--faint);
  padding:.4rem .55rem;border-radius:6px;
  background:var(--surface);border:1px solid var(--line);
}

/* ---- trades ---- */
.sec-title{font-size:1.05rem;font-weight:650;letter-spacing:-.015em;margin:0 0 .8rem;
  display:flex;align-items:center;gap:.5rem}
.sec-title .count{font-size:.7rem;font-weight:600;color:var(--faint);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.1rem .45rem}
.tgroup{margin-bottom:2rem}
.tlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(22rem,100%),1fr));gap:1rem}
.card.trade{padding:1rem 1.1rem 1.15rem}
.card.trade .card-title::before{background:var(--faint)}
.card.trade.on .card-title::before{background:var(--accent)}
.card.trade.pend .card-title::before{background:var(--gold)}
.card.trade.bad .card-title::before{background:#e66767}
.tstate{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.12rem .42rem;border-radius:4px;border:1px solid var(--line-strong);color:var(--faint)}
.tstate.on{color:var(--accent);border-color:rgba(74,222,128,.4);background:rgba(74,222,128,.1)}
.tstate.pend{color:var(--gold);border-color:rgba(224,164,21,.4);background:rgba(224,164,21,.1)}
.tstate.bad{color:#e66767;border-color:rgba(230,103,103,.4);background:rgba(230,103,103,.1)}
.verdict{display:block;font-size:.82rem;color:var(--muted);margin:-.2rem 0 .8rem}
.verdict strong{color:var(--text)}
.verdict.level{color:var(--faint)}
.vsub{color:var(--faint);font-size:.75rem}
.tgrid{display:grid;grid-template-columns:1fr auto 1fr;gap:.6rem;align-items:start;min-width:0}
.swap{color:var(--faint);font-size:1.1rem;padding-top:1.2rem}
.tside{min-width:0}
.tname{font-size:.82rem;font-weight:650;margin-bottom:.4rem;overflow:hidden;text-overflow:ellipsis}
.tname .mgr{display:block;font-size:.68rem;font-weight:400;color:var(--faint)}
.trow{display:flex;gap:.4rem;align-items:flex-start;margin-bottom:.25rem}
.dir{font-size:.55rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.12rem .3rem;border-radius:3px;flex:none;margin-top:.15rem}
.dir.in{color:var(--accent);background:rgba(74,222,128,.12)}
.dir.out{color:#e6a15f;background:rgba(230,161,95,.12)}
.chips{display:flex;flex-wrap:wrap;gap:.25rem;min-width:0}
.pl{font-size:.78rem;padding:.1rem .35rem;border-radius:4px;white-space:nowrap;
  border:1px solid transparent}
.pl.held{color:var(--text);background:rgba(74,222,128,.10);border-color:rgba(74,222,128,.3)}
.pl.lost{color:var(--faint);background:var(--surface);text-decoration:line-through;
  text-decoration-color:rgba(255,255,255,.3)}
.pmeta{font-size:.62rem;color:var(--faint);margin-left:.2rem}

/* ---- waivers ---- */
.wboard{display:grid;grid-template-columns:1.25fr 1fr;gap:1rem;align-items:start;min-width:0}
@media (max-width:980px){.wboard{grid-template-columns:1fr}}
.wteam{font-weight:600;font-size:.84rem}
.wteam .mgr{display:block;font-size:.68rem;font-weight:400;color:var(--faint)}
.wpl{font-size:.8rem;display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.arrow{color:var(--faint)}
.wk{display:inline-flex;gap:2px}
.wk i{font-style:normal;font-variant-numeric:tabular-nums;font-size:.68rem;
  min-width:1.25rem;text-align:center;padding:.05rem 0;border-radius:3px;
  background:var(--surface);color:var(--muted)}
td.pts.good{color:var(--accent)} td.pts.bad{color:#e66767}
.failed{margin-top:.9rem;border-top:1px solid var(--line);padding-top:.7rem}
.failed summary{cursor:pointer;font-size:.78rem;color:var(--muted)}
.failed summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.frow{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;font-size:.76rem;
  padding:.3rem 0;border-bottom:1px solid rgba(255,255,255,.05);color:var(--muted)}
.fpl{color:var(--faint)} .fwhy{color:var(--faint);font-size:.7rem;flex:1;min-width:8rem}
.fbadge{font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.1rem .35rem;border-radius:3px;flex:none}
.fbadge.won{color:var(--accent);background:rgba(74,222,128,.12)}
.fbadge.missed{color:#e66767;background:rgba(230,103,103,.12)}
.fbadge.superseded{color:var(--faint);background:var(--surface)}
.wteam-block{border:1px solid var(--line);background:var(--card);border-radius:11px;
  padding:.8rem .9rem;margin-bottom:.7rem}
.wteam-head{display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;margin-bottom:.5rem;
  padding-bottom:.4rem;border-bottom:1px solid var(--line)}
.wteam-head strong{font-size:.85rem}
.wprio{margin-left:auto;font-size:.66rem;color:var(--faint)}
.wclaim{display:flex;align-items:center;gap:.4rem;padding:.22rem 0;font-size:.78rem;flex-wrap:wrap}

/* ---- free agent pickups ----
   Uncontested instant signings: no waiver priority, so they are never ranked.
   Violet is the one categorical hue not already carrying meaning here (green =
   won, blue = provisional, gold = 1st, red = missed). 6.14:1 on the page
   background. Kept to a slight tint - these sit alongside waivers, not above
   them. */
:root{ --fa:#9085e9; }
table.tbl tbody tr.fa{background:rgba(144,133,233,.07)}
table.tbl tbody tr.fa:hover{background:rgba(144,133,233,.12)}
table.tbl tbody tr.fa .wpl,
table.tbl tbody tr.fa .wteam{font-style:italic}
table.tbl tbody tr.fa .rank{color:var(--fa)}
.fa-tag{
  font-style:italic;color:var(--fa);font-size:.66rem;font-weight:600;
  letter-spacing:.02em;
}
.wclaim.fa{
  background:rgba(144,133,233,.07);border-radius:5px;
  padding-left:.35rem;padding-right:.35rem;font-style:italic;
}
.fbadge.freeagent{
  color:var(--fa);background:rgba(144,133,233,.14);font-style:italic;
  text-transform:none;letter-spacing:.02em;
}

/* ---- free agent feed (flat, not grouped by team) ---- */
.fa-list{display:flex;flex-direction:column;gap:.15rem}
.fa-row{
  display:grid;
  grid-template-columns:auto minmax(min(7rem,100%),1fr) minmax(min(10rem,100%),1.4fr) auto;
  align-items:center;gap:.55rem;
  padding:.42rem .5rem;border-radius:6px;
  background:rgba(144,133,233,.07);
  font-style:italic;font-size:.82rem;
}
.fa-row:hover{background:rgba(144,133,233,.12)}
.fa-who{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.fa-who strong{font-weight:650;font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fa-team{font-size:.68rem;color:var(--faint);font-style:normal;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fa-move{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;min-width:0}
.fa-when{font-size:.68rem;color:var(--faint);font-style:normal;
  white-space:nowrap;text-align:right}
@media (max-width:560px){
  .fa-row{grid-template-columns:auto 1fr;row-gap:.3rem}
  .fa-when{grid-column:1 / -1;text-align:left}
}

/* ---- waiver countdown ---- */
.cd{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  border:1px solid var(--line);background:var(--card);
  border-left:3px solid var(--fa);
  border-radius:11px;padding:.6rem .85rem;
}
.cd-label{font-size:.7rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.cd-val{display:flex;gap:.35rem;align-items:baseline}
.cd-unit{display:inline-flex;align-items:baseline;gap:.08rem}
.cd-unit b{font-size:1.15rem;font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;color:var(--text)}
.cd-unit i{font-style:normal;font-size:.68rem;color:var(--faint);margin-right:.2rem}
.cd-when{margin-left:auto;font-size:.72rem;color:var(--faint)}
.cd.done .cd-val{font-size:.9rem;color:var(--fa);font-weight:600}
@media (max-width:560px){ .cd-when{margin-left:0;flex-basis:100%} }
.wcol{display:flex;flex-direction:column;gap:1rem;min-width:0}
.card.fa-card .card-title::before{background:var(--fa)}
#countdown{margin-bottom:1rem}
.ppts.pending{color:var(--faint);font-weight:400}
.squad-note{grid-column:1 / -1;margin-bottom:0}


/* ---- very narrow screens (Flip cover display, small Androids) ----
   Below ~420px the 1.25rem gutters and a few fixed minimums eat too much of
   the line, so tighten them and let the last flexible minimums collapse. */
@media (max-width:420px){
  .shell{padding:1.25rem .7rem 3rem}
  .card{padding:.85rem .8rem 1rem}
  .tooltip{min-width:0;max-width:min(15rem,calc(100vw - 1.6rem))}
  .fwhy{min-width:0}
  .tgrid{grid-template-columns:1fr;gap:.35rem}
  .swap{display:none}
  .tside + .tside{padding-top:.5rem;border-top:1px dashed var(--line)}
  .site-header{gap:.5rem}
  .brand h1{font-size:1.35rem}
  nav a{padding:.35rem .55rem;font-size:.82rem}
  .cd{padding:.5rem .6rem;gap:.4rem}
  .cd-unit b{font-size:1rem}
}

/* ---- squad split: starting XI vs bench ---- */
.squad-split{margin-top:.7rem}
.squad-label{
  display:flex;align-items:center;gap:.4rem;
  font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding-bottom:.35rem;margin-bottom:.2rem;
  border-bottom:1px solid var(--line-strong);
}
.squad-label span{
  font-size:.6rem;font-weight:600;letter-spacing:0;color:var(--faint);
  background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:.02rem .35rem;
}
.squad-label.xi{color:var(--accent)}
.squad-label.xi span{border-color:rgba(74,222,128,.3)}
.squad-split.bench{
  margin-top:.85rem;padding-top:.1rem;
  opacity:.82;
}
.squad-split.bench .squad-label{color:var(--faint)}
.benchrow{display:flex;align-items:center;gap:.45rem}
.benchrow .player{flex:1;min-width:0}
.bnum{
  flex:none;width:1.1rem;height:1.1rem;border-radius:4px;
  display:grid;place-items:center;
  font-size:.6rem;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--faint);background:var(--surface);border:1px solid var(--line);
}

/* ---- per-player gameweek play state (Teams page) ----
   A box around each player, separate from the amber "injured" name colour:
     green  played this gameweek
     red    their fixture is over and they never featured
     amber  still to play, or on the pitch now
     grey   no fixture at all this gameweek (blank GW) */
.player{
  padding:.28rem .4rem;
  border:1px solid transparent;
  border-radius:6px;
  margin-bottom:1px;
}
.player.ps-played {border-color:rgba(74,222,128,.55); background:rgba(74,222,128,.09)}
.player.ps-blank  {border-color:rgba(230,103,103,.55); background:rgba(230,103,103,.09)}
.player.ps-pending{border-color:rgba(230,161,95,.45); background:rgba(230,161,95,.07)}
.player.ps-no_fixture{border-color:var(--line); background:var(--surface); opacity:.7}
.player.ps-played .ppts {color:var(--accent)}
.player.ps-blank  .ppts {color:#e66767}
.benchrow{margin-bottom:1px}

/* ---- predicted automatic substitutions ---- */
.player.sub-on{
  border-color:rgba(74,222,128,.7);
  background:rgba(74,222,128,.14);
  box-shadow:inset 2px 0 0 var(--accent);
}
.player.sub-off .pname{text-decoration:line-through;
  text-decoration-color:rgba(230,103,103,.6);opacity:.75}
.subtag{
  font-size:.58rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:.04rem .3rem;border-radius:3px;white-space:nowrap;
  color:var(--accent);background:rgba(74,222,128,.16);margin-left:.15rem;
}
.subtag.off{color:#e66767;background:rgba(230,103,103,.16)}

/* A predicted sub whose own fixture has not happened yet: likely, not certain.
   Amber rather than green so it never reads as a done deal. */
.player.sub-maybe{
  border-color:rgba(230,161,95,.7);
  background:rgba(230,161,95,.12);
  box-shadow:inset 2px 0 0 #e6a15f;
}
.subtag.maybe{color:#e6a15f;background:rgba(230,161,95,.16)}
.subtag.off.maybe{color:var(--faint);background:var(--surface)}

/* how many of the starting eleven are still to feature */
.toplay{color:#e6a15f;font-weight:600}
.toplay.done{color:var(--faint);font-weight:400}

/* ---- clickable team rows + points breakdown ---- */
table.tbl tbody tr.clickable{cursor:pointer}
table.tbl tbody tr.clickable:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
table.tbl tbody tr.clickable .team::after{
  content:"\25be";margin-left:.35rem;color:var(--faint);font-size:.7rem;
  display:inline-block;transition:transform .18s;
}
table.tbl tbody tr.clickable.open .team::after{transform:rotate(180deg);color:var(--text)}
table.tbl tbody tr.bd-tr > td{padding:0;background:rgba(0,0,0,.25)}
table.tbl tbody tr.bd-tr:hover > td{background:rgba(0,0,0,.25)}

.bd{padding:.6rem .5rem .7rem;font-size:.8rem}
.bd-meta{font-size:.68rem;color:var(--faint);letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:.5rem;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.bd-livecount{display:inline-flex;align-items:center;gap:.3rem;color:var(--live)}
.bd-sec{margin-bottom:.6rem}
.bd-head{display:flex;align-items:center;gap:.4rem;font-size:.64rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
  padding-bottom:.25rem;margin-bottom:.25rem;border-bottom:1px solid var(--line)}
.bd-note{font-size:.58rem;font-weight:400;letter-spacing:.02em;color:var(--faint);text-transform:none}
.bd-total{margin-left:auto;color:var(--text);font-variant-numeric:tabular-nums}
.bd-row{
  display:grid;grid-template-columns:2.1rem 1fr 2.4rem 5.2rem 2.4rem 2.2rem;
  align-items:center;gap:.3rem;padding:.2rem .3rem;border-radius:4px;
  border-left:2px solid transparent;
}
.bd-row.done   {border-left-color:var(--accent)}
.bd-row.blank  {border-left-color:#e66767;opacity:.75}
.bd-row.waiting{border-left-color:#e6a15f}
.bd-row.none   {border-left-color:var(--line)}
.bd-row.live   {background:rgba(167,243,208,.09)}
.bd-pos{font-size:.58rem;font-weight:700;color:var(--faint);letter-spacing:.04em}
.bd-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;
  align-items:center;gap:.25rem;min-width:0}
.bd-team{font-size:.65rem;color:var(--faint);letter-spacing:.03em}
.bd-status{font-size:.62rem;color:var(--muted);display:flex;align-items:center;gap:.28rem;
  letter-spacing:.04em}
.bd-row.live .bd-status{color:var(--live);font-weight:700}
.bd-min{font-size:.65rem;color:var(--faint);font-variant-numeric:tabular-nums;text-align:right}
.bd-pts{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.bd-empty{padding:1rem;color:var(--muted);font-size:.82rem}
.livedot{width:6px;height:6px;border-radius:50%;background:var(--live);flex:none;
  animation:pulse 1.6s ease-out infinite}
@media (max-width:560px){
  .bd-row{grid-template-columns:1.9rem 1fr 4.4rem 2.1rem;row-gap:.1rem}
  .bd-team,.bd-min{display:none}
}

/* ---- per-player points breakdown (Teams page) ---- */
.pcell.has-bd{cursor:pointer;border-radius:6px}
.pcell.has-bd:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.pcell.has-bd .player::after{
  content:"\25be";margin-left:.3rem;color:var(--faint);font-size:.6rem;
  display:inline-block;transition:transform .18s;
}
.pcell.has-bd.open .player::after{transform:rotate(180deg);color:var(--text)}
.pbd{display:none;padding:.35rem .5rem .45rem 1.1rem;font-size:.74rem;
  border-left:2px solid var(--line-strong);margin:.15rem 0 .35rem .35rem}
.pcell.open .pbd{display:block}
.pbd.empty{color:var(--faint);font-style:italic}
.pbd-row{display:grid;grid-template-columns:1fr auto 2.2rem;gap:.4rem;
  align-items:baseline;padding:.1rem 0}
.pbd-label{color:var(--muted)}
.pbd-detail{color:var(--faint);font-size:.66rem;font-variant-numeric:tabular-nums}
.pbd-pts{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.pbd-pts.pos{color:var(--accent)} .pbd-pts.neg{color:#e66767}
.pbd-row.total{border-top:1px solid var(--line);margin-top:.2rem;padding-top:.25rem}
.pbd-row.total .pbd-label{color:var(--text);font-weight:650}
.pbd-live{display:flex;align-items:center;gap:.35rem;margin-top:.3rem;
  font-size:.66rem;color:var(--live)}
.ppts.livepts::after{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--live);margin-left:.25rem;vertical-align:middle;
  animation:pulse 1.6s ease-out infinite}

/* A player who has featured but whose match is STILL RUNNING: lighter green,
   because those points are not settled yet. */
.player.ps-played.live-match{
  border-color:rgba(167,243,208,.6);
  background:rgba(167,243,208,.10);
}
.player.ps-played.live-match .ppts{color:var(--live)}

/* a manager's own preference rank for a claim (1 = their first choice) */
.wchoice{
  flex:none;width:1.05rem;height:1.05rem;border-radius:3px;
  display:grid;place-items:center;font-size:.58rem;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--faint);
  background:var(--surface);border:1px solid var(--line);
}
.wprio{white-space:nowrap}

/* joint positions: the repeated number is correct, not a glitch */
.rank.tied::after{content:"=";font-size:.6rem;color:var(--faint);margin-left:1px;
  vertical-align:super}

/* per-gameweek cells that predate a waiver claim: context, not counted */
.wk i.ctx{opacity:.38;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.25)}