/* /demo sample workspace: company-owned styles (tokens.css is regenerated by the kernel). */
.demo-intro{padding:var(--space-5) 0 var(--space-3)}
.demo-banner{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-2) var(--space-3);margin:var(--space-3) 0 0}
.demo-run{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-4);margin:var(--space-3) 0}
.demo-run-head{display:flex;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;align-items:flex-start}
.demo-run-head h2{margin:0 0 4px}
.demo-run-head p{margin:0}
.demo-run-actions{display:flex;gap:var(--space-2)}
.btn.ghost,button.ghost{background:transparent;color:var(--accent);border:1px solid var(--line)}
.demo-status{margin:var(--space-3) 0;padding:var(--space-2) var(--space-3);border-left:3px solid var(--good);background:var(--bg)}
#demo[data-state="reverted"] .demo-status{border-left-color:var(--warn)}
.demo-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
@media (max-width:820px){.demo-cols{grid-template-columns:1fr}}
.demo-ledger{list-style:none;margin:0;padding:0}
.demo-ledger li{padding:8px 0;border-bottom:1px solid var(--line);font-size:var(--text-sm)}
.demo-ledger li.is-reverted{text-decoration:line-through;opacity:.5}
.demo-ledger li.is-reverted .chip{text-decoration:none}
.demo-draft{border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-3);margin-bottom:var(--space-3);background:var(--bg)}
.demo-draft header{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);font-size:var(--text-sm)}
.demo-draft h4{margin:var(--space-2) 0 4px}
.demo-draft p{margin:4px 0}
.demo-draft.is-gone{opacity:.45}
.demo-draft-actions{display:flex;gap:var(--space-2);margin-top:var(--space-2)}
.demo-state{font-size:var(--text-sm);color:var(--good);min-height:1.2em}
.demo-records{margin:var(--space-5) 0}
#contacts tr.is-reverted{text-decoration:line-through;opacity:.45}
.demo-start{margin:var(--space-5) 0 var(--space-6)}
#demo [hidden]{display:none!important}
.demo-link{margin:var(--space-2) 0 0;font-size:var(--text-sm)}