/* ==========================================================================
   1. DESIGN SYSTEM & TYPOGRAPHY
   ========================================================================== */
/* ============================================================
   BYTHERIM Recruiting — theme tokens.

   These mirror the tokens used by the NCAA RP and Draft RP so all three
   sites read as one product: the same logo blue, the same near-black
   surfaces, the same corner radii and shadows. The page was previously a
   monochrome white-on-pure-black design that stood apart from everything
   else.

   The old variable names are kept as aliases at the bottom of this block
   so existing rules keep working without a sweep through the whole file.
   ============================================================ */
:root {
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;
  --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.28);
  --shadow-lift: 0 10px 28px rgba(0, 0, 0, 0.4);

  --bg-color: #06070a;
  --card-bg: #101319;
  --card-hover: #191d26;
  /* Sampled from recruitingrplogo.png: burnt orange #d05800 on a navy
     field. Lifted slightly so it holds contrast on a near-black surface. */
  --accent: #F0761F;
  --accent-dark: #C04E00;
  --accent-contrast: #140a03;
  /* Heat-map text. Measured against the tinted cells at both the lightest
     and strongest tint: all four clear WCAG's 4.5:1 across the full range. */
  --heat-good-text: #a3e635;
  --heat-bad-text: #fca5a5;
  --heat-neutral-bg: rgba(255, 255, 255, 0.05);
  --brand-navy: #102040;
  --text-main: #ffffff;
  --text-muted: #98a2b3;
  --border: #222833;
  --win: #3ddc84;
  --loss: #e5484d;
  --gold: #d4af37;
  --accent-soft: rgba(240, 118, 31, 0.15);
  --accent-soft-strong: rgba(240, 118, 31, 0.32);

  /* Back-compatible aliases for the original stylesheet. */
  --bg-dark: var(--bg-color);
  --bg-card: var(--card-bg);
  --bg-hover: var(--card-hover);
  --accent-main: var(--accent);
  --accent-hover: var(--accent-dark);
  --border-color: var(--border);
  --star-color: var(--gold);
}

:root[data-theme="light"] {
  --bg-color: #ffffff;
  --card-bg: #f4f6f9;
  --card-hover: #e8ecf2;
  --accent: #C04E00;
  --accent-dark: #8F3A00;
  --accent-contrast: #ffffff;
  --heat-good-text: #14532d;
  --heat-bad-text: #7f1d1d;
  --heat-neutral-bg: rgba(15, 23, 42, 0.04);
  --brand-navy: #102040;
  --text-main: #0b0e13;
  --text-muted: #5a6472;
  --border: #d6dbe3;
  --win: #17914f;
  --loss: #c62828;
  --gold: #9a7611;
  --accent-soft: rgba(192, 78, 0, 0.11);
  --accent-soft-strong: rgba(192, 78, 0, 0.24);
  --shadow-soft: 0 4px 16px rgba(15, 23, 42, 0.10);
  --shadow-lift: 0 10px 28px rgba(15, 23, 42, 0.16);
}

* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
  font-family: 'Inter', system-ui, -apple-system, sans-serif; 
}

body { 
  background-color: var(--bg-dark); 
  color: var(--text-main); 
}

h1, h2, h3, h4, th, .brand-title, .rank-num {
  font-weight: 700;
}

header { 
  background: var(--bg-card); 
  border-bottom: 1px solid var(--border-color); 
  padding: 1rem 2rem; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
}

.brand { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  cursor: pointer; 
  user-select: none;
}

.brand-logo-img { 
  height: 40px; 
  width: auto; 
  object-fit: contain; 
  border-radius: 6px;
}

.brand-title { 
  font-size: 1.3rem; 
  letter-spacing: 0.5px; 
  color: var(--text-main);
}

nav { display: flex; gap: 10px; flex-wrap: wrap; }
.nav-btn { 
  background: transparent; 
  border: none; 
  color: var(--text-muted); 
  padding: 10px 18px; 
  font-weight: 500; 
  font-size: 0.85rem; 
  cursor: pointer; 
  border-radius: 8px; 
  transition: all 0.2s ease; 
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.nav-btn:hover { color: var(--text-main); background: var(--bg-hover); }
.nav-btn.active { color: var(--bg-dark); background: var(--accent-main); font-weight: 700; }

.container { max-width: 1400px; margin: 2rem auto; padding: 0 1rem; }
.tab-content { display: none; }
.tab-content.active { display: block; }

.controls-bar { 
  display: flex; 
  gap: 10px; 
  margin-bottom: 1.5rem; 
  flex-wrap: wrap; 
  justify-content: space-between; 
  align-items: center;
}

.filter-group { display: flex; gap: 10px; flex-wrap: wrap; }

.search-input, .select-input { 
  background: var(--bg-card); 
  border: 1px solid var(--border-color); 
  color: var(--text-main); 
  padding: 10px 14px; 
  border-radius: 8px; 
  font-size: 0.8rem; 
  outline: none; 
  font-weight: 400;
}

.search-input { width: 260px; }
.search-input:focus, .select-input:focus { border-color: var(--accent-main); }

.stats-controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  background: var(--bg-card);
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.sub-nav-group {
  display: flex;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.sub-nav-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 8px 16px;
  font-weight: 500;
  font-size: 0.75rem;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sub-nav-btn:hover { color: var(--text-main); background: rgba(255,255,255,0.05); }
.sub-nav-btn.active { color: var(--bg-dark); background: var(--accent-main); font-weight: 700; }

.pos-filter-wrapper { display: flex; align-items: center; gap: 8px; }
.pos-filter-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.pos-pill-group { display: flex; gap: 4px; background: rgba(255, 255, 255, 0.05); padding: 4px; border-radius: 8px; border: 1px solid var(--border-color); }
.pos-pill { background: transparent; border: none; color: var(--text-muted); padding: 6px 12px; font-weight: 500; font-size: 0.75rem; cursor: pointer; border-radius: 6px; transition: all 0.2s ease; }
.pos-pill:hover { color: var(--text-main); background: rgba(255, 255, 255, 0.05); }
.pos-pill.active { color: var(--bg-dark); background: var(--accent-main); font-weight: 700; }

.query-builder-box { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 12px 16px; margin-bottom: 1.25rem; }
.query-builder-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.query-badge { font-size: 0.65rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; letter-spacing: 0.5px; }
.query-rule-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; background: rgba(255, 255, 255, 0.02); padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border-color); }
.query-btn { background: rgba(255, 255, 255, 0.08); border: 1px solid var(--border-color); color: var(--text-main); padding: 6px 12px; border-radius: 6px; font-size: 0.75rem; cursor: pointer; transition: all 0.2s ease; font-weight: 600; }
.query-btn:hover { background: rgba(255, 255, 255, 0.15); }
.query-btn-danger { color: #ff6b6b; border-color: rgba(255, 107, 107, 0.3); }
.query-btn-danger:hover { background: rgba(255, 107, 107, 0.15); }
.query-btn-toggle.engaged { background: #27ae60; color: #ffffff; border-color: #27ae60; }

.table-container { background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border-color); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
th { background: rgba(255,255,255,0.02); color: var(--text-muted); padding: 12px 14px; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.5px; border-bottom: 1px solid var(--border-color); text-align: center; white-space: nowrap; }
th.sortable { cursor: pointer; user-select: none; transition: all 0.2s ease; }
th.sortable:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-main); }
td { padding: 12px 12px; border-bottom: 1px solid var(--border-color); vertical-align: middle; text-align: center; white-space: nowrap; font-weight: 400; }
tr:last-child td { border-bottom: none; }
tr:hover td { background-color: var(--bg-hover); cursor: pointer; }

