/* league-row.css — the stacked league tile, shared by the /leagues hub row
 * (.lgrow) and the dashboard "YOUR LEAGUES" row (.tw-row) —
 * LEAGUE-TILE-STACK-1010, D-LEAGUE-TILE-STACK-1010 (supersedes the "exactly
 * ONE datum" clause of D-BROCK-DIRECT-0926 item 1). Markup comes from
 * assets/league-row.js (tileBodyHtml); LOADED BY both / and /leagues.
 *
 * Pat, live on a phone: "the layout is getting cut off so you're not able to
 * see the full score". The old datum slot was capped at 26vw (~101px at
 * 390px) so "133.1-105.2" + live dot could not fit. Nothing in this tile is
 * nowrap+ellipsis any more: the name clamps to 2 lines, the matchup line is
 * flex-wrap so a long opponent drops to its own line, the insight line wraps.
 *
 * Phone (< 900px): 3 stacked lines -- head / matchup / insight.
 * Wide tile (>= 600px wide, i.e. /leagues on desktop): a 2-line row -- name | score+opponent | pill, with the
 * insight line beneath. Row conventions follow docs/Features/EDGE_TO_EDGE_0926.md
 * (gutter tokens, hairline dividers, no outer box per row, >=44px targets).
 * Legibility floor: nothing below 16px (D-CI-LOCAL-0818).
 */
.lgrow-wrap {
  position: relative;
  min-width: 0;
  display: flex;
  padding-right: 40px; /* clears the overflow "..." button parked below */
}
.lgrow-wrap:last-child .lgrow { border-bottom: 0; }

.lgrow {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px var(--gutter-r, 16px) 14px var(--gutter-l, 16px);
  min-height: 60px;
  border-radius: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hairline, rgba(255, 255, 255, .08));
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease;
}
.lgrow:hover, .lgrow:focus-visible {
  background: rgba(255, 255, 255, .04);
}
.lgrow:focus-visible {
  outline: 2px solid var(--red-bright, #FF3B30);
  outline-offset: -2px;
}

.lgrow-avatar {
  flex: 0 0 40px;
  margin-top: 2px;
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: var(--sns-radius-lg, 8px);
  background: var(--sns-grad-team-logo-fb, linear-gradient(135deg, #2a0a0a, #0a0a0a));
  border: 1px solid rgba(255, 255, 255, .14);
}

.lt {
  container-type: inline-size;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
.lt-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lt-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.lt-name {
  /* min-width 7.5em (~8 mono chars): the name keeps real room, and when the
   * pill can't share the line without squeezing the name below that, the
   * head WRAPS and the pill drops to its own line -- the name never
   * collapses to a few characters (LEAGUE-NAME-TRUNC-0926 lesson). */
  /* basis auto (= one-line width): if the name can't fit on ONE line beside
   * the pill, the head wraps and the pill drops under it, so a long name
   * always gets the FULL width (two full lines), never a squeezed clamp. */
  flex: 1 1 auto;
  min-width: 7.5em;
  font-family: var(--f-mono, monospace);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--white-bright, #F5F5F5);
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.lt-pill {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 10px;
  border-radius: 999px;
  border: 1px solid var(--hairline-2, rgba(255, 255, 255, .12));
  font-family: var(--f-mono, monospace);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-muted, #C2C2C2);
}
.lt-pill--live, .lt-pill--win { color: var(--sns-trend-up, #3ddc73); border-color: currentColor; }
.lt-pill--loss { color: var(--sns-trend-down, #FF3B30); border-color: currentColor; }
.lt-pill--muted { color: var(--text-faint, #9CA0A8); }

.lt-match {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 2px;
  min-width: 0;
}
.lt-scores {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-family: var(--f-mono, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--white-bright, #F5F5F5);
  white-space: nowrap;
}
/* Neutral by default -- MATCHUP-STATES-0923-R4: only a genuinely live or
 * final score earns lead/trail colour; a pre-kickoff projection never does. */
.lt-score--lead { color: var(--sns-trend-up, #3ddc73); }
.lt-score--trail { color: var(--sns-trend-down, #FF3B30); }
.lt-score-sep { color: var(--text-faint, #9CA0A8); font-weight: 400; }
.lt-vs {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-muted, #C2C2C2);
  overflow-wrap: anywhere;
}
.lt-proj {
  flex: 0 0 auto;
  font-family: var(--f-mono, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted, #C2C2C2);
  white-space: nowrap;
}
.lt-proj-k { color: var(--text-faint, #9CA0A8); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }

/* Row 3. One-line min-height reserves the line the progressive insight parts
 * (rank / still playing / top scorer) patch into, so they never shift layout
 * beyond what first paint already reserved. Wraps freely, never ellipsised. */
.lt-insight {
  min-height: 1.4em;
  font-size: 16px;
  line-height: 1.4;
  color: var(--text-muted, #C2C2C2);
  overflow-wrap: anywhere;
}

.lt-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sns-trend-up, #3ddc73);
  box-shadow: 0 0 6px var(--sns-trend-up, #3ddc73);
  animation: lt-pulse 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .lt-live-dot { animation: none; } }
@keyframes lt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.lt-chevron {
  flex: 0 0 auto;
  align-self: center;
  font-size: 22px;
  line-height: 1;
  color: var(--text-faint, #9CA0A8);
}

/* Wide tile -> 2-line row. Container query on the TILE's own width, not the
 * viewport: at a 1440px viewport the dashboard panel is only ~570px wide (it
 * shares the row with AP TOP 25) and a 3-column grid there squeezes the name
 * to 2 short lines, while the /leagues row is ~720px and has the room. */
@container (min-width: 600px) {
  .lt-body {
    display: grid;
    grid-template-columns: minmax(240px, 1.15fr) minmax(0, 1fr) auto;
    grid-template-areas: "name match pill" "insight insight insight";
    column-gap: 20px;
    row-gap: 2px;
    align-items: center;
  }
  .lt-head { display: contents; }
  .lt-name { grid-area: name; -webkit-line-clamp: 3; line-clamp: 3; }
  .lt-pill { grid-area: pill; justify-self: end; }
  .lt-match { grid-area: match; justify-content: flex-end; }
  .lt-vs { flex: 0 1 auto; text-align: right; }
  .lt-insight { grid-area: insight; }
}


/* Overflow "..." menu — commissioner / invite / archive / leave. Sits
 * OUTSIDE the row's <a> (same "trigger outside the link" pattern the v5.0
 * card menu it replaces already used) so opening it never navigates. Reuses
 * the EXACT .lhub-card-menu*/.lhub-card-archive/.lhub-card-leave/
 * .lhub-card-invite classes + wiring (leagues/script.js wireCardMenus/
 * onArchive/onLeave/onCopyInvite) — the row markup carries both class names
 * so none of that JS needed to change. */
.lgrow-menu-btn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: var(--sns-touch-target, 44px);
  height: var(--sns-touch-target, 44px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--text-faint, #5E626E);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--sns-radius-md, 6px);
}
.lgrow-menu-btn:hover, .lgrow-menu-btn:focus-visible {
  color: var(--white-bright, #F5F5F5);
  background: rgba(255, 255, 255, .06);
}
.lgrow-menu {
  position: absolute;
  top: 62px;
  right: 4px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: 6px;
  background: #16161a;
  border: 1px solid var(--hairline-2, rgba(255, 255, 255, .12));
  border-radius: var(--sns-radius-lg, 10px);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .6);
}
.lgrow-menu[hidden] { display: none; }