*{box-sizing:border-box}img{max-width:100%}
:root{
  --paper:#F2F4F3; --panel:#FFFFFF; --panel-2:#F6F8F7;
  --ink:#1C2725; --slate:#616F6B; --faint:#95A19D;
  --rule:#DCE2E0; --rule-soft:#E8ECEA;
  --answered:#157F66; --clarify:#B07714; --rejected:#AD3B31;
  --answered-wash:#157f6614; --clarify-wash:#b0771416; --rejected-wash:#ad3b3114;
  --accent:#157F66;
  --shadow:0 1px 2px #1c272510, 0 6px 22px -16px #1c272530;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --sans:'Archivo',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;}
.wrap{max-width:960px;margin:0 auto;padding:0 22px 90px;}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}
button{font-family:inherit;cursor:pointer;}
a{color:inherit;}

/* header */
.top{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:28px 0 0;}
.top h1{margin:0;font-size:22px;font-weight:700;letter-spacing:-.01em;font-family:var(--mono);}
.top h1 .u{color:var(--accent);}
.top .sub{color:var(--slate);font-size:13px;margin-top:3px;}
.flagchip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--rule);background:var(--panel);
  border-radius:20px;padding:7px 13px;box-shadow:var(--shadow);font-size:12.5px;color:var(--slate);}
.flagchip .dot{width:7px;height:7px;border-radius:50%;background:var(--faint);}
.flagchip.on{color:var(--ink);cursor:pointer;} .flagchip.on .dot{background:var(--rejected);box-shadow:0 0 0 3px var(--rejected-wash);}
.flagchip b{font-family:var(--mono);}

.nav{display:flex;gap:4px;margin:20px 0 26px;border-bottom:1px solid var(--rule);}
.nav a{padding:9px 14px;font-size:13.5px;color:var(--slate);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;}
.nav a:hover{color:var(--ink);}
.nav a.active{color:var(--ink);font-weight:600;border-bottom-color:var(--accent);}

/* summary */
.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:30px;}
.tile{background:var(--panel);border:1px solid var(--rule);border-radius:8px;padding:16px 18px;box-shadow:var(--shadow);}
.tile.link{cursor:pointer;} .tile.link:hover{border-color:var(--accent);}
.tile .n{font-family:var(--mono);font-size:29px;font-weight:600;line-height:1;letter-spacing:-.01em;}
.tile .l{font-size:12.5px;color:var(--slate);margin-top:8px;}
.tile.ans .n{color:var(--answered);} .tile.clar .n{color:var(--clarify);} .tile.rej .n{color:var(--rejected);}

.stitle{font-size:15px;font-weight:600;margin:0 0 14px;}

/* category table */
.ctable{width:100%;border-collapse:collapse;}
.ctable th{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);font-weight:500;text-align:left;padding:0 14px 10px;}
.ctable th.r,.ctable td.r{text-align:right;}
.ctable tr.row{cursor:pointer;}
.ctable td{padding:15px 14px;border-top:1px solid var(--rule);vertical-align:middle;}
.ctable tr.row:hover td{background:var(--panel-2);}
.ctable .nm{font-weight:600;font-size:15px;}
.ctable .big{font-family:var(--mono);font-size:18px;font-weight:600;}
.microbar{display:flex;height:8px;width:170px;border-radius:5px;overflow:hidden;background:var(--rule-soft);}
.microbar i{display:block;height:100%;}
.microbar i.ans{background:var(--answered);} .microbar i.clar{background:var(--clarify);} .microbar i.rej{background:var(--rejected);}
.acr{font-family:var(--mono);font-size:12.5px;display:inline-flex;gap:11px;justify-content:flex-end;}
.acr .a{color:var(--answered);} .acr .c{color:var(--clarify);} .acr .r{color:var(--rejected);} .acr .z{color:var(--faint);}
.chev{color:var(--faint);}

/* outcome text — no pill, no dot, colour only */
.oc{font-size:13.5px;font-weight:600;}
.oc.answered{color:var(--answered);} .oc.clarified{color:var(--clarify);} .oc.rejected{color:var(--rejected);}

