/* 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;
  }
}

/* Dynasty Spec brand logo presentation.
 *
 * The approved logo is circular. The visual logo now uses a versioned URL so
 * stale immutable browser/CDN caches cannot keep serving an older corrupted
 * raster after the asset bytes change.
 */

:where(div, span):has(> img[alt="Dynasty Spec"]) {
  border-radius: 9999px !important;
  background-image: url("/Brand/Icon-20260830-clean.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

img[alt="Dynasty Spec"] {
  opacity: 0 !important;
  border-radius: 9999px !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  image-rendering: auto !important;
}

:where(div, span):has(> img[alt="Dynasty Spec Background"]) {
  background-image: url("/Brand/Icon-20260830-clean.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: min(760px, 90vw) auto !important;
  opacity: 0.16 !important;
}

img[alt="Dynasty Spec Background"] {
  opacity: 0 !important;
}