/* Shared stylesheet for the per-manager sites under site/<name>/.
   Same visual language as the main dashboard, fewer parts. */
:root{--bg:#0F1A31;--panel:#16233F;--panel2:#1C2B4D;--line:#26365C;--ink:#E9EEF8;
--dim:#8FA0C4;--blue:#4A7FE0;--amber:#E8A13C;--green:#5FBF77;--red:#D95757;
--gkp:#3FB8AF;--def:#5B8DEF;--mid:#6FBF73;--fwd:#E0854A}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:15px/1.5 "IBM Plex Sans",system-ui,sans-serif}
header{padding:16px 14px 8px}
h1{font:600 30px "Barlow Condensed",system-ui;letter-spacing:.04em;text-transform:uppercase}
h1 em{color:var(--blue);font-style:normal}
.sub{color:var(--dim);font:500 12px "IBM Plex Mono",ui-monospace,monospace}
nav{display:flex;gap:6px;padding:10px 12px;flex-wrap:wrap;position:sticky;top:0;background:var(--bg);z-index:5}
.tab{background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--dim);
padding:8px 13px;font:600 13px "IBM Plex Sans",system-ui;cursor:pointer}
.tab.on{color:var(--ink);border-color:var(--blue);background:var(--panel2)}
section{padding:8px 12px 40px;display:none}section.on{display:block}
.wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:7px 6px;text-align:left;border-bottom:1px solid var(--line);font-size:14px}
th{font:600 11px "IBM Plex Mono",ui-monospace,monospace;color:var(--dim);white-space:nowrap}
th.s{cursor:pointer}th.s:hover{color:var(--ink)}
td.num,th.num{font:500 13px "IBM Plex Mono",ui-monospace,monospace;text-align:right;white-space:nowrap}
.pos{font:600 11px "IBM Plex Mono",ui-monospace,monospace;padding:2px 5px;border-radius:4px;color:#0F1A31}
.GKP{background:var(--gkp)}.DEF{background:var(--def)}.MID{background:var(--mid)}.FWD{background:var(--fwd)}
.nm{font-weight:600}.tm{color:var(--dim);font-size:12px}
.run{font:11px/1.5 ui-monospace,Menlo,monospace;letter-spacing:.4px;white-space:nowrap;color:var(--dim)}
.flag{color:var(--amber);font-size:11px;display:block}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0}
.card b.h{font:600 15px "Barlow Condensed",system-ui;letter-spacing:.03em;text-transform:uppercase;color:var(--dim)}
.note{color:var(--dim);font-size:12px;padding:8px 2px}
.mine-row{background:rgba(74,127,224,.10)}
.benchsep td{color:var(--dim);font:600 10px "IBM Plex Mono",ui-monospace,monospace;text-transform:uppercase;
letter-spacing:.08em;border-bottom:none;padding-top:10px}
.togo{color:var(--amber);font:11px "IBM Plex Mono",ui-monospace,monospace}
.subin{color:var(--green);font:600 10px "IBM Plex Mono",ui-monospace,monospace}
.subout{color:var(--red);font:600 10px "IBM Plex Mono",ui-monospace,monospace;text-decoration:line-through}
/* a substitution that is certain in shape but waits on the replacement's
   own match: the same badge, without the green that means settled */
