/* RFSX Rank page additions (keeps main theme from rfsx.css)
   Scoped to body.rfsx-rank-page
*/

html{ color-scheme: dark; }

body.rfsx-rank-page .rfsx-title{ letter-spacing:.4px; }

/* Desktop filters (brand + release window) */
body.rfsx-rank-page .rank-filters{
  grid-template-columns: minmax(220px, 1.2fr) minmax(200px, 0.8fr);
}
body.rfsx-rank-page .rank-filters select{ min-width: 180px; }

/*
  Native <select> popups (Chrome/desktop + some mobile UIs) often render with a light background.
  Our selects use light text, so force option text to dark for readability.
*/
body.rfsx-rank-page .rank-filters select,
body.rfsx-rank-page .rfsx-filters-mobile select,
body.rfsx-rank-page #rankTest{
  color: var(--text) !important;
}
body.rfsx-rank-page .rank-filters select option,
body.rfsx-rank-page .rank-filters select optgroup,
body.rfsx-rank-page .rfsx-filters-mobile select option,
body.rfsx-rank-page .rfsx-filters-mobile select optgroup,
body.rfsx-rank-page #rankTest option,
body.rfsx-rank-page #rankTest optgroup{
  background: #ffffff !important;
  color: #0b0b0c !important;
}

/* SAR test selector (always visible) */
body.rfsx-rank-page .rank-testbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

body.rfsx-rank-page .rank-navbtn{
  appearance:none;
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-weight: 950;
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
body.rfsx-rank-page .rank-navbtn:disabled{
  opacity:0.45;
  cursor:default;
}
body.rfsx-rank-page .rank-navbtn:hover:not(:disabled){
  background: rgba(255,255,255,0.06);
}

body.rfsx-rank-page .rank-testselect{
  flex: 1 1 auto;
  min-width: 0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
body.rfsx-rank-page .rank-testlabel{
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.3px;
}
body.rfsx-rank-page #rankTest{
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border) !important;
  background: rgba(255,255,255,0.03) !important;
  color: var(--text) !important;
  outline: none;
  font-weight: 800;
}

body.rfsx-rank-page #rankTest:hover{
  border-color: rgba(255,255,255,0.22) !important;
}

body.rfsx-rank-page #rankTest:focus{
  border-color: rgba(255,255,255,0.25) !important;
}

