/* Focused UX corrections layered after the global design system. */

/* The rankings board should stay dense on phones/tablets. */
.three-ai-rankings-page article {
  grid-template-columns: minmax(0, 1fr) 4.75rem !important;
}

.three-ai-rankings-page article > button:first-child {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.three-ai-rankings-page button[aria-label^="Open valuation for"] {
  width: 4.35rem !important;
  height: 3.5rem !important;
  border-radius: 0.65rem !important;
}

.three-ai-rankings-page button[aria-label^="Open valuation for"] > span:nth-child(2) {
  font-size: 1rem !important;
}

.three-ai-rankings-page button[aria-label^="Open valuation for"] > span:nth-child(3) {
  margin-top: 0.2rem !important;
  font-size: 0.43rem !important;
}

@media (min-width: 640px) {
  .three-ai-rankings-page article {
    grid-template-columns: minmax(0, 1fr) 5.25rem !important;
  }

  .three-ai-rankings-page button[aria-label^="Open valuation for"] {
    width: 4.75rem !important;
  }
}

/* Desktop gets a stronger readability lift while mobile remains unchanged. */
@media (min-width: 1024px) {
  .three-ai-rankings-page article h2 {
    font-size: 1.3125rem !important;
    line-height: 1.15 !important;
  }

  .three-ai-rankings-page article [class*="grid-cols-4"] > div > p:first-child,
  .three-ai-rankings-page article [class*="grid-cols-2"] > div > p:first-child {
    font-size: 0.6875rem !important;
  }

  .three-ai-rankings-page article [class*="grid-cols-4"] > div > p:last-child,
  .three-ai-rankings-page article [class*="grid-cols-2"] > div > p:last-child {
    font-size: 1rem !important;
    line-height: 1.15 !important;
  }

  /* League Blueprint is intentionally denser on mobile; desktops should read like a dashboard. */
  .team-blueprint-page .text-\[9px\] {
    font-size: 0.6875rem !important;
    line-height: 0.9rem !important;
  }

  .team-blueprint-page .text-\[10px\] {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
  }

  .team-blueprint-page .text-\[11px\] {
    font-size: 0.8125rem !important;
    line-height: 1.05rem !important;
  }

  .team-blueprint-page .text-xs {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
  }

  .team-blueprint-page .text-sm {
    font-size: 1rem !important;
    line-height: 1.4rem !important;
  }
}