/* v2 · 02 "Every moving part aligned" list — a small live example inside each open row */
.cl-col{display:flex;flex-direction:column;gap:16px}
.cl-demo{max-width:360px;background:#fff;border:1px solid #e4e7f1;border-radius:14px;padding:14px 16px;font-size:12.5px;color:#3b3f66;box-shadow:0 10px 24px -18px rgba(27,29,74,.35)}
.cl-demo .cl-h{display:flex;justify-content:space-between;align-items:center;font-weight:600;color:#1b1d4a;margin-bottom:10px}
.cl-demo .cl-h small{font:500 10px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.08em;color:#7a7da8}
.cl-row{display:flex;align-items:center;gap:8px;margin-top:7px}
.cl-row>span:first-child{width:52px;font:500 10px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.08em;color:#7a7da8;text-transform:uppercase}
.cl-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:10px;background:#eceefe;color:#2a2d9f;font-weight:500}
.cl-chip.ok{background:#e3f6ec;color:#1f7a4d}
.cl-av{width:18px;height:18px;border-radius:50%;background:#c9cdf6;display:inline-grid;place-items:center;font-size:8px;color:#2a2d9f;font-weight:700}
.cl-note{margin-top:9px;font-size:11.5px;color:#5c5e80}
/* process tracker */
.cl-steps{display:flex;justify-content:space-between;position:relative;margin:6px 4px 4px}
.cl-steps::before{content:"";position:absolute;left:8px;right:8px;top:8px;height:2px;background:#e4e7f1}
.cl-steps i{position:absolute;left:8px;top:8px;height:2px;width:0;background:#2a2d9f}
.cl-steps span{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:#7a7da8}
.cl-steps span::before{content:"";width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #c9cdf6;transition:background .3s,border-color .3s}
.cl-steps span.on{color:#1b1d4a}.cl-steps span.on::before{background:#2a2d9f;border-color:#2a2d9f}
/* data sparkline */
.cl-spark{width:100%;height:56px;display:block}
.cl-spark path{fill:none;stroke:#2a2d9f;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cl-spark .ar{fill:rgba(42,45,159,.08);stroke:none}
/* governance log */
.cl-log div{display:flex;gap:10px;font:500 11px/1.9 "JetBrains Mono",ui-monospace,monospace;color:#3b3f66;white-space:nowrap;overflow:hidden}
.cl-log div b{color:#7a7da8;font-weight:500}
@media(max-width:760px){.cl-demo{max-width:none}}
.cl-col>p{font-size:14px;line-height:1.7;color:var(--muted);margin:0}