/* ============================================================
   Pilot ratings on the nx system. Shared by every /ratings page
   and linked from the "ratings-head" define in base.html, so it
   is already loaded whichever tab a visitor lands on —
   ratings-ajax.js swaps only #ratings-content and the tab bar.
   Nothing inside #ratings-content may carry [data-reveal]: nx.js
   observes those once at load, so swapped-in content would stay
   invisible. The entry fade below is plain CSS for that reason.
   ============================================================ */

body.nx .rt-hero { padding-bottom: clamp(20px, 3vw, 36px); }

/* ---------- tab bar ---------- */
body.nx .rt-tabs { position: sticky; top: 56px; z-index: 40; background: var(--nx-glass); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--nx-hair); border-bottom: 1px solid var(--nx-hair); }
body.nx .rt-tabs .nx-wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-top: 8px; padding-bottom: 8px; }
body.nx .rt-tabs .nx-wrap::-webkit-scrollbar { display: none; }
body.nx .rt-tab { flex: 0 0 auto; padding: .55em 1.05em; border-radius: 999px; font-size: .92rem; font-weight: 600; letter-spacing: -.01em; color: var(--color-text-secondary); text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
body.nx .rt-tab:hover { color: var(--color-text); background: rgba(255,255,255,.06); }
body.nx .rt-tab.on { color: var(--color-text); background: rgba(255,255,255,.12); }

/* ---------- page body ---------- */
body.nx .rt-body { padding: clamp(28px, 4vw, 52px) 0 clamp(48px, 7vw, 96px); }
body.nx #ratings-content > .rt-body { animation: rt-in .35s var(--nx-ease-out) both; }
@keyframes rt-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { body.nx #ratings-content > .rt-body { animation: none; } }

body.nx .rt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; margin: clamp(36px, 5vw, 60px) 0 18px; }
body.nx .rt-head:first-child, body.nx .rt-back + .rt-head { margin-top: 0; }
body.nx .pagination + .rt-head, body.nx .rl-cards + .rt-head { margin-top: clamp(40px, 6vw, 72px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--nx-hair); }
body.nx .rt-head h2 { margin: 0; font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
body.nx .rt-head p { margin: 0; font-size: .92rem; color: var(--color-text-muted); }
body.nx .rt-back { display: inline-flex; align-items: center; gap: .4em; margin-bottom: 20px; font-size: .9rem; font-weight: 600; color: var(--color-text-secondary); text-decoration: none; }
body.nx .rt-back:hover { color: var(--nx-accent); }

/* ---------- class pills + filters ---------- */
body.nx .rt-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 14px; }
body.nx .rt-classes { display: flex; gap: 6px; flex-wrap: wrap; }
body.nx .rt-pill { padding: .5em 1.05em; border-radius: 999px; font-size: .88rem; font-weight: 600; text-decoration: none; white-space: nowrap; color: var(--color-text-secondary); background: rgba(255,255,255,.06); border: 1px solid var(--nx-hair); transition: background .2s, color .2s, border-color .2s; }
body.nx .rt-pill:hover { color: var(--color-text); border-color: rgba(255,255,255,.25); }
body.nx .rt-pill.on { background: var(--nx-accent); border-color: var(--nx-accent); color: var(--nx-accent-ink); }
body.nx .rt-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
body.nx .rt-filters input[type="text"], body.nx .rt-filters input[type="search"], body.nx .rt-filters select { min-height: 42px; padding: 8px 16px; border-radius: 999px; font-size: .92rem; width: auto; max-width: 100%; }
body.nx .rt-filters input[type="text"], body.nx .rt-filters input[type="search"] { width: 240px; }
body.nx .rt-filters label { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--color-text-muted); margin: 0; }
body.nx .rt-note { font-size: .88rem; color: var(--color-text-muted); margin: 0 0 22px; }
body.nx .rt-note a { color: var(--nx-accent); text-decoration: none; white-space: nowrap; }
body.nx .rt-note a:hover { text-decoration: underline; }

