/* ==========================================================================
   TEAM HUB
   Onboarding (link Sleeper / manual entry) -> roster view -> Optimize
   Lineup. Tokens only, no new colors, matching the rest of the site.
   Several rules here (.tool-header, .search-*) are deliberate duplicates
   of the same rules in start-sit.css — every tool page on this site is a
   self-contained CSS file (only tokens.css/base.css are actually shared),
   so that's the existing convention, not an oversight.
   ========================================================================== */

.tool-header {
  padding: var(--space-12) 0 var(--space-8);
  border-bottom: var(--border-hair);
}
.tool-header h1 { font-size: var(--text-3xl); margin-top: var(--space-3); }
.tool-header p { color: var(--text-400); max-width: 60ch; margin-top: var(--space-3); }

/* ---- Search input + dropdown (same pattern as Start/Sit) ---- */
.search-input {
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  color: var(--text-100);
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-base);
  width: 100%;
}
.search-input:focus-visible { border-color: var(--lime-500); }
.search-wrap { position: relative; }
.search-dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  max-height: 280px;
  overflow-y: auto;
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.65);
}
.search-dropdown-item {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-300);
  cursor: pointer;
}
.search-dropdown-item:hover,
.search-dropdown-item:focus {
  background: var(--lime-500-15);
  color: var(--lime-500);
  outline: none;
}
.search-dropdown-empty {
  padding: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-600);
  text-align: center;
}

/* ---- Onboarding (no roster saved yet) ---- */
.teamhub-onboarding { padding: var(--space-8) 0 var(--space-16); }
.onboarding-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-6);
  align-items: start;
}
.onboarding-card {
  background: var(--ink-900);
  border: var(--border-hair);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.onboarding-card h3 { font-size: var(--text-lg); text-transform: none; letter-spacing: 0; }
.onboarding-card > p { color: var(--text-400); font-size: var(--text-sm); }
.onboarding-card label {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-400);
  margin-top: var(--space-2);
}
.onboarding-divider {
  align-self: center;
  margin-top: var(--space-16);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-600);
}
.onboarding-status {
  font-size: var(--text-sm);
  color: var(--text-300);
  line-height: 1.5;
}

/* ---- Manual roster-builder preview (inside the onboarding card) ---- */
.roster-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.roster-empty {
  color: var(--text-600);
  font-size: var(--text-sm);
  padding: var(--space-3) 0;
}
.roster-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-sm);
}
.roster-row-name { font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); }
.roster-row-meta {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  color: var(--text-400);
  white-space: nowrap;
}
.roster-remove-btn {
  background: none;
  border: none;
  color: var(--text-600);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
  padding: 0 var(--space-1);
}
.roster-remove-btn:hover { color: var(--lime-500); }

/* ---- Roster view (once a team exists) ---- */
.teamhub-roster { padding: var(--space-8) 0 var(--space-16); }
.roster-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.roster-header h2 { font-size: var(--text-xl); }
.roster-meta {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-400);
  margin-top: var(--space-2);
}
.roster-header-actions { display: flex; gap: var(--space-3); }

/* ---- League format selector ----
   Button group, not a native <select> -- deliberately avoiding <select>
   here given this site's past cross-browser trouble with one on the
   Mock Draft Simulator's setup screen (fixed there by switching to
   buttons); same reasoning applied up front this time. */
.format-selector {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.format-selector-label {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-400);
  margin-right: var(--space-2);
}
.format-btn {
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  color: var(--text-300);
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.format-btn:hover { border-color: var(--lime-500); color: var(--lime-500); }
.format-btn-active {
  background: var(--lime-500-15);
  border-color: var(--lime-500);
  color: var(--lime-500);
}

/* ---- Roster view: vertical, position-grouped lineup card ----
   Was a grid of boxed cards; a fantasy roster reads more naturally as a
   stacked lineup card (like a real scoresheet) than a bento grid, so
   each position gets its own labeled section with one row per player,
   stacked top to bottom. */
.roster-position-group { margin-bottom: var(--space-6); }
.roster-group-label {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lime-500);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: var(--border-hair);
}

