AI recommendation with evidence

HTML

<section class="card"><span class="eyebrow">RECOMMENDATION</span><h2>Use the Financial Change Review pattern</h2><p>The proposed change affects an approved quotation and requires a visible comparison.</p><div class="confidence"><span>Evidence strength</span><b>High · 86%</b><i><em></em></i></div><button id="sources">Show 3 sources</button><ul id="list" hidden><li>Design-system rule: consequential changes</li><li>Quotation workflow: approved state</li><li>Case study: complex workflow governance</li></ul></section>

CSS

*{box-sizing:border-box}body{margin:0;background:#fff;color:#151515;font:15px/1.45 Inter,system-ui,sans-serif}.card{width:calc(100% - 40px);max-width:680px;margin:20px auto;padding:24px;border:1px solid #deddd8;border-radius:16px;background:#fff}.eyebrow{font:600 11px ui-monospace,monospace;letter-spacing:.12em;color:#666}h2{font-size:21px;margin:6px 0 8px}p{color:#626262}button{border:1px solid #c9c8c3;background:#fff;border-radius:9px;padding:9px 13px;font-weight:650;cursor:pointer}.primary{background:#151515;color:#fff;border-color:#151515}.confidence{padding:15px;background:#f4f3ef;border-radius:12px;margin:18px 0}.confidence span,.confidence b{display:inline-block}.confidence b{float:right}.confidence i{display:block;clear:both;height:7px;margin-top:12px;background:#ddd;border-radius:99px;overflow:hidden}.confidence em{display:block;width:86%;height:100%;background:#1957ff}ul{margin:14px 0 0;padding:14px 14px 14px 34px;background:#f8f8f6;border-radius:10px}li{padding:5px}

JavaScript

sources.onclick=()=>{list.hidden=!list.hidden;sources.textContent=list.hidden?"Show 3 sources":"Hide sources"}