:root {
  --ground: #f6f7fa; --surface: #fff; --surface-2: #eef1f6; --surface-3: #e4e9f1;
  --ink: #131820; --ink-2: #48525f; --ink-3: #7c8794;
  --rule: #dce1e9; --rule-strong: #bfc7d2;
  --accent: #8a5e00; --accent-mark: rgba(255,202,64,.45); --accent-line: #c99700;
  --good: #0c6f60; --warn: #a8452a; --info: #2d5d8a;
  --mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --ground:#0d1117; --surface:#151b23; --surface-2:#1c242e; --surface-3:#232c38;
    --ink:#e3e9f1; --ink-2:#a0abba; --ink-3:#6c7887;
    --rule:#262e3a; --rule-strong:#3a4552;
    --accent:#f0b429; --accent-mark:rgba(240,180,41,.26); --accent-line:#f0b429;
    --good:#2fcbae; --warn:#f08a65; --info:#7fb2e5;
  }
}
* { box-sizing: border-box; }
body {
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap { max-width:1100px; margin:0 auto; padding:0 20px 80px; }

/* header */
header { padding:34px 0 22px; border-bottom:1px solid var(--rule); margin-bottom:24px; }
.brand { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
h1 { font-size:20px; margin:0; letter-spacing:-.01em; font-weight:700; }
.brand .sub { color:var(--ink-3); font-size:13px; }
.brand a { color:var(--ink-3); font-size:13px; margin-left:auto; text-decoration:none; border-bottom:1px solid var(--rule-strong); }
.brand a:hover { color:var(--ink); border-color:var(--accent); }

/* search */
.searchbar { display:flex; gap:8px; margin:20px 0 12px; }
#q {
  flex:1; padding:13px 15px; font:inherit; color:var(--ink);
  background:var(--surface); border:1px solid var(--rule-strong); border-radius:3px;
}
#q:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:transparent; }
button {
  font:inherit; font-weight:600; padding:13px 22px; border-radius:3px; cursor:pointer;
  background:var(--ink); color:var(--ground); border:1px solid var(--ink);
}
button:hover { opacity:.88; }
button:disabled { opacity:.45; cursor:not-allowed; }
button.ghost { background:transparent; color:var(--ink-2); border-color:var(--rule-strong); font-weight:500; padding:7px 12px; }
button.ghost:hover { color:var(--ink); border-color:var(--accent); opacity:1; }

/* pipeline controls */
.controls { display:flex; flex-wrap:wrap; gap:14px 18px; align-items:center; font-size:12.5px; color:var(--ink-2); padding-bottom:18px; border-bottom:1px solid var(--rule); }
.controls label { display:flex; align-items:center; gap:6px; cursor:pointer; user-select:none; }
.controls select { font:inherit; font-size:12.5px; padding:3px 6px; background:var(--surface); color:var(--ink); border:1px solid var(--rule-strong); border-radius:3px; }
.controls .grp { display:flex; gap:14px; align-items:center; padding-right:18px; border-right:1px solid var(--rule); }
.controls .grp:last-of-type { border-right:none; }
.hint { color:var(--ink-3); font-size:12px; }

/* examples */
.examples { display:flex; flex-wrap:wrap; gap:7px; margin:16px 0 4px; }
.examples b { font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); align-self:center; margin-right:4px; }
.chip { font:inherit; font-size:12.5px; padding:5px 11px; background:var(--surface-2); border:1px solid var(--rule); border-radius:20px; color:var(--ink-2); cursor:pointer; }
.chip:hover { border-color:var(--accent); color:var(--ink); }

/* status strip */
.strip { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; font-family:var(--mono); font-size:11.5px; color:var(--ink-3); margin:20px 0 14px; }
.pill { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:3px; border:1px solid currentColor; font-weight:600; letter-spacing:.03em; }
.pill.ok { color:var(--good); } .pill.warn { color:var(--warn); } .pill.info { color:var(--info); } .pill.mute { color:var(--ink-3); }
.meter { display:inline-flex; align-items:center; gap:7px; }
.meter .track { width:90px; height:5px; background:var(--surface-3); border-radius:3px; overflow:hidden; }
.meter .fill { height:100%; background:var(--accent-line); }
.meter .tick { width:1px; height:9px; background:var(--ink-3); margin-left:-1px; }

/* answer */
.answer { background:var(--surface); border:1px solid var(--rule); border-left:3px solid var(--accent); border-radius:3px; padding:20px 22px; margin-bottom:8px; }
.answer.abstained { border-left-color:var(--warn); }
.answer.degraded { border-left-color:var(--ink-3); }
.answer p { margin:0 0 12px; max-width:70ch; }
.answer p:last-child { margin-bottom:0; }
.cite {
  font-family:var(--mono); font-size:11px; font-weight:700; padding:1px 5px; border-radius:3px;
  background:var(--accent-mark); color:var(--ink); cursor:pointer; border:none; vertical-align:.08em;
}
.cite:hover { outline:1px solid var(--accent); }
.warnline { font-size:12.5px; color:var(--warn); margin-top:14px; padding-top:12px; border-top:1px solid var(--rule); }

