/* SciWay MVP web app — design tokens lifted from the product design mock. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  --bg:#f5f6f9; --surface:#ffffff; --surface-2:#f0f2f6; --surface-3:#e8ecf2;
  --border:#e4e8ef; --border-strong:#d4dae4;
  --text:#151b27; --text-2:#586173; --text-3:#8b94a5;
  --accent:#2f6bed; --accent-2:#1f56cf; --accent-weak:#eaf1fe; --on-accent:#fff;
  --paper:#3b82f6; --experiments:#0ea372; --sops:#8b5cf6; --decisions:#ef8b2c;
  --results:#06b6d4; --other:#8b94a5;
  --good:#0ea372; --warn:#ef8b2c; --bad:#e5484d;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.05);
  --shadow-md:0 4px 14px -4px rgba(16,24,40,.12);
  --shadow-lg:0 16px 40px -10px rgba(16,24,40,.20);
  --graph-bg:#fbfcfe; --edge:#c5cedb; --radius:14px;
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; height:100%; }
body { font-family:'IBM Plex Sans',system-ui,sans-serif; background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; display:flex; }
a { color:inherit; text-decoration:none; }
code,.mono { font-family:'IBM Plex Mono',monospace; }

/* sidebar */
.sidebar { width:260px; min-width:260px; height:100vh; background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; position:sticky; top:0; }
.brand { display:flex; gap:12px; align-items:center; padding:20px 18px; }
.brand .logo { width:42px; height:42px; border-radius:11px; background:linear-gradient(135deg,#4f8bff,#2f6bed);
  display:grid; place-items:center; color:#fff; box-shadow:var(--shadow-md); }
.brand h1 { font-size:16px; margin:0; font-weight:700; }
.brand .sub { font-size:12px; color:var(--text-2); }
.nav-group { padding:6px 12px; }
.nav-group .label { font-size:11px; letter-spacing:.08em; color:var(--text-3); padding:14px 10px 6px; font-weight:600; }
.nav a { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; color:var(--text-2);
  font-weight:500; font-size:14.5px; margin:2px 0; }
.nav a:hover { background:var(--surface-2); color:var(--text); }
.nav a.active { background:var(--accent-weak); color:var(--accent-2); font-weight:600; }
.nav a svg { width:18px; height:18px; flex:none; }
.who { margin-top:auto; padding:16px; border-top:1px solid var(--border); display:flex; gap:11px; align-items:center; }
.avatar { width:34px; height:34px; border-radius:50%; background:#dbe6ff; color:var(--accent-2); display:grid; place-items:center;
  font-size:13px; font-weight:600; }

/* main */
.main { flex:1; min-width:0; height:100vh; overflow:auto; }
.topbar { height:60px; border-bottom:1px solid var(--border); background:var(--surface); display:flex; align-items:center;
  justify-content:space-between; padding:0 28px; position:sticky; top:0; z-index:5; }
.topbar .title { font-weight:600; }
.pill { border:1px solid var(--border-strong); border-radius:999px; padding:7px 14px; font-size:13px; color:var(--text-2);
  background:var(--surface); display:inline-flex; gap:7px; align-items:center; }
.content { padding:30px 32px 64px; max-width:1180px; }
h2.page { font-size:30px; margin:0 0 4px; letter-spacing:-.01em; }
.page-sub { color:var(--text-2); margin:0 0 24px; }
.accent { color:var(--accent-2); font-weight:600; }

/* cards */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:20px; }
.grid { display:grid; gap:16px; }
.metrics { grid-template-columns:repeat(4,1fr); }
.metric .k { font-size:13px; color:var(--text-2); display:flex; justify-content:space-between; align-items:center; }
.metric .v { font-size:34px; font-weight:700; margin-top:8px; letter-spacing:-.02em; }
.metric .d { font-size:12.5px; color:var(--good); margin-top:6px; }
.two-col { grid-template-columns:1.1fr 1fr; }
.section-h { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.section-h h3 { margin:0; font-size:17px; }
.muted { color:var(--text-2); } .small { font-size:13px; } .tiny { font-size:12px; }

/* search / ask box */
.ask { display:flex; gap:10px; align-items:center; background:var(--surface); border:1px solid var(--border-strong);
  border-radius:12px; padding:6px 6px 6px 16px; box-shadow:var(--shadow); }
.ask:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-weak); }
.ask input { flex:1; border:0; outline:0; font-size:15px; background:transparent; color:var(--text); padding:10px 0; font-family:inherit; }
.btn { background:var(--accent); color:#fff; border:0; border-radius:9px; padding:11px 18px; font-weight:600; cursor:pointer;
  font-size:14px; font-family:inherit; display:inline-flex; gap:8px; align-items:center; }
.btn:hover { background:var(--accent-2); }
.btn.ghost { background:var(--surface); color:var(--text); border:1px solid var(--border-strong); }
.btn.ghost:hover { background:var(--surface-2); }