.player-cell { display: flex; align-items: center; justify-content: flex-start; gap: 12px; text-align: left; }
.player-avatar-sm { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--bg-hover); border: 1px solid var(--border-color); flex-shrink: 0; }

.rank-num { font-size: 1rem; color: var(--text-muted); }
.player-name { font-weight: 700; color: var(--text-main); text-decoration: none; display: block; font-size: 0.9rem; }
.player-sub { font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; }
.badge-pos, .badge-class, .badge-intl { background: var(--bg-hover); border: 1px solid var(--border-color); color: var(--text-main); padding: 4px 8px; border-radius: 6px; font-size: 0.7rem; display: inline-block; font-weight: 600; }
.stars-5, .stars-4, .stars-3 { color: var(--star-color); font-weight: 700; letter-spacing: 1px; }
.rating-pill { background: var(--bg-hover); color: var(--text-main); border: 1px solid var(--border-color); padding: 4px 10px; border-radius: 6px; font-size: 0.8rem; display: inline-block; font-weight: 700; }

.status-cell { display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
.school-logo { width: 22px; height: 22px; object-fit: contain; border-radius: 3px; background: rgba(255,255,255,0.05); }
.school-logo-lg { width: 36px; height: 36px; object-fit: contain; border-radius: 4px; }
.commit-tag { background: var(--bg-hover); border: 1px solid var(--border-color); padding: 4px 10px; border-radius: 6px; margin: 3px; display: inline-block; font-size: 0.75rem; }

/* REDESIGNED PLAYER PROFILE STYLES */
.profile-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 2rem; }

.profile-header { 
  display: flex; 
  justify-content: space-between; 
  align-items: flex-start; 
  gap: 24px; 
  border-bottom: 1px solid var(--border-color); 
  padding-bottom: 1.75rem; 
  margin-bottom: 1.5rem; 
}

.profile-header-left { display: flex; align-items: flex-start; gap: 24px; width: 100%; }
.player-avatar-lg { width: 140px; height: 175px; border-radius: 12px; object-fit: cover; background: var(--bg-hover); border: 2px solid var(--border-color); flex-shrink: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }

.profile-title-area { flex: 1; text-align: left; }
.profile-name-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.profile-title-area h1 { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.5px; line-height: 1.1; color: var(--text-main); }
.bio-sub-info { font-size: 0.9rem; color: var(--text-muted); display: flex; align-items: center; gap: 8px; margin-bottom: 1rem; font-weight: 500; }
.bio-dot { color: #444; font-size: 0.8rem; }

/* Bio Badges Grid */
.bio-badges-grid { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; margin-top: 6px; }
.bio-badge {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-width: 100px;
  max-width: 135px;
}
.bio-badge.highlight {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}
.bio-badge.clickable {
  cursor: pointer;
  transition: all 0.2s ease;
}
.bio-badge.clickable:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--accent-main);
  transform: translateY(-2px);
}
.bio-badge-label { font-size: 0.65rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.bio-badge-val { font-size: 0.95rem; font-weight: 700; color: var(--text-main); margin-top: 2px; }

.profile-top-row { display: flex; gap: 1.25rem; margin-bottom: 1.5rem; align-items: stretch; }
.profile-top-row > div { flex: 1; min-width: 280px; margin-bottom: 0 !important; }
.spec-box { background: rgba(255,255,255,0.03); padding: 1.2rem; border-radius: 10px; border: 1px solid var(--border-color); text-align: left; display: flex; flex-direction: column; justify-content: flex-start; }
.spec-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.spec-item:last-child { border-bottom: none; }
.spec-label { color: var(--text-muted); font-size: 0.78rem; font-weight: 700; }
.spec-value { font-size: 0.85rem; font-weight: 600; }

.recruiting-box { background: rgba(255,255,255,0.03); padding: 1.2rem; border-radius: 10px; border: 1px solid var(--border-color); text-align: left; display: flex; flex-direction: column; justify-content: flex-start; }
.commit-standout-box { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-color); border-radius: 10px; padding: 1rem 1.2rem; margin-bottom: 1rem; text-align: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); }
.uncommitted-box { background: transparent; border: 1px dashed var(--border-color); border-radius: 10px; padding: 0.8rem 1.2rem; margin-bottom: 1rem; text-align: center; }
.commit-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 1px; color: var(--text-muted); text-transform: uppercase; }
.commit-main-info { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 6px; }
.commit-standout-logo { width: 36px; height: 36px; object-fit: contain; }
.commit-school-name { font-size: 1.1rem; font-weight: 700; color: var(--text-main); letter-spacing: 0.5px; }
.recruiting-section-title { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; margin-top: 8px; }
.final-list-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 0.8rem; }
.final-school-card { background: var(--bg-hover); border: 1px solid var(--border-color); font-size: 0.85rem; color: var(--text-main); padding: 6px 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.final-school-card.is-commit { background: var(--text-main); border-color: var(--text-main); color: var(--bg-dark); font-weight: 700; }
.offers-flex { display: flex; flex-wrap: wrap; gap: 6px; }
.offer-pill { background: transparent; border: 1px solid var(--border-color); color: var(--text-muted); font-size: 0.75rem; padding: 5px 10px; border-radius: 6px; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }

.accolades-list { display: flex; flex-direction: column; gap: 8px; }
.accolade-pill { background: var(--bg-hover); border: 1px solid var(--border-color); color: var(--text-main); padding: 10px 14px; border-radius: 8px; font-size: 0.8rem; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: all 0.2s ease; font-weight: 600; }
.accolade-pill:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--accent-main); transform: translateY(-1px); }
.accolade-logo { height: 24px; width: 24px; object-fit: contain; flex-shrink: 0; }

