/* ==========================================================================
   START / SIT
   Search + select, scoring, a winner callout, and a Matchup Details modal
   are all wired up (assets/js/start-sit.js). Tokens only, no new colors,
   matching the rest of the site.
   ========================================================================== */

.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); }

.startsit-compare {
  padding: var(--space-8) 0 var(--space-8);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-6);
  align-items: start;
}

.compare-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.compare-column label {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-400);
}

.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); }

/* Dropdown is built at runtime (see createSearchDropdown() in
   start-sit.js) and wrapped around the input so it can anchor below it
   without changing the static HTML. */
.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,
.search-dropdown-item.is-active {
  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;
}

.compare-vs {
  align-self: center;
  margin-top: var(--space-8);
}

/* ---- Winner callout (sits above the compare row) ----
   Same "Start" language/colors as .badge-start on the winning card, just
   bigger and standalone so the answer is visible without reading both
   cards. Muted (.is-close) for a close call instead of picking a side. */
.startsit-winner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 auto var(--space-6);
  padding: var(--space-3) var(--space-6);
  background: var(--lime-500-10);
  border: 1px solid var(--lime-500-35);
  border-radius: var(--radius-md);
  color: var(--lime-500);
}
.startsit-winner-icon { flex-shrink: 0; }
#startsitWinnerText {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--text-100);
}
.startsit-winner.is-close {
  background: transparent;
  border-color: var(--ink-600);
  color: var(--text-400);
}
.startsit-winner.is-close #startsitWinnerText { color: var(--text-300); }
/* Centers the pill above the two-column compare row on wide screens; on
   the stacked mobile layout below, .startsit-compare's own text-align
   keeps it centered too since it's already a block-level flex child. */
main.container { text-align: center; }
.startsit-compare, .compare-column { text-align: left; }

/* The "VS" text itself, split out from .compare-vs so the glow ring
   below scopes to just the text. */
.vs-text {
  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);
}
/* Pulsing ring + real blurred glow (box-shadow, not just the border)
   so "VS" reads as the visual centerpiece of the comparison at a glance,
   not just on close inspection. Still slow enough (2.2s) to feel like a
   centerpiece rather than an alert, but with a wider opacity/scale swing
   and an actual glow blur than the first pass had. */
.vs-text::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--lime-500-35);
  animation: vsPulse 2.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes vsPulse {
  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); }
}

.compare-card {
  background: var(--ink-900);
  border: var(--border-hair);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  min-height: 480px; /* taller still now that a 128px headshot sits above the hero score too */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: opacity var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
}

/* Winner callout / muted-loser treatment — added once both cards have a
   score (see refreshComparison() in start-sit.js). Same lime-glow
   language already used elsewhere on the site for "this is the
   highlighted one" (e.g. the pricing page's featured tier). */
.compare-card-winner {
  border-color: var(--lime-500-35);
  box-shadow: 0 0 40px -18px var(--lime-500-15);
}
.compare-card-muted { opacity: 0.65; }

.compare-placeholder {
  color: var(--text-600);
  font-size: var(--text-sm);
  max-width: 32ch;
}

/* ---- Populated compare card ---- */
.compare-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}
/* ---- Player headshot (own, bigger copy of Live Rankings' avatar) ----
   Live Rankings' .player-avatar is a small 32px circle meant to sit
   inline next to a name in a table row. This card's own portrait is the
   opposite: a big, hero-sized cutout at the top of the card (explicit
   user call: "bigger cutout tho not a little one like the rankings
   page") -- own class names/sizing rather than reusing that 32px rule,
   per this project's self-contained-per-tool CSS convention. Same
   "initials circle renders first and always stays in the DOM, real photo
   layers on top and quietly removes itself on a 404" fallback as Live
   Rankings (see renderCompareAvatar() in start-sit.js) -- not every
   player has a real photo (team DEF, deep-roster names Sleeper hasn't
   shot yet), so a missing one just falls back to initials instead of a
   broken-image icon. object-position: top crops in tight on the face
   instead of showing the flat gray studio backdrop Sleeper's photos sit
   on -- closest a plain <img> crop gets to a real cutout without an
   image-processing step. */