/* list rows */
.row { display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--border); align-items:flex-start; }
.row:first-child { border-top:0; }
.row .ic { width:32px; height:32px; border-radius:9px; background:var(--surface-2); display:grid; place-items:center; flex:none; color:var(--text-2); }
/* inline SVG icons (replace emoji; render everywhere) */
.iicon { width:1em; height:1em; vertical-align:-0.14em; flex:none; }
.row .ic .iicon { width:18px; height:18px; }
.btn .iicon { vertical-align:-0.16em; margin-right:3px; }
.metric .k .iicon { width:16px; height:16px; color:var(--text-3); }
.ask .iicon { width:18px; height:18px; }
.tag { font-size:11px; padding:3px 9px; border-radius:999px; font-weight:600; display:inline-block; }
.tag.family { background:var(--surface-3); color:var(--text-2); }

/* status badges */
.badge { font-size:12px; padding:4px 11px; border-radius:999px; font-weight:600; display:inline-flex; gap:6px; align-items:center; }
.badge.supported { background:#e7f7f0; color:#0a7a55; }
.badge.conflicting_evidence,.badge.conflict { background:#fdf0e3; color:#b96712; }
.badge.insufficient_evidence,.badge.refusal { background:#fdeaea; color:#bb2b30; }
.badge.in_progress { background:var(--accent-weak); color:var(--accent-2); }
.badge.completed { background:#e7f7f0; color:#0a7a55; }
.badge.draft { background:var(--surface-3); color:var(--text-2); }
/* "Blocked" needs its own signal (not the same grey as "To do") — reuses the amber "needs
   attention" semantic already used for conflicting evidence. */
.badge.blocked { background:#fdf0e3; color:#b96712; }
.badge.signed { background:#ece7fb; color:#6b46c1; }
.dot { width:7px; height:7px; border-radius:50%; background:currentColor; }

/* agent */
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 18px; }
.chip { border:1px solid var(--border-strong); background:var(--surface); border-radius:999px; padding:8px 13px; font-size:13px;
  cursor:pointer; color:var(--text-2); }
.chip:hover { border-color:var(--accent); color:var(--accent-2); background:var(--accent-weak); }
.answer { margin-top:8px; }
.answer .draft { font-size:15.5px; line-height:1.6; margin:12px 0 4px; }
.diag { border-left:3px solid var(--border-strong); padding:8px 14px; color:var(--text-2); font-size:13.5px; margin:12px 0; background:var(--surface-2); border-radius:8px; }
.diag.conflict { border-color:var(--decisions); }
.diag.refusal { border-color:var(--bad); }
.sources-h { font-size:12px; letter-spacing:.06em; color:var(--text-3); font-weight:600; margin:18px 0 8px; }
.src { border:1px solid var(--border); border-radius:11px; padding:13px 15px; margin-bottom:10px; background:var(--surface); }
.src .meta { display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin-bottom:7px; }
.src .ttl { font-weight:600; font-size:14.5px; }
.src .quote { font-size:13.5px; color:var(--text-2); border-left:2px solid var(--border-strong); padding-left:11px; line-height:1.5; }
.src .uri { font-size:11.5px; color:var(--text-3); margin-top:7px; }
/* Visual PDF citation highlight: a tiny page "minimap" per cited page showing where on the source
   page the quote sits (rendered purely from the normalized bboxes documents.py attaches to PDF
   chunks — no PDF rasterization). */
.pagemaps { display:flex; gap:10px; flex-wrap:wrap; margin-top:9px; }
.pagemap { margin:0; display:flex; flex-direction:column; align-items:center; gap:2px; }
.pagemap svg { display:block; border-radius:2px; }
.pagemap .bbox-page { fill:var(--surface); stroke:var(--border-strong); stroke-width:0.6; }
.pagemap .bbox-hl { fill:var(--accent); fill-opacity:.30; stroke:var(--accent); stroke-width:0.5; stroke-opacity:.75; }
.pagemap figcaption { font-size:10.5px; line-height:1; }
/* RCS optional evidence re-ranker: LLM-judged relevance chip + AI-distilled evidence line. */
.tag.rcs { background:var(--accent-weak); color:var(--accent-2); font-weight:600; }
.src .rcs-summary { color:var(--text-3); font-style:italic; border-left:2px dashed var(--accent); padding-left:11px; margin-top:6px; line-height:1.5; }
.src.gap { border-left:3px solid var(--accent); }
.src.gap .gap-ask { margin-top:9px; }
.ev { font-size:11px; padding:2px 8px; border-radius:6px; font-weight:600; }
.ev.expected_support { background:#e7f7f0; color:#0a7a55; }
.ev.supporting_context { background:var(--accent-weak); color:var(--accent-2); }
.ev.conflict_evidence { background:#fdf0e3; color:#b96712; }
.ev.refusal_context { background:#fdeaea; color:#bb2b30; }

/* conversation: appended Q&A message list + inline citation anchors + guided ingestion (Part 3) */
.answers { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.cite-anchor { color:var(--accent-2); font-weight:600; text-decoration:none; cursor:pointer; }
.cite-anchor:hover { text-decoration:underline; }
.src .cite-tag { color:var(--text-3); }
.src.cite-hit { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-weak); transition:box-shadow .2s, border-color .2s; }
.addev { margin:12px 0 4px; }
.addev .addev-form { margin-top:6px; }
.addev .addev-title, .addev .addev-text { width:100%; box-sizing:border-box; border:1px solid var(--border-strong); border-radius:9px;
  padding:9px 11px; font-size:14px; font-family:inherit; background:var(--surface); color:var(--text); margin-bottom:6px; }
.addev .addev-text { resize:vertical; line-height:1.5; }

/* experiments */
.split { display:grid; grid-template-columns:320px 1fr; gap:18px; align-items:start; }
.explist .item { border:1px solid var(--border); border-radius:11px; padding:13px 14px; margin-bottom:10px; cursor:pointer; background:var(--surface); }
.explist .item:hover { border-color:var(--accent); }
.explist .item.active { border-color:var(--accent); box-shadow:var(--shadow-md); }
.explist .code { font-size:11px; color:var(--text-3); font-family:'IBM Plex Mono',monospace; }
.params { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:6px 0 4px; }
.params .p .pl { font-size:11px; color:var(--text-3); }
.params .p .pv { font-size:14px; font-weight:500; margin-top:3px; }
.steps { counter-reset:s; padding:0; margin:6px 0 0; list-style:none; }
.steps li { counter-increment:s; display:flex; gap:11px; padding:7px 0; font-size:14px; line-height:1.5; }
.steps li::before { content:counter(s); width:22px; height:22px; border-radius:50%; background:var(--accent-weak); color:var(--accent-2);
  font-size:12px; font-weight:600; display:grid; place-items:center; flex:none; }

/* graph */
.legend { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.legend .l { display:inline-flex; gap:7px; align-items:center; font-size:13px; color:var(--text-2);
  border:1px solid var(--border); border-radius:999px; padding:5px 12px; background:var(--surface); }
.legend .l .sw { width:10px; height:10px; border-radius:50%; }
.legend .l .eln { width:16px; height:4px; border-radius:2px; }   /* typed-edge legend swatch (line, not dot) */
.graph-wrap { background:var(--graph-bg); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; position:relative; }
.graph-wrap svg { display:block; width:100%; height:560px; }
.gnode circle { cursor:pointer; transition:opacity .15s; }
.tedge:hover line { stroke-width:4; }                            /* highlight a typed relation edge on hover */
.gnode text { font-size:10px; pointer-events:none; font-weight:500; }
.gedge { stroke:var(--edge); stroke-width:1.4; }
.gedge.contradicts { stroke:#e5848a; stroke-dasharray:5 4; }
.gedge-label { font-size:9px; fill:var(--text-3); }
.node-detail { position:absolute; top:12px; right:12px; width:260px; background:var(--surface); border:1px solid var(--border);
  border-radius:11px; padding:14px; box-shadow:var(--shadow-lg); font-size:13px; }

/* fair */
.bar { height:8px; border-radius:999px; background:var(--surface-3); overflow:hidden; margin-top:8px; }
.bar > span { display:block; height:100%; background:var(--good); }
table.fair { width:100%; border-collapse:collapse; font-size:13.5px; margin-top:6px; }
table.fair th, table.fair td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--border); }
table.fair th { font-size:11.5px; letter-spacing:.04em; color:var(--text-3); font-weight:600; }
.ok { color:var(--good); font-weight:600; } .miss { color:var(--warn); }
.note { font-size:12.5px; color:var(--text-2); background:var(--surface-2); border-radius:9px; padding:11px 14px; margin-top:14px; line-height:1.55; }
.spin { color:var(--text-3); padding:40px 0; text-align:center; }
/* cold-visitor intro banner (QR landing) */
.intro { display:flex; align-items:center; gap:14px; padding:11px 28px; background:var(--accent-weak);
  border-bottom:1px solid var(--border); color:var(--text); font-size:13.5px; }
.intro.hidden { display:none; }
.intro-body { flex:1; line-height:1.5; }
.intro-cta { color:var(--accent-2); font-weight:600; margin-left:8px; white-space:nowrap; }
.intro-link { color:var(--accent-2); margin-left:12px; text-decoration:underline; white-space:nowrap; }
.intro-x { border:0; background:transparent; color:var(--text-2); font-size:20px; line-height:1; cursor:pointer; padding:2px 6px; border-radius:8px; }
.intro-x:hover { background:var(--surface-2); }
@media (max-width:880px){ .metrics{grid-template-columns:repeat(2,1fr);} .two-col,.split{grid-template-columns:1fr;} .params{grid-template-columns:repeat(2,1fr);} }