/* Rankings presentation only. The active native navigation scopes every rule;
   client-side navigation removes the effect without scripts or route hooks. */
body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) {
  --rank-base: #f3f5f8;
  --rank-sheen-end: rgba(255,255,255,.025);
  --rank-glass: rgba(255, 255, 255, .06);
  --rank-glass-top: rgba(255, 255, 255, .14);
  --rank-edge: rgba(255, 255, 255, .78);
  --rank-divider: rgba(0, 0, 0, .065);
  --rank-shadow: 0 18px 55px rgba(47,51,92,.085), inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(255,255,255,.2);
  --rank-accent: #27272a;
  --rank-selected: rgba(255, 255, 255, .8);
  --rank-hover: rgba(255, 255, 255, .42);
}
.dark body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) {
  --rank-base: #171b22;
  --rank-sheen-end: rgba(255,255,255,.008);
  --rank-glass: rgba(23, 27, 34, .16);
  --rank-glass-top: rgba(201, 201, 255, .07);
  --rank-edge: rgba(210, 210, 255, .22);
  --rank-divider: rgba(255, 255, 255, .07);
  --rank-shadow: 0 18px 55px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(255,255,255,.035);
  --rank-accent: #f4f4f5;
  --rank-selected: rgba(255, 255, 255, .11);
  --rank-hover: rgba(255, 255, 255, .045);
}

body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) #root > .bg-background {
  background: var(--rank-base);
}
body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) #root > .bg-background > .relative::before {
  content: none;
}
body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) #root > .bg-background > .relative > [aria-hidden="true"][style*="radial-gradient"] {
  display: none;
}

body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) #root > .bg-background > .relative .bg-card,
body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) [role="tablist"] {
  background: linear-gradient(135deg, var(--rank-glass-top), var(--rank-sheen-end) 68%), var(--rank-glass);
  border: 1px solid var(--rank-edge);
  box-shadow: var(--rank-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}
body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) #root > .bg-background > .relative .bg-card {
  border-radius: 22px;
}
body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) #root > .bg-background > .relative .bg-card :is(.border-t, .border-b) {
  border-color: var(--rank-divider);
}
body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) [role="tablist"] {
  width: fit-content;
  max-width: 100%;
  gap: 4px;
  padding: 5px;
  border-radius: 16px;
}
body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) [role="tab"] {
  margin-bottom: 0;
  padding: 9px 20px;
  border-radius: 11px;
  transition: background-color .18s ease, color .18s ease;
}
body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) [role="tab"][aria-selected="true"] {
  color: var(--rank-accent);
  background: var(--rank-selected);
  box-shadow: inset 0 0 0 1px var(--rank-divider);
}
body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) [role="tab"] > span[aria-hidden="true"] {
  display: none;
}
body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) [role="tab"]:hover {
  background: var(--rank-hover);
}
body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) #root > .bg-background > .relative .bg-card li {
  background: transparent;
  transition: none;
}

@media (max-width: 639px) {
  body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) #root > .bg-background > .relative .bg-card {
    border-radius: 18px;
  }
  body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) [role="tab"] {
    padding: 9px 16px;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) {
    --rank-glass: rgba(255, 255, 255, .92);
  }
  .dark body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) {
    --rank-glass: rgba(32, 32, 35, .94);
  }
}

/* Reuse the catalog's original artwork and viewport-anchored background.
   Paint it below the content so the cards' backdrop-filter blurs the particles,
   while chart labels, plots and controls remain sharp. */
body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) #root > .bg-background {
  background: radial-gradient(ellipse at 75% 12%, rgba(99,102,241,.035), transparent 56%), var(--rank-base);
  background-attachment: fixed;
}
.dark body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) #root > .bg-background {
  background: radial-gradient(ellipse at 75% 12%, rgba(99,102,241,.045), transparent 56%), var(--rank-base);
  background-attachment: fixed;
}
body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) #root > .bg-background::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: url('/brand/catalog-particles-light.svg?v=7') center top / cover no-repeat;
  opacity: 1;
}
.dark body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) #root > .bg-background::before {
  background-image: url('/brand/catalog-particles-dark.svg?v=7');
}
@media (max-width: 767.98px) {
  body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) #root > .bg-background::before {
    background-position: 66% top;
    opacity: .72;
  }
  body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) #root > .bg-background > .relative .bg-card,
  body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) [role="tablist"] {
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    backdrop-filter: blur(18px) saturate(135%);
  }
}
@media (prefers-reduced-motion: reduce) {
  body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) #root > .bg-background::before {
    background-image: url('/brand/catalog-particles-light-still.svg?v=7');
  }
  .dark body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) #root > .bg-background::before {
    background-image: url('/brand/catalog-particles-dark-still.svg?v=7');
  }
  body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) :is([role="tab"], .bg-card li) {
    transition: none;
  }
}
/* Match the native About card: a transparent pane, directional reflection,
   bright upper rim and soft lower edge. Content sits above the reflection. */
body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) #root > .bg-background > .relative .bg-card,
body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) [role="tablist"] {
  position: relative;
}
body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) #root > .bg-background > .relative .bg-card::before,
body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) [role="tablist"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(150deg,rgba(255,255,255,.1),transparent 40%,rgba(115,112,230,.025));
}
.dark body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) #root > .bg-background > .relative .bg-card::before,
.dark body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) [role="tablist"]::before {
  opacity: .35;
}
body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) #root > .bg-background > .relative .bg-card > *,
body:has(header.pointer-events-none a[href="/rankings"][aria-current="page"]) [role="tablist"] > * {
  position: relative;
  z-index: 1;
}