/* ──────────────────────────────────────────────────────────────────────────
   research_studies.css — "The Evidence Field"
   Flagship redesign of /research/studies (2026-06-19).

   Built on the shared TitrateLab GitHub-dark tokens (titratelab_tokens.css).
   The one bold thing on this page is the hero timeline + the evidence-strength
   colour language; everything else stays quiet and disciplined around it.

   Evidence-strength scale (the signature device):
     --rs-strong   bright cyan  — RCTs & meta-analyses (controlled human data)
     --rs-moderate accent blue  — cohorts & reviews   (observational/secondary)
     --rs-early    warm slate    — preclinical & in-vitro (mechanistic/early)
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --rs-strong:   #2dd4bf;   /* teal-cyan — strongest evidence */
  --rs-moderate: #58a6ff;   /* site accent blue — moderate */
  --rs-early:    #8b98a8;   /* cool slate — early/mechanistic */
  --rs-strong-dim:   rgba(45, 212, 191, 0.16);
  --rs-moderate-dim: rgba(88, 166, 255, 0.16);
  --rs-early-dim:    rgba(139, 152, 168, 0.16);
  --rs-grid:    rgba(255, 255, 255, 0.06);
  --rs-ease:    cubic-bezier(0.22, 0.61, 0.36, 1);
}

html { color-scheme: dark; overflow-x: clip; }
* { box-sizing: border-box; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 620px at 78% -8%, rgba(88,166,255,0.08), transparent 60%),
    radial-gradient(900px 520px at 5% 0%, rgba(45,212,191,0.05), transparent 55%),
    var(--tl-navy);
  color: var(--tl-paper);
  font-family: var(--tl-sans);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--tl-gold); text-decoration: none; }
a:hover { color: var(--tl-gold-soft); }

/* ── Nav (matches site shell) ─────────────────────────────────────────── */
.tl-nav { display: flex; justify-content: space-between; align-items: center; padding: var(--tl-space-6) var(--tl-space-8); max-width: 1180px; margin: 0 auto; flex-wrap: wrap; gap: var(--tl-space-4); }
.tl-nav img { height: 38px; display: block; }
.tl-nav-links { display: flex; gap: var(--tl-space-6); font-family: var(--tl-mono); font-size: 13px; flex-wrap: wrap; row-gap: var(--tl-space-2); justify-content: flex-end; }
.tl-nav-links a[aria-current="page"] { color: var(--tl-paper); border-bottom: 1px solid var(--tl-gold); }

.rs-main { max-width: 1180px; margin: 0 auto; padding: var(--tl-space-6) var(--tl-space-8) var(--tl-space-16); }

.tl-breadcrumb { font-family: var(--tl-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--tl-muted); margin-bottom: var(--tl-space-6); }
.tl-breadcrumb a { color: rgba(201,209,217,0.7); }
.tl-breadcrumb a:hover { color: var(--tl-gold); }
.tl-breadcrumb-sep { margin: 0 var(--tl-space-2); color: rgba(201,209,217,0.3); }

/* ════════════════════════════════════════════════════════════════════════
   HERO — the evidence field
   ════════════════════════════════════════════════════════════════════════ */
.rs-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: var(--tl-space-12);
  align-items: end;
  padding: var(--tl-space-8) 0 var(--tl-space-12);
  border-bottom: 1px solid var(--tl-border);
}
.rs-eyebrow {
  font-family: var(--tl-mono); font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--rs-strong);
  margin: 0 0 var(--tl-space-5);
  display: inline-flex; align-items: center; gap: 8px;
}
.rs-eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--rs-strong);
  box-shadow: 0 0 0 0 rgba(45,212,191,0.6);
  animation: rs-pulse 2.4s ease-out infinite;
}
@keyframes rs-pulse {
  0% { box-shadow: 0 0 0 0 rgba(45,212,191,0.5); }
  70% { box-shadow: 0 0 0 8px rgba(45,212,191,0); }
  100% { box-shadow: 0 0 0 0 rgba(45,212,191,0); }
}
.rs-hero-title {
  font-family: var(--tl-serif);
  font-size: clamp(38px, 5.4vw, 66px);
  line-height: 1.02; letter-spacing: -1.4px; font-weight: 700;
  margin: 0 0 var(--tl-space-6); color: #f0f3f6; text-wrap: balance;
}
.rs-count {
  background: linear-gradient(110deg, var(--rs-strong) 0%, var(--rs-moderate) 70%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--rs-moderate);
  font-variant-numeric: tabular-nums;
}
.rs-hero-sub { font-size: 17px; color: rgba(201,209,217,0.82); max-width: 56ch; margin: 0 0 var(--tl-space-5); }
.rs-hero-stat {
  font-family: var(--tl-mono); font-size: 13.5px; letter-spacing: 0.2px;
  color: rgba(201,209,217,0.7); margin: 0; padding-top: var(--tl-space-4);
  border-top: 1px dashed var(--rs-grid); max-width: 52ch; line-height: 1.5;
}
.rs-hero-stat-num { color: var(--rs-strong); font-weight: 700; font-size: 15px; }