.compare-avatar {
  position: relative;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-800);
  border: 2px solid var(--ink-700);
  margin-bottom: var(--space-1);
}
.compare-avatar-initials {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-400);
}
.compare-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* Winning card gets the same lime glow treatment as its border, echoed
   onto the portrait itself so the "this is the pick" signal reads even
   at a glance before the eye reaches the Start badge or hero score. */
.compare-card-winner .compare-avatar { border-color: var(--lime-500-35); box-shadow: 0 0 24px -6px var(--lime-500-35); }

.compare-player-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.compare-player-meta {
  font-family: var(--font-data);
  font-size: var(--text-sm);
  color: var(--text-400);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
/* Bigger accent + a real glow now (per-team color, set inline via
   TEAM_COLORS in start-sit.js — box-shadow lives there since it needs
   each team's own hex, not one shared token color). The hairline white
   ring (also inline) keeps every dot visible against the dark card even
   for teams whose real color is itself very dark (Raiders black,
   Jaguars near-black navy). */
.team-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---- Vegas/Proj source chip ----
   REPLACED the old mini stat bars (rank/rating/matchup contribution)
   that used to sit here -- explicit user call was that those bars could
   visibly disagree with which player actually projects higher, since
   they were a totally different calculation (scoreBreakdown()'s 0-10
   blend) from the real points number the card is now built around. In
   their place: the same teal/gray "where did this number come from" chip
   Live Rankings shows next to its Vegas/Proj points, own copy of the
   colors (not a shared class, per this project's per-tool CSS
   self-containment convention) since this card's layout/sizing needs are
   different from a table row's inline chip. */
.compare-source-chip {
  display: inline-flex;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.compare-source-vegas {
  background: var(--teal-500-15);
  border: 1px solid var(--teal-500-35);
  color: var(--teal-500);
}
.compare-source-projection {
  background: var(--ink-800);
  border: 1px dashed var(--ink-600);
  color: var(--text-400);
}

/* .stat-bar-track/.stat-bar-fill are now used ONLY by the Matchup
   Details modal's "Projected Points" bar below (they used to also back
   the card's own rank/rating/matchup bars, removed above) -- kept here
   since that's still the first place in this file they're defined. */
.stat-bar-track {
  height: 5px;
  border-radius: 999px;
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  overflow: hidden;
}
.stat-bar-fill {
  height: 100%;
  background: var(--lime-500);
  border-radius: inherit;
}

/* ---- Score, now the hero of the card ----
   Was --text-3xl tucked at the bottom; now the single biggest element
   on the card (--text-4xl, the largest scale tokens.css defines), bold,
   and roughly centered in the card's vertical rhythm instead of an
   afterthought below the player info. */
.compare-score-hero {
  margin: var(--space-2) 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--lime-500);
  line-height: 1;
}
/* The Vegas/Proj chip sits at the hero's own baseline-flex row but needs
   its own smaller, non-display font -- reset independently rather than
   inheriting the hero's --text-4xl. */
.compare-score-hero .compare-source-chip {
  font-size: var(--text-xs);
  align-self: center;
}
/* Fixed-width digits so the count-up animation (see animateScoreValue()
   in start-sit.js) doesn't jitter side-to-side as the displayed value's
   digit widths change frame to frame. */
.score-value { font-variant-numeric: tabular-nums; }
.compare-score-hero .score-suffix {
  font-family: var(--font-data);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--text-600);
  text-transform: none;
  margin-left: 0.15em;
}

/* ---- Rank + matchup, demoted to a small supporting line under the
   hero score (was two separate stacked blocks; now one row with a
   hairline divider between them, same convention as elsewhere on the
   site). ---- */
.compare-player-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-1);
}
.compare-player-detail > *:not(:first-child) {
  padding-left: var(--space-3);
  border-left: 1px solid var(--ink-700);
}
.compare-player-rank {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-600);
}
.compare-player-rank span { color: var(--text-300); font-weight: 600; }

