/* ============================================================
   TDC DENSE  ·  spreadsheet/terminal look for the rankings grid
   Dark navy palette + heat-mapped, gridlined, compact rows.
   Drop-in: loaded after the page's inline <style>; pairs with
   tdc-dense.js (logos + per-column heat coloring).
============================================================ */
:root[data-theme="dark"]{
  --bg:#0A0E18; --bg2:#101827; --bg3:#18212F;
  --border:#1b2437; --border2:#2a3550;
  --text:#EAF0FA; --text2:#9AA6C0; --text3:#66738E;
  --accent:#5AA9FF;
}
:root{ --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace; }

/* ---- background: flat navy field, kill the mesh ---- */
html{ background:#0A0E18 !important; }
.tdc-mesh,.tdc-grain,.tdc-blob,.ambient-layer,#particleCanvas{ display:none !important; }
.tdc-bg{
  background:
    radial-gradient(40% 46% at 92% 2%, rgba(90,169,255,.10), transparent 60%),
    radial-gradient(46% 50% at 3% 98%, rgba(91,141,239,.11), transparent 60%),
    linear-gradient(160deg,#0A0E18 0%,#0C1220 60%,#0A0E18 100%) !important;
}

/* ---- nav / hero: match the dark ---- */
.nav-wrap{ background:rgba(11,15,26,.86) !important; border-bottom-color:var(--border) !important; }

/* ============================================================
   RANKINGS GRID
============================================================ */
.table-section{ padding:0 22px 48px !important; }
.table-scroll{ border:1px solid var(--border); border-radius:14px; background:rgba(16,21,34,.5); overflow:hidden; overflow-x:auto; }

/* header row */
.table-header{
  position:sticky; top:0; z-index:5;
  background:#0d1220 !important; border-bottom:1px solid var(--border) !important;
  padding:0 !important; height:36px;
}
.table-header .th{
  font-size:10px !important; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text3) !important; font-weight:700; display:flex; align-items:center; justify-content:center;
}
.table-header .th:nth-child(2){ justify-content:flex-start; padding-left:12px; }
.table-header .th.sorted,.table-header .th[data-sorted]{ color:var(--accent) !important; }

/* data rows — compact + gridlined */
.team-row{
  padding:0 !important; min-height:0 !important;
  border-bottom:1px solid rgba(130,150,200,.07) !important;
  transition:background .12s !important;
}
.team-row::before{ display:none !important; }
.team-row:hover{ background:rgba(91,141,239,.06) !important; transform:none !important; }
.team-row.revealed{ opacity:1 !important; transform:none !important; }

.tr-rank-wrap{ display:flex; align-items:center; justify-content:center; }
.tr-rank{ font-size:13px !important; font-weight:700 !important; color:var(--text3) !important; min-width:0 !important; }
.tr-rank.rank-1,.tr-rank.rank-2,.tr-rank.rank-3{ font-size:13px !important; color:var(--accent) !important; }

/* team cell: logo + name + conf on one line */
.tr-team-cell{ display:flex !important; align-items:center; gap:8px; height:36px; padding-left:12px; overflow:hidden; min-width:0; }
.tr-team-name{ font-size:13.5px !important; font-weight:700 !important; white-space:nowrap; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.tr-team-conf{ margin-left:2px !important; top:0 !important; flex:0 0 auto; }
.tr-team-name{ cursor:pointer; }
.tr-team-name:hover{ color:var(--accent) !important; text-decoration:underline; text-underline-offset:2px; }
.tr-dlogo{ flex:0 0 auto; }
.tr-team-conf .conf-badge{ font-size:9.5px; background:rgba(130,150,200,.12); color:var(--text3); border:none; }
.tr-dlogo{ width:18px; height:18px; object-fit:contain; flex:0 0 auto; }

/* stat cells: mono, tight, gridlined, heat-map bg from JS */
.tr-stat{ height:36px !important; gap:0 !important; border-left:1px solid rgba(130,150,200,.05); }
.tr-stat b{ font-family:var(--mono) !important; font-size:12.5px !important; font-weight:600 !important; letter-spacing:0 !important; }

/* NET cell — bar removed, value only, right-aligned */
.tr-margin{ height:36px; justify-content:flex-end !important; padding-right:10px !important; }
.tr-margin .mbar-track{ display:none !important; }
.mbar-val{ font-family:var(--mono) !important; font-weight:700 !important; font-size:12.5px !important; min-width:0 !important; }

/* skeleton tint for dark */
.skel,.skel-grade{ background:linear-gradient(90deg,#141b2c,#1b2437,#141b2c) !important; }

/* ============================================================
   RIGHT RAIL (model meta · movers · coin flips · conf strength)
============================================================ */
@media(min-width:1200px){
  .table-section{ display:flex !important; gap:14px; align-items:flex-start; }
  .table-scroll{ flex:1 1 auto; min-width:0; transition:flex-basis .28s ease; }
  .tdc-rail{ flex:0 0 268px; position:sticky; top:78px; display:flex; flex-direction:column; gap:12px;
    transition:flex-basis .28s ease, opacity .22s ease, transform .28s ease; }
  .tdc-rail.collapsed{ flex-basis:0 !important; width:0; min-width:0; padding:0; margin:0; border:0;
    gap:0; opacity:0; transform:translateX(24px); overflow:hidden; pointer-events:none; }
  body.rail-collapsed .rail-reopen{ display:inline-flex; }
}
/* Tablet (760–1199px): the rail slides in from the right as an overlay drawer */
@media(min-width:760px) and (max-width:1199px){
  .tdc-rail{ position:fixed; top:0; right:0; height:100dvh; width:300px; max-width:86vw; z-index:210;
    display:flex; flex-direction:column; gap:12px; overflow-y:auto; padding:16px 14px 28px;
    background:var(--bg2); border-left:1px solid var(--border); box-shadow:-10px 0 34px rgba(0,0,0,.45);
    transform:translateX(101%); transition:transform .3s ease; }
  body.rail-drawer-open .tdc-rail{ transform:translateX(0); }
  body .rail-reopen{ display:inline-flex; top:auto; bottom:26px; }
  body.rail-drawer-open .rail-reopen{ display:none; }
  .rail-backdrop{ position:fixed; inset:0; z-index:205; background:rgba(0,0,0,.5); display:none; }
  body.rail-drawer-open .rail-backdrop{ display:block; }
}
/* Phone (<760px): rail stays hidden */
@media(max-width:759px){ .tdc-rail, .rail-reopen, .rail-backdrop{ display:none !important; } }
/* slide-off toggle */
.rl-collapse{ align-self:flex-end; font:600 11px/1 'Sora',sans-serif; letter-spacing:.03em; color:var(--text3);
  background:rgba(16,21,34,.6); border:1px solid var(--border); border-radius:8px; padding:6px 10px; cursor:pointer;
  transition:color .15s, border-color .15s; }
.rl-collapse:hover{ color:var(--accent); border-color:var(--accent); }
.rail-reopen{ position:fixed; right:0; top:96px; z-index:60; display:none; align-items:center; gap:5px;
  font:700 11px/1 'Sora',sans-serif; letter-spacing:.04em; color:var(--accent); background:rgba(16,21,34,.94);
  border:1px solid var(--border); border-right:0; border-radius:10px 0 0 10px; padding:11px 12px; cursor:pointer;
  box-shadow:-4px 0 16px rgba(0,0,0,.32); transition:background .15s, color .15s; }
.rail-reopen:hover{ background:var(--accent); color:var(--bg); }
.rl-card{ background:rgba(16,21,34,.6); border:1px solid var(--border); border-radius:14px; padding:13px 15px; }
.rl-h{ font-family:'Sora',sans-serif; font-weight:700; font-size:13px; display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.rl-h span{ font-size:10px; color:var(--text3); font-weight:600; }
.rl-h .rl-ht{ font-size:13px; font-weight:700; color:var(--text); }
.rl-h .rl-htip{ cursor:help; text-decoration:underline dotted rgba(150,170,210,.5); text-underline-offset:3px; }
.rl-kstrip{ display:grid; grid-template-columns:1fr 1fr; gap:14px 10px; }
.rl-kl{ font-size:10px; color:var(--text3); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.rl-kv{ font-family:'Sora',sans-serif; font-weight:800; font-size:19px; margin-top:2px; }
.rl-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; font-size:12.5px; border-bottom:1px solid rgba(130,150,200,.06); }
.rl-row:last-child{ border-bottom:none; }
.rl-row > span:first-child{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rl-mono{ font-family:var(--mono); font-weight:700; font-size:12px; flex:0 0 auto; }
.rl-mono.acc{ color:var(--accent); }
.rl-badge{ font-size:10.5px; font-weight:800; padding:1px 7px; border-radius:6px; flex:0 0 auto; }
.rl-badge.up{ color:#5ab875; background:rgba(90,184,117,.13); }
.rl-badge.dn{ color:#F87171; background:rgba(248,113,113,.13); }
.rl-empty{ color:var(--text3); font-size:12px; }
.rl-conf{ display:flex; align-items:center; gap:9px; padding:5px 0; }
.rl-cl{ width:42px; font-size:11px; font-weight:700; color:var(--text2); flex:0 0 auto; }
.rl-bar{ flex:1; height:7px; border-radius:5px; background:rgba(130,150,200,.12); overflow:hidden; }
.rl-bar i{ display:block; height:100%; border-radius:5px; background:linear-gradient(90deg,var(--accent),#5B8DEF); }
.rl-conf .rl-mono{ width:34px; text-align:right; }

/* ---- TREND column: repurpose the 16px spacer track into a 74px sparkline cell ----
   Applies across the whole desktop/labeled-table range (641px+, where the table is a
   horizontal-scroll grid). Previously this started at 821px, so 641-820px fell back to
   the base 16px spacer track while the sparkline + "TREND '26" label were still injected
   -- they overflowed into PRTG and W-L. Matching index.html's own 641px desktop-table
   breakpoint keeps the trend column a proper 74px at every width the sparkline shows. */
@media(min-width:641px){
  .table-header,.team-row,.skeleton-row{
    grid-template-columns:48px minmax(210px,1fr) 82px 74px 58px 56px 56px 52px 56px 56px 54px 54px 54px 56px 56px 54px 52px 52px 52px 54px 56px 54px 54px 60px !important;
  }
}
.table-header .th.trendh{ justify-content:center; text-align:center; }
.tr-spacer{ display:flex !important; align-items:center; justify-content:center; }
/* The mobile row predates this skin, so its NET number was still Playfair while the
   desktop one had become mono -- the font visibly changed on resize. Same treatment
   now at every width. */
.mg-val{ font-family:var(--mono) !important; font-weight:700 !important; font-size:16px !important;
         letter-spacing:-.01em !important; font-variant-numeric:tabular-nums; }
.mg-lbl{ font-family:var(--mono) !important; letter-spacing:.06em !important; }
@media(max-width:640px){
  .tr-spacer{ width:54px; }                 /* mobile card layout only; 641px+ uses the 74px grid track */
  .mg-val{ font-size:15px !important; }
}
.tr-trend-svg{ width:60px; height:20px; display:block; opacity:.9; }

/* ---- click-to-expand row dropdown (minimal) ---- */
.team-row{ cursor:pointer; }
.team-row.tr-open{ background:rgba(91,141,239,.09) !important; }
.tr-drop{
  /* the expanded panel is ALWAYS dark navy (below), so pin the dark palette inside it
     regardless of the page theme — otherwise light-mode text (--text #1A1814) is dark-on-dark
     and unreadable. Values mirror tdc-dense.css's :root[data-theme="dark"]. */
  --bg:#0A0E18; --bg2:#101827; --bg3:#18212F; --border:#1b2437; --border2:#2a3550;
  --text:#EAF0FA; --text2:#9AA6C0; --text3:#66738E; --accent:#5AA9FF;
  overflow:hidden; max-height:0; opacity:0;
  background:rgba(13,18,32,.7); border-bottom:1px solid rgba(130,150,200,.09);
  transition:max-height .3s cubic-bezier(.4,0,.2,1), opacity .24s ease;
}
.tr-drop.open{ max-height:230px; opacity:1; }
.tr-drop-inner{ display:flex; gap:22px; align-items:flex-start; padding:14px 20px 16px 44px; }
.td-title{ font-size:10.5px; color:var(--text3); font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
.td-hint{ color:var(--text3); font-weight:500; text-transform:none; letter-spacing:0; }
.td-empty{ font-size:12.5px; color:var(--text3); padding:22px 0; }
/* preseason offseason report (fills the left panel before any games) */
.td-offseason{ padding-top:2px; }
.td-loading{ font-size:12px; color:var(--text3); padding:10px 0; }
.tos-cont{ margin-bottom:12px; }
.tos-cont-bar{ height:5px; border-radius:3px; background:var(--bg3); overflow:hidden; }
.tos-cont-bar>span{ display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,#2DE0A6,#5AA9FF); }
.tos-cont-lbl{ font-size:11px; color:var(--text2); margin-top:5px; }
.tos-cont-lbl b{ color:var(--text); font-variant-numeric:tabular-nums; }
.tos-outlook{ font-size:12px; color:var(--text2); margin-bottom:9px; }
.tos-outlook b{ color:var(--accent); font-weight:800; }
.tos-tag{ font-size:11px; font-weight:600; color:var(--text2); white-space:nowrap; }
.tos-tag.off{ color:#2DE0A6; }
.tos-tag.def{ color:#5AA9FF; }
/* Incoming · Departures · Plays like — three compact cards, each on a subtle raised panel
   so they stand out from the dropdown. The two lists shrink to share width; style card auto. */
.tos-cols{ display:flex; flex-wrap:nowrap; align-items:stretch; gap:8px; }
.tos-col{ flex:1 1 0; min-width:0; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); border-radius:8px; padding:7px 10px; }
.tos-col-style{ flex:0 0 auto; }
.tos-col-style .tos-style{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.tos-h{ font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; }
.tos-h.in{ color:#2DE0A6; }
.tos-h.out{ color:#F87171; }
.tos-h.play{ color:var(--text3); }
.tos-p{ display:flex; align-items:baseline; gap:6px; padding:1.5px 0; line-height:1.2; }
.tos-name{ flex:0 1 auto; min-width:0; font-size:11.5px; color:var(--text); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tos-from{ flex:0 1 auto; min-width:0; font-size:9px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tos-g{ flex:0 0 auto; font-size:11px; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; }
.tos-none{ font-size:11.5px; color:var(--text3); padding:2px 0; }
/* interactive chart */
.td-chart{ flex:1.5; min-width:0; }
.td-plot{ position:relative; }
.td-svg{ width:100%; height:96px; display:block; }
.tdc-tip{
  position:absolute; pointer-events:none; transform:translate(-50%,-118%);
  background:#141b2c; border:1px solid rgba(130,150,200,.24); color:#EAF0FA;
  border-radius:8px; padding:6px 9px; font-size:11.5px; line-height:1.35; white-space:nowrap;
  opacity:0; transition:opacity .1s; z-index:6; box-shadow:0 8px 22px rgba(0,0,0,.5); font-weight:600;
}
.tdc-tip.on{ opacity:1; }
.tdc-tip.below{ transform:translate(-50%,18%) !important; }   /* flip under the point when it sits near the top */
.tdc-tip .tdc-dt{ color:var(--text3); font-weight:600; }
.tdc-res.w{ color:#5ab875; } .tdc-res.l{ color:#F87171; }
/* starting 5 / sixth man */
.td-roster{ flex:0 0 228px; }
.td-players{ display:flex; flex-direction:column; gap:1px; }
.td-loading{ font-size:12px; color:var(--text3); padding:6px 0; }
.td-p{ display:flex; align-items:center; gap:9px; padding:4px 0; font-size:12.5px; border-bottom:1px solid rgba(130,150,200,.06); }
.td-p:last-child{ border-bottom:none; }
.td-slot{ width:16px; height:16px; border-radius:5px; background:rgba(90,169,255,.14); color:#5AA9FF; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.td-slot.six{ background:rgba(139,124,255,.16); color:#b3a6ff; }
.td-pos{ width:24px; color:var(--text3); font-size:10.5px; font-weight:700; flex:0 0 auto; }
.td-name{ flex:1; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.td-g{ font-family:var(--mono); font-weight:700; font-size:12px; color:var(--accent); }
.td-link{
  flex:0 0 auto; align-self:flex-start; margin-top:2px;
  background:linear-gradient(100deg,var(--accent),#5B8DEF); color:#04120d;
  font-weight:700; font-size:12.5px; padding:8px 14px; border-radius:9px; text-decoration:none; white-space:nowrap;
}

/* Phone view: stack the dropdown so nothing overlaps. This MUST come after the
   base .tr-drop.open rule -- it used to sit above it, and since both selectors
   have the same specificity the base max-height:230px won at every width. The
   stacked layout needs roughly 560px, so the roster was clipped to two players. */
@media(max-width:820px){
  .tr-drop.open{ max-height:640px; }
  .tr-drop-inner{ flex-direction:column; gap:14px; padding:12px 14px 16px; }
  .td-chart,.td-roster{ flex:1 1 auto; width:100%; }
  .td-link{ align-self:stretch; text-align:center; }
  .tos-cols{ flex-wrap:wrap; gap:12px 26px; }   /* let the three columns wrap on phones */
  .tos-col{ flex:0 1 auto; }
}

/* ============================================================
   GRID-FIRST: slim the hero + compact the top-players strip
============================================================ */
.page-header{ padding:16px 22px 8px !important; min-height:0 !important; }
.hero-orbs,.page-header::before{ display:none !important; }
.page-header-eyebrow{ font-size:10.5px !important; margin-bottom:0 !important; }
#heroTitle,.page-header h1{ font-size:25px !important; margin:2px 0 4px !important; line-height:1.05 !important; }
.page-header h1 em,#heroTitle em{ color:var(--accent) !important; }
.page-header-meta{ font-size:12px !important; }

.showcase{ padding:4px 22px 2px !important; gap:8px !important; }
.sc-label{ margin-bottom:8px !important; }
.sc-players{ gap:9px !important; }
.sc-player{ padding:9px 8px 8px !important; border-radius:12px !important; background:var(--bg2) !important; border-color:var(--border) !important; }
.sc-ph{ width:40px !important; height:40px !important; margin-bottom:6px !important; }
.sc-ph-init{ font-size:14px !important; }
.sc-pname{ font-size:12px !important; }
.sc-pteam{ font-size:10px !important; margin-top:0 !important; }
.sc-badge{ font-size:10px !important; padding:1px 5px !important; bottom:-4px !important; right:-5px !important; }
.sc-tname{ font-size:15px !important; }