.scouting-report-full { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-color); border-radius: 10px; padding: 1.5rem; margin-bottom: 1.5rem; text-align: left; }
.scouting-report-full h3 { font-size: 1rem; margin-bottom: 0.75rem; color: var(--text-main); font-weight: 700; }
.scouting-report-full p { color: var(--text-muted); line-height: 1.7; margin-bottom: 1.5rem; font-size: 0.88rem; }
.scouting-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; font-size: 0.85rem; }

.stats-box-full { background: rgba(255,255,255,0.03); border: 1px solid var(--border-color); border-radius: 10px; padding: 1.5rem; text-align: left; }
.profile-stats-table-wrapper { overflow-x: auto; margin-top: 0.8rem; }
.profile-stats-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.profile-stats-table th { background: rgba(255, 255, 255, 0.02); color: var(--text-muted); padding: 10px 12px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border-color); text-align: center; }
.profile-stats-table td { padding: 12px 10px; border-bottom: 1px solid rgba(255,255,255,0.05); text-align: center; font-weight: 500; }
.profile-stats-table tr:hover td { background: rgba(255, 255, 255, 0.02); }

.back-btn { background: transparent; border: 1px solid var(--border-color); color: var(--text-main); padding: 8px 16px; border-radius: 8px; font-size: 0.8rem; cursor: pointer; margin-bottom: 1.25rem; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s ease; font-weight: 600; }
.back-btn:hover { background: var(--bg-hover); }

.school-detail-header { display: flex; justify-content: space-between; align-items: center; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 1.75rem 2rem; margin-bottom: 1.5rem; gap: 20px; flex-wrap: wrap; }
.school-detail-brand { display: flex; align-items: center; gap: 20px; }
.school-detail-logo { width: 64px; height: 64px; object-fit: contain; }
.school-detail-stats { display: flex; gap: 1.5rem; align-items: center; }
.school-stat-card { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-color); padding: 12px 20px; border-radius: 10px; text-align: center; }
.school-stat-val { font-size: 1.3rem; font-weight: 700; color: var(--text-main); }
.school-stat-lbl { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; margin-top: 2px; }

.school-commits-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; margin-top: 1rem; }
.commit-player-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.2rem; display: flex; align-items: center; gap: 16px; cursor: pointer; transition: all 0.2s ease; }
.commit-player-card:hover { background: var(--bg-hover); transform: translateY(-2px); }

