/* ==========================================================================
   vsin_stats_ui.css
   Shared sheet for the rebuilt stats pages. Generalised from the NFL Player
   Prop Analyzer sheet so the two share one vocabulary: same tokens, same
   boxes (.bx), same badges (.res, .lean), same table rows (tr.g, tr.c).

   Root class .vst wraps the page content. Tokens live on it, every rule is
   scoped under it. Page files add layout only, never colour, type or border.

     vst-head / vst-title / vst-sub / vst-tabs / vst-select   black band
     vst-rail (.tf)                                          pill rails
     vst-tools / vst-search / vst-count / vst-games          tool row
     vst-band                                                black sub-band
     vst-btn / vst-btn.dark                                  small buttons
     table: thead tr.g (group), tr.c (columns), th.l td.l, .blk, .sortable
     .bx  .pos .neg .over .under .push .pre .dark .live      value boxes
     .res .lean                                              result badges
     vst-empty
   ========================================================================== */

/* ---- tokens and panel ---------------------------------------------------- */
.vst{
  --red:#ba3626; --gold:#FFD700; --blue:#003087; --ink:#1a1a2e; --black:#000;
  --muted:#5A6E8C; --dim:#8896a7; --line:#e8ecf1; --wash:#f8faff; --green:#4b8119;
  --good:#31a354; --bad:#dc1414; --over:#e6550d; --under:#3182bd;
  --zebra:#f7f7f7; --head:#514c4d;
  background:#fff; border-radius:10px; padding:0 0 18px; margin:14px 0 24px;
  color:var(--ink); overflow:hidden; font-family:inherit;
}
.vst *{box-sizing:border-box;}
.vst a{text-decoration:none;}
.vst :focus-visible{outline:2px solid var(--red); outline-offset:2px;}
.vst-stripe{height:5px; background:linear-gradient(90deg,var(--red) 50%,var(--black) 50%); border-radius:10px 10px 0 0;}