/* crumb */
.crumb{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--slate);margin-bottom:8px;}
.crumb button{border:0;background:none;color:var(--accent);font-size:13px;padding:0;}
.crumb button:hover{text-decoration:underline;}
.crumb .sep{color:var(--faint);}

.lhead{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin:2px 0 16px;}
.lhead h2{margin:0;font-size:22px;font-weight:700;letter-spacing:-.015em;}
.lhead .ct{font-size:13px;color:var(--slate);}

/* controls */
.controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px;}
.search{flex:1;min-width:220px;display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--rule);border-radius:8px;padding:10px 13px;box-shadow:var(--shadow);}
.search input{border:0;outline:0;background:none;color:var(--ink);font-family:inherit;font-size:14px;width:100%;}
.search .ic{color:var(--faint);}
.filters{display:flex;gap:6px;}
.filters button{border:1px solid var(--rule);background:var(--panel);color:var(--slate);border-radius:20px;padding:8px 13px;font-size:12.5px;}
.filters button.on{border-color:var(--accent);color:var(--ink);font-weight:600;background:var(--panel-2);}
/* boolean "has notes" filter pill (Conversations tab) */
.notefilter{border:1px solid var(--rule);background:var(--panel);color:var(--slate);border-radius:20px;padding:8px 13px;font-size:12.5px;white-space:nowrap;cursor:pointer;}
.notefilter::before{content:"\1F4DD";margin-right:5px;font-size:11px;}
.notefilter.on{border-color:var(--accent);color:var(--ink);font-weight:600;background:var(--panel-2);}
.origtog{border:1px solid var(--rule);background:var(--panel);color:var(--slate);border-radius:20px;padding:8px 13px;font-size:12.5px;white-space:nowrap;}
.origtog.on{border-color:var(--accent);color:var(--ink);font-weight:600;background:var(--panel-2);}

/* question table (minimal) */
.qtable{width:100%;border-collapse:collapse;}
.qtable th{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);font-weight:500;text-align:left;padding:0 14px 10px;}
.qtable td{padding:14px 14px;border-top:1px solid var(--rule);vertical-align:middle;}
.qtable tr.qrow{cursor:pointer;} .qtable tr.qrow:hover td{background:var(--panel-2);}
.qtable tr.qrow.visited td{background:var(--answered-wash);}
.qtable tr.qrow.visited td:first-child{box-shadow:inset 3px 0 0 var(--accent);}
.qtable .rephr{font-weight:500;font-size:14.5px;line-height:1.35;}
.hasnote{font-size:11px;opacity:.8;margin-right:2px;vertical-align:middle;}
.qtable .cat{font-size:13px;color:var(--slate);}
.qtable .when{font-family:var(--mono);font-size:12.5px;color:var(--slate);white-space:nowrap;}
.empty{padding:40px 14px;text-align:center;color:var(--faint);font-size:14px;}

/* conversation */
.chead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:6px;}
.chead h2{margin:0 0 6px;font-size:21px;font-weight:700;letter-spacing:-.015em;}
.chead .tid{font-family:var(--mono);font-size:12px;color:var(--faint);}
.cact{display:flex;gap:10px;align-items:center;flex-shrink:0;}
.btn{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;border:1px solid var(--rule);background:var(--panel);color:var(--ink);padding:8px 13px;border-radius:7px;box-shadow:var(--shadow);}
.btn:hover{border-color:var(--accent);color:var(--accent);}
.btn.copied{border-color:var(--answered);color:var(--answered);background:var(--answered-wash);}
.cvitals{font-family:var(--mono);font-size:12px;color:var(--slate);display:flex;gap:16px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-bottom:6px;}
.cvitals .k{color:var(--faint);} .cvitals b{color:var(--ink);}
.cvitals .warn{color:var(--rejected);}