.lineup-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--ink-900);
  border: var(--border-hair);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}
.lineup-row .roster-row-name { font-family: var(--font-display); font-size: var(--text-base); text-transform: uppercase; }
.lineup-row .roster-row-meta { font-family: var(--font-data); font-size: var(--text-xs); color: var(--text-400); white-space: nowrap; }
.lineup-row-score {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--lime-500);
  white-space: nowrap;
}
.lineup-row-score-suffix { font-family: var(--font-data); font-size: var(--text-xs); font-weight: 400; color: var(--text-600); margin-left: 0.15em; }

.lineup-row-empty {
  display: flex;
  justify-content: center;
  border-style: dashed;
  color: var(--text-600);
}
.lineup-row-empty-text { font-size: var(--text-sm); }

/* Starters get a lime-tinted border, same "this is the highlighted one"
   language used elsewhere on the site (Start/Sit's winner callout,
   pricing's featured tier) -- the Start badge (own copy of .badge-start
   in start-sit.css, kept local per this file's self-contained
   convention) reinforces the same thing. */
.lineup-row:has(.badge-start) { border-color: var(--lime-500-35); }
.badge-start {
  color: var(--ink-950);
  border-color: var(--lime-500);
  background: var(--lime-500);
}

/* Real Sleeper injury_status flag (see loadPlayers() in sleeper.js) --
   reuses --grade-f, this site's existing "bad" color from the WINNR
   Score grade spectrum, own copy per this file's self-contained-CSS
   convention (same treatment as start-sit.css/waiver-wire.css). */
.badge-injured { color: var(--grade-f); border-color: var(--grade-f); background: transparent; }
/* Shared wrapper for renderLineupRow()'s 4th grid cell -- holds 0, 1, or
   2 badges (injured + start) without changing the row's actual grid
   child COUNT (always exactly 4), same "deterministic children" fix
   already applied to this file's mobile-audit CSS. */
.lineup-row-badges { display: flex; gap: var(--space-1); flex-wrap: wrap; justify-content: flex-end; }

.lineup-row-bench { opacity: 0.7; }
.roster-bench { margin-top: var(--space-2); }

/* ---- League Sync ---- */
.teamhub-league { padding: var(--space-8) 0 var(--space-16); border-top: var(--border-hair); }
.league-sync-header { margin-bottom: var(--space-6); }
.league-sync-header h2 { font-size: var(--text-xl); }
.league-sync-header p { color: var(--text-400); font-size: var(--text-sm); margin-top: var(--space-2); max-width: 60ch; }

.league-sync-lookup { display: flex; flex-direction: column; gap: var(--space-3); max-width: 420px; }
.league-sync-lookup label {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-400);
}

.league-pick-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.league-pick-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  border-radius: var(--radius-sm);
  color: var(--text-100);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.league-pick-item:hover { border-color: var(--lime-500); }
.league-pick-name { font-weight: 600; }
.league-pick-meta { font-family: var(--font-data); font-size: var(--text-xs); color: var(--text-400); white-space: nowrap; }

.league-unmatched-notice {
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-300);
  margin-bottom: var(--space-6);
}
.league-unmatched-notice ul { margin-top: var(--space-2); padding-left: var(--space-5); color: var(--text-400); font-size: var(--text-xs); }

.league-teams {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
  align-items: start;
}
.league-team-card {
  background: var(--ink-900);
  border: var(--border-hair);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.league-team-name { font-size: var(--text-base); text-transform: none; letter-spacing: 0; margin-bottom: var(--space-1); }

/* ---- Collapsed-by-default team card ----
   Was a fully-expanded card per team (boxed row per player, all 12 teams
   open at once -- very long/heavy). Now: name + count + a quick "top 3
   by rank" preview by default, full breakdown behind "View Roster". */
.league-team-summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}
.league-team-toggle { flex-shrink: 0; font-size: var(--text-xs); padding: 0.5rem 0.9rem; }
.league-team-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-3);
}
.preview-player { font-family: var(--font-data); font-size: var(--text-xs); color: var(--text-300); }
.preview-rank { color: var(--text-600); }
.league-team-full { margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--border-hair); }