/* About Me & Feedback Styles */
.about-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 2.5rem; max-width: 900px; margin: 0 auto; text-align: left; }
.about-card h2 { font-size: 1.6rem; margin-bottom: 1rem; color: var(--text-main); }
.about-card p { color: var(--text-muted); line-height: 1.8; margin-bottom: 1.2rem; font-size: 0.95rem; }
.feedback-section { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border-color); }
.feedback-form { display: flex; flex-direction: column; gap: 14px; margin-top: 1rem; }
.feedback-textarea { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-color); color: var(--text-main); padding: 12px 14px; border-radius: 8px; font-size: 0.85rem; outline: none; resize: vertical; min-height: 120px; }
.feedback-textarea:focus { border-color: var(--accent-main); }
.feedback-success { background: rgba(39, 174, 96, 0.15); border: 1px solid #2ecc71; color: #2ecc71; padding: 12px 16px; border-radius: 8px; font-size: 0.85rem; margin-top: 1rem; display: none; }

@media (max-width: 900px) {
  .profile-top-row { flex-direction: column; }
  .scouting-columns { grid-template-columns: 1fr; }
  .profile-header { flex-direction: column; align-items: flex-start; }
  .profile-header-left { flex-direction: column; align-items: flex-start; }
  .controls-bar, .stats-controls-bar { flex-direction: column; align-items: stretch; }
  .search-input { width: 100%; }
  .filter-group { width: 100%; justify-content: space-between; }
  .sub-nav-group { justify-content: center; }
  .school-detail-header { flex-direction: column; align-items: flex-start; }
  .pos-filter-wrapper { width: 100%; justify-content: space-between; }
  .bio-badge { flex: 1 1 calc(50% - 8px); max-width: 100%; }
}

/* Load / error state shown while the recruiting sheet is fetched, and when
   it can't be reached. Previously a failed load left the page blank. */
.load-state {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 18, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  text-align: center;
  padding: 2rem;
}

.load-inner { max-width: 460px; }

.load-inner h2 {
  font-size: 1.3rem;
  margin-bottom: 0.6rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.load-inner p { color: #b9c2d0; line-height: 1.55; }

.load-error .load-inner h2 { color: #e5484d; }

.load-spinner {
  width: 46px;
  height: 46px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: #4FAEF5;
  animation: loadSpin 0.8s linear infinite;
}

@keyframes loadSpin { to { transform: rotate(360deg); } }

/* ============================================================
   Component refresh.

   Everything below restyles the existing markup — no class names change,
   so app.js is untouched. The goal is the same page, rendered the way the
   rest of BYTHERIM is: condensed display type, card surfaces with real
   borders and radii, the blue accent used for emphasis rather than plain
   white, and consistent spacing.
   ============================================================ */

body {
  background: var(--bg-color);
  color: var(--text-main);
  font-family: 'Asap Condensed', 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5,
.recruiting-section-title,
.profile-name-row,
.nav-btn,
.sub-nav-btn {
  font-family: 'Oswald', 'Inter', system-ui, sans-serif;
  letter-spacing: 0.4px;
}

/* ---- Header and navigation ---- */

.nav-btn {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: 0.45rem 1rem;
  font-size: 0.86rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.nav-btn:hover { background: var(--card-hover); color: var(--text-main); }

.nav-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

.sub-nav-group { display: flex; gap: 0.35rem; flex-wrap: wrap; }

.sub-nav-btn {
  background: var(--card-bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 0.32rem 0.85rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sub-nav-btn:hover { border-color: var(--accent-dark); color: var(--text-main); }
.sub-nav-btn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }

/* ---- Surfaces ---- */
.recruiting-box,
.profile-card,
.about-card,
.query-builder-box,
.spec-box,
.stats-box-full,
.school-stat-card,
.commit-standout-box,
.uncommitted-box,
.feedback-section {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
}

.recruiting-section-title {
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--accent);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
  margin-bottom: 0.85rem;
}

/* ---- Controls ---- */
.controls-bar,
.stats-controls-bar {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.7rem 0.9rem;
}

.search-input,
.select-input {
  background: var(--bg-color);
  color: var(--text-main);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0.45rem 0.7rem;
  font-family: inherit;
  font-size: 0.88rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-input:focus,
.select-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.pos-pill {
  background: var(--bg-color);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--r-pill);
  padding: 0.25rem 0.7rem;
  font-size: 0.76rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pos-pill.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.query-btn {
  background: var(--accent);
  color: var(--accent-contrast);
  border: none;
  border-radius: var(--r-sm);
  padding: 0.4rem 0.85rem;
  font-family: 'Oswald', sans-serif;
  font-size: 0.78rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.query-btn:hover { filter: brightness(1.12); }
.query-btn-danger { background: var(--loss); color: #fff; }
.query-btn-toggle { background: var(--card-hover); color: var(--text-main); border: 1px solid var(--border); }

.query-badge {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--r-pill);
  padding: 0.1rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
}

/* ---- Tables ---- */
.table-container {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  /* auto, not hidden: rounded corners still clip, but a table wider than
     the window (the stats table on a laptop) scrolls instead of losing
     its right-hand columns. */
  overflow-x: auto;
  overflow-y: hidden;
}

table { border-collapse: collapse; width: 100%; }

thead th {
  background: var(--bg-color);
  color: var(--text-muted);
  font-family: 'Oswald', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 2;
}

thead th.sortable { cursor: pointer; }
thead th.sortable:hover { color: var(--accent); }

tbody td {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}

tbody tr { transition: background 0.12s ease; }
tbody tr:hover { background: var(--card-hover); }
tbody tr:last-child td { border-bottom: none; }

.rank-num {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  color: var(--text-muted);
}

.player-name { font-weight: 600; }
.player-sub { display: block; font-size: 0.74rem; color: var(--text-muted); }

/* Avatars are portraits, so a circle suits them. School marks are
   wordmarks and shields — cropping them to a circle cut off most of the
   logo, so they're shown whole. */
.player-avatar-sm {
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-color);
  border: 1px solid var(--border);
}

.school-logo,
.school-logo-lg,
.commit-standout-logo,
.accolade-logo {
  border-radius: 0;
  object-fit: contain;
  background: transparent;
  border: none;
}

.school-logo { width: 24px; height: 24px; }
.school-logo-lg { width: 34px; height: 34px; }

.player-cell,
.status-cell { display: flex; align-items: center; gap: 0.55rem; }

/* ---- Ratings, stars, pills ---- */
.rating-pill {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-soft-strong);
  border-radius: var(--r-pill);
  padding: 0.12rem 0.55rem;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
}

.stars-5 { color: var(--gold); letter-spacing: 1px; }
.stars-4 { color: var(--accent); letter-spacing: 1px; }
.stars-3 { color: var(--text-muted); letter-spacing: 1px; }

.badge-pos, .badge-class, .badge-intl, .commit-tag, .offer-pill, .accolade-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--bg-color);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 0.18rem 0.6rem;
  font-size: 0.76rem;
  color: var(--text-muted);
}

.badge-pos { color: var(--accent); border-color: var(--accent-soft-strong); background: var(--accent-soft); }
.badge-intl { color: var(--gold); border-color: rgba(212, 175, 55, 0.35); }
.commit-tag { color: var(--win); border-color: rgba(61, 220, 132, 0.3); }

/* ---- Player profile ---- */
.profile-header {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  padding: 1.1rem;
  background: linear-gradient(140deg, var(--accent-soft), var(--card-bg) 62%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.player-avatar-lg {
  width: 116px;
  height: 116px;
  border-radius: var(--r-md);
  object-fit: cover;
  border: 2px solid var(--border);
  background: var(--bg-color);
}

.profile-name-row { font-size: 1.85rem; line-height: 1.1; }

.bio-badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.5rem;
}

.bio-badge {
  background: var(--bg-color);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0.45rem 0.6rem;
}

.bio-badge-label {
  display: block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}

.bio-badge-val { font-weight: 600; font-size: 0.95rem; }

.spec-item { display: flex; justify-content: space-between; padding: 0.3rem 0; border-bottom: 1px solid var(--border); }
.spec-item:last-child { border-bottom: none; }
.spec-label { color: var(--text-muted); font-size: 0.82rem; }
.spec-value { font-weight: 600; font-size: 0.88rem; }

.scouting-report-full { line-height: 1.6; color: var(--text-muted); }
.scouting-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }

/* ---- School rankings ---- */
.school-detail-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(140deg, var(--accent-soft), var(--card-bg) 62%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1rem 1.2rem;
}

.school-detail-logo { width: 78px; height: 78px; object-fit: contain; }
.school-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.6rem; }
.school-stat-card { padding: 0.7rem; text-align: center; }
.school-stat-lbl { display: block; font-size: 0.68rem; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.6px; }
.school-stat-val { font-family: 'Oswald', sans-serif; font-size: 1.4rem; font-weight: 700; color: var(--accent); }

.school-commits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.7rem; }

.commit-player-card {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.7rem;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.commit-player-card:hover { border-color: var(--accent); transform: translateY(-2px); }

/* ---- Back button ---- */
.back-btn {
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--text-main);
  border-radius: var(--r-pill);
  padding: 0.35rem 0.9rem;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.back-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Theme toggle ---- */
.theme-toggle {
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--text-main);
  border-radius: var(--r-pill);
  width: 36px;
  height: 36px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Feedback ---- */
.feedback-textarea {
  background: var(--bg-color);
  color: var(--text-main);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0.7rem;
  font-family: inherit;
  width: 100%;
  resize: vertical;
}

.feedback-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.feedback-success { color: var(--win); font-weight: 600; }

@media (max-width: 760px) {
  .profile-header { flex-direction: column; text-align: center; }
  .player-avatar-lg { width: 96px; height: 96px; }
  .profile-name-row { font-size: 1.45rem; }
  nav { justify-content: center; }
  .table-container { overflow-x: auto; }
}

/* ============================================================
   Universal BYTHERIM header and footer.

   Lifted from the main site so navigation is identical everywhere, with
   the recruiting section's own header sitting beneath it.
   ============================================================ */

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1.6rem;
  background: var(--bg-color);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 300;
}

.brand-logo { display: flex; align-items: center; }
.logo-img { height: 38px; width: auto; }

.nav-links { display: flex; align-items: center; gap: 0.35rem; }

.nav-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-family: 'Oswald', sans-serif;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.4rem 0.75rem;
  border-radius: var(--r-pill);
  transition: color 0.15s ease, background 0.15s ease;
}

.nav-links a:hover { color: var(--text-main); background: var(--card-hover); }

.rp-btn {
  background: var(--accent);
  color: var(--accent-contrast) !important;
  font-weight: 600;
}

.rp-btn:hover { filter: brightness(1.1); background: var(--accent); }

.rp-btn .badge {
  background: rgba(0, 0, 0, 0.28);
  border-radius: var(--r-pill);
  padding: 0.05rem 0.4rem;
  font-size: 0.66rem;
  margin-left: 0.3rem;
}

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.4rem; }
.nav-toggle .bar { display: block; width: 22px; height: 2px; background: var(--text-main); margin: 4px 0; border-radius: 2px; }

