/* Work queue — see DESIGN.md.
   Complete light palette on bare :root; dark redefines only tokens. */
:root{
  --bg:#F4F5F7; --surface:#FFFFFF; --surface-2:#EDEFF3; --sunken:#E7EAEF;
  --line:#DCE0E6; --line-2:#C9CFD8;
  --ink:#161A20; --muted:#5E6673; --faint:#8A929E;
  --accent:#1F3A6E; --accent-ink:#FFFFFF; --accent-wash:#EDF1F8;
  --attn:#9A5B00; --attn-bg:#FDF3E3;
  --good:#1B6640; --good-bg:#E8F3EC;
  --bad:#A63C37;  --bad-bg:#FBECEA;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;
  --cond:"IBM Plex Sans Condensed",var(--sans);
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:10px; --rail:188px;
  --shadow:0 1px 2px rgba(16,19,23,.06), 0 8px 24px rgba(16,19,23,.08);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1114; --surface:#171B21; --surface-2:#1E232A; --sunken:#12161B;
    --line:#272D36; --line-2:#333B46;
    --ink:#E7EAEE; --muted:#8A94A2; --faint:#6B7480;
    --accent:#6E97DE; --accent-ink:#0E1218; --accent-wash:#18202C;
    --attn:#E9A33F; --attn-bg:#2A2011;
    --good:#54BE85; --good-bg:#12251B;
    --bad:#EE8078;  --bad-bg:#2A1715;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --bg:#0E1114; --surface:#171B21; --surface-2:#1E232A; --sunken:#12161B;
  --line:#272D36; --line-2:#333B46;
  --ink:#E7EAEE; --muted:#8A94A2; --faint:#6B7480;
  --accent:#6E97DE; --accent-ink:#0E1218; --accent-wash:#18202C;
  --attn:#E9A33F; --attn-bg:#2A2011;
  --good:#54BE85; --good-bg:#12251B;
  --bad:#EE8078;  --bad-bg:#2A1715;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 15px/1.55 var(--sans); -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button,input,textarea,select{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.hide{display:none !important}

/* ---------------------------------------------------------------- shell */
.shell{display:grid; grid-template-columns:var(--rail) 1fr; height:100vh}

.rail{
  display:flex; flex-direction:column; gap:1px;
  background:var(--sunken); border-right:1px solid var(--line);
  padding:12px 8px; overflow-y:auto;
}
.rail .brand{
  display:flex; align-items:center; gap:7px; padding:2px 7px 12px;
  font:600 13px/1.2 var(--sans); letter-spacing:-.01em;
}
.rail .brand i{
  width:8px; height:8px; border-radius:2px; background:var(--accent); flex:none;
}
.rail .grp{
  font:600 9px/1 var(--cond); letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); padding:14px 7px 5px;
}
.navq{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  background:transparent; border:0; border-radius:6px; padding:5px 7px;
  cursor:pointer; color:var(--muted); font-size:13px; min-height:28px;
}
.navq svg{width:15px; height:15px; flex:none}
.navq:hover{background:var(--surface-2); color:var(--ink)}
.navq[aria-current="true"]{background:var(--surface); color:var(--ink); font-weight:500; box-shadow:0 1px 1px rgba(16,19,23,.05)}
.navq .ct{
  margin-left:auto; font:500 10px/1 var(--mono); color:var(--faint);
  font-variant-numeric:tabular-nums;
}
.navq.hot .ct{color:var(--attn)}
.navq .dot{width:6px;height:6px;border-radius:50%;background:var(--attn);flex:none}
.rail .foot{margin-top:auto; padding:10px 7px 0; border-top:1px solid var(--line)}
.rail .foot .who{font:400 10px/1.5 var(--mono); color:var(--faint); word-break:break-all; margin-bottom:4px}
.rail .foot button{
  background:none;border:0;padding:3px 0;color:var(--muted);font-size:11px;cursor:pointer
}
.rail .foot button:hover{color:var(--ink)}

.main{overflow-y:auto; position:relative}
.page{max-width:900px; margin:0 auto; padding:22px 22px 80px}