.subpend{color:var(--dim);font:600 10px "IBM Plex Mono",ui-monospace,monospace}
input[type=search]{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:8px;
color:var(--ink);padding:9px 11px;font:14px "IBM Plex Sans",system-ui;margin:6px 0}
.ev{display:flex;gap:9px;padding:9px 2px;border-bottom:1px solid var(--line);align-items:baseline}
.ev:last-child{border-bottom:none}
.badge{font:600 10px "IBM Plex Mono",ui-monospace,monospace;padding:2px 6px;border-radius:4px;color:#0F1A31;white-space:nowrap}
.b-news{background:var(--blue)}.b-opinion{background:var(--amber)}
.b-move{background:var(--dim)}.b-injury{background:var(--red)}.b-recovery{background:var(--green)}
.b-haul{background:var(--amber)}.b-flop{background:var(--red)}.b-lowlight{background:var(--red)}
.b-score{background:var(--blue)}.b-live{background:var(--green)}.b-wrap{background:var(--blue)}
.b-overtake{background:var(--amber)}.b-race{background:var(--amber)}.b-bench{background:var(--fwd)}
.b-pint{background:var(--amber)}.b-freeagent{background:var(--gkp)}
.b-headline{background:var(--ink)}.b-squad{background:var(--mid)}
.b-deadline{background:var(--amber)}
.dl{border-color:var(--amber)}
.dl b.h{color:var(--amber)}
.dlbig{font:600 17px "Barlow Condensed",system-ui;letter-spacing:.03em;padding:2px 0 4px}
.dlbig em{font-style:normal;color:var(--amber)}
/* the week's three clocks, in the order they go */
.dlrow{display:flex;gap:10px;align-items:baseline;padding:3px 0;font-size:13px}
.dlrow .tm{margin-left:auto;font:500 12px "IBM Plex Mono",ui-monospace,monospace;white-space:nowrap}
.dlrow.gone{color:var(--dim);text-decoration:line-through;text-decoration-color:var(--line)}
.chip{background:var(--panel);border:1px solid var(--line);border-radius:14px;color:var(--dim);
padding:5px 12px;font:600 12px "IBM Plex Sans",system-ui;cursor:pointer;margin:2px 6px 8px 0}
.chip.on{color:var(--ink);border-color:var(--blue);background:var(--panel2)}
.chiprow{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px}
.chiprow .btn{margin-left:auto}
.ev a{color:var(--blue);text-decoration:none;border-bottom:1px solid var(--line)}
.ev a:hover{border-bottom-color:var(--blue)}
.src{display:block;padding-top:3px}
/* a picture attached to an item: a graph, a screenshot. Capped so a tall
   one cannot take the whole screen, and it opens full size in a tab. */
.evimg{display:block;padding-top:7px;border-bottom:none}
.evimg img{display:block;max-width:100%;max-height:56vh;border:1px solid var(--line);
border-radius:8px;background:#fff}
.evimg:hover img{border-color:var(--blue)}
.when{color:var(--dim);font:11px "IBM Plex Mono",ui-monospace,monospace;white-space:nowrap}
.daysep{font:600 10px "IBM Plex Mono",ui-monospace,monospace;color:var(--dim);text-transform:uppercase;
letter-spacing:.08em;padding:11px 2px 5px}
.btn{background:var(--panel2);border:1px solid var(--blue);border-radius:8px;color:var(--ink);
padding:9px 14px;font:600 13px "IBM Plex Sans",system-ui;cursor:pointer}
.btn:hover{background:var(--blue)}
.btn[disabled]{opacity:.5;cursor:default}
.clk{cursor:pointer}.clk:hover td{background:var(--panel2)}
.chev{color:var(--dim);font:11px "IBM Plex Mono",ui-monospace,monospace}
.det{background:var(--panel2);border-radius:8px;padding:2px 10px 8px;margin:2px 0 8px}
.det table{margin:0}.det td{font-size:13px}
.scorecard{border-color:var(--blue)}
.lvstatus{font:600 12px "IBM Plex Mono",ui-monospace,monospace;color:var(--dim);padding:2px 0 6px}
.livedot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);
margin-right:6px;vertical-align:middle;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}
.fxrow{display:flex;justify-content:space-between;align-items:baseline;padding:9px 2px 2px}
.fxscore{font:600 17px "Barlow Condensed",system-ui;letter-spacing:.04em}
.fxmin{font:600 12px "IBM Plex Mono",ui-monospace,monospace;color:var(--green);white-space:nowrap}
.fxmin.ft{color:var(--dim)}.fxmin.ko{color:var(--amber)}
.fxplayers{display:flex;flex-wrap:wrap;gap:4px;padding:3px 2px 9px;border-bottom:1px solid var(--line)}
.fxwrap>div:last-child .fxplayers{border-bottom:none}
.fxchip{font:500 11px "IBM Plex Mono",ui-monospace,monospace;background:var(--panel2);border-radius:4px;
padding:2px 6px;color:var(--ink);border:1px solid transparent}
.fxchip.mine{border-color:var(--blue)}.fxchip .who{color:var(--dim)}
.provb{color:var(--amber);font:600 10px "IBM Plex Mono",ui-monospace,monospace}
/* suggest-a-roast dialog */
.back{position:fixed;inset:0;background:rgba(8,14,28,.78);z-index:20;display:flex;
align-items:flex-end;justify-content:center}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:14px 14px 0 0;width:100%;
max-width:560px;max-height:92vh;overflow-y:auto;padding:14px 14px 26px}
@media(min-width:620px){.back{align-items:center}.modal{border-radius:14px}}
.modal h2{font:600 23px "Barlow Condensed",system-ui;letter-spacing:.03em;text-transform:uppercase}
.modal label{display:block;color:var(--dim);font:600 11px "IBM Plex Mono",ui-monospace,monospace;
text-transform:uppercase;letter-spacing:.05em;padding:10px 0 4px}
.modal select,.modal textarea,.modal input[type=text]{width:100%;background:var(--panel2);
border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:9px 11px;
font:14px "IBM Plex Sans",system-ui}
.modal textarea{min-height:96px;resize:vertical}
.row{display:flex;gap:8px;align-items:center;padding-top:14px}
.msg{font-size:13px;padding:8px 2px}
.msg.err{color:var(--red)}.msg.ok{color:var(--green)}
.x{margin-left:auto;background:var(--panel2);border:1px solid var(--line);border-radius:8px;
color:var(--dim);font:600 14px "IBM Plex Mono",ui-monospace,monospace;cursor:pointer;padding:5px 11px}