.compare-player-matchup {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-400);
}
.compare-player-matchup-none { color: var(--text-600); }

/* Plain informational sentence under the detail row -- same
   describeMatchupRank() text the modal's "why" paragraph uses, shown
   here too so the card explains itself without opening the modal. NOT a
   scored bar (that's the whole point of this tab's redesign -- see the
   .compare-source-chip comment above): a real Vegas line already prices
   in the opposing defense, so this is context, not a second factor. */
.compare-matchup-context {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-600);
  max-width: 34ch;
  line-height: 1.35;
}

/* "Start" badge on the winning card — starts from .badge's shape (base.css)
   but overrides padding/size to be noticeably bigger and bolder than a
   normal status tag, plus an inline lightning-bolt icon (currentColor,
   so it always matches the badge's own ink-950 text). No pulsing dot
   like .badge-live, since that specifically means "streaming live data,"
   not "this is the recommendation." */
.badge-start {
  color: var(--ink-950);
  border-color: var(--lime-500);
  background: var(--lime-500);
  padding: 0.55rem 1.1rem;
  font-size: var(--text-sm);
  font-weight: 700;
  gap: var(--space-2);
}
.badge-start-icon { flex-shrink: 0; }

/* Real Sleeper injury_status flag (see loadPlayers() in sleeper.js) --
   reuses --grade-f (already this site's "bad" color, from the WINNR
   Score grade spectrum in tokens.css) rather than inventing a new red,
   so a significant injury reads as unambiguously negative using a color
   the site already assigns that meaning to. */
.badge-injured {
  color: var(--grade-f);
  border-color: var(--grade-f);
  background: transparent;
}

.startsit-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding-bottom: var(--space-16);
}

/* Persistent pulsing glow, not just the plain hover glow every other
   .btn-primary gets — this is the main thing to do once both players are
   picked, so it should pull the eye on its own instead of waiting for a
   hover. Same lime glow tokens (--lime-500-15/-35) and pulse timing as
   the "VS"/"Close call" ring above, so it reads as the same "this is the
   important thing" language already used elsewhere on this page. */
#viewMatchupDetailsBtn {
  animation: detailsBtnGlow 2.2s ease-in-out infinite;
}
@keyframes detailsBtnGlow {
  0%, 100% { box-shadow: 0 0 16px 2px var(--lime-500-15); }
  50% { box-shadow: 0 0 32px 8px var(--lime-500-35); }
}

/* ---- Share Result modal contents ----
   The modal shell itself (.modal-overlay/.modal-box/.modal-head/etc.) is
   fully reused from the Matchup Details modal above — only the
   preview/actions/status pieces specific to this modal's body live here. */
.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);
}

/* Confidence meter (the full-width score bar that used to sit between the
   compare cards and the action buttons) was removed per user feedback —
   the same rank/rating/matchup detail already lives on the cards above
   and in the Matchup Details modal, so this was a redundant repeat of
   the same two scores rather than new information. */

/* ---- Matchup Details modal ----
   No modal/popup pattern existed anywhere else on the site (checked
   base.css, draft-simulator.css, and every page's HTML first) — built
   fresh here, tokens only. The backdrop is a separate element behind the
   box (rather than one shared semi-transparent parent) so the dimming
   opacity doesn't also fade the modal content itself. */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
/* THE BUG: `display: flex` used to live directly on .modal-overlay with
   no guard. In real browsers, a normal-priority author `display` rule
   always beats the browser's own normal-priority `[hidden] { display:
   none }` UA rule, regardless of selector specificity — so the modal
   rendered as a flex box on every page load and stayed that way even
   after JS set `hidden = true`, no matter how correctly the close
   handlers ran. Scoping `display: flex` to only apply when `hidden` is
   absent removes the conflict entirely instead of relying on cascade
   precedence that (as verified below) isn't even consistent across
   CSS engines. */