/* ---- Recruiting section header ---- */
.recruiting-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 0.9rem 1.6rem;
  background: var(--card-bg);
  border-bottom: 2px solid var(--accent);
}

.recruiting-brand { cursor: pointer; display: flex; align-items: center; flex-shrink: 0; }

/* Deliberately large and left-aligned, the way a recruiting site leads
   with its masthead. */
.recruiting-logo-img {
  height: 76px;
  width: auto;
  max-width: 340px;
  object-fit: contain;
}

.recruiting-nav { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-left: auto; }

/* ---- Footer ---- */
.footer {
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  margin-top: 3rem;
  padding: 2.2rem 1.6rem 1rem;
}

.footer-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-logo { height: 40px; width: auto; margin-bottom: 0.7rem; }
.footer-desc { color: var(--text-muted); font-size: 0.88rem; line-height: 1.6; max-width: 320px; }

.footer-column h4 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--accent);
  margin-bottom: 0.7rem;
}

.footer-column a {
  display: block;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.88rem;
  padding: 0.22rem 0;
  transition: color 0.15s ease;
}

.footer-column a:hover { color: var(--text-main); }

.footer-bottom {
  max-width: 1200px;
  margin: 1.6rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    padding: 0.6rem 1rem;
  }
  .nav-links.active { display: flex; }
  .navbar { position: relative; }
  .recruiting-header { gap: 0.8rem; padding: 0.7rem 1rem; }
  .recruiting-logo-img { height: 54px; max-width: 240px; }
  .recruiting-nav { margin-left: 0; width: 100%; }
  .footer-container { grid-template-columns: 1fr; gap: 1.4rem; }
}

/* ============================================================
   Rankings rows: rank stack, player text, stars over grade, commit logo.
   Shared by the class rankings and the school pop-up.
   ============================================================ */
.table-empty { color: var(--text-muted); padding: 2rem; text-align: center; }

.mobile-only { display: none; }

.recruit-table .col-rank { width: 64px; }
.recruit-table:not(.show-class) .col-class { display: none; }

.rank-stack { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.1; }
.rank-stack .rank-num { font-size: 1.15rem; color: var(--text-main); }
.rank-sub {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  white-space: nowrap;
}
.rank-intl { color: var(--gold); }