/* results */
h2.sec { font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); margin:30px 0 12px; font-weight:700; }
.hit { background:var(--surface); border:1px solid var(--rule); border-radius:3px; padding:15px 17px; margin-bottom:9px; }
.hit-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:5px; }
.hit-rank { font-family:var(--mono); font-size:12px; color:var(--ink-3); min-width:22px; }
.hit-cite { font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--ink); }
.hit-score { font-family:var(--mono); font-size:11.5px; color:var(--accent); margin-left:auto; }
.hit-heading { font-size:13.5px; color:var(--ink-2); margin-bottom:7px; }
.hit-text { font-size:13.5px; color:var(--ink-2); max-width:88ch; }
.hit-meta { display:flex; gap:14px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:9px; padding-top:9px; border-top:1px solid var(--rule); }
.hit-meta .prov { color:var(--info); }
.hit a.src { color:var(--ink-3); text-decoration:none; border-bottom:1px solid var(--rule-strong); }
.hit a.src:hover { color:var(--ink); border-color:var(--accent); }

/* source drawer */
.drawer { position:fixed; inset:0 0 0 auto; width:min(720px,94vw); background:var(--surface); border-left:1px solid var(--rule-strong); box-shadow:-16px 0 40px rgba(0,0,0,.16); transform:translateX(100%); transition:transform .18s ease; z-index:50; display:flex; flex-direction:column; }
.drawer.open { transform:translateX(0); }
.drawer-head { padding:18px 22px; border-bottom:1px solid var(--rule); display:flex; align-items:flex-start; gap:12px; }
.drawer-head h3 { margin:0 0 3px; font-size:14px; font-family:var(--mono); }
.drawer-head p { margin:0; font-size:13px; color:var(--ink-2); }
.drawer-body { overflow-y:auto; padding:22px; white-space:pre-wrap; font-size:13.5px; line-height:1.68; color:var(--ink-2); }
.drawer-body mark { background:var(--accent-mark); color:var(--ink); padding:1px 0; box-shadow:0 1px 0 var(--accent-line); }
.scrim { position:fixed; inset:0; background:rgba(10,14,20,.42); opacity:0; pointer-events:none; transition:opacity .18s; z-index:40; }
.scrim.open { opacity:1; pointer-events:auto; }
.close { background:none; border:none; color:var(--ink-3); font-size:22px; line-height:1; cursor:pointer; padding:0 4px; margin-left:auto; }
.close:hover { color:var(--ink); }

.empty { color:var(--ink-3); font-size:13.5px; padding:26px 0; }
.err { color:var(--warn); font-size:13.5px; padding:14px 0; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }
@media (max-width:640px) { .searchbar { flex-direction:column; } .controls .grp { border-right:none; } }

/* ---- static build: model loading + BYO key ---- */
.boot { background:var(--surface); border:1px solid var(--rule); border-radius:3px; padding:18px 20px; margin:20px 0; }
.boot h3 { margin:0 0 10px; font-size:13px; font-family:var(--mono); font-weight:600; }
.boot-step { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-2); padding:3px 0; font-family:var(--mono); }
.boot-step .dot { width:7px; height:7px; border-radius:50%; background:var(--rule-strong); flex:none; }
.boot-step.done .dot { background:var(--good); }
.boot-step.active .dot { background:var(--accent-line); animation:pulse 1s ease-in-out infinite; }
.boot-step.err .dot { background:var(--warn); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.boot .bar { height:4px; background:var(--surface-3); border-radius:3px; overflow:hidden; margin-top:12px; }
.boot .bar span { display:block; height:100%; background:var(--accent-line); width:0; transition:width .3s; }
.boot .note { font-size:12px; color:var(--ink-3); margin-top:10px; }
.keyrow { display:flex; gap:8px; align-items:center; margin-top:12px; flex-wrap:wrap; }
.keyrow input { flex:1; min-width:220px; padding:9px 11px; font:inherit; font-size:13px; background:var(--surface-2);
  border:1px solid var(--rule-strong); border-radius:3px; color:var(--ink); }
.keyrow input:focus { outline:2px solid var(--accent); outline-offset:1px; }
.keyrow small { color:var(--ink-3); font-size:12px; width:100%; }
@media (prefers-reduced-motion: reduce) { .boot-step.active .dot { animation:none } }

/* Class selectors like .searchbar{display:flex} beat the UA [hidden] rule, so
   elements hidden during boot render anyway. Force it. */
[hidden] { display: none !important; }