/* player card: any name on the page opens it. The hover half is gated on a
   real pointer: a phone leaves :hover stuck on whatever you last tapped, so
   an ungated rule makes a chip you have just closed look like it is still
   open. :active is fine unqualified - it clears when the finger lifts. */
.pk{cursor:pointer;border-bottom:1px dotted var(--line)}
.pk:active{color:var(--blue);border-bottom-color:var(--blue)}
@media (hover:hover){.pk:hover{color:var(--blue);border-bottom-color:var(--blue)}}
.pkhd{display:flex;gap:10px;align-items:flex-start;position:sticky;top:-14px;z-index:1;
background:var(--panel);padding:4px 0 8px;border-bottom:1px solid var(--line)}
.pkhd h2{font:600 25px "Barlow Condensed",system-ui;letter-spacing:.03em;text-transform:uppercase;line-height:1.1}
.pkg{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:6px;margin:8px 0 4px}
.pkt{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 8px}
.pkt b{display:block;font:600 17px "IBM Plex Mono",ui-monospace,monospace}
.pkt span{display:block;white-space:normal;line-height:1.25;
color:var(--dim);font:600 10px "IBM Plex Mono",ui-monospace,monospace;text-transform:uppercase;
letter-spacing:.05em;white-space:nowrap}
.pkalert{border-radius:8px;padding:8px 10px;margin:8px 0;font-size:13px;
background:rgba(232,161,60,.13);border:1px solid var(--amber)}
.pklog td,.pklog th{font-size:12px;padding:5px 4px}
.pkempty{color:var(--dim);font-size:12px;padding:6px 2px}