.player-text { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.player-text .player-name,
.player-text .player-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.grade-stack { display: inline-flex; align-items: center; gap: 0.5rem; }
.grade-stack .stars { font-size: 0.8rem; }

.commit-cell { display: flex; align-items: center; gap: 0.5rem; }
.commit-name { font-weight: 600; font-size: 0.86rem; white-space: nowrap; }
.commit-none { color: var(--text-muted); font-size: 0.84rem; }

/* ---- School rankings ---- */
.school-table .col-srank { width: 56px; }
.school-table .col-commits { font-family: 'Oswald', sans-serif; font-weight: 600; }
.school-row { cursor: pointer; }

.star-breakdown { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; justify-content: center; }
.sb {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid var(--border);
  background: var(--bg-color);
  border-radius: var(--r-pill);
  padding: 0.15rem 0.55rem;
  font-size: 0.76rem;
  color: var(--text-muted);
}
.sb b { color: var(--text-main); font-family: 'Oswald', sans-serif; font-size: 0.86rem; }
.sb-5 .sb-star { color: var(--gold); }
.sb-4 .sb-star { color: var(--accent); }
.sb-3 .sb-star { color: var(--text-muted); }

.grade-pill { font-size: 0.95rem; padding: 0.3rem 0.8rem; }
.grade-max { font-size: 0.72rem; opacity: 0.7; }

/* ============================================================
   School pop-up
   ============================================================ */
body.modal-open { overflow: hidden; }

.school-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(4, 6, 10, 0.72);
  backdrop-filter: blur(3px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 4vh 1rem;
  overflow-y: auto;
}
.school-modal-backdrop.open { display: flex; }

.school-modal {
  position: relative;
  width: min(980px, 100%);
  background: var(--bg-color);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  padding: 1.3rem;
  animation: modalIn 0.18s ease-out;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.school-modal-close {
  position: absolute;
  top: 0.7rem;
  right: 0.8rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-main);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.school-modal-close:hover { border-color: var(--accent); color: var(--accent); }

.school-modal-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-right: 2.6rem;
  margin-bottom: 1rem;
}
.school-modal-logo { width: 64px; height: 64px; object-fit: contain; }
.school-modal-title { flex: 1; min-width: 160px; }
.school-modal-title h2 { font-size: 1.6rem; line-height: 1.1; text-transform: uppercase; }
.school-modal-sub { color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.6px; margin-top: 2px; }

.school-modal-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.school-modal-stats .school-stat-card { padding: 0.75rem 0.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; }
.of-n { text-transform: none; letter-spacing: 0; }

/* ============================================================
   Phones: rows become stacked cards so nothing scrolls sideways.
   ============================================================ */
@media (max-width: 760px) {
  .mobile-only { display: block; }
  .desktop-only { display: none !important; }

  .recruit-table thead,
  .school-table thead { display: none; }

  /* Recruit and school rows reflow to fit, so they never need to scroll;
     the wide stats table still must, so containers keep overflow-x: auto. */

  /* ---- Recruit rows ---- */
  .recruit-table tbody tr.recruit-row {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto 34px;
    grid-template-areas: "rank player grade commit";
    align-items: center;
    column-gap: 0.6rem;
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid var(--border);
  }
  .recruit-table tbody tr.recruit-row td { padding: 0; border: none; }
  .recruit-row .col-rank   { grid-area: rank; width: auto; }
  .recruit-row .col-player { grid-area: player; min-width: 0; }
  .recruit-row .col-grade  { grid-area: grade; }
  .recruit-row .col-commit { grid-area: commit; justify-self: center; }
  .recruit-row .col-class,
  .recruit-row .col-pos,
  .recruit-row .col-htwt,
  .recruit-row .col-state,
  .recruit-row .col-hs { display: none !important; }

  .rank-stack .rank-num { font-size: 1.05rem; }
  .recruit-row .player-avatar-sm { width: 34px; height: 34px; flex-shrink: 0; }
  .recruit-row .player-cell { gap: 0.5rem; }
  .recruit-row .player-name { font-size: 0.92rem; }
  .recruit-row .player-sub { font-size: 0.72rem; line-height: 1.3; }
  .player-meta { color: var(--text-main); opacity: 0.78; }

  .grade-stack { flex-direction: column; gap: 0.2rem; }
  .grade-stack .stars { font-size: 0.62rem; letter-spacing: 0; }
  .grade-stack .rating-pill { font-size: 0.78rem; padding: 0.08rem 0.45rem; }

  .commit-cell .school-logo { width: 28px; height: 28px; }

  /* ---- School rows ---- */
  .school-table tbody tr.school-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-areas:
      "rank school grade"
      "rank stars  grade";
    align-items: center;
    column-gap: 0.6rem;
    row-gap: 0.35rem;
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid var(--border);
  }
  .school-table tbody tr.school-row td { padding: 0; border: none; }
  .school-row .col-srank     { grid-area: rank; width: auto; text-align: center; }
  .school-row .col-school    { grid-area: school; min-width: 0; }
  .school-row .col-breakdown { grid-area: stars; justify-self: start; }
  .school-row .col-sgrade    { grid-area: grade; }
  .school-row .col-commits   { display: none; }
  .school-row .school-logo-lg { width: 30px; height: 30px; flex-shrink: 0; }
  .school-row .star-breakdown { justify-content: flex-start; }
  .school-row .sb { font-size: 0.68rem; padding: 0.08rem 0.45rem; }

  /* ---- Pop-up becomes a full-screen sheet ---- */
  .school-modal-backdrop { padding: 0; }
  .school-modal {
    width: 100%;
    min-height: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding: 1rem 0.75rem 2rem;
  }
  .school-modal-head { gap: 0.7rem; }
  .school-modal-logo { width: 48px; height: 48px; }
  .school-modal-title h2 { font-size: 1.25rem; }
  .school-modal-year { width: 100%; }
  .school-modal-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .school-modal .table-container { border-radius: var(--r-md); }
}

/* ============================================================
   Refinements from checking the phone and light-mode renders.
   ============================================================ */

/* Inside a school's own pop-up every commit is to that school, so the
   commit logo column is redundant — dropping it gives names more room. */
.school-modal .col-commit { display: none; }

/* Both logos have white lettering, which washes out on a light header.
   The two header bands keep dark tokens in either theme; everything
   inside them (links, tabs, the mobile menu, the theme button) follows. */
:root[data-theme="light"] .navbar,
:root[data-theme="light"] .recruiting-header {
  --bg-color: #06070a;
  --card-bg: #101319;
  --card-hover: #191d26;
  --text-main: #ffffff;
  --text-muted: #98a2b3;
  --border: #222833;
  --accent: #F0761F;
  --accent-dark: #C04E00;
  --accent-contrast: #140a03;
  --accent-soft: rgba(240, 118, 31, 0.15);
  --accent-soft-strong: rgba(240, 118, 31, 0.32);
  color: var(--text-main);
}

.pos-filter-wrapper { flex-wrap: wrap; row-gap: 0.4rem; }
.pos-pill-group { flex-wrap: wrap; }

@media (max-width: 760px) {
  .school-modal tbody tr.recruit-row {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    grid-template-areas: "rank player grade";
  }

  /* Four full-width dropdowns pushed the first player well below the
     fold; a two-by-two grid keeps the list close to the top. */
  #rankings-tab .filter-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    width: 100%;
  }
  #rankings-tab .filter-group .select-input { width: 100%; min-width: 0; font-size: 0.82rem; }

  .pos-filter-wrapper { justify-content: flex-start; }
  .pos-pill-group { width: 100%; justify-content: space-between; }

  /* Section tabs on one tidy row where possible. */
  .recruiting-nav { gap: 0.25rem; }
  .recruiting-nav .nav-btn { padding: 0.38rem 0.7rem; font-size: 0.76rem; }
}

/* ==========================================================================
   Transfer Portal tab and the profile's "In the NCAA RP" section
   ========================================================================== */
.portal-summary {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; align-items: baseline;
  color: var(--text-muted); font-size: 0.85rem; margin: 0 0 0.85rem;
}
.portal-summary b { color: var(--text-main); font-size: 1rem; }
.portal-summary .portal-source { margin-left: auto; font-size: 0.78rem; }
.portal-table .col-player { text-align: left; }
.portal-table .col-move { text-align: left; }
.portal-row:not(.has-profile) td { cursor: default; }
.portal-move { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.portal-school { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--text-main); }
.portal-school.from { color: var(--text-muted); font-weight: 500; }
.portal-arrow { color: var(--accent); font-weight: 700; }
.portal-badge {
  display: inline-block; padding: 3px 8px; border-radius: var(--r-pill);
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  border: 1px solid var(--border); color: var(--text-muted); margin: 2px;
}
.portal-badge.scheduled { color: var(--accent); border-color: var(--accent-soft-strong); background: var(--accent-soft); }
.portal-badge.portal { color: var(--text-main); background: var(--card-hover); }
.portal-badge.upcoming { color: var(--win); border-color: currentColor; }
.portal-empty { color: var(--text-muted); padding: 2rem 1rem !important; white-space: normal !important; }
.portal-more td { padding: 1rem !important; }
.portal-row:hover td { background-color: var(--bg-hover); }

