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

/*
 * Light-mode compatibility layer for legacy and feature-specific dark utilities.
 * UI-only: this file intentionally changes presentation only.
 */

html.light [class*="bg-[#020814]"],
html.light [class*="bg-[#020b16]"],
html.light [class*="bg-[#020b18]"],
html.light [class*="bg-[#040e1a]"],
html.light [class*="bg-[#04101f]"],
html.light [class*="bg-[#041020]"],
html.light [class*="bg-[#050B15]"],
html.light [class*="bg-[#061426]"],
html.light [class*="bg-[#0b1220]"] {
  background-color: rgb(var(--bg)) !important;
}

html.light [class*="bg-[#031224]"],
html.light [class*="bg-[#04111f]"],
html.light [class*="bg-[#06182c]"],
html.light [class*="bg-[#071426]"],
html.light [class*="bg-[#071729]"],
html.light [class*="bg-[#071a30]"],
html.light [class*="bg-[#07182D]"],
html.light [class*="bg-[#081525]"],
html.light [class*="bg-[#08182a]"],
html.light [class*="bg-[#08182b]"],
html.light [class*="bg-[#08182d]"],
html.light [class*="bg-[#0A1221]"],
html.light [class*="bg-[#0a1628]"],
html.light [class*="bg-[#0B162A]"],
html.light [class*="bg-[#0B1F3A]"],
html.light [class*="bg-[#0b1f3a]"],
html.light [class*="bg-[#0f172a]"],
html.light [class*="bg-[#0f2340]"],
html.light [class*="bg-[#111827]"] {
  background-color: rgb(var(--card)) !important;
}

html.light [class*="bg-[#081c33]"],
html.light [class*="bg-[#0a1a2e]"],
html.light [class*="bg-[#0a2039]"],
html.light [class*="bg-[#071c30]"],
html.light [class*="bg-[#0b1f38]"],
html.light [class*="bg-[#0d2440]"],
html.light [class*="bg-[#0F1A2E]"],
html.light [class*="bg-[#102744]"],
html.light [class*="bg-[#10294a]"],
html.light [class*="bg-[#102b4f]"],
html.light [class*="bg-[#102B4F]"],
html.light [class*="bg-[#102B4C]"],
html.light [class*="bg-[#1f2937]"] {
  background-color: rgb(var(--card-hover)) !important;
}

/* Newer feature headers use arbitrary navy gradients rather than bg-color utilities. */
html.light [class*="bg-[linear-gradient"][class*="#040e1a"],
html.light [class*="bg-[linear-gradient"][class*="#061426"],
html.light [class*="bg-[linear-gradient"][class*="#071426"],
html.light [class*="bg-[linear-gradient"][class*="#071a30"],
html.light [class*="bg-[linear-gradient"][class*="#0B1F3A"],
html.light [class*="bg-[linear-gradient"][class*="#0b1f3a"],
html.light [class*="bg-[linear-gradient"][class*="#0b1f38"],
html.light [class*="bg-[linear-gradient"][class*="#102744"],
html.light [class*="bg-[linear-gradient"][class*="#102B4F"],
html.light [class*="bg-[linear-gradient"][class*="rgba(11,31,58"],
html.light [class*="bg-[linear-gradient"][class*="rgba(7,26,48"],
html.light [class*="bg-[linear-gradient"][class*="rgba(6,20,38"],
html.light [class*="bg-[linear-gradient"][class*="rgba(4,16,31"] {
  background-image: linear-gradient(135deg, rgb(var(--card)) 0%, rgb(var(--card-hover)) 100%) !important;
  background-color: rgb(var(--card)) !important;
}

/* Dark radial and mixed radial/linear feature panels should not leave navy islands. */
html.light [class*="bg-[radial-gradient"][class*="#040e1a"],
html.light [class*="bg-[radial-gradient"][class*="#071426"],
html.light [class*="bg-[radial-gradient"][class*="#061426"],
html.light [class*="bg-[radial-gradient"][class*="#0b1f3a"] {
  background-image: none !important;
  background-color: rgb(var(--card-hover)) !important;
}