/* ── The timeline-field chart ─────────────────────────────────────────── */
.rs-field {
  margin: 0; padding: var(--tl-space-6) var(--tl-space-6) var(--tl-space-5);
  background: linear-gradient(180deg, rgba(22,27,34,0.9), rgba(13,17,23,0.6));
  border: 1px solid var(--tl-border); border-radius: var(--tl-radius-lg);
  box-shadow: 0 24px 60px -28px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.03);
}
.rs-field-cap {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--tl-mono); font-size: 11.5px; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--tl-muted); margin-bottom: var(--tl-space-5);
}
.rs-field-range { color: rgba(201,209,217,0.5); }
.rs-field-plot {
  display: flex; align-items: flex-end; gap: 2px;
  height: 196px; position: relative;
  background-image: linear-gradient(to top, var(--rs-grid) 1px, transparent 1px);
  background-size: 100% 49px; background-position: 0 -1px;
}
.rs-bar {
  position: relative; flex: 1 1 0; min-width: 0; height: 100%;
  display: flex; align-items: flex-end; justify-content: stretch;
  background: none; border: 0; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rs-bar-stack {
  display: flex; flex-direction: column-reverse; width: 100%;
  height: var(--h); min-height: 2px; border-radius: 2px 2px 0 0;
  overflow: hidden; transform-origin: bottom;
  animation: rs-grow 0.9s var(--rs-ease) backwards;
  transition: filter 0.18s ease, transform 0.18s ease;
}
@keyframes rs-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.rs-bar-seg { width: 100%; display: block; }
.rs-seg-pm { background: var(--rs-moderate); }
.rs-seg-ct { background: var(--rs-strong); }
.rs-seg-ot { background: var(--rs-early); }
.rs-bar:hover .rs-bar-stack,
.rs-bar:focus-visible .rs-bar-stack { filter: brightness(1.18) saturate(1.1); transform: scaleY(1.012); }
.rs-bar:focus-visible { outline: none; }
.rs-bar:focus-visible .rs-bar-stack { box-shadow: 0 0 0 2px var(--tl-navy), 0 0 0 3px var(--rs-moderate); }
.rs-bar.is-active .rs-bar-stack { filter: brightness(1.25) saturate(1.15); box-shadow: 0 0 0 1px rgba(255,255,255,0.35) inset; }
.rs-bar.is-dimmed .rs-bar-stack { filter: grayscale(0.6) brightness(0.55); }
/* hover tooltip */
.rs-bar-tip {
  position: absolute; bottom: calc(var(--h) + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px); white-space: nowrap;
  background: #0b0f14; border: 1px solid var(--tl-border); border-radius: 6px;
  padding: 5px 9px; font-family: var(--tl-mono); font-size: 11px; line-height: 1.3;
  color: var(--tl-paper); pointer-events: none; opacity: 0; z-index: 5;
  transition: opacity 0.14s ease, transform 0.14s ease;
  box-shadow: 0 8px 20px -6px rgba(0,0,0,0.7);
}
.rs-bar-tip strong { color: var(--rs-strong); display: block; font-size: 12px; }
.rs-bar-tip em { color: rgba(201,209,217,0.75); font-style: normal; }
.rs-bar:hover .rs-bar-tip, .rs-bar:focus-visible .rs-bar-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
.rs-bar:last-child .rs-bar-tip { left: auto; right: 0; transform: translateX(0) translateY(4px); }
.rs-bar:last-child:hover .rs-bar-tip, .rs-bar:last-child:focus-visible .rs-bar-tip { transform: translateX(0) translateY(0); }

.rs-field-axis {
  display: flex; justify-content: space-between; margin-top: var(--tl-space-3);
  font-family: var(--tl-mono); font-size: 10.5px; letter-spacing: 1px; color: var(--tl-muted);
}
.rs-field-legend {
  display: flex; gap: var(--tl-space-5); margin-top: var(--tl-space-4);
  padding-top: var(--tl-space-4); border-top: 1px solid var(--rs-grid);
  font-family: var(--tl-mono); font-size: 11px; letter-spacing: 0.4px; color: var(--tl-muted);
  flex-wrap: wrap;
}
.rs-lg { display: inline-flex; align-items: center; gap: 6px; }
.rs-lg::before { content: ""; width: 9px; height: 9px; border-radius: 2px; }
.rs-lg-pm::before { background: var(--rs-moderate); }
.rs-lg-ct::before { background: var(--rs-strong); }
.rs-lg-ot::before { background: var(--rs-early); }

/* ════════════════════════════════════════════════════════════════════════
   CORPUS READOUT — instrument panels
   ════════════════════════════════════════════════════════════════════════ */
.rs-readout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tl-space-5);
  margin: var(--tl-space-12) 0;
}
.rs-panel {
  background: rgba(22,27,34,0.5); border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius-md); padding: var(--tl-space-6);
}
.rs-panel-wide { grid-column: 1 / -1; }
.rs-panel-h {
  font-family: var(--tl-mono); font-size: 11px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--tl-muted); margin: 0 0 var(--tl-space-5);
}