.rp-career { margin-bottom: 1.25rem; }
.rp-career-head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--border-color); padding-bottom: 10px;
}
.rp-career-head h3 { margin: 0; }
.rp-status { display: flex; align-items: center; gap: 0.75rem; }
.rp-status-logo { width: 36px; height: 36px; object-fit: contain; }
.rp-status-label { display: block; font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.rp-status-main { display: block; font-weight: 700; color: var(--text-main); }
.rp-status.drafted .rp-status-main { color: var(--accent); }
.rp-path { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.9rem; }
.rp-season-table .rp-season-school { text-align: left; }
.rp-moves { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.5rem; }
.rp-moves li { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

@media (max-width: 760px) {
  .portal-summary .portal-source { margin-left: 0; width: 100%; }
  .portal-table thead { display: none; }
  .portal-table tbody tr.portal-row {
    display: grid; grid-template-columns: 1fr auto; grid-template-areas:
      "player grade" "move move" "meta meta";
    gap: 0.5rem; padding: 0.85rem 0.9rem; border-bottom: 1px solid var(--border);
  }
  .portal-table tbody tr.portal-row td { padding: 0; border: none; text-align: left; white-space: normal; }
  .portal-row .col-player { grid-area: player; min-width: 0; }
  .portal-row .col-grade { grid-area: grade; align-self: center; }
  .portal-row .col-move { grid-area: move; }
  .portal-row .col-season, .portal-row .col-type { grid-area: meta; }
  .portal-row .col-season { justify-self: start; }
  .portal-row .col-type { justify-self: end; }
  .rp-status { width: 100%; }
  .rp-status .query-btn { margin-left: auto; }
}
a.query-btn { text-decoration: none; display: inline-flex; align-items: center; }

/* School logos and colours in the final list and offers */
.final-school-card { border-left: 4px solid var(--school-color, var(--border-color)); padding-left: 10px; }
.final-school-card.is-commit { border-left-color: var(--school-color, var(--text-main)); box-shadow: inset 0 0 0 1px var(--school-color, transparent); }
.final-school-logo { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.offer-pill { border-left: 3px solid var(--school-color, var(--border-color)); }
.offer-logo { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }

/* ---------- Class summary strip ---------- */
.class-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.4fr); gap: 0.75rem; margin: -0.5rem 0 1.25rem; }
.class-summary[hidden] { display: none; }
.cs-item { position: relative; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 0.7rem 0.9rem; display: flex; flex-direction: column; gap: 2px; text-align: left; font: inherit; color: var(--text-main); }
.cs-item b { font-family: 'Oswald', sans-serif; font-size: 1.45rem; line-height: 1.1; }
.cs-item span { font-size: 0.78rem; color: var(--text-muted); }
.cs-item em { font-style: normal; opacity: 0.75; }
.cs-bar i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent); }
.cs-top { flex-direction: row; align-items: center; gap: 0.7rem; cursor: pointer; }
.cs-top:hover { border-color: var(--accent); }
.cs-top img { width: 38px; height: 38px; object-fit: contain; }
.cs-top small { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.cs-top b { font-size: 1.1rem; }
@media (max-width: 760px) {
  .class-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; margin-top: -0.25rem; }
  .cs-item { padding: 0.5rem 0.55rem; border-radius: 10px; }
  .cs-item b { font-size: 1.15rem; }
  .cs-item span { font-size: 0.66rem; line-height: 1.2; }
  .cs-item em { display: none; }
  .cs-top { grid-column: 1 / -1; padding: 0.45rem 0.7rem; }
  .cs-top img { width: 28px; height: 28px; }
  .cs-top b { font-size: 1rem; }
}

/* ---------- School rankings: score + average ---------- */
.grade-avg { display: block; font-size: 0.72rem; color: var(--text-muted); margin-top: 3px; }

/* ---------- Profile: commit chip, school colour, prev / next ---------- */
.profile-name-row { flex-wrap: wrap; }
.profile-commit-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 6px; border-radius: 999px; border: 1px solid var(--school-color, var(--border-color)); background: color-mix(in srgb, var(--school-color, transparent) 18%, transparent); color: var(--text-main); font-family: 'Inter', system-ui, sans-serif; letter-spacing: 0; text-transform: none; font-weight: 600; font-size: 0.9rem; line-height: 1.2; cursor: pointer; }
.profile-commit-chip img { width: 26px; height: 26px; object-fit: contain; }
.profile-commit-chip.open { padding: 4px 12px; cursor: default; color: var(--text-muted); font-weight: 500; font-size: 0.9rem; }
.profile-header { border-top: 4px solid var(--school-color, transparent); background-image: linear-gradient(120deg, color-mix(in srgb, var(--school-color, transparent) 16%, transparent), transparent 55%); }
.profile-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.profile-nav-pos { font-size: 0.8rem; color: var(--text-muted); text-align: center; }
.profile-nav-right { display: flex; gap: 0.5rem; }
.profile-nav-btn { background: transparent; border: 1px solid var(--border-color); color: var(--text-main); border-radius: 999px; padding: 5px 12px; font-family: inherit; font-weight: 600; font-size: 0.8rem; cursor: pointer; }
.profile-nav-btn:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 600px) {
  .profile-nav-pos { display: none; }
  .profile-nav-btn span { display: none; }
}

