/* Classic 4chan (Yotsuba, cream/red) theme — cloned for /vrfg/ */
:root{
  --bg:#FFFFEE; --title:#AF0A0F; --reply-bg:#F0E0D6; --reply-border:#D9BFB7;
  --name:#117743; --subject:#0F0C5D; --green:#789922; --link:#0000EE;
  --link-visited:#800080; --you:#FF0000; --label-bg:#EA8; --tan:#FEDCBA;
}
html,body{margin:0;padding:0;background:var(--bg);color:#000;
  font-family:arial,helvetica,sans-serif;font-size:13px;}
a{color:var(--link);text-decoration:none;}
a:visited{color:var(--link-visited);}
a:hover{color:#DD0000;}

/* ── top nav (board-list bar clone) ── */
#topnav{font-size:12px;padding:3px 6px;background:var(--reply-bg);
  border-bottom:1px solid var(--reply-border);}
#topnav .brk{color:#800000;}
#topnav a{color:#800000;}
#topnav a.active{font-weight:bold;color:var(--title);}

/* ── board header ── */
#boardtitle{text-align:center;margin:10px 0 0;}
#boardtitle .b{color:var(--title);font-family:Tahoma,sans-serif;font-size:28px;
  font-weight:bold;letter-spacing:-1px;line-height:1;}
#boardtitle .sub{color:var(--title);font-size:13px;font-weight:bold;}
hr{border:none;border-top:1px solid var(--reply-border);margin:8px 0;}

/* ── posts ── */
.thread{padding:2px 10px 60px;max-width:940px;}
.postinfo{font-size:13px;line-height:1.5;}
/* 4chan moderation checkbox (left of every post) + reply backlinks (after the post number) */
.postinfo .delbox{margin:0 3px 0 0;vertical-align:middle;width:13px;height:13px;}
.backlinks{margin-left:4px;}
.backlinks .backlink{font-size:11px;}
/* 👍/👎 reply rating (training signal). Outline icons (stroke only -> no skin tone, follows theme).
   Hidden until the "Thumbs" toggle (next to Post/Auto) is turned on. */