.phead{display:flex; align-items:flex-start; gap:14px; margin-bottom:4px; flex-wrap:wrap}
.phead h1{margin:0; font:600 22px/1.2 var(--sans); letter-spacing:-.02em}
.phead .sub{margin:2px 0 0; color:var(--muted); font-size:14px; max-width:62ch}
.phead .sp{flex:1}

.topbar{display:none}

/* ---------------------------------------------------------------- rows */
.eyebrow{
  font:600 10px/1 var(--cond); letter-spacing:.09em; text-transform:uppercase;
  color:var(--faint); margin:26px 0 8px; display:flex; align-items:center; gap:8px;
}
.eyebrow .n{font:500 11px/1 var(--mono); letter-spacing:0; color:var(--muted)}

.rows{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface)}
.row{
  position:relative; display:flex; align-items:center; gap:10px; width:100%;
  text-align:left; background:transparent; border:0; border-top:1px solid var(--line);
  padding:11px 14px 11px 17px; cursor:pointer; min-height:52px;
}
.row:first-child{border-top:0}
.row:hover{background:var(--surface-2)}
.row::before{content:""; position:absolute; inset:0 auto 0 0; width:3px; background:transparent}
.row.s-attn::before{background:var(--attn)}
.row.s-good::before{background:var(--good)}
.row.s-accent::before{background:var(--accent)}
.row.s-run::before{background:color-mix(in srgb,var(--accent) 45%,transparent)}
.row .body{flex:1; min-width:0}
.row .t{display:block; font-size:15px; font-weight:500; line-height:1.35}
.row .t.q{color:var(--muted); font-weight:400; font-style:italic}
.row .sub{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:3px;
  font:400 11px/1.4 var(--mono); color:var(--faint);
}
.row .right{flex:none; display:flex; align-items:center; gap:7px}

.chip{
  flex:none; font:600 10px/1 var(--cond); letter-spacing:.07em; text-transform:uppercase;
  border:1px solid var(--line-2); border-radius:999px; padding:3px 7px; color:var(--muted);
}
.chip.attn{color:var(--attn); border-color:var(--attn)}
.chip.good{color:var(--good); border-color:var(--good)}
.chip.bad{color:var(--bad); border-color:var(--bad)}
.chip.acc{color:var(--accent); border-color:var(--accent)}
.chip.solid{background:var(--attn); border-color:var(--attn); color:var(--bg)}

.empty{
  border:1px dashed var(--line-2); border-radius:var(--r); padding:26px 18px;
  text-align:center; color:var(--muted); font-size:14px;
}

/* ---------------------------------------------------------- composer */
.composer{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px; margin-bottom:6px}
textarea,input[type=email],input[type=text],input[type=date]{
  width:100%; background:var(--surface-2); color:var(--ink);
  border:1px solid transparent; border-radius:8px; padding:10px 11px;
  font:400 15px/1.5 var(--sans); resize:vertical;
}
textarea{min-height:60px}
.opts{display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; font-size:13px; color:var(--muted)}
.opts label{display:flex; align-items:center; gap:7px; cursor:pointer; min-height:32px}
.opts input{width:16px;height:16px;accent-color:var(--accent)}

.btn{
  background:var(--accent); color:var(--accent-ink); border:1px solid transparent;
  border-radius:999px; padding:9px 15px; min-height:36px;
  font:500 13px/1 var(--sans); cursor:pointer;
}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.danger{background:transparent;color:var(--bad);border-color:var(--bad)}
.btn:disabled{opacity:.45;cursor:default}
.row-btns{display:flex; gap:7px; flex-wrap:wrap; margin-top:12px}