.turn{display:grid;grid-template-columns:1fr 250px;gap:24px;padding:26px 0;border-bottom:1px solid var(--rule);scroll-margin-top:14px;}
.turn.focus{background:var(--answered-wash);border-left:2px solid var(--accent);margin:0 -16px;padding:26px 16px;border-radius:0 8px 8px 0;}
.role{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--slate);display:flex;align-items:center;gap:9px;margin-bottom:9px;text-transform:uppercase;}
.role .anchor{opacity:0;background:none;border:0;color:var(--accent);font-family:var(--mono);font-size:11px;padding:0;}
.turn:hover .role .anchor,.role .anchor:focus{opacity:1;}
.role .lat{margin-left:auto;color:var(--slate);}
.role .lat.warn{color:var(--rejected);}
.user-q{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--ink);background:var(--panel);
  border:1px solid var(--rule);border-left:3px solid var(--slate);border-radius:0 8px 8px 0;
  padding:12px 15px;line-height:1.5;white-space:pre-wrap;}
.tnote{font-size:11.5px;color:var(--slate);margin-top:7px;}
.tnote button{border:0;background:none;color:var(--accent);font-size:11.5px;padding:0;text-decoration:underline;cursor:pointer;font-family:inherit;}
.agent-a{font-size:14.5px;line-height:1.62;}

/* pure markdown */
.md h1{font-size:20px;} .md h2{font-size:16px;} .md h3{font-size:14px;}
.md h4,.md h5,.md h6{font-size:12.5px;color:var(--slate);text-transform:uppercase;letter-spacing:.03em;}
.md h1,.md h2,.md h3,.md h4,.md h5,.md h6{font-weight:700;margin:18px 0 8px;line-height:1.25;}
.md h2{padding-bottom:4px;border-bottom:1px solid var(--rule);}
.md h1:first-child,.md h2:first-child,.md h3:first-child{margin-top:0;}
.md :first-child{margin-top:0;}
.md p{margin:9px 0;} .md ul,.md ol{margin:8px 0;padding-left:22px;} .md li{margin:3px 0;}
.md strong{font-weight:600;} .md em{font-style:italic;}
.md code{font-family:var(--mono);font-size:12.5px;background:var(--panel-2);padding:1px 5px;border-radius:4px;border:1px solid var(--rule);}
.md hr{border:0;border-top:1px solid var(--rule);margin:16px 0;}
.md .tbl-wrap{overflow-x:auto;margin:12px 0;border:1px solid var(--rule);border-radius:8px;}
.md table{border-collapse:collapse;width:100%;font-size:13px;}
.md th{background:var(--panel-2);text-align:left;padding:8px 11px;border-bottom:1px solid var(--rule);font-weight:600;}
.md td{padding:8px 11px;border-bottom:1px solid var(--rule-soft);}
.md tr:last-child td{border-bottom:0;}
.md details.hivdb{margin:14px 0 0;border-top:1px solid var(--rule);padding-top:10px;}
.md summary{cursor:pointer;font-family:var(--mono);font-size:12px;color:var(--slate);list-style:none;display:inline-flex;align-items:center;gap:6px;}
.md summary::-webkit-details-marker{display:none;}
.md summary::before{content:"▸";color:var(--faint);}
.md details[open] summary::before{content:"▾";}
.md details.hivdb > :nth-child(2){margin-top:10px;}