.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); }

.modal-matchup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: var(--border-hair);
}
.modal-matchup-col h3 {
  font-size: var(--text-base);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: var(--space-2);
}
.modal-matchup-meta {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-600);
  margin-bottom: var(--space-3);
}
.modal-matchup-col p:not(.modal-matchup-meta) { color: var(--text-300); font-size: var(--text-sm); }

/* ---- Projected Points (modal) ----
   Was "Score Breakdown": side-by-side rank/rating/matchup bars, one row
   per factor. Now just ONE row (Projected Points), since that's the only
   real factor left -- see the "Scoring" comment at the top of
   start-sit.js. Reuses .stat-bar-track/.stat-bar-fill as-is (defined
   above) — only the row/column layout wrapping them is new. Player B's
   bar is mirrored (grows right-to-left, via `direction: rtl` on its
   track) so both bars grow toward the label in the middle, reading as a
   tug-of-war rather than two unrelated left-aligned bars. */
.modal-breakdown {
  padding: var(--space-6) 0;
  border-bottom: var(--border-hair);
}
.modal-breakdown h3 {
  font-size: var(--text-base);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: var(--space-4);
}
.modal-breakdown-header {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-600);
  margin-bottom: var(--space-3);
}
.modal-breakdown-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.modal-breakdown-row:last-child { margin-bottom: 0; }
.modal-breakdown-factor-label {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-400);
  text-align: center;
  min-width: 64px;
}
.modal-breakdown-bar-col { display: flex; flex-direction: column; gap: var(--space-1); }
.modal-breakdown-bar-col-b { align-items: flex-end; }
.modal-breakdown-bar-col-b .stat-bar-track { direction: rtl; }
.modal-breakdown-context {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--text-600);
}
.modal-breakdown-bar-col-b .modal-breakdown-context { text-align: right; }

.modal-why { padding-top: var(--space-6); }
.modal-why h3 {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lime-500);
  margin-bottom: var(--space-3);
}
.modal-why p { color: var(--text-300); font-size: var(--text-sm); }

@media (max-width: 720px) {
  /* Player A/B stack full-width on top of each other below this width --
     tried keeping them side by side all the way down to phone sizes, but
     two compare cards squeezed into half-width columns meant every stat
     bar label was fighting for space with its own bar (labels like
     "MATCHUP" getting visually clipped by the bar next to them) and the
     card started to feel like a cramped data dump instead of a clean
     comparison. Stacked full-width, each card gets to breathe again. */
  .startsit-compare { grid-template-columns: 1fr; }
  .compare-vs { margin-top: 0; text-align: center; }
  .startsit-actions { margin-top: var(--space-6); }
  .modal-matchup-grid { grid-template-columns: 1fr; }
  /* The tug-of-war layout needs real width for two mirrored bars plus a
     center label -- on a narrow screen, stack each factor's two bars
     with the label between them instead of squeezing three columns. */
  .modal-breakdown-row { grid-template-columns: 1fr; gap: var(--space-2); }
  .modal-breakdown-bar-col-b { align-items: flex-start; }
  .modal-breakdown-bar-col-b .stat-bar-track { direction: ltr; }
  .modal-breakdown-bar-col-b .modal-breakdown-context { text-align: left; }
}

/* Small extra breathing room adjustments now that cards are always
   full-width below 720px (see the stacking rule above) -- just a
   slightly smaller "VS" divider and winner pill on very small phones,
   no layout changes. */
@media (max-width: 480px) {
  .vs-text { font-size: 10px; padding: var(--space-1); }
  .startsit-winner { padding: var(--space-2) var(--space-4); margin-bottom: var(--space-4); }
  #startsitWinnerText { font-size: var(--text-base); }
  /* Scaled down from 128px -- full-width stacked cards on a phone still
     have room for a big portrait, just not quite THIS big alongside the
     rest of the card's content. */
  .compare-avatar { width: 96px; height: 96px; }
  .compare-avatar-initials { font-size: var(--text-xl); }
}