/* ------------------------------------------------------------- sheet */
.scrim{
  position:fixed; inset:0; background:rgba(8,10,13,.42); z-index:40;
  opacity:0; pointer-events:none; transition:opacity .16s ease;
}
.scrim.on{opacity:1; pointer-events:auto}
.sheet{
  position:fixed; top:0; right:0; bottom:0; width:min(620px,100%);
  background:var(--bg); border-left:1px solid var(--line); z-index:41;
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .18s cubic-bezier(.32,.72,0,1);
  box-shadow:var(--shadow);
}
.sheet.on{transform:none}
.sheet .sh{
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  border-bottom:1px solid var(--line); background:var(--surface);
}
.sheet .sh .x{background:none;border:0;cursor:pointer;color:var(--muted);font-size:20px;line-height:1;padding:4px 8px}
.sheet .sh .x:hover{color:var(--ink)}
.sheet .sb{flex:1; overflow-y:auto; padding:18px 16px 40px}
.sheet h2{margin:0 0 6px; font:600 18px/1.3 var(--sans); letter-spacing:-.01em; text-wrap:balance}
.meta{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:0 0 14px; font:400 12px/1.5 var(--mono); color:var(--faint)}

.sec{margin-top:20px}
.sec > h3{
  font:600 10px/1 var(--cond); letter-spacing:.09em; text-transform:uppercase;
  color:var(--faint); margin:0 0 8px;
}
.card{background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:13px}
pre{
  margin:0; padding:12px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:8px; font:400 13px/1.6 var(--mono); white-space:pre-wrap;
  word-wrap:break-word; max-height:340px; overflow:auto;
}

.q{border-left:2px solid var(--attn); padding-left:12px; margin:0 0 14px}
.q p{margin:0 0 3px; font-size:15px; font-weight:500}
.q .why{margin:0 0 8px; font-size:13px; color:var(--muted)}

.hstep{display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--line)}
.hstep:first-child{border-top:0}
.hstep input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--attn)}
.hstep .t{flex:1; font-size:14px}
.hstep .t span{display:block; font-size:12px; color:var(--muted); margin-top:2px}
.hstep.done .t{text-decoration:line-through; color:var(--faint)}