/* Small inset cards used by Waiver Wire and Start/Sit. Keep modal backdrops untouched. */
html.light [class~="bg-black/15"],
html.light [class~="bg-black/20"],
html.light [class~="bg-black/25"],
html.light [class~="bg-black/30"] {
  background-color: rgb(var(--card-hover)) !important;
}

/*
 * Dark-origin panels use translucent white controls in dark mode. Once the panel
 * becomes white, give those controls a visible light-gray surface and border.
 */
html.light [class*="bg-[#061426]"] [class*="bg-white/"],
html.light [class*="bg-[#071426]"] [class*="bg-white/"],
html.light [class*="bg-[#071729]"] [class*="bg-white/"],
html.light [class*="bg-[#081525]"] [class*="bg-white/"],
html.light [class*="bg-[#0b1f38]"] [class*="bg-white/"],
html.light [class*="bg-[linear-gradient"] [class*="bg-white/"] {
  background-color: rgb(var(--card-hover)) !important;
}

html.light [class*="bg-[#061426]"] button.bg-white,
html.light [class*="bg-[#071426]"] button.bg-white,
html.light [class*="bg-[#071729]"] button.bg-white,
html.light [class*="bg-[#081525]"] button.bg-white,
html.light [class*="bg-[#0b1f38]"] button.bg-white,
html.light [class*="bg-[linear-gradient"] button.bg-white {
  background-color: rgb(var(--card-hover)) !important;
  border-color: rgb(var(--border)) !important;
  box-shadow: inset 0 0 0 1px rgb(var(--border));
}

/* Extend gradient-token bridging for weekly rankings and newer feature cards. */
html.light [class*="from-[#040e1a]"],
html.light [class*="from-[#071426]"],
html.light [class*="from-[#08182a]"],
html.light [class*="from-[#0a1628]"] {
  --tw-gradient-from: rgb(var(--card)) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(var(--card) / 0) var(--tw-gradient-to-position) !important;
}

html.light [class*="from-[#0a1a2e]"],
html.light [class*="from-[#0b1f38]"],
html.light [class*="from-[#0b1f3a]"],
html.light [class*="to-[#102744]"],
html.light [class*="to-[#102B4F]"] {
  --tw-gradient-from: rgb(var(--card-hover)) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(var(--card-hover)) var(--tw-gradient-to-position) !important;
}

/* Bright dark-mode gold needs a deeper foreground against white surfaces. */
html.light [class*="text-[#F6D66B]"],
html.light [class*="text-[#F4D978]"] {
  color: rgb(138 107 0) !important;
}

/* Semantic status colors need darker foregrounds against white cards. */
html.light .text-orange-200,
html.light .text-orange-300 {
  color: rgb(194 65 12) !important;
}

html.light .text-amber-200,
html.light .text-amber-300,
html.light .text-yellow-300 {
  color: rgb(161 98 7) !important;
}

html.light .text-emerald-200,
html.light .text-emerald-300,
html.light .text-green-300 {
  color: rgb(4 120 87) !important;
}

html.light .text-sky-200,
html.light .text-sky-300,
html.light .text-cyan-200,
html.light .text-cyan-300 {
  color: rgb(14 116 144) !important;
}

html.light .text-red-300 {
  color: rgb(185 28 28) !important;
}

/* Swap the homepage watermark image itself in light mode. */
html.light img[alt="Dynasty Spec Background"] {
  content: url("/Brand/Icon-light.webp") !important;
}

/* Light mode should use a light drawer shadow instead of a heavy dark slab edge. */
html.light #mobile-navigation-drawer {
  box-shadow: -24px 0 70px rgb(15 23 42 / 0.16) !important;
}