/* notes */
.note-rail{border-left:1px solid var(--rule);padding-left:22px;}
.note-rail .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin-bottom:10px;}
.note{background:var(--clarify-wash);border:1px solid var(--rule);border-left:2px solid var(--clarify);border-radius:0 8px 8px 0;padding:11px 13px;font-size:13px;line-height:1.5;margin-bottom:10px;}
.note .who{font-family:var(--mono);font-size:10px;letter-spacing:.03em;color:var(--clarify);text-transform:uppercase;display:flex;justify-content:space-between;margin-bottom:5px;}
.note .txt{color:var(--ink);}
.note .acts{display:flex;gap:12px;margin-top:8px;}
.note .acts button{border:0;background:none;color:var(--slate);font-size:11.5px;padding:0;}
.note .acts button:hover{color:var(--accent);text-decoration:underline;}
.note-add{width:100%;font-family:var(--mono);font-size:12px;color:var(--faint);background:none;border:1px dashed var(--rule);border-radius:8px;padding:11px;text-align:left;}
.note-add:hover{color:var(--accent);border-color:var(--accent);}
.note-form textarea{width:100%;min-height:80px;resize:vertical;font-family:var(--sans);font-size:13px;line-height:1.5;border:1px solid var(--accent);border-radius:8px;padding:10px 12px;background:var(--panel);color:var(--ink);outline:0;}
.note-form .row{display:flex;gap:8px;margin-top:8px;}
.note-form .save{background:var(--accent);color:#fff;border:0;border-radius:7px;padding:8px 14px;font-size:12.5px;font-weight:600;}
.note-form .cancel{background:none;border:1px solid var(--rule);color:var(--slate);border-radius:7px;padding:8px 12px;font-size:12.5px;}

.mocknote{margin-top:38px;font-size:12px;color:var(--faint);line-height:1.7;border-top:1px solid var(--rule);padding-top:16px;}
.mocknote b{color:var(--slate);}

@media (max-width:720px){
  .top{flex-direction:column;align-items:flex-start;gap:12px;}
  .summary{grid-template-columns:repeat(2,1fr);}
  .turn{grid-template-columns:1fr;gap:14px;}
  .note-rail{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:16px;}
  .microbar{width:110px;} .qtable .catcol,.qtable .whencol{display:none;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;}}

/* production additions */
.note-form .note-name{width:100%;font-family:var(--sans);font-size:12.5px;border:1px solid var(--rule);
  border-radius:7px;padding:8px 10px;margin-bottom:7px;background:var(--panel);color:var(--ink);outline:0;}
.note-form .note-name:focus{border-color:var(--accent);}
.note .acts button:disabled,.note-form .save:disabled{opacity:.6;cursor:default;}
.loading{padding:80px 0;text-align:center;color:var(--faint);font-family:var(--mono);font-size:14px;}
.loaderr{padding:70px 22px;text-align:center;color:var(--slate);}
.loaderr p{font-size:16px;font-weight:600;color:var(--ink);margin:0 0 14px;}
.loaderr .sub{margin-top:14px;font-family:var(--mono);font-size:12px;color:var(--faint);}

/* ---- UI fixes ---- */
/* overview: the A/C/R micro-bar spans the same width as its header label */
.ctable th.acrh{white-space:nowrap;width:1%;}
.ctable td.acrcell{width:1%;}
.microbar{width:100%;}

/* uniform single-line rows so the "show original" toggle never changes row height */
.qtable{table-layout:fixed;}
.qtable td.rephr,.qtable td.cat{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qtable .cw-cat{width:220px;} .qtable .cw-out{width:118px;} .qtable .cw-when{width:84px;}
.qtable .cw-msg{width:130px;} .qtable .cw-chev{width:34px;}

/* the display toggle is not a filter — style it as a text toggle, not a capsule */
.origtog{border:0;background:none;color:var(--slate);font-size:12.5px;cursor:pointer;
  padding:8px 2px;margin-left:8px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  min-width:132px;}   /* reserve space so toggling the label doesn't shift other controls */
.origtog::before{content:"⇆";color:var(--slate);font-size:13px;}
.origtog:hover{color:var(--ink);}
.origtog.on{color:var(--accent);font-weight:600;background:none;border-color:transparent;}
.origtog.on::before{color:var(--accent);}

/* let the Category column absorb table slack so the A/C/R bar == its header width */
.ctable th:first-child{width:100%;}

/* note author — cached, shown as a line not a field on return */
.note-as{font-size:12px;color:var(--slate);margin-bottom:8px;}
.note-as b{color:var(--ink);font-weight:600;}
.linkbtn{border:0;background:none;color:var(--accent);font-size:12px;padding:0;cursor:pointer;text-decoration:underline;}
.linkbtn:hover{color:var(--ink);}

.qtable td.syncdet{white-space:normal;word-break:break-word;font-size:13px;line-height:1.4;}