/* Live: a ticker, then one card per match in play */
.ticker{overflow:hidden;white-space:nowrap;background:var(--panel);border:1px solid var(--line);
border-radius:10px;padding:8px 0;margin:8px 0}
.tickrow{display:inline-block;padding-left:100%;animation:tick 30s linear infinite;
font:600 13px "IBM Plex Mono",ui-monospace,monospace;color:var(--ink)}
.tickrow b{color:var(--green)}
.tickrow em{font-style:normal;color:var(--dim);padding:0 10px}
.tickrow .me{color:var(--blue)}
@keyframes tick{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.tickrow{animation:none;padding-left:10px}}
.mt{background:var(--panel);border:1px solid var(--line);border-radius:10px;margin:8px 0;overflow:hidden}
.mt.mine{border-color:var(--blue)}
.mthead{display:flex;align-items:center;gap:10px;padding:12px 12px 10px}
.mtside{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.mtside.away{flex-direction:row-reverse;text-align:right}
.mtside img{width:34px;height:34px;object-fit:contain;flex:none}
.mtside .nm{font:600 17px "Barlow Condensed",system-ui;letter-spacing:.03em;text-transform:uppercase;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtmid{text-align:center;flex:none;padding:0 4px}
.mtscore{font:600 26px "Barlow Condensed",system-ui;letter-spacing:.04em;line-height:1}
.mtmin{font:600 11px "IBM Plex Mono",ui-monospace,monospace;color:var(--green);white-space:nowrap}
.mtmin.ft{color:var(--dim)}.mtmin.ht{color:var(--amber)}
.mtcols{display:grid;grid-template-columns:1fr 1fr;gap:0}
.mtcol{padding:2px 10px 10px;min-width:0}
.mtcol+.mtcol{border-left:1px solid var(--line)}
/* Side by side under the crests, which side is which is obvious. Stacked
   on a phone it is not: an empty home column reads as a statement about
   the whole match, and the away players under it look like a
   contradiction of it. So each column names its club once it stacks. */
.mtcolh{display:none}
@media(max-width:560px){
.mtcols{grid-template-columns:1fr}
.mtcol+.mtcol{border-left:none;border-top:1px solid var(--line);padding-top:8px}
.mtcolh{display:flex;align-items:center;gap:6px;padding:6px 0 2px;
font:600 13px "Barlow Condensed",system-ui;letter-spacing:.05em;text-transform:uppercase;
color:var(--dim)}
.mtcolh img{width:16px;height:16px;object-fit:contain}
}
.pl{border-top:1px solid var(--line)}
.pl:first-child{border-top:none}
.pl summary{display:block;padding:7px 2px;cursor:pointer;list-style:none}
.plmain{display:flex;align-items:baseline;gap:6px}
.plmeta{display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding-top:2px}
.plmeta .who{font-size:11px}
.plmeta .mins{font:600 10px "IBM Plex Mono",ui-monospace,monospace;color:var(--dim)}
.tag{font:600 9px "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.04em;text-transform:uppercase;
border:1px solid var(--line);border-radius:3px;padding:1px 4px;color:var(--dim)}
.tag.xi{border-color:var(--blue);color:var(--blue)}
.tag.on{border-color:var(--green);color:var(--green)}
.tag.off{border-color:var(--line);color:var(--dim)}
.pl summary::-webkit-details-marker{display:none}
.plmain::after{content:"\25B8";color:var(--dim);font-size:10px;padding-left:6px}
.pl[open] .plmain::after{content:"\25BE"}
.pl summary:hover{background:var(--panel2)}
.pl .who{color:var(--dim);font-size:11px}
.pl .pts{font:600 14px "IBM Plex Mono",ui-monospace,monospace;margin-left:auto}
.contrib{padding:2px 2px 8px 6px}
.contrib div{display:flex;gap:8px;font-size:12px;color:var(--dim);padding:2px 0}
.contrib b{color:var(--ink);margin-left:auto;font:600 12px "IBM Plex Mono",ui-monospace,monospace}
.contrib .prov{color:var(--amber)}
.mtnone{color:var(--dim);font-size:12px;padding:8px 2px}
/* the gameweek's fixture list, which stays under the live cards all week */
.fxl{margin-top:2px}
.fxi{border-top:1px solid var(--line);padding:2px 0}
.fxi:first-child{border-top:none}
.fxi.on{background:var(--panel2)}
.fxr{display:flex;align-items:center;gap:8px;padding:7px 2px 3px}
.fxs{display:flex;align-items:center;gap:6px;flex:1;min-width:0;justify-content:flex-end}
.fxs.away{justify-content:flex-start}
.fxs img{width:20px;height:20px;object-fit:contain;flex:none}
.fxs .nm{font:600 14px "Barlow Condensed",system-ui;letter-spacing:.03em;text-transform:uppercase;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fxc{font:600 10px "IBM Plex Mono",ui-monospace,monospace;color:var(--dim);white-space:nowrap}
.fxc.me{color:var(--blue)}
.fxm{flex:none;width:96px;text-align:center;line-height:1.2}
.fxm b{display:block;font:600 15px "IBM Plex Mono",ui-monospace,monospace}
@media(max-width:420px){.fxm{width:74px}.fxs .nm{font-size:13px}}
/* who in the league is in each fixture - the point of the list */
.fxi .fxplayers{border-bottom:none;padding:2px 2px 8px;justify-content:center}
.fxnone{font:500 11px "IBM Plex Mono",ui-monospace,monospace;color:var(--dim)}
/* the Live header: your own points this week, then what the feed is doing */
.lvpts{font:600 15px "Barlow Condensed",system-ui;letter-spacing:.03em;text-transform:uppercase;
color:var(--ink)}
.lvrank{color:var(--dim);font-weight:400;padding-left:6px}
.lvsep{display:block;padding-top:2px}
/* a scoring event on a live player row. NOT .ev - the News tab has owned
   that class since the first version of this file, and taking it turned
   every headline green and shouting. */
.evp{font:600 9px "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.03em;text-transform:uppercase;
background:var(--panel2);border-radius:3px;padding:1px 4px;color:var(--green)}
.evp.bad{color:var(--amber)}
.evp.prov{color:var(--amber)}
/* a number worth noticing on the league table: blanks, points given up, the unfit */
td.num.warn{color:var(--amber)}
/* what the columns are, said in the page rather than in a hover nobody on
   a phone can reach */
.legend{display:flex;flex-wrap:wrap;gap:2px 12px;padding:2px 0 8px;color:var(--dim);
font-size:11px;line-height:1.5}
.legend b{color:var(--tm,#8fa3c4);font-weight:600}
/* the card's context lines and its second, underlying-numbers grid */
.pkrank{color:var(--dim);font-size:12px;line-height:1.6;padding:2px 0 8px}
.pkrank b{color:var(--ink);font-weight:600}
.pksec{font:600 11px "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.06em;
text-transform:uppercase;color:var(--dim);padding:10px 0 6px;border-top:1px solid var(--line);margin-top:6px}
/* stepping through the finished gameweeks on My squad */
.gwnav{display:inline-flex;align-items:center;gap:4px;margin-left:10px;vertical-align:middle}
.gwb{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:6px;
padding:2px 8px;font-size:12px;cursor:pointer;line-height:1.4}
.gwb:hover:not(:disabled){border-color:var(--blue)}
.gwb:disabled{opacity:.35;cursor:default}
.gwsel{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:6px;
padding:2px 6px;font:600 12px "IBM Plex Mono",ui-monospace,monospace}
/* the league's headshot, where one exists */
.pkface{width:54px;height:54px;border-radius:9px;object-fit:cover;object-position:top center;
background:var(--panel2);flex:none}
.mtmin sup{font-size:.8em;line-height:0;vertical-align:super}
/* the celebration: a head on a parabola, and confetti */
.party{position:fixed;inset:0;z-index:80;pointer-events:none;overflow:hidden}
.pconf{position:absolute;inset:0;width:100%;height:100%}
.phead{position:absolute;left:-30vw;top:38%;display:flex;flex-direction:column;align-items:center;
gap:2px;animation:pfly 3.2s cubic-bezier(.25,.6,.6,1) forwards}
.phead img{width:132px;height:132px;border-radius:50%;object-fit:cover;object-position:top center;
background:var(--panel2);border:3px solid var(--blue);box-shadow:0 8px 30px rgba(0,0,0,.5);
animation:pspin 1.1s ease-in-out infinite alternate}
.phead b{font:600 26px "Barlow Condensed",system-ui;letter-spacing:.04em;text-transform:uppercase;
color:var(--ink);text-shadow:0 2px 10px rgba(0,0,0,.8)}
.phead span{font:600 20px "IBM Plex Mono",ui-monospace,monospace;color:var(--green);
text-shadow:0 2px 10px rgba(0,0,0,.8)}
@keyframes pfly{0%{left:-30vw;transform:translateY(0)}
50%{transform:translateY(-16vh)}100%{left:110vw;transform:translateY(4vh)}}
@keyframes pspin{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
@media(prefers-reduced-motion:reduce){.party{display:none}}
@media(max-width:520px){.phead img{width:96px;height:96px}.phead b{font-size:21px}}
/* the half-time board: two numbers either side of what they measure, and
   a bar behind them split the way the numbers are */
.msbox{border-top:1px solid var(--line);background:var(--panel2)}
.msbox summary{font:600 10px "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.08em;
text-transform:uppercase;color:var(--dim);padding:7px 12px;cursor:pointer;list-style:none}
.msbox summary::-webkit-details-marker{display:none}
.msbox summary::after{content:"\25B8";padding-left:6px;font-size:9px}
.msbox[open] summary::after{content:"\25BE"}
.msbox summary:hover{color:var(--ink)}
.mstats{padding:2px 12px 12px;max-width:460px;margin:0 auto}
.msrow{display:flex;align-items:center;gap:10px;padding:3px 0}
.msrow>b{flex:none;width:44px;text-align:right;
font:600 15px "IBM Plex Mono",ui-monospace,monospace;color:var(--blue)}
.msrow>b.away{text-align:left;color:var(--amber)}
.msmid{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px}
.mslab{font:600 9px "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.07em;
text-transform:uppercase;color:var(--dim);white-space:nowrap}
.msbar{display:block;width:100%;height:4px;border-radius:2px;background:var(--amber);overflow:hidden}
.msbar i{display:block;height:100%;background:var(--blue)}
/* a name you can click is a name that looks clickable */
.nm.pk{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;
text-underline-offset:3px;text-decoration-color:var(--line)}
@media (hover:hover){.nm.pk:hover{text-decoration-color:var(--blue);color:var(--blue)}}
/* one player's match, opened from a chip in the fixture list */
.fxchip{cursor:pointer}
@media (hover:hover){.fxchip:hover{border-color:var(--blue)}}
.fxchip.open{border-color:var(--blue);background:var(--panel)}
.fxdet{background:var(--panel);border:1px solid var(--blue);border-radius:8px;
margin:2px 2px 8px;padding:8px 10px}
.fxdh{display:flex;align-items:baseline;gap:8px}
.fxdh .nm{font:600 16px "Barlow Condensed",system-ui;letter-spacing:.03em;text-transform:uppercase}
.fxdh .pts{margin-left:auto;font:600 16px "IBM Plex Mono",ui-monospace,monospace}
.fxdet .plmeta{padding:3px 0 2px}
.fxdn{color:var(--dim);font-size:10px;padding-top:4px}