/* ============================================================
   TDC TEAM DENSE — reskins the existing team page into the tight
   dark "spreadsheet" style. Same layout & content, denser chrome.
   Loaded after tdc-dense.css (base dark tokens/bg/nav/fonts).
============================================================ */

/* accent vars this overlay relies on (tdc-dense.css only defines --accent) */
:root{ --mint:#2DE0A6; --blue:#5B8DEF; --violet:#8B7CFF; --amber:#FBBF24; --red:#F87171; }

/* ============================================================
   HYBRID HERO — team-color banner (idea 1) × inline analytics
   command bar (idea 2). Full-bleed wash, identity + inline
   NET/Rank/Seed metrics + grade tiles up top, slim stat ribbon
   underneath, segmented pill tabs below. Season-aware via JS.
============================================================ */
.hero-orbs,.hero-color-line,.hero-orb-tc{ display:none !important; }
.team-hero{
  padding:20px 0 6px !important; overflow:visible !important;
  border-bottom:1px solid var(--border) !important; background:transparent !important;
}
/* full-bleed like the rest of the page (nav/breadcrumb/content all use a 40px
   gutter and no max-width) so the banner card fills wide screens */
.hero-content-wrap{ padding:0 40px !important; max-width:none !important; margin:0 !important; }

/* the banner is now a rounded, inset card (top row + ribbon); tabs sit below it */
.hero-card{
  border:1px solid var(--border); border-radius:18px; overflow:hidden;
  background:
    radial-gradient(130% 220% at 0% 0%, rgba(var(--tc-rgb),.30), transparent 55%),
    linear-gradient(100deg, rgba(var(--tc-rgb),.16), var(--bg2) 70%);
}

/* top row: logo · identity · grade tiles (metrics moved to the ribbon) */
.hero-top{ display:flex !important; align-items:center !important; gap:18px !important; flex-wrap:wrap !important; justify-content:flex-start !important; margin-bottom:0 !important; padding:18px 22px 16px; }
.hero-dlogo{ width:60px; height:60px; object-fit:contain; flex:0 0 auto; filter:drop-shadow(0 3px 8px rgba(0,0,0,.4)); }
.hero-id{ flex:1 1 auto; min-width:0; }   /* push grade tiles to the far right */

/* hero identity */
.hero-conf{ font-size:11px !important; font-weight:700 !important; color:var(--tc-readable) !important; letter-spacing:.04em; margin-bottom:2px !important; }
.hero-conf::before{ display:none !important; }
.hero-name{ font-family:'Sora',sans-serif !important; font-weight:800 !important; font-size:38px !important; line-height:1.0 !important; letter-spacing:-.02em !important; margin:1px 0 4px !important; }
.hero-nickname{ font-size:12px !important; color:var(--text3) !important; margin-bottom:3px !important; }
.hero-meta{ font-size:12px !important; color:var(--text2) !important; gap:10px !important; }
.hero-meta a{ color:var(--mint) !important; }
.hero-rank{ color:var(--tc-readable) !important; font-weight:700; }

/* metrics now live in the full-width ribbon below, not inline by the name */
.hero-metrics{ display:none !important; }

/* full-width stat ribbon — evenly-spread cells; NET + seed carry the headline
   numbers (seed cell highlighted), followed by context. Season-aware via JS. */
.hero-ribbon{ display:flex; flex-wrap:wrap; border-top:1px solid var(--border); background:rgba(9,12,20,.34); margin:0; padding:0; }
.hero-ribbon:empty{ display:none; }
/* min-width stops cells from shrinking under their content; overflow:hidden means a
   long value (e.g. "Round of 32") can never spill into the next box; the ribbon wraps
   to a second row when there are too many cells to fit one. */
.hrb{ flex:1 1 145px; min-width:145px; padding:12px 18px; border-right:1px solid var(--border); overflow:hidden; }
.hrb:last-child{ border-right:none; }
.hrb-v{ font-family:'Sora',sans-serif !important; font-weight:800; font-size:18px; line-height:1; font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:8px; white-space:nowrap; }
.hrb-l{ font-size:10px; color:var(--text3); font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hrb.net .hrb-v{ color:var(--mint); }
.hrb.seed{ background:linear-gradient(180deg,rgba(45,224,166,.10),transparent); }
.hrb.seed .hrb-l{ color:var(--mint); }
.hrb-seedbadge{ width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,var(--mint),var(--blue)); color:#04120d; display:flex; align-items:center; justify-content:center; font-family:'Sora',sans-serif; font-weight:800; font-size:14px; flex:0 0 auto; }
.hrb-seedbadge.bubble{ background:linear-gradient(135deg,var(--amber),#e08a1e); }

/* grade strip → modern grade tiles (colored by grade + accent bar; year-aware via JS) */
.hero-grades{ display:flex !important; gap:9px !important; background:transparent !important; border:none !important; border-radius:0 !important; padding:0 !important; overflow:visible !important; flex:0 0 auto; }
.hero-grade{ width:90px; display:flex !important; flex-direction:column; padding:9px 13px 12px !important; border-radius:11px !important; background:rgba(9,12,20,.38) !important; border:1px solid rgba(130,150,200,.10) !important; position:relative; overflow:hidden; text-align:left !important; }
.hero-grade-val{ font-family:'Sora',sans-serif !important; font-weight:800 !important; font-size:23px !important; line-height:1.05 !important; font-variant-numeric:tabular-nums; }
.hero-grade-label{ font-size:9.5px !important; font-weight:700 !important; letter-spacing:.06em; text-transform:uppercase; color:var(--text3) !important; margin-top:3px !important; }
.hero-grade::after{ content:''; position:absolute; left:0; bottom:0; height:3px; border-radius:0 2px 2px 0; width:var(--hgf,60%); background:var(--hgc,var(--mint)); transition:width .3s; }

/* tabs → modern segmented pills */
.hero-tabs{ display:flex !important; gap:3px !important; background:var(--bg2) !important; border:1px solid var(--border) !important; border-radius:12px !important; padding:4px !important; border-top:none !important; margin-top:14px !important; }
.hero-tab{ border:none !important; border-top:none !important; border-radius:9px !important; padding:8px 14px !important; font-size:12.5px !important; letter-spacing:0 !important; text-transform:none !important; color:var(--text2) !important; margin-top:0 !important; }
.hero-tab:hover{ color:var(--text) !important; background:rgba(130,150,200,.06) !important; }
.hero-tab.active{ background:linear-gradient(100deg,var(--mint),var(--blue)) !important; color:#04120d !important; border-top:none !important; }
#followTeamBtn{ margin-left:auto !important; border:1px solid rgba(45,224,166,.4) !important; color:var(--mint) !important; background:rgba(45,224,166,.08) !important; border-radius:9px !important; }

/* content width + tighten */
.team-body,.content-wrap,main,#depthContent{ }
/* featured player card — shrunk */
.pspot{ padding:12px 16px !important; gap:14px !important; border-radius:14px !important; background:var(--bg2) !important; border:1px solid var(--border) !important; border-left:3px solid var(--mint) !important; box-shadow:0 12px 30px rgba(0,0,0,.38) !important; }
.pspot-photo{ width:64px !important; height:64px !important; }
.pspot-init{ font-family:'Sora',sans-serif !important; font-size:22px !important; }
.pspot-badge{ background:var(--bg) !important; border-color:var(--border2) !important; font-family:var(--mono) !important; font-size:15px !important; bottom:-6px !important; padding:2px 9px !important; }
.pspot-poswrap{ margin-bottom:3px !important; }
.pspot-name{ font-family:'Sora',sans-serif !important; font-style:normal !important; font-size:19px !important; margin-bottom:4px !important; }
.pspot-bio{ font-size:11.5px !important; }
.pspot-skills{ gap:6px !important; } .pspot-skill{ font-size:11px !important; }
.pspot-shield{ width:46px !important; height:54px !important; }
.pspot-shield-n{ font-size:17px !important; padding-bottom:5px !important; }
.pspot-badges{ padding:0 6px !important; gap:5px !important; } .pspot-badges-l{ font-size:8px !important; }
.pspot-stats{ gap:7px 16px !important; }
.pspot-stat-v{ font-family:var(--mono) !important; font-size:15px !important; }
.pspot-stat-l{ font-size:8px !important; }

/* section heads */
.sec-head,.dc-section-head,[class*="section-head"]{ font-family:'Sora',sans-serif !important; }

/* position columns → dense */
.pos-col{ background:var(--bg2) !important; border:1px solid var(--border) !important; border-radius:10px !important; overflow:hidden; }
.pos-col-head{ background:rgba(130,150,200,.06) !important; border-bottom:1px solid var(--border) !important; }
.pos-col-label{ font-size:10px !important; letter-spacing:.08em; color:var(--text3) !important; }
.dc-row,.dc-player-row{ border-bottom:1px solid rgba(130,150,200,.07) !important; }
.dc-row-name{ font-size:12.5px !important; }
.dc-row-grade,.dc-grade{ font-family:'Sora',sans-serif !important; font-weight:800 !important; }
/* depth-column names: wrap to a 2nd line instead of truncating to "Ca…" when columns get narrow */
.dc-info{ min-width:0 !important; }
.dc-name{ white-space:normal !important; overflow:visible !important; text-overflow:clip !important; overflow-wrap:anywhere; font-size:12px !important; line-height:1.16 !important; }
.dc-grade{ min-width:20px !important; }

/* ROSTER TABLE → google-sheets grid */
.hr-wrap{ border:1px solid var(--border); border-radius:10px; overflow:hidden; overflow-x:auto; background:rgba(16,21,34,.4); }
.hr-table{ border-collapse:collapse !important; width:100%; }
.hr-table th{ position:sticky; top:0; z-index:2; background:#0d1220 !important; font-size:10px !important; letter-spacing:.04em; text-transform:uppercase; color:var(--text3) !important; font-weight:700 !important; padding:8px 8px !important; border-bottom:1px solid var(--border) !important; white-space:nowrap; text-align:right; }
.hr-table th:nth-child(1),.hr-table th:nth-child(2){ text-align:left; }
.hr-table td{ padding:0 8px !important; height:32px !important; text-align:right; border-bottom:1px solid rgba(130,150,200,.07) !important; border-right:1px solid rgba(130,150,200,.05) !important; font-family:var(--mono) !important; font-size:12.5px !important; font-variant-numeric:tabular-nums; }
.hr-table td:nth-child(1){ color:var(--text3); font-family:var(--mono); }
.hr-table td:nth-child(2){ text-align:left; font-family:'Space Grotesk',sans-serif !important; font-weight:600; }
.hr-table td:last-child{ font-family:'Sora',sans-serif !important; font-weight:800; color:var(--mint); }
.hr-table tr:hover td{ background:rgba(91,141,239,.06) !important; }
.hr-table .heat{ }   /* JS may add per-cell bg */

/* other tables (schedule / stats / nil) get the same grid treatment */
.sched-table,.sortable-table,.nil-table{ border-collapse:collapse !important; }
.sched-table td,.sortable-table td,.nil-table td{ border-bottom:1px solid rgba(130,150,200,.07) !important; font-family:var(--mono); }
.sched-table th,.sortable-table th,.nil-table th{ background:#0d1220 !important; color:var(--text3) !important; font-size:10px !important; text-transform:uppercase; }

/* sidebar cards → dense */
.side-card{ background:var(--bg2) !important; border:1px solid var(--border) !important; border-radius:12px !important; margin-bottom:12px !important; overflow:hidden; }
.side-card-head{ font-family:'Sora',sans-serif !important; font-size:12px !important; letter-spacing:.04em; color:var(--mint) !important; padding:11px 14px !important; border-bottom:1px solid var(--border); background:rgba(130,150,200,.04); }
.side-card-body{ font-size:12.5px; }
.side-card-body b,.side-card-body .g-val{ font-family:var(--mono); }

/* season pills */
.ryr-btn{ border-radius:8px !important; }
.ryr-btn.active{ background:linear-gradient(100deg,var(--mint),var(--blue)) !important; color:#04120d !important; border:none !important; }

/* ── hybrid hero on phones: logo+name inline, metrics + scrollable grade
      tiles on their own full-width rows, ribbon wraps ── */
@media(max-width:768px){
  .hero-content-wrap{ padding:0 16px !important; }
  .hero-top{ flex-direction:row !important; flex-wrap:wrap !important; align-items:center !important; gap:6px 12px !important; padding:14px 16px 12px !important; margin-bottom:0 !important; }
  .hero-dlogo{ width:44px; height:44px; }
  .hero-id{ flex:1 1 auto; }
  .hero-name{ font-size:25px !important; }
  .hero-grades{ flex:1 1 100%; order:6; margin-left:0 !important; flex-wrap:nowrap !important; overflow-x:auto; padding:0 !important; }
  .hero-grades::-webkit-scrollbar{ display:none; }
  .hero-grade{ flex:0 0 auto !important; width:78px !important; }
  .hero-ribbon{ flex-wrap:wrap; margin:0; }
  .hrb{ flex:1 1 40%; padding:10px 16px; }
  .hrb-v{ font-size:18px; }
}