/* Public desktop ranking layout. The existing renderer owns
   grades, medals, counts, routes, filtering and the compact sticky rail. */
@media (min-width: 1024px) {
  html[data-desktop-style="v1"] body.ranking-open #ranking {
    --ranking-ink: var(--otx-ds-ink, #17243a);
    --ranking-muted: var(--otx-ds-muted, #4f6278);
    --ranking-on-dark: var(--otx-ds-on-dark, #edf3fc);
    --ranking-muted-on-dark: var(--otx-ds-muted-on-dark, #bac8d9);
    --ranking-line: var(--otx-ds-line, rgba(69, 88, 120, .24));
    --ranking-dark-line: var(--otx-ds-dark-line, rgba(186, 200, 217, .2));
    padding: 112px 0 64px;
    font-family: var(--font, system-ui, sans-serif);
  }

  html[data-desktop-style="v1"] #ranking > .wrap {
    width: min(var(--otx-ds-page-width, 1280px), calc(100% - 64px));
    max-width: var(--otx-ds-page-width, 1280px);
    margin-inline: auto;
  }

  html[data-desktop-style="v1"] #ranking .section-head {
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 32px;
  }

  html[data-desktop-style="v1"] #ranking .section-head h2 {
    margin: 0 0 16px;
    color: var(--ranking-on-dark);
    font-size: 36px;
    line-height: 1.2;
    letter-spacing: -.025em;
    text-shadow: none;
  }

  html[data-desktop-style="v1"] #ranking .section-head .lead {
    max-width: 800px;
    margin: 0;
    color: var(--ranking-muted-on-dark);
    font-size: 15px;
    line-height: 1.65;
  }

  html[data-desktop-style="v1"] #ranking .section-head .chip {
    border-color: var(--ranking-dark-line);
    border-radius: var(--otx-ds-control-radius, 10px);
    background: transparent;
    color: var(--ranking-muted-on-dark);
    box-shadow: none;
    font-size: 12px;
    line-height: 1.5;
  }

  html[data-desktop-style="v1"] #ranking :is(.ranking-shell, .ranking-podium-shell) {
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  html[data-desktop-style="v1"] #ranking .ranking-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 1.35fr) repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 24px;
    padding: 24px;
    border: 1px solid var(--ranking-line);
    border-radius: var(--otx-ds-radius, 16px);
    background: var(--otx-ds-surface, linear-gradient(120deg, #eceaf7, #d8e9f2));
    color: var(--ranking-ink);
    box-shadow: none;
  }

  html[data-desktop-style="v1"] #ranking .ranking-toolbar :is(label, .ranking-search) {
    display: grid;
    min-width: 0;
    gap: 8px;
  }

  html[data-desktop-style="v1"] #ranking .ranking-toolbar :is(label, .ranking-search) > span {
    color: var(--ranking-muted);
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0;
  }

  html[data-desktop-style="v1"] #ranking .ranking-toolbar :is(input, select) {
    width: 100%;
    min-width: 0;
    height: 44px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #aeb9cb;
    border-radius: var(--otx-ds-control-radius, 10px);
    background: rgba(255, 255, 255, .62);
    color: var(--ranking-ink);
    box-shadow: none;
    font: 400 14px/1.5 var(--font, system-ui, sans-serif);
    color-scheme: light;
  }

  html[data-desktop-style="v1"] #ranking .ranking-toolbar input::placeholder {
    color: var(--ranking-muted);
    opacity: 1;
  }

  html[data-desktop-style="v1"] #ranking .ranking-toolbar select option {
    background: var(--otx-ds-surface-solid, #e4eaf3);
    color: var(--ranking-ink);
  }

  html[data-desktop-style="v1"] #ranking .ranking-toolbar :is(input, select):focus {
    border-color: #766aad;
    background: #f4f5fa;
    box-shadow: none;
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-rail:not(.rg-is-compact) {
    padding: 18px 28px 22px;
    border: 1px solid #b8c8e340;
    border-radius: 20px;
    background: var(--vi-glass);
    box-shadow: inset 0 1px #d9dcf019, 0 12px 26px #061a302b;
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-rail-caption {
    gap: 16px;
    color: var(--ranking-muted-on-dark);
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0;
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-rail:not(.rg-is-compact) .rg-tabs {
    gap: 16px;
    margin-top: 16px;
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-tab {
    min-height: 44px;
    border-radius: 12px;
    border-color: #aebfc91a;
    background: linear-gradient(155deg,#97abb608,#121f3488);
    box-shadow: inset 0 1px #dcdbec05;
    font-family: var(--font, system-ui, sans-serif);
    transition: background-color .15s ease, border-color .15s ease;
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-tab[aria-selected="true"] {
    border-color: #a09ccc;
    background: var(--otx-ds-surface, linear-gradient(120deg, #eceaf7, #d8e9f2));
    box-shadow: inset 0 1px #e0dcf8b3, 0 10px 30px #091f3b44, 0 0 0 1px #badcf7;
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-tab:hover {
    border-color: #aaa7ce;
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-tab-count {
    color: var(--ranking-muted-on-dark);
    font: 400 12px/1.5 var(--font, system-ui, sans-serif);
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-tab-count strong {
    font: 600 18px/1.5 var(--font, system-ui, sans-serif);
    font-variant-numeric: tabular-nums;
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-tab[aria-selected="true"] .rg-tab-count {
    color: var(--ranking-ink);
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-rail.rg-is-compact {
    border-color: var(--ranking-dark-line);
    background: var(--otx-ds-page-raised, #18243b);
    box-shadow: 0 8px 24px rgba(5, 14, 30, .16);
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-is-compact .rg-tab {
    border-radius: var(--otx-ds-control-radius, 10px);
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-current {
    padding: 32px 0 24px;
    gap: 24px;
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-current h3 {
    margin: 8px 0 0;
    color: var(--ranking-on-dark);
    font: 600 24px/1.4 var(--font, system-ui, sans-serif);
  }

  html[data-desktop-style="v1"] #rankingPodium :is(.rg-eyebrow, .rg-current h3 > span) {
    color: var(--ranking-muted-on-dark);
    font: 400 12px/1.5 var(--font, system-ui, sans-serif);
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-status {
    border-color: var(--ranking-dark-line);
    border-radius: var(--otx-ds-control-radius, 10px);
    color: var(--ranking-muted-on-dark);
    font: 400 12px/1.5 var(--font, system-ui, sans-serif);
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-grid {
    gap: 24px;
    animation: none;
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--ranking-line);
    border-radius: var(--otx-ds-radius, 16px);
    background: var(--otx-ds-surface, linear-gradient(120deg, #eceaf7, #d8e9f2));
    color: var(--ranking-ink);
    box-shadow: none;
    transition: border-color .15s ease;
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-card::before {
    display: none;
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-card:hover {
    border-color: #8d9db6;
    transform: none;
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-card-top {
    gap: 12px;
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-monogram {
    color: var(--ranking-ink);
    font: 600 14px/1.5 var(--font, system-ui, sans-serif);
  }

  /* Original dark/colored logo artwork is readable on the new light card.
     The production dark-card variant inverts this same asset to white. */
  html[data-desktop-style="v1"] #rankingPodium .rg-card .rg-monogram[data-logo-surface="light"][data-logo-kind="logo"] img {
    filter: none;
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-card h4 {
    color: var(--ranking-ink);
    font: 600 18px/1.5 var(--font, system-ui, sans-serif);
    letter-spacing: 0;
  }

  /* Keep the released bright overall-grade badge and its color treatment. */
  html[data-desktop-style="v1"] #rankingPodium .rg-card-grade {
    font: 600 12px/1.5 var(--font, system-ui, sans-serif);
    letter-spacing: 0;
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-card > p {
    flex: 1;
    min-height: 0;
    margin: 16px 0 24px;
    color: var(--ranking-muted);
    font-size: 15px;
    line-height: 1.65;
    overflow-wrap: anywhere;
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-metrics {
    gap: 12px;
    margin: 0;
    padding: 16px 0;
    border-color: var(--ranking-line);
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-metrics > div + div::before {
    display: none;
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-metrics dt {
    min-height: 3em;
    color: var(--ranking-muted);
    font: 400 12px/1.5 var(--font, system-ui, sans-serif);
    letter-spacing: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-metrics dd {
    margin: 8px 0 0;
    color: var(--ranking-ink);
    font: 600 24px/1.3 var(--font, system-ui, sans-serif);
    font-variant-numeric: tabular-nums;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-metrics dd small {
    margin-left: 4px;
    color: var(--ranking-muted);
    font: 400 12px/1.5 var(--font, system-ui, sans-serif);
  }

  /* Missing modules render a complete localized status instead of grade+unit. */
  html[data-desktop-style="v1"] #rankingPodium .rg-metrics dd:not(:has(small)) {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-card-foot {
    gap: 16px;
    margin-top: 24px;
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-card-foot > span {
    color: var(--ranking-muted);
    font-size: 12px;
    line-height: 1.5;
  }

  html[data-desktop-style="v1"] #rankingPodium :is(.rg-card-foot a, .rg-card-foot button, .rg-empty > a, .rg-pagination button) {
    display: inline-flex;
    min-height: 44px;
    height: auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid #aeb9cb;
    border-radius: var(--otx-ds-control-radius, 10px);
    background: rgba(255, 255, 255, .5);
    color: var(--ranking-ink);
    font: 600 14px/1.5 var(--font, system-ui, sans-serif);
    text-decoration: none;
    white-space: normal;
    cursor: pointer;
  }

  html[data-desktop-style="v1"] #rankingPodium :is(.rg-card-foot a, .rg-card-foot button, .rg-empty > a, .rg-pagination button):hover {
    border-color: #7183a1;
    background: #f2f4f9;
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-pagination {
    gap: 24px;
    padding: 24px 0 0;
    color: var(--ranking-muted-on-dark);
    font: 400 12px/1.5 var(--font, system-ui, sans-serif);
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-pagination nav {
    gap: 12px;
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-empty {
    min-height: 200px;
    padding: 32px 24px;
    border: 1px solid var(--ranking-line);
    border-radius: var(--otx-ds-radius, 16px);
    background: var(--otx-ds-surface, linear-gradient(120deg, #eceaf7, #d8e9f2));
    color: var(--ranking-muted);
    font: 400 15px/1.65 var(--font, system-ui, sans-serif);
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-empty strong {
    color: var(--ranking-ink);
    font-size: 18px;
  }

  html[data-desktop-style="v1"] #rankingPodium .rg-empty p {
    font-size: 15px;
    line-height: 1.65;
  }

  html[data-desktop-style="v1"] #ranking .ranking-toolbar :is(input, select):focus-visible,
  html[data-desktop-style="v1"] #rankingPodium :is(button, a, #rg-panel):focus-visible {
    outline: 3px solid #766aad;
    outline-offset: 3px;
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  html[data-desktop-style="v1"] #rankingPodium :is(.rg-tab, .rg-card, .rg-cursor, .rg-medal) {
    transition: none;
  }
}

/* Delegate shared heading/control fields locally from the existing theme. */
@layer otxControlTheme {
  #rankingPodium .rg-pagination button {
    min-height:44px !important;padding:10px 16px !important;border-radius:10px !important;
    font:600 14px/1.5 var(--font,system-ui,sans-serif) !important;
    background:var(--otx-ds-surface) !important;color:#17243a !important;border-color:#b8c3dc !important;
  }
  #rankingPodium .rg-pagination button:disabled {
    opacity:1 !important;cursor:default !important;color:#526580 !important;
    background:linear-gradient(120deg,#cec8e6,#b3d6e6) !important;
  }
  @media (min-width: 1024px) {
    html[data-desktop-style="v1"] body.ranking-open #ranking { padding: 112px 0 64px !important; }
    html[data-desktop-style="v1"] #ranking > .wrap {
      width: min(var(--otx-ds-page-width), calc(100% - 64px)) !important;
      max-width: var(--otx-ds-page-width) !important;
    }
    html[data-desktop-style="v1"] #ranking .section-head h2 { font: 700 36px/1.2 var(--font, system-ui, sans-serif) !important; }
    html[data-desktop-style="v1"] #ranking .section-head .lead { font: 400 15px/1.65 var(--font, system-ui, sans-serif) !important; }
    html[data-desktop-style="v1"] #ranking .ranking-toolbar :is(input, select) {
      background: rgba(255,255,255,.62) !important;
      color: var(--ranking-ink) !important;
      border-color: #aeb9cb !important;
      font: 400 14px/1.5 var(--font, system-ui, sans-serif) !important;
    }
    html[data-desktop-style="v1"] #ranking .ranking-toolbar input::placeholder { color: var(--ranking-muted) !important; }
    html[data-desktop-style="v1"] #rankingPodium .rg-tab[aria-selected="true"] .rg-tab-count,
    html[data-desktop-style="v1"] #rankingPodium .rg-tab[aria-selected="true"] .rg-tab-count strong { color: var(--ranking-ink) !important; }
  }
}