/* ---------- pilot cards ---------- */
body.nx .rt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
body.nx .rt-pilot { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 14px 18px 14px 14px; border-radius: 20px; background: var(--color-bg-card); border: 1px solid var(--nx-hair); text-decoration: none; color: var(--color-text); transition: transform .45s var(--nx-ease), border-color .3s, background .3s, box-shadow .45s var(--nx-ease); }
body.nx a.rt-pilot:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.2); background: #151518; box-shadow: var(--shadow-lg); }
body.nx .rt-av { position: relative; flex: 0 0 auto; }
body.nx .rt-av img, body.nx .rt-av .rt-ini { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; background: #1d1d1f; border: 1px solid var(--nx-hair); }
body.nx .rt-ini { font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; color: var(--nx-accent); text-transform: uppercase; }
body.nx .rt-rank { position: absolute; top: -6px; left: -8px; min-width: 24px; height: 24px; padding: 0 6px; box-sizing: border-box; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums; background: #000; border: 1px solid rgba(255,255,255,.28); color: var(--color-text-secondary); }
body.nx .rt-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
body.nx .rt-name { font-weight: 600; font-size: 1rem; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.nx .rt-sub { font-size: .8rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.nx .rt-sub img { height: 16px; width: auto; vertical-align: middle; border-radius: 2px; }
body.nx .rt-num { flex: 0 0 auto; text-align: right; }
body.nx .rt-rating { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--nx-accent); }
body.nx .rt-num .rt-sub { margin-top: 2px; }
body.nx .rt-up { color: var(--nx-accent); }
body.nx .rt-down { color: #ff6b6b; }
body.nx .rt-flat { color: var(--color-text-muted); }

/* one scrolling row of compact cards (leaderboard award panels) */
body.nx .rt-strip { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; padding: 4px 0 12px; margin: -4px 0 0; scroll-snap-type: x proximity; }
body.nx .rt-strip .rt-pilot { flex: 0 0 250px; padding: 12px 16px 12px 12px; border-radius: 16px; gap: 12px; scroll-snap-align: start; }
body.nx .rt-strip .rt-av img, body.nx .rt-strip .rt-av .rt-ini { width: 40px; height: 40px; }
body.nx .rt-strip .rt-ini { font-size: 1rem; }
body.nx .rt-strip .rt-name { font-size: .94rem; }
body.nx .rt-strip .rt-rating { font-size: 1.3rem; }
body.nx .rt-strip a.rt-pilot:hover { transform: none; }

body.nx .rt-empty { text-align: center; color: var(--color-text-muted); padding: clamp(40px, 7vw, 80px) 0; margin: 0; }

/* ---------- tables ---------- */
body.nx :is(.rt-table, .rl-table) { background: var(--color-bg-card); border: 1px solid var(--nx-hair); border-radius: var(--radius-xl); overflow-x: auto; }
body.nx :is(.rt-table, .rl-table) .data-table { background: none; border: 0; border-radius: 0; }
body.nx :is(.rt-table, .rl-table) .data-table th { padding: 14px 18px; white-space: nowrap; }
body.nx :is(.rt-table, .rl-table) .data-table td { padding: 14px 18px; }
body.nx :is(.rt-table, .rl-table) .data-table tbody tr:last-child td { border-bottom: 0; }
body.nx :is(.rt-table, .rl-table) .data-table tbody tr:hover { background: none; }
body.nx :is(.rt-table, .rl-table) .data-table a { text-decoration: none; }
body.nx :is(.rt-table, .rl-table) .data-table a:hover strong { color: var(--nx-accent); }
body.nx :is(.rt-table, .rl-table) .rt-dim { color: var(--color-text-secondary); }
body.nx :is(.rt-table, .rl-table) .rt-n { font-family: var(--font-heading); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
body.nx .rt-body .pagination { border-top: 0; justify-content: center; }
body.nx .rt-body .pagination-btn { border-radius: 999px; background: rgba(255,255,255,.06); border-color: var(--nx-hair); color: var(--color-text-secondary); min-width: 38px; height: 38px; padding: 0 12px; }
body.nx .rt-body .pagination-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: var(--color-text); }
body.nx .rt-body .pagination-btn.active { background: var(--nx-accent); border-color: var(--nx-accent); color: var(--nx-accent-ink); }

/* ---------- how it works ---------- */
body.nx .rt-prose { max-width: 68ch; }
body.nx .rt-prose h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin: 2.2em 0 .6em; }
body.nx .rt-prose h2:first-child { margin-top: 0; }
body.nx .rt-prose p, body.nx .rt-prose li { font-size: 1.05rem; line-height: 1.7; color: #d2d2d7; }
body.nx .rt-prose p { margin: 0 0 1em; }
body.nx .rt-prose strong { color: var(--color-text); }
body.nx .rt-prose ul { padding-left: 1.3em; margin: 0 0 1em; }
body.nx .rt-prose li { margin: .35em 0; }
body.nx .rt-scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 24px; margin: 1.8em 0; }
body.nx .rt-scale .nx-stat { padding: 20px 0; }
body.nx .rt-scale .nx-stat b { font-size: clamp(1.8rem, 3vw, 2.4rem); }
body.nx .rt-scale .nx-stat.top b { color: var(--nx-accent); }

@media (max-width: 640px) {
    body.nx .rt-grid { grid-template-columns: 1fr; }
    body.nx .rt-bar { align-items: stretch; }
    body.nx .rt-filters { width: 100%; }
    body.nx .rt-filters input[type="text"], body.nx .rt-filters input[type="search"] { flex: 1 1 100%; width: 100%; }
    body.nx .rt-filters select { flex: 1 1 0; min-width: 0; }
    body.nx .rt-scale { grid-template-columns: repeat(2, 1fr); }
}