/* Position dividers inside the expanded roster -- smaller/lighter than
   .roster-group-label (the personal roster view's full section
   headers), reading as plain text dividers rather than headings. */
.league-position-group { margin-bottom: var(--space-3); }
.league-position-label {
  display: block;
  font-family: var(--font-data);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-600);
  margin-bottom: var(--space-1);
}

/* Compact single-line-per-player rows -- not boxed cards, just a plain
   list with hairline dividers between rows (same spirit as Waiver
   Wire's list style, tightened further since 15 of these can appear per
   team). */
.compact-player-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--ink-800);
  font-size: var(--text-sm);
}
.compact-player-row:last-child { border-bottom: none; }
.compact-player-name { font-family: var(--font-body); font-weight: 600; }
.compact-player-meta { font-family: var(--font-data); font-size: var(--text-xs); color: var(--text-400); white-space: nowrap; }

/* ---- Rosters / Dashboard tabs ---- */
.league-view-toggle {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.view-toggle-btn {
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  color: var(--text-300);
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.view-toggle-btn:hover { border-color: var(--lime-500); color: var(--lime-500); }
.view-toggle-btn-active { background: var(--lime-500-15); border-color: var(--lime-500); color: var(--lime-500); }

/* ---- League Dashboard ---- */
.dashboard-section { margin-bottom: var(--space-8); }
.dashboard-section h3 { font-size: var(--text-lg); text-transform: none; letter-spacing: 0; margin-bottom: var(--space-3); }
.dashboard-note { font-size: var(--text-sm); color: var(--text-600); margin-bottom: var(--space-4); }

.matchup-list {
  display: grid;
  /* Was minmax(320px, 1fr) -- at a 375px viewport the .container's own
     padding (2x var(--space-6) = 48px) leaves only 327px of content
     width, just 7px above that floor. Matched to .league-teams' safer
     280px precedent instead. */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}
/* .matchup-card is a plain block wrapper, NOT the grid -- the two-team
   grid lives on the nested .matchup-teams-row instead, so the Share
   Result button (a sibling of that row, not a 4th grid child) never
   becomes another ambiguous partial-override case like the ones fixed
   in the mobile audit above. */
.matchup-card {
  background: var(--ink-900);
  border: var(--border-hair);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.matchup-teams-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
}
/* Holds both action buttons -- "View Full Matchup" (only on the user's
   own matchup card, see findMyTeam()/isMine in team-hub.js) and "Share
   Result". Siblings in a flex row (wrapping on narrow cards) rather than
   grid children of .matchup-teams-row, same reasoning as that row's own
   comment above. */
.matchup-card-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}
.matchup-view-full-btn,
.matchup-share-btn {
  flex: 1 1 160px;
}
.matchup-side { display: flex; flex-direction: column; gap: var(--space-1); }
.matchup-side:last-child { align-items: flex-end; text-align: right; }
.matchup-team-name { font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); }
.matchup-score { font-family: var(--font-display); font-size: var(--text-xl); color: var(--lime-500); }
.matchup-scored-note { font-family: var(--font-data); font-size: 0.6875rem; color: var(--text-600); }

/* Projected-winner side -- own copy of .badge-start's lime treatment
   (already defined above for the roster view's Start badge), same
   "this is the highlighted one" language as Start/Sit's winner card. */
.matchup-side-winner .matchup-team-name { color: var(--lime-500); }
.matchup-side-winner .badge-start { margin-bottom: var(--space-1); font-size: 0.6875rem; padding: 0.3rem 0.7rem; }
.matchup-side:last-child .badge-start { align-self: flex-end; }

/* VS divider -- same pulsing-glow language as Start/Sit's .vs-text,
   duplicated here per this file's self-contained-CSS convention. */
