/* =====================================================================
   Retrieval, vectors and RAG — page-specific styles.
   The pipeline strip in section 01, and the retrieval bench.
   ===================================================================== */

/* ---------- pipeline strip ---------- */
.pipe{
  margin:14px 0 4px; line-height:2.4; font-family:var(--mono); font-size:11.5px;
}
.pipe span{
  display:inline-block; padding:4px 10px; border-radius:7px;
  background:rgba(46,208,192,.12); border:1px solid rgba(94,236,208,.3); color:var(--text);
}
.pipe span.db{background:rgba(147,197,253,.13); border-color:rgba(147,197,253,.36)}
.pipe i{color:var(--muted2); font-style:normal; padding:0 7px}

/* ---------- the bench ---------- */
.ragLab{display:grid; grid-template-columns:250px minmax(0,1fr) 260px; gap:14px; align-items:start}
@media (max-width:1080px){ .ragLab{grid-template-columns:1fr} }
.ragLab > *{min-width:0}

.ragSide{border:1px solid var(--line); border-radius:var(--radius); background:var(--glass); padding:14px}
.ragMain{min-width:0}

.presets{display:flex; flex-direction:column; gap:5px; margin-bottom:11px}
.preset{
  text-align:left; border:1px solid var(--line); background:rgba(6,14,22,.72); color:var(--muted);
  border-radius:8px; padding:7px 10px; font-size:11.5px; cursor:pointer; line-height:1.4;
  transition:all .16s var(--ease);
}
.preset:hover{border-color:rgba(94,236,208,.5); color:var(--text)}
.preset.is-on{background:rgba(46,208,192,.16); color:#fff; border-color:rgba(94,236,208,.55)}

.modes{display:flex; flex-direction:column; gap:5px; margin-bottom:9px}
.modeBtn{
  border:1px solid var(--line); background:rgba(6,14,22,.7); color:var(--muted2);
  border-radius:8px; padding:7px 11px; font-size:12px; cursor:pointer; font-weight:600;
  transition:all .16s var(--ease);
}
.modeBtn:hover{color:var(--text)}
.modeBtn.is-on{background:rgba(46,208,192,.18); color:#fff; border-color:rgba(94,236,208,.55)}

.f{display:block; margin-bottom:11px}
.f > span{
  display:block; font-family:var(--mono); font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted2); margin-bottom:5px;
}
.f input[type=text]{
  width:100%; background:rgba(6,14,22,.85); color:var(--text); border:1px solid var(--line);
  border-radius:7px; padding:7px 9px; font-family:var(--mono); font-size:11.5px;
}
.f input[type=text]:focus{outline:none; border-color:rgba(94,236,208,.55)}
.f input[type=range]{width:100%; accent-color:var(--b); cursor:pointer}
.fVal{display:block; font-size:11px; color:var(--muted2); margin-top:3px}
.fVal b{color:var(--b); font-family:var(--mono)}

.chk{display:flex; align-items:center; gap:8px; padding:4px 0; font-size:12.5px; cursor:pointer}
.chk input{accent-color:var(--b); width:15px; height:15px; cursor:pointer; flex:0 0 auto}

/* ---------- tabs ---------- */
.ragTabs{display:flex; gap:7px; margin-bottom:10px}
.ragTab{
  border:1px solid var(--line); background:rgba(6,14,22,.7); color:var(--muted2);
  border-radius:999px; padding:6px 15px; font-size:12.5px; cursor:pointer; font-weight:600;
  transition:all .18s var(--ease);
}
.ragTab:hover{color:var(--text)}
.ragTab.is-on{background:rgba(46,208,192,.18); color:#fff; border-color:rgba(94,236,208,.55)}

/* ---------- chunks ---------- */
.chunkList{
  display:flex; flex-direction:column; gap:8px;
  max-height:620px; overflow-y:auto; padding-right:4px;
}
.chunk{
  border:1px solid var(--line); border-radius:10px; background:rgba(3,7,12,.62);
  padding:9px 11px; transition:border-color .18s var(--ease), background .18s var(--ease);
}
.chunk.is-hit{border-color:rgba(94,236,208,.55); background:rgba(46,208,192,.09)}
.chunk.is-top{border-color:#6EE7B7; background:rgba(52,211,153,.11)}

.chunkHead{display:flex; align-items:center; gap:8px; margin-bottom:5px}
.chunkNo{
  font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted2); flex:0 0 auto;
}
.rankBadge{
  flex:0 0 auto; font-family:var(--mono); font-size:9.5px; font-weight:700;
  background:#6EE7B7; color:#04131a; border-radius:999px; padding:2px 8px;
}
.chunk.is-hit .rankBadge{background:rgba(94,236,208,.85)}
.scoreWrap{flex:1 1 auto; height:5px; border-radius:999px; background:rgba(255,255,255,.07); min-width:0}
.scoreBar{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,rgba(46,208,192,.7),#6EE7B7)}
.scoreNum{flex:0 0 auto; font-family:var(--mono); font-size:9.5px; color:var(--muted2)}

.chunkBody{font-size:12px; line-height:1.6; color:var(--muted); white-space:pre-wrap}
.chunkBody mark{background:rgba(251,191,36,.28); color:#FDE68A; border-radius:3px; padding:0 1px}
.chunkBody .ov{color:var(--muted2); background:rgba(167,139,250,.1); border-radius:3px}
.chunkHd{color:var(--b); font-family:var(--mono); font-size:10.5px; display:block; margin-bottom:3px}

.promptOut{margin:0; max-height:620px; overflow:auto}
.promptOut code{white-space:pre-wrap}

/* ---------- verdict + ranking ---------- */
.verdict{
  border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  font-size:12px; line-height:1.55; color:var(--muted); background:rgba(3,7,12,.6);
}
.verdict.good{border-color:rgba(52,211,153,.45); background:rgba(52,211,153,.1); color:#A7F3D0}
.verdict.bad{border-color:rgba(251,191,36,.45); background:rgba(251,191,36,.09); color:#FDE68A}
.verdict b{color:#fff}

.rankList{list-style:none; margin:0; padding:0; counter-reset:r; font-size:11.5px}
.rankList li{
  counter-increment:r; display:flex; gap:8px; align-items:baseline;
  padding:5px 0; border-bottom:1px solid rgba(255,255,255,.05); color:var(--muted2);
}
.rankList li:last-child{border-bottom:0}
.rankList li::before{
  content:counter(r); flex:0 0 auto; width:16px; font-family:var(--mono);
  font-size:9.5px; color:var(--b);
}
.rankList li.dropped{opacity:.42}
.rankList li.dropped::before{color:var(--muted2)}
.rankList .rTitle{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text)}
.rankList .rScore{flex:0 0 auto; font-family:var(--mono); font-size:9.5px}
.rankList .rMove{flex:0 0 auto; font-family:var(--mono); font-size:9.5px}
.rankList .rMove.up{color:#6EE7B7}
.rankList .rMove.down{color:#FCA5A5}

.costList{list-style:none; margin:0; padding:0; font-size:12px}
.costList li{display:flex; justify-content:space-between; gap:10px; padding:4px 0; color:var(--muted2)}
.costList li b{color:var(--b); font-family:var(--mono); font-size:11.5px}