/* source-mix meters */
.rs-meter { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--tl-space-3); }
.rs-meter-row { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: var(--tl-space-4); }
.rs-meter-label { font-size: 13.5px; color: var(--tl-paper); }
.rs-meter-track { height: 8px; background: rgba(255,255,255,0.05); border-radius: 99px; overflow: hidden; }
.rs-meter-fill { display: block; height: 100%; border-radius: 99px; background: var(--rs-moderate); transform-origin: left; animation: rs-fill 1s var(--rs-ease) backwards; }
@keyframes rs-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.rs-src-pubmed { background: var(--rs-moderate); }
.rs-src-clinicaltrials { background: var(--rs-strong); }
.rs-src-europepmc { background: #a78bfa; }
.rs-src-pubchem { background: var(--rs-early); }
.rs-src-dailymed { background: var(--tl-caution-amber); }
.rs-meter-num { font-family: var(--tl-mono); font-size: 13px; color: rgba(201,209,217,0.8); font-variant-numeric: tabular-nums; }

/* evidence-strength stacked bar */
.rs-stack-bar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; gap: 2px; margin-bottom: var(--tl-space-5); }
.rs-stack-seg { display: block; min-width: 4px; border-radius: 2px; animation: rs-fill 1s var(--rs-ease) backwards; transform-origin: left; }
.rs-band-strong { background: var(--rs-strong); }
.rs-band-moderate { background: var(--rs-moderate); }
.rs-band-early { background: var(--rs-early); }
.rs-tier-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--tl-space-3); }
.rs-tier-legend li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--tl-paper); }
.rs-tier-legend em { color: var(--tl-muted); font-style: normal; font-size: 12.5px; }
.rs-tier-legend b { margin-left: auto; font-family: var(--tl-mono); font-weight: 500; color: rgba(201,209,217,0.85); font-variant-numeric: tabular-nums; }
.rs-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; display: inline-block; }