.matchup-vs-wrap { display: flex; align-items: center; justify-content: center; }
.matchup-vs {
  position: relative;
  display: inline-block;
  padding: var(--space-2) var(--space-1);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime-500);
}
.matchup-vs::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--lime-500-35);
  animation: matchupVsPulse 2.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes matchupVsPulse {
  0%, 100% { opacity: 0.5; transform: scale(0.92); box-shadow: 0 0 14px 2px var(--lime-500-15); }
  50% { opacity: 1; transform: scale(1.12); box-shadow: 0 0 30px 8px var(--lime-500-35); }
}
/* .matchup-bye markup (see renderMatchupCard()) never wraps its two
   children in .matchup-teams-row -- there's only one team, no VS/second
   side to grid alongside -- so it needs its own flex context now that
   the shared .matchup-card is a plain block wrapper. */
.matchup-bye { display: flex; align-items: center; justify-content: space-between; }
.matchup-bye-label { font-family: var(--font-data); font-size: var(--text-xs); color: var(--text-600); text-transform: uppercase; }

.standings-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.standings-table th {
  text-align: left;
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-400);
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-hair);
}
.standings-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--ink-800); }
.standings-table tbody tr:last-child td { border-bottom: none; }

@media (max-width: 860px) {
  .onboarding-grid { grid-template-columns: 1fr; }
  .onboarding-divider { margin-top: 0; text-align: center; }
}
@media (max-width: 560px) {
  /* Single explicit column, every child (name/meta/score/badge) forced
     to span it -- was a partial override relying on CSS Grid's
     auto-placement to fill remaining cells sensibly, which for a
     4-child row (name, meta, score, badge) is genuinely hard to predict
     without a real renderer to confirm. Deterministic top-to-bottom
     stacking instead, regardless of how many children a given row has. */
  .lineup-row {
    grid-template-columns: 1fr;
    row-gap: var(--space-1);
  }
  .lineup-row > * { grid-column: 1 / -1; }
  /* Same deterministic single-column stack as .lineup-row above, applied
     to .matchup-teams-row (the actual grid now that .matchup-card is a
     plain wrapper) -- 3 children (side, VS, side) is a small enough,
     fixed count that a plain 1-column stack in source order (side A,
     VS, side B) is unambiguous, unlike the 4-and-up partial-override
     cases this same fix pattern was written for. */
  .matchup-teams-row { grid-template-columns: 1fr; text-align: center; row-gap: var(--space-2); }
  .matchup-teams-row > * { grid-column: 1 / -1; }
  .matchup-side:last-child { align-items: center; text-align: center; }
}

/* ---- Share Result modal (Task 5) ----
   Team Hub had no modal/popup of any kind before this -- own copy of the
   exact same shell start-sit.css and trade-analyzer.css each already
   carry (tokens only, no site-wide modal base exists to reuse), per this
   site's self-contained-CSS-per-tool convention. Includes the same
   [hidden]-vs-display:flex fix already established there: an
   unconditioned `display: flex` on .modal-overlay would beat the
   browser's own [hidden] rule and keep the modal visually open
   regardless of the `hidden` DOM property. */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.modal-overlay:not([hidden]) {
  display: flex;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--ink-950);
  opacity: 0.85;
}
.modal-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--ink-900);
  border: var(--border-hair);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-hair);
}
.modal-head h2 { font-size: var(--text-xl); }
.modal-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: none;
  border: 1px solid var(--ink-600);
  border-radius: var(--radius-sm);
  color: var(--text-400);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover { border-color: var(--lime-500); color: var(--lime-500); }

.share-card-preview {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: var(--border-hair);
  margin-bottom: var(--space-4);
}
.share-card-preview img { display: block; width: 100%; height: auto; }
.share-card-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.share-card-status {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-300);
}

@media (max-width: 560px) {
  /* Same reasoning as every other modal-box fix on this site: a fixed
     640px max-width plus var(--space-8) (2rem) padding on both sides
     leaves very little room at a 375px viewport -- shrink the padding
     rather than let content butt up against the screen edge. */
  .modal-box { padding: var(--space-4); }
}