.proof{border:1px solid var(--line); border-radius:9px; overflow:hidden; margin-bottom:9px; background:var(--surface)}
.proof .cap{
  font:600 10px/1.4 var(--cond); letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); padding:9px 11px; border-bottom:1px solid var(--line);
}
.proof .in{padding:11px}
.proof img{display:block;max-width:100%;border-radius:6px}
.proof a{color:var(--accent); font:400 13px/1.6 var(--mono); word-break:break-all}
.webview .bar{
  display:flex; align-items:center; gap:8px; padding:8px 11px;
  border-bottom:1px solid var(--line); font:400 12px/1.4 var(--mono); color:var(--faint);
}
.webview .bar span{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.webview .bar a{flex:none; font-family:var(--sans); font-size:12px; font-weight:500; text-decoration:none}
.webview iframe{display:block; width:100%; height:420px; border:0; background:#fff}
.webview .note{padding:8px 11px; border-top:1px solid var(--line); font-size:12px; color:var(--faint)}

.verdict{padding:11px 12px; border-radius:9px; font-size:14px; white-space:pre-wrap}
.verdict.pass{background:var(--good-bg); color:var(--good)}
.verdict.fail{background:var(--bad-bg); color:var(--bad)}

/* audit trail — what was tried, by whom, and whether it actually happened */
.tl{position:relative; padding-left:16px}
.tl::before{content:""; position:absolute; left:3px; top:5px; bottom:5px; width:1px; background:var(--line)}
.tl .ev{position:relative; padding:5px 0; font-size:13px; color:var(--muted)}
.tl .ev::before{content:""; position:absolute; left:-16px; top:11px; width:7px; height:7px; border-radius:50%; background:var(--line-2)}
.tl .ev.k-published::before,.tl .ev.k-verified::before{background:var(--good)}
.tl .ev.k-triage_failed::before,.tl .ev.k-publish_failed::before{background:var(--bad)}
.tl .ev b{color:var(--ink); font-weight:500}
.tl .ev time{font-family:var(--mono); font-size:11px; color:var(--faint); margin-left:6px}

/* ------------------------------------------------------- command palette */
.pal{
  position:fixed; inset:0; z-index:60; display:none;
  background:rgba(8,10,13,.42); padding:12vh 16px 16px;
}
.pal.on{display:block}
.pal .box{
  max-width:560px; margin:0 auto; background:var(--surface); border:1px solid var(--line-2);
  border-radius:12px; box-shadow:var(--shadow); overflow:hidden;
}
.pal input{background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:15px 16px; font-size:16px}
.pal .res{max-height:52vh; overflow-y:auto}
.pal .it{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:none; border:0; padding:10px 16px; cursor:pointer; font-size:14px; min-height:42px;
}
.pal .it[aria-selected="true"]{background:var(--accent-wash)}
.pal .it .k{
  margin-left:auto; font:600 9px/1 var(--cond); letter-spacing:.08em; text-transform:uppercase;
  color:var(--faint); border:1px solid var(--line-2); border-radius:4px; padding:3px 5px;
}
.pal .hintbar{padding:8px 16px; border-top:1px solid var(--line); font-size:12px; color:var(--faint)}

/* ------------------------------------------------------------- toast */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px);
  background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:999px;
  font-size:14px; z-index:70; opacity:0; pointer-events:none; transition:all .16s ease;
  max-width:min(520px,92vw); text-align:center;
}
.toast.on{opacity:1; transform:translate(-50%,0)}
.toast.bad{background:var(--bad); color:#fff}

/* ------------------------------------------------------------ project */
.pgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px}
.mstone{display:flex; gap:11px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--line)}
.mstone:first-child{border-top:0}
.mstone .num{
  flex:none; width:22px; height:22px; border-radius:50%; border:1px solid var(--line-2);
  display:grid; place-items:center; font:500 11px/1 var(--mono); color:var(--muted);
}
.mstone.done .num{background:var(--good); border-color:var(--good); color:#fff}
.mstone.next .num{border-color:var(--attn); color:var(--attn)}
.mstone .b{flex:1}
.mstone .b p{margin:0; font-size:14px; font-weight:500}
.mstone .b .why{margin:3px 0 0; font-size:13px; color:var(--muted)}
.mstone.done .b p{color:var(--muted); text-decoration:line-through}

.finding{padding:10px 0; border-top:1px solid var(--line); font-size:14px}
.finding:first-child{border-top:0}
.finding .k{
  display:inline-block; font:600 9px/1 var(--cond); letter-spacing:.08em; text-transform:uppercase;
  padding:3px 6px; border-radius:4px; margin-right:7px; vertical-align:1px;
  background:var(--surface-2); color:var(--muted);
}
.finding .k.risk{background:var(--bad-bg); color:var(--bad)}
.finding .k.question{background:var(--attn-bg); color:var(--attn)}
.finding .k.decision{background:var(--good-bg); color:var(--good)}
.finding a{color:var(--accent); font-size:12px; font-family:var(--mono)}

/* ------------------------------------------------------------- login */
.login{max-width:380px; margin:0 auto; padding:16vh 20px 40px; text-align:center; max-height:100vh; overflow-y:auto}
.login h1{font:600 22px/1.2 var(--sans); margin:0 0 6px}
.login p{color:var(--muted); font-size:14px; margin:0 0 20px}

/* -------------------------------------------------------------- phone */
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .rail{
    position:fixed; left:0; right:0; bottom:0; top:auto; z-index:30;
    flex-direction:row; gap:0; padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    border-right:0; border-top:1px solid var(--line); background:var(--surface);
  }
  .rail .brand,.rail .grp,.rail .foot{display:none}
  .navq{
    flex-direction:column; gap:3px; justify-content:center; align-items:center;
    padding:6px 2px; font-size:10px; min-height:48px; border-radius:9px;
  }
  .navq .ct{margin:0; font-size:10px}
  .navq svg{width:19px;height:19px}
  .topbar{
    display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:20;
    padding:12px 16px; background:var(--bg); border-bottom:1px solid var(--line);
  }
  .topbar h1{margin:0; font:600 16px/1.2 var(--sans); flex:1}
  .page{padding:16px 16px 96px}
  .phead h1{font-size:19px}
  .sheet{width:100%; top:6vh; border-left:0; border-top-left-radius:14px; border-top-right-radius:14px; border-top:1px solid var(--line)}
  .sheet.on{transform:none}
  .sheet{transform:translateY(100%)}
  .webview iframe{height:300px}
}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}