/* BOOKER -- plain newsroom-interactive theme (old FiveThirtyEight style): white page,
 * black headlines, hairline gray rules, no boxes, monospaced numbers, one orange accent.
 * Rating-badge scale kept: <6 red, 6-7 orange, 7-8 green, 8-9 bright green, 9+ blue. */
:root{
  --paper:#ffffff;        /* page                    */
  --panel:#ffffff;        /* surface (same as page)  */
  --panel-2:#f2f2f2;      /* hover / subtle fills    */
  --ink:#222222;
  --ink-2:#444444;
  --muted:#888888;
  --muted-2:#aaaaaa;
  --rule:#e1e1e1;
  --rule-dk:#bbbbbb;
  --accent:#ed713a;       /* 538 orange, used sparingly */
  --pos:#3d8a3d;
  --neg:#d0352b;
  --heat:#222222;
  --live:#d0352b;
  --r-red:#d0352b; --r-org:#e5ae38; --r-grn:#6d904f; --r-brt:#3d9a62; --r-blu:#008fd5;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --serif:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-variant-numeric:tabular-nums;
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1100px; margin:0 auto; padding:0 14px}
a{color:var(--ink); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px}

/* app bar (FotMob top bar) --------------------------------------------- */
.appbar{background:var(--paper); border-bottom:1px solid var(--rule)}
.appbar-inner{display:flex; align-items:baseline; gap:12px; padding:14px 14px 10px; max-width:1100px; margin:0 auto}
.ab-logo{font-weight:700; font-size:22px; letter-spacing:.02em; color:var(--ink); white-space:nowrap; font-family:var(--serif)}
.ab-search{flex:1; max-width:280px; margin-left:auto; align-self:center}
.ab-search input{width:100%; background:var(--paper); border:1px solid var(--rule-dk); border-radius:0;
  color:var(--ink); padding:5px 10px; font-size:13px}
.ab-search input:focus{outline:0; border-color:var(--ink)}

/* section nav: plain text links, active one underlined in black ------------- */
.tabs{position:sticky; top:0; z-index:50; display:flex; justify-content:center; gap:4px;
  background:var(--paper); border-bottom:1px solid var(--rule); padding:0;
  overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto; background:none; border:0; cursor:pointer; color:var(--muted);
  font-family:var(--sans); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:11px 12px 9px; white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab.is-active{color:var(--ink); box-shadow:inset 0 -3px 0 var(--ink)}

main.wrap{padding-top:22px; padding-bottom:40px; min-height:70vh}

/* headings -------------------------------------------------------------- */
.page-head{font-size:28px; font-weight:700; margin:0 0 14px; letter-spacing:-.01em; line-height:1.15}
.section-rule{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink); margin:28px 0 10px; padding-top:8px; border-top:2px solid var(--ink)}
.lede{color:var(--ink-2); margin:0 0 14px; max-width:720px; font-size:15px; line-height:1.5}

/* controls --------------------------------------------------------------- */
.controls{display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap;
  background:none; padding:0; margin-bottom:14px}
.ctrl{display:flex; flex-direction:column; gap:5px; min-width:130px}
.ctrl.grow{flex:1; min-width:180px}
.ctrl.inline{flex-direction:row; align-items:center; gap:8px; min-width:0}
.ctrl label,.controls label{font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.09em}
select,input[type=search],input[type=text]{
  appearance:none; background:var(--paper); border:1px solid var(--rule-dk); border-radius:0;
  padding:6px 9px; font-size:13px; color:var(--ink); width:100%; font-family:var(--sans)}
select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 13px) 55%,calc(100% - 9px) 55%; background-size:4px 4px; background-repeat:no-repeat; padding-right:24px}
select:focus,input:focus{outline:0; border-color:var(--ink)}
input[type=range]{width:100%; accent-color:var(--ink)}
.result-note{color:var(--muted); font-size:11.5px; margin:6px 0 10px}
.ci{color:var(--muted-2); font-size:10px; font-weight:600; margin-left:1px; font-family:var(--mono)}
.lo-conf{opacity:.55; border-bottom:1px dotted var(--muted-2)}

/* FotMob rating badge ----------------------------------------------------- */
.rb{display:inline-flex; align-items:center; justify-content:center; min-width:31px; height:20px;
  padding:0 5px; border-radius:0; color:#fff; font-weight:700; font-size:11.5px;
  font-variant-numeric:tabular-nums; font-family:var(--sans)}
