/* research.css — the report layer for rhchain.network/research/.
 *
 * Loads AFTER zoltan.css (identity) and site.css (layout) and only adds what a
 * long data-heavy page needs that the marketing pages do not: dense tables,
 * a scroll container that keeps the page from ever scrolling sideways, and
 * cards that can carry a verdict colour without inventing new hues.
 *
 * Rule followed throughout: --z-magenta is large text and flags only. Body
 * copy and table numbers stay on phosphor or chrome, which clear AA on void.
 */

/* ---- hero ---- */
.rhero{position:relative;border-bottom:1px solid var(--z-line);
       padding:34px 0 30px;
       background:radial-gradient(ellipse at 12% 0%,rgba(57,255,156,.10),transparent 58%),
                  linear-gradient(to bottom,rgba(13,13,20,.9),var(--z-void))}
.rhero h1{font-size:clamp(26px,4.2vw,44px);line-height:1.12;margin:.28em 0 .4em;
          letter-spacing:-.01em;max-width:24ch;text-wrap:balance}
.rhero .sub{max-width:74ch;color:var(--z-chrome);font-size:16.5px;margin:0 0 20px}
.rhero .kick{font-family:var(--z-mono);font-size:11.5px;letter-spacing:.16em;
             text-transform:uppercase;color:var(--z-phosphor);margin:0}
.rhero .stamp{font-family:var(--z-mono);font-size:11.5px;color:var(--z-muted);
              margin:16px 0 0}
.rhero .ctas{display:flex;flex-wrap:wrap;gap:10px}

.crumb{font-family:var(--z-mono);font-size:11px;letter-spacing:.08em;
       text-transform:uppercase;color:var(--z-muted);margin:0 0 6px}
.crumb span{opacity:.5;padding:0 4px}
.crumb b{color:var(--z-chrome);font-weight:600}

/* ---- sections ---- */
section{padding:40px 0;border-top:1px solid var(--z-line)}
section:first-of-type{border-top:0}
section h2{font-size:clamp(21px,2.7vw,30px);line-height:1.2;margin:0 0 4px;
           letter-spacing:-.005em;text-wrap:balance}
section h3{font-size:16.5px;margin:26px 0 8px;color:var(--z-chrome)}
.sech{font-family:var(--z-mono);font-size:11px;letter-spacing:.14em;
      text-transform:uppercase;color:var(--z-phosphor-dim);margin:0 0 18px}
.lead{max-width:78ch;font-size:16.5px}
section p{max-width:80ch}

.steps{max-width:80ch;padding-left:1.1em}
.steps li{margin:0 0 12px}
.steps b{color:var(--z-phosphor)}

code{font-family:var(--z-mono);font-size:.88em;background:rgba(255,255,255,.05);
     border:1px solid var(--z-line);border-radius:4px;padding:1px 5px;
     color:var(--z-chrome);word-break:break-all}

.note{border:1px solid var(--z-line);border-left:3px solid var(--z-cyan);
      border-radius:6px;background:rgba(52,230,255,.05);padding:14px 16px;
      margin:22px 0;max-width:82ch}
.note-k{font-family:var(--z-mono);font-size:10.5px;letter-spacing:.14em;
        text-transform:uppercase;color:var(--z-cyan);display:block;
        margin-bottom:5px}
.note p{margin:0}

