:root{--bg:#fbfaf8;--card:#fff;--ink:#1b1a17;--dim:#6b6862;--line:#e5e1d9;
--accent:#8a5a2b;--good:#2f6b3f;--bad:#a8341f;--warn:#8a6d1f;--tint:#f3efe7}
@media(prefers-color-scheme:dark){:root{--bg:#16151a;--card:#1e1d23;--ink:#eceaf0;
--dim:#9d99a6;--line:#312f38;--accent:#d59a5c;--good:#7fc08c;--bad:#e88a72;
--warn:#dcbc63;--tint:#26242c}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
font:16px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
gap:6px 14px;padding:10px 14px;border-bottom:1px solid var(--line);
background:var(--card);position:sticky;top:0;z-index:9}
.home{font-weight:650;text-decoration:none;color:var(--ink);letter-spacing:-.01em}
nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
nav::-webkit-scrollbar{display:none}
nav a{padding:6px 10px;border-radius:8px;text-decoration:none;color:var(--dim);
font-size:14px;white-space:nowrap}
/* On a phone the nav gets its own full-width row underneath, scrolling
   sideways, instead of wrapping around the name and the sign-out link. */
@media(max-width:620px){
  header{grid-template-columns:1fr auto}
  nav{grid-column:1/-1;order:3;margin:0 -14px;padding:0 14px}
}
nav a:hover{background:var(--tint);color:var(--ink)}
nav a.on{background:var(--tint);color:var(--ink);font-weight:600}
.pill{margin-left:6px;background:var(--bad);color:#fff;border-radius:9px;
padding:0 6px;font-size:11px;font-weight:700}
.out button{background:none;border:0;color:var(--dim);font-size:13px;cursor:pointer;padding:6px}
main{max-width:760px;margin:0 auto;padding:20px 16px 80px}
main.wide{max-width:1040px}
h1{font-size:22px;margin:0 0 4px;letter-spacing:-.02em}
h2{font-size:15px;margin:26px 0 10px;color:var(--dim);font-weight:600;
text-transform:uppercase;letter-spacing:.06em}
p{margin:0 0 12px}
.sub{color:var(--dim);font-size:14px;margin:0 0 18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;
padding:14px 16px;margin:0 0 12px}
.row{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.grow{flex:1;min-width:0}
.dim{color:var(--dim)}
.small{font-size:13px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
a{color:var(--accent)}
.tag{display:inline-block;font-size:11px;padding:2px 7px;border-radius:99px;
border:1px solid var(--line);color:var(--dim);background:var(--tint);
text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.tag.canon{border-color:var(--accent);color:var(--accent)}
.tag.observation{border-color:var(--good);color:var(--good)}
.tag.inference{border-color:var(--warn);color:var(--warn)}
.tag.refuted,.tag.needs_review{border-color:var(--bad);color:var(--bad)}
button,.btn{font:inherit;font-size:14px;padding:8px 14px;border-radius:9px;
border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;
text-decoration:none;display:inline-block}
button:hover,.btn:hover{background:var(--tint)}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.primary:hover{filter:brightness(1.08)}
button.danger{color:var(--bad);border-color:var(--bad)}
button:disabled{opacity:.5;cursor:default}
input[type=text],input[type=password],input[type=search],textarea,select{
font:inherit;width:100%;padding:10px 12px;border:1px solid var(--line);
border-radius:9px;background:var(--card);color:var(--ink)}
textarea{resize:vertical;min-height:76px}
form.inline{display:inline}
.msg{margin:0 0 16px}
.msg .who{font-size:12px;color:var(--dim);margin-bottom:4px;
text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.msg.you .bubble{background:var(--tint);border:1px solid var(--line);
border-radius:12px;padding:10px 14px}
.msg.agent .bubble p{margin:0 0 10px}
.msg.system .bubble{border-left:3px solid var(--bad);padding-left:12px;color:var(--bad)}
.cardlet{border:1px solid var(--line);border-left:3px solid var(--accent);
background:var(--card);border-radius:10px;padding:12px 14px;margin:10px 0}
.cardlet.done{border-left-color:var(--good);opacity:.75}
.cardlet.gone{border-left-color:var(--line);opacity:.55}
.cardlet.bad{border-left-color:var(--bad)}
.cardlet .claim{margin:6px 0 8px}
.acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
/* Deliberately NOT sticky. A composer pinned to the bottom sits on top of
   the cards, and the cards are the part of this page that matters — they
   are where a decision gets made. */
.composer{background:var(--bg);padding:14px 0 0;margin-top:18px;
border-top:1px solid var(--line)}
.ctitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thinking{color:var(--dim);font-size:14px;display:flex;gap:8px;align-items:center}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
animation:pulse 1.1s infinite}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
color:var(--dim);padding:6px 8px;border-bottom:1px solid var(--line)}
td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
/* Every rule here is in the stylesheet rather than an inline style=
   attribute, because the content policy this console sends blocks inline
   styles — quietly. The first version scattered a dozen of them, so the
   red on "this cannot be filed" and the whole bar chart simply did not
   render, with nothing to say so. */
.bar{display:block;min-width:2px}
.bar rect{fill:var(--accent)}
.wk{width:80px}
.num{width:40px}
.warn{color:var(--bad)}
.good{color:var(--good)}
.gap{margin-top:6px}
.foot{padding-top:8px}
.bigclaim{font-size:19px;font-weight:500;line-height:1.45}
.empty{color:var(--dim);padding:26px 0;text-align:center}
.err{background:var(--card);border:1px solid var(--bad);color:var(--bad);
border-radius:10px;padding:10px 14px;margin:0 0 14px}
.ok{background:var(--card);border:1px solid var(--good);color:var(--good);
border-radius:10px;padding:10px 14px;margin:0 0 14px}
.login{max-width:340px;margin:14vh auto}
.fullw{width:100%}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.filters select,.filters input{width:auto;flex:1;min-width:120px}