/* Center content wrapper */
body.rfsx-rank-page .rank-content{
  padding: 14px;
}
body.rfsx-rank-page .rank-content,
body.rfsx-rank-page .rank-content *{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Intro */
body.rfsx-rank-page .rank-intro h1{
  margin: 0 0 6px;
  font-size: 1.25rem;
  letter-spacing: -0.2px;
}
body.rfsx-rank-page .rank-intro p{
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.45;
}
body.rfsx-rank-page .rank-intro ul{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.5;
}
body.rfsx-rank-page .rank-intro li{ margin: 6px 0; }

/* Status / errors */
body.rfsx-rank-page .rank-status{
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.95rem;
}
body.rfsx-rank-page .rank-loading{
  color: var(--muted);
  padding: 12px 0;
  font-weight: 800;
}
body.rfsx-rank-page .rank-error{
  border: 1px solid rgba(239,68,68,0.35);
  background: rgba(239,68,68,0.08);
  color: #fecaca;
  border-radius: 16px;
  padding: 12px 14px;
  margin-top: 12px;
}

/* Rankings list */
body.rfsx-rank-page .rank-list{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

body.rfsx-rank-page .rank-empty{
  padding: 10px 0;
  color: var(--muted);
  font-weight: 850;
}

body.rfsx-rank-page .rank-card{
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  border-radius: 18px;
  padding: 12px;
  display:grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}
body.rfsx-rank-page .rank-card:hover{ background: rgba(255,255,255,0.03); }

body.rfsx-rank-page .rank-thumb{
  width: 74px;
  height: 98px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.2);
  overflow: hidden;
  display:block;
}
body.rfsx-rank-page .rank-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

body.rfsx-rank-page .rank-name{
  font-weight: 950;
  font-size: 1.05rem;
  line-height: 1.1;
  color: var(--text);
  text-decoration: none;
}
body.rfsx-rank-page .rank-name:hover{ text-decoration: underline; }

body.rfsx-rank-page .rank-sub{
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.9rem;
}

body.rfsx-rank-page .rank-open{
  margin-top: 6px;
  font-size: 0.9rem;
}
body.rfsx-rank-page .rank-open a{
  color: var(--link);
  text-decoration: none;
}
body.rfsx-rank-page .rank-open a:hover{ text-decoration: underline; }

body.rfsx-rank-page .rank-val{ text-align: right; }
body.rfsx-rank-page .rank-num{ font-weight: 950; }
body.rfsx-rank-page .rank-sar{ margin-top: 6px; font-weight: 950; font-size: 1.15rem; }
body.rfsx-rank-page .rank-pct{ margin-top: 4px; color: var(--muted); font-size: 0.88rem; }

body.rfsx-rank-page .rank-card.is-target{
  border-color: rgba(96,165,250,0.45);
  background: rgba(96,165,250,0.10);
}
body.rfsx-rank-page .rank-card.is-target .rank-name{ color: #dbeafe; }

@keyframes rankPulse{
  0%{ box-shadow: 0 0 0 0 rgba(96,165,250,0.55); }
  70%{ box-shadow: 0 0 0 12px rgba(96,165,250,0.0); }
  100%{ box-shadow: 0 0 0 0 rgba(96,165,250,0.0); }
}
body.rfsx-rank-page .rank-card.flash{ animation: rankPulse 1.2s ease-out 1; }

@media (max-width: 640px){
  body.rfsx-rank-page .rank-card{ grid-template-columns: 74px minmax(0, 1fr); }
  body.rfsx-rank-page .rank-val{
    grid-column: 1 / -1;
    text-align: left;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
}

/* Sidebar helpers */
body.rfsx-rank-page .rank-view-note{
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.92rem;
}

body.rfsx-rank-page .rank-about{
  color: var(--muted);
  line-height: 1.45;
}
body.rfsx-rank-page .rank-about code{ color: #e5e7eb; }

body.rfsx-rank-page .rank-mobile-hint{
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.4;
}

/* Share block styles (copied from rfsx_paper.css, scoped to Rank page) */
body.rfsx-rank-page .rfsx-share{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

body.rfsx-rank-page .rfsx-share a{
  color: var(--link);
  text-decoration: none;
  font-weight: 600;
}

body.rfsx-rank-page .rfsx-share a:hover{
  text-decoration: underline;
}

body.rfsx-rank-page .rfsx-share-copy{
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 999px;
  cursor: pointer;
}

body.rfsx-rank-page .rfsx-share-copy:hover{
  background: rgba(255,255,255,0.09);
}

body.rfsx-rank-page .rfsx-share-copy:disabled{
  opacity: 0.65;
  cursor: default;
}

/*
  Sticky side rails + scroll sanity (Rank)

  If any ancestor creates a scroll/clip context (overflow hidden/auto/scroll),
  `position: sticky` can appear "broken". Force Rank to behave like mel/RFSX.php:
  the document scrolls and the left/right rails stick.
*/

/* Ensure the document can scroll (unless the mobile modal intentionally locks it) */
body.rfsx-rank-page:not(.rfsx-modal-open){
  overflow-y: auto !important;
}

/* Avoid creating a new scroll container that breaks sticky */
body.rfsx-rank-page main.wrap,
body.rfsx-rank-page .rfsx-layout,
body.rfsx-rank-page .rfsx-feedcol,
body.rfsx-rank-page .rank-content{
  overflow: visible !important;
}

/* Make sure the center column isn't forced into an internal scroller */
body.rfsx-rank-page .rfsx-feedcol,
body.rfsx-rank-page .rank-content,
body.rfsx-rank-page .rank-list{
  height: auto !important;
  max-height: none !important;
}

/* Make sure grid items don't stretch in ways that can confuse sticky */
body.rfsx-rank-page .rfsx-layout{
  align-items: start;
}

/* Sticky rails */
body.rfsx-rank-page .rfsx-nav,
body.rfsx-rank-page .rfsx-side{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  align-self: start;
}

/* Hide sidebar scrollbars (X-style) */
body.rfsx-rank-page .rfsx-nav,
body.rfsx-rank-page .rfsx-side{
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
body.rfsx-rank-page .rfsx-nav::-webkit-scrollbar,
body.rfsx-rank-page .rfsx-side::-webkit-scrollbar{
  width: 0;
  height: 0;
}