.stat-warn { font-size: 0.75rem; color: #e0a24a; margin: -0.2rem 0 0.5rem; }

.bio-badge-sub { display: block; font-size: 0.68rem; color: var(--text-muted); margin-top: 2px; line-height: 1.2; }
.commit-flip-note { font-size: 0.75rem; color: var(--text-muted); margin-top: 6px; }

/* ==========================================================================
   Summer Circuit tab (AAU and FIBA, from the NCAA RP)
   ========================================================================== */
.summer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.summer-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.6rem; min-width: 0;
}
.summer-wide { grid-column: 1 / -1; }
.summer-head { display: flex; flex-direction: column; gap: 0.1rem; }
.summer-head h3 { margin: 0; font-size: 1.15rem; color: var(--text-main); }
.summer-kicker { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.summer-champ { font-size: 1rem; color: var(--text-main); }
.summer-champ small { color: var(--text-muted); }
.summer-medals { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-weight: 700; color: var(--text-main); }
.summer-score { display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; }
.summer-score span { display: flex; justify-content: space-between; color: var(--text-muted); }
.summer-score span.won { color: var(--text-main); font-weight: 700; }
.summer-awards { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.8rem; margin: 0; font-size: 0.85rem; }
.summer-awards dt { color: var(--text-muted); font-weight: 600; }
.summer-awards dd { margin: 0; color: var(--text-main); }
.summer-player { color: var(--text-main); text-decoration: underline; text-decoration-color: var(--border); cursor: pointer; }
.summer-player:hover { color: var(--accent); }
.summer-card details summary { cursor: pointer; color: var(--text-muted); font-size: 0.8rem; font-weight: 700; }
.summer-standings { margin: 0.4rem 0 0; padding-left: 1.3rem; font-size: 0.85rem; columns: 2; column-gap: 1.2rem; }
.summer-standings li { break-inside: avoid; }
.summer-standings li span { color: var(--text-main); }
.summer-standings li small { color: var(--text-muted); margin-left: 0.4rem; }
.summer-table td small { color: var(--text-muted); }
.summer-hot { color: var(--heat-good-text); font-size: 0.75rem; }
.summer-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; color: var(--text-muted); }
.summer-history b { color: var(--text-main); margin-right: 0.4rem; }
@media (max-width: 800px) {
  .summer-grid { grid-template-columns: 1fr; }
  .summer-standings { columns: 1; }
}

/* Summer as a short season: steps, event tabs, results, box scores */
.summer-steps { list-style: none; margin: 0 0 0.8rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.summer-steps li { font-size: 0.74rem; font-weight: 600; color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 0.2rem 0.65rem; }
.summer-steps li.done { color: var(--text-main); }
.summer-steps li.current { border-color: var(--accent); color: var(--text-main); }
.summer-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1rem; }
.summer-tabs button { border: 1px solid var(--border); background: var(--card-bg); color: var(--text-muted); font: inherit; font-size: 0.82rem; font-weight: 700; padding: 0.4rem 0.9rem; border-radius: var(--r-pill); cursor: pointer; }
.summer-tabs button.active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.summer-note { color: var(--text-muted); font-size: 0.8rem; margin: 0; }
.summer-subhead { margin: 0.8rem 0 0.35rem; font-size: 0.85rem; color: var(--text-main); }
.summer-table tr.cutline td { border-bottom: 2px solid var(--accent); }
.summer-round h4 { margin: 0.5rem 0 0.35rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.summer-games { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.4rem; }
.summer-game { display: flex; flex-direction: column; gap: 2px; background: var(--bg-color); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0.45rem 0.65rem; font-size: 0.85rem; cursor: pointer; }
.summer-game:hover { border-color: var(--accent); }
.summer-game > span { display: flex; justify-content: space-between; gap: 0.5rem; color: var(--text-muted); }
.summer-game > span.won { color: var(--text-main); font-weight: 700; }
.summer-game small { color: var(--text-muted); font-size: 0.7rem; }
.summer-roster { margin: 0.4rem 0 0; font-size: 0.82rem; line-height: 1.7; color: var(--text-main); }
.summer-roster small { color: var(--text-muted); }
.summer-leaders { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.86rem; color: var(--text-main); }
.summer-leaders li small { color: var(--text-muted); margin-left: 0.3rem; }
.summer-leaders li b { float: right; }
.summer-sheet { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px; overflow-y: auto; }
.summer-sheet-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1rem 1.1rem 1.2rem; width: min(820px, 100%); }
.summer-sheet-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.summer-sheet-top h3 { margin: 0.15rem 0 0; color: var(--text-main); font-size: 1.2rem; }
.summer-close { border: 1px solid var(--border); background: transparent; color: var(--text-main); font-size: 1.3rem; line-height: 1; width: 2rem; height: 2rem; border-radius: 50%; cursor: pointer; }
.summer-box td small { color: var(--text-muted); }
.summer-box tr.summer-total td { border-top: 1px solid var(--border); font-weight: 700; }
.profile-stats-table .stat-season { text-align: left; white-space: nowrap; }
.profile-stats-table .stat-season small { display: block; color: var(--text-muted); font-size: 0.7rem; font-weight: 400; }
.profile-stats-table tr.stat-history td { color: var(--text-muted); }
.summer-log { margin-top: 1.4rem; }
.summer-log h3 { font-size: 0.85rem; margin: 0 0 0.5rem; color: var(--text-main); }
.summer-log-row { cursor: pointer; }
.summer-log-row:hover td { color: var(--accent); }
@media (max-width: 600px) { .summer-sheet { padding: 2vh 8px; } .summer-games { grid-template-columns: 1fr; } }
.summer-table td, .summer-table th, .summer-box td, .summer-box th { padding: 8px 10px; }
@media (max-width: 600px) {
  .summer-table .summer-pts { display: none; }
  .summer-table td, .summer-table th, .summer-box td, .summer-box th { padding: 7px 6px; font-size: 0.78rem; }
}

/* Summer: which summer, and playing it here */
.summer-source { display: inline-flex; gap: 0.25rem; margin-left: auto; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px; }
.summer-source button { border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: 0.78rem; font-weight: 700; padding: 0.3rem 0.75rem; border-radius: var(--r-pill); cursor: pointer; }
.summer-source button.active { background: var(--accent); color: var(--accent-contrast); }
.summer-sim { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0 0 0.9rem; padding: 0.75rem 0.9rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-lg); }
.summer-sim-btn { font: inherit; font-size: 0.85rem; font-weight: 700; padding: 0.5rem 0.95rem; border-radius: var(--r-pill); border: 1px solid var(--border); background: transparent; color: var(--text-main); cursor: pointer; }
.summer-sim-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.summer-sim-btn:hover { filter: brightness(1.08); }
.summer-sim .summer-note { flex-basis: 100%; }
@media (max-width: 600px) { .summer-source { margin-left: 0; } .summer-sim-btn { flex: 1 1 auto; } }

/* Box scores: starters marked and bold, a rule above the bench. */
.starter-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.05rem; height: 1.05rem; margin-right: 0.35rem;
  border-radius: 4px; background: var(--accent, #F0761F); color: var(--accent-contrast, #140a03); font-size: 0.62rem; font-weight: 800; line-height: 1; vertical-align: 1px; }
.summer-box tr.is-starter td:first-child { font-weight: 700; }
.summer-box tr.bench-start td { border-top: 1px solid var(--border); }