/* peptide leaderboard */
.rs-pep-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--tl-space-2) var(--tl-space-5); }
.rs-pep { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--tl-space-3); padding: 9px 12px; border-radius: 6px; overflow: hidden; isolation: isolate; }
.rs-pep-bar { position: absolute; inset: 0; width: var(--w); background: linear-gradient(90deg, var(--rs-moderate-dim), rgba(88,166,255,0.02)); z-index: -1; border-radius: 6px; transform-origin: left; animation: rs-fill 0.9s var(--rs-ease) backwards; }
.rs-pep:hover { background: rgba(88,166,255,0.07); }
.rs-pep:hover .rs-pep-bar { background: linear-gradient(90deg, rgba(45,212,191,0.22), rgba(45,212,191,0.02)); }
.rs-pep-name { font-size: 14px; color: var(--tl-paper); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-pep:hover .rs-pep-name { color: #f0f3f6; }
.rs-pep-num { font-family: var(--tl-mono); font-size: 12px; color: var(--tl-muted); font-variant-numeric: tabular-nums; }

/* ════════════════════════════════════════════════════════════════════════
   EXPLORE — toolbar + study cards
   ════════════════════════════════════════════════════════════════════════ */
.rs-explore { margin-top: var(--tl-space-12); }
.rs-toolbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; flex-direction: column; gap: var(--tl-space-4);
  padding: var(--tl-space-5) 0 var(--tl-space-4);
  margin-bottom: var(--tl-space-2);
  background: linear-gradient(180deg, var(--tl-navy) 72%, rgba(13,17,23,0));
  backdrop-filter: blur(4px);
}
.rs-search { position: relative; display: flex; align-items: center; }
.rs-search-ico { position: absolute; left: 14px; color: var(--tl-muted); pointer-events: none; }
.rs-search-input {
  width: 100%; font-family: var(--tl-sans); font-size: 15px; color: var(--tl-paper);
  background: var(--tl-canvas-inset); border: 1px solid var(--tl-border);
  border-radius: 8px; padding: 12px 40px 12px 40px; transition: border-color 0.15s, box-shadow 0.15s;
}
.rs-search-input::placeholder { color: var(--tl-muted); }
.rs-search-input:focus { outline: none; border-color: var(--rs-moderate); box-shadow: 0 0 0 3px rgba(88,166,255,0.18); }
.rs-search-clear { position: absolute; right: 10px; background: none; border: 0; color: var(--tl-muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.rs-search-clear:hover { color: var(--tl-paper); background: rgba(255,255,255,0.06); }

.rs-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rs-chips-label { font-family: var(--tl-mono); font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--tl-muted); margin-right: 2px; }
.rs-chip {
  font-family: var(--tl-mono); font-size: 12px; letter-spacing: 0.3px;
  color: rgba(201,209,217,0.78); background: rgba(255,255,255,0.03);
  border: 1px solid var(--tl-border); border-radius: 99px; padding: 6px 13px;
  cursor: pointer; transition: all 0.14s ease; display: inline-flex; align-items: center; gap: 7px;
  -webkit-tap-highlight-color: transparent;
}
.rs-chip:hover { border-color: var(--rs-moderate); color: var(--tl-paper); }
.rs-chip:focus-visible { outline: 2px solid var(--rs-moderate); outline-offset: 2px; }
.rs-chip.is-active { background: rgba(88,166,255,0.14); border-color: var(--rs-moderate); color: #f0f3f6; }
.rs-chip-band.is-active[data-val="strong"] { background: var(--rs-strong-dim); border-color: var(--rs-strong); }
.rs-chip-band.is-active[data-val="early"]  { background: var(--rs-early-dim);  border-color: var(--rs-early); }

.rs-result-line { font-family: var(--tl-mono); font-size: 12px; color: var(--tl-muted); margin: 2px 0 0; }
.rs-result-line b { color: var(--tl-paper); }
.rs-q-echo { color: var(--rs-moderate); }

/* ── Real semantic-search affordances (?q=) ─────────────────────────────── */
/* The search box now sits inside a real <form method=get>. A right-aligned
   submit button makes the JS-off path obvious; with JS the form is
   intercepted + live-fetched. */
.rs-search-input { padding-right: 132px; }   /* room for Search + clear */
.rs-search-go {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-family: var(--tl-mono); font-size: 12px; letter-spacing: 0.4px;
  color: #fff; background: var(--rs-moderate); border: 0; border-radius: 6px;
  padding: 7px 14px; cursor: pointer; transition: filter 0.14s, transform 0.06s;
}
.rs-search-go:hover { filter: brightness(1.08); }
.rs-search-go:active { transform: translateY(-50%) scale(0.97); }
.rs-search-go:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* When a Search button is present the clear-× sits to its left. */
.rs-search a.rs-search-clear { right: 86px; text-decoration: none; display: flex; align-items: center; }

/* Busy state during a live fetch — subtle dim + progress shimmer on the list. */
.rs-explore.is-searching .rs-list { opacity: 0.55; transition: opacity 0.18s; }
.rs-explore.is-searching .rs-search-go { opacity: 0.6; pointer-events: none; }

/* Relevance pill on search-result cards. */
.rs-card-rel {
  color: var(--rs-strong); border: 1px solid var(--rs-strong);
  border-radius: 99px; padding: 2px 8px; font-size: 10.5px; letter-spacing: 0.4px;
}

/* "Ranked by meaning" funnel note above search results. */
.rs-search-note {
  font-family: var(--tl-mono); font-size: 12px; color: var(--tl-muted);
  margin: var(--tl-space-2) 0 var(--tl-space-4);
  padding: var(--tl-space-3) var(--tl-space-4);
  background: rgba(45,212,191,0.05); border: 1px solid var(--rs-strong-dim);
  border-radius: 8px;
}
.rs-funnel-link { color: var(--rs-strong); white-space: nowrap; }
.rs-funnel-link:hover { color: var(--tl-gold-soft); }

.rs-search-empty { padding: var(--tl-space-10) 0; text-align: center; }

@media (max-width: 560px) {
  .rs-search-input { padding-right: 108px; }
  .rs-search-go { padding: 7px 10px; }
  .rs-search a.rs-search-clear { right: 70px; }
}

/* study cards */
.rs-list { list-style: none; margin: 0; padding: 0; counter-reset: rs; }
.rs-card {
  position: relative; display: grid; grid-template-columns: 4px 1fr; gap: 0;
  border-top: 1px solid var(--tl-border); padding: 0;
}
.rs-card:last-child { border-bottom: 1px solid var(--tl-border); }
.rs-card-spine { width: 4px; align-self: stretch; background: var(--rs-early); opacity: 0.32; transition: opacity 0.18s, box-shadow 0.18s; }
.rs-card-strong .rs-card-spine { background: var(--rs-strong); }
.rs-card-moderate .rs-card-spine { background: var(--rs-moderate); }
.rs-card-early .rs-card-spine { background: var(--rs-early); }
.rs-card:hover .rs-card-spine { opacity: 1; box-shadow: 0 0 12px -1px currentColor; }
.rs-card-strong:hover .rs-card-spine { color: var(--rs-strong); }
.rs-card-moderate:hover .rs-card-spine { color: var(--rs-moderate); }
.rs-card-body { padding: var(--tl-space-6) 0 var(--tl-space-6) var(--tl-space-6); min-height: 64px; }
.rs-card:hover { background: linear-gradient(90deg, rgba(88,166,255,0.04), transparent 60%); }

.rs-card-meta { display: flex; gap: var(--tl-space-3); align-items: center; flex-wrap: wrap; font-family: var(--tl-mono); font-size: 11.5px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--tl-muted); margin-bottom: var(--tl-space-2); }
.rs-card-date { color: var(--tl-gold); }
.rs-card-src { color: rgba(201,209,217,0.72); }
.rs-card-tier { padding: 2px 8px; border-radius: 99px; font-size: 10.5px; border: 1px solid currentColor; }
.rs-card-tier.rs-tier-strong { color: var(--rs-strong); }
.rs-card-tier.rs-tier-moderate { color: var(--rs-moderate); }
.rs-card-tier.rs-tier-early { color: var(--rs-early); }
.rs-card-tier.rs-tier-na { color: var(--tl-muted); }
.rs-card-n { color: rgba(201,209,217,0.6); }
.rs-card-title { font-family: var(--tl-serif); font-size: 21px; line-height: 1.28; letter-spacing: -0.2px; margin: 0 0 var(--tl-space-3); font-weight: 600; }
.rs-card-title a { color: #eef1f5; display: inline; background-image: linear-gradient(var(--rs-moderate), var(--rs-moderate)); background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.25s var(--rs-ease), color 0.15s; padding-bottom: 1px; }
.rs-card-title a:hover { color: #fff; background-size: 100% 1.5px; }
.rs-card-desc { font-size: 14.5px; color: rgba(201,209,217,0.72); max-width: 70ch; margin: 0; }

.rs-noresult { padding: var(--tl-space-10) 0; text-align: center; color: var(--tl-muted); font-size: 15px; }
.rs-linkbtn { background: none; border: 0; color: var(--tl-gold); cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }
.rs-empty { padding: var(--tl-space-12) 0; color: var(--tl-muted); font-style: italic; }

.rs-pagination { margin-top: var(--tl-space-8); padding-top: var(--tl-space-6); border-top: 1px solid var(--tl-border); font-family: var(--tl-mono); font-size: 13px; display: flex; justify-content: space-between; align-items: center; gap: var(--tl-space-4); flex-wrap: wrap; }
.rs-page-status { color: var(--tl-muted); }
.rs-page-next { padding: 10px 18px; border: 1px solid var(--rs-moderate); border-radius: 8px; color: var(--rs-moderate); transition: all 0.15s; }
.rs-page-next:hover { background: var(--rs-moderate); color: var(--tl-navy); }
.rs-page-end { color: var(--tl-muted); font-style: italic; }

/* ── Peptide hub rail ─────────────────────────────────────────────────── */
.rs-hubs { margin-top: var(--tl-space-16); padding-top: var(--tl-space-10); border-top: 1px solid var(--tl-border); }
.rs-hubs-h { font-family: var(--tl-serif); font-size: 24px; font-weight: 600; margin: 0 0 var(--tl-space-6); color: #eef1f5; }
.rs-hub-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.rs-hub-list a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 13px; border: 1px solid var(--tl-border); border-radius: 8px; background: rgba(22,27,34,0.4); transition: all 0.14s; }
.rs-hub-list a:hover { border-color: var(--rs-moderate); background: rgba(88,166,255,0.07); transform: translateY(-1px); }
.rs-hub-name { color: var(--tl-paper); font-size: 14px; }
.rs-hub-list a:hover .rs-hub-name { color: #f0f3f6; }
.rs-hub-count { font-family: var(--tl-mono); font-size: 11px; color: var(--tl-muted); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.rs-footer { border-top: 1px solid var(--tl-border-muted); padding: var(--tl-space-12) var(--tl-space-8); color: var(--tl-muted); font-family: var(--tl-mono); font-size: 13px; text-align: center; max-width: 1180px; margin: 0 auto; }
.rs-footer-tag em { color: rgba(201,209,217,0.6); }
.rs-footer-links { display: flex; gap: var(--tl-space-4); justify-content: center; flex-wrap: wrap; margin-top: var(--tl-space-3); }

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 920px) {
  .rs-hero { grid-template-columns: 1fr; gap: var(--tl-space-8); align-items: start; }
  .rs-readout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tl-nav { padding: var(--tl-space-4) var(--tl-space-5); }
  .tl-nav img { height: 30px; }
  .tl-nav-links { gap: var(--tl-space-4); font-size: 12px; }
  .rs-main { padding: var(--tl-space-4) var(--tl-space-5) var(--tl-space-12); }
  .rs-hero { padding: var(--tl-space-5) 0 var(--tl-space-8); }
  .rs-hero-title { letter-spacing: -0.6px; }
  .rs-hero-sub { font-size: 15.5px; }
  .rs-field { padding: var(--tl-space-5) var(--tl-space-4) var(--tl-space-4); }
  .rs-field-plot { height: 150px; background-size: 100% 37px; }
  .rs-bar-tip { font-size: 10px; }
  .rs-meter-row { grid-template-columns: 92px 1fr auto; gap: var(--tl-space-3); }
  .rs-meter-label { font-size: 12.5px; }
  .rs-pep-grid { grid-template-columns: 1fr; }
  .rs-toolbar { position: static; backdrop-filter: none; }
  .rs-card-body { padding: var(--tl-space-5) 0 var(--tl-space-5) var(--tl-space-4); }
  .rs-card-title { font-size: 18px; }
  .rs-card-desc { font-size: 13.5px; }
  .rs-hubs-h { font-size: 20px; }
  .rs-footer { padding: var(--tl-space-8) var(--tl-space-5); }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .rs-bar-stack, .rs-meter-fill, .rs-stack-seg, .rs-pep-bar { transform: none !important; }
}