/* ---- cards ---- */
.cards{display:grid;gap:14px;margin-top:20px;
       grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.cards.two{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{border:1px solid var(--z-line);border-radius:8px;padding:16px 17px;
      background:var(--z-surface)}
.card h3{margin:0 0 8px;font-size:15.5px;color:var(--z-phosphor);
         letter-spacing:.01em}
.card p{margin:0;font-size:14.5px;color:var(--z-chrome);max-width:none}
.card.good{border-left:3px solid var(--z-phosphor)}
.card.bad{border-left:3px solid var(--z-magenta)}
.card.bad h3{color:var(--z-magenta)}

/* ---- tables ----
   Wide tables never widen the page: they live in .scroller and scroll on their
   own axis. Without this the 11-column listing table hands every phone a
   horizontally scrolling document. */
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch;
          border:1px solid var(--z-line);border-radius:8px;margin:16px 0}
.scroller .tt{margin:0;border:0}
/* The 612-row listing table gets its own vertical pane. Two reasons: inline it
   is roughly 20,000px tall and buries the rest of the report, and a sticky
   header cannot work against the page inside an overflow container — it can
   only stick to the container it scrolls in. Every row is still in the HTML,
   so this changes the reading, never the content. */
.scroller.tall{max-height:74vh;overflow-y:auto}
.scroller.tall .tt th{position:sticky;top:0;z-index:2}

.tt{width:100%;border-collapse:collapse;font-size:13.5px;margin:16px 0;
    font-variant-numeric:tabular-nums}
.tt th{text-align:left;font-family:var(--z-mono);font-size:10.5px;
       letter-spacing:.1em;text-transform:uppercase;color:var(--z-muted);
       font-weight:600;padding:9px 11px;border-bottom:1px solid var(--z-line);
       background:var(--z-surface);white-space:nowrap}
/* Headers are NOT sticky by default, and that is deliberate.
   Every table here sits inside .scroller, which is overflow-x:auto — and an
   overflow container is a scroll container, so a sticky th anchors to THAT box
   rather than to the page. With a `top:56px` meant to clear the nav, the
   header did not follow the page at all: it parked itself 56px down inside the
   table and sat on top of the first two rows, hiding them. Sticky only works
   where there is a vertical scroll to stick against, which is .scroller.tall
   below — and there the offset is 0, because that pane is its own viewport. */
.tt td{padding:7px 11px;border-bottom:1px solid rgba(255,255,255,.05);
       color:var(--z-chrome)}
.tt tbody tr:hover td{background:rgba(57,255,156,.05)}
.tt .num{text-align:right;font-family:var(--z-mono)}
.tt .hi{color:var(--z-phosphor);font-weight:600}
.tt .dim{color:var(--z-muted)}
.tt .warn{color:var(--z-magenta)}
.tt .ok,.tt .good{color:var(--z-phosphor)}
.tt tr.rare td{background:rgba(255,47,160,.08)}
.tt tr.rare td:first-child{box-shadow:inset 2px 0 0 var(--z-magenta)}
.tt tr.toprow td:first-child{box-shadow:inset 2px 0 0 var(--z-phosphor)}
.tt.small{font-size:12.5px}
.tt.small td,.tt.small th{padding:5px 8px}
.tt a{color:var(--z-cyan)}
.tt .buy{font-family:var(--z-mono);font-size:11px;text-transform:uppercase;
         letter-spacing:.08em;text-decoration:none;border:1px solid var(--z-line);
         padding:3px 8px;border-radius:4px;white-space:nowrap}
.tt .buy:hover{border-color:var(--z-phosphor);color:var(--z-phosphor);
               background:rgba(57,255,156,.08)}

/* sortable headings */
.tt.listing th[data-k]{cursor:pointer;user-select:none}
.tt.listing th[data-k]:hover{color:var(--z-phosphor)}
.tt.listing th[data-k]::after{content:"";opacity:0;margin-left:5px;
                              font-size:9px;vertical-align:1px}
.tt.listing th.sorted{color:var(--z-phosphor)}
.tt.listing th.sorted::after{content:"\25B2";opacity:.85}
.tt.listing th.sorted.desc::after{content:"\25BC"}
.barh{width:96px}
.barc{width:96px;padding-right:14px!important;vertical-align:middle}
/* A td aligns on the baseline by default, and this cell holds nothing but a
   5px block — on a single-line row that parked the bar up by the cap height
   where it read as a stray tick rather than as a bar. */
.bar{display:block;height:5px;border-radius:3px;background:var(--z-phosphor-dim);
     min-width:3px}
tr.rare .bar{background:var(--z-magenta)}

.tnote{font-size:12.5px;color:var(--z-muted);max-width:80ch;margin:8px 0 0}
.vals{font-family:var(--z-mono);font-size:10.5px;letter-spacing:.1em;
      text-transform:uppercase;color:var(--z-muted);font-weight:400;
      margin-left:6px}

.tgrid{display:grid;gap:18px;
       grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.tblock{border:1px solid var(--z-line);border-radius:8px;padding:4px 14px 10px;
        background:var(--z-surface);min-width:0;overflow-x:auto}
.tblock h3{margin:14px 0 2px;font-size:14px;color:var(--z-phosphor)}

.oneof{max-width:70ch}
.oneof .tt{margin-top:8px}

/* ---- table tools ---- */
.tools{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:18px 0 0;
       font-family:var(--z-mono);font-size:11.5px;text-transform:uppercase;
       letter-spacing:.07em;color:var(--z-muted)}
.tools label{display:flex;align-items:center;gap:7px}
.tools input{font-family:var(--z-mono);font-size:12.5px;text-transform:none;
             letter-spacing:0;color:var(--z-chrome);background:var(--z-surface);
             border:1px solid var(--z-line);border-radius:5px;padding:6px 9px;
             min-width:150px}
.tools input:focus{outline:none;border-color:var(--z-phosphor);
                   box-shadow:0 0 0 2px rgba(57,255,156,.18)}
.tools .count{color:var(--z-phosphor)}
.tools .hint{opacity:.6}

/* ---- stats ---- */
.stats{display:grid;gap:10px;margin:18px 0 24px;
       grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stat{border:1px solid var(--z-line);border-radius:7px;padding:12px 13px;
      background:var(--z-surface)}
.stat b{display:block;font-family:var(--z-mono);font-size:20px;
        color:var(--z-phosphor);letter-spacing:-.01em;line-height:1.2}
.stat span{display:block;font-family:var(--z-mono);font-size:10.5px;
           letter-spacing:.09em;text-transform:uppercase;color:var(--z-muted);
           margin-top:4px}

.repro{max-width:82ch;padding-left:1.1em}
.repro li{margin:0 0 9px}

/* ---- faq ---- */
.faq{border:1px solid var(--z-line);border-radius:7px;margin:0 0 8px;
     background:var(--z-surface);max-width:82ch}
.faq summary{cursor:pointer;padding:12px 15px;font-weight:600;
             color:var(--z-chrome);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";font-family:var(--z-mono);
                     color:var(--z-phosphor);margin-right:10px;font-weight:700}
.faq[open] summary::before{content:"\2212"}
.faq summary:hover{color:var(--z-phosphor)}
.faq p{margin:0;padding:0 15px 14px 15px;color:var(--z-muted);font-size:14.5px}

/* ---- research index ---- */
.rlist{display:grid;gap:18px;margin-top:6px}
.ritem{border:1px solid var(--z-line);border-radius:9px;padding:20px 22px;
       background:var(--z-surface);position:relative}
.ritem h2{font-size:clamp(19px,2.4vw,26px);margin:2px 0 6px;max-width:30ch}
.ritem h2 a{color:var(--z-fg);text-decoration:none}
.ritem h2 a:hover{color:var(--z-phosphor);text-shadow:var(--z-glow-sm)}
.rnum{font-family:var(--z-mono);font-size:11px;letter-spacing:.2em;
      color:var(--z-phosphor-dim);margin:0}
.rmeta{font-family:var(--z-mono);font-size:11.5px;letter-spacing:.05em;
       color:var(--z-muted);margin:0 0 10px}
.rtags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 16px}
.rtags span{font-family:var(--z-mono);font-size:10px;letter-spacing:.09em;
            text-transform:uppercase;border:1px solid var(--z-line);
            border-radius:20px;padding:3px 9px;color:var(--z-muted)}
.ritem.soon{opacity:.55}
.ritem.soon h2{color:var(--z-muted)}

footer{border-top:1px solid var(--z-line);padding:26px 0 40px;margin-top:20px}
footer p{font-size:13px;color:var(--z-muted);max-width:84ch}

@media(max-width:640px){
  section{padding:30px 0}
  .tools{gap:9px}
  .tools input{min-width:120px}
  .tt{font-size:12.5px}
}