/* ---- head band ----------------------------------------------------------- */
.vst-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px 12px; background:var(--black); color:#fff; flex-wrap:wrap;}
.vst-head .vst-title{font-size:15px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; margin:0; padding:0; color:#fff; line-height:1.3; font-family:inherit;}
.vst-head .vst-sub{font-size:11px; font-weight:600; color:#bbb; margin-top:2px;}
.vst-sub b{color:var(--red); font-weight:800;}
.vst-head-right{display:flex; align-items:center; gap:10px;}
.vst-note{display:flex; align-items:center; gap:8px; margin-right:8px; font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#bbb;}
.vst-note img{height:22px; width:auto; display:block;}
.vst-select{font:inherit; font-size:12px; font-weight:700; letter-spacing:.04em; color:#fff; background:#1a1a1a; border:1px solid #444; border-radius:6px; padding:6px 10px; cursor:pointer;}
.vst-tabs{display:flex; border:1px solid #444; border-radius:6px; overflow:hidden; background:#1a1a1a;}
.vst-tabs a{padding:7px 14px; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#bbb;}
.vst-tabs a:hover{color:#fff;}
.vst-tabs a.on{color:#fff; background:var(--red);}

/* ---- pill rails ---------------------------------------------------------- */
.vst-rail{display:flex; align-items:center; gap:6px; padding:12px 18px 0; flex-wrap:wrap; min-height:44px;}
.vst-rail .grp{font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin:0 4px 0 10px;}
.vst-rail .grp:first-child{margin-left:0;}
.vst-rail a{padding:6px 12px; font-size:11px; font-weight:800; letter-spacing:.05em; color:var(--muted); background:#fff; border:1px solid var(--line); border-radius:20px;}
.vst-rail a:hover{color:var(--red); border-color:var(--red);}
.vst-rail a.on{color:#fff; background:var(--red); border-color:var(--red);}
.vst-rail.tf a{border-radius:6px; background:var(--wash);}
.vst-rail.tf a:hover{color:var(--black); border-color:var(--black);}
.vst-rail.tf a.on{color:#fff; background:var(--black); border-color:var(--black);}

/* ---- tool row: search, counts, game chips, small buttons ------------------ */
.vst-tools{padding:12px 18px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:12px;}
.vst-search{flex:1; min-width:180px; max-width:320px; padding:8px 12px; font-size:13px; border:1px solid var(--line); border-radius:6px; outline:none; font-family:inherit;}
.vst-search:focus{border-color:var(--red);}
.vst-count{font-size:11px; font-weight:700; color:var(--muted); letter-spacing:.04em; white-space:nowrap;}
.vst-games{display:flex; flex-wrap:wrap; gap:4px; flex:0 0 100%; order:5; margin-top:2px;}
.vst-games a{padding:4px 8px; font-size:10px; font-weight:800; letter-spacing:.04em; color:#555; background:#f4f4f4; border:1px solid #ddd; border-radius:4px;}
.vst-games a:hover{color:var(--red); border-color:var(--red);}
.vst-games a.on{color:#fff; background:var(--black); border-color:var(--black);}
.vst a.vst-btn,.vst button.vst-btn{font:inherit; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#000; background:#f4f4f4; border:1px solid #ccc; border-radius:4px; padding:5px 10px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; white-space:nowrap;}
.vst a.vst-btn:hover,.vst button.vst-btn:hover{color:var(--red); border-color:var(--red);}
.vst a.vst-btn.dark,.vst button.vst-btn.dark{color:#fff; background:var(--black); border-color:var(--black);}
.vst a.vst-btn.dark:hover,.vst button.vst-btn.dark:hover{background:var(--red); border-color:var(--red);}
.vst .vst-btn img{height:14px; width:auto;}
.vst-actions{display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
.vst-actions:empty{display:none;}
.vst-link{margin-left:auto; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--red); white-space:nowrap;}

/* ---- black sub-band (one per game, per section) --------------------------- */
.vst-band{display:flex; align-items:center; gap:8px; padding:6px 12px; background:var(--black); color:#fff; border-radius:6px; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;}
.vst-band a{color:#fff;}
.vst-band a:hover{color:#f3b3aa;}
.vst-band img{width:18px; height:18px; object-fit:contain;}
.vst-band .sep{color:#888; font-weight:700; padding:0 2px;}
.vst-band .n{margin-left:auto; font-size:10px; font-weight:700; color:#bbb; text-transform:none; letter-spacing:0; text-align:right;}
.vst-band .n b{color:#fff;}

/* ---- table --------------------------------------------------------------- */
.vst-wrap{overflow-x:auto;}
.vst table{width:100%; min-width:980px; border-collapse:collapse; table-layout:fixed; font-variant-numeric:tabular-nums;}
.vst td,.vst th{overflow:hidden; text-overflow:ellipsis;}
.vst thead tr.g th{padding:8px 8px 6px; font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#ccc; background:var(--black); text-align:center;}
.vst thead tr.g th.blk{border-left:1px solid #555;}
.vst tr.c th{padding:6px 5px; font-size:10px; line-height:1.15; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--head); border-bottom:2px solid var(--red); text-align:center; white-space:normal; vertical-align:bottom; user-select:none;}
.vst tr.c th.l{text-align:left; padding-left:12px;}
.vst tr.c th.blk{border-left:1px solid rgba(255,255,255,.2); padding-left:10px;}
.vst thead tr.c th.sortable{cursor:pointer; position:relative;}
.vst thead tr.c th.sortable:hover{background:#6a6466;}
/* the arrow sits in the corner so it never wraps the label onto a second line */
.vst thead tr.c th.sort-asc::after,.vst thead tr.c th.sort-desc::after{content:"\25B2"; position:absolute; top:2px; right:3px; font-size:7px; line-height:1; color:#fff; opacity:.9;}
.vst thead tr.c th.sort-desc::after{content:"\25BC";}
.vst tbody td{padding:5px 6px; font-size:11px; line-height:1.25; font-weight:600; text-align:center; vertical-align:middle; border-bottom:1px solid var(--line); white-space:nowrap; color:#000;}
.vst tbody tr:nth-child(even) td{background:var(--zebra);}
.vst tbody td.blk{border-left:1px solid var(--line); padding-left:10px;}
.vst tbody td.l{text-align:left;}
.vst tbody tr.hide{display:none;}
.vst tbody tr:last-child td{border-bottom:0;}
.vst td.l,.vst thead tr.c th.l{position:sticky; left:0; z-index:1; background:#fff;}
.vst thead tr.c th.l{background:var(--head);}
.vst tbody tr:nth-child(even) td.l{background:var(--zebra);}
.vst td.name{font-weight:800; font-size:12px;}
.vst td.name img{width:24px; height:24px; object-fit:contain; float:left; margin:1px 8px 0 0;}
.vst td.name div{overflow:hidden;}
.vst td.name a{color:#000;}
.vst td.name a:hover{color:var(--red);}
.vst td.name small,.vst td.line small,.vst td.stat small{display:block; font-size:9px; font-weight:700; color:#666; margin-top:1px; white-space:nowrap;}
.vst td.stat small a{color:#666;}
.vst td.sub{color:#555; font-weight:600;}
.vst td.tf{text-align:left; font-weight:800; padding-left:12px;}
.vst tbody tr.grp-start td{border-top:2px solid #ccc;}
.vst tbody tr.zero td{color:#aaa;}
.vst .rank{color:var(--blue); font-size:10px; font-weight:800; margin-left:3px;}

/* ---- value boxes --------------------------------------------------------- */
.vst .bx{display:inline-block; min-width:54px; padding:4px 6px; border:1px solid #ccc; border-radius:3px; background:#fff; font-weight:800; color:#000; font-size:13px;}
.vst .bx.dark{border-color:var(--black); background:#f4f4f4;}
.vst .bx.pos{border-color:var(--good); color:var(--green); background:#f6ffee;}
.vst .bx.neg{border-color:var(--bad); color:var(--bad); background:#fff3f2;}
.vst .bx.over{border-color:var(--over); color:var(--over); background:#fff4ee;}
.vst .bx.under{border-color:var(--under); color:var(--under); background:#eef5fb;}
.vst .bx.push{border-color:#888; color:#555; background:#f4f4f4;}
.vst .bx.live{border-color:#d8c93a; background:#fdf9d6;}
.vst .bx.pre{color:#999; border-style:dashed; font-weight:600;}
.vst .bx.pre:empty::before{content:"\2013";}
.vst .bx.lg{font-size:15px; min-width:58px;}
.vst a.bx.lock{color:#fff; background:var(--black); border-color:var(--black); font-size:9px; letter-spacing:.1em; text-decoration:none;}
.vst a.bx.lock::before{content:"\1F512"; font-size:9px; margin-right:4px;}
.vst a.bx.lock:hover{background:var(--red); border-color:var(--red);}
.vst .pos{color:var(--green);}
.vst .neg{color:var(--bad);}

/* ---- badges -------------------------------------------------------------- */
.vst .lean{display:inline-block; font-size:8px; font-weight:800; letter-spacing:.06em; min-width:28px; text-align:center; border-radius:3px; padding:2px 4px; margin-left:6px; color:#555; background:#e2e2e2;}
.vst .lean.O{color:#fff; background:var(--over);}
.vst .lean.U{color:#fff; background:var(--under);}
.vst .lean.win{color:#fff; background:var(--good);}
.vst .lean.loss{color:#fff; background:var(--bad);}
.vst .res{display:inline-block; font-size:7px; font-weight:800; letter-spacing:.06em; min-width:40px; text-align:center; border-radius:3px; padding:2px 4px; color:var(--muted); background:var(--line);}
.vst .res.live{color:#000; background:#f7ee6b;}
.vst .res.final.over{color:#fff; background:var(--over);}
.vst .res.final.under{color:#fff; background:var(--under);}
.vst .res.final.push{color:#fff; background:#888;}
.vst .res.win{color:#fff; background:var(--good);}
.vst .res.loss{color:#fff; background:var(--bad);}
.vst .res.push{color:#fff; background:#888;}
.vst .res.pre{background:transparent; color:#bbb;}

/* status chip in a column header: kickoff, live clock, FINAL */
.vst .status{display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#fff;}
.vst .status.live::before{content:""; width:7px; height:7px; border-radius:50%; background:#f7ee6b; animation:vst-pulse 1.6s ease-in-out infinite;}
.vst .status.final{color:#f3b3aa;}
@keyframes vst-pulse{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.vst .status.live::before{animation:none;}}

/* ---- stat strip: a row of labelled figures (from the analyzer's pp-strip) -- */
.vst-strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:8px; padding:12px 18px 0;}
.vst-stat{background:#f4f4f4; border:1px solid #ddd; border-radius:6px; padding:8px 6px; text-align:center;}
.vst-stat small{display:block; font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#666;}
.vst-stat b{display:block; font-size:18px; font-weight:800; margin-top:2px; font-variant-numeric:tabular-nums; color:#000;}
.vst-stat b span{font-size:11px; color:#666; font-weight:700; margin-left:4px;}
.vst-stat b.pos{color:var(--green);}
.vst-stat b.neg{color:var(--bad);}

/* ---- section: a black band as a heading with an optional right-side link -- */
.vst-section{padding:12px 18px 0;}
.vst-section .vst-band a.more{margin-left:auto; font-size:10px; font-weight:700; color:#bbb; text-transform:none; letter-spacing:0;}
.vst-section .vst-band a.more:hover{color:#fff;}
.vst-section > .vst-wrap{margin-top:8px;}

/* ---- two-column page: main content + side rail --------------------------- */
.vst-cols{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:0 18px; align-items:start;}
.vst-cols > *{min-width:0;}
.vst-main{min-width:0;}

/* ---- team header: logo, name, record line, nav ---------------------------- */
.vst-teamhead{display:flex; align-items:center; gap:14px; padding:14px 18px 12px; background:#fff; color:#000; border-bottom:1px solid var(--line); flex-wrap:wrap;}
.vst-teamhead img{width:56px; height:56px; object-fit:contain;}
.vst-teamhead .vst-title{font-size:20px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; margin:0; padding:0; color:#000; line-height:1.2; font-family:inherit;}
.vst-teamhead .vst-sub{display:flex; align-items:center; gap:8px; margin-top:4px; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.vst-teamhead .vst-sub b{color:#fff; background:var(--black); padding:2px 8px; border-radius:3px; font-size:11px; letter-spacing:.04em;}
.vst-teamhead .vst-sub span + span::before{content:"\00b7"; margin-right:8px; color:#bbb;}
.vst-teamhead .vst-tabs{margin-left:auto;}

/* ---- game card: band + actions + two-row table (stats_game_card.php) ----- */
.vst-game{margin:24px 18px 0;}
.vst-game:first-child{margin-top:12px;}
.vst-game .vst-actions{padding:8px 0 6px;}
.vst-game table{min-width:960px;}
.vst-game th.l{width:240px;}
.vst-game--bare{margin:0;}

/* ---- team blocks: results log, splits, standings (stats_team_blocks.php) -- */
.vst .team-results table,.vst .team-splits table{min-width:640px;}
.vst .team-standings table{min-width:0;}
.vst .team-results .bx,.vst .team-splits .bx{min-width:46px; padding:3px 5px; font-size:12px;}
.vst .team-results tr.c th,.vst .team-splits tr.c th,.vst .team-standings tr.c th{padding:6px 4px; font-size:9px;}
.vst .team-results tbody td,.vst .team-splits tbody td,.vst .team-standings tbody td{padding:5px 4px;}
.vst .team-results td.over{color:var(--over);}
.vst .team-results td.under{color:var(--under);}
.vst .team-results td.name img{width:18px; height:18px; float:none; vertical-align:middle; margin:0 6px 0 0;}
.vst .team-results .vst-site{color:#888; font-weight:700; margin-right:4px;}
.vst .team-results .bx.wk{min-width:0; padding:2px 6px; color:var(--red);}
.vst .team-results .bx.score{width:72px; min-width:72px; padding-left:2px; padding-right:2px; text-align:center; white-space:nowrap;}
.vst .team-results .res{min-width:24px; font-size:9px; padding:3px 0; border:1px solid currentColor; background:#fff;}
.vst .team-results .res.win.win{color:var(--good); background:#fff;}
.vst .team-results .res.loss.loss{color:var(--bad); background:#fff;}
.vst .team-results .res.push.push{color:#777; background:#fff;}
.vst .team-results .res.final.over{color:var(--over); background:#fff;}
.vst .team-results .res.final.under{color:var(--under); background:#fff;}
.vst .team-results .res.final.push{color:#777; background:#fff;}
@media (max-width:1199px){.vst .team-results:not(.is-full) .opt{display:none;} .vst .team-results:not(.is-full) col.opt{visibility:collapse;}}
.vst .team-results.is-compact .opt{display:none;}
.vst .team-results.is-compact col.opt{visibility:collapse;}
.vst .team-standings tr.c th{width:44px;}
.vst .team-standings tr.c th.pct{width:54px;}
.vst .team-standings tr.c th.conf{width:56px;}
.vst .team-standings tr.c th.pfpa{width:52px;}
.vst .team-standings tr.c th.l{width:auto;}
.vst .team-standings td.l img{width:18px; height:18px; float:none; vertical-align:middle; margin:0 6px 0 0;}
.vst tr.is-me td{background:#fffbe6 !important;}

/* ---- matchup blocks: head to head, stat breakdown, ratings (stats_matchup_blocks.php) */
.vst td.tl,.vst th.tl{text-align:left;}
.vst .mu-h2h table{min-width:640px;}
.vst .mu-ratings table{min-width:560px;}
.vst .mu-ratings td.tf small{display:block; font-size:9px; font-weight:700; color:#777; text-transform:none; letter-spacing:0;}
.vst .mu-ratings .bx{white-space:nowrap;}
.vst .mu-ratings .mu-pr{display:inline-flex; gap:4px;}
.vst .mu-ratings .mu-pr .bx{min-width:0; padding:3px 6px;}
.vst .mu-edge{display:inline-block; min-width:80px; padding:4px 8px; border-radius:3px; font-size:10px; font-weight:800; letter-spacing:.06em; color:#333; background:#ececec;}
.vst .mu-edge.strong{color:#fff; background:var(--green);}
.vst .mu-edge.over{color:var(--over); background:#fff4ee;}
.vst .mu-edge.under{color:var(--under); background:#eef5fb;}
.vst .mu-edge.over.strong{color:#fff; background:var(--over);}
.vst .mu-edge.under.strong{color:#fff; background:var(--under);}
.vst .mu-edge.even{color:#999;}
.vst .mu-h2h .bx,.vst .mu-ratings .bx,.vst .mu-stats .bx{min-width:46px; padding:3px 5px; font-size:12px;}
.vst .mu-h2h tr.c th,.vst .mu-ratings tr.c th,.vst .mu-stats tr.c th{padding:6px 4px; font-size:9px;}
.vst .mu-h2h tbody td,.vst .mu-ratings tbody td,.vst .mu-stats tbody td{padding:5px 4px;}
.vst .mu-h2h td.name img,.vst .mu-ratings td.name img,.vst .mu-stats td.name img{width:18px; height:18px; float:none; vertical-align:middle; margin:0 6px 0 0;}
.vst .mu-h2h td small{display:block; font-size:9px; font-weight:700; color:#666;}
.vst .mu-tag{display:inline-block; margin-left:5px; padding:1px 5px; border-radius:3px; background:#e9e9e9; color:#555; font-size:8px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; vertical-align:middle;}
.vst .mu-over{margin-left:6px; color:#777; font-weight:600;}
.vst .mu-strip{padding-top:8px;}
.vst .mu-strip .mu-dot{color:#bbb; font-size:14px; margin:0;}
.vst .mu-h2h-summary .mu-strip{grid-template-columns:repeat(3, minmax(0,1fr)); padding-left:0; padding-right:0;}
.vst .mu-h2h-table{padding-top:6px;}
.vst .mu-frames{padding:10px 0 4px;}
.vst .mu-frames a{display:flex; flex-direction:column; align-items:center; line-height:1.1;}
.vst .mu-frames a small{font-size:8px; font-weight:700; letter-spacing:.04em; opacity:.75; margin-top:2px;}
.vst .mu-two{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap:12px 18px; margin-top:8px;}
.vst .mu-statbox{min-width:0; overflow-x:auto;}
.vst .mu-statbox table{min-width:440px;}
.vst .mu-subhead{font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:0 0 4px 2px;}
.vst .mu-tape{overflow:visible;}
.vst .mu-tape-head{display:flex; justify-content:space-between; padding:2px 4px 6px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;}
.vst .mu-tape-head img{width:18px; height:18px; vertical-align:middle; margin:0 6px;}
.vst .mu-row{display:grid; grid-template-columns:64px minmax(0,1fr) 132px minmax(0,1fr) 64px; align-items:center; gap:8px; padding:4px 4px; border-bottom:1px solid var(--line);}
.vst .mu-row:nth-child(odd){background:var(--zebra);}
.vst .mu-stats .bx.mu-val{min-width:0; width:100%; text-align:center; font-size:13px; padding:4px 4px; font-variant-numeric:tabular-nums;}
.vst .mu-lbl{text-align:center; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#222; line-height:1.15;}
.vst .mu-lbl small{display:table; margin:4px auto 0; min-width:54px; padding:3px 8px; border:1px solid var(--good); border-radius:3px; background:#fff; font-size:12px; font-weight:800; letter-spacing:0; color:var(--green); text-transform:none;}
.vst .mu-bar{height:12px; background:#eceff3; border-radius:2px; overflow:hidden; display:flex;}
.vst .mu-bar.l{justify-content:flex-end;}
.vst .mu-bar i{display:block; height:100%; background:#b9c2cf; border-radius:2px; min-width:2px;}
.vst .mu-bar i.win{background:var(--green);}

/* ---- trends: rows, teaser (stats_trends_blocks.php) ---------------------- */
.vst .tr-table table{min-width:760px;}
.vst .tr-table tr.c th,.vst .tr-table tbody td{padding:6px 5px;}
.vst .tr-table td.tr-word{font-weight:700; font-size:12px; white-space:normal; line-height:1.25;}
.vst .tr-table td.win.is-head{background:#f3f6fb;}
.vst .tr-table th.win{white-space:nowrap;}
.vst .tr-cell{display:flex; flex-direction:column; gap:6px; line-height:1.1; padding:2px 0; width:100%;}
.vst .tr-cell .bx{display:block; width:100%; min-width:0; padding:3px 4px; font-size:12px; text-align:center;}
.vst .tr-table tr.is-w td:first-child{box-shadow:inset 4px 0 0 var(--good);}
.vst .tr-table tr.is-l td:first-child{box-shadow:inset 4px 0 0 var(--bad);}
.vst .tr-table tr.is-p td:first-child{box-shadow:inset 4px 0 0 #999;}
.vst .tr-table td.tr-word .tr-flag{margin-left:6px; vertical-align:middle;}
.vst .tr-table td.tr-head small{display:block; font-size:8px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#888; margin-top:2px;}
.vst .tr-lean.split{display:inline-flex; padding:0; min-width:0; overflow:hidden; background:none;}
.vst .tr-lean.split b,.vst .tr-lean.split i{display:block; padding:3px 7px; font-style:normal; font-weight:800;}
.vst .tr-lean.split b{background:var(--black); color:#fff;}
.vst .tr-lean.split i.over{background:var(--over); color:#fff;}
.vst .tr-lean.split i.under{background:var(--under); color:#fff;}
.vst .tr-table td.tr-play{white-space:nowrap; overflow:visible;}
.vst .tr-lean{display:inline-flex; flex-direction:column; width:96px; border-radius:4px; overflow:hidden; vertical-align:middle; text-align:center; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#fff; line-height:1;}
.vst .tr-lean b,.vst .tr-lean i{display:block; padding:5px 4px; font-style:normal; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.vst .tr-lean b{background:var(--black);}
.vst .tr-lean i{background:#566373;}
.vst .tr-lean.agn i{background:#8a8a8a;}
.vst .tr-lean.over i{background:var(--over);}
.vst .tr-lean.under i{background:var(--under);}
.vst .tr-rec{display:inline-block; font-weight:800; font-size:12px; font-variant-numeric:tabular-nums; line-height:1.1;}
.vst .tr-rec small{display:block; font-size:9px; font-weight:700; color:#777;}
.vst .tr-rec.pos{color:var(--green);}
.vst .tr-rec.neg{color:var(--bad);}
.vst .tr-rec.strong{font-size:13px;}
.vst .tr-score{display:inline-flex; align-items:center; gap:6px; vertical-align:middle;}
.vst .tr-score .bar{display:block; width:60px; height:12px; background:#eceff3; border-radius:2px; overflow:hidden;}
.vst .tr-score i{display:block; height:100%; background:#8c96a8; border-radius:2px;}
.vst .tr-score b{font-size:12px; font-weight:800; color:#333; min-width:22px; text-align:right;}
.vst .tr-flag{display:inline-block; padding:2px 6px; border-radius:3px; font-size:8px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#555; background:#e9e9e9;}
.vst .tr-flag.hot{color:#fff; background:var(--over);}
.vst .tr-flag.cold{color:#fff; background:var(--under);}
.vst .tr-note{margin:10px 18px 0; font-size:11px; color:var(--muted); font-weight:600;}
.vst .tr-cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap:12px; margin-top:10px;}
.vst .tr-card{border:1px solid var(--line); border-top:4px solid #cfd5de; border-radius:6px; background:#fff; padding:10px 12px 12px; display:flex; flex-direction:column; gap:8px; min-width:0;}
.vst .tr-card.is-w{border-top-color:var(--good);}
.vst .tr-card.is-l{border-top-color:var(--bad);}
.vst .tr-card.is-p{border-top-color:#999;}
.vst .tr-card-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.vst .tr-card-top em{font-style:normal; font-size:8px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--muted); padding:2px 6px; border-radius:3px;}
.vst .tr-card-top em.team{color:#555; background:#e9e9e9;}
.vst .tr-card-word{font-size:14px; font-weight:800; line-height:1.25; color:#000;}
.vst .tr-card-nums{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:auto;}
.vst .tr-card-nums > div{display:flex; flex-direction:column; align-items:center; gap:3px;}
.vst .tr-card-nums .bx{display:block; width:100%; min-width:0; text-align:center; font-size:13px; padding:4px 4px;}
.vst .tr-card-nums small{font-size:8px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#888;}
.vst .tr-card-nums .tr-score{width:100%; justify-content:center; height:26px;}
@media (max-width:1199px){
  .vst .tr-table .opt,.vst .tr-table .win{display:none;} .vst .tr-table col.opt,.vst .tr-table col.win{visibility:collapse;}
}

/* ---- league summary tables (stats_summary_page.php) --------------------- */
/* every column is pinned in the colgroup, so the table is exactly as wide as its
   columns (no stretching a 13-column table across a 1900px screen) and the wrap
   scrolls sideways when the screen is narrower than the table */
.vst .sm-teams table{width:100%; min-width:1300px;}
.vst .sm-refs table{width:100%; min-width:1240px;}
/* a white gutter between the stat groups; the Team column takes whatever is left */
.vst .sm-teams th.blk,.vst .sm-teams td.blk,.vst .sm-refs th.blk,.vst .sm-refs td.blk{border-left:8px solid #fff;}
.vst .sm-teams tr.c th,.vst .sm-refs tr.c th{padding:6px 3px; font-size:9px; letter-spacing:0; white-space:nowrap; overflow:hidden;}
.vst .sm-teams tr.g th,.vst .sm-refs tr.g th{white-space:nowrap;}
.vst .sm-teams tbody td,.vst .sm-refs tbody td{padding:4px 3px;}
.vst .sm-teams .bx,.vst .sm-refs .bx{min-width:0; width:100%; display:block; padding:3px 2px; font-size:12px; text-align:center; white-space:nowrap;}
.vst .sm-teams td.name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.vst .sm-teams td.name img{width:18px; height:18px; float:none; vertical-align:middle; margin:0 6px 0 0;}
.vst .sm-teams td.pos,.vst .sm-refs td.pos{color:var(--green); font-weight:800;}
.vst .sm-teams td.neg,.vst .sm-refs td.neg{color:var(--bad); font-weight:800;}
.vst .sm-teams thead th.l,.vst .sm-teams tbody td.l{position:static;}

.vst-empty{padding:36px 0; text-align:center; color:var(--dim); font-size:14px; font-weight:600;}

/* ---- phones: rails scroll sideways, panel goes edge to edge -------------- */
@media (max-width:767px){
  .vst{border-radius:0; margin:0 0 20px;}
  .vst-stripe{border-radius:0;}
  .vst-head{display:block; padding:12px;}
  .vst-title{font-size:14px;}
  .vst-sub{font-size:10px;}
  .vst-head-right{display:flex; gap:8px; margin-top:10px;}
  .vst-note{display:none;}
  .vst-select{flex:1 1 auto; min-width:0; padding:8px;}
  .vst-tabs{flex:2 1 auto;}
  .vst-tabs a{flex:1; text-align:center; padding:8px 0; font-size:11px;}
  .vst-rail,.vst-games,.vst-actions{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; min-height:0;}
  .vst-rail::-webkit-scrollbar,.vst-games::-webkit-scrollbar,.vst-actions::-webkit-scrollbar{display:none;}
  .vst-rail{padding:10px 12px 0;}
  .vst-rail a,.vst-games a,.vst-actions > *{flex:0 0 auto; white-space:nowrap;}
  .vst-rail .grp{flex:0 0 auto;}
  .vst-tools{padding:10px 12px; gap:8px;}
  .vst-search{max-width:none;}
  .vst-band{flex-wrap:wrap;}
  .vst-band .n{flex:0 0 100%; margin-left:0; text-align:left; margin-top:2px;}
  .vst table{min-width:900px;}
  .vst td.name img{display:none;}
  .vst td.name{font-size:11px;}
  .vst tbody td{padding:5px 4px;}
  .vst tr.c th{padding:6px 4px; font-size:9px;}
  .vst .bx{min-width:44px; padding:3px 4px;}
  .vst-game{margin:18px 12px 0;}
  .vst-game th.l{width:170px;}
  .vst-cols{grid-template-columns:1fr;}
  .vst-strip{display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:10px 12px 0;}
  .vst-strip::-webkit-scrollbar{display:none;}
  .vst-stat{flex:0 0 118px;}
  .vst-section{padding:10px 12px 0;}
  .vst-teamhead{padding:12px;}
  .vst-teamhead .vst-tabs{margin-left:0; flex:1 1 100%;}
}

.vst .na{color:#bbb; font-weight:600;}
.vst .vst-note-line{margin:10px 18px 0; font-size:11px; font-weight:700; color:var(--muted);}
.vst .vst-note-line a{color:var(--red); font-weight:800;}
.vst .team-results tbody tr[hidden]{display:none;}
.vst .team-results tbody tr.mo td{padding:5px 12px; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--head); border-bottom:2px solid var(--red); text-align:left;}
.vst .team-log-filters{padding-bottom:4px;}
.vst .team-standings th.div,.vst .team-standings td.div{width:40px; text-align:center;}
.vst .team-standings td.div small{font-size:9px; font-weight:800; letter-spacing:.06em; color:var(--dim);}
.vst td.name small.rest{color:var(--muted); font-weight:700;}
.vst td.name small.rest b{font-weight:800; color:#000;}
.vst td.name small.rest.b2b b{color:var(--bad);}

/* ---- injury report (stats_injury_page.php, stats_injury_blocks.php) ------- */
/* status pills: one fixed box, colour says how bad. Red is reserved for OUT. */
.vst .inj-st{display:inline-block; width:78px; padding:4px 0; border-radius:3px; font-size:10px; font-weight:800; letter-spacing:.05em; text-align:center; color:#fff; background:#888; white-space:nowrap; flex:0 0 auto;}
.vst .inj-st.out{background:var(--bad);}
.vst .inj-st.doubtful{background:#d9731b;}
.vst .inj-st.questionable{background:#e0a21b; color:#1a1a1a;}
.vst .inj-st.probable{background:#7cb342; color:#1a1a1a;}
.vst .inj-st.available{background:var(--green);}
.vst .inj-st.cleared{background:#fff; color:#777; border:1px dashed #bbb;}
.vst .inj-starter{display:inline-block; margin-left:5px; padding:0 4px; font-size:9px; font-weight:800; font-style:normal; color:#fff; background:var(--black); border-radius:2px; vertical-align:1px;}
.vst .inj-prev{margin-left:7px; font-size:10px; font-weight:700; color:#777; text-transform:none; white-space:nowrap;}
.vst .inj-why .inj-prev{margin-left:6px;}
.vst .inj-prev.new{color:var(--blue);}
.vst .inj-listed{margin-left:8px; font-size:10px; font-weight:700; color:var(--muted); white-space:nowrap;}

/* chips carry their status colour as a left bar so the rail reads as a legend */
.vst .inj-chips a{position:relative; padding-left:16px;}
.vst .inj-chips a small{margin-left:4px; font-weight:700; color:var(--dim);}
.vst .inj-chips a.on small{color:#fff;}
.vst .inj-chips a[class*="st-"]::before{content:""; position:absolute; left:6px; top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:#888;}
.vst .inj-chips a.st-out::before{background:var(--bad);}
.vst .inj-chips a.st-doubtful::before{background:#d9731b;}
.vst .inj-chips a.st-questionable::before{background:#e0a21b;}
.vst .inj-chips a.st-probable::before{background:#7cb342;}
.vst .inj-chips a.st-available::before{background:var(--green);}

/* change feed: one card per move, headshot and team badge, the status move on the right */
.vst .inj-changes{padding:12px 18px 0;}
.vst .inj-feed{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:10px; padding:10px; border:1px solid var(--line); border-top:0; border-radius:0 0 6px 6px; background:#f7f7f7;}
.vst .inj-chg{display:flex; flex-direction:column; min-width:0; background:#fff; border:1px solid var(--line); border-radius:6px; overflow:hidden; color:inherit;}
.vst .inj-chg:hover{border-color:#999;}
/* the bar is the player's status now; how it got there is the small text */
.vst .inj-chg-tag{display:flex; justify-content:space-between; align-items:center; padding:4px 10px; font-size:10px; font-weight:800; letter-spacing:.1em; color:#fff; background:#777;}
.vst .inj-chg-tag i{font-style:normal; font-weight:700; font-size:9px; letter-spacing:0; text-transform:none; opacity:.9;}
.vst .inj-chg.st-out .inj-chg-tag{background:var(--bad);}
.vst .inj-chg.st-doubtful .inj-chg-tag{background:#d9731b;}
.vst .inj-chg.st-questionable .inj-chg-tag{background:#e0a21b; color:#1a1a1a;}
.vst .inj-chg.st-probable .inj-chg-tag{background:#7cb342; color:#1a1a1a;}
.vst .inj-chg.st-available .inj-chg-tag{background:var(--green);}
.vst .inj-chg.st-cleared .inj-chg-tag{background:#fff; color:#777; border-bottom:1px dashed #bbb;}
.vst .inj-chg-body{display:flex; align-items:center; gap:10px; padding:8px 10px 4px; min-width:0;}
.vst .inj-chg-why{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; padding:0 10px 9px; font-size:11px; font-weight:700; line-height:1.3; color:var(--muted);}
.vst .inj-chg-why .inj-prev,.vst .inj-chg-why .inj-listed{margin-left:6px;}
.vst .inj-chg-pic{position:relative; flex:0 0 44px; width:44px; height:44px; border-radius:50%; background:#eceff3; overflow:visible;}
.vst .inj-chg-pic .inj-face{width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:top; display:block;}
.vst .inj-chg-pic > img:not(.inj-face){position:absolute; right:-4px; bottom:-4px; width:20px; height:20px; object-fit:contain; background:#fff; border-radius:50%; padding:1px; border:1px solid var(--line);}
.vst .inj-chg-who{min-width:0; flex:1;}
.vst .inj-chg-num{flex:0 0 auto; text-align:center;}
.vst .inj-chg-num .bx{min-width:48px; padding:4px 6px; font-size:13px; display:block;}
.vst .inj-chg-num small{display:block; font-size:8px; font-weight:800; letter-spacing:.1em; color:var(--dim); margin-top:1px;}
.vst .inj-card .vst-band > span:first-child,.vst .inj-cardview .vst-band > span:first-child{display:flex; align-items:center; gap:6px;}
.vst .inj-card .vst-band img,.vst .inj-cardview .vst-band img{width:22px; height:22px; object-fit:contain; background:#fff; border-radius:50%; padding:1px;}
.vst .inj-chg-who b{display:block; font-size:13px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.vst .inj-chg-who small{display:block; font-size:10px; font-weight:700; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
/* head band stat tiles (.vst-hs on any page; .inj-hs is the injury page's older name) */
.vst .vst-title-date{font-weight:700; letter-spacing:.02em; text-transform:none; color:#bbb; margin-left:8px; font-size:13px;}
.vst .vst-hs,.vst .inj-hs{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.vst .vst-hs .hs,.vst .inj-hs .hs{display:inline-flex; align-items:baseline; gap:5px; padding:4px 10px; border-radius:4px; background:#1a1a1a; border:1px solid #3a3a3a; line-height:1;}
.vst .vst-hs .hs b,.vst .inj-hs .hs b{font-size:15px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums;}
.vst .vst-hs .hs small,.vst .inj-hs .hs small{font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#999;}
.vst .hs.out b,.vst .hs.live b{color:#ff6b6b;}
.vst .hs.doubtful b{color:#f0a05a;}
.vst .hs.questionable b{color:#f2c94c;}
.vst .hs.time b{font-size:13px;}
.vst .inj-report-line{margin:10px 18px -2px; font-size:11px; font-weight:700; color:var(--muted);}
.vst .inj-report-line a{color:var(--red); font-weight:800;}
.vst .inj-cardview{padding:12px 18px 0;}
.vst-tabs a small{margin-left:4px; padding:0 5px; font-size:10px; border-radius:8px; background:rgba(255,255,255,.18); color:#fff;}
.vst .inj-cardview-body{border:1px solid var(--line); border-top:0; border-radius:0 0 6px 6px; padding:0 10px 10px; background:#f7f7f7;}
.vst .inj-cardview-body .inj-team-strip{padding:10px 2px 8px; border-bottom:0;}
.vst .inj-cardview-body .inj-feed{border:0; padding:0; background:transparent;}
.vst .inj-cardview-body .vst-empty{padding:4px 2px 10px; text-align:left;}
.vst .inj-chg-who small + small{margin-top:1px;}
.vst .inj-chg[hidden],.vst .inj-row[hidden],.vst .inj-table tr[hidden],.vst .vst-section[hidden]{display:none;}
.vst .inj-chips .vst-games{margin-top:6px;}
.vst .inj-chips .vst-games a small{margin-left:3px; color:#999; font-weight:700;}
.vst .inj-chips .vst-games a.on small{color:#ccc;}
.vst .inj-feed-more{grid-column:1 / -1; padding:2px 4px 0; font-size:10px; font-weight:700; color:var(--dim); text-align:right;}

/* headshots on player rows */
.vst .inj-pic{flex:0 0 32px; width:32px; height:32px; border-radius:50%; background:#eceff3; overflow:hidden;}
.vst .inj-pic:empty{display:none;}
.vst .inj-pic .inj-face{width:32px; height:32px; object-fit:cover; object-position:top; display:block;}
.vst .inj-table td.name .inj-pic{display:inline-block; vertical-align:middle; width:26px; height:26px; margin-right:6px;}
.vst .inj-table td.name .inj-pic .inj-face{width:26px; height:26px;}
.vst .inj-table td.name .inj-pic:empty{display:none;}

/* game card: two sides, each a stack of player rows */
.vst .inj-card{padding:12px 18px 0;}
.vst .inj-card .vst-band .n a{color:#fff;}
.vst .inj-sides{display:grid; grid-template-columns:1fr 1fr; gap:0 12px; border:1px solid var(--line); border-top:0; border-radius:0 0 6px 6px; padding:0 10px 8px;}
.vst .inj-side{min-width:0;}
.vst .inj-side + .inj-side{border-left:1px solid var(--line); padding-left:12px;}
.vst .inj-team{display:flex; align-items:center; gap:8px; padding:10px 0 6px; border-bottom:2px solid var(--black);}
.vst .inj-team img{width:28px; height:28px; object-fit:contain; flex:0 0 auto;}
.vst .inj-team > div > b{display:block; font-size:13px; font-weight:800;}
.vst .inj-team > div > b a{color:#000;}
.vst .inj-sum{display:block; font-size:10px; font-weight:700; color:var(--muted); margin-top:1px;}
.vst .inj-sum b{font-weight:800;}
.vst .inj-sum b.out{color:var(--bad);}
.vst .inj-sum b.doubtful{color:#d9731b;}
.vst .inj-sum b.questionable{color:#b8860b;}
.vst .inj-sum b.probable,.vst .inj-sum b.available{color:var(--green);}
.vst .inj-sum i{color:#bbb; font-style:normal; margin:0 2px;}
.vst .inj-sum .cost{color:#000; margin-left:6px;}
.vst .inj-sum.none{color:var(--dim);}
.vst .inj-row{display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--line);}
.vst .inj-row:last-child{border-bottom:0;}
.vst .inj-row.is-new{box-shadow:inset 3px 0 0 var(--blue); padding-left:8px;}
.vst .inj-row.is-cleared .inj-name,.vst .inj-row.is-cleared .inj-why,.vst tr.is-cleared td.name{color:#999; text-decoration:line-through;}
.vst .inj-row.is-cleared .inj-prev{text-decoration:none;}
.vst .inj-who{flex:1; min-width:0;}
.vst .inj-name{font-size:12px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.vst .inj-name a{color:#000;}
.vst .inj-name a:hover{color:var(--red);}
.vst .inj-name small{font-size:10px; font-weight:700; color:var(--dim); margin-left:3px;}
.vst .inj-why{font-size:11px; font-weight:600; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.vst .inj-nums{flex:0 0 auto; text-align:center;}
.vst .inj-nums .bx{min-width:46px; padding:3px 5px; font-size:12px; display:block;}
.vst .inj-nums small{display:block; font-size:8px; font-weight:800; letter-spacing:.1em; color:var(--dim); margin-top:1px;}
.vst .inj-when{flex:0 0 56px; text-align:right; font-size:10px; font-weight:700; color:var(--dim);}
.vst .inj-side .vst-empty{padding:12px 0;}


/* the flat table */
.vst .inj-table table{min-width:1240px;}
.vst .inj-table tbody td{vertical-align:middle;}
.vst .inj-table td.tf{white-space:normal;}
.vst .inj-reason{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.25;}
.vst .inj-cell{display:flex; align-items:center; gap:8px; min-width:0;}
.vst .inj-cell .inj-pic{flex:0 0 30px; width:30px; height:30px; margin:0;}
.vst .inj-cell .inj-pic .inj-face{width:30px; height:30px;}
.vst .inj-cell-text{min-width:0; line-height:1.2;}
.vst .inj-cell-text > div{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.vst .inj-cell-text img{width:16px; height:16px; margin:0 5px 0 0; vertical-align:-3px;}
.vst .inj-cell-sub{font-size:10px; font-weight:700; color:var(--dim); margin-top:1px;}
.vst .inj-cell-sub small{display:inline; margin:0;}
.vst .inj-cell-sub .inj-prev{margin-left:0;}
.vst .inj-cell-sub small + .inj-prev{margin-left:6px;}
.vst .inj-cell-sub:empty{display:none;}
.vst .inj-table td.name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.vst .inj-table td.name small{display:inline; font-size:10px; color:var(--dim); margin:0 0 0 3px;}
.vst .inj-table td.name img{width:18px; height:18px; float:none; vertical-align:middle; margin:0 6px 0 0;}
.vst .inj-table tbody tr.is-new td:first-child{box-shadow:inset 3px 0 0 var(--blue);}
.vst .inj-table td .bx{min-width:0; width:100%; display:block; padding:3px 2px; font-size:12px;}
.vst .inj-table a.inj-game{color:var(--red); font-weight:800;}
.vst .inj-table thead th.l,.vst .inj-table tbody td.l{position:static;}

@media (max-width: 700px){
  .vst .inj-sides{grid-template-columns:1fr;}
  .vst .inj-side + .inj-side{border-left:0; padding-left:0; border-top:2px solid var(--line); margin-top:8px;}
  .vst .inj-when{display:none;}
  .vst .inj-feed{grid-template-columns:1fr;}
  .vst .inj-st{width:64px; font-size:9px;}
}