.rb.big{min-width:44px; height:30px; font-size:16px; border-radius:0}
.rb-red{background:var(--r-red)} .rb-org{background:var(--r-org); color:#3c2800}
.rb-grn{background:var(--r-grn)} .rb-brt{background:var(--r-brt); color:#04331c} .rb-blu{background:var(--r-blu)}

/* team monogram ---------------------------------------------------------- */
.tm{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px;
  border-radius:0; font-size:9.5px; font-weight:700; color:#fff; flex:0 0 24px; letter-spacing:-.02em}
.tm.lg{width:44px; height:44px; font-size:15px; flex-basis:44px}
.tm.xl{width:60px; height:60px; font-size:19px; flex-basis:60px}

/* matches screen ---------------------------------------------------------- */
.datebar{display:flex; align-items:center; gap:4px; background:var(--panel); border-radius:0;
  padding:6px 8px; margin-bottom:12px; overflow-x:auto}
.datebar button{background:none; border:0; color:var(--muted); font-weight:700; cursor:pointer;
  padding:7px 11px; border-radius:0; font-size:12.5px; white-space:nowrap}
.datebar button:hover{color:var(--ink)}
.datebar button.on{background:var(--panel-2); color:var(--ink)}
.datebar .db-arrow{font-size:15px; padding:7px 9px}
.league-head{display:flex; align-items:center; gap:9px; background:var(--panel-2);
  border-radius:0; padding:9px 14px; font-weight:700; font-size:13px; margin-top:12px}
.league-head small{color:var(--muted); font-weight:500; margin-left:auto}
.match-list{background:var(--panel); border-radius:0; overflow:hidden; margin-bottom:4px}
.match-row{display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px;
  padding:9px 14px; border-bottom:1px solid var(--rule); cursor:pointer}
.match-row:last-child{border-bottom:0}
.match-row:hover{background:var(--panel-2)}
.mr-teams{display:flex; flex-direction:column; gap:5px; min-width:0}
.mr-t{display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600}
.mr-t.loser{color:var(--muted)}
.mr-t .pts{margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums}
.mr-side{display:flex; flex-direction:column; align-items:flex-end; gap:3px; padding-left:10px;
  border-left:1px solid var(--rule); min-width:64px}
.mr-side .when{color:var(--muted); font-size:11px; font-weight:600}
.mr-side .odds{font-size:11px; color:var(--ink-2); background:var(--panel-2); border-radius:0; padding:2px 7px; font-weight:700}
.mr-side .ft{color:var(--muted); font-size:10.5px; font-weight:700; letter-spacing:.05em}
.mr-side .po{color:var(--accent); font-size:9.5px; font-weight:700; letter-spacing:.06em}

/* match page ---------------------------------------------------------------- */
.mh{background:var(--panel); border-radius:0; padding:18px 16px 14px; margin-bottom:12px; text-align:center}
.mh-row{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; max-width:560px; margin:0 auto}
.mh-team{display:flex; flex-direction:column; align-items:center; gap:7px; font-weight:700; font-size:13px; cursor:pointer}
.mh-score{font-size:34px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.mh-sub{color:var(--muted); font-size:12px; margin-top:8px}
.mh-when{font-size:19px; font-weight:700; color:var(--ink-2)}
.probbar{display:flex; height:9px; border-radius:0; overflow:hidden; margin:7px 0 3px}
.probbar .ph{background:var(--accent)} .probbar .pa{background:var(--r-blu)}
.prob-legend{display:flex; justify-content:space-between; font-size:11px; color:var(--muted); font-weight:600}
.mtabs{display:flex; gap:6px; margin-bottom:10px}
.mtabs button{flex:0 1 auto; background:var(--paper); border:1px solid var(--rule-dk); border-radius:0; color:var(--ink-2);
  font-weight:700; font-size:12px; padding:6px 14px; cursor:pointer}
.mtabs button.on{background:var(--ink); border-color:var(--ink); color:#fff}
.rating-list{background:var(--panel); border-radius:0; overflow:hidden}
.rl-head{padding:9px 14px; font-weight:700; font-size:12.5px; background:var(--panel-2);
  display:flex; align-items:center; gap:8px}
.rl-row{display:flex; align-items:center; gap:10px; padding:7px 14px; border-bottom:1px solid var(--rule);
  font-size:13px; cursor:pointer}
.rl-row:last-child{border-bottom:0}
.rl-row:hover{background:var(--panel-2)}
.rl-row .nm{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rl-row .mn{color:var(--muted); font-size:11px; margin-left:auto; font-variant-numeric:tabular-nums}
.motm{color:var(--r-blu); font-size:11px; font-weight:700; margin-left:6px}

/* standings ------------------------------------------------------------------ */
.conf-toggle{display:flex; gap:0; margin-bottom:12px; flex-wrap:wrap}
.conf-toggle button{flex:0 1 auto; background:var(--paper); border:1px solid var(--rule-dk); border-radius:0; color:var(--ink-2);
  font-weight:700; font-size:12px; padding:6px 14px; cursor:pointer; margin-left:-1px}
.conf-toggle button:first-child{margin-left:0}
.conf-toggle button.on{background:var(--ink); border-color:var(--ink); color:#fff; position:relative}
.stand{background:var(--panel); border-radius:0; overflow:hidden; margin-bottom:14px}
.st-head,.st-row{display:grid; grid-template-columns:26px 1fr 38px 38px 46px 52px 84px; gap:4px;
  align-items:center; padding:7px 12px; font-size:12.5px}
.st-head{background:var(--paper); color:var(--muted); font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--ink)}
.st-row{border-bottom:1px solid var(--rule); cursor:pointer; font-variant-numeric:tabular-nums}
.st-row:last-child{border-bottom:0}
.st-row:hover{background:var(--panel-2)}
.st-row .pos-n{color:var(--muted); font-weight:700; font-size:11.5px}
.st-row .tnm{display:flex; align-items:center; gap:9px; font-weight:600; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.st-row.q-play .pos-n{color:var(--accent)}
.st-row.q-pin .pos-n{color:var(--r-org)}
.form{display:flex; gap:3px; justify-content:flex-end}
.form i{width:15px; height:15px; border-radius:0; font-style:normal; font-size:9px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; color:#fff}
.form .w{background:var(--pos)} .form .l{background:var(--neg)}
@media (max-width:640px){ .st-head,.st-row{grid-template-columns:24px 1fr 34px 34px 44px 76px}
  .st-head span:nth-child(6),.st-row .netcol{display:none} }

/* teams grid + team page ------------------------------------------------------ */
.teams-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:10px}
.team-card{background:var(--panel); border:0; border-radius:0; padding:14px 12px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--ink); font-family:var(--sans)}
.team-card:hover{background:var(--panel-2)}
.team-card b{font-size:13px} .team-card small{color:var(--muted); font-size:11px}
.th-head{display:flex; align-items:center; gap:14px; background:var(--panel); border-radius:0;
  padding:16px; margin-bottom:12px}
.th-head h2{margin:0; font-size:21px; font-weight:700}
.th-head .th-sub{color:var(--muted); font-size:12.5px; margin-top:2px}
.th-stats{margin-left:auto; display:flex; gap:18px; text-align:right}
.th-stats .k{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:700}
.th-stats .v{font-size:19px; font-weight:700; font-variant-numeric:tabular-nums}

/* player FotMob header --------------------------------------------------------- */
.ph-fm{display:flex; align-items:center; gap:14px; background:var(--panel); border-radius:0;
  padding:16px; margin-bottom:12px; flex-wrap:wrap}
.ph-fm h2{margin:0; font-size:22px; font-weight:700}
.ph-fm .sub{color:var(--muted); font-size:12.5px; margin-top:2px}
.ph-fm .ph-badges{margin-left:auto; display:flex; gap:16px; align-items:center; text-align:center}
.ph-badges .k{display:block; font-size:9.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; font-weight:700; margin-bottom:4px}
.pm-strip{display:flex; gap:8px; overflow-x:auto; padding:2px 0 6px}
.pm-cell{background:var(--panel-2); border-radius:0; padding:8px 10px; min-width:74px; text-align:center; cursor:pointer}
.pm-cell:hover{background:var(--rule)}
.pm-cell .opp{font-size:11px; color:var(--muted); font-weight:700; margin-bottom:5px; white-space:nowrap}
.pm-cell .dt{font-size:9.5px; color:var(--muted-2); margin-top:4px}

/* more menu --------------------------------------------------------------------- */
.more-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px}
.more-item{display:flex; flex-direction:column; align-items:flex-start; gap:3px; background:var(--panel); border:0; border-radius:0;
  padding:15px 16px; cursor:pointer; color:var(--ink); font-family:var(--sans); text-align:left}
.more-item:hover{background:var(--panel-2)}
.more-item b{display:block; font-size:13.5px}
.more-item small{color:var(--muted); font-size:11.5px}

/* legacy component library (dark-retokened) ------------------------------------- */
.breakdown-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px}
@media (max-width:880px){ .breakdown-grid{grid-template-columns:1fr} }
.panel-title .panel-hint{font-weight:400; font-size:11px; color:var(--muted); text-transform:none; letter-spacing:0}
.skill-row{display:grid; grid-template-columns:120px 1fr 54px 28px; align-items:center; gap:10px; margin:7px 0}
.skill-name{font-size:12.5px; color:var(--ink-2); text-align:right}
.skill-track{height:11px; background:var(--panel-2); border-radius:0; overflow:hidden}
.skill-fill{display:block; height:100%; transition:width .3s}
.skill-val{font-size:12px; font-weight:600; text-align:right; color:var(--ink); font-variant-numeric:tabular-nums; font-family:var(--mono)}
.skill-pct{font-size:12px; font-weight:700; text-align:left; font-family:var(--mono)}
.vderiv-sec{font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin:12px 0 6px}
.vderiv-row{display:grid; grid-template-columns:110px 1fr 46px; align-items:center; gap:8px; margin:5px 0}
.vderiv-k{font-size:12px; color:var(--ink-2); text-align:right}
.vderiv-track{height:10px; background:var(--panel-2); border-radius:0; overflow:hidden}
.vderiv-fill{display:block; height:100%}
.vderiv-v{font-size:12px; font-weight:700; text-align:left; font-family:var(--mono)}
.vderiv-line{display:flex; justify-content:space-between; align-items:baseline; padding:5px 0; border-bottom:1px solid var(--rule); font-size:13px}
.vderiv-line em{color:var(--muted); font-style:normal; font-size:11.5px}
.vderiv-line b{font-variant-numeric:tabular-nums; font-family:var(--mono)}
.mu-head{display:grid; grid-template-columns:1fr 60px 1fr; align-items:center; margin:10px 0 4px}
.mu-t{text-align:center; font-size:20px; font-weight:700}
.mu-t small{display:block; font-size:11px; font-weight:400; color:var(--muted)}
.mu-t b{display:block; font-size:26px; font-variant-numeric:tabular-nums}
.mu-t em{display:block; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-style:normal}
.mu-vs{text-align:center; color:var(--muted-2)}
.mu-sec{margin:16px 0 4px; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-2); border-bottom:1px solid var(--rule-dk); padding-bottom:3px}
.mu-sec small{float:right; font-weight:400; font-size:10px; color:var(--muted); text-transform:none; letter-spacing:0}
.mu-row{display:grid; grid-template-columns:1fr 220px 1fr; align-items:center; margin:6px 0; font-size:14px}
.mu-a{text-align:right} .mu-b{text-align:left}
.mu-a.mu-win,.mu-b.mu-win{font-weight:700; color:var(--accent)}
.mu-lab{text-align:center; font-size:11px; color:var(--muted)}
.mu-pct{font-weight:700; font-variant-numeric:tabular-nums}
.leaders-grid{margin-top:8px}
.leaders-table .pct-pill{display:inline-block; min-width:26px; padding:1px 7px; border-radius:0;
  color:#fff; font-weight:700; font-size:11px; text-align:center; font-family:var(--mono)}
.table-scroll{overflow-x:auto; background:var(--paper); border-radius:0}
table.grid{border-collapse:collapse; width:100%; font-size:13px}
table.grid thead th{position:sticky; top:0; background:var(--paper); color:var(--muted);
  text-align:right; font-weight:700; font-size:10.5px; letter-spacing:.05em; vertical-align:bottom;
  text-transform:uppercase; padding:8px 10px 6px; white-space:nowrap; cursor:pointer; user-select:none;
  border-bottom:1px solid var(--ink)}
table.grid thead th.col-text{text-align:left}
table.grid thead th:hover{color:var(--ink)}
table.grid thead th .arrow{color:var(--accent); font-size:9px; margin-left:3px}
table.grid tbody td{padding:7px 10px; text-align:right; border-bottom:1px solid var(--rule);
  font-variant-numeric:tabular-nums; white-space:nowrap; font-family:var(--mono); font-size:12.5px}
table.grid tbody td.col-text{text-align:left; font-family:var(--sans)}
table.grid tbody tr:hover{background:#f7f7f7}
table.grid tbody tr.clickable{cursor:pointer}
.rankcell{color:var(--muted); font-weight:600}
.namecell{font-weight:700; color:var(--ink)}
.namecell.plain{color:var(--ink)}
.namecell::after{content:""}
.team-tag{display:inline-block; min-width:34px; text-align:center; font-size:10px; font-weight:700;
  color:var(--ink); background:var(--panel-2); border-radius:0; padding:1px 6px; letter-spacing:.04em; font-family:var(--mono)}
.pos{color:var(--pos); font-weight:600}
.neg{color:var(--neg); font-weight:600}
.bar-cell{position:relative}
.bar-cell .bar{position:absolute; left:0; top:0; bottom:0; background:rgba(237,113,58,.16); z-index:0}
.bar-cell span{position:relative; z-index:1}
.prob-bar{position:relative; display:inline-block; min-width:54px; text-align:right}
.panel{background:none; border-radius:0; padding:10px 0 4px; margin-bottom:22px; min-width:0}
.panel-row{display:grid; grid-template-columns:1fr 1fr; gap:28px}
@media(max-width:900px){.panel-row{grid-template-columns:1fr}}
.panel-title{margin:0 0 12px; font-size:17px; font-weight:700; color:var(--ink); text-transform:none; letter-spacing:-.01em}
.panel-title-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:12px; flex-wrap:wrap}
.panel-title-row .panel-title{margin:0}
.panel-hint{font-weight:400; color:var(--muted); font-size:11px; margin-left:8px; text-transform:none; letter-spacing:0}
.chart-box{position:relative; height:300px}
.chart-box.tall{height:340px}
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px}
@media(max-width:760px){.cards{grid-template-columns:repeat(2,1fr)}}
.card{background:none; border-radius:0; padding:8px 0 4px}
.card .k{font-size:10.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
.card .v{font-size:26px; font-weight:700; margin-top:2px; font-variant-numeric:tabular-nums; color:var(--ink); font-family:var(--mono); letter-spacing:-.02em}
.card .d{font-size:11px; color:var(--muted); margin-top:3px}
.back{background:none; border:0; color:var(--muted); font-weight:700; cursor:pointer; padding:4px 0; font-size:12px; margin-bottom:8px; text-transform:uppercase; letter-spacing:.05em}
.back:hover{color:var(--ink)}
.player-head{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:12px; padding:14px 16px; background:var(--panel); border-radius:0}
.player-head h2{margin:0; font-size:24px; font-weight:700; letter-spacing:-.02em}
.player-head .ph-meta{color:var(--muted); font-size:13px}
.player-head .ph-stat{margin-left:auto; display:flex; gap:22px}
.player-head .ph-stat .s{text-align:right}
.player-head .ph-stat .s .k{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:700}
.player-head .ph-stat .s .v{font-size:20px; font-weight:700; font-variant-numeric:tabular-nums}
.grade-hero{display:flex; align-items:center; gap:22px; flex-basis:100%; margin-top:12px; padding:12px 16px; background:var(--panel-2); border-radius:0}
.gh-main{display:flex; align-items:baseline; gap:8px}
.gh-letter{font-size:38px; font-weight:700; line-height:1}
.gh-num{font-size:21px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink)}
.gh-cap{font-size:9px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
.gh-od{display:flex; gap:16px; font-size:14px; color:var(--muted)}
.gh-od-i b{font-size:17px; font-variant-numeric:tabular-nums}
.gh-proj{display:flex; align-items:center; gap:8px; margin-left:auto; font-size:15px; font-weight:700}
.gh-proj .gh-pj small{font-size:11px; font-weight:600; color:var(--muted); margin-left:2px}
.gh-proj .gh-arr{color:var(--muted); font-weight:400}
.cmp-sel{font-size:12px; margin-left:10px; padding:2px 8px; vertical-align:middle; width:auto; display:inline-block}
.cmp-head{display:grid; grid-template-columns:1fr 130px 1fr; font-weight:700; font-size:12.5px; margin-bottom:8px; text-align:center}
.cmp-head span:first-child{text-align:right} .cmp-head span:last-child{text-align:left}
.cmp-row{display:grid; grid-template-columns:1fr 130px 1fr; align-items:center; margin:6px 0; font-variant-numeric:tabular-nums; font-size:13px; font-family:var(--mono)}
.cmp-a{text-align:right} .cmp-b{text-align:left}
.cmp-a.win,.cmp-b.win{font-weight:700; color:var(--accent)}
.cmp-lab{text-align:center; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.cmp-grade{font-size:18px; font-weight:700; padding-bottom:8px; border-bottom:1px solid var(--rule); margin-bottom:8px}
#trade-impact .ti-team,#trade-fit .ti-team{margin:10px 0; padding:10px 12px; background:var(--panel-2); border-radius:0}
.fit-gap{display:inline-block; margin-left:5px; padding:0 5px; font-size:9px; font-weight:700; letter-spacing:.05em; color:#fff; background:var(--neg); border-radius:0; vertical-align:middle}
.scout-note{font-size:13px; line-height:1.5; margin:0 0 12px; padding:8px 11px; background:var(--panel-2); border-left:3px solid var(--accent); border-radius:0}
.ti-name{font-weight:700; margin-bottom:8px}
.ti-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:6px 24px; font-variant-numeric:tabular-nums; font-size:13.5px; font-family:var(--mono)}
.ti-k{display:inline-block; min-width:140px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.04em}
@media (max-width:760px){ .ti-grid{grid-template-columns:1fr} }
.sb-verdict{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; font-weight:700; font-size:15px; border-radius:0;
  background:var(--accent); color:#fff}
.sb-verdict.even{background:var(--panel-2); color:var(--ink)}
.sb-legal{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:3px 8px; border-radius:0; white-space:nowrap}
.sb-legal.ok{background:var(--pos); color:#fff}
.sb-legal.bad{background:var(--neg); color:#fff}
.sb-grid{display:grid; grid-template-columns:1fr 1fr; background:var(--panel); border-radius:0}
.sb-grid.solo{grid-template-columns:1fr; max-width:420px}
.sb-card{padding:14px 16px}
.sb-grid:not(.solo) .sb-card:first-child{border-right:1px solid var(--rule)}
.sb-team{font-weight:700; font-size:13.5px; margin-bottom:8px}
.sb-hero{text-align:center; padding:8px 0 12px; border-bottom:1px solid var(--rule); margin-bottom:9px}
.sb-hlbl{font-size:9.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:700}
.sb-hval{font-size:27px; font-weight:700; line-height:1.15; margin-top:3px; font-variant-numeric:tabular-nums}
.sb-hval .sb-to{color:var(--muted-2); margin:0 7px; font-size:19px; font-weight:400}
.sb-hdelta{font-size:12.5px; font-weight:700; margin-top:3px}
.sb-row{display:flex; justify-content:space-between; align-items:baseline; font-size:12.5px; padding:2px 0; font-variant-numeric:tabular-nums; font-family:var(--mono)}
.sb-fit{font-size:12px; font-weight:700; margin:7px 0 2px}
.sb-fit.pos{color:var(--pos)} .sb-fit.neg{color:var(--neg)}
.sb-moves{font-size:12px; margin-top:5px; color:var(--ink-2); line-height:1.4}
.sb-moves.out{color:var(--muted)}
@media (max-width:640px){ .sb-grid{grid-template-columns:1fr}
  .sb-grid:not(.solo) .sb-card:first-child{border-right:0; border-bottom:1px solid var(--rule)} }
.bf-list{background:var(--panel-2); border-radius:0}
.bf-row{display:grid; grid-template-columns:22px 1.6fr 1.3fr .7fr; align-items:center; gap:10px;
  padding:8px 12px; font-size:13px; border-bottom:1px solid var(--rule); font-variant-numeric:tabular-nums}
.bf-row:last-child{border-bottom:0}
.bf-rank{color:var(--muted); font-weight:700}
.bf-team{font-weight:600}
.bf-fill{color:var(--ink-2)}
.bf-delta{font-weight:700; text-align:right}
@media (max-width:640px){ .bf-row{grid-template-columns:20px 1fr auto} .bf-fill{display:none} }
.ll-tot{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:8px; font-weight:700}
.ll-row{display:grid; grid-template-columns:1fr 52px 78px 24px; align-items:center; gap:8px; padding:4px 0; border-bottom:1px solid var(--rule); font-size:13px}
.ll-name{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ll-imp{text-align:right; font-variant-numeric:tabular-nums; font-family:var(--mono)}
.ll-min{width:100%; font-size:12px; padding:3px 6px; border:1px solid var(--rule-dk); border-radius:0; background:var(--panel-2); color:var(--ink); text-align:right; font-family:var(--mono)}
.ll-x{border:0; background:none; color:var(--muted-2); cursor:pointer; font-size:12px; padding:0}
.ll-x:hover{color:var(--neg)}
.ll-hero{display:grid; grid-template-columns:repeat(3,1fr); background:var(--panel-2); border-radius:0; margin-bottom:8px}
.ll-hcell{padding:12px 14px; text-align:center}
.ll-hcell + .ll-hcell{border-left:1px solid var(--rule)}
.ll-k{font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700}
.ll-v{font-size:24px; font-weight:700; margin-top:3px; font-variant-numeric:tabular-nums}
.ll-d{font-size:12px; font-weight:700; margin-left:6px}
.ll-fit{margin-top:10px}
@media (max-width:640px){ .ll-row{grid-template-columns:1fr 44px 66px 22px} .ll-v{font-size:20px} }
.tj-verdict-row{display:grid; grid-template-columns:26px 1.4fr 1fr 1.2fr .9fr; gap:10px; align-items:center; padding:7px 0; border-bottom:1px solid var(--rule); font-size:13px}
.tj-rank{font-weight:700; color:var(--muted)}
.tj-name{font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (max-width:640px){ .tj-verdict-row{grid-template-columns:20px 1.2fr 1fr; font-size:12px} .tj-verdict-row span:nth-child(4),.tj-verdict-row span:nth-child(5){display:none} }
.prose{background:var(--panel); border-radius:0; padding:24px 28px; max-width:820px}
.prose h2{margin-top:0; font-size:18px; border-bottom:1px solid var(--rule-dk); padding-bottom:8px}
.prose h3{font-size:13.5px; margin:22px 0 6px; text-transform:uppercase; letter-spacing:.04em}
.prose p,.prose li{color:var(--ink-2); font-size:14px}
.prose code{background:var(--panel-2); border-radius:0; padding:1px 5px; font-family:var(--mono); font-size:12.5px}
.prose .pipe{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:10px 0 18px}
.prose .pipe .step{background:var(--panel-2); border:0; color:var(--ink); padding:6px 11px; font-weight:700; font-size:11px; border-radius:0; text-transform:uppercase; letter-spacing:.04em}
.prose .pipe .arr{color:var(--muted-2)}
.foot{border-top:1px solid var(--rule); padding:16px 0; color:var(--muted-2); font-size:11px; margin-top:30px}
.trade-grid{display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:start; margin-bottom:16px}
.trade-side label{display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:8px 0 4px}
.trade-side select{width:100%}
.trade-side select[multiple]{min-height:180px}
.trade-cap{font-weight:400; text-transform:none; letter-spacing:0; color:var(--muted-2)}
.trade-picks-label{margin-top:12px}
.pick-slots{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:8px}
.pick-row{display:flex; gap:4px; align-items:center}
.pick-row input,.pick-row select{flex:1; min-width:0; padding:5px 6px; font-size:12px; border:1px solid var(--rule-dk); border-radius:0; background:var(--panel-2); color:var(--ink)}
.pick-row .pick-off{color:var(--muted-2); font-size:11px}
.trade-mid{font-size:24px; color:var(--muted-2); padding-top:48px; text-align:center}
.salary-ok{color:var(--pos); font-weight:700}
.salary-bad{color:var(--neg); font-weight:700}
.model-tag{font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:1px 6px; border-radius:0; background:var(--panel-2); color:var(--muted)}
.grade{display:inline-block; min-width:26px; text-align:center; font-weight:700; font-size:11px; padding:1px 6px; border-radius:0; background:var(--panel-2); font-family:var(--mono)}
.grade-Ap,.grade-A{color:var(--pos)}
.grade-Am,.grade-Bp,.grade-B{color:var(--ink)}
.grade-Bm,.grade-Cp,.grade-C{color:var(--muted)}
.grade-Cm,.grade-D,.grade-F{color:var(--neg)}
.btn{display:inline-block; margin-top:8px; padding:8px 18px; background:var(--ink); border:0; border-radius:0; color:#fff; font-weight:700; font-size:12.5px; cursor:pointer}
.btn:hover{background:#000}
.fp-wrap{margin-bottom:6px}
.fp-row{display:grid; grid-template-columns:110px 1fr 34px; align-items:center; gap:10px; margin:6px 0}
.fp-name{font-size:12px; color:var(--ink-2); text-align:right}
.fp-track{height:11px; background:var(--panel-2); border-radius:0; overflow:hidden}
.fp-fill{display:block; height:100%}
.fp-val{font-size:12px; font-weight:700; text-align:left; font-variant-numeric:tabular-nums; font-family:var(--mono)}
.fp-sub{font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin:14px 0 8px}
.comps-wrap{display:flex; flex-wrap:wrap; gap:8px}
.comp-chip{background:var(--panel-2); border:1px solid transparent; border-radius:0; color:var(--ink);
  font-size:13px; font-weight:600; padding:7px 11px; cursor:pointer;
  display:inline-flex; align-items:baseline; gap:6px}
.comp-chip:hover{border-color:var(--accent)}
.comp-chip small{font-size:10px; font-weight:400; color:var(--muted); font-family:var(--mono)}

/* playoff knockout tree (FotMob-style) ----------------------------------- */
.bracket-wrap{overflow-x:auto; padding-bottom:8px}
.bracket{display:flex; gap:14px; min-width:1020px; align-items:stretch}
.br-col{display:flex; flex-direction:column; justify-content:space-around; gap:10px; flex:1; min-width:132px}
.br-col-h{text-align:center; font-size:9.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--muted); margin-bottom:2px}
.br-series{background:var(--panel); border-radius:0; padding:7px 9px; cursor:pointer;
  display:flex; flex-direction:column; gap:5px; border:1px solid transparent}
.br-series:hover{border-color:var(--accent)}
.br-series.final{background:var(--panel-2); border-color:var(--ink)}
.br-t{display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600}
.br-t .tm{width:20px; height:20px; flex-basis:20px; font-size:8px}
.br-t .wn{margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums}
.br-t.won{color:var(--ink)} .br-t.won .wn{color:var(--accent)}
.br-t.lost{color:var(--muted)}
.br-champ{text-align:center; margin-top:6px; font-size:11px; font-weight:700; color:var(--accent)}
.br-season{display:flex; gap:6px; justify-content:center; margin:2px 0 10px}
.br-season button{background:var(--panel); border:0; border-radius:0; color:var(--muted);
  font-weight:700; font-size:12px; padding:6px 14px; cursor:pointer}
.br-season button.on{background:var(--panel-2); color:var(--ink); box-shadow:inset 0 -2px 0 var(--accent)}


/* plain layout: no boxes; sections are separated by a rule on top ---------------- */
.panel,.card{border-top:2px solid var(--ink)}
.match-list,.stand,.rating-list,.sb-grid,.bf-list,.ll-hero{border-top:1px solid var(--ink)}
.mh,.th-head,.ph-fm,.player-head{border-bottom:1px solid var(--rule); background:none; padding-left:0; padding-right:0}
.bf-list{background:none}
.team-card,.more-item{border:1px solid var(--rule)}
.team-card:hover,.more-item:hover{border-color:var(--ink); background:var(--paper)}
.datebar{border-bottom:1px solid var(--rule); background:none}
.datebar button.on{background:none; box-shadow:inset 0 -3px 0 var(--ink)}
.league-head{background:none; border-bottom:1px solid var(--ink); padding:9px 0 6px; font-size:15px}
.match-list .match-row{padding-left:0; padding-right:0}
.prose{border-top:2px solid var(--ink); padding:18px 0}
.grade-hero{background:none; border-top:1px solid var(--rule)}
.page-head{font-family:var(--serif)}
.sub-head{font-family:var(--serif); font-size:17px; margin:26px 0 10px; border-top:2px solid var(--ink); padding-top:8px}
.note{color:var(--ink-2); font-size:12.5px; max-width:860px; margin:0 0 12px}
.muted{color:var(--muted)}
.presets{display:flex; gap:10px; align-items:center}
.link-btn{background:none; border:0; padding:0; color:var(--accent); text-decoration:underline; cursor:pointer; font-size:12px; font-family:var(--sans)}
.link-btn:hover{color:var(--ink)}
.controls label input[type=checkbox]{width:auto; margin-right:5px; vertical-align:middle}

/* fantasy ---------------------------------------------------------------------- */
.fx-nav .link-btn.on{color:var(--ink); font-weight:700; text-decoration:none}
.fx-teamstrip{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px; margin:0 0 12px}
.fx-team{border:1px solid var(--rule); padding:6px 8px; background:var(--panel); display:flex; flex-direction:column; gap:2px}
.fx-team.me{border-color:var(--accent)}
.fx-team.clock{background:var(--panel-2); border-color:var(--ink)}
.fx-board tbody tr{cursor:pointer}
.fx-board tbody tr:hover{background:var(--panel-2)}
tr.me td{background:rgba(31,92,67,.08)}
.fx-nom{background:var(--panel-2); padding:8px}
.fx-names label{display:inline-flex; align-items:center; gap:4px}

/* Explore (search + chart builder) */
#view-explore select,#view-explore input[type=text]{width:auto; max-width:100%}
#view-explore input[type=search]{width:auto}
#view-explore .ex-ax{display:flex; flex-direction:column; gap:5px}
#view-explore .ex-pair{display:flex; gap:4px}
#view-explore .presets{flex-wrap:wrap; gap:6px 14px}
#view-explore .presets .link-btn{white-space:nowrap}
#view-explore code{background:var(--panel-2); padding:0 3px; font-size:11.5px}
#view-explore .muted{color:var(--muted)}

/* site-wide last-updated footer */
.site-foot{max-width:1280px;margin:28px auto 18px;padding:12px 18px 0;border-top:1px solid var(--rule);
  color:var(--muted-2);font-size:12px;text-align:center}
.site-foot b{color:var(--ink-2);font-weight:600}

/* game-rating breakdown (player page) */
.why-rating{margin-top:10px}
.why-rating summary{cursor:pointer;font-size:13px;color:var(--ink-2);padding:6px 0}
.why-rating .grid td,.why-rating .grid th{white-space:nowrap}

/* ===== mobile ===== -----------------------------------------------------------
 * Phone layout (<=760px, tighter <=420px). Desktop (>=900px) is untouched.
 * Goals: no horizontal page overflow, tap targets >=36px, text >=12px,
 * wide tables scroll inside .table-scroll with a sticky name column. */
@media (max-width:760px){
  main.wrap{padding-left:10px; padding-right:10px}

  /* top nav scrolls sideways when it cannot fit */
  .tabs{justify-content:flex-start; -webkit-overflow-scrolling:touch}
  .tab{min-height:42px; padding:0 10px; font-size:11.5px}
  .page-head{font-size:23px}

  /* app bar */
  .appbar-inner{padding:8px 10px; gap:10px}
  .ab-search input{font-size:16px; padding:8px 12px; min-height:38px}   /* 16px = no iOS zoom-on-focus */

  /* generic readable sizes + tap targets */
  .ctrl label,.controls label{font-size:12px; letter-spacing:.06em}
  .result-note,.lede,.panel-title .panel-hint,.foot{font-size:12px}
  select,input[type=search],input[type=text],input[type=number],input:not([type]){min-height:38px; font-size:16px}
  input[type=range]{min-height:36px}
  .back{min-height:36px; padding:8px 0; font-size:12.5px}
  .link-btn{min-height:36px; display:inline-flex; align-items:center; font-size:13px}
  .datebar button{min-height:38px}
  .mtabs button,.conf-toggle button{min-height:40px}
  .team-tag{font-size:12px}
  .rb{font-size:12px}
  .ci{font-size:12px}
  .gh-cap,.th-stats .k,.player-head .ph-stat .s .k,.ph-badges .k,.k,.d{font-size:12px; letter-spacing:.03em}
  .odds,.ft,.mn,.motm,.pos-n,.po,.section-rule,.ll-k,.ll-tot,.fp-sub,.trade-cap,.mu-lab,.mu-sec,.step,.cmp-lab,.pm-cell .dt{font-size:12px}
  .mr-side .odds,.mr-side .ft,.mr-side .po,.rl-row .mn,.st-row .pos-n,.team-card small,.more-item small,.vderiv-sec,
  .card .k,.card .d,.prose .pipe .step,.trade-cap,.controls label.trade-cap{font-size:12px}
  input[type=checkbox],input[type=radio]{width:20px; height:20px; min-height:0}
  .ll-x{min-width:36px; min-height:36px}
  .pm-cell .opp{font-size:12px}
  small{font-size:max(12px,.85em)}

  /* controls stack into a 2-up grid */
  .controls{display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; padding:0; align-items:end}
  .controls > *{min-width:0}
  .ctrl,.ctrl.grow{min-width:0}
  .ctrl.grow,.controls .ctrl:has(input[type=range]){grid-column:1 / -1}
  .controls > .presets,.controls.fx-nav{grid-column:1 / -1}
  .controls.fx-nav{display:flex; flex-wrap:wrap; gap:0 8px; align-items:center}

  /* tables: compact cells; horizontal scroll stays inside .table-scroll */
  .table-scroll{-webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; max-width:100%}
  table.grid{font-size:12.5px}
  table.grid thead th{font-size:12px; padding:8px 7px; letter-spacing:.02em}
  table.grid tbody td{padding:8px 7px}
  /* sticky rank + name columns on the Players leaderboard */
  #lb-table th:nth-child(1),#lb-table td:nth-child(1){position:sticky; left:0; z-index:2;
    width:34px; min-width:34px; max-width:34px; padding-left:6px; padding-right:4px}
  #lb-table th:nth-child(2),#lb-table td:nth-child(2){position:sticky; left:34px; z-index:2;
    max-width:132px; overflow:hidden; text-overflow:ellipsis; box-shadow:1px 0 0 var(--rule-dk)}
  #lb-table td:nth-child(1),#lb-table td:nth-child(2){background:var(--panel)}
  #lb-table tbody tr:hover td:nth-child(1),#lb-table tbody tr:hover td:nth-child(2){background:var(--panel-2)}
  #lb-table thead th:nth-child(1),#lb-table thead th:nth-child(2){z-index:3; background:var(--panel-2)}

  /* panels */
  .panel{padding:10px 0 4px}
  .panel-title-row{gap:8px}

  /* player header */
  .player-head{padding:12px; gap:8px}
  .player-head h2{font-size:21px}
  .player-head .ph-stat{margin-left:0; width:100%; display:grid;
    grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px 12px}
  .player-head .ph-stat .s{text-align:left; min-width:0; overflow-wrap:anywhere}
  .player-head .ph-stat .s .v{font-size:17px; line-height:1.25}
  .player-head .panel{width:100%; margin:8px 0 !important}
  .grade-hero{flex-wrap:wrap; gap:10px 18px; padding:10px 12px}
  .gh-proj{margin-left:0; flex-basis:100%; flex-wrap:wrap; gap:6px 8px}
  .ph-fm .ph-badges{margin-left:0; flex-wrap:wrap}

  /* skill-profile title: season select + compare box wrap onto their own line */
  .panel-title:has(.cmp-sel){display:flex; flex-wrap:wrap; align-items:center; gap:8px}
  .panel-title .cmp-sel{margin-left:0; min-height:36px; font-size:16px}
  .panel-title .cmp-wrap{flex:1 1 100%; display:flex}
  .panel-title .cmp-wrap input{flex:1; width:100%; max-width:none}
  .skill-row{grid-template-columns:minmax(84px,30%) 1fr 48px 26px; gap:8px}
  .skill-name{font-size:12px}
  .breakdown-grid{grid-template-columns:minmax(0,1fr); gap:0}
  .cmp-head,.cmp-row{grid-template-columns:1fr 96px 1fr}

  /* match strip scrolls sideways with snap */
  .pm-strip{scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch}
  .pm-cell{scroll-snap-align:start; flex:0 0 auto}

  /* team header */
  .th-head{flex-wrap:wrap; padding:12px}
  .th-stats{margin-left:0; width:100%; justify-content:space-between; text-align:left}

  /* match header */
  .mh-score{font-size:28px}
  .mh-team{font-size:12.5px; text-align:center}

  /* explore */
  #view-explore select,#view-explore input[type=text],#view-explore input[type=search]{max-width:100%; width:100%}
  #view-explore select[style*="max-width"]{max-width:100% !important}
  #view-explore input[style*="width"]{width:100% !important}
  #view-explore .controls:has(.ex-ax){grid-template-columns:minmax(0,1fr)}
  #view-explore .ex-pair{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,42%); gap:6px}
  #view-explore .presets{display:flex; flex-wrap:wrap; gap:0 14px}
  #view-explore .panel:has(> #ex-canvas){height:min(420px,62vh) !important}
  #view-explore code{font-size:12px; overflow-wrap:anywhere}

  /* footer */
  .site-foot{margin:20px 10px 12px; padding:10px 4px 0; line-height:1.6; overflow-wrap:anywhere}
}

@media (max-width:420px){
  .tab{padding:0 2px; letter-spacing:-.02em}
  .st-head,.st-row{grid-template-columns:20px minmax(0,1fr) 26px 26px 40px 50px; gap:4px; padding:7px 8px}
  .st-head{font-size:11px; letter-spacing:.02em}
  .st-row .tnm{gap:6px}
  .page-head{font-size:18px}
  .player-head .ph-stat{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
  .th-head h2{font-size:18px}
  .th-stats .v{font-size:17px}
  .gh-letter{font-size:32px}
  table.grid thead th{padding:7px 6px}
  table.grid tbody td{padding:8px 6px}
  #lb-table th:nth-child(2),#lb-table td:nth-child(2){max-width:118px}
  .teams-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* acronym tagline next to the logo (hidden on narrow screens) */
.ab-tag{font-size:11px;letter-spacing:.04em;color:var(--muted-2);margin-left:10px;white-space:nowrap}
@media (max-width:760px){.ab-tag{display:none}}

/* live standings (record so far + projected wins vs preseason) */
.st-head.st-live,.st-row.st-live{grid-template-columns:26px 1fr 34px 34px 52px 56px 52px 50px 56px}
@media (max-width:640px){ .st-head.st-live,.st-row.st-live{grid-template-columns:20px minmax(0,1fr) 22px 22px 38px 38px 38px 42px; gap:3px}
  .st-head.st-live span:nth-child(6),.st-head.st-live span:nth-child(8),.st-head.st-live span:nth-child(9){display:block}
  .st-head.st-live span:nth-child(7),.st-row.st-live .netcol{display:none} }

/* draft page */
#view-draft .sortable thead th{cursor:pointer; user-select:none}
#view-draft .sortable thead th:hover{color:var(--ink)}
.dr-summary{margin:6px 0 12px}
.dr-summary .v small{display:block; font-weight:400}
.dr-chart-panel{margin-bottom:10px}
.dr-how summary{cursor:pointer; font-size:13px; color:var(--ink-2); margin:-4px 0 8px}
.dr-summary .ph-stat{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px 16px}
@media (max-width:760px){ .dr-summary .ph-stat{grid-template-columns:1fr 1fr} }

/* ===== lineup balance ===== */
.lb-list,.lb-trade{display:flex; flex-direction:column; gap:8px; margin:6px 0 8px}
.lb-trade{margin-top:12px}
.lb-item{display:grid; grid-template-columns:22px 1fr; gap:8px; align-items:start;
  border-left:3px solid var(--rule-dk); background:var(--panel); padding:7px 10px 7px 8px; min-width:0}
.lb-ok{border-left-color:var(--pos)} .lb-warn{border-left-color:var(--r-org)} .lb-bad{border-left-color:var(--neg)}
.lb-ic{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
  font-size:12px; font-weight:700; color:#fff; background:var(--muted-2)}
.lb-ok .lb-ic{background:var(--pos)} .lb-warn .lb-ic{background:var(--r-org); color:#3c2800} .lb-bad .lb-ic{background:var(--neg)}
.lb-body{min-width:0}
.lb-head{display:flex; flex-wrap:wrap; gap:2px 10px; align-items:baseline; justify-content:space-between}
.lb-name{font-weight:700; font-size:12.5px; color:var(--ink)}
.lb-val{font-size:12px; color:var(--ink-2); font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.lb-why{font-size:11.5px; color:var(--muted); margin-top:2px}
.lb-ev{display:inline-block; margin-top:4px; font-size:10.5px; font-weight:700; letter-spacing:.02em; padding:1px 6px; background:var(--panel-2); color:var(--ink-2)}
.lb-ev-strong{color:var(--neg)} .lb-ev-weak{color:var(--accent)} .lb-ev-null,.lb-ev-ctx{color:var(--muted); font-weight:600}

/* ===== fantasy additions ===== */
.fx-live{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; border:1px solid var(--rule); border-left:3px solid var(--accent);
  background:var(--panel); padding:8px 10px; margin:0 0 12px}
.fx-live small{flex-basis:100%}
.fx-odds{font-size:15px}
.fx-trades td small{display:inline-block; min-width:200px; max-width:340px; white-space:normal}
#fx-root select.fx-slot{max-width:190px}
.fx-espn{display:flex; flex-direction:column; gap:3px; border:1px solid var(--rule); border-left:3px solid var(--ink);
  background:var(--panel-2); padding:8px 10px; margin:0 0 10px; font-size:12.5px; overflow-wrap:anywhere}
.fx-espn code,.fx-imp-box code{font-family:var(--mono); font-size:11.5px}
label.fx-imp{cursor:pointer}
label.btn.fx-imp{margin-top:0; color:#fff; text-transform:none; letter-spacing:0; font-size:12.5px}
.fx-nav label.link-btn.fx-imp{font-size:12px; text-transform:none; letter-spacing:0; font-weight:400}
@media (max-width:640px){
  .fx-imp-box{grid-template-columns:1fr}
  .fx-trades td small{min-width:180px}
  #fx-root select.fx-slot{max-width:150px}
}

/* ===== team suite ===== */
.ts-card{gap:5px; padding:12px 10px; text-align:center; min-width:0}
.ts-card-top{display:flex; align-items:center; justify-content:space-between; width:100%; gap:6px}
.ts-card-rk{font-size:11px; font-weight:700; color:var(--muted); min-width:26px; text-align:left}
.ts-card-rec{font-size:13px; font-weight:700; min-width:26px; text-align:right; font-variant-numeric:tabular-nums}
.ts-card-proj{font-size:12px; color:var(--ink-2)} .ts-card-proj b{font-size:15px}
.ts-card-next{color:var(--ink-2) !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.ts-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:1px; background:var(--rule);
  border:1px solid var(--rule); margin:-12px 0 12px}
.ts-kpis-in{margin:0 0 6px}
.ts-kpi{background:var(--panel); padding:9px 12px; min-width:0}
.ts-kpi .k{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:700}
.ts-kpi .v{font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.3}
.ts-kpi .v small{font-size:12px}
.ts-kpi .s{font-size:11px; color:var(--muted); overflow-wrap:anywhere}
.ts-contrib{font-size:12px; color:var(--ink-2); line-height:1.7}
.ts-rk{display:inline-block; font-size:10.5px; font-weight:700; padding:0 5px; background:var(--panel-2); color:var(--ink-2)}
.ts-rk.pos{color:var(--pos)} .ts-rk.neg{color:var(--neg)}
.ts-tabs button small{font-size:10px; color:var(--neg); margin-left:2px}
.ts-chart{height:280px}
.ts-form{display:inline-flex; margin-left:8px; vertical-align:middle}
.ts-upset{display:inline-block; font-size:10px; font-weight:700; padding:0 5px; margin-left:4px; background:var(--r-org); color:#3c2800}
.ts-who{white-space:nowrap}
.ts-who .rb{margin-left:3px}
.ts-wp{display:inline-block; min-width:40px; padding:1px 5px; text-align:center; font-weight:700}
.ts-inj{display:inline-block; font-size:9.5px; font-weight:700; padding:0 4px; color:#fff; background:var(--neg); vertical-align:middle}
.ts-inj.gtd{background:var(--r-org); color:#3c2800}
.ts-roster td{white-space:nowrap}
table.grid.ts-roster tbody td,table.grid.ts-roster thead th{padding-left:7px; padding-right:7px}
.ts-roster thead th{cursor:pointer; user-select:none; white-space:nowrap}
.ts-hot{text-decoration:underline; text-underline-offset:3px}
.ts-tot td{background:var(--panel-2); font-weight:600}
.ts-more summary{cursor:pointer; font-size:12.5px; color:var(--ink-2); margin:10px 0 8px}
.ts-bar{display:grid; grid-template-columns:minmax(0,150px) 1fr 30px 38px; align-items:center; gap:8px; margin:6px 0}
.ts-bar-l{font-size:12px; color:var(--ink-2); text-align:right; line-height:1.25; min-width:0; overflow-wrap:anywhere}
.ts-bar-l small{display:block; font-size:10px; color:var(--muted)}
.ts-bar .fp-track{position:relative}
.ts-bar-mid{position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--rule-dk)}
.ts-bar-v{font-size:12px; font-weight:700; font-variant-numeric:tabular-nums}
.ts-cap{position:relative; height:34px; background:var(--panel-2); margin:14px 0 22px}
.ts-cap-bar{height:100%; background:var(--accent); opacity:.75}
.ts-cap-line{position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--ink)}
.ts-cap-line em{position:absolute; top:100%; left:50%; transform:translateX(-50%); font-style:normal; font-size:10px; color:var(--muted); white-space:nowrap; margin-top:2px}
.ts-cap-line:nth-child(odd) em{top:auto; bottom:100%; margin:0 0 2px}
#view-team .panel-row > .panel{margin-bottom:14px}
#view-team .rl-row b{font-variant-numeric:tabular-nums; font-size:12.5px}
@media (max-width:640px){
  .ts-tabs{display:grid; grid-template-columns:repeat(3,1fr); gap:4px}
  .ts-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ts-kpi .v{font-size:17px}
  .ts-kpi:last-child:nth-child(odd){grid-column:1 / -1}
  .ts-chart{height:230px}
  .ts-bar{grid-template-columns:minmax(0,104px) 1fr 26px 36px; gap:6px}
  .ts-form i{width:13px; height:13px}
  #view-team .rl-row .mn{white-space:normal; text-align:right}
  #view-team .rl-row .nm{min-width:0}
  .ts-cap-line em{font-size:9.5px}
}

/* ===== 538 details ===== */
.ab-tag{font-size:12px; color:var(--muted); letter-spacing:0}
.heat{display:block; text-align:center; padding:3px 0; font-family:var(--mono); font-size:12px}
.st-row .heat{margin:-4px 0}
.more-grid{display:block; columns:2; column-gap:40px; max-width:620px}
.more-item{display:block; width:100%; border:0 !important; border-bottom:1px solid var(--rule) !important; padding:10px 0; break-inside:avoid}
.more-item b{font-size:15px}
.more-item:hover b{color:var(--accent)}
@media (max-width:640px){ .more-grid{columns:1} }

/* ===== team logos (official NBA SVGs in assets/logos) ===== */
.tm{background:none; color:var(--ink)}
.tm img{width:100%; height:100%; object-fit:contain; display:block}
.tm.tm-txt{background:#777; color:#fff}
.team-tag{display:inline-flex; align-items:center; gap:4px; background:none; padding:0; min-width:0; text-align:left}
.team-tag img{width:16px; height:16px; object-fit:contain; flex:0 0 16px}
.team-tag.team-name{font-family:var(--sans); font-size:13px; letter-spacing:0; font-weight:400}
.team-tag{vertical-align:middle}

/* ===== Explore chart builder (Savant controls, 538 figure) ===== */
#view-explore .ex-top{display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px; margin:4px 0 14px}
#view-explore .ex-top .ex-mode{margin:0}
#view-explore .ex-top label,#view-explore .ex-ax > span:first-child,#view-explore .ex-flab{font-size:10.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
#view-explore .ex-top label{display:flex; flex-direction:column; gap:4px}
#view-explore .ex-axes{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:12px 0; border-top:2px solid var(--ink); border-bottom:1px solid var(--rule)}
#view-explore .ex-ax{display:flex; flex-direction:column; gap:4px; min-width:0}
#view-explore .ex-ax select{width:100%; max-width:none}
#view-explore .ex-pair{display:flex; gap:4px; min-width:0}
#view-explore .ex-pair select:first-child{flex:1; min-width:0}
#view-explore .ex-pair .ex-off{flex:0 0 82px; width:82px}
#view-explore .ex-cpair #ex-cm{flex:0 0 96px; width:96px}
#view-explore .ex-cpair #ex-c{flex:1; min-width:0}
#view-explore .ex-filters{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; padding:9px 0; border-bottom:1px solid var(--rule); font-size:12.5px}
#view-explore .ex-flab{min-width:72px}
.ex-chip{display:inline-flex; align-items:center; gap:6px; background:var(--ink); color:#fff; font-size:12px; font-weight:600; padding:3px 4px 3px 9px}
.ex-chip button{background:none; border:0; color:#fff; cursor:pointer; font-size:14px; line-height:1; padding:0 3px; opacity:.7}
.ex-chip button:hover{opacity:1}
#view-explore .ex-add{display:inline-flex; gap:4px; margin-left:auto}
#view-explore .ex-add select{max-width:200px; padding:4px 22px 4px 6px; font-size:12px}
#view-explore .ex-add input{width:72px; padding:4px 6px; font-size:12px}
#view-explore .ex-addb{margin:0; padding:4px 12px; font-size:12px}
#view-explore .ex-quick{display:inline-flex; flex-wrap:wrap; gap:4px 10px; flex-basis:100%; padding-left:80px}
#view-explore #ex-hl{width:180px; padding:4px 8px; font-size:12px}
#view-explore .ex-togs{display:inline-flex; margin-left:auto}
.ex-tog{background:var(--paper); border:1px solid var(--rule-dk); color:var(--ink-2); font-size:11.5px; font-weight:700; padding:4px 10px; cursor:pointer; margin-left:-1px}
.ex-tog.on{background:var(--ink); border-color:var(--ink); color:#fff; position:relative}
.ex-fig{margin:18px 0 8px}
.ex-fig figcaption{display:grid; grid-template-columns:1fr auto; column-gap:16px; align-items:end}
.ex-title{grid-column:1; font-size:22px; font-weight:700; margin:0; letter-spacing:-.01em; line-height:1.2}
.ex-sub{grid-column:1; color:var(--muted); font-size:13px; margin-top:3px}
.ex-legend{grid-column:2; grid-row:1 / span 2; display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--muted); text-align:right}
.ex-ramp{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono)}
.ex-ramp b{display:inline-block; width:120px; height:9px; background:linear-gradient(90deg,rgb(50,110,180),rgb(205,205,205),rgb(200,40,40))}
.ex-ramp i{font-style:normal}
.ex-canvas{position:relative; height:min(580px,68vh); margin-top:10px}
.ex-src{display:flex; justify-content:space-between; gap:12px; border-top:1px solid var(--rule); margin-top:6px; padding-top:6px; font-size:11.5px; color:var(--muted)}
@media (max-width:760px){
  #view-explore .ex-axes{grid-template-columns:1fr}
  #view-explore .ex-add{margin-left:0; flex-wrap:wrap}
  #view-explore .ex-quick{padding-left:0}
  #view-explore .ex-togs{margin-left:0}
  .ex-fig figcaption{grid-template-columns:1fr}
  .ex-legend{grid-column:1; grid-row:auto; text-align:left}
}

/* table rows that reuse .rl-row for the click handler (box score, expected lines) stay table rows */
tr.rl-row{display:table-row; padding:0; cursor:pointer}
tr.rl-row:hover{background:#f7f7f7}
.xl-wrap{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px}
.xl-wrap .sub-head{display:flex; align-items:center; gap:8px; margin-top:6px}
@media (max-width:900px){ .xl-wrap{grid-template-columns:minmax(0,1fr)} }

/* box score: line score + four factors (expected values muted) */
.gs-line td,.gs-line th{width:52px}
.gs-line td:first-child,.gs-ff td:first-child{width:auto}
.xg{color:var(--muted)}

/* fantasy trade machine */
.fx-tm-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-bottom:14px}
.fx-tm-lab{display:flex; align-items:center; gap:8px; font-weight:700; margin-bottom:6px}
.fx-tm-lab select{width:auto}
.fx-tm-row{cursor:pointer}
.fx-tm-row.on td{background:rgba(237,113,58,.14)}
.fx-tm-cards{margin:6px 0 12px}
.fx-tm-card .v small{font-size:12px; font-weight:400; color:var(--muted)}
.fx-tm-yes{font-size:14px; margin:4px 0 10px}
@media (max-width:760px){ .fx-tm-grid{grid-template-columns:minmax(0,1fr)} }