/* The LEAGUES lens — only what the ORDER adds (ch. 16 E-13, F-35).
 *
 * Linked AFTER dashboard.css, beside dashboard-deck.css and
 * dashboard-hero.css (src/views/dashboard/page.js), on the same terms: these
 * rules share a specificity with `.league-score-card` and `.league-score-header`
 * there and win by source order.
 *
 * What is NOT here: `.scores-grid`, `.league-score-card`, `.league-name` and
 * `.league-name-text` stay in styles.css. Moving them is a refactor and gets
 * its own PR.
 */

/* The identity column. min-width: 0 is load-bearing — it is what lets
   .league-name-text's ellipsis fire instead of the name overflowing its box
   and painting over the mover pair beside it. */
.league-id {
  flex: 1 1 auto;
  min-width: 0;
}

/* A league is named by its league name WITH the user's own team beneath it,
   unconditionally and on a second line (E-13): two of the owner's three
   leagues are both called "Fantasy League", so the name alone cannot tell
   them apart. It never joins the first line — .league-name-text's one-line
   guarantee is what keeps the grid's rows aligned. */
.league-team {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted, #9aa4b2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The card header, moved here whole from styles.css because this is the pass
   that changes it: it carries the rank numeral and a two-line identity now, so
   it TOPS-aligns (the numeral sits against the league name's line, not the
   middle of the block) and it has a gap of its own. Nothing else in the app
   renders this class. `justify-content` goes with the old single-child layout;
   .league-id's `flex: 1 1 auto` is what fills the row now. */
.league-score-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}

/* The position, as a numeral. aria-hidden in the markup: the mover labels and
   the list order already speak it. */
.league-rank {
  flex: 0 0 auto;
  padding: 1px 6px;
  border: 1px solid rgba(139, 124, 246, 0.45);
  border-radius: 6px;
  background: rgba(139, 124, 246, 0.18);
  color: #c4b5fd;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* The FALLBACK order is never dressed as the user's choice (E-13): until they
   have set one, the numeral is muted and unfilled, and the hint says so. */
.league-rank.unset {
  border-color: transparent;
  background: none;
  color: var(--muted, #9aa4b2);
  opacity: 0.55;
}

/* The mover pair. ONE seat at every width: a foot row under the differential.
   It had a second — the header's right edge from 1024 — and that breakpoint is
   gone (ch. 16 E-14). The card does not get wider at 1024: .scores-grid fills
   with 280 px columns, so a card is ~295 px there against ~360 px at 768, and
   the header seat left the league name ~76 px against ~171 px on a phone. One
   layout at four sizes; the numeral leads the card, the movers close it —
   right-aligned, content-width, the shape of Final Drive's `.lg-move`
   (ch. 16 E-21): the once-a-season control is not the widest thing on a card
   whose job is this week's matchup. */
.league-order {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* 44 px is the product's control floor (ch. 16 §2, principle 3). The drawing's
   34 px movers in the card head were a drawing's convenience. With
   `flex: 0 0 auto` the two minimums ARE the size: 44 x 44 at every width. */
.league-move {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border, #2a3348);
  border-radius: 8px;
  background: var(--surface-2, #171e2e);
  color: var(--text, #e6edf3);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.league-move:hover:not([disabled]) {
  border-color: rgba(139, 124, 246, 0.6);
  color: #c4b5fd;
}

/* The first card's ▲ and the last card's ▼ can do nothing, so they say so —
   the same behaviour Final Drive's rank rows already have. */
.league-move[disabled] {
  opacity: 0.35;
  cursor: default;
}

.league-move:focus-visible {
  outline: 2px solid #8b7cf6;
  outline-offset: 2px;
}

/* What the order is FOR. The lens is the only place in the product that says
   it, so it says it in full rather than in a tooltip. */
.leagues-hint {
  margin: 0 2px 12px;
  color: var(--muted, #9aa4b2);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.5;
}

/* The live region. Always in the DOM and empty until there is something to
   say — an aria-live region has to exist before text is put in it. */
.leagues-status {
  display: block;
  margin-top: 6px;
  color: #c4b5fd;
  font-weight: 600;
}

.leagues-status:empty {
  display: none;
}

.leagues-status.err {
  color: #ef4444;
}

/* A real control, not a word: the save failed and this is the way to try it
   again, so it clears the 44 px floor like every other control. */
/* `display: flex` + `width: fit-content` so it is a block-level box that is
   only as wide as its word: at 320 the sentence wraps to three lines and an
   inline button landed in the middle of one of them. */
.leagues-retry {
  display: flex;
  width: fit-content;
  align-items: center;
  min-height: 44px;
  margin-top: 8px;
  padding: 0 14px;
  border: 1px solid var(--border, #2a3348);
  border-radius: 8px;
  background: var(--surface-2, #171e2e);
  color: var(--text, #e6edf3);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.leagues-retry:focus-visible {
  outline: 2px solid #8b7cf6;
  outline-offset: 2px;
}

/* A week with no matchups is a STATE, and a blank grid is not one. */
.leagues-empty {
  margin: 0 2px;
  color: var(--muted, #9aa4b2);
  font-size: 0.85rem;
}