.rate{display:none;margin-left:6px;line-height:1;user-select:none;white-space:nowrap;vertical-align:middle;}
body.ratings-on .rate{display:inline-flex;align-items:center;gap:1px;}
.rate a{display:inline-flex;cursor:pointer;color:#888;opacity:.7;padding:0 2px;text-decoration:none;}
.rate .thumb{width:13px;height:13px;display:block;}
.rate a:hover{opacity:1;color:var(--link);}
.rate.rated a{pointer-events:none;opacity:.2;}
.rate.rated.up a.rup{opacity:1;color:var(--green);}    /* chosen good = green outline */
.rate.rated.down a.rdown{opacity:1;color:var(--you);}  /* chosen bad = red outline */
#thumbtoggle.on{outline:2px solid var(--title);outline-offset:-2px;}   /* toggle active state */
.name{color:var(--name);font-weight:bold;}
.subject{color:var(--subject);font-weight:bold;}
.you{color:var(--you);font-weight:bold;}
.postno a{color:#000;}
.postno a:hover{color:#DD0000;}
.comment{margin:6px 0 4px 20px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word;}
.greentext{color:var(--green);}
.quotelink{color:var(--link);}

/* hovering a >>NNN highlights the referenced post (.qhl) and shows a floating clone (.preview) */
.qhl{border-color:#D04040 !important;background:#F8D8C8 !important;}
.preview{position:fixed;z-index:1000;pointer-events:none;max-width:520px;
  background:var(--reply-bg);border:1px solid var(--reply-border);padding:3px 8px 8px;
  box-shadow:2px 2px 8px rgba(0,0,0,.35);}

/* flow-root so the OP box CONTAINS its floated thumbnail — a tall OP pic would otherwise
   overflow the short text box and spill down into the replies below (display:block doesn't
   contain floats; .reply is display:table which already does). */
.op{margin:6px 0 14px;display:flow-root;}
.reply{display:table;background:var(--reply-bg);border:1px solid var(--reply-border);
  padding:3px 8px 8px;margin:4px 0;max-width:860px;}
.reply.loading{color:#888;font-style:italic;}

/* ── postbox (reply form clone) ── */
#postform{position:sticky;bottom:8px;margin:14px 10px;border:1px solid #800000;
  background:var(--reply-bg);width:fit-content;max-width:92vw;box-shadow:0 1px 4px rgba(0,0,0,.25);}
#postform table{border-collapse:collapse;width:auto;}
#postform td{border:1px solid #aaa;padding:3px;}
#postform td.lbl{background:var(--label-bg);font-weight:bold;font-size:12px;width:64px;
  text-align:center;color:#000;}
#postform input[type=text]{width:100%;box-sizing:border-box;border:1px solid #aaa;}
#postform textarea{width:480px;max-width:calc(92vw - 90px);box-sizing:border-box;height:84px;font-family:inherit;font-size:13px;border:1px solid #aaa;resize:both;}
#postform .postbtn{font-weight:bold;padding:1px 10px;}
#postform .postbtn:disabled{opacity:.45;cursor:not-allowed;}   /* dim Post + Auto while a reply is generating */

/* ── stats ── */
.note{margin:12px 10px;color:#800000;font-style:italic;}
.note code{font-style:normal;background:#0001;padding:0 3px;}
.statgrid{display:flex;flex-wrap:wrap;gap:12px;padding:8px 10px;}
.statcard{background:var(--reply-bg);border:1px solid var(--reply-border);padding:10px 14px;min-width:150px;flex:1 1 150px;}
.statcard h3{margin:0 0 6px;color:var(--subject);font-size:13px;}
.statcard .big{font-size:26px;color:var(--title);font-weight:bold;line-height:1.1;}
.cardsub{font-size:11px;color:#888;margin-top:3px;}
.statsec{margin:20px 10px 4px;color:var(--title);font-size:16px;border-bottom:1px solid var(--reply-border);padding-bottom:3px;}
.statsec .dim{color:#999;font-weight:normal;font-size:12px;}
.chart{margin:6px 10px;background:var(--reply-bg);border:1px solid var(--reply-border);padding:12px 14px;}
.hbars{display:flex;flex-direction:column;gap:5px;}
.hbar{display:flex;align-items:center;gap:8px;font-size:12px;}
.hlabel{flex:0 0 92px;text-align:right;color:var(--subject);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.htrack{flex:1;background:#0001;height:15px;}
.hfill{display:block;height:100%;background:var(--title);opacity:.78;}
.hval{flex:0 0 60px;color:#555;}
.vbars{display:flex;align-items:flex-end;gap:2px;height:150px;}
.vbar{flex:1;background:var(--title);opacity:.72;min-height:2px;}
.vbar:hover{opacity:1;}
.vaxis{display:flex;justify-content:space-between;font-size:11px;color:#888;margin-top:5px;}

/* ── donation note (bottom of stats) ── */
.donate{margin:18px 10px 28px;padding:10px 14px;background:var(--reply-bg);
  border:1px solid var(--reply-border);font-size:12px;color:#444;max-width:860px;}
.donate strong{color:var(--title);}
.donate .xmr{display:block;margin-top:6px;padding:5px 7px;background:#0001;color:#222;
  font-family:monospace;font-size:11px;word-break:break-all;cursor:pointer;}
.donate .xmr:hover{background:#0002;}
.donate .xmr.copied::after{content:' ✓ copied';color:var(--name);font-family:arial,sans-serif;font-weight:bold;}

/* ── search (direct RAG lookup) ── */
.searchbar{display:flex;gap:6px;margin:14px 10px 6px;}
.searchbar input{flex:1;max-width:560px;padding:5px 8px;border:1px solid #aaa;font-size:14px;box-sizing:border-box;}
.searchbar button{font-weight:bold;padding:3px 18px;}
/* claims / summaries segmented toggle */
.searchmode{margin:0 10px 8px;display:flex;}
.searchmode .modebtn{font:inherit;font-size:12px;padding:3px 14px;border:1px solid #aaa;
  background:var(--reply-bg);color:#333;cursor:pointer;}
.searchmode .modebtn + .modebtn{border-left:none;}
.searchmode .modebtn.active{background:var(--title);color:#fff;font-weight:bold;border-color:var(--title);}
#results{margin:0 10px;}
.result{background:var(--reply-bg);border:1px solid var(--reply-border);padding:6px 10px 8px;margin:6px 0;max-width:860px;}
.result .rmeta{font-size:12px;color:#777;margin-bottom:3px;}
.result .rtype{color:var(--subject);font-weight:bold;text-transform:capitalize;margin-right:3px;}
.result .rtext{line-height:1.5;}
.result .rtags{margin-top:5px;}
.result .rtag{display:inline-block;background:#0001;color:#555;font-size:11px;padding:1px 6px;margin:2px 3px 0 0;}
.result .dim{color:#999;}
/* boundary between the cross-encoder-reranked top block and the bi-encoder (cosine) tail */
.rdivider{margin:14px 10px 4px;padding-top:6px;border-top:1px dashed var(--reply-border);
  color:#999;font-size:11px;font-style:italic;}

/* ── admin viewer ── */
.adminbar{display:flex;gap:10px;align-items:center;margin:14px 10px 6px;}
.sessbtn{display:block;width:100%;max-width:860px;text-align:left;margin:4px 10px;padding:6px 10px;
  background:var(--reply-bg);border:1px solid var(--reply-border);cursor:pointer;font:inherit;
  font-size:12px;color:inherit;}
.sessbtn:hover{border-color:var(--title);}
.sessbtn.open{border-color:var(--title);border-left:3px solid var(--title);}
.sessbtn .sessprev{display:block;color:#888;font-size:11px;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#sessionview .reply.apost{border-left:3px solid var(--subject);}   /* user posts stand out from bot posts */
.adminrate{margin-left:4px;}
.adminrate.up{filter:none;}

/* ── banner / favicon / post images (images ready later) ── */
/* fixed 300x100 box (all /trash/ banners are 300x100) so the space is reserved before the
   image loads — prevents the page below from jumping on reload (no layout shift) */
.banner{display:block;margin:0 auto 4px;border:1px solid var(--reply-border);width:300px;max-width:92vw;aspect-ratio:3/1;height:auto;object-fit:cover;}
.thumb{float:left;margin:3px 14px 3px 0;max-width:125px;max-height:125px;border:none;cursor:pointer;}
.op .thumb{max-width:250px;max-height:250px;}   /* OP thumbs are 250px on 4chan; replies stay 125px */
.thumb.expanded{float:none;display:block;max-width:100%;max-height:none;margin:4px 0;}

/* ── mobile ── */
@media (max-width:600px){
  body{font-size:14px;}
  #boardtitle .b{font-size:34px;}
  .banner{max-width:92%;}
  .thread{padding:2px 6px 90px;}
  .reply{display:block;max-width:100%;}
  .comment{margin-left:10px;}
  #postform{width:auto;max-width:none;margin:10px 6px;}
  #postform table{width:100%;}
  #postform textarea{width:100%;height:70px;}
  .thumb{max-width:90px;max-height:90px;margin-right:10px;}
  .op .thumb{max-width:150px;max-height:150px;}
}